BolkeDerBaer
038910e9f0
- Implemented a service worker (sw.js) to handle push notifications with dynamic options and notification click events. - Created a calendar layout in test.html with a grid system for displaying events across days and times. - Developed a visually engaging WLAN QR code page (wlan.html) with animated backgrounds, particle effects, and tips for connecting to the network.
234 lines
7.1 KiB
HTML
234 lines
7.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
|
|
<head>
|
|
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
|
<meta charset="UTF-8">
|
|
|
|
<meta name="robots" content="noindex">
|
|
<meta name="robots" content="nofollow">
|
|
|
|
<link rel="icon" href="https://lifab.de/favicon_16x_32x_48x_v1.ico" type="image/x-icon">
|
|
<script defer src="https://analytics.fsae41.de/script.js" data-website-id="257da02e-d678-47b6-b036-e3bdabaf1405"></script>
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Unterrichtszeit Countdown</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
background-color: #1e1e1e;
|
|
color: white;
|
|
text-align: center;
|
|
padding: 20px;
|
|
}
|
|
|
|
#clock {
|
|
font-size: 2.5em;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
iframe {
|
|
border: none;
|
|
width: 90vw;
|
|
height: 60vh;
|
|
max-width: 1000px;
|
|
}
|
|
|
|
.wheeler {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: auto;
|
|
z-index: 1000;
|
|
}
|
|
|
|
#image {
|
|
max-width: 100%;
|
|
height: auto;
|
|
display: none;
|
|
}
|
|
</style>
|
|
<script src="/lib/pocketbase.umd.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="clock">14:51:32</div>
|
|
<div id="countdown-container">
|
|
<iframe id="countdown" src="countdown_old.html"></iframe>
|
|
</div>
|
|
<canvas id="myChart" style="display:none;width:100%;max-width:700px"></canvas>
|
|
<div class="wheeler">
|
|
<img id="image" src="Wheeler.webp" alt="Wheeler">
|
|
</div>
|
|
<div style="padding: 5px; background-color: white;">
|
|
<a href="https://fsae41.de/ausbildung_quiz.html">AEVO-Held</a>
|
|
</div>
|
|
|
|
<script>
|
|
let PB = new PocketBase();
|
|
|
|
let lastURL = "";
|
|
|
|
function updateClock() {
|
|
const now = new Date();
|
|
document.getElementById('clock').innerText = now.toLocaleTimeString('de-DE');
|
|
}
|
|
|
|
function pad(n) {
|
|
return n < 10 ? '0' + n : n;
|
|
}
|
|
|
|
function getCountdownURL() {
|
|
const now = new Date();
|
|
const day = now.getDay();
|
|
const current = now.getTime();
|
|
const todayStr = `${now.getFullYear()}-${pad(now.getMonth() + 1)}-${pad(now.getDate())}`;
|
|
|
|
const schedule = {
|
|
1: [ // Montag
|
|
{ start: "17:30", end: "19:00", label: "1. Stunde" },
|
|
{ start: "19:00", end: "19:15", label: "Pause" },
|
|
{ start: "19:15", end: "20:45", label: "2. Stunde" },
|
|
],
|
|
2: [ // Dienstag
|
|
{ start: "17:00", end: "18:20", label: "1. Stunde" },
|
|
{ start: "18:20", end: "18:30", label: "Pause" },
|
|
{ start: "18:30", end: "19:50", label: "2. Stunde" },
|
|
{ start: "19:50", end: "20:00", label: "Pause" },
|
|
{ start: "20:00", end: "21:20", label: "3. Stunde" },
|
|
],
|
|
4: [ // Donnerstag
|
|
{ start: "17:30", end: "19:00", label: "1. Stunde" },
|
|
{ start: "19:00", end: "19:15", label: "Pause" },
|
|
{ start: "19:15", end: "20:45", label: "2. Stunde" },
|
|
]
|
|
};
|
|
|
|
const todaySchedule = schedule[day] || [];
|
|
|
|
for (const block of todaySchedule) {
|
|
const [startH, startM] = block.start.split(":").map(Number);
|
|
const [endH, endM] = block.end.split(":").map(Number);
|
|
const startTime = new Date(now.getFullYear(), now.getMonth(), now.getDate(), startH, startM);
|
|
const endTime = new Date(now.getFullYear(), now.getMonth(), now.getDate(), endH, endM);
|
|
|
|
if (current >= startTime.getTime() && current < endTime.getTime()) {
|
|
return `https://fsae41.de/old/countdown.html?target=${todayStr}T${pad(endH)}:${pad(endM)}:00&heading=${encodeURIComponent(block.label)}`;
|
|
}
|
|
}
|
|
|
|
// Kein aktueller Block aktiv: zeige nächstes Ereignis
|
|
const futureTimes = [];
|
|
for (let offset = 0; offset < 7; offset++) {
|
|
const checkDay = (day + offset) % 7;
|
|
const checkDate = new Date(now);
|
|
checkDate.setDate(now.getDate() + offset);
|
|
const dateStr = `${checkDate.getFullYear()}-${pad(checkDate.getMonth() + 1)}-${pad(checkDate.getDate())}`;
|
|
if (!schedule[checkDay]) continue;
|
|
|
|
for (const block of schedule[checkDay]) {
|
|
const [startH, startM] = block.start.split(":").map(Number);
|
|
|
|
const blockStart = new Date(checkDate.getFullYear(), checkDate.getMonth(), checkDate.getDate(), startH, startM);
|
|
if (blockStart.getTime() > current) {
|
|
futureTimes.push({ time: blockStart, label: "geht bald los..." });
|
|
break;
|
|
}
|
|
}
|
|
if (futureTimes.length > 0) break;
|
|
}
|
|
|
|
|
|
if (futureTimes.length > 0) {
|
|
const next = futureTimes[0];
|
|
let x = next.time.getHours(); // Korrigieren der Zeitumstellung
|
|
next.time.setHours(x + 2);
|
|
return `https://fsae41.de/old/countdown.html?target=${next.time.toISOString().split('.')[0]}&heading=geht%20bald%20los...`;
|
|
}
|
|
|
|
return `https://fsae41.de/old/countdown.html?target=2099-01-01T00:00:00&heading=Fehler`;
|
|
}
|
|
|
|
function updateCountdown() {
|
|
const url = getCountdownURL();
|
|
if (url !== lastURL) {
|
|
location.reload(); // Ganze Seite neu laden, wenn URL sich ändert
|
|
}
|
|
}
|
|
|
|
function setInitialCountdown() {
|
|
const url = getCountdownURL();
|
|
lastURL = url;
|
|
document.getElementById('countdown').src = url;
|
|
}
|
|
|
|
async function addView() {
|
|
const record = await PB.collection('views').create({ device: navigator.userAgent });
|
|
|
|
fetch('https://fsae41.de/views').then(response => response.json()).then(data => {
|
|
|
|
let time = [0];
|
|
let counts = [0];
|
|
|
|
for (let i = data.list.length - 1; i > 0; i--) {
|
|
let x = data.list[i];
|
|
time.push(i);
|
|
counts.push(x.count);
|
|
}
|
|
|
|
new Chart("myChart", {
|
|
type: "line",
|
|
data: {
|
|
labels: time,
|
|
datasets: [{
|
|
backgroundColor: "rgba(0,0,255,1.0)",
|
|
borderColor: "rgba(0,0,255,0.1)",
|
|
data: counts
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
plugins: {
|
|
legend: {
|
|
display: true
|
|
}
|
|
},
|
|
scales: {
|
|
x: { title: { display: true, text: "Zeitpunkte" } },
|
|
y: { title: { display: true, text: "Views" }, beginAtZero: true }
|
|
}
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
addView();
|
|
updateClock();
|
|
setInitialCountdown();
|
|
setInterval(updateClock, 1000);
|
|
setInterval(updateCountdown, 10000); // alle 10 Sekunden prüfen
|
|
setInterval(addView, 30000); // alle 30 Sekunden prüfen
|
|
|
|
|
|
// Subscribe to changes in any popups record
|
|
PB.collection('popups').subscribe('*', function (e) {
|
|
if (e.action === 'create') {
|
|
if (e.record.image_url) {
|
|
document.getElementById("image").src = e.record.image_url;
|
|
document.getElementById("image").style.display = "block";
|
|
setTimeout(() => {
|
|
document.getElementById("image").style.display = "none";
|
|
}, 5000); // Nach 15 Sekunden zurücksetzen
|
|
|
|
return;
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
|
|
|
|
</body>
|
|
|
|
</html> |