- public/neu/glas-logo.js: das Bauteil „liquid-glass-logo-reveal“ (21st.dev, Shader und Zeitleiste aus zanwei/glass-icon-reveal, MIT, Hinweis im Kopf) in reines JavaScript übertragen: WEBklar-Zeichen als Zeichenfläche (Stern und Punkt ausgestanzt), weiß, keine Schleife, Textur 512 px (auf dem Handy ~3× schneller bereit), Hintergrund läuft zum Rand aus, kein Rauschen auf reinem Weiß, ohne WebGL2 das ruhende Logo als CSS-Maske. - Anmeldung (Handy und PC): Glas-Logo statt App-Icon, der Name erscheint, sobald das Glas losgelassen hat; ein Klick spielt es erneut; reduzierte Bewegung zeigt das ruhende Logo. - Installierte App: startbild.js im Kopf von Übersicht und Anmeldung deckt beim ersten Öffnen je App-Start weiß ab, spielt das Glas-Logo (Tempo 1,25) und blendet dann weich aus; ein Tipp überspringt, spätestens nach 6,5 s ist es weg. Danach ruht das Logo der Anmeldung. - Tests: knGlasLogo (Zeitleiste, Glasbreite < 1,3 Kacheln, MIT-Hinweis, Startbild in der VM), Seitenprüfungen der Anmeldung und der Übersicht kennen die neuen Skripte. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
94 lines
3.9 KiB
HTML
94 lines
3.9 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, interactive-widget=resizes-content">
|
||
<meta name="kn-seite" content="neu">
|
||
<title>Kundenbereich – WEBklar</title>
|
||
<!-- Weiße Kundenansicht (Pilot): Als App auf den Homescreen, helle Statusleiste -->
|
||
<link rel="manifest" href="/neu/manifest.webmanifest">
|
||
<link rel="icon" href="/favicon.ico" sizes="32x32">
|
||
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
|
||
<link rel="apple-touch-icon" href="/img/apple-touch-icon.png">
|
||
<meta name="theme-color" content="#ffffff">
|
||
<meta name="mobile-web-app-capable" content="yes">
|
||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||
<meta name="apple-mobile-web-app-status-bar-style" content="default">
|
||
<meta name="apple-mobile-web-app-title" content="WEBklar">
|
||
|
||
<link rel="stylesheet" href="/neu/tokens.css">
|
||
<link rel="stylesheet" href="/neu/basis.css">
|
||
<link rel="stylesheet" href="/neu/huelle.css">
|
||
<link rel="stylesheet" href="/neu/chat-composer.css">
|
||
<link rel="stylesheet" href="/neu/ansichten.css">
|
||
<link rel="stylesheet" href="/neu/funktionen.css">
|
||
<link rel="stylesheet" href="/neu/module.css">
|
||
<link rel="stylesheet" href="/neu/wasser-leiste.css">
|
||
<!-- Installierte App: weißes Startbild mit dem Glas-Logo, läuft vor dem ersten Bild -->
|
||
<script src="/neu/startbild.js"></script>
|
||
</head>
|
||
<body class="kn">
|
||
<a class="kn-skip" href="#kn-inhalt">Zum Inhalt</a>
|
||
<div id="kn-banner" class="kn-banner" hidden></div>
|
||
|
||
<div class="kn-huelle">
|
||
<nav id="kn-menue" class="kn-menue" aria-label="Hauptnavigation"></nav>
|
||
|
||
<div class="kn-spalte">
|
||
<header id="kn-kopf" class="kn-kopf">
|
||
<p id="kn-kopf-titel" class="kn-kopf-titel"></p>
|
||
<div id="kn-kopf-konto"></div>
|
||
</header>
|
||
<div id="kn-streifen" class="kn-streifen" hidden></div>
|
||
<p id="kn-fehler" class="kn-fehler" role="alert" hidden></p>
|
||
|
||
<main id="kn-inhalt" class="kn-haupt" tabindex="-1">
|
||
<section id="bereich-website" hidden>
|
||
<h1 class="kn-titel">Website</h1>
|
||
<div id="website-body"></div>
|
||
</section>
|
||
<section id="bereich-funktionen" hidden>
|
||
<h1 class="kn-titel">Funktionen</h1>
|
||
<div id="funktionen-body"></div>
|
||
</section>
|
||
<section id="bereich-chat" hidden>
|
||
<h1 class="kn-titel">Chat</h1>
|
||
<div id="chat-body"></div>
|
||
</section>
|
||
<section id="bereich-vertraege" hidden>
|
||
<h1 class="kn-titel">Verträge</h1>
|
||
<div id="vertraege-body"></div>
|
||
</section>
|
||
</main>
|
||
|
||
<div id="kn-blatt" class="kn-blatt" hidden>
|
||
<nav id="kn-brot" class="kn-brot" aria-label="Brotkrume"></nav>
|
||
<h1 id="kn-etage-titel" class="kn-titel"></h1>
|
||
<div id="kn-reiter-slot"></div>
|
||
<section data-etage="news" hidden><div id="news-body"></div></section>
|
||
<section data-etage="termine" hidden><div id="termine-body"></div></section>
|
||
<section data-etage="webshop" hidden><div id="webshop-body"></div></section>
|
||
<section data-etage="buchungen" hidden><div id="buchungen-body"></div></section>
|
||
<section data-etage="zeiten" hidden><div id="zeiten-body"></div></section>
|
||
<section data-etage="analyse" hidden><div id="analyse-body"></div></section>
|
||
<section data-etage="seite" hidden><div id="etage-body"></div></section>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<nav id="kn-leiste" class="kn-leiste" aria-label="Hauptnavigation">
|
||
<div class="kn-leiste-reel">
|
||
<div id="kn-zeile-haupt" class="kn-rw"></div>
|
||
<div id="kn-zeile-etage" class="kn-rw"></div>
|
||
</div>
|
||
</nav>
|
||
|
||
<div id="kn-konto-wurzel"></div>
|
||
<div id="kn-ansage" class="kn-nur-leser" aria-live="polite"></div>
|
||
|
||
<script src="/kundenansicht.js"></script>
|
||
<script src="/chat-composer.js"></script>
|
||
<script type="module" src="/neu/huelle.js"></script>
|
||
</body>
|
||
</html>
|