Init

web/templates/index.html

@@ -0,0 +1,45 @@
+{{template "layout" .}}
+
+{{define "title"}}Estus Shots · Go + HTMX demo{{end}}
+
+{{define "content"}}
+<fieldset class="tui-fieldset" style="padding: 2rem;">
+  <legend>Estus Shots control panel</legend>
+  <p class="tui-text-white">
+    Estus Shots demonstrates a Go backend compiled into a single binary. The UI
+    uses <strong>TUI.CSS</strong> for a retro feel and <strong>HTMX</strong> for
+    partial page updates without JavaScript glue code.
+  </p>
+
+  <section style="margin-top: 1.5rem;">
+    <h2 class="tui-text-green">Interactive counter</h2>
+    <p class="tui-text-silver">
+      Click the button to trigger an <code>hx-post</code> request. The response
+      replaces only the counter panel.
+    </p>
+    <div
+      id="counter"
+      hx-get="/counter"
+      hx-trigger="load"
+      hx-swap="outerHTML"
+    >
+      <div class="tui-panel tui-panel-inline">Loading…</div>
+    </div>
+  </section>
+
+  <section style="margin-top: 1.5rem;">
+    <h2 class="tui-text-green">Server time</h2>
+    <p class="tui-text-silver">
+      A periodic <code>hx-get</code> refresh keeps this panel in sync with the
+      server clock.
+    </p>
+    <div
+      id="server-time"
+      hx-get="/time"
+      hx-trigger="load, every 5s"
+    >
+      <div class="tui-panel tui-panel-inline">Loading…</div>
+    </div>
+  </section>
+</fieldset>
+{{end}}