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.
2026-02-22 00:50:22 +01:00
parent 6b96cd2012
commit 038910e9f0
26 changed files with 32980 additions and 5 deletions
--- a/public/old/countdown.html
+++ b/public/old/countdown.html
@@ -0,0 +1,185 @@
+<!DOCTYPE html>
+<html lang="de">
+
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Countdown/Countup Timer</title>
+    <!-- Tab-Icon hinzufügen -->
+    <link rel="icon" href="https://cdn-icons-png.flaticon.com/512/8730/8730547.png" type="image/x-icon">
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            height: 100vh;
+            margin: 0;
+            background-color: #f0f0f0;
+            text-align: center;
+        }
+
+        #main-heading {
+            color: red;
+            font-size: 3.5rem;
+            margin-bottom: 30px;
+            font-weight: 900;
+            background-color: #90EE90;
+            padding: 20px;
+            border-radius: 10px;
+        }
+
+        #target-info {
+            font-size: 1.2rem;
+            margin-bottom: 20px;
+            color: #333;
+        }
+
+        #countdown {
+            font-size: 2rem;
+            background: white;
+            padding: 20px;
+            border-radius: 10px;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        }
+
+        #totals {
+            margin-top: 20px;
+            font-size: 1rem;
+            color: #666;
+        }
+    </style>
+</head>
+
+<body>
+    <div id="main-heading">geht bald los...</div>
+    <div id="target-info">Bis zum 28.08.2025 um 17:30:00 Uhr sind es noch:</div>
+    <div id="countdown">
+        1d 0h 38m 26s 801ms
+    </div>
+    <div id="totals">
+        Jahre: 0.00 |
+        Wochen: 0 |
+        Tage: 1 |
+        Stunden: 24 |
+        Sekunden: 88.706
+    </div>
+
+    <script>
+        // Function to get query parameter from URL
+        function getQueryParam(param) {
+            const urlParams = new URLSearchParams(window.location.search);
+            return urlParams.get(param);
+        }
+
+        // Function to pad numbers with leading zeros
+        function padZero(num, places) {
+            return num.toString().padStart(places, '0');
+        }
+
+        // Function to format number with thousand separators
+        function formatNumber(num) {
+            return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
+        }
+
+        // Function to format date for display
+        function formatDate(date) {
+            return `${padZero(date.getDate(), 2)}.${padZero(date.getMonth() + 1, 2)}.${date.getFullYear()} um ${padZero(date.getHours(), 2)}:${padZero(date.getMinutes(), 2)}:${padZero(date.getSeconds(), 2)}`;
+        }
+
+        // Get query parameters
+        const targetDateStr = getQueryParam('target');
+        const headingText = getQueryParam('heading');
+
+        // Select elements
+        const mainHeadingElement = document.getElementById('main-heading');
+        const targetInfoElement = document.getElementById('target-info');
+        const countdownElement = document.getElementById('countdown');
+        const totalsElement = document.getElementById('totals');
+
+        // Set heading if provided
+        if (headingText) {
+            mainHeadingElement.textContent = decodeURIComponent(headingText);
+        } else {
+            mainHeadingElement.style.display = 'none';
+        }
+
+        // Handle different scenarios
+        if (!targetDateStr) {
+            // No target specified
+            targetInfoElement.innerHTML = "Ja, worauf warten wir?";
+            countdownElement.innerHTML = "";
+            totalsElement.innerHTML = "";
+        } else {
+            try {
+                // Parse the target date
+                const targetDate = new Date(targetDateStr);
+
+                // Validate the date
+                if (isNaN(targetDate.getTime())) {
+                    targetInfoElement.innerHTML = "hmm, da stimmt was nicht!";
+                    countdownElement.innerHTML = "";
+                    totalsElement.innerHTML = "";
+                } else {
+                    // Determine if date is in past or future
+                    const now = new Date().getTime();
+                    const target = targetDate.getTime();
+                    let isInPast = target < now;
+
+                    // Countdown/Countup function
+                    function updateTimer() {
+                        const now = new Date().getTime();
+                        const distance = Math.abs(target - now);
+                        isInPast = target < now;
+
+                        // Set target info text based on past/future
+                        const targetInfoText = isInPast
+                            ? `Seit dem ${formatDate(targetDate)} Uhr sind es schon:`
+                            : `Bis zum ${formatDate(targetDate)} Uhr sind es noch:`;
+                        targetInfoElement.innerHTML = targetInfoText;
+
+                        const days = Math.floor(distance / (1000 * 60 * 60 * 24));
+                        const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+                        const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
+                        const seconds = Math.floor((distance % (1000 * 60)) / 1000);
+                        const milliseconds = Math.floor(distance % 1000);
+
+                        // Calculate total values
+                        const totalDays = days;
+                        const totalWeeks = Math.floor(totalDays / 7);
+                        const totalHours = totalDays * 24 + hours;
+                        const totalSeconds = totalDays * 24 * 60 * 60 + hours * 60 * 60 + minutes * 60 + seconds;
+                        const totalYears = (totalDays / 365).toFixed(2); // Calculate total years to 2 decimal places
+
+                        // Display countdown/countup
+                        countdownElement.innerHTML = `
+                            ${days}d ${hours}h ${minutes}m ${seconds}s ${padZero(milliseconds, 3)}ms
+                        `;
+
+                        // Display totals with thousand separators
+                        totalsElement.innerHTML = `
+                            Jahre: ${totalYears} | 
+							Wochen: ${formatNumber(totalWeeks)} |
+                            Tage: ${formatNumber(totalDays)} |  
+                            Stunden: ${formatNumber(totalHours)} | 
+                            Sekunden: ${formatNumber(totalSeconds)}
+                        `;
+                    }
+
+                    // Update timer every 10 milliseconds
+                    setInterval(updateTimer, 10);
+                    updateTimer(); // Initial call
+                }
+            } catch (error) {
+                targetInfoElement.innerHTML = "hmm, da stimmt was nicht!";
+                countdownElement.innerHTML = "";
+                totalsElement.innerHTML = "";
+            }
+        }
+    </script>
+
+</body>
+
+</html>
--- a/public/old/index.html
+++ b/public/old/index.html
@@ -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>