<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>تذكير الصلاة</title>
<style>
body {
font-family: Arial, sans-serif;
background: linear-gradient(135deg, #020617, #0f172a);
color: white;
text-align: center;
padding: 20px;
}
.container {
max-width: 450px;
margin: auto;
background: #111827;
padding: 25px;
border-radius: 25px;
box-shadow: 0 0 40px rgba(0,0,0,0.7);
}
h1 {
font-size: 48px;
margin: 10px 0;
color: #FFD700; /* الساعة الذهبية */
}
.next {
color: #38bdf8;
font-size: 20px;
}
.countdown {
font-size: 22px;
margin: 10px 0;
color: #facc15;
}
.prayer {
margin: 6px 0;
padding: 12px;
border-radius: 12px;
background: #020617;
transition: 0.3s;
font-size: 18px;
}
.prayer.active {
background: #22c55e;
color: black;
transform: scale(1.05);
}
.prayer span.amPm {
font-size: 12px;
color: #facc15;
margin-left: 5px;
}
input {
width: 65%;
max-width: 200px;
padding: 8px 6px;
border-radius: 10px;
border: none;
text-align: center;
margin: 5px auto;
display: block;
background: #1e293b;
color: white;
font-size: 16px;
transition: 0.3s;
}
input:hover {
background: #334155;
}
button#saveBtn {
margin: 10px auto;
display: block;
padding: 10px 20px;
border-radius: 12px;
border: none;
background: #FFD700;
color: black;
font-weight: bold;
cursor: pointer;
transition: all 0.3s;
}
button#saveBtn:hover {
background: #e6c200;
}
#inputs, #saveBtn {
opacity: 0;
max-height: 0;
transition: all 0.5s ease;
overflow: hidden;
}
#inputs.show, #saveBtn.show {
opacity: 1;
max-height: 250px;
}
h3 {
cursor: pointer;
margin-top: 15px;
transition: 0.3s;
}
h3:hover {
color: #38bdf8;
}
</style>
</head>
<body>
<div class="container">
<h2>? تذكير الصلاة</h2>
<h1 id="clock">--:--</h1>
<div class="next" id="nextPrayer">...</div>
<div class="countdown" id="countdown">--</div>
<div id="list"></div>
<h3 onclick="toggleInputs()">⚙️ تعديل الأوقات</h3>
<div id="inputs"></div>
<button id="saveBtn" onclick="saveTimes()">حفظ ?</button>
</div>
<audio id="adhan" src="https://cdn.islamic.network/audio/adhan/adhan.mp3"></audio>
<script>
let defaultTimes = [
{ name: "الفجر", time: "05:30" },
{ name: "الظهر", time: "12:30" },
{ name: "العصر", time: "15:45" },
{ name: "المغرب", time: "18:15" },
{ name: "العشاء", time: "20:25" }
];
let prayerTimes = JSON.parse(localStorage.getItem("prayerTimes")) || defaultTimes;
let notified = {};
if (Notification.permission !== "granted") {
Notification.requestPermission();
}
function toMinutes(t) {
let [h, m] = t.split(":");
return parseInt(h) * 60 + parseInt(m);
}
// AM/PM للساعه الكبيرة فقط
function formatAmPmHour(date) {
return date.getHours() < 12 ? "AM" : "PM";
}
function updateClock() {
let now = new Date();
let h = String(now.getHours()).padStart(2,'0');
let m = String(now.getMinutes()).padStart(2,'0');
let ampm = formatAmPmHour(now);
document.getElementById("clock").innerText = `${h}:${m} ${ampm}`;
}
function getNextPrayerData(current) {
for (let p of prayerTimes) {
let time = toMinutes(p.time);
if (time > current) return { name: p.name, time: p.time, diff: time - current };
}
let fajr = prayerTimes[0];
return { name: fajr.name, time: fajr.time, diff: (1440-current)+toMinutes(fajr.time) };
}
function renderList(current) {
let html = "";
for (let p of prayerTimes) {
let start = toMinutes(p.time);
let end = start + 5;
let active = (current >= start && current <= end) ? "active" : "";
html += `<div class="prayer ${active}">
<span>${p.name} - ${p.time}</span>
<span class="amPm">${p.time < "12:00" ? "AM":"PM"}</span>
</div>`;
}
document.getElementById("list").innerHTML = html;
}
function updateCountdown(diff) {
let h = Math.floor(diff/60);
let m = diff % 60;
document.getElementById("countdown").innerText = `⏳ بعد ${h} ساعة و ${m} دقيقة`;
}
function checkPrayer() {
let now = new Date();
let current = now.getHours()*60 + now.getMinutes();
let next = getNextPrayerData(current);
document.getElementById("nextPrayer").innerText = `الصلاة القادمة: ${next.name} (${next.time})`;
updateCountdown(next.diff);
renderList(current);
for (let p of prayerTimes) {
let start = toMinutes(p.time);
let end = start + 5;
if (current >= start && current <= end && !notified[p.name]) {
alert("? حان وقت صلاة " + p.name);
if (Notification.permission==="granted") {
new Notification("وقت الصلاة",{body:"حان وقت صلاة "+p.name});
}
document.getElementById("adhan").play();
notified[p.name] = true;
}
if (current > end && notified[p.name]) notified[p.name] = false;
}
if (current===0) notified={};
}
function renderInputs() {
let html = "";
for (let i=0;i<prayerTimes.length;i++){
html += `<input type="time" id="t${i}" value="${prayerTimes[i].time}">`;
}
document.getElementById("inputs").innerHTML = html;
}
function saveTimes() {
for (let i=0;i<prayerTimes.length;i++){
prayerTimes[i].time = document.getElementById("t"+i).value;
}
localStorage.setItem("prayerTimes", JSON.stringify(prayerTimes));
alert("تم الحفظ ✅");
document.getElementById("inputs").classList.remove("show");
document.getElementById("saveBtn").classList.remove("show");
}
function toggleInputs() {
let inputs = document.getElementById("inputs");
let btn = document.getElementById("saveBtn");
inputs.classList.toggle("show");
btn.classList.toggle("show");
if (inputs.classList.contains("show")) {
let lastInput = inputs.querySelector("input:last-child");
if (lastInput) lastInput.scrollIntoView({behavior:"smooth",block:"center"});
}
}
setInterval(()=>{updateClock(); checkPrayer();},1000);
updateClock(); checkPrayer(); renderInputs();
</script>
</body>
</html>
![[صورة مرفقة: 177461173141861.gif]](https://up6.cc/2026/03/177461173141861.gif)
