theseus/bundled-addons/pithos/ui/index.html

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Pithos</title>
<link rel="icon" href="icon.svg" type="image/svg+xml">
<link rel="stylesheet" href="app.css">
</head>
<body>
<div id="signin" class="signin" hidden>
  <form class="card signin-card" id="signin-form">
    <img src="icon.svg" alt="" width="48" height="48">
    <h1>Pithos</h1>
    <p class="muted" id="signin-hint">Enter the console password.</p>
    <input type="password" id="signin-password" autocomplete="current-password" placeholder="Password" required>
    <button class="btn primary" type="submit">Sign in</button>
    <p class="error" id="signin-error" hidden></p>
  </form>
</div>

<div id="locked" class="signin" hidden>
  <div class="card signin-card">
    <img src="icon.svg" alt="" width="48" height="48">
    <h1>Pithos is locked</h1>
    <p class="muted">Unlock your Theseus vault with your PIN or master password to open Pithos.</p>
    <button class="btn primary" type="button" id="unlock-btn">Unlock</button>
  </div>
</div>

<div id="app" class="app" hidden>
  <aside class="sidebar">
    <div class="brand"><img src="icon.svg" alt="" width="28" height="28"><span>Pithos</span><span class="here" id="here"></span></div>
    <nav id="nav">
      <a href="#/start" data-view="start">Get started</a>
      <a href="#/overview" data-view="overview">Overview</a>
      <a href="#/buckets" data-view="buckets">Drives</a>
      <a href="#/users" data-view="users">Users &amp; keys</a>
      <a href="#/setup" data-view="setup">Sia connection</a>
      <a href="#/settings" data-view="settings">Settings</a>
      <a href="#/logs" data-view="logs">Logs</a>
    </nav>
    <div class="daemon-pill" id="daemon-pill"><span class="dot"></span><span class="label">…</span></div>
    <button class="nav-toggle" id="nav-toggle" type="button" aria-label="Menu" aria-expanded="false" aria-controls="nav">☰</button>
  </aside>
  <main id="main"></main>
</div>

<footer class="brandfoot" id="brandfoot" hidden>
  <a class="brandlink" id="brandlink" href="https://pithos.sia/" target="_blank" rel="noopener" title="Open pithos.sia"><img src="icon.svg" alt="" width="13" height="13"><span>pithos.sia</span></a>
  <span class="brandfoot-right">
    <button class="brandcheck" id="brandcheck" type="button" title="Check for updates" aria-label="Check for updates" hidden>↻</button>
    <button class="brandupd" id="brandupd" type="button" hidden></button>
    <span class="brandver" id="brandver"></span>
  </span>
</footer>
<div id="modal-root"></div>
<div id="toasts" class="toasts" aria-live="polite"></div>
<script type="module" src="app.js"></script>
</body>
</html>