From 678a5f9a03da823530f4741536d447f92d18a092 Mon Sep 17 00:00:00 2001 From: rene Date: Sun, 17 May 2026 15:39:42 +0200 Subject: [PATCH] Feature: Device-Mockups auf Landing Page (CSS Dashboard + Live iPhone-Iframe) --- app/src/routes/+page.svelte | 284 ++++++++++++++++++++++++++++++++++++ 1 file changed, 284 insertions(+) diff --git a/app/src/routes/+page.svelte b/app/src/routes/+page.svelte index 15f5808..10501dc 100644 --- a/app/src/routes/+page.svelte +++ b/app/src/routes/+page.svelte @@ -45,6 +45,93 @@ + +
+
+

So sieht Ihre gebrandete App aus

+

Dashboard für Sie — Checkliste für Ihre Kunden

+ +
+ + +
+
+
+ +
+
app.musterprüfbetrieb.de/admin
+
+
+
+ +
Dashboard
+
Protokoll
+
Stationen
+
+
+
Dashboard
+
Sonntag, 17. Mai
+
+
+
184
+
Checks gesamt
+
+
+
171
+
In Ordnung
+
+
+
11
+
Abweichungen
+
+
+
2
+
Kritisch
+
+
+
Heutige Einträge
+
+ OK + Kühlschrank 1 (Küche) + 5 °C + Maria S. · 07:42 +
+
+ OK + Kühlschrank 2 (Getränke) + 6 °C + Klaus B. · 08:05 +
+
+ Abweichung + Tiefkühlzelle + −15 °C + Sandra M. · 08:31 +
+
+
+
+ + +
+
+
+
+ +
+
+
+

Live-Demo — einfach ausprobieren

+
+ +
+
+
+
@@ -195,6 +282,203 @@ } .btn-nav:hover { background: #0B1023; color: #fff; } + /* MOCKUPS */ + .mockups { + padding: 5rem 2rem; + background: #0B1023; + color: #fff; + overflow: hidden; + } + .mockups .eyebrow-dark { + font-size: 0.8rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 1.5px; + color: #F97316; + text-align: center; + margin-bottom: 1rem; + } + .mockups h2 { color: #fff; text-align: center; margin-bottom: 3rem; } + + .devices { + display: flex; + align-items: flex-start; + justify-content: center; + gap: 3rem; + flex-wrap: wrap; + } + + /* Browser Mockup */ + .device-browser { + flex: 1; + min-width: 320px; + max-width: 580px; + background: #1a2035; + border-radius: 12px; + overflow: hidden; + box-shadow: 0 24px 60px rgba(0,0,0,0.5); + border: 1px solid #2a3347; + } + .browser-bar { + background: #252d42; + padding: 0.6rem 1rem; + display: flex; + align-items: center; + gap: 0.75rem; + } + .browser-dots { display: flex; gap: 5px; } + .browser-dots span { + width: 10px; height: 10px; + border-radius: 50%; + background: #3a4055; + } + .browser-url { + flex: 1; + background: #1a2035; + border-radius: 4px; + padding: 0.2rem 0.6rem; + font-size: 0.7rem; + color: #6b7a9a; + font-family: monospace; + } + .browser-screen { display: flex; height: 300px; overflow: hidden; } + + /* CSS Dashboard */ + .dash-sidebar { + width: 120px; + background: #0B1023; + padding: 1rem 0.75rem; + flex-shrink: 0; + display: flex; + flex-direction: column; + gap: 0.25rem; + } + .dash-logo { + font-size: 0.8rem; + font-weight: 800; + color: #fff; + margin-bottom: 1rem; + padding: 0 0.25rem; + } + .dash-logo span { color: #F97316; } + .dash-nav-item { + padding: 0.4rem 0.5rem; + border-radius: 5px; + font-size: 0.65rem; + color: #6b7a9a; + } + .dash-nav-item.active { + background: rgba(249,115,22,0.15); + color: #F97316; + } + + .dash-main { + flex: 1; + padding: 1rem; + background: #F5F7FA; + overflow: hidden; + } + .dash-title { font-size: 0.9rem; font-weight: 800; color: #0B1023; } + .dash-date { font-size: 0.65rem; color: #888; margin-bottom: 0.75rem; } + + .dash-stats { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 0.4rem; + margin-bottom: 0.75rem; + } + .dash-stat { + background: #fff; + border-radius: 6px; + padding: 0.4rem; + border-left: 2.5px solid #ddd; + } + .dash-stat.ok { border-color: #16a34a; } + .dash-stat.warn { border-color: #ea580c; } + .dash-stat.crit { border-color: #dc2626; } + .dash-num { font-size: 1rem; font-weight: 800; color: #0B1023; line-height: 1; } + .dash-label { font-size: 0.5rem; color: #888; margin-top: 0.15rem; } + + .dash-entries-title { font-size: 0.7rem; font-weight: 700; color: #0B1023; margin-bottom: 0.4rem; } + .dash-entry { + background: #fff; + border-radius: 6px; + padding: 0.4rem 0.5rem; + font-size: 0.6rem; + display: flex; + align-items: center; + gap: 0.4rem; + margin-bottom: 0.3rem; + } + .entry-badge { + padding: 0.1rem 0.35rem; + border-radius: 10px; + font-weight: 700; + font-size: 0.55rem; + white-space: nowrap; + } + .entry-badge.ok { background: #dcfce7; color: #16a34a; } + .entry-badge.warn { background: #ffedd5; color: #ea580c; } + .entry-station { flex: 1; font-weight: 600; color: #0B1023; } + .entry-temp { color: #555; } + .entry-who { color: #aaa; white-space: nowrap; } + + /* Phone Mockup */ + .device-phone { + display: flex; + flex-direction: column; + align-items: center; + gap: 1rem; + } + .phone-frame { + width: 220px; + background: #1a1a2e; + border-radius: 36px; + padding: 12px; + box-shadow: 0 24px 60px rgba(0,0,0,0.6), inset 0 0 0 1px #2a2a4a; + } + .phone-notch { + width: 60px; + height: 20px; + background: #1a1a2e; + border-radius: 10px; + margin: 0 auto 8px; + border: 1.5px solid #2a2a4a; + } + .phone-screen { + background: #fff; + border-radius: 24px; + overflow: hidden; + height: 380px; + } + .phone-screen iframe { + width: 100%; + height: 100%; + border: none; + transform: scale(0.85); + transform-origin: top left; + width: 117%; + height: 117%; + pointer-events: auto; + } + .phone-home { + width: 60px; + height: 4px; + background: #3a3a5a; + border-radius: 2px; + margin: 10px auto 0; + } + .phone-caption { + font-size: 0.8rem; + color: #6b7a9a; + text-align: center; + } + + @media (max-width: 768px) { + .device-browser { display: none; } + .devices { justify-content: center; } + } + /* HERO */ .hero { background: linear-gradient(135deg, #0B1023 0%, #16213e 100%);