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>
299 lines
18 KiB
HTML
299 lines
18 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Vellum — Real-Debrid-Downloader Mockup</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=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Spline+Sans:wght@400;500;600;700&family=Spline+Sans+Mono:wght@400;500;600&display=swap" rel="stylesheet">
|
|
<style>
|
|
:root {
|
|
--paper: #f6f1e7;
|
|
--paper-2: #f1eadc;
|
|
--card: #fdfbf6;
|
|
--ink: #2a2520;
|
|
--ink-soft: #6b6256;
|
|
--faint: #9c9284;
|
|
--line: #e3dac8;
|
|
--line-soft: #ece4d6;
|
|
--accent: #0f6b5f; /* deep teal */
|
|
--accent-soft: #d7e9e4;
|
|
--rust: #c0562f; /* burnt sienna */
|
|
--gold: #b8860b;
|
|
--green: #3f7d52;
|
|
--red: #b23a3a;
|
|
--shadow: rgba(60, 48, 30, 0.1);
|
|
}
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
body {
|
|
font-family: "Spline Sans", system-ui, sans-serif;
|
|
background:
|
|
radial-gradient(1000px 600px at 90% -10%, rgba(15,107,95,0.05), transparent 60%),
|
|
radial-gradient(800px 500px at 0% 100%, rgba(192,86,47,0.05), transparent 55%),
|
|
var(--paper);
|
|
color: var(--ink);
|
|
font-size: 14px;
|
|
height: 100vh; overflow: hidden;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
.serif { font-family: "Fraunces", Georgia, serif; }
|
|
.mono { font-family: "Spline Sans Mono", monospace; }
|
|
.app { display: grid; grid-template-rows: auto auto 1fr auto; height: 100vh; padding: 16px 24px 14px; gap: 14px; }
|
|
|
|
/* Header */
|
|
.header { display: flex; align-items: flex-end; gap: 20px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
|
|
.brand { display: flex; align-items: center; gap: 13px; }
|
|
.mark { width: 40px; height: 40px; border-radius: 50%; background: var(--ink); color: var(--paper); display: grid; place-items: center;
|
|
font-family: "Fraunces"; font-weight: 600; font-size: 21px; }
|
|
.brand .tt { font-family: "Fraunces"; font-weight: 600; font-size: 23px; letter-spacing: -0.01em; line-height: 1; }
|
|
.brand .ss { font-size: 11.5px; color: var(--faint); margin-top: 4px; letter-spacing: 0.04em; text-transform: uppercase; }
|
|
.header .spacer { flex: 1; }
|
|
.nav { display: flex; gap: 4px; align-items: center; }
|
|
.nav a { padding: 7px 15px; border-radius: 999px; color: var(--ink-soft); font-weight: 600; font-size: 13.5px; cursor: pointer; transition: all .15s; text-decoration: none; }
|
|
.nav a:hover { background: var(--line-soft); color: var(--ink); }
|
|
.nav a.active { background: var(--ink); color: var(--paper); }
|
|
.menu-min { display: flex; gap: 2px; margin-left: 10px; }
|
|
.menu-min a { font-size: 12.5px; color: var(--faint); padding: 7px 10px; }
|
|
|
|
/* Action bar */
|
|
.actionbar { display: flex; align-items: center; gap: 16px; }
|
|
.runner { display: flex; align-items: center; gap: 4px; padding: 5px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; box-shadow: 0 2px 8px var(--shadow); }
|
|
.rbtn { width: 36px; height: 36px; border-radius: 50%; border: none; background: transparent; display: grid; place-items: center; cursor: pointer; color: var(--ink-soft); transition: all .15s; }
|
|
.rbtn:hover { background: var(--line-soft); color: var(--ink); }
|
|
.rbtn svg { width: 16px; height: 16px; }
|
|
.rbtn.play { background: var(--accent); color: #fff; } .rbtn.play:hover { background: #0c574d; }
|
|
.rbtn.stop { color: var(--red); }
|
|
.chip-actions { display: flex; gap: 8px; }
|
|
.chip { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; background: var(--card); border: 1px solid var(--line);
|
|
font-size: 12.5px; font-weight: 600; color: var(--ink-soft); cursor: pointer; box-shadow: 0 1px 4px var(--shadow); }
|
|
.chip svg { width: 14px; height: 14px; }
|
|
.actionbar .spacer { flex: 1; }
|
|
.metrics { display: flex; gap: 26px; }
|
|
.metric { text-align: right; }
|
|
.metric .m-l { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--faint); }
|
|
.metric .m-v { font-family: "Fraunces"; font-weight: 600; font-size: 22px; line-height: 1.1; margin-top: 2px; }
|
|
.metric .m-v .u { font-size: 12px; color: var(--ink-soft); font-family: "Spline Sans"; }
|
|
.metric .m-v.accent { color: var(--accent); }
|
|
|
|
/* List */
|
|
.listcard { background: var(--card); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column;
|
|
box-shadow: 0 6px 22px var(--shadow); }
|
|
.lhead { display: grid; grid-template-columns: minmax(0,1fr) 150px 150px 120px 120px 150px 84px;
|
|
padding: 13px 22px; border-bottom: 1px solid var(--line); font-size: 11px; font-weight: 700; text-transform: uppercase;
|
|
letter-spacing: 0.07em; color: var(--faint); background: var(--paper-2); }
|
|
.lhead > div:not(:first-child) { text-align: center; }
|
|
.lbody { overflow-y: auto; flex: 1; }
|
|
.lbody::-webkit-scrollbar { width: 12px; }
|
|
.lbody::-webkit-scrollbar-thumb { background: var(--line); border-radius: 12px; border: 4px solid var(--card); background-clip: padding-box; }
|
|
|
|
.pkg { border-bottom: 1px solid var(--line-soft); }
|
|
.pkg:last-child { border-bottom: none; }
|
|
.prow { display: grid; grid-template-columns: minmax(0,1fr) 150px 150px 120px 120px 150px 84px; align-items: center; padding: 16px 22px; cursor: pointer; transition: background .15s; }
|
|
.prow:hover { background: var(--paper-2); }
|
|
.pn { display: flex; align-items: center; gap: 13px; min-width: 0; }
|
|
.chev { color: var(--faint); transition: transform .2s; flex-shrink: 0; }
|
|
.pkg.open .chev { transform: rotate(90deg); }
|
|
.pnum { width: 30px; height: 30px; border-radius: 8px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center;
|
|
font-family: "Fraunces"; font-weight: 600; font-size: 14px; flex-shrink: 0; }
|
|
.ptt { min-width: 0; }
|
|
.ptt .t { font-family: "Fraunces"; font-weight: 600; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -0.005em; }
|
|
.ptt .s { font-size: 11.5px; color: var(--faint); margin-top: 1px; }
|
|
.c { text-align: center; font-size: 13px; color: var(--ink-soft); }
|
|
.c.mono { font-family: "Spline Sans Mono"; font-size: 12px; }
|
|
|
|
/* progress: refined thin bar with number */
|
|
.prog { display: flex; flex-direction: column; gap: 5px; align-items: center; }
|
|
.prog .pp { font-family: "Fraunces"; font-weight: 600; font-size: 14px; }
|
|
.bar { width: 100%; height: 5px; border-radius: 99px; background: var(--line); overflow: hidden; }
|
|
.bar > i { display: block; height: 100%; width: var(--p,0%); border-radius: 99px; background: var(--accent); }
|
|
.bar > i.ext { background: var(--green); }
|
|
.bar > i.err { background: var(--red); }
|
|
|
|
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-size: 11.5px; font-weight: 600; }
|
|
.p-dl { background: var(--accent-soft); color: var(--accent); }
|
|
.p-ext { background: #dcecdf; color: var(--green); }
|
|
.p-done { background: #dcecdf; color: var(--green); }
|
|
.p-err { background: #f4dede; color: var(--red); }
|
|
.p-q { background: var(--line-soft); color: var(--ink-soft); }
|
|
.host { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; }
|
|
.host .hd { width: 8px; height: 8px; border-radius: 50%; }
|
|
.prio { font-size: 11px; font-weight: 700; color: var(--rust); letter-spacing: 0.04em; }
|
|
|
|
.items { display: none; background: var(--paper-2); padding: 4px 0; }
|
|
.pkg.open .items { display: block; }
|
|
.item { display: grid; grid-template-columns: minmax(0,1fr) 150px 150px 120px 120px 150px 84px; align-items: center; padding: 9px 22px; font-size: 12.5px; }
|
|
.item:hover { background: rgba(15,107,95,0.04); }
|
|
.in { display: flex; align-items: center; gap: 10px; padding-left: 43px; min-width: 0; }
|
|
.ldot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
|
|
.ldot.on { background: var(--green); } .ldot.off { background: var(--red); }
|
|
.in .nm { font-family: "Spline Sans Mono"; font-size: 11.5px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
|
|
/* footer */
|
|
.footer { display: flex; align-items: center; gap: 22px; font-size: 12.5px; color: var(--ink-soft); padding: 0 6px; }
|
|
.footer .fi { display: flex; align-items: center; gap: 8px; }
|
|
.footer b { color: var(--ink); font-family: "Fraunces"; font-weight: 600; }
|
|
.footer .spacer { flex: 1; }
|
|
.gdot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
|
|
.track { width: 140px; height: 6px; border-radius: 99px; background: var(--line); overflow: hidden; }
|
|
.track > i { display: block; height: 100%; width: 62%; background: linear-gradient(90deg, var(--accent), var(--green)); }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="app">
|
|
<!-- HEADER -->
|
|
<div class="header">
|
|
<div class="brand">
|
|
<div class="mark">D</div>
|
|
<div>
|
|
<div class="tt">Debrid Downloader</div>
|
|
<div class="ss">Vellum Edition · v1.7.156</div>
|
|
</div>
|
|
</div>
|
|
<div class="spacer"></div>
|
|
<nav class="nav">
|
|
<a class="active">Downloads</a>
|
|
<a>Linksammler</a>
|
|
<a>Verlauf</a>
|
|
<a>Statistiken</a>
|
|
<span class="menu-min"><a>Datei</a><a>Einstellungen</a><a>Hilfe</a></span>
|
|
</nav>
|
|
</div>
|
|
|
|
<!-- ACTION BAR -->
|
|
<div class="actionbar">
|
|
<div class="runner">
|
|
<button class="rbtn play" title="Start"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg></button>
|
|
<button class="rbtn" title="Pause"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M6 5h4v14H6zM14 5h4v14h-4z"/></svg></button>
|
|
<button class="rbtn stop" title="Stop"><svg viewBox="0 0 24 24" fill="currentColor"><rect x="6" y="6" width="12" height="12" rx="2"/></svg></button>
|
|
</div>
|
|
<div class="chip-actions">
|
|
<div class="chip"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg> Zeitplan</div>
|
|
<div class="chip"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 19V5M5 12l7-7 7 7"/></svg> Hoch</div>
|
|
<div class="chip"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12l7 7 7-7"/></svg> Runter</div>
|
|
</div>
|
|
<div class="spacer"></div>
|
|
<div class="metrics">
|
|
<div class="metric"><div class="m-l">Tempo</div><div class="m-v accent">48.2<span class="u"> MB/s</span></div></div>
|
|
<div class="metric"><div class="m-l">Verbleibend</div><div class="m-v">02:14</div></div>
|
|
<div class="metric"><div class="m-l">Aktiv</div><div class="m-v">8<span class="u"> / 24</span></div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- LIST -->
|
|
<div class="listcard">
|
|
<div class="lhead">
|
|
<div>Paket</div><div>Geladen / Größe</div><div>Fortschritt</div><div>Hoster</div><div>Service</div><div>Status</div><div>Tempo</div>
|
|
</div>
|
|
<div class="lbody">
|
|
|
|
<!-- pkg1 open downloading -->
|
|
<div class="pkg open">
|
|
<div class="prow">
|
|
<div class="pn">
|
|
<svg class="chev" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M9 6l6 6-6 6"/></svg>
|
|
<div class="pnum">1</div>
|
|
<div class="ptt"><div class="t">Ugly Americans · Staffel 2</div><div class="s">Ugly.Americans.S02.COMPLETE.German.DL.720p.WEB-DL.h264-NERDS · 10 Dateien · 14.2 GB</div></div>
|
|
</div>
|
|
<div class="c mono">8.9 / 14.2 GB</div>
|
|
<div class="c"><div class="prog"><div class="pp">63%</div><div class="bar"><i style="--p:63%"></i></div></div></div>
|
|
<div class="c"><span class="host"><span class="hd" style="background:#ff5722"></span>mega</span></div>
|
|
<div class="c">Mega-Debrid</div>
|
|
<div class="c"><span class="pill p-dl">Lädt · 6/10</span></div>
|
|
<div class="c mono" style="color:var(--accent)">48 MB/s</div>
|
|
</div>
|
|
<div class="items">
|
|
<div class="item"><div class="in"><span class="ldot on"></span><span class="nm">…h264-NERDS.part1.rar</span></div><div class="c mono">2.0 / 2.0</div><div class="c"><div class="bar"><i class="ext" style="--p:100%"></i></div></div><div class="c">mega</div><div class="c"></div><div class="c"><span class="pill p-done">Fertig</span></div><div class="c mono">—</div></div>
|
|
<div class="item"><div class="in"><span class="ldot on"></span><span class="nm">…h264-NERDS.part2.rar</span></div><div class="c mono">2.0 / 2.0</div><div class="c"><div class="bar"><i class="ext" style="--p:100%"></i></div></div><div class="c">mega</div><div class="c"></div><div class="c"><span class="pill p-done">Fertig</span></div><div class="c mono">—</div></div>
|
|
<div class="item"><div class="in"><span class="ldot on"></span><span class="nm">…h264-NERDS.part3.rar</span></div><div class="c mono">1.4 / 2.0</div><div class="c"><div class="bar"><i style="--p:70%"></i></div></div><div class="c">mega</div><div class="c"></div><div class="c"><span class="pill p-dl">70%</span></div><div class="c mono" style="color:var(--accent)">26 MB/s</div></div>
|
|
<div class="item"><div class="in"><span class="ldot on"></span><span class="nm">…h264-NERDS.part4.rar</span></div><div class="c mono">0.8 / 2.0</div><div class="c"><div class="bar"><i style="--p:40%"></i></div></div><div class="c">mega</div><div class="c"></div><div class="c"><span class="pill p-dl">40%</span></div><div class="c mono" style="color:var(--accent)">22 MB/s</div></div>
|
|
<div class="item"><div class="in"><span class="ldot off"></span><span class="nm">…h264-NERDS.part5.rar</span></div><div class="c mono">0 / 1.1</div><div class="c"><div class="bar"><i style="--p:0%"></i></div></div><div class="c">mega</div><div class="c"></div><div class="c"><span class="pill p-q">Wartet</span></div><div class="c mono">—</div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- pkg2 extracting -->
|
|
<div class="pkg">
|
|
<div class="prow">
|
|
<div class="pn">
|
|
<svg class="chev" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M9 6l6 6-6 6"/></svg>
|
|
<div class="pnum">2</div>
|
|
<div class="ptt"><div class="t">The Bear · Staffel 3</div><div class="s">The.Bear.S03.German.DL.1080p.WEB.h264-WvF · 8 Dateien · 11.6 GB</div></div>
|
|
</div>
|
|
<div class="c mono">11.6 / 11.6 GB</div>
|
|
<div class="c"><div class="prog"><div class="pp" style="color:var(--green)">82%</div><div class="bar"><i class="ext" style="--p:82%"></i></div></div></div>
|
|
<div class="c"><span class="host"><span class="hd" style="background:#22c55e"></span>rapidgator</span></div>
|
|
<div class="c">Real-Debrid</div>
|
|
<div class="c"><span class="pill p-ext">Entpacken</span></div>
|
|
<div class="c mono">—</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- pkg3 done -->
|
|
<div class="pkg">
|
|
<div class="prow">
|
|
<div class="pn">
|
|
<svg class="chev" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M9 6l6 6-6 6"/></svg>
|
|
<div class="pnum">3</div>
|
|
<div class="ptt"><div class="t">Dune · Part Two</div><div class="s">Dune.Part.Two.2024.German.DL.2160p.UHD.BluRay.x265-NERDS · in Library übernommen</div></div>
|
|
</div>
|
|
<div class="c mono">18.4 / 18.4 GB</div>
|
|
<div class="c"><div class="prog"><div class="pp" style="color:var(--green)">100%</div><div class="bar"><i class="ext" style="--p:100%"></i></div></div></div>
|
|
<div class="c"><span class="host"><span class="hd" style="background:#3b82f6"></span>ddownload</span></div>
|
|
<div class="c">AllDebrid</div>
|
|
<div class="c"><span class="pill p-done">Abgeschlossen</span></div>
|
|
<div class="c mono">—</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- pkg4 error -->
|
|
<div class="pkg">
|
|
<div class="prow">
|
|
<div class="pn">
|
|
<svg class="chev" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M9 6l6 6-6 6"/></svg>
|
|
<div class="pnum" style="background:#f4dede;color:var(--red)">!</div>
|
|
<div class="ptt"><div class="t">Shōgun · S01E05</div><div class="s" style="color:var(--red)">Hoster nicht verfügbar — Link tot, kein Fallback erfolgreich</div></div>
|
|
</div>
|
|
<div class="c mono">0 / 2.4 GB</div>
|
|
<div class="c"><div class="prog"><div class="pp" style="color:var(--red)">—</div><div class="bar"><i class="err" style="--p:8%"></i></div></div></div>
|
|
<div class="c"><span class="host"><span class="hd" style="background:#a855f7"></span>uploaded</span></div>
|
|
<div class="c">—</div>
|
|
<div class="c"><span class="pill p-err">Fehlgeschlagen</span></div>
|
|
<div class="c mono">—</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- pkg5 queued -->
|
|
<div class="pkg">
|
|
<div class="prow">
|
|
<div class="pn">
|
|
<svg class="chev" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M9 6l6 6-6 6"/></svg>
|
|
<div class="pnum">5</div>
|
|
<div class="ptt"><div class="t">Severance · Staffel 2</div><div class="s">Severance.S02.COMPLETE.German.DL.1080p.ATVP.WEB.h265-NERDS · 10 Dateien · 22.1 GB</div></div>
|
|
</div>
|
|
<div class="c mono">0 / 22.1 GB</div>
|
|
<div class="c"><div class="prog"><div class="pp" style="color:var(--faint)">0%</div><div class="bar"><i style="--p:0%"></i></div></div></div>
|
|
<div class="c"><span class="host"><span class="hd" style="background:#ff5722"></span>mega</span></div>
|
|
<div class="c">Mega-Debrid</div>
|
|
<div class="c"><span class="pill p-q">Wartet</span></div>
|
|
<div class="c mono">—</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- FOOTER -->
|
|
<div class="footer">
|
|
<div class="fi"><span class="gdot"></span> Läuft</div>
|
|
<div class="fi">Queue <b>5 Pakete</b> · <b>34 Dateien</b></div>
|
|
<div class="fi">Heute <b>147 GB</b></div>
|
|
<div class="spacer"></div>
|
|
<div class="fi">Gesamt <div class="track"><i></i></div> <b>62 %</b></div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
document.querySelectorAll('.prow').forEach(r => r.addEventListener('click', () => r.parentElement.classList.toggle('open')));
|
|
</script>
|
|
</body>
|
|
</html>
|