78 lines
3.2 KiB
HTML
78 lines
3.2 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>DevPlace Node</title>
|
|
<link rel="stylesheet" href="popup.css">
|
|
</head>
|
|
<body>
|
|
<main>
|
|
<div class="row">
|
|
<h1>DevPlace Node</h1>
|
|
<span class="status"><span class="dot" id="dot"></span><span id="state">off</span></span>
|
|
</div>
|
|
|
|
<section class="card" id="disclosure-card" hidden>
|
|
<p class="notice">Before this can run you must read what is shared.</p>
|
|
<a class="button primary" id="open-disclosure" href="disclosure.html" target="_blank" rel="noopener">Read the disclosure</a>
|
|
</section>
|
|
|
|
<section class="card">
|
|
<div class="row">
|
|
<label class="switch"><input type="checkbox" id="toggle"> <span id="toggle-label">Sharing off</span></label>
|
|
<span class="muted" id="label"></span>
|
|
</div>
|
|
<p class="muted" id="detail"></p>
|
|
<p class="error" id="error" role="alert"></p>
|
|
</section>
|
|
|
|
<section class="card">
|
|
<h2>Today</h2>
|
|
<div class="counters">
|
|
<div class="counter"><span class="muted">Requests</span><strong id="requests">0</strong></div>
|
|
<div class="counter"><span class="muted">Downloaded</span><strong id="down">0 B</strong></div>
|
|
<div class="counter"><span class="muted">Uploaded</span><strong id="up">0 B</strong></div>
|
|
<div class="counter"><span class="muted">Failed</span><strong id="failed">0</strong></div>
|
|
</div>
|
|
<p class="muted" id="lifetime"></p>
|
|
</section>
|
|
|
|
<section class="card">
|
|
<details id="settings-box">
|
|
<summary>Limits on this device</summary>
|
|
<form id="settings">
|
|
<div class="pair">
|
|
<label>Data per day (MB)<input type="number" id="bandwidth" min="1" step="1"></label>
|
|
<label>Parallel requests<input type="number" id="concurrency" min="1" step="1"></label>
|
|
</div>
|
|
<div class="pair">
|
|
<label>Active from<input type="time" id="from"></label>
|
|
<label>Active to<input type="time" id="to"></label>
|
|
</div>
|
|
<p class="muted">Leave the hours empty to share at any time. These limits are enforced here, whatever the server asks.</p>
|
|
<button type="submit">Save limits</button>
|
|
</form>
|
|
</details>
|
|
</section>
|
|
|
|
<section class="card">
|
|
<details id="connect-box">
|
|
<summary id="connect-summary">Connect to a server</summary>
|
|
<form id="connect">
|
|
<label>Server URL<input type="url" id="server" placeholder="https://devplace.net" required></label>
|
|
<label>Device secret<input type="password" id="secret" placeholder="dpn_..." autocomplete="off" required></label>
|
|
<label>Device label<input type="text" id="device-label" maxlength="64"></label>
|
|
<button type="submit" class="primary">Save and connect</button>
|
|
</form>
|
|
<p class="muted" id="saved"></p>
|
|
<button type="button" class="danger" id="forget" hidden>Forget this device</button>
|
|
</details>
|
|
</section>
|
|
|
|
<p class="muted"><a href="disclosure.html" target="_blank" rel="noopener">What is shared</a></p>
|
|
</main>
|
|
<script type="module" src="popup.js"></script>
|
|
</body>
|
|
</html>
|