Initial commit: LinkVault – KI-gestützte Link-Sammlung
FastAPI + HTMX Web-App zum Speichern von Links mit automatischer KI-Kategorisierung, Zusammenfassung und semantischer Suche (OpenAI). Mehrbenutzer mit Login, SQLite-Persistenz, Docker/Docker-Compose-Setup. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Erik Thiele
42
app/templates/_link_card.html
Normal file
42
app/templates/_link_card.html
Normal file
@@ -0,0 +1,42 @@
|
||||
<div class="panel link-card" id="link-{{ link.id }}">
|
||||
<div style="display:flex; justify-content:space-between; gap:12px;">
|
||||
<div style="min-width:0;">
|
||||
<a href="{{ link.url }}" target="_blank" rel="noopener"
|
||||
style="font-weight:600; font-size:1.05rem;">{{ link.title or link.url }}</a>
|
||||
<div class="muted" style="font-size:.8rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;">
|
||||
{{ link.url }}
|
||||
</div>
|
||||
</div>
|
||||
<button class="danger"
|
||||
hx-delete="/links/{{ link.id }}"
|
||||
hx-target="#link-{{ link.id }}"
|
||||
hx-swap="outerHTML"
|
||||
hx-confirm="Diesen Link wirklich löschen?">✕</button>
|
||||
</div>
|
||||
|
||||
{% if link.summary %}
|
||||
<p style="margin:10px 0 8px;">{{ link.summary }}</p>
|
||||
{% elif link.status == 'no_content' %}
|
||||
<p class="muted" style="margin:10px 0 8px; font-style:italic;">
|
||||
Inhalt konnte nicht abgerufen werden – Kategorisierung anhand der URL.
|
||||
</p>
|
||||
{% endif %}
|
||||
|
||||
<div style="display:flex; flex-wrap:wrap; gap:6px; align-items:center; font-size:.8rem;">
|
||||
{% if link.category %}
|
||||
<span style="background:var(--accent); color:white; padding:2px 9px; border-radius:99px;">
|
||||
{{ link.category }}
|
||||
</span>
|
||||
{% endif %}
|
||||
{% if link.manufacturer %}
|
||||
<span style="background:#0e7490; color:#cffafe; padding:2px 9px; border-radius:99px;">
|
||||
🏢 {{ link.manufacturer }}
|
||||
</span>
|
||||
{% endif %}
|
||||
{% for tag in link.tag_list %}
|
||||
<span style="background:var(--panel2); color:var(--muted); padding:2px 9px; border-radius:99px;">
|
||||
#{{ tag }}
|
||||
</span>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
9
app/templates/_links_list.html
Normal file
9
app/templates/_links_list.html
Normal file
@@ -0,0 +1,9 @@
|
||||
{% if links %}
|
||||
{% for link in links %}
|
||||
{% include "_link_card.html" %}
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
<div id="empty-state" class="panel" style="text-align:center; color:var(--muted); padding:40px;">
|
||||
Noch keine Links gefunden. Füge oben deinen ersten Link hinzu.
|
||||
</div>
|
||||
{% endif %}
|
||||
67
app/templates/base.html
Normal file
67
app/templates/base.html
Normal file
@@ -0,0 +1,67 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>{% block title %}LinkVault{% endblock %}</title>
|
||||
<script src="https://unpkg.com/htmx.org@2.0.3"></script>
|
||||
<style>
|
||||
:root {
|
||||
--bg: #0f172a; --panel: #1e293b; --panel2: #273449;
|
||||
--text: #e2e8f0; --muted: #94a3b8; --accent: #6366f1;
|
||||
--accent-hover: #818cf8; --border: #334155; --danger: #ef4444;
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
body {
|
||||
margin: 0; font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
|
||||
background: var(--bg); color: var(--text); line-height: 1.5;
|
||||
}
|
||||
a { color: var(--accent-hover); text-decoration: none; }
|
||||
a:hover { text-decoration: underline; }
|
||||
header.topbar {
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
padding: 12px 24px; background: var(--panel); border-bottom: 1px solid var(--border);
|
||||
}
|
||||
header.topbar .brand { font-weight: 700; font-size: 1.2rem; }
|
||||
header.topbar .brand span { color: var(--accent-hover); }
|
||||
.user-info { color: var(--muted); font-size: .9rem; display: flex; gap: 12px; align-items: center; }
|
||||
button, input[type=submit] {
|
||||
background: var(--accent); color: white; border: none; border-radius: 8px;
|
||||
padding: 9px 16px; font-size: .95rem; cursor: pointer; font-weight: 500;
|
||||
}
|
||||
button:hover { background: var(--accent-hover); }
|
||||
button.ghost { background: transparent; border: 1px solid var(--border); color: var(--muted); }
|
||||
button.ghost:hover { background: var(--panel2); color: var(--text); }
|
||||
button.danger { background: transparent; color: var(--muted); padding: 4px 8px; font-size: .8rem; }
|
||||
button.danger:hover { color: var(--danger); background: transparent; }
|
||||
input[type=text], input[type=email], input[type=password], input[type=url] {
|
||||
background: var(--panel2); border: 1px solid var(--border); color: var(--text);
|
||||
border-radius: 8px; padding: 10px 12px; font-size: .95rem; width: 100%;
|
||||
}
|
||||
input:focus { outline: none; border-color: var(--accent); }
|
||||
.layout { display: flex; gap: 24px; max-width: 1200px; margin: 24px auto; padding: 0 24px; }
|
||||
.sidebar { width: 240px; flex-shrink: 0; }
|
||||
.main { flex: 1; min-width: 0; }
|
||||
.panel { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 16px; margin-bottom: 16px; }
|
||||
.facet-group h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 16px 0 8px; }
|
||||
.facet { display: flex; justify-content: space-between; padding: 5px 8px; border-radius: 6px; font-size: .9rem; }
|
||||
.facet:hover { background: var(--panel2); text-decoration: none; }
|
||||
.facet.active { background: var(--accent); color: white; }
|
||||
.facet .count { color: var(--muted); font-size: .8rem; }
|
||||
.facet.active .count { color: #e0e7ff; }
|
||||
.auth-wrap { max-width: 380px; margin: 8vh auto; }
|
||||
.auth-wrap .panel { padding: 28px; }
|
||||
.auth-wrap h1 { margin-top: 0; }
|
||||
.field { margin-bottom: 14px; }
|
||||
.field label { display: block; font-size: .85rem; color: var(--muted); margin-bottom: 5px; }
|
||||
.error { background: #7f1d1d; color: #fecaca; padding: 10px 12px; border-radius: 8px; margin-bottom: 14px; font-size: .9rem; }
|
||||
.muted { color: var(--muted); }
|
||||
.htmx-indicator { opacity: 0; transition: opacity .2s; }
|
||||
.htmx-request .htmx-indicator { opacity: 1; }
|
||||
.htmx-request.htmx-indicator { opacity: 1; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
{% block body %}{% endblock %}
|
||||
</body>
|
||||
</html>
|
||||
94
app/templates/index.html
Normal file
94
app/templates/index.html
Normal file
@@ -0,0 +1,94 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Meine Links · LinkVault{% endblock %}
|
||||
{% block body %}
|
||||
<header class="topbar">
|
||||
<div class="brand">Link<span>Vault</span></div>
|
||||
<div class="user-info">
|
||||
{% if not ai_enabled %}
|
||||
<span title="Kein OPENAI_API_KEY gesetzt – Auto-Kategorisierung deaktiviert">
|
||||
⚠️ KI aus
|
||||
</span>
|
||||
{% endif %}
|
||||
<span>{{ user.email }}</span>
|
||||
<form method="post" action="/logout" style="margin:0;">
|
||||
<button class="ghost" type="submit">Abmelden</button>
|
||||
</form>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="layout">
|
||||
<aside class="sidebar">
|
||||
<div class="panel">
|
||||
<a href="/" class="facet {% if not active_category and not active_manufacturer %}active{% endif %}">
|
||||
<span>📚 Alle Links</span>
|
||||
</a>
|
||||
|
||||
<div class="facet-group">
|
||||
<h3>Kategorien</h3>
|
||||
{% for name, count in facets.categories %}
|
||||
<a href="/?category={{ name | urlencode }}"
|
||||
class="facet {% if active_category == name %}active{% endif %}">
|
||||
<span>{{ name }}</span><span class="count">{{ count }}</span>
|
||||
</a>
|
||||
{% else %}
|
||||
<div class="muted" style="font-size:.85rem; padding:4px 8px;">noch keine</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<div class="facet-group">
|
||||
<h3>Hersteller / Quellen</h3>
|
||||
{% for name, count in facets.manufacturers %}
|
||||
<a href="/?manufacturer={{ name | urlencode }}"
|
||||
class="facet {% if active_manufacturer == name %}active{% endif %}">
|
||||
<span>{{ name }}</span><span class="count">{{ count }}</span>
|
||||
</a>
|
||||
{% else %}
|
||||
<div class="muted" style="font-size:.85rem; padding:4px 8px;">noch keine</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<main class="main">
|
||||
<div class="panel">
|
||||
<form hx-post="/links" hx-target="#links" hx-swap="afterbegin"
|
||||
hx-disabled-elt="button"
|
||||
hx-on::after-request="if(event.detail.successful){this.reset(); var e=document.getElementById('empty-state'); if(e) e.remove();}">
|
||||
<div style="display:flex; gap:8px;">
|
||||
<input type="url" name="url" placeholder="Link einfügen, z.B. https://hersteller.de/produkt" required>
|
||||
<button type="submit" style="white-space:nowrap;">
|
||||
<span class="htmx-indicator">⏳</span> Hinzufügen
|
||||
</button>
|
||||
</div>
|
||||
<div class="muted" style="font-size:.8rem; margin-top:6px;">
|
||||
Der Link wird automatisch geladen, zusammengefasst und einsortiert.
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="panel">
|
||||
<form id="searchform" onsubmit="return false;" style="margin:0;">
|
||||
<input type="hidden" name="category" value="{{ active_category }}">
|
||||
<input type="hidden" name="manufacturer" value="{{ active_manufacturer }}">
|
||||
<input type="text" name="q" value="{{ q }}"
|
||||
placeholder="🔍 Suche in Titel, Zusammenfassung, Tags..."
|
||||
hx-get="/search" hx-target="#links" hx-swap="innerHTML"
|
||||
hx-trigger="keyup changed delay:400ms, search"
|
||||
hx-include="#searchform">
|
||||
{% if ai_enabled %}
|
||||
<label class="muted" style="display:inline-flex; align-items:center; gap:6px; font-size:.85rem; margin-top:10px;">
|
||||
<input type="checkbox" name="semantic" value="1" {% if semantic %}checked{% endif %}
|
||||
hx-get="/search" hx-target="#links" hx-swap="innerHTML"
|
||||
hx-trigger="change" hx-include="#searchform" style="width:auto;">
|
||||
KI-Suche (findet auch sinnverwandte Treffer)
|
||||
</label>
|
||||
{% endif %}
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div id="links">
|
||||
{% include "_links_list.html" %}
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
{% endblock %}
|
||||
25
app/templates/login.html
Normal file
25
app/templates/login.html
Normal file
@@ -0,0 +1,25 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Anmelden · LinkVault{% endblock %}
|
||||
{% block body %}
|
||||
<div class="auth-wrap">
|
||||
<div class="panel">
|
||||
<h1>Link<span style="color:var(--accent-hover)">Vault</span></h1>
|
||||
<p class="muted">Melde dich an, um deine Link-Sammlung zu verwalten.</p>
|
||||
{% if error %}<div class="error">{{ error }}</div>{% endif %}
|
||||
<form method="post" action="/login">
|
||||
<div class="field">
|
||||
<label>E-Mail</label>
|
||||
<input type="email" name="email" required autofocus>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>Passwort</label>
|
||||
<input type="password" name="password" required>
|
||||
</div>
|
||||
<button type="submit" style="width:100%">Anmelden</button>
|
||||
</form>
|
||||
<p class="muted" style="margin-top:16px">
|
||||
Noch kein Konto? <a href="/register">Jetzt registrieren</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
24
app/templates/register.html
Normal file
24
app/templates/register.html
Normal file
@@ -0,0 +1,24 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Registrieren · LinkVault{% endblock %}
|
||||
{% block body %}
|
||||
<div class="auth-wrap">
|
||||
<div class="panel">
|
||||
<h1>Konto erstellen</h1>
|
||||
{% if error %}<div class="error">{{ error }}</div>{% endif %}
|
||||
<form method="post" action="/register">
|
||||
<div class="field">
|
||||
<label>E-Mail</label>
|
||||
<input type="email" name="email" required autofocus>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>Passwort (min. 6 Zeichen)</label>
|
||||
<input type="password" name="password" required minlength="6">
|
||||
</div>
|
||||
<button type="submit" style="width:100%">Registrieren</button>
|
||||
</form>
|
||||
<p class="muted" style="margin-top:16px">
|
||||
Bereits ein Konto? <a href="/login">Zur Anmeldung</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user