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,11 +64,14 @@ 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>
|
||||
<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">
|
||||
<button type="button" class="card verwaltung-stat-tile" data-filter="offen">
|
||||
@@ -104,11 +107,14 @@ 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>
|
||||
<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">
|
||||
<button type="button" class="card verwaltung-stat-tile verwaltung-stat-tile-mini" data-zeitraum="heute">
|
||||
@@ -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>
|
||||
<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>
|
||||
<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>
|
||||
<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,11 +225,14 @@ 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>
|
||||
<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;">
|
||||
<span>🔔 <strong id="verwaltung-new-count"></strong> neue Bestellung(en) seit dem letzten Laden</span>
|
||||
|
||||
+81
-11
@@ -2870,23 +2870,34 @@ a:focus-visible, button:focus-visible {
|
||||
|
||||
/* "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
|
||||
Wunsch ("alles was zueinander passt in einer Kiste, richtig geil speziell") deutlich
|
||||
eigenständiger gestaltet als eine normale .card: eigener farbiger Eckenschein, eigenes
|
||||
Icon-Abzeichen vor dem Titel, dezent pulsierender Rand. */
|
||||
(--box-color, pro Kiste per inline style gesetzt) statt lose auf der Seite zu stehen. Auf
|
||||
Wunsch ("alle Kisten sollen speziell speziell speziell sein, überrasch mich") noch eine Stufe
|
||||
weiter aufgewertet: der Rand schimmert jetzt wie eine Aurora in der jeweiligen Box-Farbe
|
||||
(derselbe Verlaufs-Trick wie beim Hero-Kopf oben auf der Seite, siehe .verwaltung-hero), jede
|
||||
Box trägt ihr eigenes Icon zusätzlich riesig und ganz dezent als Wasserzeichen im Hintergrund
|
||||
(per data-icon-Attribut, kein Bild nötig), und das Icon-Abzeichen sendet einen leisen
|
||||
"Radar-Ping"-Ring aus — zusammen wirkt jede Kiste wie eine eigenständige kleine Instrumenten-
|
||||
Kachel statt einer austauschbaren grauen Box. */
|
||||
.verwaltung-box {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: var(--radius-l);
|
||||
border: 1.5px solid color-mix(in srgb, var(--box-color, var(--c-accent)) 38%, transparent);
|
||||
background: linear-gradient(155deg, color-mix(in srgb, var(--box-color, var(--c-accent)) 9%, var(--c-anthracite-light)), var(--c-anthracite));
|
||||
border: 1.5px solid transparent;
|
||||
background:
|
||||
linear-gradient(155deg, color-mix(in srgb, var(--box-color, var(--c-accent)) 9%, var(--c-anthracite-light)), var(--c-anthracite)) padding-box,
|
||||
linear-gradient(120deg, var(--box-color, var(--c-accent)), color-mix(in srgb, var(--box-color, var(--c-accent)) 35%, white), var(--box-color, var(--c-accent))) border-box;
|
||||
background-size: 100% 100%, 300% 100%;
|
||||
padding: 1.6rem 1.7rem;
|
||||
margin: 1.4rem 0;
|
||||
animation: verwaltung-box-glow 3.4s ease-in-out infinite;
|
||||
animation: verwaltung-box-border-shift 9s ease-in-out infinite, verwaltung-box-glow 3.4s ease-in-out infinite;
|
||||
}
|
||||
@keyframes verwaltung-box-border-shift {
|
||||
0%, 100% { background-position: 0 0, 0% 50%; }
|
||||
50% { background-position: 0 0, 100% 50%; }
|
||||
}
|
||||
@keyframes verwaltung-box-glow {
|
||||
0%, 100% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--box-color, var(--c-accent)) 22%, transparent); }
|
||||
50% { box-shadow: 0 0 22px -8px color-mix(in srgb, var(--box-color, var(--c-accent)) 55%, transparent); }
|
||||
50% { box-shadow: 0 0 26px -6px color-mix(in srgb, var(--box-color, var(--c-accent)) 60%, transparent); }
|
||||
}
|
||||
.verwaltung-box::before {
|
||||
content: "";
|
||||
@@ -2898,6 +2909,21 @@ a:focus-visible, button:focus-visible {
|
||||
background: radial-gradient(circle, color-mix(in srgb, var(--box-color, var(--c-accent)) 30%, transparent), transparent 70%);
|
||||
pointer-events: none;
|
||||
}
|
||||
/* Riesiges, kaum sichtbares Icon-Wasserzeichen — nutzt dasselbe Icon wie das Abzeichen (über
|
||||
data-icon), damit jede Kiste eine eigene "Textur" bekommt, ganz ohne zusätzliche Bilddateien. */
|
||||
.verwaltung-box::after {
|
||||
content: attr(data-icon);
|
||||
position: absolute;
|
||||
right: -1rem;
|
||||
bottom: -2.2rem;
|
||||
font-size: 8.5rem;
|
||||
line-height: 1;
|
||||
opacity: 0.06;
|
||||
transform: rotate(-10deg);
|
||||
filter: grayscale(0.4);
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
.verwaltung-box-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -2906,6 +2932,15 @@ a:focus-visible, button:focus-visible {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.verwaltung-box-headtext { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
|
||||
.verwaltung-box-kicker {
|
||||
font-size: 0.72rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
color: color-mix(in srgb, var(--box-color, var(--c-accent)) 80%, white);
|
||||
opacity: 0.85;
|
||||
}
|
||||
.verwaltung-box-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -2917,10 +2952,27 @@ a:focus-visible, button:focus-visible {
|
||||
font-size: 1.3rem;
|
||||
background: color-mix(in srgb, var(--box-color, var(--c-accent)) 24%, transparent);
|
||||
border: 1px solid color-mix(in srgb, var(--box-color, var(--c-accent)) 55%, transparent);
|
||||
position: relative;
|
||||
}
|
||||
.verwaltung-box-head h2 { margin: 0; font-size: 1.3rem; }
|
||||
.verwaltung-box-icon::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: -6px;
|
||||
border-radius: 50%;
|
||||
border: 1.5px solid color-mix(in srgb, var(--box-color, var(--c-accent)) 65%, transparent);
|
||||
animation: verwaltung-box-icon-ping 2.8s ease-out infinite;
|
||||
pointer-events: none;
|
||||
}
|
||||
@keyframes verwaltung-box-icon-ping {
|
||||
0% { transform: scale(0.75); opacity: 0.75; }
|
||||
70%, 100% { transform: scale(1.4); opacity: 0; }
|
||||
}
|
||||
.verwaltung-box-head h2, .verwaltung-box-headtext h2 { margin: 0; font-size: 1.3rem; }
|
||||
.verwaltung-box-body { position: relative; z-index: 1; }
|
||||
@media (prefers-reduced-motion: reduce) { .verwaltung-box { animation: none; } }
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.verwaltung-box,
|
||||
.verwaltung-box-icon::before { animation: none; }
|
||||
}
|
||||
|
||||
/* Leerzustände innerhalb einer Kiste — großes Icon + kurzer, freundlicher Text statt nacktem
|
||||
Fließtext, damit auch "noch nichts da" nicht trostlos wirkt. */
|
||||
@@ -2970,7 +3022,7 @@ a:focus-visible, button:focus-visible {
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
}
|
||||
.verwaltung-box-head-btn h2 { flex: 1; }
|
||||
.verwaltung-box-head-btn .verwaltung-box-headtext { flex: 1; }
|
||||
.verwaltung-box-chevron {
|
||||
flex-shrink: 0;
|
||||
font-size: 1.1rem;
|
||||
@@ -3028,6 +3080,8 @@ a:focus-visible, button:focus-visible {
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) { #stat-attention-tile { animation: none; } }
|
||||
.verwaltung-stat-tile {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
@@ -3041,6 +3095,22 @@ a:focus-visible, button:focus-visible {
|
||||
color: inherit;
|
||||
}
|
||||
.verwaltung-stat-tile:hover { transform: translateY(-3px); border-color: var(--c-accent); }
|
||||
/* Kleiner Lichtstreif, der beim Hover einmal quer über die Kachel läuft — dezente "Premium"-
|
||||
Mikro-Interaktion statt einer starren Karte. */
|
||||
.verwaltung-stat-tile::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -60%;
|
||||
width: 40%;
|
||||
height: 100%;
|
||||
background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.16), transparent);
|
||||
transform: skewX(-20deg);
|
||||
transition: left 0.6s var(--ease);
|
||||
pointer-events: none;
|
||||
}
|
||||
.verwaltung-stat-tile:hover::after { left: 120%; }
|
||||
@media (prefers-reduced-motion: reduce) { .verwaltung-stat-tile::after { transition: none; display: none; } }
|
||||
.verwaltung-stat-tile-highlight { border-color: color-mix(in srgb, #e3b23c 45%, transparent); background: color-mix(in srgb, #e3b23c 10%, var(--c-anthracite-light)); cursor: default; }
|
||||
.verwaltung-stat-tile-highlight:hover { transform: none; border-color: color-mix(in srgb, #e3b23c 45%, transparent); }
|
||||
.verwaltung-stat-icon { font-size: 1.6rem; }
|
||||
|
||||
Reference in New Issue
Block a user