103 lines
4.3 KiB
HTML
103 lines
4.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<meta name="color-scheme" content="dark" />
|
|
<title>Transmission Manager</title>
|
|
<link rel="stylesheet" href="/styles.css" />
|
|
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='50' cy='50' r='48' fill='%230a0a0f'/><path d='M50 8 L20 78 L80 78 Z' fill='none' stroke='%2300d4ff' stroke-width='6'/></svg>" />
|
|
</head>
|
|
<body>
|
|
<header class="app-header">
|
|
<div class="header-inner">
|
|
<div class="brand">
|
|
<div class="logo" aria-hidden="true">
|
|
<svg viewBox="0 0 100 100">
|
|
<path d="M50 8 L20 78 L80 78 Z" fill="none" stroke="currentColor" stroke-width="6" stroke-linejoin="round"/>
|
|
<path d="M50 32 L38 68 L62 68 Z" fill="currentColor"/>
|
|
</svg>
|
|
</div>
|
|
<div class="brand-text">
|
|
<h1>Transmission</h1>
|
|
<span class="brand-sub">Manager</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="header-stats" id="header-stats" aria-live="polite">
|
|
<div class="stat-pill" data-stat="torrents">
|
|
<span class="stat-ico" aria-hidden="true">▦</span>
|
|
<span class="stat-label">Torrents</span>
|
|
<span class="stat-value" id="stat-torrents">—</span>
|
|
</div>
|
|
<div class="stat-pill download" data-stat="dl">
|
|
<span class="stat-ico" aria-hidden="true">↓</span>
|
|
<span class="stat-label">Down</span>
|
|
<span class="stat-value" id="stat-dl">—</span>
|
|
</div>
|
|
<div class="stat-pill upload" data-stat="ul">
|
|
<span class="stat-ico" aria-hidden="true">↑</span>
|
|
<span class="stat-label">Up</span>
|
|
<span class="stat-value" id="stat-ul">—</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="container">
|
|
<div class="toolbar">
|
|
<input type="search" id="filter" class="filter-input" placeholder="Filter torrents…" autocomplete="off" />
|
|
<div class="sort-group" role="group" aria-label="Sort torrents">
|
|
<button class="sort-btn" data-sort="name">Name</button>
|
|
<button class="sort-btn" data-sort="progress">Progress</button>
|
|
<button class="sort-btn active" data-sort="status">Status</button>
|
|
<button class="sort-btn" data-sort="ratio">Ratio</button>
|
|
<button class="sort-btn" data-sort="size">Size</button>
|
|
<button class="sort-btn" data-sort="speed">Speed</button>
|
|
<button class="sort-btn" data-sort="peer100">100% Peers</button>
|
|
</div>
|
|
<div class="toolbar-actions">
|
|
<label class="interval-control" for="refresh-interval">
|
|
<span class="sr-only">Refresh interval</span>
|
|
<select id="refresh-interval" class="refresh-select" aria-label="Refresh interval">
|
|
<option value="1000">1s</option>
|
|
<option value="3000" selected>3s</option>
|
|
<option value="5000">5s</option>
|
|
<option value="10000">10s</option>
|
|
</select>
|
|
</label>
|
|
<div class="refresh-indicator" id="refresh-indicator" title="Auto-refreshes every 3s" role="status" aria-label="Auto-refresh active">
|
|
<span class="dot" aria-hidden="true"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<section id="torrents" class="torrent-list" aria-live="polite"></section>
|
|
|
|
<div id="empty-state" class="empty-state hidden">
|
|
<div class="empty-box">
|
|
<svg viewBox="0 0 100 100" aria-hidden="true">
|
|
<path d="M50 8 L20 78 L80 78 Z" fill="none" stroke="currentColor" stroke-width="5" stroke-linejoin="round" opacity="0.4"/>
|
|
</svg>
|
|
</div>
|
|
<p class="empty-title">No torrents</p>
|
|
<p class="empty-sub">Add torrents to your Transmission client to see them here.</p>
|
|
</div>
|
|
|
|
<div id="error-state" class="error-state hidden">
|
|
<p class="error-title">Connection error</p>
|
|
<p class="error-sub" id="error-msg">Could not reach the Transmission daemon.</p>
|
|
<p class="error-hint" id="error-hint">Retrying in 3s…</p>
|
|
</div>
|
|
</main>
|
|
|
|
<footer class="app-footer">
|
|
<span>transmission-manager</span>
|
|
<span class="footer-sep">·</span>
|
|
<span id="last-updated">—</span>
|
|
</footer>
|
|
|
|
<script src="/app.js"></script>
|
|
</body>
|
|
</html>
|