ClaudeandClaude Opus 5.5
c997703251
- 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>
27 lines
1.3 KiB
JavaScript
27 lines
1.3 KiB
JavaScript
/* Kundenansicht neu: das Glas-Logo auf der Anmeldung (Handy und PC). Spielt einmal beim Laden; ein Klick spielt es erneut.
|
|
Lief gerade das Startbild der App (startbild.js setzt data-kn-startbild am <html>), ruht das Logo sofort, damit die
|
|
Animation nicht zweimal hintereinander kommt. Der Name unter dem Logo blendet per CSS ein, sobald das Glas losgelassen hat
|
|
(oeffentlich.css); ruht das Logo, steht er sofort da (Klasse kn-login-ruht). */
|
|
|
|
import { glasLogo } from './glas-logo.js'
|
|
|
|
const LOGIN_EINSTELLUNGEN = { finalScale: 0.9 }
|
|
|
|
const feld = document.querySelector('.kn-login-glas')
|
|
const marke = feld?.closest('.kn-login-marke')
|
|
if (feld && marke) {
|
|
const ruht = document.documentElement.hasAttribute('data-kn-startbild') || window.matchMedia('(prefers-reduced-motion: reduce)').matches
|
|
if (ruht) marke.classList.add('kn-login-ruht')
|
|
const logo = glasLogo(feld, { standbild: ruht, rand: 1.4, einstellungen: LOGIN_EINSTELLUNGEN })
|
|
feld.addEventListener('click', () => {
|
|
if (!logo.abspielen()) return
|
|
// Name wieder aus- und nach dem Glas einblenden: Animation neu starten
|
|
marke.classList.remove('kn-login-ruht')
|
|
const name = marke.querySelector(':scope > span')
|
|
if (!name) return
|
|
name.style.animation = 'none'
|
|
void name.offsetWidth
|
|
name.style.animation = ''
|
|
})
|
|
}
|