<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="theme-color" content="#111111">
  <meta name="description" content="Listen live to True School Radio.">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-title" content="True School Radio">

  <title>True School Radio</title>

  <link rel="manifest" href="manifest.json">
  <link rel="icon" href="icon-192.png">
  <link rel="apple-touch-icon" href="icon-192.png">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

  <style>
    :root {
      color-scheme: dark;
    }

    body {
      margin: 0;
      background: #111;
      color: #fff;
      font-family: Arial, Helvetica, sans-serif;
    }

    .site-banner {
      background: #fff;
      border-bottom: 4px solid #222;
    }

    .site-banner img {
      display: block;
      width: 100%;
      max-height: 360px;
      object-fit: contain;
    }

    .radio-player-section {
      padding: 50px 18px;
    }

    .radio-player {
      max-width: 760px;
      margin: 0 auto;
      padding: 40px 24px;
      background: #1c1c1c;
      border: 1px solid #333;
      border-radius: 18px;
      box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
    }

    .live-status {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: #ff4545;
      font-weight: 800;
      letter-spacing: 2px;
    }

    .live-dot {
      width: 11px;
      height: 11px;
      background: #ff4545;
      border-radius: 50%;
      animation: pulse 1.2s infinite;
    }

    .radio-player h1 {
      margin: 14px 0 8px;
      font-size: clamp(2rem, 6vw, 3.6rem);
      font-weight: 900;
      text-transform: uppercase;
    }

    .btn-radio {
      margin-top: 18px;
      padding: 13px 30px;
      color: #111;
      background: #fff;
      border: 2px solid #fff;
      border-radius: 999px;
      font-weight: 800;
    }

    .btn-radio:hover,
    .btn-radio:focus {
      color: #fff;
      background: transparent;
    }

    .install-button {
      display: none;
      margin-top: 14px;
    }

    .volume-wrapper {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      max-width: 340px;
      margin: 24px auto 0;
    }

    #volumeControl {
      width: 220px;
    }

    .player-status {
      min-height: 24px;
      margin: 18px 0 0;
      color: #bbb;
    }

    .player-status.error {
      color: #ff7777;
    }

    footer {
      padding: 28px 16px;
      text-align: center;
      background: #080808;
      color: #aaa;
    }

    @keyframes pulse {
      50% {
        transform: scale(1.35);
        opacity: .45;
      }
    }

    .program-guide {
      padding: 10px 18px 60px;
    }

    .program-guide-inner {
      max-width: 1100px;
      margin: 0 auto;
    }

    .program-guide h2 {
      margin-bottom: 8px;
      font-size: clamp(2rem, 5vw, 3rem);
      font-weight: 900;
      text-align: center;
      text-transform: uppercase;
    }

    .program-guide-intro {
      margin-bottom: 28px;
      color: #aaa;
      text-align: center;
    }

    .schedule-tabs {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 8px;
      margin-bottom: 24px;
    }

    .schedule-tab {
      padding: 10px 16px;
      color: #fff;
      background: #1c1c1c;
      border: 1px solid #3a3a3a;
      border-radius: 999px;
      font-weight: 700;
      cursor: pointer;
    }

    .schedule-tab:hover,
    .schedule-tab:focus,
    .schedule-tab.active {
      color: #111;
      background: #fff;
      border-color: #fff;
    }

    .schedule-day {
      display: none;
    }

    .schedule-day.active {
      display: block;
    }

    .schedule-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
      gap: 16px;
    }

    .show-card {
      min-height: 190px;
      padding: 22px;
      background: #1c1c1c;
      border: 1px solid #333;
      border-radius: 16px;
    }

    .show-time {
      display: block;
      margin-bottom: 10px;
      color: #ff5c5c;
      font-size: .85rem;
      font-weight: 900;
      letter-spacing: 1.4px;
      text-transform: uppercase;
    }

    .show-card h3 {
      margin-bottom: 8px;
      font-size: 1.35rem;
      font-weight: 800;
    }

    .show-card p {
      margin: 0;
      color: #bbb;
      line-height: 1.55;
    }

    .schedule-note {
      margin-top: 22px;
      color: #888;
      font-size: .9rem;
      text-align: center;
    }

  
    .chat-section{
      padding:20px 18px 60px;
    }
    .chat-card{
      max-width:1100px;
      margin:0 auto;
      background:#1c1c1c;
      border:1px solid #333;
      border-radius:16px;
      padding:28px;
    }
    .chat-placeholder{
      margin-top:20px;
      min-height:420px;
      display:flex;
      align-items:center;
      justify-content:center;
      border:2px dashed #555;
      border-radius:12px;
      background:#121212;
      color:#9d9d9d;
      text-align:center;
      padding:20px;
    }

</style>
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <header class="site-banner">
    <img src="TSBanner.png" alt="True School Radio banner">
  </header>

<nav class="main-nav">
  <div class="nav-inner">
    <a class="brand active" href="index.html">True School Radio</a>
    <div class="nav-links">
      <a href="index.html">Home</a>
      <a href="djs.html">DJs</a>
      
      
      <a href="news.html">News</a>
      <a href="studio.html">Live Studio</a>
    </div>
  </div>
</nav>


  <main class="radio-player-section">
    <div class="radio-player text-center">
      <div class="live-status">
        <span class="live-dot"></span>
        LIVE
      </div>

     <audio id="radioStream" preload="none" playsinline>
        Your browser does not support HTML5 streaming audio.
      </audio>

      <div>
        <div class="player-controls-row">
<div class="player-buttons">
<button id="playButton" class="btn btn-radio" type="button">
          <span id="playIcon">▶</span>
          <span id="playText">Listen Live</span>
        </button>

        <button id="volumeButton" class="btn btn-outline-light ms-2 mt-3" type="button">
          🔊
        </button>
</div>


</div>
      </div>

      <button id="installButton" class="btn btn-outline-light install-button" type="button">
        Install True School Radio
      </button>

      <div class="volume-wrapper">
        <label for="volumeControl">Volume</label>
        <input id="volumeControl" type="range" min="0" max="1" step="0.05" value="0.8">
      </div>

      
      
<div class="recent-tracks-panel panel">
  <div class="recent-tracks-heading">
    <div>
      <span class="now-playing-badge">
        <span class="equalizer" aria-hidden="true">
          <span></span><span></span><span></span><span></span>
        </span>
        Now Playing
      </span>
      <h2>True School Radio</h2>
      <p>Current track and recently played music</p>
    </div>
  </div>

  <div class="recent-tracks-stage">
    <div class="cc_recenttracks_list" data-username="veufxvmv">
      Loading current track...
    </div>
  </div>

  <script language="javascript" type="text/javascript"
    src="https://us4new.listen2myradio.com:2199/system/recenttracks.js">

    const recentTracks = document.querySelector(".cc_recenttracks_list");
    if (recentTracks) {
      const animateRecentTracks = () => {
        recentTracks.classList.remove("tracks-refreshed");
        void recentTracks.offsetWidth;
        recentTracks.classList.add("tracks-refreshed");
      };
      new MutationObserver(animateRecentTracks).observe(recentTracks, {
        childList: true, subtree: true, characterData: true
      });
      animateRecentTracks();
    }

  </script>
</div>


      <p id="radioConnectionStatus" class="radio-connection-status" aria-live="polite"></p>
<p class="tunein-help-text">Can't hear the stream? Try one of these links below</p>
<div id="cc_tunein" class="tunein-widget">
<a href="http://us4new.listen2myradio.com:2199/tunein/veufxvmv.pls"><img src="http://us4new.listen2myradio.com:2199/system/images/tunein-pls.png" alt="Winamp, iTunes"></a>
<a href="http://us4new.listen2myradio.com:2199/tunein/veufxvmv.asx"><img src="http://us4new.listen2myradio.com:2199/system/images/tunein-asx.png" alt="Windows Media Player"></a>
<a href="http://us4new.listen2myradio.com:2199/tunein/veufxvmv.ram"><img src="http://us4new.listen2myradio.com:2199/system/images/tunein-ram.png" alt="Real Player"></a>
<a href="http://us4new.listen2myradio.com:2199/tunein/veufxvmv.qtl"><img src="http://us4new.listen2myradio.com:2199/system/images/tunein-qtl.png" alt="QuickTime"></a>
<a href="http://us4new.listen2myradio.com:2199/stream/veufxvmv/stream.pls"><img src="http://us4new.listen2myradio.com:2199/system/images/tunein-web.png" alt="Stream Proxy"></a>
</div>
    </div>
  </main>


  <section class="program-guide" id="program-guide">
    <div class="program-guide-inner">
      <h2>Weekly Program Guide</h2>
      <p class="program-guide-intro">
        Select a day to view the True School Radio broadcast schedule.
      </p>

      <div class="schedule-tabs" role="tablist" aria-label="Weekly radio schedule">
        <button class="schedule-tab active" type="button" data-day="monday">Monday</button>
        <button class="schedule-tab" type="button" data-day="tuesday">Tuesday</button>
        <button class="schedule-tab" type="button" data-day="wednesday">Wednesday</button>
        <button class="schedule-tab" type="button" data-day="thursday">Thursday</button>
        <button class="schedule-tab" type="button" data-day="friday">Friday</button>
        <button class="schedule-tab" type="button" data-day="saturday">Saturday</button>
        <button class="schedule-tab" type="button" data-day="sunday">Sunday</button>
      </div>

      <div class="schedule-day active" id="monday">
        <div class="schedule-grid">
          <article class="show-card"><span class="show-time">8:00 AM – 11:00 AM</span><h3>Morning Mix</h3><p>Classic hip-hop, current independent releases, news, and culture.</p></article>
          <article class="show-card"><span class="show-time">12:00 PM – 1:00 PM</span><h3>Mid-Day Mixdown</h3><p>New music and interviews from independent and emerging artists.</p></article>
          <article class="show-card"><span class="show-time">3:00 PM – 5:00 PM</span><h3>Artist Spotlight</h3><p>A focused look at one influential artist, group, or producer.</p></article>
          <article class="show-card"><span class="show-time">7:00 PM – 10:00 PM</span><h3>True School Evenings</h3><p>Golden-era favorites, deep cuts, and listener requests.</p></article>
        </div>
      </div>

      <div class="schedule-day" id="tuesday">
        <div class="schedule-grid">
          <article class="show-card"><span class="show-time">8:00 AM – 11:00 AM</span><h3>Morning Mix</h3><p>Music, headlines, community updates, and a fresh start to the day.</p></article>
          <article class="show-card"><span class="show-time">12:00 PM – 2:00 PM</span><h3>Producer's Corner</h3><p>Beatmakers, production techniques, samples, and studio stories.</p></article>
          <article class="show-card"><span class="show-time">4:00 PM – 6:00 PM</span><h3>Women in Hip-Hop</h3><p>Celebrating women artists, DJs, producers, and executives.</p></article>
          <article class="show-card"><span class="show-time">8:00 PM – 10:00 PM</span><h3>Late Night Rotation</h3><p>Independent singles, album cuts, and laid-back nighttime selections.</p></article>
        </div>
      </div>

      <div class="schedule-day" id="wednesday">
        <div class="schedule-grid">
          <article class="show-card"><span class="show-time">8:00 AM – 11:00 AM</span><h3>Morning Mix</h3><p>Classic and contemporary hip-hop with conversation and culture.</p></article>
          <article class="show-card"><span class="show-time">1:00 PM – 3:00 PM</span><h3>Knowledge Is Power</h3><p>Education, entrepreneurship, history, and community conversations.</p></article>
          <article class="show-card"><span class="show-time">5:00 PM – 7:00 PM</span><h3>Local Legends</h3><p>Regional artists, neighborhood stories, and hometown classics.</p></article>
          <article class="show-card"><span class="show-time">9:00 PM – 11:00 PM</span><h3>Freestyle Lab</h3><p>Cyphers, live sessions, instrumentals, and lyrical showcases.</p></article>
        </div>
      </div>

      <div class="schedule-day" id="thursday">
        <div class="schedule-grid">
          <article class="show-card"><span class="show-time">8:00 AM – 11:00 AM</span><h3>Morning Mix</h3><p>Daily music, culture, and listener interaction.</p></article>
          <article class="show-card"><span class="show-time">12:00 PM – 3:00 PM</span><h3>Throwback Thursday</h3><p>Old-school classics from the 1980s, 1990s, and early 2000s.</p></article>
          <article class="show-card"><span class="show-time">5:00 PM – 7:00 PM</span><h3>Sample Source</h3><p>The original soul, jazz, and funk records behind legendary beats.</p></article>
          <article class="show-card"><span class="show-time">8:00 PM – 10:00 PM</span><h3>Album Classics</h3><p>Full-album features, reviews, and stories behind landmark releases.</p></article>
        </div>
      </div>

      <div class="schedule-day" id="friday">
        <div class="schedule-grid">
          <article class="show-card"><span class="show-time">8:00 AM – 11:00 AM</span><h3>Friday Morning Mix</h3><p>Weekend energy, new releases, and listener shout-outs.</p></article>
          <article class="show-card"><span class="show-time">1:00 PM – 3:00 PM</span><h3>New Music Friday</h3><p>Fresh singles, new albums, and independent premieres.</p></article>
          <article class="show-card"><span class="show-time">5:00 PM – 8:00 PM</span><h3>Drive Time</h3><p>High-energy selections for the Friday evening commute.</p></article>
          <article class="show-card"><span class="show-time">9:00 PM – Midnight</span><h3>Friday Night Live</h3><p>DJ mixes, special guests, live requests, and party classics.</p></article>
        </div>
      </div>

      <div class="schedule-day" id="saturday">
        <div class="schedule-grid">
          <article class="show-card"><span class="show-time">9:00 AM – 11:00 AM</span><h3>Weekend Wake-Up</h3><p>A relaxed blend of hip-hop, soul, jazz, and positive conversation.</p></article>
          <article class="show-card"><span class="show-time">12:00 PM – 3:00 PM</span><h3>Independent Artist Showcase</h3><p>Unsigned artists, exclusive interviews, and new submissions.</p></article>
          <article class="show-card"><span class="show-time">4:00 PM – 7:00 PM</span><h3>Block Party Mix</h3><p>Up-tempo classics, remixes, dance records, and crowd favorites.</p></article>
          <article class="show-card"><span class="show-time">9:00 PM – Midnight</span><h3>Saturday Night Sessions</h3><p>Extended DJ sets with special guests and themed mixes.</p></article>
        </div>
      </div>

      <div class="schedule-day" id="sunday">
        <div class="schedule-grid">
          <article class="show-card"><span class="show-time">9:00 AM – Noon</span><h3>Soulful Sunday</h3><p>Soul, gospel, jazz, inspirational music, and reflection.</p></article>
          <article class="show-card"><span class="show-time">1:00 PM – 3:00 PM</span><h3>Hip-Hop History</h3><p>Stories, milestones, pioneers, and regional movements.</p></article>
          <article class="show-card"><span class="show-time">4:00 PM – 6:00 PM</span><h3>Community Voices</h3><p>Local leaders, creators, educators, and community organizations.</p></article>
          <article class="show-card"><span class="show-time">7:00 PM – 10:00 PM</span><h3>Sunday Wind-Down</h3><p>Mellow classics, thoughtful conversation, and smooth selections.</p></article>
        </div>
      </div>

      <p class="schedule-note">
        Schedule is customizable and may change for live events or special broadcasts.
      </p>
    </div>
  </section>


  
  
  <section class="chat-section" id="live-chat">
    <div class="chat-card">
      <h2 class="text-center">Speak On It!</h2>
      <p class="text-center text-secondary">
        Join the True School Radio community while listening live.
      </p>

      <div class="d-flex justify-content-center mt-4">
        <iframe
          src="https://www3.cbox.ws/box/?boxid=3515672&boxtag=hNi9hX"
          width="240"
          height="300"
          allowtransparency="yes"
          allow="autoplay"
          frameborder="0"
          marginheight="0"
          marginwidth="0"
          scrolling="auto">
        </iframe>
      </div>
    </div>
  </section>


  <section class="page-shell" style="padding-top:10px;">
    <h2 class="page-title" style="font-size:clamp(1.8rem,4vw,2.8rem);">Featured Station Content</h2>
    <div class="grid">
      <article class="panel"><div class="meta">Meet the Team</div><h3>DJ Profiles</h3><p class="muted">Browse host biographies, show information, and social links.</p><a class="btn-outline" href="djs.html">View DJs</a></article>
      
      
      <article class="panel"><div class="meta">Station Updates</div><h3>News & Announcements</h3><p class="muted">Read programming updates, artist news, and station announcements.</p><a class="btn-outline" href="news.html">Read News</a></article>
      <article class="panel"><div class="meta">Watch Live</div><h3>Video Studio</h3><p class="muted">Watch live studio broadcasts, interviews, performances, and DJ sets.</p><a class="btn-outline" href="studio.html">Open Studio</a></article>
    </div>
  </section>

<footer>
    © 2026 True School Radio
  </footer>

  <script>
    const radio = document.getElementById("radioStream");
    const playButton = document.getElementById("playButton");
    const playIcon = document.getElementById("playIcon");
    const playText = document.getElementById("playText");
    const volumeButton = document.getElementById("volumeButton");
    const volumeControl = document.getElementById("volumeControl");
    const installButton = document.getElementById("installButton");
    const radioConnectionStatus = document.getElementById("radioConnectionStatus");

    /*
      Safari on macOS and Chrome, Edge, and Firefox on Windows can all play a
      direct MP3/Icecast/Shoutcast stream through HTML5 audio.

      The HTTPS address is attempted first so the player can work on an HTTPS
      website. The original HTTP stream is retained as a fallback for local or
      HTTP-hosted copies of the site.
    */
    const streamSources = [
      // Primary Shoutcast stream.
      "http://108.59.11.81:8065/stream?type=http&nocache=" + Date.now(),

      // Shoutcast compatibility fallbacks used by Safari/Chrome/Edge.
      "http://108.59.11.81:8065/;",
      "http://108.59.11.81:8065/stream"
    ];

    let currentSourceIndex = 0;
    let lastVolume = 0.8;
    let deferredInstallPrompt = null;
    let userRequestedPlayback = false;

    radio.volume = Number(volumeControl?.value || 0.8);

    function setStatus(message, isError = false) {
      if (!radioConnectionStatus) return;
      radioConnectionStatus.textContent = message || "";
      radioConnectionStatus.classList.toggle("error", isError);
    }

    function updatePlayButton(isPlaying) {
      if (playIcon) playIcon.textContent = isPlaying ? "❚❚" : "▶";
      if (playText) playText.textContent = isPlaying ? "Pause" : "Listen Live";
      if (playButton) {
        playButton.setAttribute("aria-pressed", String(isPlaying));
        playButton.setAttribute(
          "aria-label",
          isPlaying ? "Pause True School Radio" : "Listen to True School Radio"
        );
      }
    }

    function loadStream(url) {
      radio.pause();
      radio.removeAttribute("src");
      radio.load();
      radio.src = url;
      radio.load();
    }

    function waitForPlayback(timeoutMs = 9000) {
      return new Promise((resolve, reject) => {
        let settled = false;

        const cleanup = () => {
          radio.removeEventListener("playing", onPlaying);
          radio.removeEventListener("error", onError);
          radio.removeEventListener("stalled", onStalled);
          clearTimeout(timer);
        };

        const succeed = () => {
          if (settled) return;
          settled = true;
          cleanup();
          resolve();
        };

        const fail = reason => {
          if (settled) return;
          settled = true;
          cleanup();
          reject(reason instanceof Error ? reason : new Error(String(reason)));
        };

        const onPlaying = () => succeed();
        const onError = () => fail(new Error("Audio stream error"));
        const onStalled = () => {
          // Give slow Shoutcast connections time to recover; timeout handles failure.
        };

        radio.addEventListener("playing", onPlaying, { once: true });
        radio.addEventListener("error", onError, { once: true });
        radio.addEventListener("stalled", onStalled, { once: true });

        const timer = setTimeout(
          () => fail(new Error("Stream connection timed out")),
          timeoutMs
        );

        const playPromise = radio.play();
        if (playPromise && typeof playPromise.catch === "function") {
          playPromise.catch(fail);
        }
      });
    }

    async function playRadio() {
      userRequestedPlayback = true;
      playButton?.classList.add("is-connecting");
      setStatus("Connecting to True School Radio…");

      // Browsers block HTTP audio inside an HTTPS page as mixed content.
      if (window.location.protocol === "https:") {
        setStatus(
          "Your browser may block the HTTP radio server on this secure page. Trying the stream now…"
        );
      }

      for (let attempt = 0; attempt < streamSources.length; attempt += 1) {
        currentSourceIndex = attempt;
        const source = streamSources[attempt];

        try {
          setStatus(
            attempt === 0
              ? "Connecting to the live stream…"
              : `Trying compatibility stream ${attempt + 1}…`
          );

          loadStream(source);
          await waitForPlayback();

          updatePlayButton(true);
          playButton?.classList.remove("is-connecting");
          setStatus("Live stream connected.");
          return;
        } catch (error) {
          console.warn(`Radio source ${attempt + 1} failed:`, error);
        }
      }

      userRequestedPlayback = false;
      updatePlayButton(false);
      playButton?.classList.remove("is-connecting");

      if (window.location.protocol === "https:") {
        setStatus(
          "The browser blocked or could not reach the HTTP stream. Use one of the Tune In links below, or enable HTTPS on the Shoutcast server.",
          true
        );
      } else {
        setStatus(
          "Unable to connect to 108.59.11.81:8065. Please try one of the Tune In links below.",
          true
        );
      }
    }

    playButton?.addEventListener("click", () => {
      if (radio.paused) {
        playRadio();
      } else {
        userRequestedPlayback = false;
        radio.pause();
        updatePlayButton(false);
      }
    });

    volumeControl?.addEventListener("input", () => {
      const newVolume = Number(volumeControl.value);
      radio.volume = newVolume;
      radio.muted = newVolume === 0;

      if (newVolume > 0) lastVolume = newVolume;

      if (volumeButton) {
        volumeButton.textContent =
          newVolume === 0 ? "🔇" : newVolume < 0.5 ? "🔉" : "🔊";
      }
    });

    volumeButton?.addEventListener("click", () => {
      if (radio.muted || radio.volume === 0) {
        radio.muted = false;
        radio.volume = lastVolume || 0.8;
        if (volumeControl) volumeControl.value = String(radio.volume);
      } else {
        lastVolume = radio.volume;
        radio.muted = true;
        if (volumeControl) volumeControl.value = "0";
      }

      volumeButton.textContent = radio.muted ? "🔇" : "🔊";
    });

    radio.addEventListener("playing", () => {
      updatePlayButton(true);
      playButton?.classList.remove("is-connecting");
      setStatus("Live stream connected.");
    });

    radio.addEventListener("pause", () => {
      if (!radio.ended) {
        updatePlayButton(false);
        if (!userRequestedPlayback) setStatus("Playback paused.");
      }
    });

    radio.addEventListener("error", () => {
      /*
        Do not automatically restart forever. The explicit play routine already
        tries each source once, which avoids duplicate audio and browser loops.
      */
      if (!userRequestedPlayback) updatePlayButton(false);
    });

    window.addEventListener("pagehide", () => {
      radio.pause();
    });

    // Register the service worker.
    if ("serviceWorker" in navigator) {
      window.addEventListener("load", async () => {
        try {
          await navigator.serviceWorker.register("sw.js");
          console.log("Service worker registered.");
        } catch (error) {
          console.error("Service worker registration failed:", error);
        }
      });
    }

    // Capture the browser's PWA installation prompt.
    window.addEventListener("beforeinstallprompt", event => {
      event.preventDefault();
      deferredInstallPrompt = event;
      installButton.style.display = "inline-block";
    });

    installButton.addEventListener("click", async () => {
      if (!deferredInstallPrompt) {
        setStatus("Use your browser menu to install this app.");
        return;
      }

      deferredInstallPrompt.prompt();
      const choice = await deferredInstallPrompt.userChoice;

      if (choice.outcome === "accepted") {
        setStatus("True School Radio was installed.");
      }

      deferredInstallPrompt = null;
      installButton.style.display = "none";
    });

    window.addEventListener("appinstalled", () => {
      installButton.style.display = "none";
      deferredInstallPrompt = null;
      setStatus("True School Radio is installed.");
    });

    // Weekly program guide day tabs.
    const scheduleTabs = document.querySelectorAll(".schedule-tab");
    const scheduleDays = document.querySelectorAll(".schedule-day");

    scheduleTabs.forEach(tab => {
      tab.addEventListener("click", () => {
        const selectedDay = tab.dataset.day;

        scheduleTabs.forEach(item => item.classList.remove("active"));
        scheduleDays.forEach(day => day.classList.remove("active"));

        tab.classList.add("active");
        document.getElementById(selectedDay).classList.add("active");
      });
    });

    // Open today's schedule automatically.
    const dayNames = [
      "sunday", "monday", "tuesday", "wednesday",
      "thursday", "friday", "saturday"
    ];
    const today = dayNames[new Date().getDay()];
    const todayTab = document.querySelector(`[data-day="${today}"]`);

    if (todayTab) {
      todayTab.click();
    }


    </script>
</body>
</html>
