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:
@@ -1,11 +1,264 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<html lang="de">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>WebSite</title>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>FSAE41.de</title>
|
||||
|
||||
<meta name="robots" content="noindex">
|
||||
<meta name="robots" content="nofollow">
|
||||
|
||||
<link rel="icon" href="/schule.ico" type="image/x-icon">
|
||||
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
|
||||
|
||||
<script defer src="https://analytics.fsae41.de/script.js"
|
||||
data-website-id="257da02e-d678-47b6-b036-e3bdabaf1405"></script>
|
||||
|
||||
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3-theme-teal.css">
|
||||
<link rel="stylesheet" href="lib/css/mobiscroll.javascript.min.css">
|
||||
<link rel="stylesheet/less" type="text/css" href="index.less" />
|
||||
|
||||
|
||||
<script src="lib/pocketbase.umd.js"></script>
|
||||
<script src="lib/mobiscroll.javascript.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/less"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@tsparticles/confetti@3.0.3/tsparticles.confetti.bundle.min.js"></script>
|
||||
<script defer src="index.js"></script>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>MOIN</h1>
|
||||
|
||||
|
||||
<!-- Header -->
|
||||
<header class="w3-container w3-theme w3-padding">
|
||||
<div class="w3-center">
|
||||
<h1 class="w3-xxxlarge">FSAE41.de</h1>
|
||||
<p>Informationen, Arbeiten & Hilfe</p>
|
||||
<p>R * U * I = 0 =R = U * I</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Main content -->
|
||||
<div class="w3-row-padding w3-margin-top">
|
||||
|
||||
<!-- Box 1: Linke Seite -->
|
||||
<div class="w3-quarter">
|
||||
|
||||
<div class="w3-card w3-white w3-padding">
|
||||
<h3 class="w3-text-teal">BBS</h3>
|
||||
<ul class="w3-ul">
|
||||
<li><a href="https://bbs-brinkstrasse.moodle-nds.de/">Moodle</a></li>
|
||||
<li><a href="https://bbs-brinkstrasse.webuntis.com/WebUntis/?school=bbs-brinkstrasse">WebUntis</a></li>
|
||||
<li><a href="/freigabe/Stundentafel-Abendform-2022.pdf">Stundentafel</a></li>
|
||||
<li><a href="https://virtueller-stundenplan.org/page2/page-22/" target="_blank">Digit. Schülerausweis</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="w3-card w3-white w3-padding w3-margin-top">
|
||||
<h3 class="w3-text-teal">AEVO</h3>
|
||||
<ul class="w3-ul">
|
||||
<!--<li><a href="/ausbildung_quiz.html">AEVO Fragen</a></li>-->
|
||||
<li><a href="https://www.bibb.de/dienst/berufesuche/de/index_berufesuche.php" target="_blank">BIBB AEVO</a>
|
||||
</li>
|
||||
<li><a href="https://www.ihk.de/osnabrueck/" target="_blank">IHK-OSNA</a> / <a
|
||||
href="https://www.hwk-osnabrueck.de/" target="_blank">HWK-OSNA</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="w3-card w3-white w3-padding w3-margin-top">
|
||||
<h3 class="w3-text-teal">Services</h3>
|
||||
<ul class="w3-ul">
|
||||
<li><a href="/wlan.html" target="_blank">FSAE41 WLAN</a></li>
|
||||
<li><a href="https://link.fsae41.de/" target="_blank">LinkShare</a></li>
|
||||
<li><a href="https://etherpad.fsae41.de/" target="_blank">Etherpad</a></li>
|
||||
<li><a href="https://analytics.fsae41.de/share/dGTijC1mnk4dU4iZ" target="_blank">Web Analytics</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="w3-card w3-white w3-padding w3-margin-top">
|
||||
<h3 class="w3-text-teal">Nützliche Links</h3>
|
||||
<ul class="w3-ul">
|
||||
<li><a href="https://www.falstad.com/circuit/" target="_blank">falstad - Web "MultiSim"</a></li>
|
||||
<li><a href="/old/index.html" target="_blank">Alte Website</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Box 2: -->
|
||||
<div class="w3-half">
|
||||
<div class="w3-card w3-white w3-padding w3-margin-bottom">
|
||||
<h1 id="main-heading" class="w3-text-teal w3-round-large w3-center w3-lime w3-padding-12"></h1>
|
||||
<h3 id="target-info" class="w3-center"></h3>
|
||||
<h2 id="countdown" class="w3-center"></h2>
|
||||
<div id="totals" class="w3-center"></div>
|
||||
|
||||
<!--<iframe src="/countdown.html" frameborder="0" style="width:100%;"></iframe>-->
|
||||
</div>
|
||||
<div class="mainbox w3-margin-bottom">
|
||||
<img src="https://fsae41.de/random/pic" style="width:100%">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Box 3: -->
|
||||
<div class="w3-quarter">
|
||||
<!--
|
||||
<div class="mainbox w3-margin-bottom">
|
||||
<img src="https://fsae41.de/random/pic" style="width:100%;max-width:600px">
|
||||
</div>
|
||||
-->
|
||||
<div class="mainbox events" id="events">
|
||||
<h3>Termine</h3>
|
||||
</div>
|
||||
<!--
|
||||
<div class="w3-card w3-white w3-padding w3-margin-top" id="events">
|
||||
<h3 class="w3-text-teal">Stundenplan</h3>
|
||||
</div>
|
||||
-->
|
||||
<div class="mainbox w3-margin-top">
|
||||
<h3 class="w3-text-teal">Sonder Funktionen</h3>
|
||||
<button class="w3-button w3-teal w3-margin-bottom w3-round" onclick="openAuth()">Login</button>
|
||||
<button class="w3-button w3-teal w3-margin-bottom w3-round" onclick="addPic()">Foto hochladen</button>
|
||||
<button id="notify-btn" class="w3-button w3-teal w3-margin-bottom w3-round">Notify me!</button>
|
||||
<script>
|
||||
const VAPID_PUBLIC_KEY = 'BPPom1qN0L5NF90gxpABHTY2gjXAgCYVvPwXYdfrwxJ1O26Za9A80f7ZcCy6P8vwzbT8dhMvrFzWUjuYN136IFA';
|
||||
|
||||
// Button Event
|
||||
document.getElementById('notify-btn').addEventListener('click', async () => {
|
||||
if (!("Notification" in window)) {
|
||||
alert("Dieser Browser unterstützt keine Desktop-Benachrichtigungen.");
|
||||
return;
|
||||
}
|
||||
|
||||
// Notification permission anfragen
|
||||
const permission = await Notification.requestPermission();
|
||||
if (permission !== "granted") {
|
||||
alert("Benachrichtigungen wurden nicht erlaubt.");
|
||||
return;
|
||||
}
|
||||
|
||||
// Service Worker registrieren
|
||||
if (!('serviceWorker' in navigator)) {
|
||||
alert("Service Worker werden in diesem Browser nicht unterstützt.");
|
||||
return;
|
||||
}
|
||||
|
||||
const name = await prompt("Wie ist dein Name?") || "Gast";
|
||||
|
||||
if (name == "Gast") {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const registration = await navigator.serviceWorker.register('lib/sw.js')
|
||||
console.log('Service Worker registriert:', registration);
|
||||
|
||||
// Push Subscription erstellen
|
||||
const subscription = await registration.pushManager.subscribe({
|
||||
userVisibleOnly: true,
|
||||
applicationServerKey: urlBase64ToUint8Array(VAPID_PUBLIC_KEY)
|
||||
});
|
||||
console.log('Push Subscription:', subscription);
|
||||
|
||||
|
||||
|
||||
let payload = JSON.parse(JSON.stringify(subscription));
|
||||
payload.username = name;
|
||||
|
||||
// Subscription zum Server senden
|
||||
await fetch('/save-subscription', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(payload)
|
||||
});
|
||||
|
||||
//Sofortige Notification als Test
|
||||
new Notification(`Danke ${name}!`, {
|
||||
body: "Du hast die Benachrichtigungen erfolgreich aktiviert."
|
||||
});
|
||||
|
||||
} catch (err) {
|
||||
console.error("Fehler bei Service Worker oder Push:", err);
|
||||
}
|
||||
});
|
||||
|
||||
// Helper: VAPID Key in Uint8Array konvertieren
|
||||
function urlBase64ToUint8Array(base64String) {
|
||||
const padding = '='.repeat((4 - base64String.length % 4) % 4);
|
||||
const base64 = (base64String + padding).replace(/\-/g, '+').replace(/_/g, '/');
|
||||
const rawData = atob(base64);
|
||||
return Uint8Array.from([...rawData].map(char => char.charCodeAt(0)));
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="w3-container w3-theme w3-center w3-padding-16 w3-margin-top">
|
||||
<p>FSAE41.de Startseite<br>Danke an
|
||||
<a href="https://lifab.de/OT" class="rainbow-text" style="font-size: 42px; text-decoration: underline;">die
|
||||
OT</a>
|
||||
und ChatGPT
|
||||
</p>
|
||||
</footer>
|
||||
|
||||
<div class="modul">
|
||||
<!--Login/Sigup Page-->
|
||||
<div id="auth-module">
|
||||
<div class="auth-box" id="auth-box">
|
||||
<button class="close-btn" onclick="closeAuth()">X</button>
|
||||
<form id="loginForm">
|
||||
<h2>Login</h2>
|
||||
<input type="email" placeholder="E-Mail" required />
|
||||
<input type="password" placeholder="Passwort" required />
|
||||
<button type="submit">Einloggen</button>
|
||||
<div class="switch">Noch kein Konto? <span onclick="toggleForms()">Registrieren</span></div>
|
||||
</form>
|
||||
|
||||
<form id="signupForm" class="hidden">
|
||||
<h2>Signup</h2>
|
||||
<input type="text" placeholder="Name" required />
|
||||
<input type="email" placeholder="E-Mail" required />
|
||||
<input type="password" id="signupPassword" placeholder="Passwort" required />
|
||||
<input type="password" id="signupPasswordConfirm" placeholder="Passwort wiederholen" required />
|
||||
<button type="submit">Registrieren</button>
|
||||
<div class="switch">Schon ein Konto? <span onclick="toggleForms()">Login</span></div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script id="sc">
|
||||
fetch('/random/background').then(response => response.text()).then(d => {
|
||||
if (d == "true") {
|
||||
let x = document.createElement("img");
|
||||
x.src = '/static/nico.png?' + new Date().getTime();
|
||||
x.style.position = "fixed";
|
||||
x.style.top = "0";
|
||||
x.style.left = "0";
|
||||
x.style.width = "100%";
|
||||
x.style.height = "100%";
|
||||
document.body.appendChild(x);
|
||||
|
||||
x.onload = () => {
|
||||
setTimeout(() => {
|
||||
x.style.transition = "opacity 5s";
|
||||
x.style.opacity = "0";
|
||||
setTimeout(() => {
|
||||
document.body.removeChild(x);
|
||||
}, 5100);
|
||||
}, 3000);
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
// remove this script tag after execution
|
||||
document.getElementById("sc").outerHTML = ""
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user