qciganoandClaude Sonnet 5
850aed2f9e
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]>
302 lines
10 KiB
HTML
302 lines
10 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Verwaltungs-Code — Bestellverwaltung</title>
|
|
<meta name="robots" content="noindex, nofollow" />
|
|
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
|
|
<style>
|
|
:root {
|
|
--c-black: #0a0910;
|
|
--c-anthracite: #1b1a22;
|
|
--c-anthracite-light: #252333;
|
|
--c-text: #f4f1f7;
|
|
--c-text-muted: #b7aec4;
|
|
--c-accent: #e3b23c;
|
|
--c-accent-hover: #c99527;
|
|
--c-purple-glow: #9b7fd6;
|
|
--radius-l: 22px;
|
|
--radius-m: 16px;
|
|
--ease: cubic-bezier(0.22, 1, 0.36, 1);
|
|
}
|
|
* { box-sizing: border-box; }
|
|
/* Für Screenreader vorhanden, visuell aber unsichtbar — ersetzt bei den Formularfeldern dieser
|
|
Seite den (allein nicht ausreichenden) Placeholder-Text durch ein echtes <label>. */
|
|
.sr-only {
|
|
position: absolute;
|
|
width: 1px; height: 1px;
|
|
padding: 0; margin: -1px;
|
|
overflow: hidden;
|
|
clip: rect(0, 0, 0, 0);
|
|
white-space: nowrap;
|
|
border: 0;
|
|
}
|
|
html, body { height: 100%; }
|
|
body {
|
|
margin: 0;
|
|
min-height: 100vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 1.5rem;
|
|
position: relative;
|
|
overflow: hidden;
|
|
background: var(--c-black);
|
|
background-image: radial-gradient(60% 50% at 15% 10%, color-mix(in srgb, var(--c-purple-glow) 22%, transparent), transparent 70%),
|
|
radial-gradient(50% 45% at 85% 90%, color-mix(in srgb, var(--c-accent) 16%, transparent), transparent 70%);
|
|
color: var(--c-text);
|
|
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;
|
|
width: 100%;
|
|
text-align: center;
|
|
padding: 2.4rem 2rem;
|
|
border-radius: var(--radius-l);
|
|
border: 1.5px solid transparent;
|
|
background:
|
|
linear-gradient(165deg, var(--c-anthracite-light), var(--c-anthracite)) padding-box,
|
|
linear-gradient(120deg, #e3b23c, #9b7fd6, #5fd3ec, #e3b23c) border-box;
|
|
background-size: 100% 100%, 300% 100%;
|
|
animation: gate-border-shift 9s ease-in-out infinite;
|
|
box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.7);
|
|
}
|
|
@keyframes gate-border-shift {
|
|
0%, 100% { background-position: 0 0, 0% 50%; }
|
|
50% { background-position: 0 0, 100% 50%; }
|
|
}
|
|
.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;
|
|
font-weight: 700;
|
|
letter-spacing: 0.06em;
|
|
text-transform: uppercase;
|
|
color: var(--c-accent);
|
|
background: color-mix(in srgb, var(--c-accent) 16%, transparent);
|
|
border: 1px solid color-mix(in srgb, var(--c-accent) 40%, transparent);
|
|
border-radius: 999px;
|
|
padding: 0.3rem 0.9rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
.gate-box h1 {
|
|
font-family: "Fraunces", "Playfair Display", Georgia, serif;
|
|
font-size: 1.5rem;
|
|
font-weight: 600;
|
|
margin: 0 0 0.6rem;
|
|
line-height: 1.2;
|
|
}
|
|
.gate-box p {
|
|
margin: 0 0 1.4rem;
|
|
color: var(--c-text-muted);
|
|
font-size: 0.94rem;
|
|
}
|
|
.gate-box input {
|
|
width: 100%;
|
|
padding: 0.9rem 1rem;
|
|
border-radius: 12px;
|
|
text-align: center;
|
|
letter-spacing: 0.08em;
|
|
font-size: 1.05rem;
|
|
margin-bottom: 0.9rem;
|
|
background: rgba(244, 241, 247, 0.05);
|
|
border: 1.5px solid rgba(244, 241, 247, 0.16);
|
|
color: var(--c-text);
|
|
font-family: inherit;
|
|
}
|
|
.gate-box input:focus {
|
|
outline: none;
|
|
border-color: var(--c-accent);
|
|
box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-accent) 25%, transparent);
|
|
}
|
|
.gate-box button {
|
|
width: 100%;
|
|
padding: 0.85rem 1rem;
|
|
border-radius: 12px;
|
|
border: none;
|
|
background: linear-gradient(120deg, var(--c-accent), var(--c-accent-hover));
|
|
color: var(--c-black);
|
|
font-weight: 800;
|
|
font-size: 1rem;
|
|
cursor: pointer;
|
|
transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
|
|
}
|
|
.gate-box button:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--c-accent) 60%, transparent); }
|
|
.gate-fehler {
|
|
color: #ff9a9a;
|
|
font-size: 0.88rem;
|
|
margin: 0.9rem 0 0;
|
|
display: none;
|
|
}
|
|
.gate-fehler.zeige { display: block; }
|
|
.gate-zurueck { display: inline-block; margin-top: 1.4rem; font-size: 0.85rem; color: var(--c-text-muted); }
|
|
.gate-zurueck a { color: inherit; }
|
|
</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">✨ 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>
|
|
</div>
|
|
<script>
|
|
(function () {
|
|
const params = new URLSearchParams(location.search);
|
|
const next = params.get("next") || "/verwaltung/";
|
|
const form = document.getElementById("vw-form");
|
|
const fehlerEl = document.getElementById("vw-fehler");
|
|
form.addEventListener("submit", async function (e) {
|
|
e.preventDefault();
|
|
fehlerEl.classList.remove("zeige");
|
|
const code = document.getElementById("vw-code").value.trim();
|
|
if (!code) return;
|
|
try {
|
|
const res = await fetch("/verwaltung-auth", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ code, next }),
|
|
});
|
|
const data = await res.json();
|
|
if (!res.ok || !data.ok) {
|
|
fehlerEl.textContent = (data && data.error) || "Falscher Code.";
|
|
fehlerEl.classList.add("zeige");
|
|
return;
|
|
}
|
|
location.href = data.next || "/verwaltung/";
|
|
} catch {
|
|
fehlerEl.textContent = "Verbindung fehlgeschlagen. Bitte nochmal versuchen.";
|
|
fehlerEl.classList.add("zeige");
|
|
}
|
|
});
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|