Ember-Theme: warmer Amber-Akzent auf kühlem Navy
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>
This commit is contained in:
Sucukdeluxe
parent
d54a9d603b
commit
96bcbd13d7
361
design-mockups/aurora-flavors.html
Normal file
361
design-mockups/aurora-flavors.html
Normal file
@ -0,0 +1,361 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de" data-flavor="ember">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Aurora Flavors — 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,500;12..96,600;12..96,700;12..96,800&family=Hanken+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@500;600&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
/* ===== BASELINE = TEAL ===== */
|
||||
:root {
|
||||
--bg: #060b18; --bg-2: #0a1326;
|
||||
--surface: rgba(18, 30, 54, 0.66);
|
||||
--card: rgba(22, 36, 64, 0.72);
|
||||
--field: #0a1426;
|
||||
--border: rgba(86, 124, 178, 0.22);
|
||||
--border-strong: rgba(96, 140, 200, 0.4);
|
||||
--text: #eaf1fb; --muted: #93a8c8; --faint: #6982a6;
|
||||
--accent: #3ad4ce; --accent-2: #4aa8ff; --accent-glow: rgba(58, 212, 206, 0.55);
|
||||
--green: #43e08a; --amber: #ffb13d; --red: #ff5d76; --violet: #9d7bff;
|
||||
--bg-grad:
|
||||
radial-gradient(900px 520px at 84% -8%, rgba(74,168,255,0.16), transparent 60%),
|
||||
radial-gradient(820px 480px at 8% 0%, rgba(58,212,206,0.13), transparent 55%),
|
||||
radial-gradient(1200px 700px at 50% 120%, rgba(157,123,255,0.10), transparent 60%),
|
||||
linear-gradient(180deg, var(--bg-2), var(--bg));
|
||||
}
|
||||
/* ===== INDIGO ===== */
|
||||
html[data-flavor="indigo"] {
|
||||
--bg: #0a0a1c; --bg-2: #100f28;
|
||||
--accent: #8f7bff; --accent-2: #5b8cff; --accent-glow: rgba(143,123,255,0.55);
|
||||
--border: rgba(120,110,210,0.24); --border-strong: rgba(140,120,240,0.42);
|
||||
--bg-grad:
|
||||
radial-gradient(900px 520px at 84% -8%, rgba(91,140,255,0.18), transparent 60%),
|
||||
radial-gradient(820px 480px at 8% 0%, rgba(143,123,255,0.15), transparent 55%),
|
||||
radial-gradient(1200px 700px at 50% 120%, rgba(120,90,255,0.12), transparent 60%),
|
||||
linear-gradient(180deg, var(--bg-2), var(--bg));
|
||||
}
|
||||
/* ===== EMERALD ===== */
|
||||
html[data-flavor="emerald"] {
|
||||
--bg: #04130e; --bg-2: #08211a;
|
||||
--accent: #34e0a1; --accent-2: #2dd4bf; --accent-glow: rgba(52,224,161,0.5);
|
||||
--border: rgba(70,160,130,0.24); --border-strong: rgba(80,200,160,0.4);
|
||||
--bg-grad:
|
||||
radial-gradient(900px 520px at 84% -8%, rgba(45,212,191,0.16), transparent 60%),
|
||||
radial-gradient(820px 480px at 8% 0%, rgba(52,224,161,0.14), transparent 55%),
|
||||
radial-gradient(1200px 700px at 50% 120%, rgba(34,197,150,0.10), transparent 60%),
|
||||
linear-gradient(180deg, var(--bg-2), var(--bg));
|
||||
}
|
||||
/* ===== EMBER (warm accent / cool base) ===== */
|
||||
html[data-flavor="ember"] {
|
||||
--bg: #090b18; --bg-2: #0e1124;
|
||||
--accent: #ff9e57; --accent-2: #ff6f91; --accent-glow: rgba(255,158,87,0.5);
|
||||
--border: rgba(150,120,150,0.22); --border-strong: rgba(255,158,87,0.36);
|
||||
--bg-grad:
|
||||
radial-gradient(900px 520px at 84% -8%, rgba(255,111,145,0.15), transparent 60%),
|
||||
radial-gradient(820px 480px at 8% 0%, rgba(255,158,87,0.13), transparent 55%),
|
||||
radial-gradient(1200px 700px at 50% 120%, rgba(91,140,255,0.10), transparent 60%),
|
||||
linear-gradient(180deg, var(--bg-2), var(--bg));
|
||||
}
|
||||
/* ===== ICE (desaturated steel, low glow) ===== */
|
||||
html[data-flavor="ice"] {
|
||||
--bg: #080d16; --bg-2: #0d1622;
|
||||
--accent: #82d4ff; --accent-2: #abc0db; --accent-glow: rgba(130,212,255,0.32);
|
||||
--border: rgba(100,130,165,0.22); --border-strong: rgba(130,160,195,0.4);
|
||||
--bg-grad:
|
||||
radial-gradient(900px 520px at 84% -8%, rgba(130,212,255,0.12), transparent 60%),
|
||||
radial-gradient(820px 480px at 8% 0%, rgba(171,192,219,0.08), transparent 55%),
|
||||
radial-gradient(1200px 700px at 50% 120%, rgba(90,120,160,0.08), transparent 60%),
|
||||
linear-gradient(180deg, var(--bg-2), var(--bg));
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
html, body { height: 100%; }
|
||||
body {
|
||||
font-family: "Hanken Grotesk", system-ui, sans-serif;
|
||||
background: var(--bg-grad); color: var(--text); font-size: 14px;
|
||||
-webkit-font-smoothing: antialiased; height: 100vh; overflow: hidden;
|
||||
transition: background .4s ease;
|
||||
}
|
||||
.app { display: grid; grid-template-rows: auto auto auto auto 1fr auto; height: 100vh; padding: 10px 16px 10px; gap: 10px; }
|
||||
|
||||
/* flavor switcher */
|
||||
.flavors { display: flex; align-items: center; gap: 10px; padding: 7px 12px; border-radius: 12px;
|
||||
background: var(--surface); border: 1px solid var(--border); backdrop-filter: blur(16px); }
|
||||
.flavors .lbl { font-family: "JetBrains Mono"; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); margin-right: 4px; }
|
||||
.fbtn { display: flex; align-items: center; gap: 8px; padding: 6px 13px; border-radius: 999px; cursor: pointer;
|
||||
border: 1px solid var(--border); background: var(--field); color: var(--muted); font-weight: 600; font-size: 12.5px; transition: all .15s; }
|
||||
.fbtn:hover { color: var(--text); transform: translateY(-1px); }
|
||||
.fbtn.on { color: var(--text); border-color: var(--accent); box-shadow: 0 0 14px var(--accent-glow); }
|
||||
.sw { width: 13px; height: 13px; border-radius: 50%; }
|
||||
.sw.teal { background: linear-gradient(135deg,#3ad4ce,#4aa8ff); }
|
||||
.sw.indigo { background: linear-gradient(135deg,#8f7bff,#5b8cff); }
|
||||
.sw.emerald { background: linear-gradient(135deg,#34e0a1,#2dd4bf); }
|
||||
.sw.ember { background: linear-gradient(135deg,#ff9e57,#ff6f91); }
|
||||
.sw.ice { background: linear-gradient(135deg,#82d4ff,#abc0db); }
|
||||
.flavors .hint { margin-left: auto; font-size: 12px; color: var(--faint); }
|
||||
|
||||
.menubar { display: flex; align-items: center; gap: 4px; }
|
||||
.brand { display: flex; align-items: center; gap: 10px; margin-right: 18px; }
|
||||
.brand .logo { width: 30px; height: 30px; border-radius: 9px;
|
||||
background: conic-gradient(from 200deg, var(--accent), var(--accent-2), var(--violet), var(--accent));
|
||||
box-shadow: 0 0 18px var(--accent-glow), inset 0 0 12px rgba(255,255,255,0.18); display: grid; place-items: center; }
|
||||
.brand .logo::after { content: ""; width: 13px; height: 13px; border-radius: 4px; background: var(--bg); }
|
||||
.brand .name { font-family: "Bricolage Grotesque"; font-weight: 800; font-size: 16px; letter-spacing: -0.02em; }
|
||||
.brand .ver { font-size: 11px; color: var(--faint); font-family: "JetBrains Mono"; margin-top: 3px; text-transform: capitalize; }
|
||||
.menu-item { padding: 6px 12px; border-radius: 8px; color: var(--muted); font-weight: 600; font-size: 13px; cursor: pointer; transition: all .15s; }
|
||||
.menu-item:hover { background: var(--surface); color: var(--text); }
|
||||
.menubar .spacer { flex: 1; }
|
||||
.conn-pill { display: flex; align-items: center; gap: 8px; padding: 6px 13px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); font-size: 12px; color: var(--muted); }
|
||||
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); }
|
||||
|
||||
.control { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 16px;
|
||||
background: var(--surface); border: 1px solid var(--border); backdrop-filter: blur(18px);
|
||||
box-shadow: 0 10px 30px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.05); }
|
||||
.ctrl-group { display: flex; gap: 7px; }
|
||||
.ic { width: 38px; height: 38px; border-radius: 11px; border: 1px solid var(--border); background: var(--field);
|
||||
display: grid; place-items: center; cursor: pointer; transition: all .15s; color: var(--muted); }
|
||||
.ic:hover { transform: translateY(-1px); border-color: var(--border-strong); color: var(--text); }
|
||||
.ic svg { width: 17px; height: 17px; }
|
||||
.ic.play { color: var(--green); } .ic.play:hover { box-shadow: 0 0 16px rgba(67,224,138,0.35); border-color: rgba(67,224,138,0.5); }
|
||||
.ic.pause { color: var(--amber); } .ic.stop { color: var(--red); } .ic.sched { color: var(--accent); }
|
||||
.sep { width: 1px; height: 26px; background: var(--border); margin: 0 2px; }
|
||||
.control .spacer { flex: 1; }
|
||||
.live-stats { display: flex; gap: 22px; padding-right: 6px; }
|
||||
.ls { text-align: right; }
|
||||
.ls .lbl { font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--faint); }
|
||||
.ls .val { font-family: "JetBrains Mono"; font-weight: 600; font-size: 16px; margin-top: 2px; }
|
||||
.ls .val .u { font-size: 11px; color: var(--muted); }
|
||||
.ls .val.accent { color: var(--accent); }
|
||||
|
||||
.tabs { display: flex; gap: 6px; }
|
||||
.tab { display: flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 11px 11px 0 0; cursor: pointer;
|
||||
color: var(--muted); font-weight: 600; font-size: 13px; border: 1px solid transparent; border-bottom: none; transition: all .15s; }
|
||||
.tab svg { width: 15px; height: 15px; opacity: 0.8; }
|
||||
.tab:hover { color: var(--text); background: var(--surface); }
|
||||
.tab.active { color: var(--text); background: var(--card); border-color: var(--border); position: relative; }
|
||||
.tab.active::after { content: ""; position: absolute; left: 14px; right: 14px; top: 0; height: 2px; border-radius: 2px;
|
||||
background: linear-gradient(90deg, var(--accent), var(--accent-2)); box-shadow: 0 0 12px var(--accent-glow); }
|
||||
.tab .count { font-family: "JetBrains Mono"; font-size: 11px; background: var(--field); padding: 1px 7px; border-radius: 999px; color: var(--muted); }
|
||||
|
||||
.panel { background: var(--card); border: 1px solid var(--border); border-radius: 0 14px 14px 14px;
|
||||
backdrop-filter: blur(20px); overflow: hidden; display: flex; flex-direction: column;
|
||||
box-shadow: 0 16px 44px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.04); }
|
||||
.thead { display: grid; grid-template-columns: minmax(0,1fr) 168px 96px 116px 130px 80px 168px 96px;
|
||||
padding: 11px 16px; border-bottom: 1px solid var(--border); font-size: 11px; font-weight: 700;
|
||||
text-transform: uppercase; letter-spacing: 0.06em; color: var(--faint); }
|
||||
.thead > div:not(:first-child) { text-align: center; }
|
||||
.tbody { overflow-y: auto; flex: 1; }
|
||||
.tbody::-webkit-scrollbar { width: 10px; }
|
||||
.tbody::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; }
|
||||
|
||||
.pkg { border-bottom: 1px solid rgba(86,124,178,0.1); }
|
||||
.pkg-row { display: grid; grid-template-columns: minmax(0,1fr) 168px 96px 116px 130px 80px 168px 96px;
|
||||
align-items: center; padding: 12px 16px; cursor: pointer; transition: background .15s; }
|
||||
.pkg-row:hover { background: rgba(127,170,220,0.06); }
|
||||
.pkg-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
|
||||
.chev { color: var(--faint); transition: transform .2s; flex-shrink: 0; }
|
||||
.pkg.open .chev { transform: rotate(90deg); }
|
||||
.pkg-icon { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0;
|
||||
background: linear-gradient(140deg, var(--accent-glow), transparent); border: 1px solid var(--border); }
|
||||
.pkg-icon svg { width: 15px; height: 15px; color: var(--accent); }
|
||||
.pkg-title { min-width: 0; }
|
||||
.pkg-title .t { font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
.pkg-title .s { font-size: 11px; color: var(--faint); margin-top: 1px; font-family: "JetBrains Mono"; }
|
||||
.cell { text-align: center; font-size: 12.5px; color: var(--muted); }
|
||||
.cell.mono { font-family: "JetBrains Mono"; }
|
||||
|
||||
.pbar { height: 22px; border-radius: 7px; background: var(--field); position: relative; overflow: hidden; border: 1px solid var(--border); }
|
||||
.pbar .fill { position: absolute; inset: 0; width: var(--p, 0%); border-radius: 6px;
|
||||
background: linear-gradient(90deg, var(--accent-2), var(--accent)); box-shadow: 0 0 14px var(--accent-glow); }
|
||||
.pbar .fill.ext { background: linear-gradient(90deg, #2fbf6e, var(--green)); box-shadow: 0 0 14px rgba(67,224,138,0.4); }
|
||||
.pbar .txt { position: absolute; inset: 0; display: grid; place-items: center; font-size: 11px; font-weight: 700;
|
||||
font-family: "JetBrains Mono"; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.6); z-index: 2; }
|
||||
|
||||
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; }
|
||||
.b-dl { background: color-mix(in srgb, var(--accent) 16%, transparent); color: color-mix(in srgb, var(--accent) 80%, white); }
|
||||
.b-ext { background: rgba(67,224,138,0.14); color: var(--green); }
|
||||
.b-done { background: rgba(67,224,138,0.12); color: var(--green); }
|
||||
.b-err { background: rgba(255,93,118,0.14); color: var(--red); }
|
||||
.b-queue { background: rgba(147,168,200,0.12); color: var(--muted); }
|
||||
.hoster { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
|
||||
.hoster .hd { width: 7px; height: 7px; border-radius: 2px; }
|
||||
.svc { font-size: 11.5px; color: var(--muted); }
|
||||
.prio-high { color: var(--amber); font-weight: 700; font-size: 11px; }
|
||||
|
||||
.items { background: rgba(6,12,24,0.45); display: none; }
|
||||
.pkg.open .items { display: block; }
|
||||
.item { display: grid; grid-template-columns: minmax(0,1fr) 168px 96px 116px 130px 80px 168px 96px;
|
||||
align-items: center; padding: 7px 16px; font-size: 12px; border-top: 1px solid rgba(86,124,178,0.07); }
|
||||
.item:hover { background: rgba(127,170,220,0.04); }
|
||||
.item-name { display: flex; align-items: center; gap: 9px; padding-left: 40px; min-width: 0; }
|
||||
.ldot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
|
||||
.ldot.on { background: var(--green); box-shadow: 0 0 8px var(--green); }
|
||||
.ldot.off { background: var(--red); box-shadow: 0 0 8px var(--red); }
|
||||
.item-name .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted); font-family: "JetBrains Mono"; font-size: 11.5px; }
|
||||
.mini { height: 6px; border-radius: 3px; background: var(--field); overflow: hidden; position: relative; }
|
||||
.mini .mf { position: absolute; inset: 0; width: var(--p,0%); background: linear-gradient(90deg, var(--accent-2), var(--accent)); }
|
||||
|
||||
.statusbar { display: flex; align-items: center; gap: 18px; padding: 8px 16px; border-radius: 12px;
|
||||
background: var(--surface); border: 1px solid var(--border); font-size: 12px; color: var(--muted); backdrop-filter: blur(14px); }
|
||||
.statusbar .sb-item { display: flex; align-items: center; gap: 7px; }
|
||||
.statusbar .spacer { flex: 1; }
|
||||
.statusbar b { color: var(--text); font-family: "JetBrains Mono"; font-weight: 600; }
|
||||
.qbar { width: 120px; height: 6px; border-radius: 3px; background: var(--field); overflow: hidden; }
|
||||
.qbar > div { height: 100%; width: 62%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="app">
|
||||
<!-- FLAVOR SWITCHER -->
|
||||
<div class="flavors">
|
||||
<span class="lbl">Aurora Flavor</span>
|
||||
<div class="fbtn" data-f="teal"><span class="sw teal"></span> Teal</div>
|
||||
<div class="fbtn" data-f="indigo"><span class="sw indigo"></span> Indigo</div>
|
||||
<div class="fbtn" data-f="emerald"><span class="sw emerald"></span> Emerald</div>
|
||||
<div class="fbtn on" data-f="ember"><span class="sw ember"></span> Ember</div>
|
||||
<div class="fbtn" data-f="ice"><span class="sw ice"></span> Ice</div>
|
||||
<span class="hint">Klick zum Wechseln · Tasten 1–5 · Pakete ausklappbar</span>
|
||||
</div>
|
||||
|
||||
<!-- MENU BAR -->
|
||||
<div class="menubar">
|
||||
<div class="brand">
|
||||
<div class="logo"></div>
|
||||
<div><div class="name">Debrid Downloader</div><div class="ver" id="verLabel">v1.7.156 · Aurora Ember</div></div>
|
||||
</div>
|
||||
<div class="menu-item">Datei</div>
|
||||
<div class="menu-item">Einstellungen</div>
|
||||
<div class="menu-item">Hilfe</div>
|
||||
<div class="spacer"></div>
|
||||
<div class="conn-pill"><span class="dot"></span> 4 Provider aktiv · Mega-Debrid bereit</div>
|
||||
</div>
|
||||
|
||||
<!-- CONTROL STRIP -->
|
||||
<div class="control">
|
||||
<div class="ctrl-group">
|
||||
<div class="ic play" title="Start"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg></div>
|
||||
<div class="ic pause" title="Pause"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M6 5h4v14H6zM14 5h4v14h-4z"/></svg></div>
|
||||
<div class="ic stop" title="Stop"><svg viewBox="0 0 24 24" fill="currentColor"><rect x="6" y="6" width="12" height="12" rx="2"/></svg></div>
|
||||
</div>
|
||||
<div class="sep"></div>
|
||||
<div class="ctrl-group">
|
||||
<div class="ic sched" title="Zeitplan"><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></div>
|
||||
<div class="ic" title="Hoch"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 19V5M5 12l7-7 7 7"/></svg></div>
|
||||
<div class="ic" title="Runter"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12l7 7 7-7"/></svg></div>
|
||||
</div>
|
||||
<div class="spacer"></div>
|
||||
<div class="live-stats">
|
||||
<div class="ls"><div class="lbl">Geschwindigkeit</div><div class="val accent">48.2<span class="u"> MB/s</span></div></div>
|
||||
<div class="ls"><div class="lbl">Verbleibend</div><div class="val">02:14<span class="u"> min</span></div></div>
|
||||
<div class="ls"><div class="lbl">Aktiv</div><div class="val">8<span class="u"> / 24</span></div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- TABS -->
|
||||
<div class="tabs">
|
||||
<div class="tab active"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 3v12m0 0l-4-4m4 4l4-4M5 21h14"/></svg> Downloads <span class="count">5</span></div>
|
||||
<div class="tab"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10 13a5 5 0 007 0l3-3a5 5 0 00-7-7l-1 1m-2 9a5 5 0 01-7 0 5 5 0 010-7l1-1"/></svg> Linksammler</div>
|
||||
<div class="tab"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.6 1.6 0 00.3 1.8M4.6 9a1.6 1.6 0 00-.3-1.8"/></svg> Einstellungen</div>
|
||||
<div class="tab"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 12a9 9 0 109-9 9 9 0 00-9 9zm9-5v5l3 2"/></svg> Verlauf</div>
|
||||
<div class="tab"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 20V10M10 20V4M16 20v-8M22 20H2"/></svg> Statistiken</div>
|
||||
</div>
|
||||
|
||||
<!-- TABLE -->
|
||||
<div class="panel">
|
||||
<div class="thead"><div>Name</div><div>Geladen / Größe</div><div>Fortschritt</div><div>Hoster</div><div>Service</div><div>Priorität</div><div>Status</div><div>Tempo</div></div>
|
||||
<div class="tbody">
|
||||
<div class="pkg open">
|
||||
<div class="pkg-row">
|
||||
<div class="pkg-name"><svg class="chev" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M9 6l6 6-6 6"/></svg><div class="pkg-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 7l9-4 9 4v10l-9 4-9-4z"/><path d="M3 7l9 4 9-4M12 21V11"/></svg></div><div class="pkg-title"><div class="t">Ugly.Americans.S02.COMPLETE.German.DL.720p.WEB-DL.h264-NERDS</div><div class="s">10 Dateien · 14.2 GB</div></div></div>
|
||||
<div class="cell mono">8.9 / 14.2 GB</div>
|
||||
<div class="cell"><div class="pbar"><div class="fill" style="--p:63%"></div><div class="txt">63%</div></div></div>
|
||||
<div class="cell"><span class="hoster"><span class="hd" style="background:#ff5722"></span>mega</span></div>
|
||||
<div class="cell"><span class="svc">Mega-Debrid</span></div>
|
||||
<div class="cell"><span class="prio-high">HOCH</span></div>
|
||||
<div class="cell"><span class="badge b-dl">↓ 6/10 läuft</span></div>
|
||||
<div class="cell mono" style="color:var(--accent)">48 MB/s</div>
|
||||
</div>
|
||||
<div class="items">
|
||||
<div class="item"><div class="item-name"><span class="ldot on"></span><span class="nm">…h264-NERDS.part1.rar</span></div><div class="cell mono">2.0 / 2.0 GB</div><div class="cell"><div class="mini"><div class="mf" style="--p:100%"></div></div></div><div class="cell">mega</div><div class="cell"></div><div class="cell"></div><div class="cell"><span class="badge b-done">✓ Fertig</span></div><div class="cell mono">—</div></div>
|
||||
<div class="item"><div class="item-name"><span class="ldot on"></span><span class="nm">…h264-NERDS.part2.rar</span></div><div class="cell mono">2.0 / 2.0 GB</div><div class="cell"><div class="mini"><div class="mf" style="--p:100%"></div></div></div><div class="cell">mega</div><div class="cell"></div><div class="cell"></div><div class="cell"><span class="badge b-done">✓ Fertig</span></div><div class="cell mono">—</div></div>
|
||||
<div class="item"><div class="item-name"><span class="ldot on"></span><span class="nm">…h264-NERDS.part3.rar</span></div><div class="cell mono">1.4 / 2.0 GB</div><div class="cell"><div class="mini"><div class="mf" style="--p:70%"></div></div></div><div class="cell">mega</div><div class="cell"></div><div class="cell"></div><div class="cell"><span class="badge b-dl">↓ 70%</span></div><div class="cell mono" style="color:var(--accent)">26 MB/s</div></div>
|
||||
<div class="item"><div class="item-name"><span class="ldot on"></span><span class="nm">…h264-NERDS.part4.rar</span></div><div class="cell mono">0.8 / 2.0 GB</div><div class="cell"><div class="mini"><div class="mf" style="--p:40%"></div></div></div><div class="cell">mega</div><div class="cell"></div><div class="cell"></div><div class="cell"><span class="badge b-dl">↓ 40%</span></div><div class="cell mono" style="color:var(--accent)">22 MB/s</div></div>
|
||||
<div class="item"><div class="item-name"><span class="ldot off"></span><span class="nm">…h264-NERDS.part5.rar</span></div><div class="cell mono">0 / 1.1 GB</div><div class="cell"><div class="mini"><div class="mf" style="--p:0%"></div></div></div><div class="cell">mega</div><div class="cell"></div><div class="cell"></div><div class="cell"><span class="badge b-queue">Wartet</span></div><div class="cell mono">—</div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pkg">
|
||||
<div class="pkg-row">
|
||||
<div class="pkg-name"><svg class="chev" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M9 6l6 6-6 6"/></svg><div class="pkg-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 7l9-4 9 4v10l-9 4-9-4z"/><path d="M3 7l9 4 9-4M12 21V11"/></svg></div><div class="pkg-title"><div class="t">The.Bear.S03.German.DL.1080p.WEB.h264-WvF</div><div class="s">8 Dateien · 11.6 GB</div></div></div>
|
||||
<div class="cell mono">11.6 / 11.6 GB</div>
|
||||
<div class="cell"><div class="pbar"><div class="fill ext" style="--p:82%"></div><div class="txt">Entpacken 82%</div></div></div>
|
||||
<div class="cell"><span class="hoster"><span class="hd" style="background:#22c55e"></span>rapidgator</span></div>
|
||||
<div class="cell"><span class="svc">Real-Debrid</span></div>
|
||||
<div class="cell"></div>
|
||||
<div class="cell"><span class="badge b-ext">⚙ Entpacken</span></div>
|
||||
<div class="cell mono">—</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pkg">
|
||||
<div class="pkg-row">
|
||||
<div class="pkg-name"><svg class="chev" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M9 6l6 6-6 6"/></svg><div class="pkg-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 7l9-4 9 4v10l-9 4-9-4z"/><path d="M3 7l9 4 9-4M12 21V11"/></svg></div><div class="pkg-title"><div class="t">Dune.Part.Two.2024.German.DL.2160p.UHD.BluRay.x265-NERDS</div><div class="s">1 Datei · 18.4 GB → Library</div></div></div>
|
||||
<div class="cell mono">18.4 / 18.4 GB</div>
|
||||
<div class="cell"><div class="pbar"><div class="fill ext" style="--p:100%"></div><div class="txt">100%</div></div></div>
|
||||
<div class="cell"><span class="hoster"><span class="hd" style="background:#3b82f6"></span>ddownload</span></div>
|
||||
<div class="cell"><span class="svc">AllDebrid</span></div>
|
||||
<div class="cell"></div>
|
||||
<div class="cell"><span class="badge b-done">✓ Abgeschlossen</span></div>
|
||||
<div class="cell mono">—</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pkg">
|
||||
<div class="pkg-row">
|
||||
<div class="pkg-name"><svg class="chev" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M9 6l6 6-6 6"/></svg><div class="pkg-icon" style="border-color:rgba(255,93,118,0.4)"><svg viewBox="0 0 24 24" fill="none" stroke="var(--red)" stroke-width="2"><path d="M3 7l9-4 9 4v10l-9 4-9-4z"/></svg></div><div class="pkg-title"><div class="t">Shogun.S01E05.German.DL.1080p.WEB.h264-EDITION</div><div class="s" style="color:var(--red)">Hoster nicht verfügbar · Link tot</div></div></div>
|
||||
<div class="cell mono">0 / 2.4 GB</div>
|
||||
<div class="cell"><div class="pbar"><div class="fill" style="--p:0%"></div><div class="txt" style="color:var(--red);text-shadow:none">Fehler</div></div></div>
|
||||
<div class="cell"><span class="hoster"><span class="hd" style="background:#a855f7"></span>uploaded</span></div>
|
||||
<div class="cell"><span class="svc">—</span></div>
|
||||
<div class="cell"></div>
|
||||
<div class="cell"><span class="badge b-err">✗ Fehlgeschlagen</span></div>
|
||||
<div class="cell mono">—</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pkg">
|
||||
<div class="pkg-row">
|
||||
<div class="pkg-name"><svg class="chev" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M9 6l6 6-6 6"/></svg><div class="pkg-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 7l9-4 9 4v10l-9 4-9-4z"/><path d="M3 7l9 4 9-4M12 21V11"/></svg></div><div class="pkg-title"><div class="t">Severance.S02.COMPLETE.German.DL.1080p.ATVP.WEB.h265-NERDS</div><div class="s">10 Dateien · 22.1 GB</div></div></div>
|
||||
<div class="cell mono">0 / 22.1 GB</div>
|
||||
<div class="cell"><div class="pbar"><div class="fill" style="--p:0%"></div><div class="txt" style="color:var(--faint);text-shadow:none">In Warteschlange</div></div></div>
|
||||
<div class="cell"><span class="hoster"><span class="hd" style="background:#ff5722"></span>mega</span></div>
|
||||
<div class="cell"><span class="svc">Mega-Debrid</span></div>
|
||||
<div class="cell"></div>
|
||||
<div class="cell"><span class="badge b-queue">Wartet</span></div>
|
||||
<div class="cell mono">—</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- STATUS BAR -->
|
||||
<div class="statusbar">
|
||||
<div class="sb-item"><span class="dot"></span> Läuft</div>
|
||||
<div class="sb-item">Queue: <b>5 Pakete</b> · <b>34 Dateien</b></div>
|
||||
<div class="sb-item">Heute geladen: <b>147 GB</b></div>
|
||||
<div class="spacer"></div>
|
||||
<div class="sb-item">Gesamt-Fortschritt <div class="qbar"><div></div></div> <b>62%</b></div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
const names = { teal:"Teal", indigo:"Indigo", emerald:"Emerald", ember:"Ember", ice:"Ice" };
|
||||
const order = ["teal","indigo","emerald","ember","ice"];
|
||||
function setFlavor(f) {
|
||||
document.documentElement.dataset.flavor = f;
|
||||
document.querySelectorAll('.fbtn').forEach(b => b.classList.toggle('on', b.dataset.f === f));
|
||||
document.getElementById('verLabel').textContent = "v1.7.156 · Aurora " + names[f];
|
||||
}
|
||||
document.querySelectorAll('.fbtn').forEach(b => b.addEventListener('click', () => setFlavor(b.dataset.f)));
|
||||
document.querySelectorAll('.pkg-row').forEach(r => r.addEventListener('click', () => r.parentElement.classList.toggle('open')));
|
||||
window.addEventListener('keydown', e => { const i = parseInt(e.key,10); if (i>=1 && i<=5) setFlavor(order[i-1]); });
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
345
design-mockups/aurora.html
Normal file
345
design-mockups/aurora.html
Normal file
@ -0,0 +1,345 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Aurora — 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=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,600;12..96,700;12..96,800&family=Hanken+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@500;600&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--bg: #060b18;
|
||||
--bg-2: #0a1326;
|
||||
--surface: rgba(18, 30, 54, 0.66);
|
||||
--surface-solid: #111e36;
|
||||
--card: rgba(22, 36, 64, 0.72);
|
||||
--field: #0a1426;
|
||||
--border: rgba(86, 124, 178, 0.22);
|
||||
--border-strong: rgba(96, 140, 200, 0.4);
|
||||
--text: #eaf1fb;
|
||||
--muted: #93a8c8;
|
||||
--faint: #6982a6;
|
||||
--accent: #3ad4ce;
|
||||
--accent-2: #4aa8ff;
|
||||
--accent-glow: rgba(58, 212, 206, 0.55);
|
||||
--green: #43e08a;
|
||||
--amber: #ffb13d;
|
||||
--red: #ff5d76;
|
||||
--violet: #9d7bff;
|
||||
}
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
html, body { height: 100%; }
|
||||
body {
|
||||
font-family: "Hanken Grotesk", system-ui, sans-serif;
|
||||
background:
|
||||
radial-gradient(900px 520px at 84% -8%, rgba(74, 168, 255, 0.16), transparent 60%),
|
||||
radial-gradient(820px 480px at 8% 0%, rgba(58, 212, 206, 0.13), transparent 55%),
|
||||
radial-gradient(1200px 700px at 50% 120%, rgba(157, 123, 255, 0.10), transparent 60%),
|
||||
linear-gradient(180deg, var(--bg-2), var(--bg));
|
||||
color: var(--text);
|
||||
font-size: 14px;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
.app { display: grid; grid-template-rows: auto auto auto 1fr auto; height: 100vh; padding: 12px 16px 10px; gap: 10px; }
|
||||
|
||||
/* Menu bar */
|
||||
.menubar { display: flex; align-items: center; gap: 4px; }
|
||||
.brand { display: flex; align-items: center; gap: 10px; margin-right: 18px; }
|
||||
.brand .logo {
|
||||
width: 30px; height: 30px; border-radius: 9px;
|
||||
background: conic-gradient(from 200deg, var(--accent), var(--accent-2), var(--violet), var(--accent));
|
||||
box-shadow: 0 0 18px var(--accent-glow), inset 0 0 12px rgba(255,255,255,0.18);
|
||||
display: grid; place-items: center;
|
||||
}
|
||||
.brand .logo::after { content: ""; width: 13px; height: 13px; border-radius: 4px; background: #06101f; }
|
||||
.brand .name { font-family: "Bricolage Grotesque"; font-weight: 800; font-size: 16px; letter-spacing: -0.02em; }
|
||||
.brand .ver { font-size: 11px; color: var(--faint); font-family: "JetBrains Mono"; margin-top: 3px; }
|
||||
.menu-item { padding: 6px 12px; border-radius: 8px; color: var(--muted); font-weight: 600; font-size: 13px; cursor: pointer; transition: all .15s; }
|
||||
.menu-item:hover { background: var(--surface); color: var(--text); }
|
||||
.menubar .spacer { flex: 1; }
|
||||
.conn-pill { display: flex; align-items: center; gap: 8px; padding: 6px 13px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); font-size: 12px; color: var(--muted); }
|
||||
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); }
|
||||
|
||||
/* Control strip */
|
||||
.control { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 16px;
|
||||
background: var(--surface); border: 1px solid var(--border); backdrop-filter: blur(18px);
|
||||
box-shadow: 0 10px 30px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.05); }
|
||||
.ctrl-group { display: flex; gap: 7px; }
|
||||
.ic { width: 38px; height: 38px; border-radius: 11px; border: 1px solid var(--border); background: var(--field);
|
||||
display: grid; place-items: center; cursor: pointer; transition: all .15s; color: var(--muted); }
|
||||
.ic:hover { transform: translateY(-1px); border-color: var(--border-strong); color: var(--text); }
|
||||
.ic svg { width: 17px; height: 17px; }
|
||||
.ic.play { color: var(--green); } .ic.play:hover { box-shadow: 0 0 16px rgba(67,224,138,0.35); border-color: rgba(67,224,138,0.5); }
|
||||
.ic.pause { color: var(--amber); }
|
||||
.ic.stop { color: var(--red); }
|
||||
.ic.sched { color: var(--accent); }
|
||||
.sep { width: 1px; height: 26px; background: var(--border); margin: 0 2px; }
|
||||
.control .spacer { flex: 1; }
|
||||
.live-stats { display: flex; gap: 22px; padding-right: 6px; }
|
||||
.ls { text-align: right; }
|
||||
.ls .lbl { font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--faint); }
|
||||
.ls .val { font-family: "JetBrains Mono"; font-weight: 600; font-size: 16px; margin-top: 2px; }
|
||||
.ls .val .u { font-size: 11px; color: var(--muted); }
|
||||
.ls .val.accent { color: var(--accent); }
|
||||
|
||||
/* Tabs */
|
||||
.tabs { display: flex; gap: 6px; }
|
||||
.tab { display: flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 11px 11px 0 0; cursor: pointer;
|
||||
color: var(--muted); font-weight: 600; font-size: 13px; border: 1px solid transparent; border-bottom: none; transition: all .15s; }
|
||||
.tab svg { width: 15px; height: 15px; opacity: 0.8; }
|
||||
.tab:hover { color: var(--text); background: var(--surface); }
|
||||
.tab.active { color: var(--text); background: var(--card);
|
||||
border-color: var(--border); position: relative; }
|
||||
.tab.active::after { content: ""; position: absolute; left: 14px; right: 14px; top: 0; height: 2px; border-radius: 2px;
|
||||
background: linear-gradient(90deg, var(--accent), var(--accent-2)); box-shadow: 0 0 12px var(--accent-glow); }
|
||||
.tab .count { font-family: "JetBrains Mono"; font-size: 11px; background: var(--field); padding: 1px 7px; border-radius: 999px; color: var(--muted); }
|
||||
|
||||
/* Table panel */
|
||||
.panel { background: var(--card); border: 1px solid var(--border); border-radius: 0 14px 14px 14px;
|
||||
backdrop-filter: blur(20px); overflow: hidden; display: flex; flex-direction: column;
|
||||
box-shadow: 0 16px 44px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.04); }
|
||||
.thead { display: grid; grid-template-columns: minmax(0,1fr) 168px 96px 116px 130px 80px 168px 96px;
|
||||
padding: 11px 16px; border-bottom: 1px solid var(--border); font-size: 11px; font-weight: 700;
|
||||
text-transform: uppercase; letter-spacing: 0.06em; color: var(--faint); }
|
||||
.thead > div:not(:first-child) { text-align: center; }
|
||||
.tbody { overflow-y: auto; flex: 1; }
|
||||
.tbody::-webkit-scrollbar { width: 10px; }
|
||||
.tbody::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; }
|
||||
|
||||
/* Package row */
|
||||
.pkg { border-bottom: 1px solid rgba(86,124,178,0.1); }
|
||||
.pkg-row { display: grid; grid-template-columns: minmax(0,1fr) 168px 96px 116px 130px 80px 168px 96px;
|
||||
align-items: center; padding: 12px 16px; cursor: pointer; transition: background .15s; }
|
||||
.pkg-row:hover { background: rgba(74,168,255,0.05); }
|
||||
.pkg-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
|
||||
.chev { color: var(--faint); transition: transform .2s; flex-shrink: 0; }
|
||||
.pkg.open .chev { transform: rotate(90deg); }
|
||||
.pkg-icon { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0;
|
||||
background: linear-gradient(140deg, rgba(74,168,255,0.18), rgba(58,212,206,0.12)); border: 1px solid var(--border); }
|
||||
.pkg-icon svg { width: 15px; height: 15px; color: var(--accent); }
|
||||
.pkg-title { min-width: 0; }
|
||||
.pkg-title .t { font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
.pkg-title .s { font-size: 11px; color: var(--faint); margin-top: 1px; font-family: "JetBrains Mono"; }
|
||||
.cell { text-align: center; font-size: 12.5px; color: var(--muted); }
|
||||
.cell.mono { font-family: "JetBrains Mono"; }
|
||||
|
||||
/* progress */
|
||||
.pbar { height: 22px; border-radius: 7px; background: var(--field); position: relative; overflow: hidden; border: 1px solid var(--border); }
|
||||
.pbar .fill { position: absolute; inset: 0; width: var(--p, 0%); border-radius: 6px;
|
||||
background: linear-gradient(90deg, var(--accent-2), var(--accent)); box-shadow: 0 0 14px var(--accent-glow); }
|
||||
.pbar .fill.ext { background: linear-gradient(90deg, #2fbf6e, var(--green)); box-shadow: 0 0 14px rgba(67,224,138,0.4); }
|
||||
.pbar .txt { position: absolute; inset: 0; display: grid; place-items: center; font-size: 11px; font-weight: 700;
|
||||
font-family: "JetBrains Mono"; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.6); z-index: 2; }
|
||||
.pct { font-family: "JetBrains Mono"; font-weight: 600; }
|
||||
|
||||
/* badges */
|
||||
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; }
|
||||
.b-dl { background: rgba(74,168,255,0.14); color: #8ec5ff; }
|
||||
.b-ext { background: rgba(67,224,138,0.14); color: var(--green); }
|
||||
.b-done { background: rgba(67,224,138,0.12); color: var(--green); }
|
||||
.b-err { background: rgba(255,93,118,0.14); color: var(--red); }
|
||||
.b-queue { background: rgba(147,168,200,0.12); color: var(--muted); }
|
||||
.hoster { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
|
||||
.hoster .hd { width: 7px; height: 7px; border-radius: 2px; }
|
||||
.svc { font-size: 11.5px; color: var(--muted); }
|
||||
.prio-high { color: var(--amber); font-weight: 700; font-size: 11px; }
|
||||
|
||||
/* items */
|
||||
.items { background: rgba(6,12,24,0.45); display: none; }
|
||||
.pkg.open .items { display: block; }
|
||||
.item { display: grid; grid-template-columns: minmax(0,1fr) 168px 96px 116px 130px 80px 168px 96px;
|
||||
align-items: center; padding: 7px 16px 7px 16px; font-size: 12px; border-top: 1px solid rgba(86,124,178,0.07); }
|
||||
.item:hover { background: rgba(74,168,255,0.04); }
|
||||
.item-name { display: flex; align-items: center; gap: 9px; padding-left: 40px; min-width: 0; }
|
||||
.ldot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
|
||||
.ldot.on { background: var(--green); box-shadow: 0 0 8px var(--green); }
|
||||
.ldot.off { background: var(--red); box-shadow: 0 0 8px var(--red); }
|
||||
.item-name .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted); font-family: "JetBrains Mono"; font-size: 11.5px; }
|
||||
.mini { height: 6px; border-radius: 3px; background: var(--field); overflow: hidden; position: relative; }
|
||||
.mini .mf { position: absolute; inset: 0; width: var(--p,0%); background: linear-gradient(90deg, var(--accent-2), var(--accent)); }
|
||||
|
||||
/* statusbar */
|
||||
.statusbar { display: flex; align-items: center; gap: 18px; padding: 8px 16px; border-radius: 12px;
|
||||
background: var(--surface); border: 1px solid var(--border); font-size: 12px; color: var(--muted); backdrop-filter: blur(14px); }
|
||||
.statusbar .sb-item { display: flex; align-items: center; gap: 7px; }
|
||||
.statusbar .spacer { flex: 1; }
|
||||
.statusbar b { color: var(--text); font-family: "JetBrains Mono"; font-weight: 600; }
|
||||
.qbar { width: 120px; height: 6px; border-radius: 3px; background: var(--field); overflow: hidden; }
|
||||
.qbar > div { height: 100%; width: 62%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="app">
|
||||
<!-- MENU BAR -->
|
||||
<div class="menubar">
|
||||
<div class="brand">
|
||||
<div class="logo"></div>
|
||||
<div>
|
||||
<div class="name">Debrid Downloader</div>
|
||||
<div class="ver">v1.7.156 · Aurora</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-item">Datei</div>
|
||||
<div class="menu-item">Einstellungen</div>
|
||||
<div class="menu-item">Hilfe</div>
|
||||
<div class="spacer"></div>
|
||||
<div class="conn-pill"><span class="dot"></span> 4 Provider aktiv · Mega-Debrid bereit</div>
|
||||
</div>
|
||||
|
||||
<!-- CONTROL STRIP -->
|
||||
<div class="control">
|
||||
<div class="ctrl-group">
|
||||
<div class="ic play" title="Start"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg></div>
|
||||
<div class="ic pause" title="Pause"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M6 5h4v14H6zM14 5h4v14h-4z"/></svg></div>
|
||||
<div class="ic stop" title="Stop"><svg viewBox="0 0 24 24" fill="currentColor"><rect x="6" y="6" width="12" height="12" rx="2"/></svg></div>
|
||||
</div>
|
||||
<div class="sep"></div>
|
||||
<div class="ctrl-group">
|
||||
<div class="ic sched" title="Zeitplan"><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></div>
|
||||
<div class="ic" title="Hoch"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 19V5M5 12l7-7 7 7"/></svg></div>
|
||||
<div class="ic" title="Runter"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12l7 7 7-7"/></svg></div>
|
||||
</div>
|
||||
<div class="spacer"></div>
|
||||
<div class="live-stats">
|
||||
<div class="ls"><div class="lbl">Geschwindigkeit</div><div class="val accent">48.2<span class="u"> MB/s</span></div></div>
|
||||
<div class="ls"><div class="lbl">Verbleibend</div><div class="val">02:14<span class="u"> min</span></div></div>
|
||||
<div class="ls"><div class="lbl">Aktiv</div><div class="val">8<span class="u"> / 24</span></div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- TABS -->
|
||||
<div class="tabs">
|
||||
<div class="tab active">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 3v12m0 0l-4-4m4 4l4-4M5 21h14"/></svg>
|
||||
Downloads <span class="count">5</span>
|
||||
</div>
|
||||
<div class="tab"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10 13a5 5 0 007 0l3-3a5 5 0 00-7-7l-1 1m-2 9a5 5 0 01-7 0 5 5 0 010-7l1-1"/></svg> Linksammler</div>
|
||||
<div class="tab"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19 12a7 7 0 00-.1-1.2l2-1.6-2-3.4-2.4 1a7 7 0 00-2-1.2l-.4-2.6h-4l-.4 2.6a7 7 0 00-2 1.2l-2.4-1-2 3.4 2 1.6a7 7 0 000 2.4l-2 1.6 2 3.4 2.4-1a7 7 0 002 1.2l.4 2.6h4l.4-2.6a7 7 0 002-1.2l2.4 1 2-3.4-2-1.6c.06-.4.1-.8.1-1.2z"/></svg> Einstellungen</div>
|
||||
<div class="tab"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 12a9 9 0 109-9 9 9 0 00-9 9zm9-5v5l3 2"/></svg> Verlauf</div>
|
||||
<div class="tab"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 20V10M10 20V4M16 20v-8M22 20H2"/></svg> Statistiken</div>
|
||||
</div>
|
||||
|
||||
<!-- TABLE -->
|
||||
<div class="panel">
|
||||
<div class="thead">
|
||||
<div>Name</div><div>Geladen / Größe</div><div>Fortschritt</div><div>Hoster</div><div>Service</div><div>Priorität</div><div>Status</div><div>Tempo</div>
|
||||
</div>
|
||||
<div class="tbody">
|
||||
|
||||
<!-- Package 1: downloading, open -->
|
||||
<div class="pkg open">
|
||||
<div class="pkg-row">
|
||||
<div class="pkg-name">
|
||||
<svg class="chev" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M9 6l6 6-6 6"/></svg>
|
||||
<div class="pkg-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 7l9-4 9 4v10l-9 4-9-4z"/><path d="M3 7l9 4 9-4M12 21V11"/></svg></div>
|
||||
<div class="pkg-title"><div class="t">Ugly.Americans.S02.COMPLETE.German.DL.720p.WEB-DL.h264-NERDS</div><div class="s">10 Dateien · 14.2 GB</div></div>
|
||||
</div>
|
||||
<div class="cell mono">8.9 / 14.2 GB</div>
|
||||
<div class="cell"><div class="pbar"><div class="fill" style="--p:63%"></div><div class="txt">63%</div></div></div>
|
||||
<div class="cell"><span class="hoster"><span class="hd" style="background:#ff5722"></span>mega</span></div>
|
||||
<div class="cell"><span class="svc">Mega-Debrid</span></div>
|
||||
<div class="cell"><span class="prio-high">HOCH</span></div>
|
||||
<div class="cell"><span class="badge b-dl">↓ 6/10 läuft</span></div>
|
||||
<div class="cell mono" style="color:var(--accent)">48 MB/s</div>
|
||||
</div>
|
||||
<div class="items">
|
||||
<div class="item"><div class="item-name"><span class="ldot on"></span><span class="nm">…h264-NERDS.part1.rar</span></div><div class="cell mono">2.0 / 2.0 GB</div><div class="cell"><div class="mini"><div class="mf" style="--p:100%"></div></div></div><div class="cell">mega</div><div class="cell"></div><div class="cell"></div><div class="cell"><span class="badge b-done">✓ Fertig</span></div><div class="cell mono">—</div></div>
|
||||
<div class="item"><div class="item-name"><span class="ldot on"></span><span class="nm">…h264-NERDS.part2.rar</span></div><div class="cell mono">2.0 / 2.0 GB</div><div class="cell"><div class="mini"><div class="mf" style="--p:100%"></div></div></div><div class="cell">mega</div><div class="cell"></div><div class="cell"></div><div class="cell"><span class="badge b-done">✓ Fertig</span></div><div class="cell mono">—</div></div>
|
||||
<div class="item"><div class="item-name"><span class="ldot on"></span><span class="nm">…h264-NERDS.part3.rar</span></div><div class="cell mono">1.4 / 2.0 GB</div><div class="cell"><div class="mini"><div class="mf" style="--p:70%"></div></div></div><div class="cell">mega</div><div class="cell"></div><div class="cell"></div><div class="cell"><span class="badge b-dl">↓ 70%</span></div><div class="cell mono" style="color:var(--accent)">26 MB/s</div></div>
|
||||
<div class="item"><div class="item-name"><span class="ldot on"></span><span class="nm">…h264-NERDS.part4.rar</span></div><div class="cell mono">0.8 / 2.0 GB</div><div class="cell"><div class="mini"><div class="mf" style="--p:40%"></div></div></div><div class="cell">mega</div><div class="cell"></div><div class="cell"></div><div class="cell"><span class="badge b-dl">↓ 40%</span></div><div class="cell mono" style="color:var(--accent)">22 MB/s</div></div>
|
||||
<div class="item"><div class="item-name"><span class="ldot off"></span><span class="nm">…h264-NERDS.part5.rar</span></div><div class="cell mono">0 / 1.1 GB</div><div class="cell"><div class="mini"><div class="mf" style="--p:0%"></div></div></div><div class="cell">mega</div><div class="cell"></div><div class="cell"></div><div class="cell"><span class="badge b-queue">Wartet</span></div><div class="cell mono">—</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Package 2: extracting -->
|
||||
<div class="pkg">
|
||||
<div class="pkg-row">
|
||||
<div class="pkg-name">
|
||||
<svg class="chev" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M9 6l6 6-6 6"/></svg>
|
||||
<div class="pkg-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 7l9-4 9 4v10l-9 4-9-4z"/><path d="M3 7l9 4 9-4M12 21V11"/></svg></div>
|
||||
<div class="pkg-title"><div class="t">The.Bear.S03.German.DL.1080p.WEB.h264-WvF</div><div class="s">8 Dateien · 11.6 GB</div></div>
|
||||
</div>
|
||||
<div class="cell mono">11.6 / 11.6 GB</div>
|
||||
<div class="cell"><div class="pbar"><div class="fill ext" style="--p:82%"></div><div class="txt">Entpacken 82%</div></div></div>
|
||||
<div class="cell"><span class="hoster"><span class="hd" style="background:#22c55e"></span>rapidgator</span></div>
|
||||
<div class="cell"><span class="svc">Real-Debrid</span></div>
|
||||
<div class="cell"></div>
|
||||
<div class="cell"><span class="badge b-ext">⚙ Entpacken</span></div>
|
||||
<div class="cell mono">—</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Package 3: completed -->
|
||||
<div class="pkg">
|
||||
<div class="pkg-row">
|
||||
<div class="pkg-name">
|
||||
<svg class="chev" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M9 6l6 6-6 6"/></svg>
|
||||
<div class="pkg-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 7l9-4 9 4v10l-9 4-9-4z"/><path d="M3 7l9 4 9-4M12 21V11"/></svg></div>
|
||||
<div class="pkg-title"><div class="t">Dune.Part.Two.2024.German.DL.2160p.UHD.BluRay.x265-NERDS</div><div class="s">1 Datei · 18.4 GB → Library</div></div>
|
||||
</div>
|
||||
<div class="cell mono">18.4 / 18.4 GB</div>
|
||||
<div class="cell"><div class="pbar"><div class="fill ext" style="--p:100%"></div><div class="txt">100%</div></div></div>
|
||||
<div class="cell"><span class="hoster"><span class="hd" style="background:#3b82f6"></span>ddownload</span></div>
|
||||
<div class="cell"><span class="svc">AllDebrid</span></div>
|
||||
<div class="cell"></div>
|
||||
<div class="cell"><span class="badge b-done">✓ Abgeschlossen</span></div>
|
||||
<div class="cell mono">—</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Package 4: error -->
|
||||
<div class="pkg">
|
||||
<div class="pkg-row">
|
||||
<div class="pkg-name">
|
||||
<svg class="chev" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M9 6l6 6-6 6"/></svg>
|
||||
<div class="pkg-icon" style="border-color:rgba(255,93,118,0.4)"><svg viewBox="0 0 24 24" fill="none" stroke="var(--red)" stroke-width="2"><path d="M3 7l9-4 9 4v10l-9 4-9-4z"/></svg></div>
|
||||
<div class="pkg-title"><div class="t">Shogun.S01E05.German.DL.1080p.WEB.h264-EDITION</div><div class="s" style="color:var(--red)">Hoster nicht verfügbar · Link tot</div></div>
|
||||
</div>
|
||||
<div class="cell mono">0 / 2.4 GB</div>
|
||||
<div class="cell"><div class="pbar"><div class="fill" style="--p:0%"></div><div class="txt" style="color:var(--red);text-shadow:none">Fehler</div></div></div>
|
||||
<div class="cell"><span class="hoster"><span class="hd" style="background:#a855f7"></span>uploaded</span></div>
|
||||
<div class="cell"><span class="svc">—</span></div>
|
||||
<div class="cell"></div>
|
||||
<div class="cell"><span class="badge b-err">✗ Fehlgeschlagen</span></div>
|
||||
<div class="cell mono">—</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Package 5: queued -->
|
||||
<div class="pkg">
|
||||
<div class="pkg-row">
|
||||
<div class="pkg-name">
|
||||
<svg class="chev" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M9 6l6 6-6 6"/></svg>
|
||||
<div class="pkg-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 7l9-4 9 4v10l-9 4-9-4z"/><path d="M3 7l9 4 9-4M12 21V11"/></svg></div>
|
||||
<div class="pkg-title"><div class="t">Severance.S02.COMPLETE.German.DL.1080p.ATVP.WEB.h265-NERDS</div><div class="s">10 Dateien · 22.1 GB</div></div>
|
||||
</div>
|
||||
<div class="cell mono">0 / 22.1 GB</div>
|
||||
<div class="cell"><div class="pbar"><div class="fill" style="--p:0%"></div><div class="txt" style="color:var(--faint);text-shadow:none">In Warteschlange</div></div></div>
|
||||
<div class="cell"><span class="hoster"><span class="hd" style="background:#ff5722"></span>mega</span></div>
|
||||
<div class="cell"><span class="svc">Mega-Debrid</span></div>
|
||||
<div class="cell"></div>
|
||||
<div class="cell"><span class="badge b-queue">Wartet</span></div>
|
||||
<div class="cell mono">—</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- STATUS BAR -->
|
||||
<div class="statusbar">
|
||||
<div class="sb-item"><span class="dot"></span> Läuft</div>
|
||||
<div class="sb-item">Queue: <b>5 Pakete</b> · <b>34 Dateien</b></div>
|
||||
<div class="sb-item">Heute geladen: <b>147 GB</b></div>
|
||||
<div class="spacer"></div>
|
||||
<div class="sb-item">Gesamt-Fortschritt <div class="qbar"><div></div></div> <b>62%</b></div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
document.querySelectorAll('.pkg-row').forEach(r => r.addEventListener('click', () => r.parentElement.classList.toggle('open')));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
297
design-mockups/command.html
Normal file
297
design-mockups/command.html
Normal file
@ -0,0 +1,297 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Command — 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=IBM+Plex+Mono:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--bg: #07090d;
|
||||
--panel: #0c0f15;
|
||||
--panel-2: #0f131b;
|
||||
--line: #1c2230;
|
||||
--line-bright: #2a3343;
|
||||
--text: #d4dae6;
|
||||
--muted: #7a8699;
|
||||
--faint: #515c6e;
|
||||
--green: #38e07b;
|
||||
--amber: #ffc14d;
|
||||
--red: #ff5c5c;
|
||||
--cyan: #45e0e0;
|
||||
--blue: #5a9dff;
|
||||
--violet: #b18bff;
|
||||
}
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body {
|
||||
font-family: "IBM Plex Sans", system-ui, sans-serif;
|
||||
background: var(--bg);
|
||||
background-image:
|
||||
linear-gradient(var(--line) 1px, transparent 1px),
|
||||
linear-gradient(90deg, var(--line) 1px, transparent 1px);
|
||||
background-size: 44px 44px;
|
||||
background-position: -1px -1px;
|
||||
color: var(--text);
|
||||
font-size: 13px;
|
||||
height: 100vh; overflow: hidden;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
.mono { font-family: "IBM Plex Mono", monospace; }
|
||||
.app { display: grid; grid-template-columns: 56px 1fr; height: 100vh; }
|
||||
|
||||
/* Left rail */
|
||||
.rail { background: var(--panel); border-right: 1px solid var(--line-bright); display: flex; flex-direction: column;
|
||||
align-items: center; padding: 12px 0; gap: 6px; }
|
||||
.rail .logo { width: 32px; height: 32px; border: 1px solid var(--green); color: var(--green); display: grid; place-items: center;
|
||||
font-family: "IBM Plex Mono"; font-weight: 700; font-size: 15px; margin-bottom: 14px; box-shadow: 0 0 12px rgba(56,224,123,0.3); }
|
||||
.rail .ri { width: 38px; height: 38px; display: grid; place-items: center; color: var(--faint); cursor: pointer; border-left: 2px solid transparent; }
|
||||
.rail .ri:hover { color: var(--text); background: var(--panel-2); }
|
||||
.rail .ri.active { color: var(--green); border-left-color: var(--green); background: var(--panel-2); }
|
||||
.rail .ri svg { width: 19px; height: 19px; }
|
||||
.rail .spacer { flex: 1; }
|
||||
|
||||
/* Main */
|
||||
.main { display: grid; grid-template-rows: auto auto 1fr auto; min-width: 0; }
|
||||
|
||||
/* Topbar */
|
||||
.topbar { display: flex; align-items: center; gap: 16px; padding: 0 16px; height: 46px; background: var(--panel);
|
||||
border-bottom: 1px solid var(--line-bright); }
|
||||
.topbar .title { font-family: "IBM Plex Mono"; font-weight: 700; font-size: 13px; letter-spacing: 0.04em; }
|
||||
.topbar .title .accent { color: var(--green); }
|
||||
.topbar .crumb { color: var(--faint); font-family: "IBM Plex Mono"; font-size: 12px; }
|
||||
.topbar .spacer { flex: 1; }
|
||||
.stat-chip { font-family: "IBM Plex Mono"; font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 7px; padding: 0 12px; border-left: 1px solid var(--line); height: 46px; line-height: 46px; }
|
||||
.stat-chip b { color: var(--text); }
|
||||
.stat-chip .k { color: var(--faint); }
|
||||
.led { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
|
||||
.led.g { background: var(--green); box-shadow: 0 0 8px var(--green); animation: blink 2s infinite; }
|
||||
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.5} }
|
||||
|
||||
/* Toolbar */
|
||||
.toolbar { display: flex; align-items: center; gap: 8px; padding: 8px 16px; background: var(--panel-2); border-bottom: 1px solid var(--line); }
|
||||
.btn { font-family: "IBM Plex Mono"; font-size: 12px; font-weight: 600; padding: 6px 12px; border: 1px solid var(--line-bright);
|
||||
background: var(--panel); color: var(--muted); cursor: pointer; display: flex; align-items: center; gap: 7px; transition: all .12s; }
|
||||
.btn:hover { color: var(--text); border-color: var(--faint); }
|
||||
.btn svg { width: 13px; height: 13px; }
|
||||
.btn.start { color: var(--green); border-color: rgba(56,224,123,0.4); }
|
||||
.btn.start:hover { background: rgba(56,224,123,0.08); }
|
||||
.btn.pause { color: var(--amber); }
|
||||
.btn.stop { color: var(--red); }
|
||||
.toolbar .sep { width: 1px; height: 22px; background: var(--line-bright); }
|
||||
.toolbar .spacer { flex: 1; }
|
||||
.search { font-family: "IBM Plex Mono"; font-size: 12px; background: var(--panel); border: 1px solid var(--line-bright); color: var(--text);
|
||||
padding: 6px 10px 6px 30px; width: 220px; }
|
||||
.search-wrap { position: relative; }
|
||||
.search-wrap svg { position: absolute; left: 9px; top: 8px; width: 14px; height: 14px; color: var(--faint); }
|
||||
|
||||
/* Table */
|
||||
.table-wrap { overflow: auto; background: var(--bg); }
|
||||
.table-wrap::-webkit-scrollbar { width: 12px; height: 12px; }
|
||||
.table-wrap::-webkit-scrollbar-thumb { background: var(--line-bright); border: 3px solid var(--bg); }
|
||||
table { width: 100%; border-collapse: collapse; }
|
||||
thead th { position: sticky; top: 0; background: var(--panel); z-index: 3; text-align: left; font-family: "IBM Plex Mono";
|
||||
font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--faint);
|
||||
padding: 9px 12px; border-bottom: 1px solid var(--line-bright); border-right: 1px solid var(--line); white-space: nowrap; }
|
||||
thead th.num { text-align: right; }
|
||||
tbody td { padding: 0; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); }
|
||||
.cell { padding: 8px 12px; }
|
||||
.num { text-align: right; }
|
||||
|
||||
.pkgrow { cursor: pointer; }
|
||||
.pkgrow:hover td { background: rgba(90,157,255,0.04); }
|
||||
.pkgrow td { background: var(--panel-2); }
|
||||
.pname { display: flex; align-items: center; gap: 9px; }
|
||||
.tw { color: var(--faint); font-family: "IBM Plex Mono"; font-size: 12px; width: 12px; }
|
||||
.pkg.open .tw::before { content: "▾"; } .tw::before { content: "▸"; }
|
||||
.ptype { color: var(--cyan); font-family: "IBM Plex Mono"; font-size: 12px; }
|
||||
.pname .nm { font-weight: 600; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 460px; }
|
||||
.sub { color: var(--faint); font-family: "IBM Plex Mono"; font-size: 10.5px; margin-top: 1px; }
|
||||
|
||||
/* progress bar - segmented terminal style */
|
||||
.seg { display: flex; gap: 2px; align-items: center; }
|
||||
.seg .blocks { display: flex; gap: 1.5px; }
|
||||
.seg .blk { width: 5px; height: 13px; background: var(--line-bright); }
|
||||
.seg .blk.on { background: var(--green); box-shadow: 0 0 4px rgba(56,224,123,0.5); }
|
||||
.seg .blk.dl { background: var(--cyan); box-shadow: 0 0 4px rgba(69,224,224,0.5); }
|
||||
.seg .p { font-family: "IBM Plex Mono"; font-size: 11px; color: var(--muted); margin-left: 6px; min-width: 32px; }
|
||||
|
||||
.tag { font-family: "IBM Plex Mono"; font-size: 11px; font-weight: 600; padding: 2px 7px; display: inline-flex; align-items: center; gap: 5px; }
|
||||
.t-dl { color: var(--cyan); background: rgba(69,224,224,0.1); border: 1px solid rgba(69,224,224,0.3); }
|
||||
.t-ext { color: var(--green); background: rgba(56,224,123,0.1); border: 1px solid rgba(56,224,123,0.3); }
|
||||
.t-done { color: var(--green); background: rgba(56,224,123,0.08); border: 1px solid rgba(56,224,123,0.25); }
|
||||
.t-err { color: var(--red); background: rgba(255,92,92,0.1); border: 1px solid rgba(255,92,92,0.35); }
|
||||
.t-q { color: var(--muted); border: 1px solid var(--line-bright); }
|
||||
.host { font-family: "IBM Plex Mono"; font-size: 11.5px; display: flex; align-items: center; gap: 6px; }
|
||||
.host .hd { width: 6px; height: 6px; }
|
||||
.prio { font-family: "IBM Plex Mono"; font-size: 10.5px; color: var(--amber); font-weight: 700; }
|
||||
.speed { font-family: "IBM Plex Mono"; font-size: 11.5px; }
|
||||
.speed.live { color: var(--cyan); }
|
||||
|
||||
.item td { background: var(--bg); }
|
||||
.pkg:not(.open) .item { display: none; }
|
||||
.iname { display: flex; align-items: center; gap: 8px; padding-left: 34px; }
|
||||
.ld { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
|
||||
.ld.on { background: var(--green); box-shadow: 0 0 6px var(--green); }
|
||||
.ld.off { background: var(--red); box-shadow: 0 0 6px var(--red); }
|
||||
.iname .nm { font-family: "IBM Plex Mono"; font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 420px; }
|
||||
|
||||
/* statusbar */
|
||||
.statusbar { display: flex; align-items: center; height: 30px; background: var(--panel); border-top: 1px solid var(--line-bright);
|
||||
font-family: "IBM Plex Mono"; font-size: 11px; color: var(--muted); }
|
||||
.statusbar .si { padding: 0 12px; height: 30px; line-height: 30px; border-right: 1px solid var(--line); display: flex; align-items: center; gap: 7px; }
|
||||
.statusbar b { color: var(--text); }
|
||||
.statusbar .spacer { flex: 1; }
|
||||
.statusbar .si.green { color: var(--green); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="app">
|
||||
<!-- LEFT RAIL -->
|
||||
<div class="rail">
|
||||
<div class="logo">D</div>
|
||||
<div class="ri active" title="Downloads"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 3v12m0 0l-4-4m4 4l4-4M5 21h14"/></svg></div>
|
||||
<div class="ri" title="Linksammler"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10 13a5 5 0 007 0l3-3a5 5 0 00-7-7l-1 1m-2 9a5 5 0 01-7 0 5 5 0 010-7l1-1"/></svg></div>
|
||||
<div class="ri" title="Einstellungen"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.6 1.6 0 00.3 1.8l.1.1a2 2 0 11-2.8 2.8l-.1-.1a1.6 1.6 0 00-2.7 1.1V21a2 2 0 01-4 0v-.1A1.6 1.6 0 007 19.4a1.6 1.6 0 00-1.8.3l-.1.1a2 2 0 11-2.8-2.8l.1-.1a1.6 1.6 0 00-1.1-2.7H1a2 2 0 010-4h.1A1.6 1.6 0 002.6 7a1.6 1.6 0 00-.3-1.8l-.1-.1a2 2 0 112.8-2.8l.1.1a1.6 1.6 0 001.8.3H7a1.6 1.6 0 001-1.5V1a2 2 0 014 0v.1a1.6 1.6 0 001 1.5 1.6 1.6 0 001.8-.3l.1-.1a2 2 0 112.8 2.8l-.1.1a1.6 1.6 0 00-.3 1.8V7a1.6 1.6 0 001.5 1H23a2 2 0 010 4h-.1a1.6 1.6 0 00-1.5 1z"/></svg></div>
|
||||
<div class="ri" title="Verlauf"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 12a9 9 0 109-9 9 9 0 00-9 9zm9-5v5l3 2"/></svg></div>
|
||||
<div class="ri" title="Statistiken"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 20V10M10 20V4M16 20v-8M22 20H2"/></svg></div>
|
||||
<div class="spacer"></div>
|
||||
<div class="ri" title="Hilfe"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="9"/><path d="M9.5 9a2.5 2.5 0 015 0c0 2-2.5 2-2.5 4M12 17h.01"/></svg></div>
|
||||
</div>
|
||||
|
||||
<div class="main">
|
||||
<!-- TOPBAR -->
|
||||
<div class="topbar">
|
||||
<div class="title"><span class="accent">rdd</span> ::downloads</div>
|
||||
<div class="crumb">~/queue · 5 pkg</div>
|
||||
<div class="spacer"></div>
|
||||
<div class="stat-chip"><span class="k">DL</span> <b class="mono" style="color:var(--cyan)">48.2 MB/s</b></div>
|
||||
<div class="stat-chip"><span class="k">ETA</span> <b>02:14</b></div>
|
||||
<div class="stat-chip"><span class="k">SLOTS</span> <b>8/24</b></div>
|
||||
<div class="stat-chip"><span class="led g"></span> running</div>
|
||||
</div>
|
||||
|
||||
<!-- TOOLBAR -->
|
||||
<div class="toolbar">
|
||||
<div class="btn start"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg> START</div>
|
||||
<div class="btn pause"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M6 5h4v14H6zM14 5h4v14h-4z"/></svg> PAUSE</div>
|
||||
<div class="btn stop"><svg viewBox="0 0 24 24" fill="currentColor"><rect x="6" y="6" width="12" height="12"/></svg> STOP</div>
|
||||
<div class="sep"></div>
|
||||
<div class="btn"><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> SCHED</div>
|
||||
<div class="btn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 19V5M5 12l7-7 7 7"/></svg></div>
|
||||
<div class="btn"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12l7 7 7-7"/></svg></div>
|
||||
<div class="spacer"></div>
|
||||
<div class="search-wrap"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4-4"/></svg><input class="search mono" placeholder="filter pakete…"></div>
|
||||
</div>
|
||||
|
||||
<!-- TABLE -->
|
||||
<div class="table-wrap">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>NAME</th>
|
||||
<th class="num">GELADEN/GRÖSSE</th>
|
||||
<th>FORTSCHRITT</th>
|
||||
<th>HOSTER</th>
|
||||
<th>SERVICE</th>
|
||||
<th>PRIO</th>
|
||||
<th>STATUS</th>
|
||||
<th class="num">TEMPO</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<!-- pkg1 open -->
|
||||
<tbody class="pkg open">
|
||||
<tr class="pkgrow">
|
||||
<td><div class="cell pname"><span class="tw"></span><span class="ptype">[S]</span><div><div class="nm">Ugly.Americans.S02.COMPLETE.German.DL.720p.WEB-DL.h264-NERDS</div><div class="sub">10 files · 14.2 GB</div></div></div></td>
|
||||
<td><div class="cell num mono">8.9/14.2 GB</div></td>
|
||||
<td><div class="cell seg"><div class="blocks"><span class="blk on"></span><span class="blk on"></span><span class="blk on"></span><span class="blk on"></span><span class="blk on"></span><span class="blk on"></span><span class="blk dl"></span><span class="blk"></span><span class="blk"></span><span class="blk"></span></div><span class="p">63%</span></div></td>
|
||||
<td><div class="cell host"><span class="hd" style="background:#ff5722"></span>mega</div></td>
|
||||
<td><div class="cell mono" style="font-size:11.5px;color:var(--muted)">Mega-Debrid</div></td>
|
||||
<td><div class="cell prio">HIGH</div></td>
|
||||
<td><div class="cell"><span class="tag t-dl">● 6/10 DL</span></div></td>
|
||||
<td><div class="cell num speed live">48 MB/s</div></td>
|
||||
</tr>
|
||||
<tr class="item"><td><div class="cell iname"><span class="ld on"></span><span class="nm">…NERDS.part1.rar</span></div></td><td><div class="cell num mono">2.0/2.0</div></td><td><div class="cell seg"><div class="blocks"><span class="blk on"></span><span class="blk on"></span><span class="blk on"></span><span class="blk on"></span><span class="blk on"></span><span class="blk on"></span><span class="blk on"></span><span class="blk on"></span><span class="blk on"></span><span class="blk on"></span></div><span class="p">100%</span></div></td><td><div class="cell host">mega</div></td><td><div class="cell"></div></td><td><div class="cell"></div></td><td><div class="cell"><span class="tag t-done">✓ ok</span></div></td><td><div class="cell num speed">—</div></td></tr>
|
||||
<tr class="item"><td><div class="cell iname"><span class="ld on"></span><span class="nm">…NERDS.part2.rar</span></div></td><td><div class="cell num mono">2.0/2.0</div></td><td><div class="cell seg"><div class="blocks"><span class="blk on"></span><span class="blk on"></span><span class="blk on"></span><span class="blk on"></span><span class="blk on"></span><span class="blk on"></span><span class="blk on"></span><span class="blk on"></span><span class="blk on"></span><span class="blk on"></span></div><span class="p">100%</span></div></td><td><div class="cell host">mega</div></td><td><div class="cell"></div></td><td><div class="cell"></div></td><td><div class="cell"><span class="tag t-done">✓ ok</span></div></td><td><div class="cell num speed">—</div></td></tr>
|
||||
<tr class="item"><td><div class="cell iname"><span class="ld on"></span><span class="nm">…NERDS.part3.rar</span></div></td><td><div class="cell num mono">1.4/2.0</div></td><td><div class="cell seg"><div class="blocks"><span class="blk dl"></span><span class="blk dl"></span><span class="blk dl"></span><span class="blk dl"></span><span class="blk dl"></span><span class="blk dl"></span><span class="blk dl"></span><span class="blk"></span><span class="blk"></span><span class="blk"></span></div><span class="p">70%</span></div></td><td><div class="cell host">mega</div></td><td><div class="cell"></div></td><td><div class="cell"></div></td><td><div class="cell"><span class="tag t-dl">● DL</span></div></td><td><div class="cell num speed live">26 MB/s</div></td></tr>
|
||||
<tr class="item"><td><div class="cell iname"><span class="ld on"></span><span class="nm">…NERDS.part4.rar</span></div></td><td><div class="cell num mono">0.8/2.0</div></td><td><div class="cell seg"><div class="blocks"><span class="blk dl"></span><span class="blk dl"></span><span class="blk dl"></span><span class="blk dl"></span><span class="blk"></span><span class="blk"></span><span class="blk"></span><span class="blk"></span><span class="blk"></span><span class="blk"></span></div><span class="p">40%</span></div></td><td><div class="cell host">mega</div></td><td><div class="cell"></div></td><td><div class="cell"></div></td><td><div class="cell"><span class="tag t-dl">● DL</span></div></td><td><div class="cell num speed live">22 MB/s</div></td></tr>
|
||||
<tr class="item"><td><div class="cell iname"><span class="ld off"></span><span class="nm">…NERDS.part5.rar</span></div></td><td><div class="cell num mono">0/1.1</div></td><td><div class="cell seg"><div class="blocks"><span class="blk"></span><span class="blk"></span><span class="blk"></span><span class="blk"></span><span class="blk"></span><span class="blk"></span><span class="blk"></span><span class="blk"></span><span class="blk"></span><span class="blk"></span></div><span class="p">0%</span></div></td><td><div class="cell host">mega</div></td><td><div class="cell"></div></td><td><div class="cell"></div></td><td><div class="cell"><span class="tag t-q">queued</span></div></td><td><div class="cell num speed">—</div></td></tr>
|
||||
</tbody>
|
||||
|
||||
<!-- pkg2 extracting -->
|
||||
<tbody class="pkg">
|
||||
<tr class="pkgrow">
|
||||
<td><div class="cell pname"><span class="tw"></span><span class="ptype">[S]</span><div><div class="nm">The.Bear.S03.German.DL.1080p.WEB.h264-WvF</div><div class="sub">8 files · 11.6 GB</div></div></div></td>
|
||||
<td><div class="cell num mono">11.6/11.6 GB</div></td>
|
||||
<td><div class="cell seg"><div class="blocks"><span class="blk on"></span><span class="blk on"></span><span class="blk on"></span><span class="blk on"></span><span class="blk on"></span><span class="blk on"></span><span class="blk on"></span><span class="blk on"></span><span class="blk"></span><span class="blk"></span></div><span class="p" style="color:var(--green)">EXT 82%</span></div></td>
|
||||
<td><div class="cell host"><span class="hd" style="background:#22c55e"></span>rapidgator</div></td>
|
||||
<td><div class="cell mono" style="font-size:11.5px;color:var(--muted)">Real-Debrid</div></td>
|
||||
<td><div class="cell"></div></td>
|
||||
<td><div class="cell"><span class="tag t-ext">⚙ entpacken</span></div></td>
|
||||
<td><div class="cell num speed">—</div></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
<!-- pkg3 done -->
|
||||
<tbody class="pkg">
|
||||
<tr class="pkgrow">
|
||||
<td><div class="cell pname"><span class="tw"></span><span class="ptype">[M]</span><div><div class="nm">Dune.Part.Two.2024.German.DL.2160p.UHD.BluRay.x265-NERDS</div><div class="sub">1 file · 18.4 GB → library</div></div></div></td>
|
||||
<td><div class="cell num mono">18.4/18.4 GB</div></td>
|
||||
<td><div class="cell seg"><div class="blocks"><span class="blk on"></span><span class="blk on"></span><span class="blk on"></span><span class="blk on"></span><span class="blk on"></span><span class="blk on"></span><span class="blk on"></span><span class="blk on"></span><span class="blk on"></span><span class="blk on"></span></div><span class="p" style="color:var(--green)">100%</span></div></td>
|
||||
<td><div class="cell host"><span class="hd" style="background:#3b82f6"></span>ddownload</div></td>
|
||||
<td><div class="cell mono" style="font-size:11.5px;color:var(--muted)">AllDebrid</div></td>
|
||||
<td><div class="cell"></div></td>
|
||||
<td><div class="cell"><span class="tag t-done">✓ done</span></div></td>
|
||||
<td><div class="cell num speed">—</div></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
<!-- pkg4 error -->
|
||||
<tbody class="pkg">
|
||||
<tr class="pkgrow">
|
||||
<td><div class="cell pname"><span class="tw"></span><span class="ptype" style="color:var(--red)">[!]</span><div><div class="nm">Shogun.S01E05.German.DL.1080p.WEB.h264-EDITION</div><div class="sub" style="color:var(--red)">hoster_unavailable · link tot</div></div></div></td>
|
||||
<td><div class="cell num mono">0/2.4 GB</div></td>
|
||||
<td><div class="cell seg"><div class="blocks"><span class="blk" style="background:rgba(255,92,92,0.25)"></span><span class="blk" style="background:rgba(255,92,92,0.25)"></span><span class="blk" style="background:rgba(255,92,92,0.25)"></span><span class="blk" style="background:rgba(255,92,92,0.25)"></span><span class="blk" style="background:rgba(255,92,92,0.25)"></span><span class="blk" style="background:rgba(255,92,92,0.25)"></span><span class="blk" style="background:rgba(255,92,92,0.25)"></span><span class="blk" style="background:rgba(255,92,92,0.25)"></span><span class="blk" style="background:rgba(255,92,92,0.25)"></span><span class="blk" style="background:rgba(255,92,92,0.25)"></span></div><span class="p" style="color:var(--red)">ERR</span></div></td>
|
||||
<td><div class="cell host"><span class="hd" style="background:#a855f7"></span>uploaded</div></td>
|
||||
<td><div class="cell mono" style="font-size:11.5px;color:var(--faint)">—</div></td>
|
||||
<td><div class="cell"></div></td>
|
||||
<td><div class="cell"><span class="tag t-err">✗ failed</span></div></td>
|
||||
<td><div class="cell num speed">—</div></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
<!-- pkg5 queued -->
|
||||
<tbody class="pkg">
|
||||
<tr class="pkgrow">
|
||||
<td><div class="cell pname"><span class="tw"></span><span class="ptype">[S]</span><div><div class="nm">Severance.S02.COMPLETE.German.DL.1080p.ATVP.WEB.h265-NERDS</div><div class="sub">10 files · 22.1 GB</div></div></div></td>
|
||||
<td><div class="cell num mono">0/22.1 GB</div></td>
|
||||
<td><div class="cell seg"><div class="blocks"><span class="blk"></span><span class="blk"></span><span class="blk"></span><span class="blk"></span><span class="blk"></span><span class="blk"></span><span class="blk"></span><span class="blk"></span><span class="blk"></span><span class="blk"></span></div><span class="p">0%</span></div></td>
|
||||
<td><div class="cell host"><span class="hd" style="background:#ff5722"></span>mega</div></td>
|
||||
<td><div class="cell mono" style="font-size:11.5px;color:var(--muted)">Mega-Debrid</div></td>
|
||||
<td><div class="cell"></div></td>
|
||||
<td><div class="cell"><span class="tag t-q">queued</span></div></td>
|
||||
<td><div class="cell num speed">—</div></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- STATUSBAR -->
|
||||
<div class="statusbar">
|
||||
<div class="si green"><span class="led g"></span> RUNNING</div>
|
||||
<div class="si">queue: <b>5</b> pkg / <b>34</b> files</div>
|
||||
<div class="si">today: <b>147 GB</b></div>
|
||||
<div class="si">disk: <b>1.54 TB</b> free</div>
|
||||
<div class="spacer"></div>
|
||||
<div class="si">total <b>62%</b></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
document.querySelectorAll('.pkgrow').forEach(r => r.addEventListener('click', () => r.closest('.pkg').classList.toggle('open')));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
289
design-mockups/forge.html
Normal file
289
design-mockups/forge.html
Normal file
@ -0,0 +1,289 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Forge — 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=Archivo:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
/* FORGE — warmes, ehrliches Werkzeug. Keine Glas/Glow/Gradient-Tropes.
|
||||
Flache opake Flächen, präzise 1px-Linien, eine Amber-Signalfarbe. */
|
||||
:root {
|
||||
--bg: #141210;
|
||||
--panel: #1a1713;
|
||||
--row: #1e1a16;
|
||||
--row-alt: #211d18;
|
||||
--sunk: #100e0b; /* recessed: tracks, fields */
|
||||
--line: #322c23; /* hairline */
|
||||
--line-2: #453c30;
|
||||
--line-strong: #574b3b;
|
||||
--text: #ece3d3;
|
||||
--muted: #9d907d;
|
||||
--faint: #6c6253;
|
||||
--amber: #e8973a; /* signal */
|
||||
--amber-deep: #c97c24;
|
||||
--amber-ink: #1a1206; /* text on amber */
|
||||
--green: #84a85f; /* muted sage = done */
|
||||
--red: #cf5e47; /* terracotta = error */
|
||||
--steel: #6f93a3; /* sparingly = info/extract alt */
|
||||
}
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
html, body { height: 100%; }
|
||||
body {
|
||||
font-family: "Archivo", system-ui, sans-serif;
|
||||
background: var(--bg); color: var(--text); font-size: 13.5px;
|
||||
-webkit-font-smoothing: antialiased; height: 100vh; overflow: hidden;
|
||||
}
|
||||
.mono { font-family: "JetBrains Mono", monospace; }
|
||||
.lbl { font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; }
|
||||
.app { display: grid; grid-template-rows: auto auto auto 1fr auto; height: 100vh; }
|
||||
|
||||
/* ── Menu bar ── */
|
||||
.menubar { display: flex; align-items: center; height: 46px; padding: 0 16px; background: var(--panel); border-bottom: 1px solid var(--line); }
|
||||
.brand { display: flex; align-items: center; gap: 11px; margin-right: 22px; }
|
||||
.mark { width: 30px; height: 30px; border: 2px solid var(--amber); display: grid; place-items: center; }
|
||||
.mark svg { width: 16px; height: 16px; color: var(--amber); }
|
||||
.brand .nm { font-weight: 800; font-size: 15px; letter-spacing: 0.02em; }
|
||||
.brand .nm .accent { color: var(--amber); }
|
||||
.menu-item { padding: 7px 13px; color: var(--muted); font-weight: 600; font-size: 13px; cursor: pointer; }
|
||||
.menu-item:hover { color: var(--text); }
|
||||
.menubar .spacer { flex: 1; }
|
||||
.conn { display: flex; align-items: center; gap: 9px; font-size: 12px; color: var(--muted); font-weight: 500; }
|
||||
.conn .sq { width: 8px; height: 8px; background: var(--green); }
|
||||
|
||||
/* ── Control strip ── */
|
||||
.control { display: flex; align-items: center; gap: 14px; height: 56px; padding: 0 16px; background: var(--bg); border-bottom: 1px solid var(--line); }
|
||||
.grp { display: flex; gap: 0; border: 1px solid var(--line-strong); }
|
||||
.grp .ic { width: 40px; height: 38px; display: grid; place-items: center; cursor: pointer; color: var(--muted); background: var(--panel); border-right: 1px solid var(--line-strong); }
|
||||
.grp .ic:last-child { border-right: none; }
|
||||
.grp .ic:hover { background: var(--row-alt); color: var(--text); }
|
||||
.grp .ic svg { width: 16px; height: 16px; }
|
||||
.grp .ic.play { background: var(--amber); color: var(--amber-ink); }
|
||||
.grp .ic.play:hover { background: var(--amber-deep); }
|
||||
.grp .ic.pause { color: var(--amber); } .grp .ic.stop { color: var(--red); }
|
||||
.control .spacer { flex: 1; }
|
||||
.gauges { display: flex; }
|
||||
.gauge { padding: 0 18px; border-left: 1px solid var(--line); text-align: right; }
|
||||
.gauge .g-l { font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); font-weight: 700; }
|
||||
.gauge .g-v { font-family: "JetBrains Mono"; font-weight: 700; font-size: 17px; margin-top: 1px; }
|
||||
.gauge .g-v .u { font-size: 11px; color: var(--muted); font-weight: 500; }
|
||||
.gauge .g-v.amber { color: var(--amber); }
|
||||
|
||||
/* ── Tabs ── */
|
||||
.tabs { display: flex; align-items: stretch; height: 40px; padding: 0 16px; background: var(--panel); border-bottom: 1px solid var(--line); }
|
||||
.tab { display: flex; align-items: center; gap: 8px; padding: 0 17px; cursor: pointer; color: var(--faint);
|
||||
font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; border-bottom: 2px solid transparent; }
|
||||
.tab svg { width: 14px; height: 14px; }
|
||||
.tab:hover { color: var(--muted); }
|
||||
.tab.active { color: var(--text); border-bottom-color: var(--amber); }
|
||||
.tab .ct { font-family: "JetBrains Mono"; font-size: 11px; color: var(--amber); letter-spacing: 0; }
|
||||
|
||||
/* ── Table ── */
|
||||
.panel { background: var(--bg); overflow: hidden; display: flex; flex-direction: column; }
|
||||
.thead { display: grid; grid-template-columns: minmax(0,1fr) 158px 132px 118px 128px 78px 158px 92px;
|
||||
height: 32px; align-items: center; padding: 0 16px; background: var(--panel); border-bottom: 1px solid var(--line-strong);
|
||||
font-size: 10px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
|
||||
.thead > div:not(:first-child) { text-align: center; }
|
||||
.tbody { overflow-y: auto; flex: 1; }
|
||||
.tbody::-webkit-scrollbar { width: 12px; }
|
||||
.tbody::-webkit-scrollbar-thumb { background: var(--line-strong); border: 4px solid var(--bg); }
|
||||
.tbody::-webkit-scrollbar-track { background: var(--bg); }
|
||||
|
||||
.pkg { border-bottom: 1px solid var(--line); }
|
||||
.prow { display: grid; grid-template-columns: minmax(0,1fr) 158px 132px 118px 128px 78px 158px 92px;
|
||||
align-items: center; height: 52px; padding: 0 16px; cursor: pointer; }
|
||||
.prow:hover { background: var(--row); }
|
||||
.pkg.open .prow { background: var(--row); }
|
||||
.pn { display: flex; align-items: center; gap: 11px; min-width: 0; }
|
||||
.tw { width: 14px; color: var(--faint); font-family: "JetBrains Mono"; font-size: 13px; flex-shrink: 0; text-align: center; }
|
||||
.pkg.open .tw::before { content: "–"; } .tw::before { content: "+"; }
|
||||
.pic { width: 28px; height: 28px; border: 1px solid var(--line-strong); display: grid; place-items: center; flex-shrink: 0; color: var(--amber); }
|
||||
.pic svg { width: 14px; height: 14px; }
|
||||
.pic.err { border-color: var(--red); color: var(--red); }
|
||||
.ptt { min-width: 0; }
|
||||
.ptt .t { font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
.ptt .s { font-family: "JetBrains Mono"; font-size: 10.5px; color: var(--faint); margin-top: 2px; }
|
||||
.ptt .s.err { color: var(--red); }
|
||||
.c { text-align: center; font-size: 12.5px; color: var(--muted); }
|
||||
.c.mono { font-family: "JetBrains Mono"; font-size: 11.5px; }
|
||||
.c.amber { color: var(--amber); }
|
||||
|
||||
/* progress: solid, recessed, crisp. no gradient/glow. */
|
||||
.bar { height: 18px; background: var(--sunk); border: 1px solid var(--line); position: relative; overflow: hidden; }
|
||||
.bar .fill { position: absolute; left: 0; top: 0; bottom: 0; width: var(--p,0%); background: var(--amber); }
|
||||
.bar .fill.gr { background: var(--green); }
|
||||
.bar .fill.rd { background: var(--red); }
|
||||
.bar .tx { position: absolute; inset: 0; display: grid; place-items: center; font-family: "JetBrains Mono"; font-size: 10.5px; font-weight: 600; color: var(--text); mix-blend-mode: difference; }
|
||||
|
||||
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; font-family: "JetBrains Mono"; font-size: 10.5px; font-weight: 600; border: 1px solid; text-transform: uppercase; letter-spacing: 0.04em; }
|
||||
.t-dl { color: var(--amber); border-color: var(--amber-deep); }
|
||||
.t-ext { color: var(--green); border-color: #5e7a44; }
|
||||
.t-done { color: var(--green); border-color: #4a6135; }
|
||||
.t-err { color: var(--red); border-color: #93412f; }
|
||||
.t-q { color: var(--faint); border-color: var(--line-strong); }
|
||||
.host { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; }
|
||||
.host .hd { width: 7px; height: 7px; }
|
||||
.prio { font-family: "JetBrains Mono"; font-size: 10px; font-weight: 700; color: var(--amber); letter-spacing: 0.05em; }
|
||||
|
||||
.items { display: none; background: var(--sunk); }
|
||||
.pkg.open .items { display: block; }
|
||||
.item { display: grid; grid-template-columns: minmax(0,1fr) 158px 132px 118px 128px 78px 158px 92px; align-items: center; height: 34px; padding: 0 16px; border-top: 1px solid var(--line); }
|
||||
.item:hover { background: var(--row); }
|
||||
.in { display: flex; align-items: center; gap: 10px; padding-left: 39px; min-width: 0; }
|
||||
.ld { width: 7px; height: 7px; flex-shrink: 0; }
|
||||
.ld.on { background: var(--green); } .ld.off { background: var(--red); }
|
||||
.in .nm { font-family: "JetBrains Mono"; font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
.minibar { height: 5px; background: var(--bg); border: 1px solid var(--line); position: relative; }
|
||||
.minibar .mf { position: absolute; left:0; top:0; bottom:0; width: var(--p,0%); background: var(--amber); }
|
||||
|
||||
/* statusbar */
|
||||
.statusbar { display: flex; align-items: center; height: 30px; background: var(--panel); border-top: 1px solid var(--line-strong); font-family: "JetBrains Mono"; font-size: 11px; color: var(--muted); }
|
||||
.statusbar .si { padding: 0 14px; height: 30px; line-height: 30px; border-right: 1px solid var(--line); display: flex; align-items: center; gap: 8px; }
|
||||
.statusbar .si.first { color: var(--green); font-weight: 600; }
|
||||
.statusbar b { color: var(--text); }
|
||||
.statusbar .spacer { flex: 1; }
|
||||
.qtrack { width: 130px; height: 6px; background: var(--sunk); border: 1px solid var(--line); position: relative; }
|
||||
.qtrack > i { position: absolute; left:0; top:0; bottom:0; width: 62%; background: var(--amber); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="app">
|
||||
<!-- MENU BAR -->
|
||||
<div class="menubar">
|
||||
<div class="brand">
|
||||
<div class="mark"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><path d="M12 4v11m0 0l-4.5-4.5M12 15l4.5-4.5M5 20h14"/></svg></div>
|
||||
<div class="nm">DEBRID<span class="accent">·</span>DOWNLOADER</div>
|
||||
</div>
|
||||
<div class="menu-item">Datei</div>
|
||||
<div class="menu-item">Einstellungen</div>
|
||||
<div class="menu-item">Hilfe</div>
|
||||
<div class="spacer"></div>
|
||||
<div class="conn"><span class="sq"></span> 4 PROVIDER AKTIV · MEGA-DEBRID BEREIT</div>
|
||||
</div>
|
||||
|
||||
<!-- CONTROL STRIP -->
|
||||
<div class="control">
|
||||
<div class="grp">
|
||||
<div class="ic play" title="Start"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg></div>
|
||||
<div class="ic pause" title="Pause"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M6 5h4v14H6zM14 5h4v14h-4z"/></svg></div>
|
||||
<div class="ic stop" title="Stop"><svg viewBox="0 0 24 24" fill="currentColor"><rect x="6" y="6" width="12" height="12"/></svg></div>
|
||||
</div>
|
||||
<div class="grp">
|
||||
<div class="ic" title="Zeitplan"><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></div>
|
||||
<div class="ic" title="Hoch"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 19V5M5 12l7-7 7 7"/></svg></div>
|
||||
<div class="ic" title="Runter"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12l7 7 7-7"/></svg></div>
|
||||
</div>
|
||||
<div class="spacer"></div>
|
||||
<div class="gauges">
|
||||
<div class="gauge"><div class="g-l">Tempo</div><div class="g-v amber">48.2<span class="u"> MB/s</span></div></div>
|
||||
<div class="gauge"><div class="g-l">Verbleibend</div><div class="g-v">02:14</div></div>
|
||||
<div class="gauge"><div class="g-l">Aktiv</div><div class="g-v">8<span class="u">/24</span></div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- TABS -->
|
||||
<div class="tabs">
|
||||
<div class="tab active"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 3v12m0 0l-4-4m4 4l4-4M5 21h14"/></svg> Downloads <span class="ct">5</span></div>
|
||||
<div class="tab"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10 13a5 5 0 007 0l3-3a5 5 0 00-7-7l-1 1"/></svg> Linksammler</div>
|
||||
<div class="tab"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.6 1.6 0 00.3 1.8M4.6 9a1.6 1.6 0 00-.3-1.8"/></svg> Einstellungen</div>
|
||||
<div class="tab"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 12a9 9 0 109-9 9 9 0 00-9 9zm9-5v5l3 2"/></svg> Verlauf</div>
|
||||
<div class="tab"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 20V10M10 20V4M16 20v-8M22 20H2"/></svg> Statistiken</div>
|
||||
</div>
|
||||
|
||||
<!-- TABLE -->
|
||||
<div class="panel">
|
||||
<div class="thead"><div>Name</div><div>Geladen / Größe</div><div>Fortschritt</div><div>Hoster</div><div>Service</div><div>Prio</div><div>Status</div><div>Tempo</div></div>
|
||||
<div class="tbody">
|
||||
|
||||
<div class="pkg open">
|
||||
<div class="prow">
|
||||
<div class="pn"><span class="tw"></span><div class="pic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 7l9-4 9 4v10l-9 4-9-4z"/><path d="M3 7l9 4 9-4"/></svg></div><div class="ptt"><div class="t">Ugly.Americans.S02.COMPLETE.German.DL.720p.WEB-DL.h264-NERDS</div><div class="s">10 Dateien · 14.2 GB</div></div></div>
|
||||
<div class="c mono">8.9 / 14.2 GB</div>
|
||||
<div class="c"><div class="bar"><div class="fill" style="--p:63%"></div><div class="tx">63 %</div></div></div>
|
||||
<div class="c"><span class="host"><span class="hd" style="background:#d2693e"></span>mega</span></div>
|
||||
<div class="c">Mega-Debrid</div>
|
||||
<div class="c"><span class="prio">HOCH</span></div>
|
||||
<div class="c"><span class="tag t-dl">6/10 lädt</span></div>
|
||||
<div class="c mono amber">48 MB/s</div>
|
||||
</div>
|
||||
<div class="items">
|
||||
<div class="item"><div class="in"><span class="ld 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="minibar"><div class="mf gr" style="--p:100%;background:var(--green)"></div></div></div><div class="c">mega</div><div class="c"></div><div class="c"></div><div class="c"><span class="tag t-done">fertig</span></div><div class="c mono">—</div></div>
|
||||
<div class="item"><div class="in"><span class="ld 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="minibar"><div class="mf" style="--p:100%;background:var(--green)"></div></div></div><div class="c">mega</div><div class="c"></div><div class="c"></div><div class="c"><span class="tag t-done">fertig</span></div><div class="c mono">—</div></div>
|
||||
<div class="item"><div class="in"><span class="ld 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="minibar"><div class="mf" style="--p:70%"></div></div></div><div class="c">mega</div><div class="c"></div><div class="c"></div><div class="c"><span class="tag t-dl">70 %</span></div><div class="c mono amber">26 MB/s</div></div>
|
||||
<div class="item"><div class="in"><span class="ld 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="minibar"><div class="mf" style="--p:40%"></div></div></div><div class="c">mega</div><div class="c"></div><div class="c"></div><div class="c"><span class="tag t-dl">40 %</span></div><div class="c mono amber">22 MB/s</div></div>
|
||||
<div class="item"><div class="in"><span class="ld off"></span><span class="nm">…h264-NERDS.part5.rar</span></div><div class="c mono">0 / 1.1</div><div class="c"><div class="minibar"><div class="mf" style="--p:0%"></div></div></div><div class="c">mega</div><div class="c"></div><div class="c"></div><div class="c"><span class="tag t-q">wartet</span></div><div class="c mono">—</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pkg">
|
||||
<div class="prow">
|
||||
<div class="pn"><span class="tw"></span><div class="pic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 7l9-4 9 4v10l-9 4-9-4z"/><path d="M3 7l9 4 9-4"/></svg></div><div class="ptt"><div class="t">The.Bear.S03.German.DL.1080p.WEB.h264-WvF</div><div class="s">8 Dateien · 11.6 GB</div></div></div>
|
||||
<div class="c mono">11.6 / 11.6 GB</div>
|
||||
<div class="c"><div class="bar"><div class="fill gr" style="--p:82%"></div><div class="tx">Entpacken 82 %</div></div></div>
|
||||
<div class="c"><span class="host"><span class="hd" style="background:#6f9a52"></span>rapidgator</span></div>
|
||||
<div class="c">Real-Debrid</div>
|
||||
<div class="c"></div>
|
||||
<div class="c"><span class="tag t-ext">entpacken</span></div>
|
||||
<div class="c mono">—</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pkg">
|
||||
<div class="prow">
|
||||
<div class="pn"><span class="tw"></span><div class="pic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 7l9-4 9 4v10l-9 4-9-4z"/><path d="M3 7l9 4 9-4"/></svg></div><div class="ptt"><div class="t">Dune.Part.Two.2024.German.DL.2160p.UHD.BluRay.x265-NERDS</div><div class="s">1 Datei · 18.4 GB → Library</div></div></div>
|
||||
<div class="c mono">18.4 / 18.4 GB</div>
|
||||
<div class="c"><div class="bar"><div class="fill gr" style="--p:100%"></div><div class="tx">100 %</div></div></div>
|
||||
<div class="c"><span class="host"><span class="hd" style="background:#5683b0"></span>ddownload</span></div>
|
||||
<div class="c">AllDebrid</div>
|
||||
<div class="c"></div>
|
||||
<div class="c"><span class="tag t-done">abgeschlossen</span></div>
|
||||
<div class="c mono">—</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pkg">
|
||||
<div class="prow">
|
||||
<div class="pn"><span class="tw"></span><div class="pic err"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 8v5m0 3h.01M10.3 3.9l-8 14A2 2 0 004 21h16a2 2 0 001.7-3l-8-14a2 2 0 00-3.4 0z"/></svg></div><div class="ptt"><div class="t">Shogun.S01E05.German.DL.1080p.WEB.h264-EDITION</div><div class="s err">Hoster nicht verfügbar · Link tot · kein Fallback</div></div></div>
|
||||
<div class="c mono">0 / 2.4 GB</div>
|
||||
<div class="c"><div class="bar"><div class="fill rd" style="--p:8%"></div><div class="tx">Fehler</div></div></div>
|
||||
<div class="c"><span class="host"><span class="hd" style="background:#9a6fb0"></span>uploaded</span></div>
|
||||
<div class="c">—</div>
|
||||
<div class="c"></div>
|
||||
<div class="c"><span class="tag t-err">fehler</span></div>
|
||||
<div class="c mono">—</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pkg">
|
||||
<div class="prow">
|
||||
<div class="pn"><span class="tw"></span><div class="pic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 7l9-4 9 4v10l-9 4-9-4z"/><path d="M3 7l9 4 9-4"/></svg></div><div class="ptt"><div class="t">Severance.S02.COMPLETE.German.DL.1080p.ATVP.WEB.h265-NERDS</div><div class="s">10 Dateien · 22.1 GB</div></div></div>
|
||||
<div class="c mono">0 / 22.1 GB</div>
|
||||
<div class="c"><div class="bar"><div class="fill" style="--p:0%"></div><div class="tx" style="color:var(--faint);mix-blend-mode:normal">Warteschlange</div></div></div>
|
||||
<div class="c"><span class="host"><span class="hd" style="background:#d2693e"></span>mega</span></div>
|
||||
<div class="c">Mega-Debrid</div>
|
||||
<div class="c"></div>
|
||||
<div class="c"><span class="tag t-q">wartet</span></div>
|
||||
<div class="c mono">—</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- STATUSBAR -->
|
||||
<div class="statusbar">
|
||||
<div class="si first"><span style="width:8px;height:8px;background:var(--green);display:inline-block"></span> LÄUFT</div>
|
||||
<div class="si">Queue: <b>5</b> Pakete · <b>34</b> Dateien</div>
|
||||
<div class="si">Heute: <b>147 GB</b></div>
|
||||
<div class="si">Platte: <b>1.54 TB</b> frei</div>
|
||||
<div class="spacer"></div>
|
||||
<div class="si">Gesamt <div class="qtrack"><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>
|
||||
95
design-mockups/index.html
Normal file
95
design-mockups/index.html
Normal file
@ -0,0 +1,95 @@
|
||||
<!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>
|
||||
333
design-mockups/nebula.html
Normal file
333
design-mockups/nebula.html
Normal file
@ -0,0 +1,333 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Nebula — 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=Unbounded:wght@500;600;700;800&family=Outfit:wght@300;400;500;600;700&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--bg: #0a0612;
|
||||
--bg-2: #0f0820;
|
||||
--panel: rgba(26, 16, 48, 0.6);
|
||||
--card: rgba(34, 20, 60, 0.5);
|
||||
--field: rgba(14, 8, 28, 0.8);
|
||||
--line: rgba(140, 90, 220, 0.22);
|
||||
--line-bright: rgba(160, 110, 240, 0.42);
|
||||
--text: #f0e9ff;
|
||||
--muted: #a797c9;
|
||||
--faint: #6f5f93;
|
||||
--magenta: #ff3d9a;
|
||||
--cyan: #2ee6ff;
|
||||
--violet: #9d5cff;
|
||||
--green: #3dffa8;
|
||||
--amber: #ffcc44;
|
||||
--red: #ff4d6d;
|
||||
}
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body {
|
||||
font-family: "Outfit", system-ui, sans-serif;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
font-size: 14px; height: 100vh; overflow: hidden;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
position: relative;
|
||||
}
|
||||
body::before {
|
||||
content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
|
||||
background:
|
||||
radial-gradient(680px 420px at 88% -6%, rgba(255,61,154,0.18), transparent 60%),
|
||||
radial-gradient(620px 420px at 6% 4%, rgba(46,230,255,0.14), transparent 58%),
|
||||
radial-gradient(900px 600px at 50% 116%, rgba(157,92,255,0.18), transparent 60%);
|
||||
}
|
||||
body::after {
|
||||
content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: 0.4;
|
||||
background-image: linear-gradient(rgba(157,92,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(157,92,255,0.05) 1px, transparent 1px);
|
||||
background-size: 50px 50px;
|
||||
mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
|
||||
}
|
||||
.mono { font-family: "Space Mono", monospace; }
|
||||
.disp { font-family: "Unbounded", sans-serif; }
|
||||
.app { position: relative; z-index: 1; display: grid; grid-template-rows: auto auto auto 1fr auto; height: 100vh; padding: 14px 20px 12px; gap: 12px; }
|
||||
|
||||
/* topbar */
|
||||
.topbar { display: flex; align-items: center; gap: 16px; }
|
||||
.brand { display: flex; align-items: center; gap: 12px; }
|
||||
.orb { width: 36px; height: 36px; border-radius: 50%;
|
||||
background: radial-gradient(circle at 30% 30%, var(--cyan), var(--violet) 50%, var(--magenta));
|
||||
box-shadow: 0 0 22px rgba(157,92,255,0.7), 0 0 8px rgba(255,61,154,0.6); }
|
||||
.brand .nm { font-family: "Unbounded"; font-weight: 700; font-size: 15px; letter-spacing: -0.01em;
|
||||
background: linear-gradient(90deg, var(--cyan), var(--magenta)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
|
||||
.brand .vr { font-family: "Space Mono"; font-size: 10.5px; color: var(--faint); margin-top: 2px; }
|
||||
.topbar .menu { display: flex; gap: 2px; margin-left: 10px; }
|
||||
.topbar .menu a { padding: 6px 12px; border-radius: 8px; color: var(--muted); font-weight: 500; font-size: 13px; cursor: pointer; }
|
||||
.topbar .menu a:hover { background: var(--panel); color: var(--text); }
|
||||
.topbar .spacer { flex: 1; }
|
||||
.status-led { display: flex; align-items: center; gap: 9px; padding: 7px 15px; border-radius: 999px;
|
||||
background: var(--panel); border: 1px solid var(--line); font-size: 12px; color: var(--muted); }
|
||||
.pulse { width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px var(--green); animation: pulse 1.6s infinite; }
|
||||
@keyframes pulse { 0%,100%{box-shadow:0 0 12px var(--green)} 50%{box-shadow:0 0 4px var(--green)} }
|
||||
|
||||
/* control */
|
||||
.control { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 18px;
|
||||
background: var(--panel); border: 1px solid var(--line); backdrop-filter: blur(20px); }
|
||||
.runner { display: flex; gap: 8px; }
|
||||
.rb { width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--line); background: var(--field); display: grid; place-items: center; cursor: pointer; color: var(--muted); transition: all .18s; }
|
||||
.rb svg { width: 17px; height: 17px; }
|
||||
.rb:hover { transform: translateY(-2px); }
|
||||
.rb.play { color: #0a0612; background: linear-gradient(135deg, var(--cyan), var(--green)); border: none; box-shadow: 0 0 20px rgba(46,230,255,0.5); }
|
||||
.rb.pause { color: var(--amber); } .rb.pause:hover { box-shadow: 0 0 16px rgba(255,204,68,0.4); border-color: var(--amber); }
|
||||
.rb.stop { color: var(--red); } .rb.stop:hover { box-shadow: 0 0 16px rgba(255,77,109,0.4); border-color: var(--red); }
|
||||
.rb.ghost:hover { color: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 14px rgba(46,230,255,0.3); }
|
||||
.sep { width: 1px; height: 28px; background: var(--line-bright); }
|
||||
.control .spacer { flex: 1; }
|
||||
.stats { display: flex; gap: 10px; }
|
||||
.stat { padding: 8px 16px; border-radius: 12px; background: var(--field); border: 1px solid var(--line); text-align: center; min-width: 92px; }
|
||||
.stat .l { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--faint); }
|
||||
.stat .v { font-family: "Unbounded"; font-weight: 600; font-size: 17px; margin-top: 3px; }
|
||||
.stat .v .u { font-size: 10px; font-family: "Outfit"; color: var(--muted); }
|
||||
.stat.hl .v { background: linear-gradient(90deg, var(--cyan), var(--magenta)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
|
||||
|
||||
/* tabs */
|
||||
.tabs { display: flex; gap: 8px; }
|
||||
.tab { padding: 9px 18px; border-radius: 11px; cursor: pointer; color: var(--muted); font-weight: 600; font-size: 13px;
|
||||
border: 1px solid transparent; transition: all .15s; display: flex; align-items: center; gap: 8px; }
|
||||
.tab svg { width: 15px; height: 15px; }
|
||||
.tab:hover { color: var(--text); background: var(--panel); }
|
||||
.tab.active { color: var(--text); background: linear-gradient(135deg, rgba(255,61,154,0.18), rgba(46,230,255,0.14));
|
||||
border-color: var(--line-bright); box-shadow: 0 0 20px rgba(157,92,255,0.2); }
|
||||
.tab .ct { font-family: "Space Mono"; font-size: 11px; padding: 1px 7px; border-radius: 999px; background: rgba(157,92,255,0.25); }
|
||||
|
||||
/* panel */
|
||||
.panel-c { background: var(--card); border: 1px solid var(--line); border-radius: 18px; overflow: hidden;
|
||||
backdrop-filter: blur(22px); display: flex; flex-direction: column; box-shadow: 0 18px 50px rgba(0,0,0,0.5); }
|
||||
.thead { display: grid; grid-template-columns: minmax(0,1fr) 160px 130px 116px 124px 74px 150px 88px;
|
||||
padding: 13px 18px; border-bottom: 1px solid var(--line); font-family: "Space Mono"; font-size: 10.5px; font-weight: 700;
|
||||
text-transform: uppercase; letter-spacing: 0.08em; color: var(--faint); }
|
||||
.thead > div:not(:first-child) { text-align: center; }
|
||||
.tbody { overflow-y: auto; flex: 1; }
|
||||
.tbody::-webkit-scrollbar { width: 10px; }
|
||||
.tbody::-webkit-scrollbar-thumb { background: var(--line-bright); border-radius: 10px; }
|
||||
|
||||
.pkg { border-bottom: 1px solid rgba(140,90,220,0.12); }
|
||||
.prow { display: grid; grid-template-columns: minmax(0,1fr) 160px 130px 116px 124px 74px 150px 88px; align-items: center; padding: 13px 18px; cursor: pointer; transition: all .15s; }
|
||||
.prow:hover { background: rgba(157,92,255,0.07); }
|
||||
.pn { display: flex; align-items: center; gap: 11px; min-width: 0; }
|
||||
.chev { color: var(--faint); transition: transform .2s; flex-shrink: 0; }
|
||||
.pkg.open .chev { transform: rotate(90deg); }
|
||||
.picon { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0;
|
||||
background: linear-gradient(135deg, rgba(255,61,154,0.2), rgba(46,230,255,0.16)); border: 1px solid var(--line-bright); }
|
||||
.picon svg { width: 16px; height: 16px; color: var(--cyan); }
|
||||
.ptt { min-width: 0; }
|
||||
.ptt .t { font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
.ptt .s { font-family: "Space Mono"; font-size: 10.5px; color: var(--faint); margin-top: 2px; }
|
||||
.c { text-align: center; font-size: 12.5px; color: var(--muted); }
|
||||
.c.mono { font-family: "Space Mono"; font-size: 11.5px; }
|
||||
|
||||
/* glowing progress */
|
||||
.pbar { height: 24px; border-radius: 8px; background: var(--field); position: relative; overflow: hidden; border: 1px solid var(--line); }
|
||||
.pbar .fill { position: absolute; inset: 0; width: var(--p,0%); border-radius: 7px;
|
||||
background: linear-gradient(90deg, var(--violet), var(--magenta)); box-shadow: 0 0 18px rgba(255,61,154,0.6); }
|
||||
.pbar .fill.cy { background: linear-gradient(90deg, var(--cyan), var(--violet)); box-shadow: 0 0 18px rgba(46,230,255,0.55); }
|
||||
.pbar .fill.gr { background: linear-gradient(90deg, var(--green), var(--cyan)); box-shadow: 0 0 18px rgba(61,255,168,0.5); }
|
||||
.pbar .fill::after { content: ""; position: absolute; top: 0; right: 0; width: 30px; height: 100%; background: rgba(255,255,255,0.35); filter: blur(8px); }
|
||||
.pbar .txt { position: absolute; inset: 0; display: grid; place-items: center; font-family: "Space Mono"; font-size: 11px; font-weight: 700; color: #fff; z-index: 2; text-shadow: 0 1px 3px rgba(0,0,0,0.7); }
|
||||
|
||||
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; font-size: 11px; font-weight: 600; }
|
||||
.c-dl { background: rgba(46,230,255,0.14); color: var(--cyan); border: 1px solid rgba(46,230,255,0.3); }
|
||||
.c-ext { background: rgba(61,255,168,0.13); color: var(--green); border: 1px solid rgba(61,255,168,0.3); }
|
||||
.c-done { background: rgba(61,255,168,0.1); color: var(--green); border: 1px solid rgba(61,255,168,0.25); }
|
||||
.c-err { background: rgba(255,77,109,0.14); color: var(--red); border: 1px solid rgba(255,77,109,0.35); }
|
||||
.c-q { background: rgba(167,151,201,0.1); color: var(--muted); border: 1px solid var(--line); }
|
||||
.host { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
|
||||
.host .hd { width: 7px; height: 7px; border-radius: 2px; }
|
||||
.prio { font-family: "Space Mono"; font-size: 10px; font-weight: 700; color: var(--magenta); }
|
||||
|
||||
.items { display: none; background: rgba(10,6,18,0.5); }
|
||||
.pkg.open .items { display: block; }
|
||||
.item { display: grid; grid-template-columns: minmax(0,1fr) 160px 130px 116px 124px 74px 150px 88px; align-items: center; padding: 8px 18px; font-size: 12px; border-top: 1px solid rgba(140,90,220,0.08); }
|
||||
.item:hover { background: rgba(46,230,255,0.04); }
|
||||
.in { display: flex; align-items: center; gap: 9px; padding-left: 43px; min-width: 0; }
|
||||
.ld { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
|
||||
.ld.on { background: var(--green); box-shadow: 0 0 8px var(--green); }
|
||||
.ld.off { background: var(--red); box-shadow: 0 0 8px var(--red); }
|
||||
.in .nm { font-family: "Space Mono"; font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
.mini { height: 7px; border-radius: 4px; background: var(--field); overflow: hidden; position: relative; }
|
||||
.mini .mf { position: absolute; inset: 0; width: var(--p,0%); background: linear-gradient(90deg, var(--violet), var(--magenta)); box-shadow: 0 0 8px rgba(255,61,154,0.5); }
|
||||
|
||||
/* statusbar */
|
||||
.statusbar { display: flex; align-items: center; gap: 18px; padding: 9px 18px; border-radius: 14px;
|
||||
background: var(--panel); border: 1px solid var(--line); font-size: 12px; color: var(--muted); backdrop-filter: blur(16px); }
|
||||
.statusbar .si { display: flex; align-items: center; gap: 8px; }
|
||||
.statusbar b { color: var(--text); font-family: "Space Mono"; font-weight: 700; }
|
||||
.statusbar .spacer { flex: 1; }
|
||||
.gtrack { width: 130px; height: 7px; border-radius: 99px; background: var(--field); overflow: hidden; }
|
||||
.gtrack > i { display: block; height: 100%; width: 62%; background: linear-gradient(90deg, var(--cyan), var(--magenta)); box-shadow: 0 0 10px rgba(255,61,154,0.5); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="app">
|
||||
<!-- TOPBAR -->
|
||||
<div class="topbar">
|
||||
<div class="brand">
|
||||
<div class="orb"></div>
|
||||
<div><div class="nm disp">DEBRID DOWNLOADER</div><div class="vr">v1.7.156 · nebula</div></div>
|
||||
</div>
|
||||
<div class="menu"><a>Datei</a><a>Einstellungen</a><a>Hilfe</a></div>
|
||||
<div class="spacer"></div>
|
||||
<div class="status-led"><span class="pulse"></span> 4 Provider aktiv · Mega-Debrid bereit</div>
|
||||
</div>
|
||||
|
||||
<!-- CONTROL -->
|
||||
<div class="control">
|
||||
<div class="runner">
|
||||
<div class="rb play" title="Start"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg></div>
|
||||
<div class="rb pause" title="Pause"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M6 5h4v14H6zM14 5h4v14h-4z"/></svg></div>
|
||||
<div class="rb stop" title="Stop"><svg viewBox="0 0 24 24" fill="currentColor"><rect x="6" y="6" width="12" height="12" rx="2"/></svg></div>
|
||||
</div>
|
||||
<div class="sep"></div>
|
||||
<div class="runner">
|
||||
<div class="rb ghost" title="Zeitplan"><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></div>
|
||||
<div class="rb ghost" title="Hoch"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 19V5M5 12l7-7 7 7"/></svg></div>
|
||||
<div class="rb ghost" title="Runter"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12l7 7 7-7"/></svg></div>
|
||||
</div>
|
||||
<div class="spacer"></div>
|
||||
<div class="stats">
|
||||
<div class="stat hl"><div class="l">Tempo</div><div class="v">48.2<span class="u"> MB/s</span></div></div>
|
||||
<div class="stat"><div class="l">Verbleibend</div><div class="v">02:14</div></div>
|
||||
<div class="stat"><div class="l">Aktiv</div><div class="v">8<span class="u">/24</span></div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- TABS -->
|
||||
<div class="tabs">
|
||||
<div class="tab active"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 3v12m0 0l-4-4m4 4l4-4M5 21h14"/></svg> Downloads <span class="ct">5</span></div>
|
||||
<div class="tab"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10 13a5 5 0 007 0l3-3a5 5 0 00-7-7l-1 1"/></svg> Linksammler</div>
|
||||
<div class="tab"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.6 1.6 0 00.3 1.8M4.6 9a1.6 1.6 0 00-.3-1.8"/></svg> Einstellungen</div>
|
||||
<div class="tab"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 12a9 9 0 109-9 9 9 0 00-9 9zm9-5v5l3 2"/></svg> Verlauf</div>
|
||||
<div class="tab"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 20V10M10 20V4M16 20v-8M22 20H2"/></svg> Statistiken</div>
|
||||
</div>
|
||||
|
||||
<!-- PANEL -->
|
||||
<div class="panel-c">
|
||||
<div class="thead">
|
||||
<div>NAME</div><div>GELADEN / GRÖSSE</div><div>FORTSCHRITT</div><div>HOSTER</div><div>SERVICE</div><div>PRIO</div><div>STATUS</div><div>TEMPO</div>
|
||||
</div>
|
||||
<div class="tbody">
|
||||
|
||||
<!-- pkg1 open -->
|
||||
<div class="pkg open">
|
||||
<div class="prow">
|
||||
<div class="pn">
|
||||
<svg class="chev" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M9 6l6 6-6 6"/></svg>
|
||||
<div class="picon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 7l9-4 9 4v10l-9 4-9-4z"/><path d="M3 7l9 4 9-4M12 21V11"/></svg></div>
|
||||
<div class="ptt"><div class="t">Ugly.Americans.S02.COMPLETE.German.DL.720p.WEB-DL.h264-NERDS</div><div class="s">10 Dateien · 14.2 GB</div></div>
|
||||
</div>
|
||||
<div class="c mono">8.9 / 14.2 GB</div>
|
||||
<div class="c"><div class="pbar"><div class="fill" style="--p:63%"></div><div class="txt">63%</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="prio">HIGH</span></div>
|
||||
<div class="c"><span class="chip c-dl">◢ 6/10</span></div>
|
||||
<div class="c mono" style="color:var(--cyan)">48 MB/s</div>
|
||||
</div>
|
||||
<div class="items">
|
||||
<div class="item"><div class="in"><span class="ld on"></span><span class="nm">…NERDS.part1.rar</span></div><div class="c mono">2.0/2.0</div><div class="c"><div class="mini"><div class="mf" style="--p:100%"></div></div></div><div class="c">mega</div><div class="c"></div><div class="c"></div><div class="c"><span class="chip c-done">✓</span></div><div class="c mono">—</div></div>
|
||||
<div class="item"><div class="in"><span class="ld on"></span><span class="nm">…NERDS.part2.rar</span></div><div class="c mono">2.0/2.0</div><div class="c"><div class="mini"><div class="mf" style="--p:100%"></div></div></div><div class="c">mega</div><div class="c"></div><div class="c"></div><div class="c"><span class="chip c-done">✓</span></div><div class="c mono">—</div></div>
|
||||
<div class="item"><div class="in"><span class="ld on"></span><span class="nm">…NERDS.part3.rar</span></div><div class="c mono">1.4/2.0</div><div class="c"><div class="mini"><div class="mf" style="--p:70%"></div></div></div><div class="c">mega</div><div class="c"></div><div class="c"></div><div class="c"><span class="chip c-dl">◢ 70%</span></div><div class="c mono" style="color:var(--cyan)">26 MB/s</div></div>
|
||||
<div class="item"><div class="in"><span class="ld on"></span><span class="nm">…NERDS.part4.rar</span></div><div class="c mono">0.8/2.0</div><div class="c"><div class="mini"><div class="mf" style="--p:40%"></div></div></div><div class="c">mega</div><div class="c"></div><div class="c"></div><div class="c"><span class="chip c-dl">◢ 40%</span></div><div class="c mono" style="color:var(--cyan)">22 MB/s</div></div>
|
||||
<div class="item"><div class="in"><span class="ld off"></span><span class="nm">…NERDS.part5.rar</span></div><div class="c mono">0/1.1</div><div class="c"><div class="mini"><div class="mf" style="--p:0%"></div></div></div><div class="c">mega</div><div class="c"></div><div class="c"></div><div class="c"><span class="chip c-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="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M9 6l6 6-6 6"/></svg>
|
||||
<div class="picon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 7l9-4 9 4v10l-9 4-9-4z"/><path d="M3 7l9 4 9-4M12 21V11"/></svg></div>
|
||||
<div class="ptt"><div class="t">The.Bear.S03.German.DL.1080p.WEB.h264-WvF</div><div class="s">8 Dateien · 11.6 GB</div></div>
|
||||
</div>
|
||||
<div class="c mono">11.6 / 11.6 GB</div>
|
||||
<div class="c"><div class="pbar"><div class="fill gr" style="--p:82%"></div><div class="txt">ENTPACKEN 82%</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"></div>
|
||||
<div class="c"><span class="chip c-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="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M9 6l6 6-6 6"/></svg>
|
||||
<div class="picon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 7l9-4 9 4v10l-9 4-9-4z"/><path d="M3 7l9 4 9-4M12 21V11"/></svg></div>
|
||||
<div class="ptt"><div class="t">Dune.Part.Two.2024.German.DL.2160p.UHD.BluRay.x265-NERDS</div><div class="s">1 Datei · 18.4 GB → Library</div></div>
|
||||
</div>
|
||||
<div class="c mono">18.4 / 18.4 GB</div>
|
||||
<div class="c"><div class="pbar"><div class="fill gr" style="--p:100%"></div><div class="txt">100%</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"></div>
|
||||
<div class="c"><span class="chip c-done">✓ Fertig</span></div>
|
||||
<div class="c mono">—</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- pkg4 error -->
|
||||
<div class="pkg">
|
||||
<div class="prow">
|
||||
<div class="pn">
|
||||
<svg class="chev" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M9 6l6 6-6 6"/></svg>
|
||||
<div class="picon" style="border-color:rgba(255,77,109,0.5)"><svg viewBox="0 0 24 24" fill="none" stroke="var(--red)" stroke-width="2"><path d="M12 9v4m0 4h.01M10.3 3.9l-8 14A2 2 0 004 21h16a2 2 0 001.7-3l-8-14a2 2 0 00-3.4 0z"/></svg></div>
|
||||
<div class="ptt"><div class="t">Shogun.S01E05.German.DL.1080p.WEB.h264-EDITION</div><div class="s" style="color:var(--red)">Hoster nicht verfügbar · Link tot</div></div>
|
||||
</div>
|
||||
<div class="c mono">0 / 2.4 GB</div>
|
||||
<div class="c"><div class="pbar"><div class="fill" style="--p:6%;background:var(--red);box-shadow:0 0 14px rgba(255,77,109,0.5)"></div><div class="txt">FEHLER</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"></div>
|
||||
<div class="c"><span class="chip c-err">✗ Fehler</span></div>
|
||||
<div class="c mono">—</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- pkg5 queued -->
|
||||
<div class="pkg">
|
||||
<div class="prow">
|
||||
<div class="pn">
|
||||
<svg class="chev" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M9 6l6 6-6 6"/></svg>
|
||||
<div class="picon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 7l9-4 9 4v10l-9 4-9-4z"/><path d="M3 7l9 4 9-4M12 21V11"/></svg></div>
|
||||
<div class="ptt"><div class="t">Severance.S02.COMPLETE.German.DL.1080p.ATVP.WEB.h265-NERDS</div><div class="s">10 Dateien · 22.1 GB</div></div>
|
||||
</div>
|
||||
<div class="c mono">0 / 22.1 GB</div>
|
||||
<div class="c"><div class="pbar"><div class="fill" style="--p:0%"></div><div class="txt" style="color:var(--faint)">WARTESCHLANGE</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"></div>
|
||||
<div class="c"><span class="chip c-q">Wartet</span></div>
|
||||
<div class="c mono">—</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- STATUSBAR -->
|
||||
<div class="statusbar">
|
||||
<div class="si"><span class="pulse"></span> Läuft</div>
|
||||
<div class="si">Queue: <b>5</b> Pakete · <b>34</b> Dateien</div>
|
||||
<div class="si">Heute: <b>147 GB</b></div>
|
||||
<div class="spacer"></div>
|
||||
<div class="si">Gesamt <div class="gtrack"><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>
|
||||
298
design-mockups/vellum.html
Normal file
298
design-mockups/vellum.html
Normal file
@ -0,0 +1,298 @@
|
||||
<!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>
|
||||
@ -1227,8 +1227,8 @@ const BandwidthChart = memo(function BandwidthChart({ items, running, paused, sp
|
||||
const isDark = document.documentElement.getAttribute("data-theme") !== "light";
|
||||
const gridColor = isDark ? "rgba(35, 57, 84, 0.5)" : "rgba(199, 213, 234, 0.5)";
|
||||
const textColor = isDark ? "#90a4bf" : "#4e6482";
|
||||
const accentColor = isDark ? "#38bdf8" : "#1168d9";
|
||||
const fillColor = isDark ? "rgba(56, 189, 248, 0.15)" : "rgba(17, 104, 217, 0.15)";
|
||||
const accentColor = isDark ? "#f2942d" : "#c2701a";
|
||||
const fillColor = isDark ? "rgba(242, 148, 45, 0.15)" : "rgba(194, 112, 26, 0.15)";
|
||||
|
||||
const history = speedHistoryRef.current;
|
||||
const now = Date.now();
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
58
tasks/todo.md
Normal file
58
tasks/todo.md
Normal file
@ -0,0 +1,58 @@
|
||||
# Real-Debrid-Downloader — Analyse & Verbesserungen (2026-05-23)
|
||||
|
||||
Tiefe Analyse via 3 parallele Subagents (Bugs / Features / UI) + 4 Design-Mockups.
|
||||
|
||||
---
|
||||
|
||||
## A. BUGS / ROBUSTHEIT (verifiziert gegen Quellcode)
|
||||
|
||||
Roter Faden: Die **Deferred-Post-Processing-Pipeline** (eingeführt um den Extract-Slot schnell freizugeben) ist nur halb ins Abbruch-/Lifecycle-Management integriert. Genau der Bereich des v1.7.156-Fixes.
|
||||
|
||||
### HOCH
|
||||
- [ ] **H1 — Globaler Stop/Shutdown bricht Deferred-Post-Processing nicht ab.** `abortPostProcessing` (download-manager.ts:7053) iteriert nur über `packagePostProcessAbortControllers`, nie über `packageDeferredPostProcessAbortControllers`. Bei Stop/Shutdown/clearAll laufen MKV-Move/Archiv-Cleanup/Rename weiter, während synchron persistiert wird → FS-Zustand ≠ Session-State (halb verschobene Datei, halb gelöschtes Archiv).
|
||||
- [ ] **H2 — Hybrid-Post-Extract feuert MKV-Collection/Rename als losgelöstes Promise** (download-manager.ts:11334). In keiner Tracking-Map, kein `shouldAbort`. Cancel/Reset während Hybrid-Collect → Dateien werden trotzdem verschoben/gelöscht.
|
||||
- [ ] **H3 — 0-Byte-Datei wird als vollständig akzeptiert** wenn keine Größeninfo (download-completion.ts:129, source "stream-end"). Hoster antwortet HTTP 200 ohne Content-Length + schließt sofort → Item "Fertig" mit leerer Datei, kein Auto-Redownload.
|
||||
|
||||
### MITTEL
|
||||
- [ ] **M1 — Deferred-Post-Extraction nicht in `packagePostProcessTasks`** (download-manager.ts:11974). Scheduler-Abschluss (8154) + finishRun (12310) sehen Deferred-Tasks nicht → Run-Ende/Summary feuert während noch Dateien verschoben werden, State-Reset mitten in FS-Arbeit.
|
||||
- [ ] **M2 — `blockAllPersistence` wird nach Backup-Import nie zurückgesetzt** (app-controller.ts:678). Weiterarbeiten ohne Neustart → `persistSoon` ist dauerhaft No-Op → bei hartem Crash alle Änderungen weg.
|
||||
- [ ] **M3 — `cancelPendingAsyncSaves` wartet nicht auf laufenden Async-Save** (storage.ts:1064). I/O-Overlap beim Import (Datenintegrität durch Generation-Guard geschützt, nur Robustheit).
|
||||
|
||||
### NIEDRIG
|
||||
- [ ] **N1 — Toter Code in `findReadyArchiveSets`** (download-manager.ts:10847). Unbedingtes `ready.add+continue` macht strengeren Disk-Fallback-Block (untracked-pending-Schutz) unerreichbar.
|
||||
|
||||
**Empfehlung:** H1 + H2 + M1 zusammen fixen (eine kohärente Härtung der Deferred-Pipeline). H3 ist klein & unabhängig. M2 trivial.
|
||||
|
||||
---
|
||||
|
||||
## B. FEATURES / UX-GAPS (nach Mehrwert/Aufwand)
|
||||
|
||||
App läuft headless auf Windows-Server → Nutzer sitzt nicht davor. Größte Lücke: keine Benachrichtigungen.
|
||||
|
||||
1. [ ] **Webhook/Push-Benachrichtigungen** (Discord/Telegram/ntfy) — S–M. Bei Paket fertig/Fehler/Quota/Provider-down aufs Handy. Neuer `notifier.ts`, Hooks an Completion-Punkten. **Höchster ROI.**
|
||||
2. [ ] **Fernsteuerung über bestehenden Debug-Server** (POST-Endpunkte) — S–M. Server hat schon HTTP + Token-Auth, aber nur GET. POST `/control/add-links`, `/start`, `/stop` → vom Handy steuern.
|
||||
3. [ ] **URL-Duplikat-Erkennung beim Hinzufügen** — S. History-`urls` existiert, wird aber nie geprüft → versehentliche Re-Downloads verschwenden Quota. Warnen: "3 Links bereits geladen".
|
||||
4. [ ] **Vereinheitlichter Pre-Flight-Check + Bulk-Skip toter Links** — M. Vor Start Größe/Name/Online für ganze Queue, "alle offline überspringen"-Button.
|
||||
5. [ ] **Speicherplatz-Vorabprüfung vor Start** — S. Aktuell keine Free-Space-Prüfung → Abbruch mitten im Download bei voller Platte.
|
||||
6. [ ] **Konsolidierte Fehler-Ansicht** — M. Alle fehlgeschlagenen Items flach + Fehlertext + "alle erneut versuchen".
|
||||
7. [ ] **Per-Provider-Statistik** — M. Rohdaten (`providerTotalUsageBytes`) existieren, werden nur nicht dargestellt. Welches Abo lohnt sich?
|
||||
8. [ ] **Auto-Retry fehlgeschlagener Pakete nach Wartezeit** — S–M. Quota/Cooldown-Fails am nächsten Tag automatisch neu versuchen.
|
||||
9. [ ] **Plex/Jellyfin Library-Refresh nach MKV-Move** — S. Neue Folgen sofort sichtbar. Gleicher Hook wie #1.
|
||||
10. [ ] **Watch-Folder für DLC/Link-Auto-Import** — M. Ordner überwachen → automatisch importieren+starten.
|
||||
|
||||
---
|
||||
|
||||
## C. DESIGN-MOCKUPS
|
||||
|
||||
4 Varianten in `design-mockups/` (index.html = Vergleich):
|
||||
1. **Aurora** — verfeinerte Dark-Evolution (premium, vertraut, geringstes Risiko)
|
||||
2. **Command** — Terminal/Ops-Dashboard (max. Dichte, Monospace, Status-LEDs)
|
||||
3. **Vellum** — Light Editorial (warmes Papier, Serif, mutige helle Alternative)
|
||||
4. **Nebula** — Neon/Synthwave (Magenta-Cyan-Glow, auffällig)
|
||||
|
||||
→ Nutzer wählt Richtung (oder Mischung).
|
||||
|
||||
---
|
||||
|
||||
## REVIEW / ERGEBNISSE
|
||||
(wird nach Umsetzung gefüllt)
|
||||
Loading…
Reference in New Issue
Block a user