47685f0d34
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>
95 lines
3.6 KiB
HTML
95 lines
3.6 KiB
HTML
{% 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 %}
|