b049dded72
- Created index.html for the main application interface with responsive design and dark mode support. - Added manifest.webmanifest for PWA configuration, including app icons and display settings. - Implemented service worker (sw.js) for offline caching of assets and network-first strategy for versioning. - Introduced version.json to manage app versioning.
286 lines
7.2 KiB
HTML
286 lines
7.2 KiB
HTML
<!doctype html>
|
|
<html lang="de" translate="no">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
|
|
|
|
<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);
|
|
}
|
|
[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;
|
|
}
|
|
|
|
html, body { height:100%; }
|
|
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);
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
.status{
|
|
margin: 12px 4px;
|
|
font-size: 13px;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.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;
|
|
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;
|
|
}
|
|
|
|
/* 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);
|
|
}
|
|
.ovCard{
|
|
width: min(560px, 100%);
|
|
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;
|
|
}
|
|
.ovHint{
|
|
margin-top: 10px;
|
|
font-size: 12px;
|
|
color: var(--muted);
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<!-- Kiosk Overlay -->
|
|
<div id="installOverlay" class="ov" hidden>
|
|
<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>
|
|
</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>
|
|
</div>
|
|
|
|
<script src="./app.js"></script>
|
|
</body>
|
|
</html>
|