Display Page
Display Page
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Full Screen Bell Display</title>
<style>
body {
margin: 0;
background: #f7f7f7;
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
text-align: center;
}
h1 {
font-size: 5vw;
margin-bottom: 0.5em;
}
#current-date {
font-size: 2.5vw;
margin-bottom: 0.5em;
}
#current-time {
font-size: 3vw;
margin-bottom: 0.5em;
}
#countdown {
font-size: 3vw;
color: #0077cc;
margin-bottom: 1em;
}
#current-period {
font-size: 8vw;
font-weight: bold;
padding: 0.2em 0.5em;
background-color: #c8f7c5;
border-radius: 10px;
}
</style>
</head>
<body>
<h1>Normal Bell Schedule</h1>
<div id="current-date"></div>
<div id="current-time"></div>
<div id="countdown"></div>
<div id="current-period"></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 updateDisplay() {
const now = new Date();
document.getElementById('current-date').textContent = formatDate(now);
document.getElementById('current-time').textContent = `Current Time: ${formatAMPM(now)}`;
let currentEvent = null;
let nextEvent = null;
for (let i = 0; i < schedule.length; i++) {
const start = parseTime(schedule[i].time, now);
const end = i + 1 < schedule.length ? parseTime(schedule[i + 1].time, now) : null;
if (now >= start && (!end || now < end)) {
currentEvent = schedule[i];
nextEvent = schedule[i + 1] || null;
break;
}
}
if (currentEvent) {
document.getElementById('current-period').textContent = currentEvent.label;
} else {
document.getElementById('current-period').textContent = "School Day Over";
}
if (nextEvent) {
const diffMs = parseTime(nextEvent.time, now) - 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 = "";
}
}
updateDisplay();
setInterval(updateDisplay, 1000);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Assembly Schedule</title>
<style>
body {
margin: 0;
background: #f7f7f7;
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
text-align: center;
}
h1 {
font-size: 5vw;
margin-bottom: 0.5em;
}
#current-time {
font-size: 3vw;
margin-bottom: 1em;
}
#countdown {
font-size: 3vw;
color: #0077cc;
margin-bottom: 1em;
}
#current-period {
font-size: 8vw;
font-weight: bold;
padding: 0.2em 0.5em;
background-color: #c8f7c5;
border-radius: 10px;
margin-bottom: 1em;
}
#sub-periods {
font-size: 3vw;
list-style: none;
padding: 0;
max-width: 80%;
margin: auto;
}
#sub-periods li {
padding: 0.3em 0.5em;
margin: 0.2em 0;
border-radius: 6px;
background-color: #fff7b2;
}
#sub-periods li.highlight {
background-color: #ffd966;
}
</style>
</head>
<body>
<h1>Assembly Schedule</h1>
<div id="current-time"></div>
<div id="countdown"></div>
<div id="current-period"></div>
<ul id="sub-periods"></ul>
<script>
const schedule = [
{ time: "07:10", label: "Warning Bell" },
{ time: "07:15", label: "1st/5th Period", subs: ["Mark tardy, No restroom", "No restroom, Mark absent", "Restroom passes allowed, Mark absent", "No restroom passes"] },
{ time: "08:33", label: "2nd/6th Period", subs: ["Mark tardy, No restroom", "No restroom, Mark absent", "Restroom passes allowed, Mark absent", "No restroom passes"] },
{ time: "10:58", label: "Assembly" },
{ time: "11:03", label: "3rd/7th Period", subs: ["Mark tardy, No restroom", "No restroom, Mark absent", "Restroom passes allowed, Mark absent", "No restroom passes"] },
{ time: "12:51", label: "4th/8th Period", subs: ["Mark tardy, No restroom", "No restroom, Mark absent", "Restroom passes allowed, Mark absent", "No restroom passes"] },
{ 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 parseTime(timeStr, now) {
const [h, m] = timeStr.split(":").map(Number);
return new Date(now.getFullYear(), now.getMonth(), now.getDate(), h, m, 0);
}
function updateDisplay() {
const now = new Date();
document.getElementById('current-time').textContent = `Current Time: ${formatAMPM(now)}`;
let currentEvent = null;
let nextEvent = null;
for (let i = 0; i < schedule.length; i++) {
const start = parseTime(schedule[i].time, now);
const end = i + 1 < schedule.length ? parseTime(schedule[i + 1].time, now) : null;
if (now >= start && (!end || now < end)) {
currentEvent = schedule[i];
nextEvent = schedule[i + 1] || null;
break;
}
}
const currentPeriodDiv = document.getElementById('current-period');
const subsList = document.getElementById('sub-periods');
subsList.innerHTML = "";
if (currentEvent) {
currentPeriodDiv.textContent = currentEvent.label;
if (currentEvent.subs) {
const start = parseTime(currentEvent.time, now);
const end = nextEvent ? parseTime(nextEvent.time, now) : null;
const minutesElapsed = (now - start) / 60000;
const totalMinutes = end ? (end - start) / 60000 : 0;
currentEvent.subs.forEach((sub, idx) => {
const li = document.createElement('li');
li.textContent = sub;
if (idx === 0 && minutesElapsed < 10) li.classList.add('highlight');
else if (idx === 1 && minutesElapsed >= 10 && minutesElapsed < 15) li.classList.add('highlight');
else if (idx === 2 && minutesElapsed >= 15 && minutesElapsed < totalMinutes - 15) li.classList.add('highlight');
else if (idx === 3 && minutesElapsed >= totalMinutes - 15) li.classList.add('highlight');
subsList.appendChild(li);
});
}
} else {
currentPeriodDiv.textContent = "School Day Over";
}
if (nextEvent) {
const diffMs = parseTime(nextEvent.time, now) - 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 = "";
}
}
updateDisplay();
setInterval(updateDisplay, 1000);
</script>
</body>
</html>