hetzner-api-dyndns-records-webinterface/internal/web/templates/layout.html

{{define "layout"}}
<!doctype html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="color-scheme" content="light">
  <title>{{.Title}} · DNS Control</title>
  <link rel="stylesheet" href="/static/styles.css?v=features-24">
  <script src="/static/app.js?v=features-24" defer></script>
</head>
<body class="page-{{.Page}}">
  <a class="skip-link" href="#main">Zum Inhalt springen</a>
  {{if and (ne .Page "setup") (ne .Page "login")}}
  <div class="admin-layout">
    <aside class="sidebar">
      <a class="brand" href="/" aria-label="DNS Control Startseite">
        <span class="brand-mark">DD</span>
        <span><strong>DNS Control</strong><small>Hetzner + Pi-hole</small></span>
      </a>
      <div class="instance-state {{if not .UpdaterEnabled}}is-inactive{{end}}"><span></span> Dienst {{if .UpdaterEnabled}}aktiv{{else}}inaktiv{{end}}</div>
      <nav aria-label="Hauptnavigation">
        <a href="/" {{if eq .Page "dashboard"}}aria-current="page"{{end}}><span class="nav-icon">01</span>Übersicht</a>
        <a href="/domains" {{if eq .Page "domains"}}aria-current="page"{{end}}><span class="nav-icon">02</span>Domains</a>
        {{if .IsAdmin}}
        <a href="/pihole" {{if eq .Page "pihole"}}aria-current="page"{{end}}><span class="nav-icon">03</span>Pi-hole</a>
        <a href="/settings" {{if eq .Page "settings"}}aria-current="page"{{end}}><span class="nav-icon">04</span>Updater</a>
        <a href="/errors" {{if eq .Page "errors"}}aria-current="page"{{end}}><span class="nav-icon">05</span>Fehler</a>
        <a href="/access" {{if eq .Page "access"}}aria-current="page"{{end}}><span class="nav-icon">06</span>Zugriff</a>
        <a href="/system" {{if eq .Page "system"}}aria-current="page"{{end}}><span class="nav-icon">07</span>Update{{if .SoftwareUpdate.UpdateAvailable}}<i class="nav-update-dot" aria-label="Update verfügbar"></i>{{end}}</a>
        {{end}}
      </nav>
      <div class="sidebar-account">
        <a class="sidebar-account-link" href="/account" aria-label="Eigenes Konto öffnen"><span class="account-avatar">{{initial .User.DisplayName}}</span><span><strong>{{.User.DisplayName}}</strong><small>@{{.User.Username}} · {{if .IsAdmin}}Admin{{else}}Mitglied{{end}}</small></span></a>
        <form action="/logout" method="post">
          <input type="hidden" name="csrf" value="{{.CSRF}}">
          <button type="submit" title="Abmelden" aria-label="Abmelden">↪</button>
        </form>
      </div>
    </aside>
    <div class="workspace">
      <header class="workspace-bar">
        <div><span>DNS Control</span><strong>/ {{.Title}}</strong></div>
        {{if eq .Mode "lan"}}<span class="environment-badge">LAN · HTTP</span>{{else}}<span class="environment-badge secure">HTTPS</span>{{end}}
      </header>
      {{if and .IsAdmin .SoftwareUpdate.UpdateAvailable (ne .Page "system")}}
      <aside class="software-update-banner" aria-label="Software-Update verfügbar">
        <span class="software-update-banner-icon" aria-hidden="true">↗</span>
        <div><span>Neue Version verfügbar</span><strong>{{.SoftwareUpdate.LatestVersion}} ist bereit</strong></div>
        <div class="software-update-banner-actions">
          <a class="button button-quiet" href="/system">Details</a>
          {{if .SoftwareUpdate.AgentCompatible}}<form action="/system/update" method="post" data-software-update-form><input type="hidden" name="csrf" value="{{.CSRF}}"><input type="hidden" name="version" value="{{.SoftwareUpdate.LatestVersion}}"><button class="button button-primary" type="submit">Jetzt aktualisieren</button></form>{{end}}
        </div>
      </aside>
      {{end}}
      <main id="main" class="app-shell">
        {{template "content" .}}
      </main>
    </div>
  </div>
  {{else}}
  <main id="main" class="auth-shell">
    {{template "content" .}}
  </main>
  {{end}}
  {{if .Flash}}
  <div class="toast-region">
    <div class="toast toast-{{.Flash.Kind}}" data-toast role="{{if eq .Flash.Kind "error"}}alert{{else}}status{{end}}" aria-atomic="true">
      <span class="toast-icon" aria-hidden="true">{{if eq .Flash.Kind "error"}}!{{else if eq .Flash.Kind "info"}}i{{else}}✓{{end}}</span>
      <div class="toast-copy">
        <span class="toast-eyebrow">{{if eq .Flash.Kind "error"}}Bitte prüfen{{else if eq .Flash.Kind "info"}}Hinweis{{else}}Erledigt{{end}}</span>
        <p>{{.Flash.Message}}</p>
      </div>
      <button class="toast-close" type="button" data-toast-close aria-label="Meldung schließen">×</button>
      <span class="toast-progress" aria-hidden="true"></span>
    </div>
  </div>
  {{end}}
  {{if and .IsAdmin .SoftwareUpdate.UpdateAvailable (ne .Page "system")}}
  <div class="software-update-overlay" data-software-update-overlay hidden role="dialog" aria-modal="true" aria-labelledby="software-update-title-global">
    <div class="software-update-dialog">
      <div class="software-update-orbit" aria-hidden="true"><span>DC</span><i></i></div>
      <span class="section-label">Systemupdate</span><h2 id="software-update-title-global">Update wird vorbereitet</h2>
      <p data-software-update-message>Das neue Container-Image wird geladen.</p>
      <div class="software-update-progress"><i data-software-update-progress></i></div>
      <ol class="software-update-phases" aria-label="Update-Fortschritt"><li data-update-phase="pulling"><span>01</span>Image laden</li><li data-update-phase="restarting"><span>02</span>Dienst wechseln</li><li data-update-phase="verifying"><span>03</span>Healthcheck</li></ol>
      <button class="button button-quiet" type="button" data-software-update-close hidden>Schließen</button>
    </div>
  </div>
  {{end}}
</body>
</html>
{{end}}