118 lines
4.5 KiB
HTML
118 lines
4.5 KiB
HTML
<!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>
|