Gədəbəydən Salamlar)
Gəlin özmüzü inkişaf etdirək və bu koda kimin əlavə kod əlavə etmək istəsə əlavə xüsusiyyət kodunu yazsın əlavə edək və birlikdə Namaz vaxı scirpti inkişaf etdirək.
Deməli aşağıdakı kodda istifadə etdiglərmiz dillər. Php, javasicrp, html, css.
Api ilə Muslim World League rəsmi saytından məlumatları çəkirik bunu qafqaz müsəlmanlar idarəsindən çəkmək olar lakin məlumatları sql, txt, kimi məlumat bazaları yaradıb toplamalıyaq.
2 şəhər mövcuddur, Gədəbəy, Bakı, öz şəhərnizi əlavə etməklə başlaya bilərsiniz.
Seçilən şəhərə görə arxa fonda o şəhərə aid şəkil göstərilir.
Və javascrpitdən istifadə edərək keçən namaz vaxtlarını boz, indiki namaz vaxtını yaşıl, və gələcək namaz vaxtını mavi rəngdə göstərdik həmçinin namaz vaxtına qalan vaxtıda hesablayıb göstəririk.
Sizdə təkminləşdirmək istədiyiniz kodu yazın.
Gəlin özmüzü inkişaf etdirək və bu koda kimin əlavə kod əlavə etmək istəsə əlavə xüsusiyyət kodunu yazsın əlavə edək və birlikdə Namaz vaxı scirpti inkişaf etdirək.
Deməli aşağıdakı kodda istifadə etdiglərmiz dillər. Php, javasicrp, html, css.
Api ilə Muslim World League rəsmi saytından məlumatları çəkirik bunu qafqaz müsəlmanlar idarəsindən çəkmək olar lakin məlumatları sql, txt, kimi məlumat bazaları yaradıb toplamalıyaq.
2 şəhər mövcuddur, Gədəbəy, Bakı, öz şəhərnizi əlavə etməklə başlaya bilərsiniz.
Seçilən şəhərə görə arxa fonda o şəhərə aid şəkil göstərilir.
Və javascrpitdən istifadə edərək keçən namaz vaxtlarını boz, indiki namaz vaxtını yaşıl, və gələcək namaz vaxtını mavi rəngdə göstərdik həmçinin namaz vaxtına qalan vaxtıda hesablayıb göstəririk.
Sizdə təkminləşdirmək istədiyiniz kodu yazın.
Kod:
<!DOCTYPE html>
<!--// Madin Gədədbəy)
//Kod əlavəsi et səndə öz rayon və şəhərini yaz. -->
<html lang="az">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Namaz Vaxtları</title>
<style>
body {
font-family: 'Arial', sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
.container {
max-width: 600px;
margin: 50px auto;
background-color: rgba(255, 255, 255, 0.8);
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
color: #333;
}
form {
display: flex;
flex-direction: column;
gap: 15px;
}
select, input[type="submit"] {
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 5px;
}
input[type="submit"] {
background-color: #007BFF;
color: #fff;
cursor: pointer;
border: none;
}
input[type="submit"]:hover {
background-color: #0056b3;
}
.timings {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
.timings th, .timings td {
border: 1px solid #ccc;
padding: 10px;
text-align: center;
}
.timings th {
background-color: #f2f2f2;
font-weight: bold;
}
/* Keçmiş vaxtlar üçün rəng */
.past {
background-color: #ff8080; /* Bu rəngi öz istəyinizə uyğun dəyişə bilərsiniz */
color: #fff; /* Rəngin seçimi üçün bu hissəni də dəyişə bilərsiniz */
}
/* Cari vaxtlar üçün rəng */
.current {
background-color: #4CAF50; /* Bu rəngi öz istəyinizə uyğun dəyişə bilərsiniz */
color: #fff; /* Rəngin seçimi üçün bu hissəni də dəyişə bilərsiniz */
}
/* Gələcək vaxtlar üçün rəng */
.upcoming {
background-color: #66a3ff; /* Bu rəngi öz istəyinizə uyğun dəyişə bilərsiniz */
color: #fff; /* Rəngin seçimi üçün bu hissəni də dəyişə bilərsiniz */
}
</style>
</head>
<?php
// Seçilən şəhərə görə, şəhərə aid şəkili arxa fonda göstəririk
$selectedCity = isset($_GET["city"]) ? $_GET["city"] : '';
$backgroundStyle = "";
if ($selectedCity) {
$backgroundStyle = "style=\"background-image: url('$selectedCity.jpeg')\"";
}
?>
<body <?php echo $backgroundStyle; ?>>
<div class="container">
<h1>Namaz Vaxtları</h1>
<form action="namaz_vaxti.php" method="get">
Şəhər və ya Rayon:
<select name="city">
<option value="Baku" <?php echo ($selectedCity == 'Baku') ? 'selected' : ''; ?>>Baku</option>
<option value="Gedebey" <?php echo ($selectedCity == 'Gedebey') ? 'selected' : ''; ?>>Gedebey</option>
</select>
<input type="submit" value="Namaz Vaxtlarını Göstər">
</form>
<?php
if ($selectedCity) {
$country = "Azerbaijan";
$method = 2; // Hesablama üsulu. 2 - MWL (Muslim World League bunu qafqaz müsəlmanlar idarəsindən çəkmək olar lakin məlumatları sql, txt, kimi məlumat bazaları yaradıb toplamalıyaq)
$api_url = "http://api.aladhan.com/v1/timingsByCity?city=$selectedCity&country=$country&method=$method";
$response = file_get_contents($api_url);
$data = json_decode($response, true);
$timings = $data['data']['timings'];
echo "
<table class='timings'>
<thead>
<tr>
<th>Sübh</th>
<th>Zöhür</th>
<th>Əsir</th>
<th>Məğrib</th>
<th>İşa</th>
</tr>
</thead>
<tbody>
<tr>
<td id='fajrTime'>" . $timings['Fajr'] . "</td>
<td id='dhuhrTime'>" . $timings['Dhuhr'] . "</td>
<td id='asrTime'>" . $timings['Asr'] . "</td>
<td id='maghribTime'>" . $timings['Maghrib'] . "</td>
<td id='ishaTime'>" . $timings['Isha'] . "</td>
</tr>
</tbody>
</table>
<!-- Yeni bölmə: Namaz vaxtlarına qalan vaxt -->
<div class='timings' id='remainingTimeSection'>
<h2>Qalan Vaxt</h2>
<div class='timing' id='untilDhuhr'></div>
<div class='timing' id='untilAsr'></div>
<div class='timing' id='untilMaghrib'></div>
<div class='timing' id='untilIsha'></div>
</div>";
}
?>
</div>
<!-- // Aşağıdakı javasicrpt-də keçən namaz vaxtlarını boz, indiki namaz vaxtını yaşıl, və gələcək namaz vaxtını mavi rəngdə göstərdik həmçinin namaz vaxtına qalan vaxtıda hesablayıb göstəririk.
-->
<script>
function calculateTimeDifference(start, end) {
let startTime = new Date("1970-01-01 " + start);
let endTime = new Date("1970-01-01 " + end);
let now = new Date();
let currentTime = new Date("1970-01-01 " + now.getHours() + ":" + now.getMinutes() + ":" + now.getSeconds());
if (currentTime >= startTime && currentTime <= endTime) {
let difference = endTime - currentTime;
let hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
let minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
let seconds = Math.floor((difference % (1000 * 60)) / 1000);
return hours + " saat " + minutes + " dəqiqə " + seconds + " saniyə";
} else {
return "";
}
}
function displayRemainingTime() {
const timings = [
{ start: 'fajrTime', end: 'dhuhrTime', display: 'untilDhuhr', name: 'Zöhür' },
{ start: 'dhuhrTime', end: 'asrTime', display: 'untilAsr', name: 'Əsir' },
{ start: 'asrTime', end: 'maghribTime', display: 'untilMaghrib', name: 'Məğrib' },
{ start: 'maghribTime', end: 'ishaTime', display: 'untilIsha', name: 'İşa' }
];
for (let timing of timings) {
let startTime = document.getElementById(timing.start).innerText;
let endTime = document.getElementById(timing.end).innerText;
let remainingTime = calculateTimeDifference(startTime, endTime);
if (remainingTime) {
document.getElementById(timing.display).innerText = timing.name + "ə " + remainingTime + " qalıb";
} else {
document.getElementById(timing.display).innerText = "";
}
}
}
setInterval(displayRemainingTime, 1000); // Hər saniyə yenilənir
function updateRowStyles() {
const timings = [
{ id: 'fajrTime', next: 'dhuhrTime' },
{ id: 'dhuhrTime', next: 'asrTime' },
{ id: 'asrTime', next: 'maghribTime' },
{ id: 'maghribTime', next: 'ishaTime' },
{ id: 'ishaTime', next: null }
];
let now = new Date();
let currentTime = new Date("1970-01-01 " + now.getHours() + ":" + now.getMinutes() + ":" + now.getSeconds());
for (let i = 0; i < timings.length; i++) {
let currentTiming = document.getElementById(timings[i].id).innerText;
let currentTimingDate = new Date("1970-01-01 " + currentTiming);
// Əvvəlcə bütün rəng siniflərini silirik
document.getElementById(timings[i].id).classList.remove('past', 'current', 'upcoming');
if (timings[i].next) {
let nextTiming = document.getElementById(timings[i].next).innerText;
let nextTimingDate = new Date("1970-01-01 " + nextTiming);
if (currentTime >= currentTimingDate && currentTime < nextTimingDate) {
document.getElementById(timings[i].id).classList.add('current');
} else if (currentTime >= nextTimingDate) {
document.getElementById(timings[i].id).classList.add('past');
} else {
document.getElementById(timings[i].id).classList.add('upcoming');
}
} else if (currentTime >= currentTimingDate) {
document.getElementById(timings[i].id).classList.add('past');
} else {
document.getElementById(timings[i].id).classList.add('upcoming');
}
}
}
updateRowStyles();
</script>
</body>
</html>
