96bcbd13d7
Redesign-Entscheid des Users (siehe design-mockups/): Aurora-Flavor "Ember". Re-Skin der Dark+Light-Theme-Variablen + hartcodierte Cyan-Stellen: - --accent Cyan #38bdf8 -> Amber #f2942d, neue --accent-2 Koral #ff7a5c - Surfaces/Text/Muted leicht ins Warme verschoben (Warm-Kalt-Spannung: Amber-Signal auf kühlem Navy bleibt erhalten) - Download-Progress Cyan-Gradient -> Amber->Koral (3 Stellen) - Accent-Button + Border -> Amber - Speed-Chart (App.tsx Canvas) Akzent -> Amber - Grün (Entpacken/Online/Erfolg) bleibt semantisch unverändert Bewusst KEINE Glas-/Glow-/Gradient-Mesh-Effekte (User lehnt KI-Look ab) — nur die warme Farbwelt auf der bestehenden flachen Struktur. design-mockups/: 4 Erst-Richtungen + Aurora-Flavor-Switcher + Forge (Referenz). tasks/todo.md: Bug-/Feature-Analyse (3 parallele Subagents). Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
96 lines
7.1 KiB
HTML
96 lines
7.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Design-Varianten — Real-Debrid-Downloader</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,700;12..96,800&family=Hanken+Grotesk:wght@400;500;600&family=JetBrains+Mono:wght@500&display=swap" rel="stylesheet">
|
|
<style>
|
|
:root { --bg:#070b14; --card:#0f1726; --line:#22324d; --text:#e7eefb; --muted:#8ea2c2; --accent:#3ad4ce; }
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
body { font-family: "Hanken Grotesk", system-ui, sans-serif; background:
|
|
radial-gradient(900px 500px at 85% -10%, rgba(74,168,255,0.12), transparent 60%),
|
|
radial-gradient(700px 500px at 5% 0, rgba(58,212,206,0.1), transparent 55%), var(--bg);
|
|
color: var(--text); min-height: 100vh; padding: 32px 28px 48px; }
|
|
.head { max-width: 1400px; margin: 0 auto 26px; }
|
|
.eyebrow { font-family: "JetBrains Mono"; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
|
|
h1 { font-family: "Bricolage Grotesque"; font-weight: 800; font-size: 34px; letter-spacing: -0.02em; margin: 8px 0 6px; }
|
|
.sub { color: var(--muted); font-size: 15px; max-width: 720px; line-height: 1.5; }
|
|
.grid { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
|
|
.variant { background: var(--card); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; transition: transform .2s, box-shadow .2s; }
|
|
.variant:hover { transform: translateY(-3px); box-shadow: 0 22px 50px rgba(0,0,0,0.45); border-color: var(--accent); }
|
|
.v-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--line); }
|
|
.v-head .meta { display: flex; align-items: center; gap: 14px; }
|
|
.v-num { font-family: "Bricolage Grotesque"; font-weight: 800; font-size: 22px; color: var(--accent); }
|
|
.v-name { font-family: "Bricolage Grotesque"; font-weight: 700; font-size: 19px; }
|
|
.v-tag { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
|
|
.v-open { font-family: "JetBrains Mono"; font-size: 12px; color: var(--accent); text-decoration: none; padding: 8px 14px; border: 1px solid var(--line); border-radius: 9px; transition: all .15s; }
|
|
.v-open:hover { background: var(--accent); color: #061018; }
|
|
.frame-wrap { position: relative; height: 420px; overflow: hidden; background: #000; cursor: pointer; }
|
|
.frame-wrap iframe { position: absolute; top: 0; left: 0; width: 1600px; height: 1000px; border: 0;
|
|
transform: scale(0.5); transform-origin: top left; pointer-events: none; }
|
|
.frame-wrap::after { content: "Klicken zum Öffnen"; position: absolute; inset: 0; display: grid; place-items: center;
|
|
background: rgba(7,11,20,0.0); color: transparent; font-family: "JetBrains Mono"; font-size: 13px; transition: all .2s; }
|
|
.frame-wrap:hover::after { background: rgba(7,11,20,0.55); color: var(--text); }
|
|
.desc { padding: 14px 20px 18px; color: var(--muted); font-size: 13.5px; line-height: 1.5; border-top: 1px solid var(--line); }
|
|
.desc b { color: var(--text); font-weight: 600; }
|
|
.foot { max-width: 1400px; margin: 30px auto 0; padding: 18px 22px; background: var(--card); border: 1px solid var(--line);
|
|
border-radius: 14px; color: var(--muted); font-size: 13.5px; line-height: 1.6; }
|
|
.foot b { color: var(--text); }
|
|
@media (max-width: 1000px) { .grid { grid-template-columns: 1fr; } }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="head">
|
|
<div class="eyebrow">Real-Debrid-Downloader · Redesign</div>
|
|
<h1>Vier Design-Richtungen</h1>
|
|
<div class="sub">Jede Variante zeigt denselben Downloads-Screen mit identischen Daten — so vergleichst du fair. Klick auf eine Vorschau, um sie in voller Größe zu öffnen. Sag mir danach welche Richtung (oder welche Mischung) dir gefällt.</div>
|
|
</div>
|
|
|
|
<div class="grid">
|
|
<div class="variant">
|
|
<div class="v-head">
|
|
<div class="meta"><span class="v-num">01</span><div><div class="v-name">Aurora</div><div class="v-tag">Verfeinerte Dark-Evolution</div></div></div>
|
|
<a class="v-open" href="aurora.html" target="_blank">Öffnen ↗</a>
|
|
</div>
|
|
<a href="aurora.html" target="_blank"><div class="frame-wrap"><iframe src="aurora.html" scrolling="no"></iframe></div></a>
|
|
<div class="desc"><b>Premium & vertraut.</b> Baut auf deinem aktuellen Cyan-Dark auf, aber edler: Glas-Effekt, Aurora-Verlauf, weiche Glows, klarere Status-Badges, Bricolage-Grotesque-Typo. Geringstes Risiko — alles bleibt erkennbar, wirkt nur hochwertiger.</div>
|
|
</div>
|
|
|
|
<div class="variant">
|
|
<div class="v-head">
|
|
<div class="meta"><span class="v-num">02</span><div><div class="v-name">Command</div><div class="v-tag">Terminal / Ops-Dashboard</div></div></div>
|
|
<a class="v-open" href="command.html" target="_blank">Öffnen ↗</a>
|
|
</div>
|
|
<a href="command.html" target="_blank"><div class="frame-wrap"><iframe src="command.html" scrolling="no"></iframe></div></a>
|
|
<div class="desc"><b>Maximale Dichte für Power-User.</b> Linke Icon-Leiste, Monospace, Grid-Linien, segmentierte Block-Progress-Bars, Status-LEDs, scharfe Kanten. Wirkt wie ein NOC/Server-Tool — viel Info auf einen Blick.</div>
|
|
</div>
|
|
|
|
<div class="variant">
|
|
<div class="v-head">
|
|
<div class="meta"><span class="v-num">03</span><div><div class="v-name">Vellum</div><div class="v-tag">Light Editorial</div></div></div>
|
|
<a class="v-open" href="vellum.html" target="_blank">Öffnen ↗</a>
|
|
</div>
|
|
<a href="vellum.html" target="_blank"><div class="frame-wrap"><iframe src="vellum.html" scrolling="no"></iframe></div></a>
|
|
<div class="desc"><b>Mutige helle Alternative.</b> Warmes Papier, Serif-Display (Fraunces), großzügige Abstände, dezente Teal-Akzente. Hebt sich von jedem anderen Downloader ab (die sind alle dunkel). Ruhig, edel, „App-Store-Premium".</div>
|
|
</div>
|
|
|
|
<div class="variant">
|
|
<div class="v-head">
|
|
<div class="meta"><span class="v-num">04</span><div><div class="v-name">Nebula</div><div class="v-tag">Neon / Synthwave</div></div></div>
|
|
<a class="v-open" href="nebula.html" target="_blank">Öffnen ↗</a>
|
|
</div>
|
|
<a href="nebula.html" target="_blank"><div class="frame-wrap"><iframe src="nebula.html" scrolling="no"></iframe></div></a>
|
|
<div class="desc"><b>Auffällig & vibrant.</b> Tiefes Violett-Schwarz, Magenta-Cyan-Verläufe, glühende Progress-Bars, Unbounded-Display-Font, animierte Akzente. Für wenn's knallen soll.</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="foot">
|
|
<b>Hinweis:</b> Die Vorschauen sind live (skaliert auf 50%). Pakete sind anklickbar/ausklappbar wenn du sie in voller Größe öffnest. ·
|
|
Alle vier nutzen dieselbe Spaltenstruktur (Name · Geladen/Größe · Fortschritt · Hoster · Service · Priorität · Status · Tempo) und Beispieldaten (Ugly Americans S02 lädt, The Bear entpackt, Dune fertig, Shōgun Fehler, Severance wartet).
|
|
</div>
|
|
</body>
|
|
</html>
|