Administrator/real-debrid-downloader
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 467 Wiki Activity
4a883fb93f
real-debrid-downloader/design-mockups/command.html
Sucukdeluxe 96bcbd13d7 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>
2026-05-23 16:17:47 +02:00

298 lines
23 KiB
HTML
Raw Blame History

<!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>
Reference in New Issue View Git Blame Copy Permalink