diff --git a/debug.log b/debug.log new file mode 100644 index 0000000..9c543f6 --- /dev/null +++ b/debug.log @@ -0,0 +1 @@ +[0518/140216.260:WARNING:minidump_to_upload_parameters.cc(36)] duplicate key guid, discarding value 795e6597-3360-43bc-a0b5-a4fdfcddf62b diff --git a/package-lock.json b/package-lock.json index 36663e4..6701e77 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6296,6 +6296,19 @@ "resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz", "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==" }, + "history": { + "version": "4.10.1", + "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz", + "integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==", + "requires": { + "@babel/runtime": "^7.1.2", + "loose-envify": "^1.2.0", + "resolve-pathname": "^3.0.0", + "tiny-invariant": "^1.0.2", + "tiny-warning": "^1.0.0", + "value-equal": "^1.0.1" + } + }, "hmac-drbg": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz", @@ -6306,6 +6319,14 @@ "minimalistic-crypto-utils": "^1.0.1" } }, + "hoist-non-react-statics": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", + "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==", + "requires": { + "react-is": "^16.7.0" + } + }, "hosted-git-info": { "version": "2.8.8", "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.8.tgz", @@ -8217,6 +8238,15 @@ "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.0.tgz", "integrity": "sha1-z8RcN+nsDY8KDsPdTvf3w6vjklY=" }, + "mini-create-react-context": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/mini-create-react-context/-/mini-create-react-context-0.4.0.tgz", + "integrity": "sha512-b0TytUgFSbgFJGzJqXPKCFCBWigAjpjo+Fl7Vf7ZbKRDptszpppKxXH6DRXEABZ/gcEQczeb0iZ7JvL8e8jjCA==", + "requires": { + "@babel/runtime": "^7.5.5", + "tiny-warning": "^1.0.3" + } + }, "mini-css-extract-plugin": { "version": "0.9.0", "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.9.0.tgz", @@ -11105,6 +11135,52 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, + "react-router": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.0.tgz", + "integrity": "sha512-smz1DUuFHRKdcJC0jobGo8cVbhO3x50tCL4icacOlcwDOEQPq4TMqwx3sY1TP+DvtTgz4nm3thuo7A+BK2U0Dw==", + "requires": { + "@babel/runtime": "^7.1.2", + "history": "^4.9.0", + "hoist-non-react-statics": "^3.1.0", + "loose-envify": "^1.3.1", + "mini-create-react-context": "^0.4.0", + "path-to-regexp": "^1.7.0", + "prop-types": "^15.6.2", + "react-is": "^16.6.0", + "tiny-invariant": "^1.0.2", + "tiny-warning": "^1.0.0" + }, + "dependencies": { + "isarray": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz", + "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=" + }, + "path-to-regexp": { + "version": "1.8.0", + "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz", + "integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==", + "requires": { + "isarray": "0.0.1" + } + } + } + }, + "react-router-dom": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.2.0.tgz", + "integrity": "sha512-gxAmfylo2QUjcwxI63RhQ5G85Qqt4voZpUXSEqCwykV0baaOTQDR1f0PmY8AELqIyVc0NEZUj0Gov5lNGcXgsA==", + "requires": { + "@babel/runtime": "^7.1.2", + "history": "^4.9.0", + "loose-envify": "^1.3.1", + "prop-types": "^15.6.2", + "react-router": "5.2.0", + "tiny-invariant": "^1.0.2", + "tiny-warning": "^1.0.0" + } + }, "react-scripts": { "version": "3.4.1", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-3.4.1.tgz", @@ -11539,6 +11615,11 @@ "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-3.0.0.tgz", "integrity": "sha1-six699nWiBvItuZTM17rywoYh0g=" }, + "resolve-pathname": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz", + "integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng==" + }, "resolve-url": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz", @@ -13087,6 +13168,16 @@ "resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz", "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=" }, + "tiny-invariant": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.1.0.tgz", + "integrity": "sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw==" + }, + "tiny-warning": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz", + "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==" + }, "tmp": { "version": "0.0.33", "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz", @@ -13458,6 +13549,11 @@ "spdx-expression-parse": "^3.0.0" } }, + "value-equal": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz", + "integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw==" + }, "vary": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz", diff --git a/package.json b/package.json index c1aa884..90d1adb 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,7 @@ "postcss-cli": "^7.1.1", "react": "^16.13.1", "react-dom": "^16.13.1", + "react-router-dom": "^5.2.0", "react-scripts": "3.4.1", "tailwindcss": "^1.4.6" }, diff --git a/public/favicon.ico b/public/favicon.ico index bcd5dfd..7ab4ef4 100644 Binary files a/public/favicon.ico and b/public/favicon.ico differ diff --git a/public/logo512.png b/public/logo512.png new file mode 100644 index 0000000..7ab4ef4 Binary files /dev/null and b/public/logo512.png differ diff --git a/src/App.js b/src/App.js index 4896b4b..9c87960 100644 --- a/src/App.js +++ b/src/App.js @@ -1,8 +1,26 @@ import React from 'react'; - +import { BrowserRouter as Router, Route, Switch } from 'react-router-dom' +import { NavBar, Footer, Index, NotFoundPage } from './components'; function App() { + + + // let timezone = Intl.DateTimeFormat().resolvedOptions().timeZone + + return (
+ + +
+
+ + + + +
+
+
); } diff --git a/src/api/index.js b/src/api/index.js new file mode 100644 index 0000000..193f270 --- /dev/null +++ b/src/api/index.js @@ -0,0 +1,33 @@ +import axios from 'axios' + +const apiURL = 'http://api.aladhan.com/v1/' + +export const getPrayerTimesCalendar = async (city, country, month, year) => { + let changeURL = `${apiURL}calendarByCity?city=${city}&country=${country}&method=3&month=${month}&year=${year}` + + try { + const { data: { data } } = await axios.get(changeURL); + + if(data !== null || data.length !== 0){ + return data + }else{ + return [] + } + } catch (error) { + console.log(error) + } +} + +export const getCityCountry = async () => { + try { + const { data } = await axios.get('https://freegeoip.app/json/') + + if(data !== null || data.length !== 0){ + return data + }else{ + return [] + } + } catch (error) { + console.log(error) + } +} diff --git a/src/assets/css/main.css b/src/assets/css/main.css index 7ddea94..0c29ca0 100644 --- a/src/assets/css/main.css +++ b/src/assets/css/main.css @@ -14297,6 +14297,119 @@ video { @import url('https://fonts.googleapis.com/css?family=Jost:300,400,500,600,700,900&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Philosopher:wght@400;700&display=swap'); + +/* Custom Styles */ + +:root{ + --scroll-color: #434190; +} + +::-webkit-scrollbar { + width: 7px; + position: relative; +} + +::-webkit-scrollbar-thumb { + background-color: var(--scroll-color); + border-radius: 3px; +} + +html, body{ + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: "Jost", sans-serif; +} + +button:focus { + outline: none; + box-shadow: none; +} + +footer{ + position: absolute; + bottom: 0; + width: 100%; + height: 2.5rem; +} + +#search::placeholder{ + color: white; +} + +#logo{ + font-family: 'Philosopher', sans-serif; +} + +.content-wrap{ + padding-bottom: 2.5rem; +} + +.today{ + background-color: tomato; + font-weight: 500; + color: white; + text-align: center; +} + +/* Spinner */ + +.loading{ + width: 125px; + height: 125px; + box-sizing: border-box; + border-radius: 50%; + border-top: 10px solid #333333; + position: relative; + animation: a1 2s linear infinite; +} + +.loading::before,.loading::after{ + content: ''; + width: 125px; + height: 125px; + position: absolute; + left: 0; + top: -10px; + box-sizing: border-box; + border-radius: 50%; +} + +.loading::before{ + border-top: 10px solid #434190; + transform: rotate(120deg); +} + +.loading::after{ + border-top: 10px solid tomato; + transform: rotate(240deg); +} + +.loading span{ + position: absolute; + width: 125px; + height: 125px; + color: black; + text-align: center; + line-height: 125px; + font-size: 16px; + font-weight: 500; + animation: a2 2s linear infinite; +} + +@keyframes a1 { + to{ + transform: rotate(360deg); + } +} + +@keyframes a2 { + to{ + transform: rotate(-360deg); + } +} + @media (min-width: 640px) { .sm\:space-y-0 > :not(template) ~ :not(template) { --space-y-reverse: 0; @@ -69059,4 +69172,4 @@ video { .xl\:delay-1000 { transition-delay: 1000ms; } -} \ No newline at end of file +} diff --git a/src/assets/css/tailwind.css b/src/assets/css/tailwind.css index 88be29e..1601e35 100644 --- a/src/assets/css/tailwind.css +++ b/src/assets/css/tailwind.css @@ -1,4 +1,102 @@ @import 'tailwindcss/base'; @import 'tailwindcss/components'; @import 'tailwindcss/utilities'; -@import url('https://fonts.googleapis.com/css?family=Jost:300,400,500,600,700,900&display=swap'); \ No newline at end of file +@import url('https://fonts.googleapis.com/css?family=Jost:300,400,500,600,700,900&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Philosopher:wght@400;700&display=swap'); + +/* Custom Styles */ +:root{ + --scroll-color: #434190; +} +::-webkit-scrollbar { + width: 7px; + position: relative; +} +::-webkit-scrollbar-thumb { + background-color: var(--scroll-color); + border-radius: 3px; +} +html, body{ + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: "Jost", sans-serif; +} +button:focus { + outline: none; + box-shadow: none; +} +footer{ + position: absolute; + bottom: 0; + width: 100%; + height: 2.5rem; +} + +#search::placeholder{ + color: white; +} +#logo{ + font-family: 'Philosopher', sans-serif; +} + +.content-wrap{ + padding-bottom: 2.5rem; +} +.today{ + background-color: tomato; + font-weight: 500; + color: white; + text-align: center; +} + +/* Spinner */ +.loading{ + width: 125px; + height: 125px; + box-sizing: border-box; + border-radius: 50%; + border-top: 10px solid #333333; + position: relative; + animation: a1 2s linear infinite; +} +.loading::before,.loading::after{ + content: ''; + width: 125px; + height: 125px; + position: absolute; + left: 0; + top: -10px; + box-sizing: border-box; + border-radius: 50%; +} +.loading::before{ + border-top: 10px solid #434190; + transform: rotate(120deg); + +} +.loading::after{ + border-top: 10px solid tomato; + transform: rotate(240deg); +} +.loading span{ + position: absolute; + width: 125px; + height: 125px; + color: black; + text-align: center; + line-height: 125px; + font-size: 16px; + font-weight: 500; + animation: a2 2s linear infinite; +} +@keyframes a1 { + to{ + transform: rotate(360deg); + } +} +@keyframes a2 { + to{ + transform: rotate(-360deg); + } +} diff --git a/src/components/index.js b/src/components/index.js new file mode 100644 index 0000000..6d089fb --- /dev/null +++ b/src/components/index.js @@ -0,0 +1,5 @@ +export { default as Index } from './layout/Master' +export { default as NavBar } from './layout/NavBar' +export { default as Footer } from './layout/Footer' +export { default as Spinner } from './layout/Spinner' +export { default as NotFoundPage } from './layout/NotFoundPage' \ No newline at end of file diff --git a/src/components/layout/Footer.js b/src/components/layout/Footer.js new file mode 100644 index 0000000..ba7f9f2 --- /dev/null +++ b/src/components/layout/Footer.js @@ -0,0 +1,13 @@ +import React from 'react' + +export default () => { + return ( + + + + ) +} diff --git a/src/components/layout/Master.js b/src/components/layout/Master.js new file mode 100644 index 0000000..3fbff2f --- /dev/null +++ b/src/components/layout/Master.js @@ -0,0 +1,91 @@ +import React, { useState, useEffect } from 'react'; +import { getPrayerTimesCalendar, getCityCountry } from '../../api' +import { Spinner } from '..'; +import months from '../../data/months.json' + +export default () => { + const [ city, setCity] = useState('') + const [ country, setCountry ] = useState('') + const [ today, setToday ] = useState(0) + const [ month, setMonth ] = useState(0) + const [ year, setYear ] = useState(0) + const [ calender, setCalender ] = useState([]) + + useEffect(() => { + let date = new Date() + + setMonth(date.getUTCMonth()) + setYear(date.getUTCFullYear()) + setToday(date.getDate()) + + getCityCountry().then(( data ) => { + setCity(data.city) + setCountry(data.country_name) + + if(city !== '' && country !== ''){ + getPrayerTimesCalendar(city, country, month+1, year).then((data) => { + console.log(data) + setCalender(data) + + let row = document.querySelector(`.row-${today}`) + today === date.getDate() ? row.className = 'today' : row.className = '' + row.scrollIntoView({ behavior: 'smooth', block: 'center'}) + + }).catch( err => console.log(err) ) + }else{ + return + } + }).catch( err => console.log(err) ) + + }, [city, country, today, month, year]) + + if(calender === null || calender === undefined || calender.length === 0) return + + else{ + return ( +
+
+

Gregorian Calender For {months[month]}

+
+ + + + + + + + + + + + + + + + + { + calender.map((item, i) => + + + + + + + + + + + + + + + ) + } + +
DayDateImsakFajrSunriseDhuhrAsrMaghribIshaMidnight
{item.date.gregorian.weekday.en}
({item.date.hijri.weekday.en})		{item.date.readable}{item.timings.Imsak.slice(0, 5)}{item.timings.Fajr.slice(0, 5)}{item.timings.Sunrise.slice(0, 5)}{item.timings.Dhuhr.slice(0, 5)}{item.timings.Asr.slice(0, 5)}{item.timings.Maghrib.slice(0, 5)}{item.timings.Isha.slice(0, 5)}{item.timings.Midnight.slice(0, 5)}
+
+
+
+ ) + } +} \ No newline at end of file diff --git a/src/components/layout/NavBar.js b/src/components/layout/NavBar.js new file mode 100644 index 0000000..aee9115 --- /dev/null +++ b/src/components/layout/NavBar.js @@ -0,0 +1,24 @@ +import React from 'react' +import { Link } from 'react-router-dom' + +export default () => { + + return ( + + + + ) +} diff --git a/src/components/layout/NotFoundPage.js b/src/components/layout/NotFoundPage.js new file mode 100644 index 0000000..b59722a --- /dev/null +++ b/src/components/layout/NotFoundPage.js @@ -0,0 +1,79 @@ +import React from 'react' +// import { Link } from 'react-router-dom' + +export default () => { + return ( +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 404 Page not found + + + {/*  Back to Home */} + +
+ ) +} diff --git a/src/components/layout/Spinner.js b/src/components/layout/Spinner.js new file mode 100644 index 0000000..400ec7a --- /dev/null +++ b/src/components/layout/Spinner.js @@ -0,0 +1,9 @@ +import React from 'react' + +export default () => { + return( +
+ Loading... +
+ ) +} \ No newline at end of file diff --git a/src/data/months.json b/src/data/months.json new file mode 100644 index 0000000..145e314 --- /dev/null +++ b/src/data/months.json @@ -0,0 +1,14 @@ +{ + "0": "January", + "1": "February", + "2": "March", + "3": "April", + "4": "May", + "5": "June", + "6": "July", + "7": "August", + "8": "September", + "9": "October", + "10": "Novmber", + "11": "December" +}