Feature: Device-Mockups auf Landing Page (CSS Dashboard + Live iPhone-Iframe)
This commit is contained in:
parent
d1b2d41fd9
commit
678a5f9a03
1 changed files with 284 additions and 0 deletions
|
|
@ -45,6 +45,93 @@
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<!-- MOCKUPS -->
|
||||
<section class="mockups">
|
||||
<div class="container">
|
||||
<p class="eyebrow-dark">So sieht Ihre gebrandete App aus</p>
|
||||
<h2>Dashboard für Sie — Checkliste für Ihre Kunden</h2>
|
||||
|
||||
<div class="devices">
|
||||
|
||||
<!-- Desktop: CSS Dashboard-Preview -->
|
||||
<div class="device-browser">
|
||||
<div class="browser-bar">
|
||||
<div class="browser-dots">
|
||||
<span></span><span></span><span></span>
|
||||
</div>
|
||||
<div class="browser-url">app.musterprüfbetrieb.de/admin</div>
|
||||
</div>
|
||||
<div class="browser-screen">
|
||||
<div class="dash-sidebar">
|
||||
<div class="dash-logo">checkflo<span>.de</span></div>
|
||||
<div class="dash-nav-item active">Dashboard</div>
|
||||
<div class="dash-nav-item">Protokoll</div>
|
||||
<div class="dash-nav-item">Stationen</div>
|
||||
</div>
|
||||
<div class="dash-main">
|
||||
<div class="dash-title">Dashboard</div>
|
||||
<div class="dash-date">Sonntag, 17. Mai</div>
|
||||
<div class="dash-stats">
|
||||
<div class="dash-stat">
|
||||
<div class="dash-num">184</div>
|
||||
<div class="dash-label">Checks gesamt</div>
|
||||
</div>
|
||||
<div class="dash-stat ok">
|
||||
<div class="dash-num">171</div>
|
||||
<div class="dash-label">In Ordnung</div>
|
||||
</div>
|
||||
<div class="dash-stat warn">
|
||||
<div class="dash-num">11</div>
|
||||
<div class="dash-label">Abweichungen</div>
|
||||
</div>
|
||||
<div class="dash-stat crit">
|
||||
<div class="dash-num">2</div>
|
||||
<div class="dash-label">Kritisch</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dash-entries-title">Heutige Einträge</div>
|
||||
<div class="dash-entry">
|
||||
<span class="entry-badge ok">OK</span>
|
||||
<span class="entry-station">Kühlschrank 1 (Küche)</span>
|
||||
<span class="entry-temp">5 °C</span>
|
||||
<span class="entry-who">Maria S. · 07:42</span>
|
||||
</div>
|
||||
<div class="dash-entry">
|
||||
<span class="entry-badge ok">OK</span>
|
||||
<span class="entry-station">Kühlschrank 2 (Getränke)</span>
|
||||
<span class="entry-temp">6 °C</span>
|
||||
<span class="entry-who">Klaus B. · 08:05</span>
|
||||
</div>
|
||||
<div class="dash-entry">
|
||||
<span class="entry-badge warn">Abweichung</span>
|
||||
<span class="entry-station">Tiefkühlzelle</span>
|
||||
<span class="entry-temp">−15 °C</span>
|
||||
<span class="entry-who">Sandra M. · 08:31</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile: Live-Iframe -->
|
||||
<div class="device-phone">
|
||||
<div class="phone-frame">
|
||||
<div class="phone-notch"></div>
|
||||
<div class="phone-screen">
|
||||
<iframe
|
||||
src="https://checkflo.de/s/b6b30daf-8bfe-4648-ba2b-6c42916d2264"
|
||||
title="checkflo Demo"
|
||||
scrolling="no"
|
||||
></iframe>
|
||||
</div>
|
||||
<div class="phone-home"></div>
|
||||
</div>
|
||||
<p class="phone-caption">Live-Demo — einfach ausprobieren</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- HOW IT WORKS -->
|
||||
<section class="steps" id="funktionen">
|
||||
<div class="container">
|
||||
|
|
@ -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%);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue