bc1be49a37
Advanced torrent client web UI aimed at power users, with a zero-dependency Node stub server (built-in http + SSE) serving live mock data. - Dense sortable/multi-select torrent grid with live updates - Detail panel: General/Trackers/Peers/Content/Pieces (resizable) - Sidebar filters: status, categories, tags, trackers - Create/delete categories and tags (sidebar + right-click) - Add via magnet or client-side-parsed .torrent upload - RSS, integrated search, and read-only engine views - Hand-drawn SVG icon set, dark theme, keyboard shortcuts Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
83 lines
4.1 KiB
HTML
83 lines
4.1 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<title>Naut · Torrent Console</title>
|
||
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><text y='14' font-size='14'>🛰️</text></svg>" />
|
||
<link rel="stylesheet" href="/css/styles.css" />
|
||
</head>
|
||
<body>
|
||
<div id="app">
|
||
<!-- Top toolbar -->
|
||
<header class="toolbar">
|
||
<div class="brand">
|
||
<span class="brand-mark">⬡</span>
|
||
<span class="brand-name">NAUT</span>
|
||
<span class="brand-sub">torrent console</span>
|
||
</div>
|
||
|
||
<div class="tb-actions">
|
||
<button class="btn" data-act="add" title="Add torrent / magnet (N)">
|
||
<svg viewBox="0 0 24 24" class="ic-svg"><path d="M12 5v14M5 12h14"/></svg> Add</button>
|
||
<div class="tb-sep"></div>
|
||
<button class="btn icon" data-act="resume" title="Resume (selection)">
|
||
<svg viewBox="0 0 24 24" class="ic-svg fill"><path d="M8 5.5v13l11-6.5z"/></svg></button>
|
||
<button class="btn icon" data-act="pause" title="Pause (selection)">
|
||
<svg viewBox="0 0 24 24" class="ic-svg fill"><rect x="6.5" y="5" width="3.5" height="14" rx="1"/><rect x="14" y="5" width="3.5" height="14" rx="1"/></svg></button>
|
||
<button class="btn icon" data-act="recheck" title="Force recheck">
|
||
<svg viewBox="0 0 24 24" class="ic-svg"><path d="M20.5 12a8.5 8.5 0 1 1-2.5-6"/><path d="M20.5 4v5h-5"/></svg></button>
|
||
<button class="btn icon danger" data-act="delete" title="Delete (Del)">
|
||
<svg viewBox="0 0 24 24" class="ic-svg"><path d="M4 6.5h16M9.5 6.5V4.5h5v2M17.5 6.5l-1 13.5a1.8 1.8 0 0 1-1.8 1.5H9.3a1.8 1.8 0 0 1-1.8-1.5l-1-13.5M10 10.5v7M14 10.5v7"/></svg></button>
|
||
<div class="tb-sep"></div>
|
||
<button class="btn icon" data-act="topPriority" title="Move to top of queue">
|
||
<svg viewBox="0 0 24 24" class="ic-svg"><path d="M5 4.5h14M12 20.5V9M7 14l5-5 5 5"/></svg></button>
|
||
<button class="btn icon" data-act="increasePriority" title="Queue up one">
|
||
<svg viewBox="0 0 24 24" class="ic-svg"><path d="M12 20V6M6.5 11.5L12 6l5.5 5.5"/></svg></button>
|
||
<button class="btn icon" data-act="decreasePriority" title="Queue down one">
|
||
<svg viewBox="0 0 24 24" class="ic-svg"><path d="M12 4v14M6.5 12.5L12 18l5.5-5.5"/></svg></button>
|
||
<button class="btn icon" data-act="bottomPriority" title="Move to bottom of queue">
|
||
<svg viewBox="0 0 24 24" class="ic-svg"><path d="M5 19.5h14M12 3.5V15M7 10l5 5 5-5"/></svg></button>
|
||
</div>
|
||
|
||
<div class="tb-spacer"></div>
|
||
|
||
<input id="quickFilter" class="quick-filter" type="search" placeholder="Filter torrents… (/)" />
|
||
|
||
<div class="tb-rates">
|
||
<span class="rate dl" title="Global download rate">▼ <b id="globalDl">–</b></span>
|
||
<span class="rate up" title="Global upload rate">▲ <b id="globalUp">–</b></span>
|
||
</div>
|
||
<button class="btn alt-toggle" data-act="altspeed" title="Toggle alternative speed limits">
|
||
<svg viewBox="0 0 24 24" class="ic-svg"><path d="M4 18a8 8 0 0 1 16 0M12 18l3.5-5"/><circle cx="12" cy="18" r="1.3" fill="currentColor" stroke="none"/></svg> Alt</button>
|
||
</header>
|
||
|
||
<div class="main">
|
||
<!-- Sidebar: status / categories / tags / trackers -->
|
||
<aside class="sidebar" id="sidebar"></aside>
|
||
|
||
<!-- Center: nav tabs + content -->
|
||
<section class="content">
|
||
<nav class="viewtabs" id="viewtabs">
|
||
<button class="vtab active" data-view="torrents">Torrents</button>
|
||
<button class="vtab" data-view="rss">RSS & Automation</button>
|
||
<button class="vtab" data-view="search">Search</button>
|
||
<button class="vtab" data-view="settings">Engine</button>
|
||
</nav>
|
||
|
||
<div class="view-host" id="viewHost"></div>
|
||
</section>
|
||
</div>
|
||
|
||
<!-- Status bar -->
|
||
<footer class="statusbar" id="statusbar"></footer>
|
||
</div>
|
||
|
||
<!-- Modal host -->
|
||
<div class="modal-backdrop" id="modalBackdrop" hidden>
|
||
<div class="modal" id="modal"></div>
|
||
</div>
|
||
|
||
<script type="module" src="/js/app.js"></script>
|
||
</body>
|
||
</html>
|