Archived
69 lines
3.1 KiB
Python
69 lines
3.1 KiB
Python
|
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>
|
||
|
|
""")
|