thomas/vibing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

up up and away

Browse Source
This commit is contained in:
thrhymes
2025-12-24 21:35:43 +01:00
parent b049dded72
commit 354e897e55
7 changed files with 508 additions and 536 deletions
Download Patch File Download Diff File Expand all files Collapse all files

581
zuss/app.js
View File

@@ -1,321 +1,394 @@
/* WFW-Aushang PWA
* - Listet Dateien aus public WebDAV Share
* - Öffnet PDFs über PDF.js
* - Kioskiges Install/Update Overlay
* - Install/Update Overlay mit beforeinstallprompt.prompt()
*/
const SHARE_TOKEN = "T9e7WESBXxy6rSD";
const SHARE_ROOT = "/"; // im Share
const DAV_BASE = `https://home.x-s.at/public.php/dav/files/${SHARE_TOKEN}`;
const PDFJS_VIEWER = "https://home.x-s.at/pdfjs/web/viewer.html?file=";
// Versioning für Overlay / Update-Erkennung
const APP_VERSION = "2025.12.24.2";
const DISMISS_KEY = "wfw_overlay_dismissed_for";
const APP_VERSION = "2025.12.24.6";
const TOKEN = "T9e7WESBXxy6rSD";
const BASE = "https://home.x-s.at";
const SHARE_DAV = `${BASE}/public.php/dav/files/${TOKEN}`;
const PDFJS = `${BASE}/pdfjs/web/viewer.html?file=`;
// relative to /zuss/
const VERSION_URL = "./version.json";
const LIST_START_DIR = "/"; // share root
function $(id){ return document.getElementById(id); }
let deferredInstallPrompt = null;
let latestKnown = APP_VERSION;
function applyTheme(theme){
document.documentElement.setAttribute("data-theme", theme);
localStorage.setItem("wfw_theme", theme);
const $ = (id) => document.getElementById(id);
function showError(msg) {
const el = $("err");
el.style.display = "block";
el.textContent = msg;
}
function initTheme(){
const saved = localStorage.getItem("wfw_theme");
if (saved) return applyTheme(saved);
const prefersDark = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
applyTheme(prefersDark ? "dark" : "light");
function clearError() {
const el = $("err");
el.style.display = "none";
el.textContent = "";
}
function setStatus(msg) { $("status").textContent = msg; }
function isInstalledPWA(){
const m = window.matchMedia ? window.matchMedia("(display-mode: standalone)") : null;
const m2 = window.matchMedia ? window.matchMedia("(display-mode: fullscreen)") : null;
const isStandalone = !!(m && m.matches);
const isFullscreen = !!(m2 && m2.matches);
const isIOSStandalone = window.navigator.standalone === true;
return isStandalone || isFullscreen || isIOSStandalone;
}
function showOverlay({title, text, primaryText, hint=""}){
function showOverlay(title, text, primaryText, showPrimary = true) {
$("ovTitle").textContent = title;
$("ovText").textContent = text;
$("ovPrimaryBtn").textContent = primaryText;
$("ovHint").textContent = hint;
$("installOverlay").hidden = false;
$("ovPrimaryBtn").style.display = showPrimary ? "flex" : "none";
$("ovHint").style.display = "none";
$("installOverlay").style.display = "block";
}
function hideOverlay(){
$("installOverlay").hidden = true;
function hideOverlay() {
$("installOverlay").style.display = "none";
}
function markOverlayDismissed(latestVersion){
sessionStorage.setItem(DISMISS_KEY, latestVersion || APP_VERSION);
}
function isOverlayDismissed(latestVersion){
const v = sessionStorage.getItem(DISMISS_KEY);
return v && v === (latestVersion || APP_VERSION);
function showManualInstallHint() {
$("ovHint").style.display = "block";
$("ovHint").textContent =
"Hinweis: Falls kein Install-Dialog erscheint: Chrome Menü (⋮) → „App installieren“ / „Zum Startbildschirm hinzufügen“.";
}
let deferredPrompt = null;
window.addEventListener("beforeinstallprompt", (e) => {
e.preventDefault();
deferredPrompt = e;
});
function compareVersions(a, b) {
// "2025.12.24.3" style; compare numeric segments
const pa = String(a).split(".").map(n => parseInt(n, 10) || 0);
const pb = String(b).split(".").map(n => parseInt(n, 10) || 0);
const len = Math.max(pa.length, pb.length);
for (let i = 0; i < len; i++) {
const da = pa[i] || 0, db = pb[i] || 0;
if (da > db) return 1;
if (da < db) return -1;
}
return 0;
}
// --- Service Worker ---
async function registerSW(){
if (!("serviceWorker" in navigator)) return null;
async function fetchLatestVersion() {
try {
const reg = await navigator.serviceWorker.register("./sw.js");
// Optional: updaten, falls neue Version
try { await reg.update(); } catch {}
return reg;
} catch {
return null;
const r = await fetch(VERSION_URL, { cache: "no-store" });
if (!r.ok) throw new Error(`version.json HTTP ${r.status}`);
const j = await r.json();
if (j && j.version) {
latestKnown = j.version;
sessionStorage.setItem("wfw_latest", latestKnown);
}
} catch (e) {
// not fatal
console.warn("Could not fetch version.json:", e);
}
}
// --- Install / Update Overlay ---
async function checkInstallOrUpdateOverlay(reg){
let latest = APP_VERSION;
try {
const r = await fetch(VERSION_URL, { cache: "no-store" });
if (r.ok) {
const j = await r.json();
if (j && typeof j.version === "string") latest = j.version;
}
} catch {}
function getInstalledVersion() {
return localStorage.getItem("wfw_installed_version") || null;
}
function markInstalledVersion(v) {
localStorage.setItem("wfw_installed_version", v);
}
function markOverlayDismissed(v) {
localStorage.setItem("wfw_dismissed_version", v);
}
function getDismissedVersion() {
return localStorage.getItem("wfw_dismissed_version") || null;
}
const installed = isInstalledPWA();
const outdated = (latest !== APP_VERSION);
async function checkInstallOrUpdateOverlay() {
await fetchLatestVersion();
// Wenn installiert UND aktuell -> kein Overlay
if (installed && !outdated) return;
// Wenn veraltet -> "Aktualisieren" erzwingen (kioskig)
if (outdated) {
showOverlay({
title: "Update verfügbar",
text: `Es gibt eine neue Version (${latest}). Bitte aktualisieren.`,
primaryText: "Aktualisieren",
hint: "Tipp: Nach dem Update wird die App neu geladen."
});
const installed = getInstalledVersion();
const dismissed = getDismissedVersion();
const isStandalone = window.matchMedia("(display-mode: standalone)").matches || window.navigator.standalone === true;
// If installed version < latest -> show update overlay
if (installed && compareVersions(installed, latestKnown) < 0) {
showOverlay(
"Update verfügbar",
`Neue Version verfügbar (${latestKnown}). Bitte updaten für die neuesten Fixes.`,
"Update jetzt"
);
$("ovPrimaryBtn").onclick = async () => {
try { await reg?.update?.(); } catch {}
// Cache-bust / reload
try {
// ask SW to update + reload
const reg = await navigator.serviceWorker.getRegistration();
if (reg) await reg.update();
} catch {}
markInstalledVersion(latestKnown);
location.reload();
};
$("ovContinueBtn").onclick = () => hideOverlay();
$("ovContinueBtn").onclick = () => {
markOverlayDismissed(latestKnown);
hideOverlay();
};
return;
}
// Nicht installiert -> "Installieren" (oder Hinweis wenn Prompt fehlt)
const canInstall = !!deferredPrompt && !installed;
// If not installed (or standalone not detected), show install overlay until latest dismissed/installed
if (!installed && dismissed !== latestKnown && !isStandalone) {
showOverlay(
"WFW-Aushang",
"Installiere mich!",
"Installieren"
);
if (canInstall) {
showOverlay({
title: "App installieren",
text: "Installiert läuft WFW-Aushang schneller und im Kiosk-Modus.",
primaryText: "Installieren",
hint: ""
});
$("ovPrimaryBtn").onclick = async () => {
try {
deferredPrompt.prompt();
await deferredPrompt.userChoice;
} catch {}
deferredPrompt = null;
$("ovPrimaryBtn").onclick = async (e) => {
e.preventDefault(); e.stopPropagation();
await doInstall();
};
$("ovContinueBtn").onclick = (e) => {
e.preventDefault(); e.stopPropagation();
markOverlayDismissed(latestKnown);
hideOverlay();
};
} else {
// Fallback: wenn Chrome (noch) keinen Install-Prompt gibt
showOverlay({
title: "App installieren",
text: "Wenn der Install-Button fehlt: Chrome Menü (⋮) → „App installieren“.",
primaryText: "OK",
hint: ""
});
$("ovPrimaryBtn").onclick = () => hideOverlay();
}
$("ovContinueBtn").onclick = () => hideOverlay();
}
// --- WebDAV Listing via PROPFIND ---
async function propfind(url, depth=1){
const res = await fetch(url, {
async function doInstall() {
if (!deferredInstallPrompt) {
showManualInstallHint();
return;
}
try {
deferredInstallPrompt.prompt(); // <-- IMPORTANT
const res = await deferredInstallPrompt.userChoice;
deferredInstallPrompt = null;
if (res && res.outcome === "accepted") {
// We'll also set installed version on appinstalled event
$("ovTitle").textContent = "Installiert ✓";
$("ovText").textContent = "Danke! Du kannst die App jetzt wie eine normale App starten.";
markInstalledVersion(latestKnown);
setTimeout(() => hideOverlay(), 800);
} else {
showManualInstallHint();
}
} catch (e) {
console.warn("Install prompt failed:", e);
showManualInstallHint();
}
}
/** WebDAV listing **/
async function propfind(dir) {
const url = `${SHARE_DAV}${dir.endsWith("/") ? dir : dir + "/"}`;
const body = `<?xml version="1.0" encoding="utf-8"?>
<d:propfind xmlns:d="DAV:">
<d:prop>
<d:displayname/>
<d:getcontenttype/>
<d:getcontentlength/>
<d:resourcetype/>
<d:getlastmodified/>
</d:prop>
</d:propfind>`;
const r = await fetch(url, {
method: "PROPFIND",
headers: { "Depth": String(depth) }
headers: { "Depth": "1", "Content-Type": "application/xml" },
body
});
if (!res.ok) {
const t = await res.text().catch(()=> "");
throw new Error(`PROPFIND ${res.status} ${res.statusText} ${t.slice(0,200)}`);
if (!r.ok) {
const t = await r.text().catch(()=> "");
throw new Error(`PROPFIND ${r.status} ${r.statusText}\n${t.slice(0, 400)}`);
}
return await res.text();
return await r.text();
}
function parseDavResponse(xmlText){
const parser = new DOMParser();
const xml = parser.parseFromString(xmlText, "application/xml");
const responses = [...xml.getElementsByTagNameNS("*","response")];
function parseDavMultistatus(xmlText, dir) {
const p = new DOMParser();
const xml = p.parseFromString(xmlText, "application/xml");
const responses = Array.from(xml.getElementsByTagNameNS("DAV:", "response"));
const items = responses.map(r => {
const hrefEl = r.getElementsByTagNameNS("*","href")[0];
const href = hrefEl ? hrefEl.textContent : "";
const items = [];
const propstat = r.getElementsByTagNameNS("*","propstat")[0];
const prop = propstat ? propstat.getElementsByTagNameNS("*","prop")[0] : null;
for (const resp of responses) {
const hrefEl = resp.getElementsByTagNameNS("DAV:", "href")[0];
if (!hrefEl) continue;
const href = decodeURIComponent(hrefEl.textContent || "");
const isCollection = !!(prop && prop.getElementsByTagNameNS("*","collection")[0]);
// Skip the directory itself (first response)
const shareRoot = `/public.php/dav/files/${TOKEN}`;
if (href.endsWith(shareRoot + (dir === "/" ? "/" : dir))) continue;
const sizeEl = prop ? prop.getElementsByTagNameNS("*","getcontentlength")[0] : null;
const size = sizeEl ? parseInt(sizeEl.textContent || "0", 10) : 0;
const displayEl = resp.getElementsByTagNameNS("DAV:", "displayname")[0];
const name = displayEl ? (displayEl.textContent || "").trim() : "";
const modEl = prop ? prop.getElementsByTagNameNS("*","getlastmodified")[0] : null;
const lastmod = modEl ? modEl.textContent : "";
const rtEl = resp.getElementsByTagNameNS("DAV:", "resourcetype")[0];
const isCollection = rtEl && rtEl.getElementsByTagNameNS("DAV:", "collection").length > 0;
return { href, isCollection, size, lastmod };
});
const ctEl = resp.getElementsByTagNameNS("DAV:", "getcontenttype")[0];
const contentType = ctEl ? (ctEl.textContent || "").trim() : "";
const lmEl = resp.getElementsByTagNameNS("DAV:", "getlastmodified")[0];
const lastMod = lmEl ? (lmEl.textContent || "").trim() : "";
items.push({
href,
name: name || href.split("/").filter(Boolean).slice(-1)[0] || "",
isDir: !!isCollection,
contentType,
lastMod
});
}
// directories first, then by name
items.sort((a,b)=> (a.isDir === b.isDir ? a.name.localeCompare(b.name) : (a.isDir ? -1 : 1)));
return items;
}
function humanSize(bytes){
if (!bytes || bytes < 1024) return bytes ? `${bytes} B` : "";
const kb = bytes/1024;
if (kb < 1024) return `${kb.toFixed(0)} KB`;
const mb = kb/1024;
return `${mb.toFixed(1)} MB`;
function toPdfJsUrl(publicPath) {
// publicPath must be the share file path relative to share root, starting with "/"
const fileUrl = `${SHARE_DAV}${publicPath}`; // direct public dav file URL
return `${PDFJS}${encodeURIComponent(fileUrl)}#zoom=page-width`;
}
function safeDecode(s){
try { return decodeURIComponent(s); } catch { return s; }
}
function extractNameFromHref(href){
const noQuery = href.split("?")[0];
const parts = noQuery.split("/").filter(Boolean);
const last = parts[parts.length-1] || "";
return safeDecode(last);
}
function pdfUrlFromHref(href){
// href ist serverseitig percent-encoded; wir wollen eine saubere absolute URL für public.php/dav
// href kommt meist als /public.php/dav/files/<token>/... oder voll
if (href.startsWith("http")) return href;
return `https://home.x-s.at${href}`;
}
function openPdfInPdfJs(fileUrl){
// PDF.js erwartet file=ENCODED_URL
const full = PDFJS_VIEWER + encodeURIComponent(fileUrl) + "#zoom=page-width";
window.location.href = full;
}
function renderList(files){
function renderList(items, currentDir) {
const list = $("list");
list.innerHTML = "";
if (!files.length) {
$("status").textContent = "Keine PDFs gefunden.";
// no folder browsing (kiosk): show only PDFs in root+subdirs? you asked "only directory content" of share root.
// We'll show only currentDir content; no folder nav UI.
const pdfs = items.filter(it => !it.isDir && (it.name.toLowerCase().endsWith(".pdf") || it.contentType.includes("pdf")));
if (pdfs.length === 0) {
setStatus("Keine PDFs gefunden.");
return;
}
for (const f of files) {
const row = document.createElement("div");
row.className = "item";
setStatus(`PDFs: ${pdfs.length}`);
const icon = document.createElement("div");
icon.className = "pdfIcon";
icon.textContent = "📄";
for (const it of pdfs) {
const a = document.createElement("a");
a.className = "row";
a.href = "#";
a.addEventListener("click", (e) => {
e.preventDefault();
const name = document.createElement("div");
name.className = "name";
name.textContent = f.name;
// Build relative path within share
// href includes /public.php/dav/files/<token>/...; we want path after that
const marker = `/public.php/dav/files/${TOKEN}`;
const idx = it.href.indexOf(marker);
let rel = "/";
if (idx >= 0) rel = it.href.slice(idx + marker.length);
if (!rel.startsWith("/")) rel = "/" + rel;
const meta = document.createElement("div");
meta.className = "meta";
meta.textContent = humanSize(f.size);
row.appendChild(icon);
row.appendChild(name);
row.appendChild(meta);
row.onclick = () => openPdfInPdfJs(f.url);
list.appendChild(row);
}
$("status").textContent = `PDFs: ${files.length}`;
}
async function load(){
$("status").textContent = "Lade Liste…";
const basePath = SHARE_ROOT.replace(/^\/?/, "/").replace(/\/?$/, "/");
const url = DAV_BASE + basePath; // z.B. .../TOKEN/
const xml = await propfind(url, 1);
const items = parseDavResponse(xml);
// Erstes Element ist meistens das Verzeichnis selbst -> rausfiltern
const files = items
.filter(it => !it.isCollection)
.map(it => {
const name = extractNameFromHref(it.href);
return {
name,
size: it.size || 0,
url: pdfUrlFromHref(it.href)
};
})
.filter(f => f.name.toLowerCase().endsWith(".pdf"));
// Sortierung: nach Dateiname absteigend (oft Datum im Namen)
files.sort((a,b) => b.name.localeCompare(a.name, "de"));
renderList(files);
}
function closeAushang(){
// kiosk-typisch: zurück oder tab schließen (falls erlaubt)
try { window.close(); } catch {}
history.back();
}
// Boot
document.addEventListener("DOMContentLoaded", async () => {
initTheme();
$("themeBtn").addEventListener("click", () => {
const cur = document.documentElement.getAttribute("data-theme") || "light";
applyTheme(cur === "dark" ? "light" : "dark");
});
$("refreshBtn").addEventListener("click", () => load());
$("closeBtn").addEventListener("click", closeAushang);
const reg = await registerSW();
await checkInstallOrUpdateOverlay(reg);
try {
await load();
} catch (e) {
$("status").textContent = "Fehler beim Laden der Liste.";
// In kiosk mode: Fehlertext kurz, Details nur im Overlay-Hint
showOverlay({
title: "Fehler",
text: "Die Liste konnte nicht geladen werden.",
primaryText: "OK",
hint: String(e).slice(0, 140)
window.location.href = toPdfJsUrl(rel);
});
$("ovPrimaryBtn").onclick = () => hideOverlay();
$("ovContinueBtn").onclick = () => hideOverlay();
const ico = document.createElement("div");
ico.className = "ico";
ico.innerHTML = `<svg width="20" height="20" viewBox="0 0 24 24" fill="none">
<path d="M7 3h7l3 3v15a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z" stroke="currentColor" stroke-width="2" opacity=".9"/>
<path d="M14 3v4h4" stroke="currentColor" stroke-width="2" opacity=".9"/>
<path d="M7.5 14.5c2-2.5 3.5-5 4.2-7.5 1.1 3.8 2.8 7 4.8 9.5" stroke="currentColor" stroke-width="2" opacity=".9"/>
</svg>`;
const mid = document.createElement("div");
const nm = document.createElement("div");
nm.className = "name";
nm.textContent = it.name;
const sub = document.createElement("div");
sub.className = "sub";
sub.textContent = it.lastMod ? it.lastMod : "";
mid.appendChild(nm);
mid.appendChild(sub);
const badge = document.createElement("div");
badge.className = "badge";
badge.textContent = "PDF";
a.appendChild(ico);
a.appendChild(mid);
a.appendChild(document.createElement("div")).className = "spacer";
a.appendChild(badge);
list.appendChild(a);
}
});
}
async function loadList() {
clearError();
setStatus("Lade Liste…");
try {
const xml = await propfind(LIST_START_DIR);
const items = parseDavMultistatus(xml, LIST_START_DIR);
renderList(items, LIST_START_DIR);
} catch (e) {
console.error(e);
setStatus("Fehler");
showError(String(e && e.message ? e.message : e));
}
}
async function registerSW() {
if (!("serviceWorker" in navigator)) return;
try {
const reg = await navigator.serviceWorker.register("./sw.js", { scope: "./" });
// Trigger update check
reg.update().catch(()=>{});
} catch (e) {
console.warn("SW register failed:", e);
}
}
function applyTheme(t){
document.documentElement.setAttribute("data-theme", t);
localStorage.setItem("wfw_theme", t);
$("themeBtn").textContent = t === "dark" ? "🌙 Dunkel" : "☀️ Hell";
}
function initTheme(){
const saved = localStorage.getItem("wfw_theme");
if (saved){
applyTheme(saved);
} else {
// Default: System
const prefersLight = window.matchMedia("(prefers-color-scheme: light)").matches;
applyTheme(prefersLight ? "light" : "dark");
}
}
window.addEventListener("appinstalled", () => {
// user installed the app
markInstalledVersion(latestKnown);
markOverlayDismissed(latestKnown);
hideOverlay();
});
window.addEventListener("beforeinstallprompt", (e) => {
// We want our own overlay, so we prevent default banner
e.preventDefault();
deferredInstallPrompt = e;
// Show overlay if not yet installed
checkInstallOrUpdateOverlay();
});
// Extra safety: capture clicks even if something gets weird on mobile
document.addEventListener("click", (e) => {
const t = e.target;
if (!t) return;
if (t.id === "ovContinueBtn") {
e.preventDefault(); e.stopPropagation();
markOverlayDismissed(latestKnown);
hideOverlay();
}
if (t.id === "ovPrimaryBtn") {
// If handler was overwritten, still attempt install/update
// (doInstall will show manual hint if prompt not available)
}
}, { capture: true });
document.addEventListener("DOMContentLoaded", async () => {
$("refreshBtn").addEventListener("click", (e) => { e.preventDefault(); loadList(); });
$("closeBtn").addEventListener("click", (e) => {
e.preventDefault();
// Kiosk-ish: close tab if possible, else just go back
window.close();
setTimeout(() => { history.back(); }, 150);
});
initTheme();
$("themeBtn").addEventListener("click", () => {
const current = document.documentElement.getAttribute("data-theme") || "dark";
applyTheme(current === "dark" ? "light" : "dark");
});
await registerSW();
await checkInstallOrUpdateOverlay();
await loadList();
});

378
zuss/index.html
View File

@@ -1,285 +1,173 @@
<!doctype html>
<html lang="de" translate="no">
<html lang="de">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover" />
<meta name="theme-color" content="#0b1020" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<link rel="manifest" href="./manifest.webmanifest">
<link rel="icon" href="./icons/icon-192.png">
<link rel="apple-touch-icon" href="./icons/icon-192.png">
<title>WFW-Aushang</title>
<link rel="manifest" href="./manifest.webmanifest">
<meta name="theme-color" content="#0b1020">
<!-- iOS / PWA -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="WFW-Aushang">
<link rel="apple-touch-icon" href="./icons/icon-192.png">
<style>
:root{
--bg: #f6f7fb;
--panel: rgba(255,255,255,.75);
--panelSolid: #ffffff;
--text: #0b1220;
--muted: rgba(11,18,32,.62);
--border: rgba(11,18,32,.12);
--shadow: 0 10px 30px rgba(11,18,32,.12);
--accent: #2563eb;
--btnText: #ffffff;
--glass: blur(12px);
:root,
:root[data-theme="dark"]{
--bg:#0b1020; --card:#121a33; --text:#e8eeff; --muted:#9fb0ff;
--line:rgba(255,255,255,.12); --btn:#2b60ff; --btn2:#1c254b;
--ok:#2bff9f; --warn:#ffd36b;
}
[data-theme="dark"]{
--bg: #070a12;
--panel: rgba(17,24,39,.55);
--panelSolid: #0b1020;
--text: #e5e7eb;
--muted: rgba(229,231,235,.65);
--border: rgba(229,231,235,.14);
--shadow: 0 14px 40px rgba(0,0,0,.55);
--accent: #60a5fa;
--btnText: #061022;
:root[data-theme="light"]{
--bg:#f6f7fb; --card:#ffffff; --text:#0b1020; --muted:#5060a8;
--line:rgba(0,0,0,.10); --btn:#2b60ff; --btn2:#eef1ff;
}
html, body { height:100%; }
*{ box-sizing:border-box; }
body{
margin:0;
font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
background:
radial-gradient(1200px 900px at 10% 0%, rgba(37,99,235,.12), transparent 55%),
radial-gradient(900px 700px at 90% 10%, rgba(99,102,241,.12), transparent 60%),
radial-gradient(900px 700px at 50% 110%, rgba(16,185,129,.10), transparent 60%),
var(--bg);
color: var(--text);
margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Arial;
background:var(--bg); color:var(--text);
}
header{
position: sticky;
top: 0;
z-index: 5;
padding: 14px 16px 12px;
border-bottom: 1px solid var(--border);
background: color-mix(in srgb, var(--panelSolid) 70%, transparent);
backdrop-filter: var(--glass);
}
.headrow{
display:flex;
align-items:center;
justify-content:space-between;
gap: 10px;
max-width: 980px;
margin: 0 auto;
}
h1{
margin:0;
font-size: 18px;
letter-spacing: .2px;
}
.headbtns{ display:flex; gap:10px; align-items:center; }
.iconbtn{
border: 1px solid var(--border);
background: color-mix(in srgb, var(--panelSolid) 80%, transparent);
color: var(--text);
border-radius: 12px;
padding: 10px 12px;
cursor:pointer;
box-shadow: 0 6px 18px rgba(0,0,0,.06);
}
.iconbtn:active{ transform: translateY(1px); }
.wrap{
padding: 14px 12px 96px;
max-width: 980px;
margin: 0 auto;
max-width: 860px; margin: 0 auto; padding: 16px 16px 92px;
}
h1{ font-size: 20px; margin: 8px 0 14px; letter-spacing:.3px; }
.list{
display:flex; flex-direction:column; gap:10px;
}
.row{
display:flex; align-items:center; gap:12px;
background:var(--card); border:1px solid var(--line);
border-radius:16px; padding:12px 14px;
text-decoration:none; color:inherit;
}
.row:active{ transform: scale(0.995); }
.ico{
width:38px; height:38px; border-radius:12px;
display:grid; place-items:center;
background:rgba(43,96,255,.16);
border:1px solid rgba(43,96,255,.22);
flex:0 0 auto;
}
.name{ font-size: 16px; line-height:1.2; }
.sub{ font-size: 12px; color: var(--muted); margin-top:3px; }
.spacer{ flex:1; }
.badge{
font-size:12px; color:var(--muted);
border:1px solid var(--line); padding:6px 10px; border-radius:999px;
background:rgba(0,0,0,.08);
}
.footer{
position:fixed; left:0; right:0; bottom:0;
padding:12px 12px calc(12px + env(safe-area-inset-bottom));
background:linear-gradient(to top, rgba(11,16,32,.95), rgba(11,16,32,.55), rgba(11,16,32,0));
pointer-events:none;
}
@media (prefers-color-scheme: light){
.footer{ background:linear-gradient(to top, rgba(246,247,251,.95), rgba(246,247,251,.55), rgba(246,247,251,0)); }
}
.footerInner{
max-width: 860px; margin:0 auto; display:flex; gap:10px; pointer-events:auto;
}
/* BIG BUTTONS */
.btn{
border:0; border-radius:18px;
padding:18px 18px; /* bigger */
font-size:18px; /* bigger */
font-weight:800;
min-height:64px; /* bigger */
display:flex; align-items:center; justify-content:center;
cursor:pointer;
box-shadow: 0 10px 30px rgba(0,0,0,.22);
text-decoration:none;
user-select:none;
-webkit-tap-highlight-color: transparent;
}
.btnPrimary{ background:var(--btn); color:white; flex:1; }
.btnSecondary{ background:var(--btn2); color:var(--text); flex:1; border:1px solid var(--line); box-shadow:none; }
.btn:active{ transform: scale(0.995); }
.status{
margin: 12px 4px;
font-size: 13px;
color: var(--muted);
margin: 8px 0 14px; color: var(--muted); font-size: 13px;
}
.list{
border: 1px solid var(--border);
border-radius: 18px;
overflow: hidden;
background: var(--panel);
backdrop-filter: var(--glass);
box-shadow: var(--shadow);
}
.item{
display:flex;
align-items:center;
gap: 12px;
padding: 12px 12px;
border-top: 1px solid var(--border);
cursor: pointer;
}
.item:first-child{ border-top:none; }
.item:hover{ background: color-mix(in srgb, var(--panelSolid) 22%, transparent); }
.pdfIcon{
width: 38px; height: 38px;
border-radius: 12px;
display:flex; align-items:center; justify-content:center;
background: color-mix(in srgb, var(--accent) 14%, transparent);
border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
font-size: 18px;
flex: 0 0 auto;
}
.name{
flex:1;
overflow:hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: 650;
}
.meta{
font-size: 12px;
color: var(--muted);
text-align:right;
min-width: 92px;
}
.bottom{
position: fixed;
left: 0; right: 0; bottom: 0;
padding: 12px;
border-top: 1px solid var(--border);
background: color-mix(in srgb, var(--panelSolid) 70%, transparent);
backdrop-filter: var(--glass);
z-index: 6;
}
.bottom .inner{
max-width: 980px;
margin: 0 auto;
display:flex;
justify-content:center;
}
.btn{
padding: 11px 14px;
.error{
background: rgba(255,80,80,.12);
border:1px solid rgba(255,80,80,.25);
color: #ffb7b7;
padding: 10px 12px;
border-radius: 14px;
border: 1px solid var(--border);
background: var(--accent);
color: var(--btnText);
cursor: pointer;
font-size: 14px;
font-weight: 700;
}
.btn.secondary{
background: transparent;
color: var(--text);
}
.bottom .btn{
width: min(520px, 100%);
font-size: 16px;
padding: 14px 16px;
font-size: 13px;
white-space: pre-wrap;
}
/* Kioskiges Overlay */
.ov{
position: fixed;
inset: 0;
z-index: 9999;
display: grid;
place-items: center;
padding: 18px;
background: rgba(0,0,0,.62);
backdrop-filter: blur(12px);
/* INSTALL/UPDATE OVERLAY */
#installOverlay{
position:fixed; inset:0;
display:none;
z-index:2147483647;
background: rgba(0,0,0,.55);
backdrop-filter: blur(10px);
pointer-events:auto;
padding: 18px 14px;
}
#installOverlay *{ pointer-events:auto; }
.ovCard{
width: min(560px, 100%);
max-width: 560px;
margin: 10vh auto 0;
background: var(--card);
border: 1px solid var(--line);
border-radius: 22px;
border: 1px solid rgba(255,255,255,.14);
background: color-mix(in srgb, var(--panelSolid) 92%, transparent);
box-shadow: 0 18px 60px rgba(0,0,0,.45);
padding: 18px;
text-align: center;
}
.ovTitle{
font-size: 20px;
font-weight: 900;
margin: 6px 0 8px;
letter-spacing: .2px;
}
.ovText{
color: var(--muted);
font-size: 14px;
line-height: 1.35;
margin: 0 0 16px;
}
.ovPrimary{
width: 100%;
padding: 14px 16px;
font-size: 16px;
border-radius: 16px;
border: 0;
background: var(--accent);
color: var(--btnText);
font-weight: 900;
cursor: pointer;
box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.ovPrimary:active{ transform: translateY(1px); }
.ovLink{
margin-top: 12px;
display: inline-block;
background: transparent;
border: 0;
padding: 8px 10px;
color: color-mix(in srgb, var(--text) 82%, transparent);
font-size: 13px;
text-decoration: underline;
cursor: pointer;
opacity: .85;
padding: 18px 16px;
box-shadow: 0 20px 70px rgba(0,0,0,.35);
}
.ovTitle{ font-size: 18px; font-weight: 850; margin: 6px 0 6px; }
.ovText{ color: var(--muted); font-size: 14px; line-height: 1.35; margin: 0 0 14px; }
.ovBtns{ display:flex; gap:12px; margin-top: 10px; }
.ovBtns .btn{ flex:1; }
.ovHint{
margin-top: 10px;
margin-top: 12px;
font-size: 12px;
color: var(--muted);
border-top: 1px solid var(--line);
padding-top: 12px;
line-height: 1.35;
}
</style>
</head>
<body>
<!-- Kiosk Overlay -->
<div id="installOverlay" class="ov" hidden>
<div class="wrap">
<h1>WFW-Aushang</h1>
<div id="status" class="status">Lade Liste…</div>
<div id="err" class="error" style="display:none"></div>
<div id="list" class="list"></div>
</div>
<div class="footer">
<div class="footerInner">
<button id="closeBtn" class="btn btnSecondary">Aushang schließen</button>
<button id="themeBtn" class="btn btnSecondary">🌙 Dunkel</button>
<button id="refreshBtn" class="btn btnPrimary">↻ Refresh</button>
</div>
</div>
<div id="installOverlay" role="dialog" aria-modal="true">
<div class="ovCard">
<div class="ovTitle" id="ovTitle">WFW-Aushang</div>
<div class="ovText" id="ovText">Installiere die App für Kiosk-Modus und schnelle PDFs.</div>
<button id="ovPrimaryBtn" class="ovPrimary">Installieren</button>
<button id="ovContinueBtn" class="ovLink" type="button">Weiter im Browser</button>
<div class="ovHint" id="ovHint"></div>
</div>
</div>
<header>
<div class="headrow">
<h1>WFW-Aushang</h1>
<div class="headbtns">
<button class="iconbtn" id="themeBtn" title="Dark Mode">🌓</button>
<button class="iconbtn" id="refreshBtn" title="Neu laden">↻</button>
<p class="ovText" id="ovText">Installiere mich!</p>
<div class="ovBtns">
<button id="ovPrimaryBtn" class="btn btnPrimary">Installieren</button>
<button id="ovContinueBtn" class="btn btnSecondary">Weiter im Browser</button>
</div>
</div>
</header>
<div class="wrap">
<div class="status" id="status">Lade Liste…</div>
<div class="list" id="list"></div>
</div>
<div class="bottom">
<div class="inner">
<button class="btn" id="closeBtn">Aushang schließen</button>
<div class="ovHint" id="ovHint" style="display:none"></div>
</div>
</div>
<script src="./app.js"></script>
<script src="./app.js?v=2025.12.24.6"></script>
</body>
</html>

5
zuss/manifest.webmanifest
View File

@@ -1,9 +1,9 @@
{
"name": "WFW-Aushang",
"short_name": "WFW-Aushang",
"start_url": "/zuss/",
"start_url": "/zuss/?source=pwa",
"scope": "/zuss/",
"display": "fullscreen",
"display": "standalone",
"orientation": "portrait",
"background_color": "#0b1020",
"theme_color": "#0b1020",
@@ -12,3 +12,4 @@
{ "src": "/zuss/icons/icon-512.png", "sizes": "512x512", "type": "image/png" }
]
}

70
zuss/sw.js
View File

@@ -1,5 +1,4 @@
// Simple offline cache for kiosk usage
const CACHE = "wfw-aushang-2025.12.24.2";
const CACHE = "wfw-aushang-2025.12.24.6";
const ASSETS = [
"/zuss/",
@@ -12,48 +11,51 @@ const ASSETS = [
];
self.addEventListener("install", (event) => {
event.waitUntil(
caches.open(CACHE).then((c) => c.addAll(ASSETS)).then(() => self.skipWaiting())
);
event.waitUntil((async () => {
const cache = await caches.open(CACHE);
await cache.addAll(ASSETS);
self.skipWaiting();
})());
});
self.addEventListener("activate", (event) => {
event.waitUntil(
(async () => {
const keys = await caches.keys();
await Promise.all(keys.map(k => (k === CACHE ? null : caches.delete(k))));
await self.clients.claim();
})()
);
event.waitUntil((async () => {
const keys = await caches.keys();
await Promise.all(keys.map(k => (k === CACHE ? null : caches.delete(k))));
self.clients.claim();
})());
});
// Network-first for version.json + list, cache-first for static assets
self.addEventListener("fetch", (event) => {
const url = new URL(event.request.url);
const req = event.request;
const url = new URL(req.url);
// Only handle same-origin requests
if (url.origin !== self.location.origin) return;
const isVersion = url.pathname.endsWith("/zuss/version.json");
if (isVersion) {
event.respondWith(
fetch(event.request, { cache: "no-store" }).catch(() => caches.match(event.request))
);
// Network-first for version.json (so updates are found)
if (url.pathname.endsWith("/zuss/version.json")) {
event.respondWith((async () => {
try {
const fresh = await fetch(req, { cache: "no-store" });
const cache = await caches.open(CACHE);
cache.put(req, fresh.clone());
return fresh;
} catch {
const cached = await caches.match(req);
return cached || new Response('{"version":"2025.12.24.6"}', { headers: { "Content-Type": "application/json" } });
}
})());
return;
}
// Cache-first for our own static assets
// Cache-first for app shell
if (url.pathname.startsWith("/zuss/")) {
event.respondWith(
caches.match(event.request).then((cached) => {
if (cached) return cached;
return fetch(event.request).then((resp) => {
const copy = resp.clone();
caches.open(CACHE).then((c) => c.put(event.request, copy));
return resp;
});
})
);
event.respondWith((async () => {
const cached = await caches.match(req);
if (cached) return cached;
const fresh = await fetch(req);
const cache = await caches.open(CACHE);
cache.put(req, fresh.clone());
return fresh;
})());
return;
}
});

2
zuss/version.json
View File

@@ -1 +1 @@
{ "version": "2025.12.24.2" }
{ "version": "2025.12.24.6" }