feat(configurator): add web configuration console

firmware/tools/configurator/web/index.html

@@ -0,0 +1,74 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>Kaptan configurator</title>
+    <link rel="stylesheet" href="/styles.css">
+  </head>
+  <body>
+    <a class="skip-link" href="#main-content">Skip to configurator</a>
+    <main id="main-content">
+      <section id="connection" aria-labelledby="connection-heading">
+        <h2 id="connection-heading">Connection</h2>
+        <form id="connect-form">
+          <label for="path">Serial device path</label>
+          <div class="control-line">
+            <input id="path" required autocomplete="off" placeholder="/dev/ttyACM0">
+            <button id="connect-serial" type="submit">Connect serial</button>
+          </div>
+        </form>
+        <p id="connection-status" role="status" aria-live="polite">Disconnected.</p>
+        <p id="connect-error" class="error" role="alert" aria-live="assertive"></p>
+        <button id="disconnect" type="button" hidden>Disconnect</button>
+      </section>
+
+      <section id="configuration" aria-labelledby="configuration-heading" hidden>
+        <h2 id="configuration-heading">Board configuration</h2>
+        <details open>
+          <summary>Configuration status</summary>
+          <dl>
+            <dt>Schema</dt><dd><code id="schema-id">—</code></dd>
+            <dt>State</dt><dd id="config-state">—</dd>
+          </dl>
+        </details>
+
+        <aside id="restart-guidance" class="important" role="status" hidden>
+          Saved configuration becomes active after the controller restarts.
+        </aside>
+        <ul id="validation"></ul>
+        <form id="draft-fields" class="draft-fields"></form>
+        <div class="actions" aria-label="Configuration actions">
+          <button id="save" type="button">Save</button>
+        </div>
+      </section>
+
+      <section id="log-monitor" aria-labelledby="log-monitor-heading" hidden>
+        <h2 id="log-monitor-heading">Runtime logs</h2>
+        <p id="log-retention" class="hint"></p>
+        <ol id="log-entries" class="log-entries">
+          <li class="empty-log">No Kaptan logs received on this link.</li>
+        </ol>
+      </section>
+
+      <section id="packet-monitor" aria-labelledby="packet-monitor-heading" hidden>
+        <h2 id="packet-monitor-heading">Incoming MAVLink</h2>
+        <div class="table-scroll">
+          <table>
+            <thead>
+              <tr>
+                <th scope="col">Message</th>
+                <th scope="col">Source</th>
+                <th scope="col">Message ID</th>
+                <th scope="col">Frequency</th>
+                <th scope="col">Received</th>
+              </tr>
+            </thead>
+            <tbody id="packet-rows"></tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+    <script src="/app.js"></script>
+  </body>
+</html>