Kundenansicht neu: Glas-Logo auf der Anmeldung und Startbild der App

- 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>
This commit is contained in:
ClaudeandClaude Opus 5.5 committed 2026-10-29 17:51:44 +00:00
1 parent 1725aaa91c
commit c997703251
9 files changed
+1221 -10

No files matched your search

+5 -2
View File
@@ -16,6 +16,8 @@
<meta name="apple-mobile-web-app-title" content="WEBklar">
<link rel="stylesheet" href="/neu/tokens.css">
<link rel="stylesheet" href="/neu/oeffentlich/oeffentlich.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 kn-seite kn-login-seite">
<header class="kn-login-kopf">
@@ -24,9 +26,9 @@
<main class="kn-login-haupt">
<div class="kn-login-spalte">
<!-- Handy: App-Icon wie beim Start einer App -->
<!-- Logo mit Glas-Animation (login-logo.js), Handy und PC; der Name erscheint, sobald das Glas losgelassen hat -->
<div class="kn-login-marke">
<img src="/img/app-icon-192.png" alt="" width="64" height="64">
<div class="kn-login-glas"></div>
<span>WEBklar Kundenbereich</span>
</div>
<div class="kn-login-abschnitt">
@@ -86,5 +88,6 @@
<script>
initLoginPage();
</script>
<script type="module" src="/neu/login-logo.js"></script>
</body>
</html>