Verwaltungs-Hauptseite ultra-speziell für VanVan: Begrüßung, Sparkline, Konfetti, Stepper, Logo-Hintergrund
Auf ausdrücklichen Wunsch NUR die Haupt-Bestellverwaltungsseite (nicht die Zugangscode-Seite,
nicht deren Formular-Logik) grundlegend aufgewertet:
- Rollenbasierte, tageszeitabhängige Begrüßung ("Guten Morgen, VanVan!") aus dem vorhandenen
Vorschau-Rollen-Cookie
- Van's-Logo als großes, fix positioniertes, warm eingefärbtes Wasserzeichen im gesamten
Seitenhintergrund (zwei gegenläufig rotierende Ebenen, derselbe CSS-Trick wie auf der
Zugangscode-Seite, aber eigenständig für diese scrollbare Seite nachgebaut)
- Handgebaute SVG-Sparkline (Umsatztrend der letzten 14 Tage) + Wochenvergleich-Badge
- Sanft hochzählende Kennzahlen-Kacheln statt abruptem Zahlensprung
- Sichtbarer Status-Fortschrittsbalken pro Bestellkarte + Ein-Klick-"nächster Schritt"-Knopf
neben dem bisherigen Dropdown
- Konfetti + Erfolgs-Banner bei runden Bestell-Meilensteinen (10er/25er/50er-Schritte)
- Tab-Titel zeigt die Anzahl offener Bestellungen, auch wenn der Tab im Hintergrund ist
- Optionaler Ton (Web-Audio-Glöckchen, keine Audio-Datei) und Desktop-Benachrichtigungen bei
neuen Bestellungen, beides einzeln togglebar und in localStorage gemerkt
Alles handgebaut ohne externe Bibliotheken/Kosten, respektiert prefers-reduced-motion. Lokal mit
wrangler pages dev + echter D1-Bindung end-to-end getestet (Login, Bestell-API, Status-PATCH,
alle neuen UI-Elemente im Seiten-HTML verifiziert).
Co-Authored-By: Claude Sonnet 5 <[email protected]>
This commit is contained in:
qcigano
co-authored by
Claude Sonnet 5
Claude Sonnet 5
parent
aeb76a277d
commit
e37d12b4c7
@@ -3163,6 +3163,48 @@ a:focus-visible, button:focus-visible {
|
||||
|
||||
/* Interne Bestellverwaltung (/verwaltung/) — Status-Kacheln, Filterleiste, Auswertungs-Balken. */
|
||||
|
||||
/* 04.08.2026: Van's-Logo als riesiges, sehr dezentes Wasserzeichen im GESAMTEN Seitenhintergrund
|
||||
— fix positioniert (bleibt beim Scrollen an Ort und Stelle, läuft "unter" der Seite durch),
|
||||
zwei gegenläufig rotierende Ebenen in Gold/Violett. Exakt derselbe Einfärbe-Trick wie auf der
|
||||
Zugangscode-Seite (public/verwaltung-code.html): invert() dreht das schwarze Logo auf weißem
|
||||
Grund um, mix-blend-mode:screen lässt den (jetzt schwarzen) ehemals-weißen Kreis komplett
|
||||
verschwinden, sepia()+saturate()+hue-rotate() färbt die übrig bleibenden (jetzt weißen) Linien
|
||||
warm ein. z-index -1, damit die Seite selbst (alle Boxen haben eigene, deckende Hintergründe)
|
||||
ganz normal darüber liegt — sichtbar wird das Wasserzeichen nur in den Zwischenräumen. */
|
||||
.verwaltung-logo-bg {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
background: url("/logo.png") center / contain no-repeat;
|
||||
mix-blend-mode: screen;
|
||||
pointer-events: none;
|
||||
z-index: -1;
|
||||
}
|
||||
.verwaltung-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.09;
|
||||
animation: verwaltung-logo-spin-1 110s linear infinite;
|
||||
}
|
||||
.verwaltung-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.08;
|
||||
animation: verwaltung-logo-spin-2 75s linear infinite;
|
||||
}
|
||||
@keyframes verwaltung-logo-spin-1 {
|
||||
from { transform: translate(-50%, -50%) rotate(0deg); }
|
||||
to { transform: translate(-50%, -50%) rotate(360deg); }
|
||||
}
|
||||
@keyframes verwaltung-logo-spin-2 {
|
||||
from { transform: translate(-50%, -50%) rotate(360deg); }
|
||||
to { transform: translate(-50%, -50%) rotate(0deg); }
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) { .verwaltung-logo-bg-1, .verwaltung-logo-bg-2 { animation: none; } }
|
||||
@media print { .verwaltung-logo-bg { display: none; } }
|
||||
|
||||
/* "Kisten" — jede zusammengehörige Gruppe (Bestellstatus, Kennzahlen, Bestellliste, Bestseller,
|
||||
Herkunft, Stammkundschaft) bekommt ihre eigene, klar abgegrenzte Box mit eigener Akzentfarbe
|
||||
(--box-color, pro Kiste per inline style gesetzt) statt lose auf der Seite zu stehen. Auf
|
||||
@@ -3553,3 +3595,120 @@ a:focus-visible, button:focus-visible {
|
||||
.verwaltung-order-foot { flex-wrap: wrap; }
|
||||
.verwaltung-tracking-edit { display: flex; align-items: center; gap: 0.4rem; }
|
||||
.verwaltung-tracking-input { width: 160px; padding: 0.4em 0.6em; font-size: 0.82rem; }
|
||||
|
||||
/* ─── 04.08.2026, dritte Ausbaustufe: "richtig speziell für VanVan" ───────────────────────────
|
||||
Persönliche Begrüßung, Ton-/Benachrichtigungs-Schalter, Umsatz-Sparkline + Wochenvergleich,
|
||||
Status-Fortschrittsbalken, Meilenstein-Konfetti — siehe src/pages/verwaltung/index.astro. */
|
||||
|
||||
.verwaltung-greeting {
|
||||
margin: 0.9rem 0 0;
|
||||
font-family: var(--font-head);
|
||||
font-size: 1.15rem;
|
||||
font-weight: 600;
|
||||
color: var(--c-accent);
|
||||
}
|
||||
.verwaltung-hero-settings { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 1.2rem; position: relative; z-index: 1; }
|
||||
.verwaltung-toggle-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.4em;
|
||||
padding: 0.45em 0.9em;
|
||||
border-radius: 999px;
|
||||
border: 1px solid rgba(244, 241, 247, 0.18);
|
||||
background: rgba(244, 241, 247, 0.05);
|
||||
color: var(--c-text-muted);
|
||||
font-size: 0.82rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.2s var(--ease), color 0.2s var(--ease), background 0.2s var(--ease);
|
||||
}
|
||||
.verwaltung-toggle-btn:hover { border-color: var(--c-accent); color: var(--c-text); }
|
||||
.verwaltung-toggle-btn.is-active {
|
||||
border-color: color-mix(in srgb, var(--c-accent) 55%, transparent);
|
||||
background: color-mix(in srgb, var(--c-accent) 16%, transparent);
|
||||
color: var(--c-accent);
|
||||
}
|
||||
|
||||
/* Sparkline: eigenes SVG-Chart, komplett handgebaut (siehe renderSparkline() im Skript). */
|
||||
.verwaltung-sparkline-wrap { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid rgba(244, 241, 247, 0.08); }
|
||||
.verwaltung-sparkline-head { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; margin-bottom: 0.5rem; flex-wrap: wrap; }
|
||||
#verwaltung-sparkline { width: 100%; height: 60px; display: block; }
|
||||
.verwaltung-trend { font-size: 0.82rem; font-weight: 700; padding: 0.2em 0.7em; border-radius: 999px; }
|
||||
.verwaltung-trend-up { color: #7ec8a0; background: color-mix(in srgb, #6ecb8f 20%, transparent); }
|
||||
.verwaltung-trend-down { color: #ffb0ba; background: color-mix(in srgb, var(--c-sale) 20%, transparent); }
|
||||
|
||||
/* Status-Fortschrittsbalken auf jeder Bestellkarte — vier Punkte, aktueller Schritt hervorgehoben,
|
||||
vergangene mit Häkchen. zahlungOffen/storniert fallen aus dem linearen Ablauf raus und
|
||||
bekommen stattdessen einen einzeiligen Hinweis (siehe stepperHtml() im Skript). */
|
||||
.verwaltung-stepper { display: flex; align-items: center; gap: 0.2rem; margin: 0.9rem 0; flex-wrap: wrap; }
|
||||
.verwaltung-stepper-step { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; min-width: 3.6rem; }
|
||||
.verwaltung-stepper-dot {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border-radius: 50%;
|
||||
border: 1.5px solid rgba(244, 241, 247, 0.18);
|
||||
background: rgba(244, 241, 247, 0.04);
|
||||
font-size: 0.85rem;
|
||||
color: var(--c-text-muted);
|
||||
transition: border-color 0.2s var(--ease), background 0.2s var(--ease), color 0.2s var(--ease);
|
||||
}
|
||||
.verwaltung-stepper-step.is-done .verwaltung-stepper-dot {
|
||||
border-color: color-mix(in srgb, #6ecb8f 55%, transparent);
|
||||
background: color-mix(in srgb, #6ecb8f 22%, transparent);
|
||||
color: #7ec8a0;
|
||||
}
|
||||
.verwaltung-stepper-step.is-current .verwaltung-stepper-dot {
|
||||
border-color: var(--c-accent);
|
||||
background: color-mix(in srgb, var(--c-accent) 22%, transparent);
|
||||
color: var(--c-accent);
|
||||
box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-accent) 22%, transparent);
|
||||
}
|
||||
.verwaltung-stepper-label { font-size: 0.68rem; color: var(--c-text-muted); text-align: center; }
|
||||
.verwaltung-stepper-step.is-current .verwaltung-stepper-label { color: var(--c-text); font-weight: 700; }
|
||||
.verwaltung-stepper-line { flex: 1; height: 2px; min-width: 0.8rem; background: rgba(244, 241, 247, 0.14); margin-bottom: 1.1rem; }
|
||||
.verwaltung-stepper-line.is-done { background: color-mix(in srgb, #6ecb8f 55%, transparent); }
|
||||
.verwaltung-stepper-pending { font-size: 0.85rem; color: #f0c375; margin: 0.9rem 0; }
|
||||
.verwaltung-stepper-storniert { font-size: 0.85rem; color: var(--c-sale); margin: 0.9rem 0; }
|
||||
.verwaltung-advance-btn { white-space: nowrap; }
|
||||
|
||||
/* Meilenstein-Konfetti: leichte, selbstgebaute Fall-Animation ohne externe Bibliothek. */
|
||||
#verwaltung-confetti { position: fixed; inset: 0; pointer-events: none; z-index: 500; overflow: hidden; }
|
||||
.verwaltung-confetti-piece {
|
||||
position: fixed;
|
||||
top: -20px;
|
||||
width: 9px;
|
||||
height: 14px;
|
||||
border-radius: 2px;
|
||||
opacity: 0.95;
|
||||
animation-name: verwaltung-confetti-fall;
|
||||
animation-timing-function: ease-in;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
@keyframes verwaltung-confetti-fall {
|
||||
0% { transform: translate(0, 0) rotate(0deg); opacity: 0.95; }
|
||||
100% { transform: translate(var(--drift), 105vh) rotate(var(--rot)); opacity: 0.25; }
|
||||
}
|
||||
.verwaltung-milestone-toast {
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
bottom: 1.6rem;
|
||||
transform: translate(-50%, 1.4rem);
|
||||
z-index: 501;
|
||||
max-width: min(90vw, 480px);
|
||||
padding: 0.9rem 1.3rem;
|
||||
border-radius: var(--radius-m, 16px);
|
||||
border: 1.5px solid color-mix(in srgb, var(--c-accent) 45%, transparent);
|
||||
background: linear-gradient(165deg, var(--c-anthracite-light), var(--c-anthracite));
|
||||
box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.7);
|
||||
text-align: center;
|
||||
opacity: 0;
|
||||
transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
|
||||
}
|
||||
.verwaltung-milestone-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.verwaltung-confetti-piece { display: none; }
|
||||
.verwaltung-milestone-toast { transition: opacity 0.2s linear; transform: translate(-50%, 0); }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user