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="app" class="app" hidden>
  <aside class="sidebar">
    <div class="brand"><img src="icon.svg" alt="" width="28" height="28"><span>Pithos</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">Buckets</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>
  </aside>
  <main id="main"></main>
</div>

<div id="modal-root"></div>
<div id="toasts" class="toasts" aria-live="polite"></div>
<script type="module" src="app.js"></script>
</body>
</html>