Add service worker for push notifications, create calendar layout, and implement WLAN QR code page
- 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.
This commit is contained in:
234
public/old/index.html
Normal file
234
public/old/index.html
Normal file
@@ -0,0 +1,234 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user