49 lines
2.0 KiB
HTML
49 lines
2.0 KiB
HTML
<!doctype html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>epaper dashboard — Design Preview</title>
|
|
<style>
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
body { font-family: -apple-system, sans-serif; background: #111; color: #fff; line-height: 1.5; }
|
|
.intro { text-align: center; padding: 32px 24px 8px; color: #666; font-size: 0.85em; }
|
|
.intro h1 { color: #fff; font-size: 1.1em; margin-bottom: 6px; }
|
|
.designs { display: flex; gap: 24px; padding: 16px 24px 80px; overflow-x: auto; }
|
|
.design { flex: 0 0 520px; background: #fff; border-radius: 10px; overflow: hidden; color: #111; }
|
|
.design-header { padding: 16px 20px; background: #f0f0f5; border-bottom: 1px solid #ddd; }
|
|
.design-header h2 { font-size: 0.9em; font-weight: 600; color: #333; }
|
|
.design-header p { font-size: 0.72em; color: #888; margin-top: 2px; }
|
|
iframe { width: 100%; height: 600px; border: none; display: block; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="intro">
|
|
<h1>epaper-dashboard — Design Preview</h1>
|
|
Scrolle rechts für alle drei Varianten. Alle Designs haben das gleiche Backend — nur die Optik ist anders.
|
|
</div>
|
|
<div class="designs">
|
|
<div class="design">
|
|
<div class="design-header">
|
|
<h2>A — Dark Minimal</h2>
|
|
<p>Linear/Vercel-inspiriert · Fast-Schwarz · Eine Akzentfarbe · Clean & Ruhe</p>
|
|
</div>
|
|
<iframe src="design_a_dark_minimal.html"></iframe>
|
|
</div>
|
|
<div class="design">
|
|
<div class="design-header">
|
|
<h2>B — Retro Terminal</h2>
|
|
<p>CRT/Phosphor · Grüner-Hintergrund · Scanlines · LoRes-Charme</p>
|
|
</div>
|
|
<iframe src="design_b_retro_terminal.html"></iframe>
|
|
</div>
|
|
<div class="design">
|
|
<div class="design-header">
|
|
<h2>C — Warm Editorial</h2>
|
|
<p>Zeitung/Magazin · Warme Töne · Serif-Fonts · Papier-Optik</p>
|
|
</div>
|
|
<iframe src="design_c_warm_editorial.html"></iframe>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|