umarsheikh13 · SyedAzeemJaved · Jan 17, 2022
diff --git a/config.json b/config.json
@@ -1,8 +1,11 @@
 {
-    "theme": "maroon",
-    "noSlides": 3,
+    "theme": "navy",
+    "noSlides": 1,
     "sliderSpeed": 5,
-    "about": "<p>This website allows you to view East London Mosque's prayer times quickly and easily from both desktop and mobile browsers.</p><p>We like to thank you for using ELM Times, if you find it useful please share it with friends and family. If you experience any issues then please get in touch by contacting Umar via <a href='mailto:hello@umarsheikh.co.uk'>email</a> or <a href='https://twitter.com/umarsheikh' target='_blank' rel='noopener noreferrer'>twitter</a>.</p><p>If you would like to use this web app for your own mosque, the code is available on <a href='https://github.com/umarsheikh13/elmtimes' target='_blank' rel='noopener noreferrer'>GitHub</a>.</p>",
-    "gaid": "UA-134866480-1",
-    "elm": false
-}
+    "about": "<p><b>Latest News - December 2021</b></p><p>Prayer Times for 2022 has been updated</p><p><b>🕌 Friday Jumu'ah (Winter Time) 📿</b><p><p><b>1st Khutbah starts 12.30pm</b><p><b>2nd Khutbah starts 1.15pm</b><p>Contactless Donation Payment is also available in the Masjid and you can also donate via this link <a href='https://www.muslimgiving.org/Coventrycross' target='_blank'>Donation for Coventry Cross Masjid Extension</a></p> <p><b> JazakAllahu Khairan 🤲</b></p><p><p></p><p><b>July 2021 - 🕋 Eid Mubarak 🕋</b><b></p><p></p> ☾ Eid ul Adha Prayers</b> - July 2021<p><p><b> 1st Jamā'ah 08.00am</b><p><b>2nd Jamā'ah 09.00am</b><p> Please remember to Wear a Mask, Bring a Prayer Mat and Maintain Social Distancing</p><b>🕌 Friday Jumu'ah (Summer Time) 📿</b><p><p><b>1st Khutbah starts 1.30pm</b><p><b>2nd Khutbah starts 2.30pm</b><p>Contactless Donation Payment is also available in the Masjid and you can also donate via this link <a href='https://www.muslimgiving.org/Coventrycross' target='_blank'>Donation for Coventry Cross Masjid Extension</a></p> <p><b> JazakAllahu Khairan 🤲</b></p> <p> <p></p><p></p><b>30 November 2020 -</b> The Masjid reopens 2nd December 2020 at Fajr Prayer<p><b> Jumu'ah Times<p> 1st Khutbah starts 12.30pm - Doors Open 12.10pm</b><p><b>2nd Khutbah starts 1.20pm - Doors Open 1.05pm</b><p> Please remember to Wear a Mask, Bring a Prayer Mat and Maintain Social Distancing</p> <p> JazakAllahu Khairan</p>  <b>30 June 2020 -</b> Congregational Prayer Guidelines Download PDF A5  <a href='https://www.coventrycrossmosque.co.uk/Covid.pdf' target='_blank'>CCM Guidelines COVID 19 </a></p></p> <p><p><b>About us</b></p>Coventry Cross Mosque in Bromley By Bow was established in March 1983. It was the first mosque to be given by Tower Hamlets Council to the residents to run as a place of worship along with community activities. Since then the once known residential flats has been transformed into a well loved place of worship and community centre. It has gone through many stages of development and extensions to keep up to date with the local residential and estate modernisation to accommodate the needs of the local people. Please donate to raise funds for the latest development and extension of the mosque.</p> <p>Donation link for the Extension Plan at Coventry Cross Mosque: <a href='https://www.muslimgiving.org/Coventrycross' target='_blank'>https://www.muslimgiving.org/Coventrycross</a></p> <p>Coventry Cross Mosque,<br> 6 Broxbourne House<br> Empson Street, London E3 3LJ</p> <p>Nearest Stations: Devons Road DLR & Bromley By Bow Station</p> <p>Jummah Winter Time: 13.00<br> Jummah Summer Time 13.30</p> <p class='video'> <iframe width='560' height='315' src='https://www.youtube.com/embed/8fHVJm7Nfy8' frameborder='0' allow='accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture' allowfullscreen></iframe></p>",
+    "events": "<p><b>Latest Events / Schedule - 2022</b></p><br><p><b>🌇 Evening Madrasah</b></p><p>Monday to Friday (5pm - 7pm)</p><br><p><b>📖 Darsul Hadeeth</b></p><p>Monday Evening (Times Vary)</p><br><p><b>🔍Tafsirul Quran</b></p><p>Friday Evening (Times Vary)</p>",
+    "donations": "<p><b>Coventry Cross Masjid Extension</b></p><br><p><b>“Whoever builds a mosque for Allah, Allah will build for him a house like it in Paradise.”</b></p><p>We are raising money for our much needed extension of our local masjid.</p><p>By the grace of Allah, our mosque goers have grown significantly over the last four decades. By Allah’s mercy we already have approved and built 3 extensions but the demand still grows for further space.</p><p>Alhamdulillah our request to build a further extension has been approved and we are now ready to start work after Ramadan.</p><p>You have responded before to our calls and we urgently need your response again.</p><p><b>Please donate generously.</b> You can <a href='https://www.muslimgiving.org/coventrycrossmasjid' target='_blank'>click here</a> to donate or use the button below.</p><p>May Allah reward you abundantly and grant you success in this life, but more importantly in the hereafter. Ameen.</p>",
+    "donationsLink": "https://www.muslimgiving.org/coventrycrossmasjid",
+    "scrollingText": "This is a sample text that is really really really really really long.",
+    "disableAsr2": true
+}
diff --git a/package.json b/package.json
@@ -1,59 +1,60 @@
 {
-  "name": "elmtimes",
-  "version": "2.0.3",
-  "description": "ELM Times - Single Page Prayer Times Web App",
-  "main": "index.js",
-  "scripts": {
-    "build": "webpack --mode production --config webpack.prod.config.babel.js",
-    "watch": "webpack --watch --mode development --config webpack.dev.config.babel.js",
-    "dev": "webpack-dev-server --mode development --config webpack.dev.config.babel.js",
-    "test": "NODE_ENV='test' mocha tests --require @babel/register --timeout 10000"
-  },
-  "devDependencies": {
-    "@babel/core": "7.3.4",
-    "@babel/preset-env": "7.3.4",
-    "@babel/preset-react": "7.0.0",
-    "@babel/register": "7.0.0",
-    "autoprefixer": "9.4.10",
-    "babel-eslint": "10.0.1",
-    "babel-loader": "8.0.5",
-    "babel-plugin-transform-react-jsx": "6.24.1",
-    "chai": "4.2.0",
-    "clean-webpack-plugin": "1.0.1",
-    "css-loader": "2.1.1",
-    "css-mqpacker": "7.0.0",
-    "eslint": "5.15.1",
-    "eslint-config-airbnb": "17.1.0",
-    "eslint-plugin-import": "2.16.0",
-    "eslint-plugin-jsx-a11y": "6.2.1",
-    "eslint-plugin-react": "7.12.4",
-    "file-loader": "3.0.1",
-    "html-webpack-plugin": "3.2.0",
-    "image-webpack-loader": "4.6.0",
-    "mini-css-extract-plugin": "0.5.0",
-    "mocha": "6.0.2",
-    "node-sass": "4.11.0",
-    "node-sass-utils": "1.1.2",
-    "optimize-css-assets-webpack-plugin": "5.0.1",
-    "postcss-loader": "3.0.0",
-    "sass-loader": "7.1.0",
-    "style-loader": "0.23.1",
-    "uglifyjs-webpack-plugin": "2.1.2",
-    "url-loader": "1.1.2",
-    "webpack": "4.29.6",
-    "webpack-cli": "3.2.3",
-    "webpack-dev-server": "3.2.1"
-  },
-  "dependencies": {
-    "axios": "0.18.1",
-    "cash-dom": "2.3.9",
-    "linkstate": "1.1.1",
-    "normalize.css": "8.0.1",
-    "papaparse": "4.6.3",
-    "preact": "8.4.2",
-    "preact-compat": "3.18.4",
-    "react-ga": "2.5.7",
-    "sass-mq": "5.0.0",
-    "underscore": "1.9.1"
-  }
+    "name": "elmtimes",
+    "version": "2.0.3",
+    "description": "ELM Times - Single Page Prayer Times Web App",
+    "main": "index.js",
+    "scripts": {
+        "build": "webpack --mode production --config webpack.prod.config.babel.js",
+        "watch": "webpack --watch --mode development --config webpack.dev.config.babel.js",
+        "dev": "webpack-dev-server --mode development --config webpack.dev.config.babel.js",
+        "test": "NODE_ENV='test' mocha tests --require @babel/register --timeout 10000"
+    },
+    "devDependencies": {
+        "@babel/core": "7.3.4",
+        "@babel/preset-env": "7.3.4",
+        "@babel/preset-react": "7.0.0",
+        "@babel/register": "7.0.0",
+        "autoprefixer": "9.4.10",
+        "babel-eslint": "10.0.1",
+        "babel-loader": "8.0.5",
+        "babel-plugin-transform-react-jsx": "6.24.1",
+        "chai": "4.2.0",
+        "clean-webpack-plugin": "1.0.1",
+        "css-loader": "2.1.1",
+        "css-mqpacker": "7.0.0",
+        "eslint": "5.15.1",
+        "eslint-config-airbnb": "17.1.0",
+        "eslint-plugin-import": "2.16.0",
+        "eslint-plugin-jsx-a11y": "6.2.1",
+        "eslint-plugin-react": "7.12.4",
+        "file-loader": "3.0.1",
+        "html-webpack-plugin": "3.2.0",
+        "image-webpack-loader": "4.6.0",
+        "mini-css-extract-plugin": "0.5.0",
+        "mocha": "6.0.2",
+        "node-sass": "4.12.0",
+        "node-sass-utils": "1.1.2",
+        "optimize-css-assets-webpack-plugin": "5.0.1",
+        "postcss-loader": "3.0.0",
+        "sass-loader": "7.1.0",
+        "style-loader": "0.23.1",
+        "uglifyjs-webpack-plugin": "2.1.2",
+        "url-loader": "1.1.2",
+        "webpack": "4.29.6",
+        "webpack-cli": "3.2.3",
+        "webpack-dev-server": "3.2.1"
+    },
+    "dependencies": {
+        "axios": "0.18.1",
+        "cash-dom": "2.3.9",
+        "linkstate": "1.1.1",
+        "normalize.css": "8.0.1",
+        "papaparse": "4.6.3",
+        "preact": "8.4.2",
+        "preact-compat": "3.18.4",
+        "react-ga": "2.5.7",
+        "react-text-marquee": "1.0.1",
+        "sass-mq": "5.0.0",
+        "underscore": "1.9.1"
+    }
 }
diff --git a/src/components/Body/index.js b/src/components/Body/index.js
@@ -5,6 +5,8 @@ import Home from '../Screens/Home';
 import Videos from '../Screens/Videos';
 import Settings from '../Screens/Settings';
 import About from '../Screens/About';
+import Events from '../Screens/Events';
+import Donations from '../Screens/Donations';
 import './style.scss';
 
 export default class Body extends preact.Component {
@@ -19,6 +21,11 @@ export default class Body extends preact.Component {
                 title: 'Home',
                 component: Home
             },
+            {
+                id: 'events',
+                title: props.options.eventsTitle || 'Events',
+                component: Events
+            },
             {
                 id: 'about',
                 title: props.options.aboutTitle || 'About',
@@ -29,6 +36,11 @@ export default class Body extends preact.Component {
                 title: 'Videos',
                 component: Videos
             },
+            {
+                id: 'donations',
+                title: 'Donations',
+                component: Donations
+            },
             {
                 id: 'settings',
                 title: 'Settings',
@@ -42,7 +54,7 @@ export default class Body extends preact.Component {
             !('youTubeKey' in this.props.options) ||
             ('youTubeKey' in this.props.options && this.props.options.youTubeKey.length === 0)
         ) {
-            this.screens.splice(2, 1);
+            this.screens.splice(3, 1);
         }
         this.state = {
             screen: 'home',
@@ -91,7 +103,7 @@ export default class Body extends preact.Component {
                         <nav className={`body__nav${(state.menuOpen) ? ' is-open' : ''}`}>
                             <ul>
                                 {this.screens.map(screen => (
-                                    <li className={(state.screen == screen.id) ? ' ' + Classes.active : ''} key={screen.id}><a onClick={e => this.changeScreen(e, screen.id)}>{ screen.title }</a></li>
+                                    <li className={(state.screen == screen.id) ? ' ' + Classes.active : ''} key={screen.id}><a onClick={e => this.changeScreen(e, screen.id)}>{screen.title}</a></li>
                                 ))}
                             </ul>
                         </nav>

diff --git a/src/components/Screens/Donations/index.js b/src/components/Screens/Donations/index.js
@@ -0,0 +1,21 @@
+import preact from 'preact';
+import './style.scss';
+
+export default class Donations extends preact.Component {
+    render(props) {
+        return (
+            <section className="body__content">
+                <div className="body__inner">
+                    <h1 className="body__title">Donations</h1>
+                    <div dangerouslySetInnerHTML={{ __html: props.options.donations }}></div>
+                    <a
+                        className="donations_button"
+                        target='_blank'
+                        href={props.options.donationsLink || 'https://www.muslimgiving.org/coventrycrossmasjid'}>
+                        <button>Donate Now</button>
+                    </a>
+                </div>
+            </section>
+        );
+    }
+}
diff --git a/src/components/Screens/Donations/style.scss b/src/components/Screens/Donations/style.scss
@@ -0,0 +1,23 @@
+@import "../../../scss/functions";
+@import "../../../scss/variables";
+
+.donations_button {
+    button {
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        appearance: none;
+        background-color: rgba(0, 0, 0, 0.3);
+        padding: pxrem(15px) pxrem(20px);
+        border-radius: 0;
+        width: 100%;
+        border: 0 none;
+        color: $color-white;
+    }
+
+    button {
+        background-color: $color-white;
+        font-weight: bold;
+        width: auto;
+        color: $color-gray-900;
+    }
+}
diff --git a/src/components/Screens/Events/index.js b/src/components/Screens/Events/index.js
@@ -0,0 +1,14 @@
+import preact from 'preact';
+
+export default class Events extends preact.Component {
+    render(props) {
+        return (
+            <section className="body__content">
+                <div className="body__inner">
+                    <h1 className="body__title">{ props.options.eventsTitle || 'Events' }</h1>
+                    <div dangerouslySetInnerHTML={{ __html: props.options.events }}></div>
+                </div>
+            </section>
+        );
+    }
+}
diff --git a/src/components/ScrollingText/index.js b/src/components/ScrollingText/index.js
@@ -0,0 +1,15 @@
+import preact from 'preact';
+import Marquee from 'react-text-marquee';
+
+export default class ScrollingText extends preact.Component {
+    render({ text }) {
+        return (
+            <Marquee
+                text={text || 'No major news for now.'}
+                hoverToStop={true}
+                loop={true}
+                leading={600}
+                trailing={600} />
+        );
+    }
+}