Normal Bell Schedule

<div id="bell-widget" style="font-family: Arial, sans-serif; padding: 20px; background: #f7f7f7; border-radius: 10px; width: 100%; max-width: 900px; margin: auto;">

  <h2 style="text-align: center; font-size: 2em;">Normal Bell Schedule</h2>

  <div id="current-date" style="text-align: center; font-size: 1.2em; margin-bottom: 5px;"></div>

  <div id="current-time" style="text-align: center; font-size: 1.5em; margin-bottom: 10px;"></div>

  <div id="countdown" style="text-align: center; font-size: 1.8em; color: #0077cc; margin-bottom: 15px;"></div>

  <ul id="schedule" style="list-style: none; padding: 0; font-size: 1.2em;"></ul>

</div>

<script>

  const schedule = [

    { time: "07:10", label: "Warning Bell" },

    { time: "07:15", label: "1st/5th Period" },

    { time: "08:46", label: "2nd/6th Period" },

    { time: "10:20", label: "Advisory" },

    { time: "10:30", label: "3rd/7th Period" },

    { time: "12:06", label: "Lunch" },

    { time: "12:36", label: "Passing Period" },

    { time: "12:41", label: "4th/8th Period" },

    { time: "14:12", label: "Dismissal Bell" },

    { time: "14:20", label: "Activity Bell" }

  ];

  function formatAMPM(date) {

    let hours = date.getHours();

    let minutes = date.getMinutes();

    const ampm = hours >= 12 ? 'PM' : 'AM';

    hours = hours % 12 || 12;

    minutes = minutes < 10 ? '0' + minutes : minutes;

    return `${hours}:${minutes} ${ampm}`;

  }

  function formatDate(date) {

    return date.toLocaleDateString(undefined, { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' });

  }

  function parseTime(timeStr, now) {

    const [h, m] = timeStr.split(":").map(Number);

    return new Date(now.getFullYear(), now.getMonth(), now.getDate(), h, m, 0);

  }

  function renderSchedule() {

    const list = document.getElementById('schedule');

    list.innerHTML = "";

    for (let i = 0; i < schedule.length; i++) {

      const event = schedule[i];

      const startTime = formatAMPM(new Date(0, 0, 0, ...event.time.split(":")));

      const endTime = schedule[i + 1]

        ? formatAMPM(new Date(0, 0, 0, ...schedule[i + 1].time.split(":")))

        : "";

      const li = document.createElement('li');

      li.style.padding = "6px";

      li.className = event.label.includes("Period") ? "period" : "";

      li.innerHTML = `<strong>${startTime}${endTime ? " - " + endTime : ""} ${event.label}</strong>`;

      if (event.label.includes("Period") && !["Passing Period", "Lunch", "Advisory"].includes(event.label) && schedule[i + 1]) {

        const subList = document.createElement('ul');

        subList.style.fontSize = "0.9em";

        subList.style.marginLeft = "20px";

        subList.style.listStyle = "circle";

        subList.innerHTML = `

          <li>Mark tardy, No restroom</li>

          <li>No restroom, Mark absent</li>

          <li>Restroom passes allowed, Mark absent</li>

          <li>No restroom passes</li>

        `;

        li.appendChild(subList);

      }

      list.appendChild(li);

    }

  }

  function highlightCurrentPeriod(now) {

    const periodItems = document.querySelectorAll("#schedule li.period");

    periodItems.forEach(li => {

      li.style.backgroundColor = "";

      const subItems = li.querySelectorAll("ul li");

      subItems.forEach(sub => sub.style.backgroundColor = "");

    });

    let periodIndex = 0;

    for (let i = 0; i < schedule.length; i++) {

      if (schedule[i].label.includes("Period") && !["Passing Period", "Lunch", "Advisory"].includes(schedule[i].label)) {

        const start = parseTime(schedule[i].time, now);

        const end = schedule[i + 1] ? parseTime(schedule[i + 1].time, now) : null;

        if (end && now >= start && now < end) {

          const li = periodItems[periodIndex];

          li.style.backgroundColor = "#c8f7c5";

          li.style.borderRadius = "6px";

          const minutesElapsed = (now - start) / 60000;

          const totalMinutes = (end - start) / 60000;

          const subItems = li.querySelectorAll("ul li");

          if (minutesElapsed < 10) {

            subItems[0].style.backgroundColor = "#fff7b2";

          } else if (minutesElapsed < 15) {

            subItems[1].style.backgroundColor = "#fff7b2";

          } else if (minutesElapsed < totalMinutes - 15) {

            subItems[2].style.backgroundColor = "#fff7b2";

          } else {

            subItems[3].style.backgroundColor = "#fff7b2";

          }

        }

        periodIndex++;

      }

    }

  }

  function updateClock() {

    const now = new Date();

    document.getElementById('current-date').textContent = formatDate(now);

    document.getElementById('current-time').textContent = `Current Time: ${formatAMPM(now)}`;

    let nextEvent = null;

    for (let event of schedule) {

      const eventTime = parseTime(event.time, now);

      if (eventTime > now) {

        nextEvent = { ...event, date: eventTime };

        break;

      }

    }

    if (nextEvent) {

      const diffMs = nextEvent.date - now;

      const minutes = Math.floor(diffMs / 60000);

      const seconds = Math.floor((diffMs % 60000) / 1000);

      document.getElementById('countdown').textContent =

        `Countdown to ${nextEvent.label}: ${minutes}:${seconds.toString().padStart(2, '0')}`;

    } else {

      document.getElementById('countdown').textContent = "School Day Over";

    }

    highlightCurrentPeriod(now);

  }

  renderSchedule();

  updateClock();

  setInterval(updateClock, 1000);

</script>