init

2026-05-19 06:31:43 +02:00
parent 57812d9951
commit 6d30537825
10 changed files with 1590 additions and 1 deletions
@@ -0,0 +1,117 @@
+<!doctype html>
+<html lang="de">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>LinkForge · URL Shortener</title>
+  <meta name="description" content="Ein schneller, schöner URL-Shortener in Go mit PocketID Login.">
+  <link rel="stylesheet" href="/assets/styles.css">
+</head>
+<body>
+  <main class="page-shell">
+    <section class="hero">
+      <nav class="nav">
+        <a class="brand" href="/" aria-label="LinkForge Startseite">
+          <span class="brand-mark">↗</span>
+          <span>LinkForge</span>
+        </a>
+        <div class="nav-actions">
+          <span id="user-chip" class="user-chip" hidden></span>
+          <button id="logout-button" class="nav-pill nav-button" type="button" hidden>Abmelden</button>
+          <a id="login-link" class="nav-pill" href="/auth/login">Sicher anmelden</a>
+        </div>
+      </nav>
+
+      <div class="hero-grid">
+        <div class="hero-copy">
+          <p class="eyebrow">Veröffentlichte URLs flexibel steuern: Zieladressen ändern, ohne den eingebundenen Link anzupassen.</p>
+          <h1>Flexible Veröffentlichung. Veränderbare Endpunkte.</h1>
+          <p class="subline">
+            Anmelden, Kurzlinks erstellen und verwalten. Direkt im Browser.
+          </p>
+
+          <div class="stats" aria-label="Projekt Features">
+            <div><strong>Schutz</strong><span>Sichere Anmeldung</span></div>
+            <div><strong>Kontrolle</strong><span>Links ändern</span></div>
+            <div><strong>Sicherheit</strong><span>Maximale Kontrolle</span></div>
+          </div>
+        </div>
+
+        <section class="card" aria-labelledby="form-title">
+          <div id="logged-out-panel" class="login-panel">
+            <p class="card-kicker">Geschützter Bereich</p>
+            <h2>Anmelden erforderlich</h2>
+            <p class="hint bigger">Bitte anmelden, um Kurzlinks zu erstellen und vorhandenen Links zu bearbeiten.</p>
+            <a class="primary-link" href="/auth/login">Sicher anmelden</a>
+          </div>
+
+          <div id="app-panel" hidden>
+            <div class="card-header">
+              <div>
+                <p class="card-kicker">Neuer Kurzlink</p>
+                <h2 id="form-title">URL kürzen</h2>
+              </div>
+              <div class="sparkle" aria-hidden="true">✦</div>
+            </div>
+
+            <form id="shorten-form" class="form">
+              <label for="url">Lange URL</label>
+              <div class="input-row">
+                <input id="url" name="url" type="url" placeholder="https://example.com/sehr/langer/link" required>
+                <button id="submit-button" type="submit">Kürzen</button>
+              </div>
+              <p class="hint">Erlaubt sind HTTP- und HTTPS-URLs.</p>
+            </form>
+
+            <div id="alert" class="alert" role="alert" hidden></div>
+
+            <section id="result" class="result" hidden>
+              <p class="result-label">Kurzlinks</p>
+              <div class="result-box">
+                <a id="short-url" href="#" target="_blank" rel="noopener noreferrer"></a>
+                <button id="copy-button" type="button">Kopieren</button>
+              </div>
+              <p id="long-url" class="long-url"></p>
+            </section>
+          </div>
+        </section>
+      </div>
+    </section>
+
+    <section id="links-section" class="links-section" hidden>
+      <div class="section-heading">
+        <div>
+          <p class="eyebrow">Dashboard</p>
+          <h2>Eigene Links</h2>
+        </div>
+        <button id="refresh-button" class="ghost-button" type="button">Aktualisieren</button>
+      </div>
+
+      <div id="empty-state" class="empty-state" hidden>
+        Noch keine Links vorhanden. Erstelle oben deinen ersten Kurzlink.
+      </div>
+
+      <div id="links-list" class="links-list"></div>
+    </section>
+  </main>
+
+  <template id="link-template">
+    <article class="link-card">
+      <div class="link-main">
+        <a class="link-short" target="_blank" rel="noopener noreferrer"></a>
+        <p class="link-long"></p>
+      </div>
+      <form class="edit-form">
+        <input class="edit-input" type="url" required>
+        <div class="link-actions">
+          <button class="small-button save-button" type="submit">Speichern</button>
+          <button class="small-button copy-link-button" type="button">Kopieren</button>
+          <button class="small-button danger-button delete-button" type="button">Löschen</button>
+        </div>
+      </form>
+    </article>
+  </template>
+
+  <script src="/assets/app.js" defer></script>
+</body>
+</html>