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.
264 lines
9.7 KiB
HTML
264 lines
9.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
|
|
<head>
|
|
<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>
|
|
|
|
|
|
<!-- 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> |