Verwaltungs-Code-Seite: verspieltes Logo-Design für VanVans tägliche Code-Eingabe
Auf ausdrücklichen Wunsch NUR diese eine Zugangsseite (öffentliche Startseite und die eingeloggte Verwaltung selbst bleiben unangetastet): zwei groß und gegenläufig rotierende, warm golden bzw. violett eingefärbte Van's-Logo-Wasserzeichen im gesamten Fensterhintergrund, plus das echte Logo als sich drehendes "Siegel" im Kästchen mit pulsierendem Glanz-Kreis und drei zeitversetzt aufblitzenden Funkel-Emojis. Ziel: die tägliche Pflicht-Eingabe soll Freude machen statt trockene Sicherheitsabfrage zu sein. Alle Animationen respektieren weiterhin prefers-reduced-motion. Reine Design-Änderung, Formular-/Auth-Logik unverändert. Co-Authored-By: Claude Sonnet 5 <[email protected]>
This commit is contained in:
qcigano
co-authored by
Claude Sonnet 5
Claude Sonnet 5
parent
b944bcf724
commit
850aed2f9e
+117
-2
@@ -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 @@
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="vw-logo-bg-1" aria-hidden="true"></div>
|
||||
<div class="vw-logo-bg-2" aria-hidden="true"></div>
|
||||
<div class="gate-box">
|
||||
<div class="vw-logo-wrap" aria-hidden="true">
|
||||
<span class="vw-logo-glow"></span>
|
||||
<img src="/logo.png" alt="" />
|
||||
<span class="vw-sparkle vw-sparkle-1">✨</span>
|
||||
<span class="vw-sparkle vw-sparkle-2">💛</span>
|
||||
<span class="vw-sparkle vw-sparkle-3">🧶</span>
|
||||
</div>
|
||||
<span class="gate-eyebrow">🔒 Zusätzlicher Code</span>
|
||||
<h1>Bestellverwaltung</h1>
|
||||
<p class="vw-welcome">🌟 Schön, dass du da bist!</p>
|
||||
<p>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.</p>
|
||||
<form id="vw-form">
|
||||
<label class="sr-only" for="vw-code">Verwaltungs-Code</label>
|
||||
<input type="text" id="vw-code" placeholder="Verwaltungs-Code" autocomplete="off" autocapitalize="off" spellcheck="false" autofocus />
|
||||
<button type="submit">Weiter</button>
|
||||
<button type="submit">✨ Los geht's</button>
|
||||
</form>
|
||||
<p class="gate-fehler" id="vw-fehler" role="alert" aria-live="assertive"></p>
|
||||
<p class="gate-zurueck"><a href="/">← Zurück zur Startseite</a></p>
|
||||
|
||||
Reference in New Issue
Block a user