Refactor UI assets and harden quality checks

karldns/web/sections/__init__.py

@@ -0,0 +1 @@
+from __future__ import annotations

karldns/web/sections/public_home.py

@@ -0,0 +1,69 @@
+from __future__ import annotations
+
+from ..components import _code_window
+from ..html_utils import SafeHtml, escape, trusted
+
+
+def _public_home_hero(*, suffix: str, demo_update_url: str) -> SafeHtml:
+    return trusted(f"""
+        <section class="hero-band">
+          <div class="container text-center d-grid justify-items-center gap-3">
+            <img class="hero-logo" src="/logo.webp?v=3" alt="" width="80" height="80"
+              decoding="async" fetchpriority="high">
+            <h1>Dynamic DNS for home routers.</h1>
+            <div class="install-pill mx-auto" data-ui="hero-command">
+              <code>{escape(demo_update_url)}</code>
+            </div>
+            <p class="lead">
+              KarlDNS gives you a generated DynDNS hostname under {escape(suffix)}.
+              Add the private update URL to your router, or use it from a script.
+            </p>
+            <div class="d-flex gap-2 flex-wrap justify-content-center mt-2">
+              <form method="post" action="/" class="hero-action-form"
+                aria-label="Create a generated DynDNS hostname">
+                <button type="submit" class="btn btn-primary rounded-pill">Create hostname</button>
+              </form>
+              <a class="btn btn-outline-primary rounded-pill" href="#manual-updates">Manual updates</a>
+            </div>
+          </div>
+        </section>
+        """)
+
+
+def _setup_flow_section(*, create_demo: str, create_demo_command: str) -> SafeHtml:
+    return trusted(f"""
+        <section class="section section-compact">
+          <div class="container narrow text-center">
+            <p class="eyebrow">How it works</p>
+            <h2>No account needed.</h2>
+            <p class="section-copy mx-auto">Create a hostname, save the private values, register it, done.</p>
+            <ol class="flow-steps" aria-label="KarlDNS setup flow">
+              <li><strong>Create</strong><span>Random hostname and private links.</span></li>
+              <li><strong>Save</strong><span>Copy the secrets while they are shown.</span></li>
+              <li><strong>Register</strong><span>Activate the hostname when you are ready.</span></li>
+              <li><strong>Update</strong><span>Router, cron, or CNAME can use it.</span></li>
+            </ol>
+            {_code_window(
+                create_demo,
+                copy_label="update example",
+                class_name="mt-4",
+                copy_value=create_demo_command,
+            )}
+          </div>
+        </section>
+        """)
+
+
+def _manual_updates_section(*, manual_demo: str) -> SafeHtml:
+    return trusted(f"""
+        <section class="section" id="manual-updates">
+          <div class="container narrow text-center">
+            <h2>Update from a router or script.</h2>
+            <p class="lead mx-auto mt-3">
+              Works with FRITZ!Box, curl, cron, Home Assistant, OpenWrt, pfSense,
+              OPNsense, UniFi, MikroTik, and custom tools.
+            </p>
+            {_code_window(manual_demo, copy_label="manual update examples", class_name="manual-code text-start mt-4")}
+          </div>
+        </section>
+        """)