/* Kundenansicht neu: Startbild der installierten App. Beim ersten Öffnen je App-Start (sessionStorage) deckt eine weiße Fläche die Seite ab, darauf spielt das Glas-Logo (glas-logo.js); danach blendet die Fläche weich aus. Nur in der installierten App (display-mode standalone, iPhone navigator.standalone), nie im Browser. Klassisches Skript im von dashboard.html und der Anmeldung: es läuft vor dem ersten Bild, damit die Seite nie kurz aufblitzt. Ein Tipp auf die Fläche überspringt das Startbild; hängt etwas, blendet es spätestens nach SICHERHEIT_MS aus. */ ;(function () { var SCHLUESSEL = 'kn-startbild' var TEMPO = 1.25 // etwas schneller als auf der Anmeldung: das Startbild soll kurz bleiben var HALTEN_MS = 120 // das ruhende Logo bleibt so lange stehen, bevor die Fläche ausblendet var AUSBLENDEN_MS = 450 var SICHERHEIT_MS = 6500 var html = document.documentElement var standalone = false try { standalone = window.matchMedia('(display-mode: standalone)').matches || window.navigator.standalone === true } catch (e) { standalone = false } if (!standalone) return // Ohne sessionStorage kein Startbild: sonst käme es bei jedem Seitenwechsel (Anmelden → Übersicht) erneut try { if (window.sessionStorage.getItem(SCHLUESSEL)) return window.sessionStorage.setItem(SCHLUESSEL, '1') } catch (e) { return } var stil = document.createElement('style') stil.textContent = 'html[data-kn-startbild="deckt"]::before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;z-index:2147483646;background:#fff}' + '#kn-startbild{position:fixed;top:0;right:0;bottom:0;left:0;z-index:2147483647;display:flex;align-items:center;justify-content:center;background:#fff;' + 'opacity:1;transition:opacity ' + AUSBLENDEN_MS + 'ms ease;-webkit-tap-highlight-color:transparent}' + '#kn-startbild.kn-startbild-weg{opacity:0;pointer-events:none}' + '#kn-startbild .kn-startbild-logo{width:min(300px,80vw);height:min(300px,80vw)}' + '@media (prefers-reduced-motion:reduce){#kn-startbild{transition-duration:200ms}}' document.head.appendChild(stil) // Bis die Fläche im steht, deckt das Pseudo-Element am die Seite ab ("deckt"); danach liegt die Fläche // selbst darüber ("spielt"), damit beim Ausblenden die Seite darunter schon sichtbar ist. Die Anmeldung liest das Attribut: Logo ruht. html.setAttribute('data-kn-startbild', 'deckt') // Das Modul schon jetzt laden, nicht erst wenn die Seite fertig ist var modul = import('/neu/glas-logo.js') modul.catch(function () { /* unten behandelt */ }) var flaeche = null var logo = null var vorbei = false function ausblenden() { if (vorbei) return vorbei = true if (!flaeche) return html.removeAttribute('data-kn-startbild') flaeche.classList.add('kn-startbild-weg') var weg = function () { if (!flaeche) return try { if (logo) logo.entfernen() } catch (e) { /* Zeichenfläche schon weg */ } flaeche.remove() flaeche = null html.removeAttribute('data-kn-startbild') } flaeche.addEventListener('transitionend', weg, { once: true }) setTimeout(weg, AUSBLENDEN_MS + 150) } function zeigen() { flaeche = document.createElement('div') flaeche.id = 'kn-startbild' flaeche.setAttribute('aria-hidden', 'true') var feld = document.createElement('div') feld.className = 'kn-startbild-logo' flaeche.appendChild(feld) document.body.appendChild(flaeche) html.setAttribute('data-kn-startbild', 'spielt') flaeche.addEventListener('click', ausblenden) setTimeout(ausblenden, SICHERHEIT_MS) modul .then(function (m) { if (vorbei) return logo = m.glasLogo(feld, { tempo: TEMPO, einstellungen: { finalScale: 0.9 } }) return logo.fertig }) .catch(function () { /* ohne Modul: die weiße Fläche blendet einfach aus */ }) .then(function () { setTimeout(ausblenden, HALTEN_MS) }) } if (document.body) zeigen() else document.addEventListener('DOMContentLoaded', zeigen, { once: true }) })()