├── README.md ├── namaz_background.jpg ├── index.html ├── style.css └── app.js /README.md: -------------------------------------------------------------------------------- 1 | # namaz-time 2 | https://alirazaramejo.github.io/namaz-time/ 3 | -------------------------------------------------------------------------------- /namaz_background.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Alirazaramejo/namaz-time/HEAD/namaz_background.jpg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Prayer Time App 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |

16 |

إِنَّ الصَّلاَةَ كَانَتْ عَلَى الْمُؤْمِنِينَ كِتَاباً مَّوْقُوتاً

17 |

بے شک نماز مومنوں پر ایک فرض ہے جو وقت کے ساتھ بندھا ہوا ہے۔

18 |

19 | 20 |

21 | 22 | 30 |

31 | 32 |

33 | 34 |

35 |

36 |

37 |

40 | 43 |

44 |

45 |

46 | 47 |

48 |

49 |

Fajr

50 |

51 |

52 |

53 |

Sunrise

54 |

55 |

56 |

57 |

Dhuhr

58 |

59 |

60 |

61 |

Asr

62 |

63 |

64 | 65 |

66 |

Maghrib

67 |

68 |

69 |

70 |

Isha

71 |

72 |

73 |

74 | 75 | 76 | 77 | 78 | 79 | 80 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: "Anonymous Pro", monospace; 5 | box-sizing: border-box; 6 | background: url('namaz_background.jpg') center/cover fixed no-repeat; /* Replace 'namaz_background.jpg' with your image file */ 7 | } 8 | 9 | header { 10 | background-color: #1b07ffc9; 11 | color: white; 12 | padding: 16px; 13 | text-align: center; 14 | } 15 | 16 | .container { 17 | display: flex; 18 | flex-direction: column; 19 | font-weight: 700; 20 | flex-wrap: wrap; 21 | justify-content: center; 22 | align-content: center; 23 | margin-top: 10px; 24 | } 25 | 26 | h1, p { 27 | text-align: center; 28 | font-size: 30px; 29 | margin: 5px; 30 | color: #fff; /* Set text color to white */ 31 | } 32 | 33 | header p { 34 | font-weight: 700; 35 | margin: 4px; 36 | } 37 | 38 | /* Add more styles as needed */ 39 | 40 | @media screen and (max-width: 430px) { 41 | body { 42 | font-size: 14px; 43 | } 44 | h1 { 45 | font-size: 1.8em; 46 | } 47 | .container { 48 | font-size: 12px; 49 | } 50 | } 51 | 52 | @media screen and (min-width: 1024px) { 53 | .time { 54 | min-width: 250px; 55 | } 56 | } 57 | 58 | @media screen and (min-width: 1441px) { 59 | body { 60 | font-size: 26px; 61 | } 62 | .time { 63 | min-width: 400px; 64 | } 65 | } 66 | 67 | 68 | .time, 69 | .info { 70 | display: flex; 71 | justify-content: space-between; 72 | 73 | padding: 10px 15px; 74 | background-color: white; 75 | margin: 5px; 76 | border-radius: 3px; 77 | min-width: 165px; 78 | transition: transform 0.5s, box-shadow 0.5s; 79 | 80 | box-shadow: 1px 3px 5px rgb(0 0 0 / 0.2); 81 | } 82 | 83 | .time:hover:not(.active) { 84 | transform: translateY(-1px); 85 | /* box-shadow: 0 3px 4px 3px rgb(0 0 0 / 12%), 0 3px 5px rgb(0 0 0 / 24%); */ 86 | box-shadow: 0 1px 2px 0 rgb(60 64 67 / 30%), 0 2px 6px 2px rgb(60 64 67 / 15%); 87 | } 88 | 89 | .info { 90 | flex-direction: column; 91 | border: 1px solid black; 92 | } 93 | 94 | .active { 95 | color: white; 96 | background-color: #1b07ffc9; 97 | transform: scale(1.07); 98 | } 99 | 100 | .active:hover { 101 | transform: scale(1.09); 102 | } 103 | 104 | .fa-pen:hover, 105 | .fa-redo-alt:hover { 106 | color: #3927fdc9; 107 | cursor: pointer; 108 | transform: scale(1.1); 109 | } 110 | 111 | .error { 112 | color: red; 113 | font-weight: 600; 114 | text-align: center; 115 | /* display: none; */ 116 | } 117 | 118 | /* .form-error { 119 | color: red; 120 | margin: 2px 0; 121 | font-size: 10px; 122 | display: none; 123 | } */ 124 | 125 | .blur:before{ 126 | position: absolute; 127 | top : 0; 128 | left: 0; 129 | width: 100%; 130 | height: 100%; 131 | background-color: black; 132 | content:''; 133 | pointer-events: none; 134 | z-index:1; 135 | opacity: .5; 136 | } 137 | 138 | .location-edit { 139 | z-index: 2; 140 | background-color: #fff; 141 | /* background-color: rgba(255, 255, 255, 0.45); 142 | backdrop-filter: blur(6px); 143 | filter: blur(1px); */ 144 | 145 | border: 5px solid; 146 | border-image-slice: 1; 147 | border-image-source: linear-gradient(to left, #00C853, #B2FF59); 148 | 149 | width: 270px; 150 | height: 50%; 151 | min-height: 300px; 152 | padding: 35px; 153 | margin: auto; 154 | box-sizing: border-box; 155 | /* box-shadow: 0 3px 4px 3px rgb(0 0 0 / 12%), 0 3px 5px rgb(0 0 0 / 24%); */ 156 | 157 | position: absolute; 158 | inset: 0; 159 | 160 | display: none; 161 | justify-content: center; 162 | align-items: center; 163 | } 164 | 165 | input[type="text"] { 166 | /* width: 50%; */ 167 | height: 30px; 168 | padding: 3px 14px; 169 | margin: 10px 0; 170 | border: 1px solid #c4c4c4; 171 | box-shadow: 1px 1px 4px 0.5px rgba(0, 0, 0, 0.2); 172 | border-radius: 4px; 173 | } 174 | 175 | button { 176 | padding: 8px 18px; 177 | background-color: green; 178 | margin: 10px 0 0; 179 | color: #fff; 180 | border-radius: 4px; 181 | font-family: "Anonymous Pro", monospace; 182 | font-size: 16px; 183 | border: 1px solid green; 184 | font-weight: 600; 185 | height: 38px; 186 | } 187 | 188 | button:hover { 189 | background-color: white; 190 | color: green; 191 | border: 1px solid green; 192 | cursor: pointer; 193 | } 194 | 195 | .close { 196 | position: absolute; 197 | right: 12px; 198 | top: 12px; 199 | width: 32px; 200 | height: 32px; 201 | opacity: 0.3; 202 | } 203 | .close:hover { 204 | opacity: 1; 205 | } 206 | .close:before, 207 | .close:after { 208 | position: absolute; 209 | left: 20px; 210 | content: " "; 211 | height: 20px; 212 | width: 2px; 213 | background-color: #333; 214 | } 215 | .close:before { 216 | transform: rotate(45deg); 217 | } 218 | .close:after { 219 | transform: rotate(-45deg); 220 | } 221 | 222 | label { 223 | font-weight: bold; 224 | } 225 | 226 | @media screen and (max-width: 430px) { 227 | body { 228 | font-size: 14px; 229 | } 230 | h1 { 231 | font-size: 1.8em; 232 | } 233 | .container { 234 | font-size: 12px; 235 | } 236 | } 237 | 238 | @media screen and (min-width: 1024px) { 239 | /* body { 240 | font-size: 14px; 241 | } */ 242 | .time { 243 | min-width: 250px; 244 | } 245 | } 246 | 247 | @media screen and (min-width: 1441px) { 248 | body { 249 | font-size: 26px; 250 | } 251 | .time { 252 | min-width: 400px; 253 | } 254 | } 255 | 256 | .tooltip { 257 | position: relative; 258 | display: inline-block; 259 | border-bottom: 1px dashed black; 260 | } 261 | 262 | .tooltip .tooltiptext { 263 | visibility: hidden; 264 | width: 200px; 265 | background-color: black; 266 | color: #fff; 267 | font-size: 14px; 268 | font-weight: normal; 269 | text-align: center; 270 | border-radius: 3px; 271 | padding: 5px 0; 272 | position: absolute; 273 | z-index: 1; 274 | top: 150%; 275 | left: 50%; 276 | margin-left: -100px; 277 | } 278 | 279 | .tooltip .tooltiptext::after { 280 | content: ""; 281 | position: absolute; 282 | bottom: 100%; 283 | left: 50%; 284 | margin-left: -5px; 285 | border-width: 5px; 286 | border-style: solid; 287 | border-color: transparent transparent black transparent; 288 | } 289 | 290 | .tooltip:hover .tooltiptext { 291 | visibility: visible; 292 | } -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | /*-------------------------Variables--------------------------*/ 2 | 3 | const d = new Date(); 4 | let time = `${formatTime(d.getHours())}:${formatTime(d.getMinutes())}`; 5 | let date = `${formatTime(d.getDate())}-${formatTime(d.getMonth() + 1)}-${d.getFullYear()}` 6 | let city = "Karachi"; 7 | let country = "Pakistan"; 8 | let latitude = 0; 9 | let longitude = 0; 10 | 11 | /*------------------------------------------------------------*/ 12 | 13 | /*----------------------Location Setters----------------------*/ 14 | 15 | async function fetchDataManually() { 16 | let url = `https://api.aladhan.com/v1/timingsByCity?city=${city}&country=${country}&method=1`; 17 | try { 18 | let res = await fetch(url); 19 | return await res.json(); 20 | } catch (error) { 21 | console.log(error); 22 | } 23 | } 24 | 25 | async function fetchDataAutomatically() { 26 | let url = `https://api.aladhan.com/v1/timings/${date}?latitude=${latitude}&longitude=${longitude}&method=1`; 27 | try { 28 | let res = await fetch(url); 29 | return await res.json(); 30 | } catch (error) { 31 | console.log(error); 32 | } 33 | } 34 | 35 | setData('manual'); 36 | 37 | document.getElementById("edit").addEventListener("click", () => { 38 | changeVisibility("location-edit", "flex"); 39 | document.getElementById('city').focus(); 40 | document.querySelector('body').classList.add('blur'); 41 | }); 42 | 43 | document.getElementById("close").addEventListener("click", () => { 44 | changeVisibility("location-edit", "none"); 45 | document.querySelector('body').classList.remove('blur'); 46 | }); 47 | 48 | document.getElementById("autoLocation").addEventListener("click", getLocation); 49 | 50 | document.getElementById("location-info").addEventListener("click", () => { 51 | changeVisibility("location-edit", "none"); 52 | city = formatLocation(document.getElementById('city').value); 53 | country = formatLocation(document.getElementById('country').value); 54 | document.querySelector('body').classList.remove('blur'); 55 | setData('manual'); 56 | }); 57 | 58 | /*------------------------------------------------------------*/ 59 | 60 | /*-----------------------Data Displayer-----------------------*/ 61 | 62 | async function setData(mode) { 63 | let res; 64 | let isManualMode = (mode === 'manual') ? true : false; 65 | if (isManualMode === true) { 66 | res = await fetchDataManually(); 67 | } else { 68 | res = await fetchDataAutomatically(); 69 | } 70 | 71 | if (res.code == 200) { 72 | // console.log(res); 73 | // console.log(res.code, res.status); 74 | // console.log(res.data.meta.latitude, res.data.meta.longitude); 75 | if (document.getElementById("error").style.display != 'none') { 76 | changeVisibility("error", "none"); 77 | } 78 | 79 | const namaz1 = { 80 | "fajr": res.data.timings.Fajr, 81 | "sunrise": res.data.timings.Sunrise, 82 | "dhuhr": res.data.timings.Dhuhr, 83 | "asr": res.data.timings.Asr, 84 | "maghrib": res.data.timings.Maghrib, 85 | "isha": res.data.timings.Isha 86 | } 87 | 88 | for (n in namaz1) { 89 | document.getElementById(n).innerHTML = tConvert(namaz1[n]); 90 | console.log(n, namaz1[n]); 91 | } 92 | 93 | document.getElementById( 94 | "hijri" 95 | ).innerHTML = ` ${res.data.date.hijri.day} ${res.data.date.hijri.month.en} ${res.data.date.hijri.year} / ${res.data.date.readable}`; 96 | 97 | if (city != null) { 98 | document.getElementById("location").innerHTML = ` ${city}, ${country} `; 99 | } else { 100 | document.getElementById("location").innerHTML = ` Lat: ${res.data.meta.latitude}, Long: ${res.data.meta.longitude} `; 101 | } 102 | 103 | // for (let i = 0; i < namaz.length; i++) { 104 | // document.getElementById(namaz[i]).innerHTML = tConvert(namazTime[i]); 105 | // } 106 | 107 | // console.log(res); 108 | // console.log(res.data.timings); 109 | // console.log(`Time: ${time}, Fajr: ${namazTime[0]}, Sunrise: ${namazTime[1]}, Dhuhr: ${namazTime[2]}, Asr: ${namazTime[3]}, Maghrib: ${namazTime[4]}, Isha: ${namazTime[5]}`); 110 | // time = "05:05" 111 | 112 | activeTime(namaz1); 113 | setInterval(() => activeTime(namaz1), 60000); 114 | 115 | function tConvert(time) { 116 | time = time 117 | .toString() 118 | .match(/^([01]\d|2[0-3])(:)([0-5]\d)(:[0-5]\d)?$/) || [time]; 119 | 120 | if (time.length > 1) { 121 | time = time.slice(1); 122 | time[5] = +time[0] < 12 ? " AM" : " PM"; 123 | time[0] = +time[0] % 12 || 12; 124 | } 125 | return time.join(""); 126 | } 127 | } else { 128 | showError(res); 129 | console.log(`${res.code}: ${res.status}`); 130 | console.log(res.data); 131 | } 132 | } 133 | 134 | /*------------------------------------------------------------*/ 135 | 136 | /*----------------------Location fetcher----------------------*/ 137 | 138 | function getLocation() { 139 | if (navigator.geolocation) { 140 | navigator.geolocation.getCurrentPosition(showPosition, showLocationError); 141 | } else { 142 | x.innerHTML = "Geolocation is not supported by this browser."; 143 | } 144 | } 145 | 146 | function showPosition(position) { 147 | city = null; 148 | latitude = position.coords.latitude; 149 | longitude = position.coords.longitude; 150 | // console.log(latitude, longitude); 151 | setData('Automatic'); 152 | } 153 | 154 | function showLocationError(error) { 155 | let x = document.getElementById("error"); 156 | switch (error.code) { 157 | case error.PERMISSION_DENIED: 158 | x.innerHTML = "Couldn't fetch information, User denied the request for Geolocation." 159 | break; 160 | case error.POSITION_UNAVAILABLE: 161 | x.innerHTML = "Location information is unavailable." 162 | break; 163 | case error.TIMEOUT: 164 | x.innerHTML = "The request to get user location timed out." 165 | break; 166 | case error.UNKNOWN_ERROR: 167 | x.innerHTML = "An unknown error occurred." 168 | break; 169 | } 170 | changeVisibility("error", "block"); 171 | } 172 | 173 | /*------------------------------------------------------------*/ 174 | 175 | /*----------------------Helper Functions----------------------*/ 176 | 177 | //Data Formatters 178 | function formatTime(time) { 179 | return time >= 10 ? time : `0${time}`; 180 | } 181 | 182 | function formatLocation(str) { 183 | return `${str.slice(0, 1).toUpperCase()}${str.slice(1).toLowerCase()}`; 184 | } 185 | 186 | //Element Modifiers 187 | function changeVisibility(id, display) { 188 | document.getElementById(id).style.display = display; 189 | } 190 | 191 | function showError(msg) { 192 | document.getElementById("error").innerHTML = `Error ${msg.code} - ${msg.data}`; 193 | changeVisibility("error", "block"); 194 | } 195 | 196 | function activeTime(namazTime) { 197 | const d = new Date(); 198 | time = `${formatTime(d.getHours())}:${formatTime(d.getMinutes())}`; 199 | if (time >= namazTime['isha']) { 200 | document.getElementById("isha-cont").classList.add("active"); 201 | document.getElementById("maghrib-cont").classList.remove("active"); 202 | } else if (time >= namazTime['maghrib']) { 203 | document.getElementById("maghrib-cont").classList.add("active"); 204 | document.getElementById("asr-cont").classList.remove("active"); 205 | } else if (time >= namazTime['asr']) { 206 | document.getElementById("asr-cont").classList.add("active"); 207 | document.getElementById("dhuhr-cont").classList.remove("active"); 208 | } else if (time >= namazTime['dhuhr']) { 209 | document.getElementById("dhuhr-cont").classList.add("active"); 210 | document.getElementById("sunrise-cont").classList.remove("active"); 211 | } else if (time >= namazTime['sunrise']) { 212 | document.getElementById("sunrise-cont").classList.add("active"); 213 | document.getElementById("fajr-cont").classList.remove("active"); 214 | } else if (time >= namazTime['fajr']) { 215 | document.getElementById("fajr-cont").classList.add("active"); 216 | document.getElementById("isha-cont").classList.remove("active"); 217 | } else { 218 | document.getElementById("isha-cont").classList.add("active"); 219 | console.log("Else clause activated"); 220 | } 221 | } 222 | 223 | /*------------------------------------------------------------*/ 224 | 225 | function validate(e) { 226 | if (document.getElementById(e.id).value == '') { 227 | document.getElementById(e.id).style.border = "1px solid red"; 228 | } else { 229 | document.getElementById(e.id).style.border = "1px solid #c4c4c4"; 230 | // console.log(this); 231 | // console.log(e.id); 232 | } 233 | } --------------------------------------------------------------------------------