Verwaltung: alle Kisten deutlich aufgewertet ("speziell speziell speziell")
Jede der 6 Kisten (Bestellstatus, Kennzahlen, Bestseller je Kategorie, Herkunft, Stammkundschaft, Alle Bestellungen) bekommt jetzt: - einen schimmernden Aurora-Rand in der eigenen Box-Farbe (derselbe Verlaufs- Trick wie beim Hero-Kopf, nur pro Kiste individuell eingefärbt) - ihr eigenes Icon riesig und ganz dezent als Wasserzeichen im Hintergrund - einen "Radar-Ping"-Ring, der leise vom Icon-Abzeichen ausgeht - eine kleine farbige Eyebrow-Kennzeichnung über dem Titel (z.B. "TOP-VERKÄUFE", "GEOGRAFIE", "TREUE & WIEDERKEHR") Die Kennzahlen-Kacheln bekommen zusätzlich einen Lichtstreif, der beim Hover einmal quer durchläuft. Alles respektiert prefers-reduced-motion. Co-Authored-By: Claude Sonnet 5 <[email protected]>
This commit is contained in:
qcigano
co-authored by
Claude Sonnet 5
Claude Sonnet 5
parent
ac9f3771f2
commit
c8f699034f
@@ -64,10 +64,13 @@ const lang: Locale = "de";
|
||||
<div class="container">
|
||||
{/* Jede zusammengehörige Gruppe bekommt jetzt ihre eigene, farblich eigenständige "Kiste"
|
||||
(siehe .verwaltung-box in global.css) — statt loser Kacheln/Absätze auf der Seite. */}
|
||||
<div class="verwaltung-box" style="--box-color: var(--c-accent);">
|
||||
<div class="verwaltung-box" style="--box-color: var(--c-accent);" data-icon="📊">
|
||||
<div class="verwaltung-box-head">
|
||||
<span class="verwaltung-box-icon" aria-hidden="true">📊</span>
|
||||
<h2>Bestellstatus</h2>
|
||||
<div class="verwaltung-box-headtext">
|
||||
<span class="verwaltung-box-kicker">Live-Überblick</span>
|
||||
<h2>Bestellstatus</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="verwaltung-box-body">
|
||||
<div class="verwaltung-stat-grid">
|
||||
@@ -104,10 +107,13 @@ const lang: Locale = "de";
|
||||
wichtig sind: wie viel kommt gerade neu rein, und wie hoch ist der durchschnittliche
|
||||
Bestellwert (wichtig für Preis-/Werbeentscheidungen). "Heute"/"7 Tage" sind zusätzlich
|
||||
anklickbar und setzen direkt den Zeitraum-Filter unten. */}
|
||||
<div class="verwaltung-box" style="--box-color: #9b7fd6;">
|
||||
<div class="verwaltung-box" style="--box-color: #9b7fd6;" data-icon="📈">
|
||||
<div class="verwaltung-box-head">
|
||||
<span class="verwaltung-box-icon" aria-hidden="true">📈</span>
|
||||
<h2>Kennzahlen</h2>
|
||||
<div class="verwaltung-box-headtext">
|
||||
<span class="verwaltung-box-kicker">Performance</span>
|
||||
<h2>Kennzahlen</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="verwaltung-box-body">
|
||||
<div class="verwaltung-stat-grid verwaltung-stat-grid-secondary">
|
||||
@@ -148,10 +154,13 @@ const lang: Locale = "de";
|
||||
Bestellstatus-/Kennzahlen-Kisten oben (nicht in einer eigenen <section>), sonst
|
||||
addieren sich die Section-Innenabstände zu einer viel zu großen Lücke dazwischen. */}
|
||||
<div id="verwaltung-auswertung-wrapper">
|
||||
<div class="verwaltung-box verwaltung-box-collapsible is-collapsed" style="--box-color: #e3b23c;" data-collapsible-box>
|
||||
<div class="verwaltung-box verwaltung-box-collapsible is-collapsed" style="--box-color: #e3b23c;" data-collapsible-box data-icon="🏆">
|
||||
<button type="button" class="verwaltung-box-head verwaltung-box-head-btn" aria-expanded="false">
|
||||
<span class="verwaltung-box-icon" aria-hidden="true">🏆</span>
|
||||
<h2>Bestseller je Kategorie</h2>
|
||||
<div class="verwaltung-box-headtext">
|
||||
<span class="verwaltung-box-kicker">Top-Verkäufe</span>
|
||||
<h2>Bestseller je Kategorie</h2>
|
||||
</div>
|
||||
<span class="verwaltung-box-chevron" aria-hidden="true">▾</span>
|
||||
</button>
|
||||
<div class="verwaltung-box-body">
|
||||
@@ -169,10 +178,13 @@ const lang: Locale = "de";
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="verwaltung-box verwaltung-box-collapsible is-collapsed" style="--box-color: #6ecb8f;" data-collapsible-box>
|
||||
<div class="verwaltung-box verwaltung-box-collapsible is-collapsed" style="--box-color: #6ecb8f;" data-collapsible-box data-icon="🌍">
|
||||
<button type="button" class="verwaltung-box-head verwaltung-box-head-btn" aria-expanded="false">
|
||||
<span class="verwaltung-box-icon" aria-hidden="true">🌍</span>
|
||||
<h2>Herkunft der Bestellungen</h2>
|
||||
<div class="verwaltung-box-headtext">
|
||||
<span class="verwaltung-box-kicker">Geografie</span>
|
||||
<h2>Herkunft der Bestellungen</h2>
|
||||
</div>
|
||||
<span class="verwaltung-box-chevron" aria-hidden="true">▾</span>
|
||||
</button>
|
||||
<div class="verwaltung-box-body">
|
||||
@@ -188,10 +200,13 @@ const lang: Locale = "de";
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="verwaltung-box verwaltung-box-collapsible is-collapsed" style="--box-color: var(--c-sale);" data-collapsible-box>
|
||||
<div class="verwaltung-box verwaltung-box-collapsible is-collapsed" style="--box-color: var(--c-sale);" data-collapsible-box data-icon="👑">
|
||||
<button type="button" class="verwaltung-box-head verwaltung-box-head-btn" aria-expanded="false">
|
||||
<span class="verwaltung-box-icon" aria-hidden="true">👑</span>
|
||||
<h2>Stammkundschaft</h2>
|
||||
<div class="verwaltung-box-headtext">
|
||||
<span class="verwaltung-box-kicker">Treue & Wiederkehr</span>
|
||||
<h2>Stammkundschaft</h2>
|
||||
</div>
|
||||
<span class="verwaltung-box-chevron" aria-hidden="true">▾</span>
|
||||
</button>
|
||||
<div class="verwaltung-box-body">
|
||||
@@ -210,10 +225,13 @@ const lang: Locale = "de";
|
||||
|
||||
{/* Bewusst in DERSELBEN Section wie die Kisten oben (nicht in einer eigenen <section>) —
|
||||
sonst addieren sich die Section-Innenabstände wieder zu einer viel zu großen Lücke. */}
|
||||
<div class="verwaltung-box" style="--box-color: var(--c-accent);">
|
||||
<div class="verwaltung-box" style="--box-color: var(--c-accent);" data-icon="📦">
|
||||
<div class="verwaltung-box-head">
|
||||
<span class="verwaltung-box-icon" aria-hidden="true">📦</span>
|
||||
<h2>Alle Bestellungen</h2>
|
||||
<div class="verwaltung-box-headtext">
|
||||
<span class="verwaltung-box-kicker">Vollständige Liste</span>
|
||||
<h2>Alle Bestellungen</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="verwaltung-box-body">
|
||||
<div class="verwaltung-new-banner" id="verwaltung-new-banner" style="display:none;">
|
||||
|
||||
Reference in New Issue
Block a user