status-indicators/settings/ui/index.html

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>Status Panel</title>
<link rel="stylesheet" href="/style.css">
</head>
<body>
<header class="top">
  <a class="brand" href="#overview"><span class="dot" id="hbdot" data-hint="watchdog heartbeat"></span><b>STATUS PANEL</b><span id="sitename" class="muted"></span></a>
  <nav class="nav" id="nav">
    <a href="#overview" data-hint="Is the room OK"><svg viewBox="0 0 24 24"><rect x="3" y="3" width="8" height="8" rx="1.5"/><rect x="13" y="3" width="8" height="8" rx="1.5"/><rect x="3" y="13" width="8" height="8" rx="1.5"/><rect x="13" y="13" width="8" height="8" rx="1.5"/></svg><span>Overview</span></a>
    <a href="#keys" data-hint="The deck: what each key watches and does"><svg viewBox="0 0 24 24"><rect x="2" y="6" width="20" height="12" rx="2"/><path d="M6 10h2M10 10h2M14 10h2M18 10h0M6 14h12"/></svg><span>Keys</span></a>
    <a href="#computers" data-hint="What runs where"><svg viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="12" rx="2"/><path d="M8 20h8M12 16v4"/></svg><span>Computers</span></a>
    <a href="#wiring" data-hint="What is connected to what, and the scripts on each computer"><svg viewBox="0 0 24 24"><rect x="2" y="3" width="7" height="5" rx="1"/><rect x="15" y="3" width="7" height="5" rx="1"/><rect x="8.5" y="16" width="7" height="5" rx="1"/><path d="M5.5 8v3.5h13V8M12 11.5V16"/></svg><span>Wiring</span></a>
    <a href="#settings" data-hint="Everything you can change"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3h0a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8v0a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z"/></svg><span>Settings</span></a>
    <a href="#logs" data-hint="What the watchdog did and saw"><svg viewBox="0 0 24 24"><path d="M4 6h16M4 12h16M4 18h10"/></svg><span>Logs</span></a>
    <a href="#history" data-hint="Every version ever applied"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg><span>History</span></a>
    <a href="#help" data-hint="How it works, the cheat sheet"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M9.5 9.5a2.5 2.5 0 1 1 3.5 2.3c-.7.4-1 1-1 1.7M12 17h0"/></svg><span>Help</span></a>
  </nav>
  <input id="search" type="search" placeholder="find…" aria-label="search" autocomplete="off">
  <div class="topright">
    <button class="icon" id="legendbtn" data-hint="What the colours mean">?</button>
    <button id="editbtn" class="toggle" data-hint="Switch Editing on with the PIN"><svg viewBox="0 0 24 24"><rect x="5" y="11" width="14" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg><span>Edit</span></button>
  </div>
</header>
<div id="legend" class="legend" hidden>
  <span><i class="l-ok"></i>OK</span>
  <span><i class="l-problem"></i>Problem</span>
  <span><i class="l-unknown"></i>Can't see from here</span>
  <span><i class="l-none"></i>Not needed</span>
  <span><i class="l-hand"></i>Done by hand</span>
  <span><i class="l-purple"></i>Watchdog down (every key purple)</span>
</div>
<div id="searchresults" class="searchresults" hidden></div>
<main id="main"><p class="muted">Loading…</p></main>
<div id="dialog" class="dialog" hidden></div>
<script src="/app.js"></script>
</body>
</html>