Dijital TV Okul Panosu V.3 - HTML

#time-widget { font-family: 'Roboto'; text-align: right; color: var(--green); }
       #time-widget .clock {font-size: 2.2em; font-weight: 700; line-height: 1;text-shadow: 0 0 15px var(--green);font-variant-numeric: tabular-nums;
}

<img src="http://www.mgm.gov.tr/sunum/tahmin-show-1.aspx?m=SINOP&basla=1&bitir=5&rC=111&rZ=101423" align="center" style="width:98%; height:90px;" alt="SİNOP" />

function updateDers() {
    const now = new Date();
    const gun = now.getDay();
    const nowSec = now.getHours() * 3600 + now.getMinutes() * 60 + now.getSeconds();
    const saatler = JSON.parse(localStorage.getItem("dersSaatleri") || "[]");
    const program = JSON.parse(localStorage.getItem("dersProgrami") || {});
    const renkler = JSON.parse(localStorage.getItem("dersRenkleri") || "{}");
 
    const msg = document.getElementById("ders-durum-mesaj");
    const body = document.getElementById("ders-tablo-body");
    const tablo = document.getElementById("ders-tablo");
    const notlarAlani = document.getElementById("verimli-notlar-display");

    const bugunAdi = ["Pazar", "Pazartesi", "Salı", "Çarşamba", "Perşembe", "Cuma", "Cumartesi"][gun];

    const dersDisiGoster = (mesaj) => {
        msg.innerHTML = `<span style="width:100%; text-align:center;">${mesaj}</span>`;
        tablo.style.display = "none";
        const notlar = JSON.parse(localStorage.getItem("verimliNotlar") || "[]");
        if (notlar.length > 0) {
            notlarAlani.style.display = "block";
            const saniye30 = Math.floor(now.getTime() / 30000);
            const secilenNot = notlar[saniye30 % notlar.length];
            notlarAlani.innerHTML = `<div style="border-top: 1px solid rgba(0,234,255,0.2); margin-top:10px; padding-top:10px;">
                <p style="color:var(--orange); font-size:0.9em; margin-bottom:10px;">🌟 GÜNÜN NOTU</p>
                <p style="color:#fff;">${secilenNot}</p>
            </div>`;
        }
    };

    if (gun === 0 || gun === 6) {
        dersDisiGoster("📅 HAFTA SONU TATİLİ");
        return;
    }

    if (!saatler.length) { msg.innerHTML = "Saat ayarı yok"; return; }

    const zamanlar = saatler.map(s => ({
        bas: s.bas.split(":").map(Number)[0] * 3600 + s.bas.split(":").map(Number)[1] * 60,
        bit: s.bit.split(":").map(Number)[0] * 3600 + s.bit.split(":").map(Number)[1] * 60
    }));

    const ilkDersBaslangic = zamanlar[0].bas;
    const sonDersBitis = zamanlar[zamanlar.length - 1].bit;

    let anaMetin = "";
    let hedefMetin = "";
    let targetIdx = -1;
    let hedefSaniye = 0;
    let ozelMesaj = "";

    if (nowSec < ilkDersBaslangic) {
        anaMetin = "DERSLERİN BAŞLAMASINA";
        hedefMetin = "1. DERSE";
        targetIdx = 0;
        hedefSaniye = ilkDersBaslangic;
    }
    else if (nowSec >= ilkDersBaslangic && nowSec < sonDersBitis) {
        zamanlar.forEach((s, i) => {
            // DERSTE MİYİZ?
            if (nowSec >= s.bas && nowSec < s.bit) {
                anaMetin = (i + 1) + ". DERSTEYİZ";
                hedefMetin = "TENEFÜSE";
                targetIdx = i;
                hedefSaniye = s.bit;
            }
            // TENEFFÜSTE MİYİZ?
            else if (i < zamanlar.length - 1 && nowSec >= s.bit && nowSec < zamanlar[i+1].bas) {
                const fark = zamanlar[i+1].bas - s.bit;
                if (fark > 1740) {
                    anaMetin = "ÖĞLE ARASINDAYIZ";
                } else {
                    anaMetin = "TENEFÜSTEYİZ";
                }
                hedefMetin = (i + 2) + ". DERSE";
                targetIdx = i + 1;
                hedefSaniye = zamanlar[i+1].bas;
            }
        });
    }
    else {
        ozelMesaj = "💡 BUGÜNLÜK DERSLER BİTTİ";
    }

    if (ozelMesaj !== "") {
        dersDisiGoster(ozelMesaj);
    } else {
        notlarAlani.style.display = "none";
        tablo.style.display = "table";
    
        const kalan = Math.max(0, hedefSaniye - nowSec);
        const dk = Math.floor(kalan / 60);
        const sn = (kalan % 60).toString().padStart(2, '0');

        // ÖRNEK ÇIKTI: "TENEFÜSTEYİZ 2. DERSE 05:10 KALDI"
        msg.innerHTML = `
            <div style="display:flex; flex-direction:column; align-items:center; width:100%;">
                <div style="font-size:0.7em; color:var(--cyan); margin-bottom:-5px; letter-spacing:1px;">${anaMetin}</div>
                <div style="display:flex; align-items:center; justify-content:center;">
                    <span style="font-size:0.8em; margin-right:10px;">${hedefMetin}</span>
                    <span class="kalan-sure">${dk}:${sn}</span>
                    <span style="font-size:0.8em; margin-left:10px; opacity:0.8;">KALDI</span>
                </div>
            </div>
        `;
    
        if (kalan === 1) calZil();

        if (program[bugunAdi]) {
            body.innerHTML = "";
            Object.keys(program[bugunAdi]).sort().forEach(sinif => {
                const ders = program[bugunAdi][sinif][targetIdx] || "---";
                const dersRengi = renkler[ders] || "rgba(255,255,255,0.05)";
                body.innerHTML += `<tr><td class="sinif-hucre">${sinif}</td><td style="background:${dersRengi}; color:#000; font-weight:bold;">${ders}</td></tr>`;
            });
        }
    }
}