153 lines
6.8 KiB
HTML
153 lines
6.8 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" />
|
|
<meta name="theme-color" content="#0a0a0f" />
|
|
<title>Transmission Manager</title>
|
|
<link rel="icon" href="/icon.png" type="image/png" sizes="128x128" />
|
|
<link rel="stylesheet" href="/styles.css" />
|
|
</head>
|
|
|
|
<body>
|
|
<header class="app-header">
|
|
<div class="header-inner">
|
|
<div class="brand">
|
|
<div class="logo" aria-hidden="true">
|
|
<img src="/icon.png" alt="" />
|
|
</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 class="speed-controls" id="speed-controls" aria-live="polite">
|
|
<button type="button" class="speed-toggle" id="alt-speed-toggle" aria-pressed="false" disabled>
|
|
<span class="speed-toggle-label">Alternative speed</span>
|
|
<span class="speed-toggle-state" id="alt-speed-state">Loading...</span>
|
|
</button>
|
|
<div class="speed-caps" id="speed-caps" aria-label="Active speed caps">
|
|
<span class="speed-cap hidden" id="speed-cap-down" title="Active download cap">↓ <span class="speed-cap-label">Down</span> <strong></strong></span>
|
|
<span class="speed-cap hidden" id="speed-cap-up" title="Active upload cap">↑ <span class="speed-cap-label">Up</span> <strong></strong></span>
|
|
</div>
|
|
<span class="speed-control-status" id="speed-control-status" role="status"></span>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="container">
|
|
<div class="app-tabs" role="tablist" aria-label="Views">
|
|
<button type="button" id="tab-torrents" class="app-tab active" role="tab" aria-selected="true" aria-controls="panel-torrents" tabindex="0">Torrents</button>
|
|
<button type="button" id="tab-scheduler" class="app-tab" role="tab" aria-selected="false" aria-controls="panel-scheduler" tabindex="-1">Scheduler</button>
|
|
</div>
|
|
|
|
<section id="panel-torrents" role="tabpanel" aria-labelledby="tab-torrents">
|
|
<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="availability">Availability</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>
|
|
</section>
|
|
|
|
<section id="panel-scheduler" role="tabpanel" aria-labelledby="tab-scheduler" hidden>
|
|
<div class="scheduler-heading">
|
|
<div>
|
|
<h2>Seed scheduler</h2>
|
|
<p>Completed torrents take turns when a scheduled seed has not uploaded for one hour.</p>
|
|
</div>
|
|
<form id="scheduler-settings" class="scheduler-settings">
|
|
<label for="scheduler-slots">Seed slots</label>
|
|
<input id="scheduler-slots" type="number" min="1" max="100" value="1" required />
|
|
<button type="submit" class="scheduler-button">Save</button>
|
|
</form>
|
|
</div>
|
|
<p id="scheduler-error" class="scheduler-error hidden" role="alert"></p>
|
|
<p id="scheduler-feedback" class="scheduler-feedback" role="status"></p>
|
|
<div class="scheduler-section-heading">
|
|
<h3>Completed torrents</h3>
|
|
<span id="scheduler-count"></span>
|
|
</div>
|
|
<div id="scheduler-torrents" class="scheduler-torrents"></div>
|
|
<p id="scheduler-empty" class="scheduler-empty hidden">No completed torrents are available for scheduling.</p>
|
|
<div class="scheduler-section-heading scheduler-history-heading">
|
|
<h3>Cycle history</h3>
|
|
</div>
|
|
<ol id="scheduler-history" class="scheduler-history"></ol>
|
|
<p id="scheduler-history-empty" class="scheduler-empty hidden">No cycles recorded yet.</p>
|
|
<button type="button" id="scheduler-history-more" class="scheduler-button secondary hidden">Load more</button>
|
|
</section>
|
|
</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>
|