diff --git a/public/verwaltung-code.html b/public/verwaltung-code.html index 0881ee1..0eb9796 100644 --- a/public/verwaltung-code.html +++ b/public/verwaltung-code.html @@ -49,6 +49,45 @@ font-family: "Inter", "Manrope", system-ui, sans-serif; line-height: 1.6; } + + /* Auf ausdrücklichen Wunsch VIEL verspielter als die normale Zugangsseite (gate.html): gleich + ZWEI große, farbig eingefärbte Van's-Logo-Wasserzeichen im gesamten Fensterhintergrund, die + gegenläufig und unterschiedlich schnell rotieren ("wie zwei sich drehende Zahnräder/Münzen") + — invert()+mix-blend-mode:screen lässt wie bei gate.html nur die (jetzt weißen) Linien des + Logos leuchten, sepia()+saturate()+hue-rotate() färbt diese Linien danach warm-golden bzw. + violett ein, statt neutral-weiß zu bleiben. Soll beim täglichen Code-Eingeben Freude machen, + nicht nur eine trockene Sicherheitsabfrage sein. */ + .vw-logo-bg-1, .vw-logo-bg-2 { + position: absolute; + top: 50%; + left: 50%; + background: url("/logo.png") center / contain no-repeat; + mix-blend-mode: screen; + pointer-events: none; + } + .vw-logo-bg-1 { + width: min(1500px, 220vw); + height: min(1500px, 220vw); + filter: invert(1) sepia(1) saturate(6) hue-rotate(358deg) brightness(1.35); + opacity: 0.14; + animation: vw-bg-spin-1 100s linear infinite; + } + .vw-logo-bg-2 { + width: min(950px, 150vw); + height: min(950px, 150vw); + filter: invert(1) sepia(1) saturate(7) hue-rotate(233deg) brightness(1.15); + opacity: 0.12; + animation: vw-bg-spin-2 70s linear infinite; + } + @keyframes vw-bg-spin-1 { + from { transform: translate(-50%, -50%) rotate(0deg); } + to { transform: translate(-50%, -50%) rotate(360deg); } + } + @keyframes vw-bg-spin-2 { + from { transform: translate(-50%, -50%) rotate(360deg); } + to { transform: translate(-50%, -50%) rotate(0deg); } + } + .gate-box { position: relative; max-width: 430px; @@ -68,8 +107,74 @@ 0%, 100% { background-position: 0 0, 0% 50%; } 50% { background-position: 0 0, 100% 50%; } } - @media (prefers-reduced-motion: reduce) { .gate-box { animation: none; } } .gate-box > * { position: relative; z-index: 1; } + + /* Das eigentliche Logo IM Kästchen: dreht sich wie eine Münze/ein Siegel (passt gut, weil der + Schriftzug ohnehim rund um den Kreis herum angeordnet ist), dahinter ein weich pulsierender + Glanz-Kreis, drumherum drei zeitversetzt aufblitzende Funkel-Emojis. */ + .vw-logo-wrap { + position: relative; + width: 92px; + height: 92px; + margin: 0 auto 1rem; + display: flex; + align-items: center; + justify-content: center; + } + .vw-logo-glow { + position: absolute; + inset: -14px; + border-radius: 50%; + background: radial-gradient(circle, color-mix(in srgb, var(--c-accent) 65%, transparent), transparent 72%); + filter: blur(9px); + opacity: 0.7; + animation: vw-glow-pulse 3.2s ease-in-out infinite; + } + @keyframes vw-glow-pulse { + 0%, 100% { opacity: 0.55; transform: scale(1); } + 50% { opacity: 0.95; transform: scale(1.18); } + } + .vw-logo-wrap img { + position: relative; + width: 84px; + height: 84px; + border-radius: 50%; + box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-accent) 45%, transparent), 0 10px 26px -10px rgba(0, 0, 0, 0.7); + animation: vw-logo-spin 16s linear infinite; + } + @keyframes vw-logo-spin { + from { transform: rotate(0deg); } + to { transform: rotate(360deg); } + } + .vw-sparkle { + position: absolute; + font-size: 1.05rem; + opacity: 0.85; + line-height: 1; + animation: vw-twinkle 2.6s ease-in-out infinite; + } + .vw-sparkle-1 { top: -8px; right: -12px; animation-delay: 0s; } + .vw-sparkle-2 { bottom: -6px; left: -16px; font-size: 0.92rem; animation-delay: 0.85s; } + .vw-sparkle-3 { top: 12%; left: -20px; font-size: 0.8rem; animation-delay: 1.7s; } + @keyframes vw-twinkle { + 0%, 100% { opacity: 0; transform: scale(0.55) rotate(0deg); } + 50% { opacity: 1; transform: scale(1.2) rotate(14deg); } + } + + @media (prefers-reduced-motion: reduce) { + .gate-box, + .vw-logo-bg-1, .vw-logo-bg-2, + .vw-logo-glow, .vw-logo-wrap img, .vw-sparkle { + animation: none !important; + } + } + + .vw-welcome { + margin: 0 0 0.3rem !important; + color: var(--c-accent) !important; + font-weight: 700; + font-size: 0.98rem !important; + } .gate-eyebrow { display: inline-block; font-size: 0.78rem; @@ -138,15 +243,25 @@
+ +🌟 Schön, dass du da bist!
Diese Seite ist zusätzlich mit einem eigenen, festen Code geschützt, den nur ihr beide kennt. Der Code bleibt immer gleich — ihr müsst ihn aber einmal pro Tag neu eingeben.