96bcbd13d7
Redesign-Entscheid des Users (siehe design-mockups/): Aurora-Flavor "Ember". Re-Skin der Dark+Light-Theme-Variablen + hartcodierte Cyan-Stellen: - --accent Cyan #38bdf8 -> Amber #f2942d, neue --accent-2 Koral #ff7a5c - Surfaces/Text/Muted leicht ins Warme verschoben (Warm-Kalt-Spannung: Amber-Signal auf kühlem Navy bleibt erhalten) - Download-Progress Cyan-Gradient -> Amber->Koral (3 Stellen) - Accent-Button + Border -> Amber - Speed-Chart (App.tsx Canvas) Akzent -> Amber - Grün (Entpacken/Online/Erfolg) bleibt semantisch unverändert Bewusst KEINE Glas-/Glow-/Gradient-Mesh-Effekte (User lehnt KI-Look ab) — nur die warme Farbwelt auf der bestehenden flachen Struktur. design-mockups/: 4 Erst-Richtungen + Aurora-Flavor-Switcher + Forge (Referenz). tasks/todo.md: Bug-/Feature-Analyse (3 parallele Subagents). Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
334 lines
23 KiB
HTML
334 lines
23 KiB
HTML
<!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>
|