[كود] اريد كود جافا نافذه تخرج بين وقتين

PHP كود :

<!DOCTYPE html>
<html>
<head>
    <title>تذكير الصلاة</title>
</head>
<body>

<script>
// أوقات الصلاة بصيغة 24 ساعة مباشرة
let prayerTimes = [
    { name: "الفجر", time: "05:30" },
    { name: "الظهر", time: "12:30" },
    { name: "العصر", time: "15:45" },
    { name: "المغرب", time: "18:15" },
    { name: "العشاء", time: "20:25" }
];

// منع التكرار
let notified = {};

// تحويل "HH:MM" إلى دقائق
function toMinutes(timeStr) {
    let parts = timeStr.split(":");
    return parseInt(parts[0]) * 60 + parseInt(parts[1]);
}

function checkTime() {
    let now = new Date();
    let current = now.getHours() * 60 + now.getMinutes();

    for (let i = 0; i < prayerTimes.length; i++) {
        let p = prayerTimes[i];

        let start = toMinutes(p.time);
        let end = start + 5; // 5 دقائق تنبيه

        if (current >= start && current <= end && !notified[p.name]) {
            alert("حان وقت صلاة " + p.name);
            notified[p.name] = true;
        }
    }

    // تصفير يومي
    if (current === 0) {
        notified = {};
    }
}

// فحص كل دقيقة
setInterval(checkTime, 60000);
checkTime();
</script>

</body>
</html>

PHP كود :

<!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>