refactor: zentrales Theme-System — alle CSS in theme.css
Quality Gate / 🛡️ Lint + Type Check + Tests (push) Failing after 14m39s
Quality Gate / 🛡️ Lint + Type Check + Tests (push) Failing after 14m39s
- 11 <style>-Blöcke (623 Zeilen) aus app.py entfernt - 1485 Zeilen theme.css mit CSS-Custom-Properties - Alle Design-Tokens als Variablen: Farben, Schrift, Abstände, Radien, Schatten - Body-Klassen (.public, .admin, .welcome, .toast-page, .legacy-table, .test-page) - Alle Herz-Buttons identisch: .stat-like-btn, .detail-like-btn, .comment-like-btn - Bei Design-Änderungen nur noch EINE Datei anpassen Noch 135 inline style='...' — kommen in separatem Refactoring
This commit is contained in:
Hermes Agent
@@ -1496,91 +1496,12 @@ def admin_dashboard():
|
||||
<head>
|
||||
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
|
||||
<title>BSN Intake — Admin</title>
|
||||
<style>
|
||||
* {{ margin:0; padding:0; box-sizing:border-box; }}
|
||||
:root {{ --accent:#20228a; --bg:#000000; --surface:#1c1c1e; --surface2:#2c2c2e; --text:#ffffff; --text2:rgba(255,255,255,0.6); --text3:rgba(255,255,255,0.38); --border:rgba(255,255,255,0.08); --radius:16px; --radius-sm:10px; --shadow:0 4px 24px rgba(0,0,0,0.4); }}
|
||||
body.light {{ --bg:#f2f2f7; --surface:#ffffff; --surface2:#f2f2f7; --text:#000000; --text2:rgba(0,0,0,0.55); --text3:rgba(0,0,0,0.3); --border:rgba(0,0,0,0.08); --shadow:0 2px 16px rgba(0,0,0,0.08); }}
|
||||
body {{ font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','Helvetica Neue',sans-serif; background:var(--bg); color:var(--text); min-height:100vh; min-height:100dvh; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }}
|
||||
|
||||
/* Glass header */
|
||||
.admin-header {{ position:sticky; top:0; z-index:100; background:rgba(28,28,30,0.72); backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px); border-bottom:1px solid var(--border); padding:0.75rem 1.25rem; }}
|
||||
body.light .admin-header {{ background:rgba(242,242,247,0.72); }}
|
||||
.admin-header-inner {{ max-width:1200px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:0.5rem; }}
|
||||
.admin-logo-wrap {{ display:flex; align-items:center; gap:0.5rem; }}
|
||||
.admin-logo-sub {{ font-size:0.7rem; font-weight:500; color:var(--text3); letter-spacing:0.03em; white-space:nowrap; }}
|
||||
.admin-header h1 {{ font-size:1.25rem; font-weight:700; letter-spacing:-0.02em; color:var(--text); }}
|
||||
.admin-header .meta {{ font-size:0.75rem; color:var(--text2); display:flex; gap:0.35rem; flex-wrap:wrap; align-items:center; }}
|
||||
.count-badge {{ background:var(--surface2); color:var(--text2); padding:0.3rem 0.7rem; border-radius:999px; font-size:0.7rem; font-weight:600; white-space:nowrap; }}
|
||||
.admin-btn {{ display:inline-block; padding:0.35rem 0.85rem; border-radius:999px; font-size:0.72rem; font-weight:600; text-decoration:none; transition:all 0.15s; white-space:nowrap; background:var(--surface2); color:var(--text2); border:1.5px solid transparent; }}
|
||||
.admin-btn:hover {{ background:var(--surface); color:var(--text); border-color:var(--border); }}
|
||||
.admin-btn.active {{ background:var(--accent); color:#fff; border-color:var(--accent); }}
|
||||
.admin-btn.secondary {{ background:transparent; color:var(--text3); }}
|
||||
.admin-btn.secondary:hover {{ color:var(--text); background:var(--surface2); }}
|
||||
.admin-header a {{ color:var(--accent); text-decoration:none; font-weight:500; }}
|
||||
.admin-header a:hover {{ opacity:0.8; }}
|
||||
|
||||
/* Main */
|
||||
.admin-main {{ max-width:1200px; margin:0 auto; padding:1rem 1.25rem 3rem; }}
|
||||
|
||||
/* Totals */
|
||||
.totals {{ display:flex; gap:0.5rem; margin-bottom:1rem; flex-wrap:wrap; }}
|
||||
.total-box {{ background:var(--surface); border-radius:var(--radius-sm); padding:0.5rem 1rem; font-size:0.82rem; font-weight:500; border:1px solid var(--border); }}
|
||||
.total-box strong {{ color:var(--accent); font-size:1rem; }}
|
||||
|
||||
/* Filter */
|
||||
.filter-bar {{ display:flex; gap:0.4rem; margin-bottom:1rem; flex-wrap:wrap; align-items:end; }}
|
||||
.filter-bar label {{ font-size:0.7rem; color:var(--text2); display:flex; flex-direction:column; gap:0.15rem; font-weight:500; }}
|
||||
.filter-bar select, .filter-bar input {{ background:var(--surface); color:var(--text); border:1px solid var(--border); border-radius:999px; padding:0.45rem 0.9rem; font-size:0.8rem; font-family:inherit; -webkit-appearance:none; appearance:none; }}
|
||||
.filter-bar select {{ padding-right:2rem; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'%3E%3C/path%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 0.6rem center; }}
|
||||
.filter-bar button {{ background:var(--accent); color:#fff; border:none; border-radius:999px; padding:0.45rem 1.2rem; font-size:0.8rem; font-weight:600; cursor:pointer; font-family:inherit; }}
|
||||
|
||||
/* Desktop table */
|
||||
.desktop-table {{ display:none; }}
|
||||
@media(min-width:768px){{ .desktop-table {{ display:block; }} .mobile-cards {{ display:none; }} }}
|
||||
.desktop-table table {{ width:100%; border-collapse:separate; border-spacing:0; font-size:0.82rem; }}
|
||||
.desktop-table th {{ text-align:left; padding:0.6rem 0.5rem; color:var(--text2); font-size:0.68rem; font-weight:600; text-transform:uppercase; letter-spacing:0.05em; border-bottom:1px solid var(--border); position:sticky; top:56px; background:var(--bg); }}
|
||||
.desktop-table td {{ padding:0.55rem 0.5rem; border-bottom:1px solid var(--border); font-size:0.8rem; }}
|
||||
.desktop-table tr {{ cursor:pointer; transition:background 0.12s; border-radius:var(--radius-sm); }}
|
||||
.desktop-table tbody tr:hover {{ background:var(--surface); }}
|
||||
.desktop-table tbody tr.row-new {{ border-left:3px solid var(--text3); }}
|
||||
.desktop-table tbody tr.row-published {{ border-left:3px solid var(--accent); }}
|
||||
.desktop-table tbody tr.row-flagged {{ border-left:3px solid #dc3545; }}
|
||||
|
||||
/* Mobile cards */
|
||||
.mobile-cards {{ display:flex; flex-direction:column; gap:0.5rem; }}
|
||||
.mobile-card {{ display:block; background:var(--surface); border-radius:var(--radius-sm); padding:0.8rem 1rem; text-decoration:none; color:var(--text); border-left:4px solid var(--text3); transition:transform 0.12s; }}
|
||||
.mobile-card:active {{ transform:scale(0.985); }}
|
||||
.mobile-card.row-published {{ border-left-color:var(--accent); }}
|
||||
.mobile-card.row-flagged {{ border-left-color:#dc3545; }}
|
||||
.mc-top {{ display:flex; justify-content:space-between; align-items:center; margin-bottom:0.3rem; }}
|
||||
.mc-id {{ font-weight:700; font-size:0.85rem; color:var(--accent); }}
|
||||
.mc-body {{ font-size:0.82rem; font-weight:500; }}
|
||||
.mc-meta {{ font-size:0.72rem; color:var(--text2); margin-top:0.15rem; }}
|
||||
.mc-snippet {{ font-size:0.75rem; color:var(--text3); margin-top:0.25rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }}
|
||||
.mc-time {{ font-size:0.65rem; color:var(--text3); margin-top:0.2rem; }}
|
||||
|
||||
/* Badges */
|
||||
.badge {{ display:inline-block; padding:0.15rem 0.5rem; border-radius:999px; font-size:0.65rem; font-weight:600; text-transform:uppercase; letter-spacing:0.03em; }}
|
||||
.badge-new {{ background:rgba(255,255,255,0.08); color:var(--text2); }}
|
||||
.badge-processing {{ background:rgba(255,193,7,0.18); color:#ffc107; }}
|
||||
.badge-done {{ background:rgba(40,167,69,0.18); color:#30d158; }}
|
||||
.badge-flagged {{ background:rgba(220,53,69,0.18); color:#ff453a; }}
|
||||
.badge-gdpr_deleted {{ background:rgba(255,0,0,0.18); color:#ff453a; }}
|
||||
.badge-published {{ background:rgba(32,34,138,0.2); color:#5e5ce6; }}
|
||||
|
||||
/* Triage badges */
|
||||
.triage-badge {{ display:inline-block; font-size:1rem; cursor:help; margin-right:0.3rem; vertical-align:middle; transition:transform 0.15s; }}
|
||||
.triage-badge:hover {{ transform:scale(1.2); }}
|
||||
|
||||
/* Theme toggle */
|
||||
.theme-toggle {{ position:fixed; bottom:1.25rem; right:1.25rem; z-index:999; width:48px; height:48px; border-radius:50%; cursor:pointer; font-size:1.2rem; border:1px solid var(--border); background:var(--surface); color:var(--text); box-shadow:var(--shadow); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); display:flex; align-items:center; justify-content:center; }}
|
||||
body.light .theme-toggle {{ background:rgba(255,255,255,0.85); }}
|
||||
</style>
|
||||
<script>setTimeout(function(){{location.reload()}},30000);
|
||||
function toggleTheme(){{document.body.classList.toggle('light');localStorage.setItem('theme',document.body.classList.contains('light')?'light':'dark');}}
|
||||
</script>
|
||||
<link rel="stylesheet" href="/static/theme.css">
|
||||
</head>
|
||||
<body>
|
||||
<body class="admin">
|
||||
<header class="admin-header">
|
||||
<div class="admin-header-inner">
|
||||
<div class="admin-logo-wrap">
|
||||
@@ -1668,20 +1589,9 @@ def admin_comments():
|
||||
<html lang="de">
|
||||
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<title>Kommentar-Moderation — BSN Admin</title>
|
||||
<style>
|
||||
* {{margin:0;padding:0;box-sizing:border-box;}}
|
||||
body {{font-family:'Inter',sans-serif;background:#f5f3ee;color:#1a1a2e;padding:1rem;}}
|
||||
h1 {{color:#20228a;margin-bottom:0.5rem;font-size:1.3rem;}}
|
||||
table {{width:100%;border-collapse:collapse;font-size:0.85rem;}}
|
||||
th {{background:#20228a;color:#fff;padding:0.6rem 0.5rem;text-align:left;font-size:0.75rem;}}
|
||||
td {{padding:0.5rem;border-bottom:1px solid #eee;vertical-align:top;}}
|
||||
tr:hover {{background:#f8f6f0;}}
|
||||
.back-link {{display:inline-block;color:#20228a;text-decoration:none;font-weight:600;margin-bottom:1rem;}}
|
||||
.admin-header {{display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem;}}
|
||||
.admin-header img {{height:34px;width:auto;}}
|
||||
@media(max-width:700px){{table,thead,tbody,th,td,tr{{display:block;}}th{{display:none;}}tr{{margin-bottom:1rem;border:1px solid #eee;border-radius:8px;padding:0.5rem;}}td{{border:none;padding:0.2rem 0;}}}}
|
||||
</style></head>
|
||||
<body>
|
||||
<link rel="stylesheet" href="/static/theme.css">
|
||||
</head>
|
||||
<body class="admin">
|
||||
<div class="admin-header">
|
||||
<img src="/static/logo.png" alt="BSN">
|
||||
<div><h1>💬 Kommentar-Moderation</h1><a href="/admin" class="back-link">← Zurück zum Admin</a></div>
|
||||
@@ -1725,12 +1635,8 @@ def test_page():
|
||||
return """<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head><meta charset="UTF-8"><title>Simulierter Test</title>
|
||||
<style>
|
||||
body { font-family:-apple-system,sans-serif; background:#0f0f1a; color:#e0e0e0; padding:2rem; }
|
||||
h1 { color:#4ecdc4; }
|
||||
pre { background:#16213e; padding:1rem; border-radius:8px; overflow-x:auto; font-size:0.8rem; line-height:1.5; }
|
||||
a { color:#4ecdc4; }
|
||||
</style></head>
|
||||
<link rel="stylesheet" href="/static/theme.css">
|
||||
</head>
|
||||
<body>
|
||||
<img src="/static/logo.png" alt="Brettspiel News" style="height:34px;width:auto;margin-bottom:1.5rem;display:block;"><h1>🧪 Simulierter WhatsApp Test</h1>
|
||||
<p>Dieser curl-Befehl sendet eine Fake-WhatsApp-Nachricht an den lokalen Webhook:</p>
|
||||
@@ -1857,104 +1763,9 @@ def submission_detail(sub_id: int):
|
||||
<head>
|
||||
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
|
||||
<title>#{row['id']} — BSN</title>
|
||||
<style>
|
||||
* {{ margin:0; padding:0; box-sizing:border-box; }}
|
||||
:root {{ --accent:#20228a; --accent2:#5e5ce6; --bg:#000000; --surface:#1c1c1e; --surface2:#2c2c2e; --text:#ffffff; --text2:rgba(255,255,255,0.6); --text3:rgba(255,255,255,0.38); --border:rgba(255,255,255,0.08); --radius:16px; --radius-sm:10px; --radius-pill:999px; }}
|
||||
body.light {{ --bg:#f2f2f7; --surface:#ffffff; --surface2:#f2f2f7; --text:#000000; --text2:rgba(0,0,0,0.55); --text3:rgba(0,0,0,0.3); --border:rgba(0,0,0,0.08); }}
|
||||
body {{ font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','Helvetica Neue',sans-serif; background:var(--bg); color:var(--text); min-height:100vh; min-height:100dvh; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }}
|
||||
|
||||
/* Glass header */
|
||||
.detail-header {{ position:sticky; top:0; z-index:100; background:rgba(28,28,30,0.72); backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px); border-bottom:1px solid var(--border); padding:0.75rem 1.25rem; }}
|
||||
body.light .detail-header {{ background:rgba(242,242,247,0.72); }}
|
||||
.detail-header-inner {{ max-width:720px; margin:0 auto; display:flex; align-items:center; gap:0.75rem; flex-wrap:wrap; }}
|
||||
.detail-header h1 {{ font-size:1.1rem; font-weight:700; letter-spacing:-0.02em; }}
|
||||
.detail-header .subtitle {{ font-size:0.7rem; color:var(--text2); }}
|
||||
|
||||
/* Main */
|
||||
.detail-main {{ max-width:720px; margin:0 auto; padding:1rem 1.25rem 6rem; }}
|
||||
|
||||
/* Toolbar */
|
||||
.toolbar {{ display:flex; gap:0.5rem; margin-bottom:1rem; flex-wrap:wrap; align-items:center; }}
|
||||
.toolbar form {{ margin:0; display:flex; gap:0.5rem; flex-wrap:wrap; }}
|
||||
|
||||
/* Buttons — iOS pill style */
|
||||
.btn {{ padding:0.55rem 1.2rem; border-radius:var(--radius-pill); text-decoration:none; font-weight:600; font-size:0.82rem; border:none; cursor:pointer; transition:all 0.15s ease; display:inline-flex; align-items:center; gap:0.3rem; font-family:inherit; -webkit-tap-highlight-color:transparent; touch-action:manipulation; min-height:44px; }}
|
||||
.btn:active {{ transform:scale(0.96); }}
|
||||
.btn-back {{ background:var(--surface); color:var(--text2); border:1px solid var(--border); }}
|
||||
.btn-back:hover {{ background:var(--surface2); }}
|
||||
.btn-done {{ background:rgba(48,209,88,0.18); color:#30d158; }}
|
||||
.btn-done:hover {{ background:rgba(48,209,88,0.28); }}
|
||||
.btn-delete {{ background:rgba(255,69,58,0.12); color:#ff453a; border:1px solid rgba(255,69,58,0.2); }}
|
||||
.btn-delete:hover {{ background:rgba(255,69,58,0.2); }}
|
||||
|
||||
/* Toggle switch — publish bar */
|
||||
.toggle-switch {{ position:relative; display:inline-block; width:40px; height:22px; flex-shrink:0; }}
|
||||
.toggle-switch input {{ opacity:0; width:0; height:0; }}
|
||||
.toggle-slider {{ position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0; background:var(--surface2); border-radius:22px; transition:all 0.25s ease; border:1.5px solid var(--border); }}
|
||||
.toggle-slider:before {{ content:""; position:absolute; height:16px; width:16px; left:2px; bottom:2px; background:#fff; border-radius:50%; transition:all 0.25s ease; box-shadow:0 1px 3px rgba(0,0,0,0.2); }}
|
||||
.toggle-switch input:checked + .toggle-slider {{ background:var(--accent); border-color:var(--accent); }}
|
||||
.toggle-switch input:checked + .toggle-slider:before {{ transform:translateX(18px); }}
|
||||
.btn-flag {{ background:rgba(255,69,58,0.1); color:#ff453a; }}
|
||||
.btn-flag:hover {{ background:rgba(255,69,58,0.2); }}
|
||||
.btn-publish {{ background:rgba(32,34,138,0.2); color:var(--accent2); border:1px solid var(--accent); }}
|
||||
.btn-publish:hover {{ background:var(--accent); color:#fff; }}
|
||||
.btn-publish-big {{ background:var(--accent) !important; color:#fff !important; padding:0.7rem 2rem !important; font-size:0.95rem !important; font-weight:700 !important; letter-spacing:-0.01em !important; border:none !important; box-shadow:0 4px 16px rgba(32,34,138,0.4); }}
|
||||
.btn-publish-big:hover {{ background:var(--accent2) !important; box-shadow:0 6px 20px rgba(32,34,138,0.6); }}
|
||||
.btn:disabled {{ opacity:0.35; cursor:not-allowed; }}
|
||||
body.light .btn-publish-big {{ color:#fff !important; }}
|
||||
|
||||
/* Cards */
|
||||
.card {{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.25rem; margin-bottom:0.75rem; }}
|
||||
.card-header {{ font-size:0.78rem; font-weight:600; color:var(--accent2); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:1rem; }}
|
||||
|
||||
/* Fields */
|
||||
.field {{ margin-bottom:1rem; }}
|
||||
.field:last-child {{ margin-bottom:0; }}
|
||||
.field-label {{ font-size:0.7rem; color:var(--text2); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:0.3rem; font-weight:600; }}
|
||||
.field-value {{ font-size:0.9rem; line-height:1.5; word-break:break-word; }}
|
||||
.field-value pre {{ white-space:pre-wrap; word-break:break-word; font-family:'SF Mono',ui-monospace,'JetBrains Mono',monospace; font-size:0.82rem; background:var(--surface2); padding:0.8rem; border-radius:var(--radius-sm); line-height:1.5; }}
|
||||
|
||||
/* Forms — iOS style */
|
||||
input, textarea {{ width:100%; background:var(--surface2); color:var(--text); border:2px solid var(--border); border-radius:var(--radius-sm); padding:0.65rem 0.85rem; font-family:inherit; font-size:0.88rem; transition:border-color 0.15s; -webkit-appearance:none; appearance:none; }}
|
||||
input:focus, textarea:focus {{ outline:none; border-color:var(--accent); }}
|
||||
textarea {{ resize:vertical; min-height:80px; }}
|
||||
|
||||
/* Badges */
|
||||
.badge {{ display:inline-block; padding:0.18rem 0.6rem; border-radius:var(--radius-pill); font-size:0.65rem; font-weight:600; text-transform:uppercase; letter-spacing:0.05em; }}
|
||||
.badge-new {{ background:rgba(255,255,255,0.08); color:var(--text2); }}
|
||||
.badge-processing {{ background:rgba(255,193,7,0.18); color:#ffc107; }}
|
||||
.badge-done {{ background:rgba(48,209,88,0.18); color:#30d158; }}
|
||||
.badge-flagged {{ background:rgba(255,69,58,0.18); color:#ff453a; }}
|
||||
.badge-gdpr_deleted {{ background:rgba(255,0,0,0.18); color:#ff453a; }}
|
||||
.badge-published {{ background:rgba(32,34,138,0.2); color:var(--accent2); }}
|
||||
|
||||
/* Media items */
|
||||
.media-item {{ position:relative; margin:0.5rem 0; }}
|
||||
.media-item label {{ position:absolute; top:8px; right:8px; z-index:10; background:rgba(0,0,0,0.6); padding:0.3rem 0.6rem; border-radius:var(--radius-pill); display:flex; align-items:center; gap:0.3rem; cursor:pointer; font-size:0.72rem; color:var(--accent2); backdrop-filter:blur(8px); }}
|
||||
.media-item img, .media-item video {{ max-width:100%; border-radius:var(--radius-sm); display:block; }}
|
||||
.media-item audio {{ width:100%; margin:0.3rem 0; }}
|
||||
|
||||
/* Halle badge */
|
||||
.halle-badge {{ display:inline-flex; align-items:center; gap:0.3rem; background:var(--accent); color:#fff; padding:0.35rem 0.8rem; border-radius:var(--radius-pill); font-size:0.82rem; font-weight:700; letter-spacing:-0.01em; }}
|
||||
|
||||
/* Danger zone card */
|
||||
.danger-card {{ border-color:rgba(255,69,58,0.3) !important; }}
|
||||
|
||||
/* Mobile bottom bar */
|
||||
.bottom-bar {{ display:none; position:fixed; bottom:0; left:0; right:0; z-index:99; padding:0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom,0px)); background:rgba(28,28,30,0.88); backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px); border-top:1px solid var(--border); }}
|
||||
body.light .bottom-bar {{ background:rgba(242,242,247,0.88); }}
|
||||
@media(max-width:767px){{ .bottom-bar {{ display:flex; gap:0.5rem; justify-content:center; flex-wrap:wrap; }} }}
|
||||
|
||||
/* Theme toggle */
|
||||
.theme-toggle {{ position:fixed; bottom:1.25rem; right:1.25rem; z-index:999; width:48px; height:48px; border-radius:50%; cursor:pointer; font-size:1.2rem; border:1px solid var(--border); background:var(--surface); color:var(--text); box-shadow:0 4px 24px rgba(0,0,0,0.4); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); display:flex; align-items:center; justify-content:center; }}
|
||||
@media(max-width:767px){{ .theme-toggle {{ bottom:5rem; }} }}
|
||||
body.light .theme-toggle {{ background:rgba(255,255,255,0.85); }}
|
||||
|
||||
img, video {{ border-radius:var(--radius-sm); }}
|
||||
audio {{ width:100%; margin:0.3rem 0; }}
|
||||
</style>
|
||||
<link rel="stylesheet" href="/static/theme.css">
|
||||
</head>
|
||||
<body>
|
||||
<body class="admin">
|
||||
<header class="detail-header">
|
||||
<div class="detail-header-inner">
|
||||
<a href="/admin" class="btn btn-back" style="min-height:36px;padding:0.35rem 0.8rem;font-size:0.78rem;">← Zurück</a>
|
||||
@@ -2235,17 +2046,8 @@ def submission_done(sub_id: int):
|
||||
db.commit()
|
||||
return """<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head><meta charset="UTF-8"><style>
|
||||
* { margin:0; padding:0; box-sizing:border-box; }
|
||||
body { font-family:-apple-system,sans-serif; background:#0f0f1a; color:#e0e0e0; display:flex; align-items:center; justify-content:center; min-height:100vh; }
|
||||
.toast { background:#1a3a1a; color:#28a745; padding:1.5rem 2.5rem; border-radius:8px; font-size:1.15rem; font-weight:600; text-align:center; box-shadow:0 4px 32px rgba(0,0,0,0.6); animation: fadeInOut 1.8s ease forwards; }
|
||||
@keyframes fadeInOut {
|
||||
0%% { opacity:0; transform:scale(0.9); }
|
||||
15%% { opacity:1; transform:scale(1); }
|
||||
75%% { opacity:1; transform:scale(1); }
|
||||
100%% { opacity:0; transform:scale(0.95); }
|
||||
}
|
||||
</style></head>
|
||||
<head><meta charset="UTF-8"><link rel="stylesheet" href="/static/theme.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="toast">✅ Beitrag als <strong>erledigt</strong> markiert</div>
|
||||
<script>setTimeout(function(){ window.location='/admin'; }, 1800);</script>
|
||||
@@ -2345,17 +2147,8 @@ def submission_delete(sub_id: int):
|
||||
db.commit()
|
||||
return f"""<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head><meta charset="UTF-8"><style>
|
||||
* {{ margin:0; padding:0; box-sizing:border-box; }}
|
||||
body {{ font-family:-apple-system,sans-serif; background:#0f0f1a; color:#e0e0e0; display:flex; align-items:center; justify-content:center; min-height:100vh; }}
|
||||
.toast {{ background:rgba(220,53,69,0.15); color:#dc3545; padding:1.5rem 2.5rem; border-radius:8px; font-size:1.15rem; font-weight:600; text-align:center; box-shadow:0 4px 32px rgba(0,0,0,0.6); animation: fadeInOut 1.8s ease forwards; }}
|
||||
@keyframes fadeInOut {{
|
||||
0% {{ opacity:0; transform:scale(0.9); }}
|
||||
15% {{ opacity:1; transform:scale(1); }}
|
||||
75% {{ opacity:1; transform:scale(1); }}
|
||||
100% {{ opacity:0; transform:scale(0.95); }}
|
||||
}}
|
||||
</style></head>
|
||||
<head><meta charset="UTF-8"><link rel="stylesheet" href="/static/theme.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="toast">🗑️ Beitrag #{sub_id} gelöscht</div>
|
||||
<script>setTimeout(function(){{ window.location='/admin'; }}, 1800);</script>
|
||||
@@ -2652,14 +2445,8 @@ def public_frontend():
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
* { margin:0; padding:0; box-sizing:border-box; }
|
||||
body { font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; background:#FCE812; color:#1a1a2e; display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:100vh; }
|
||||
.empty { text-align:center; padding:3rem; }
|
||||
.empty h1 { color:#20228a; font-size:2rem; font-weight:800; margin-bottom:0.8rem; }
|
||||
.empty p { color:#666; font-size:1.1rem; max-width:400px; line-height:1.6; }
|
||||
.empty .logo { font-size:3rem; margin-bottom:1.5rem; }
|
||||
</style></head>
|
||||
<link rel="stylesheet" href="/static/theme.css">
|
||||
</head>
|
||||
<body><div class="empty"><div class="logo">\U0001f3b2</div><h1>Bald geht's los!</h1><p>Noch keine ver\u00f6ffentlichten Beitr\u00e4ge. Komm bald wieder — die Community f\u00fcllt diesen Ort mit spannenden Geschichten.</p></div></body>
|
||||
</html>"""
|
||||
|
||||
@@ -2862,286 +2649,7 @@ def public_frontend():
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400;14..32,500;14..32,600;14..32,700;14..32,800&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
* { margin:0; padding:0; box-sizing:border-box; }
|
||||
body { font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; background:#F9FAFB; color:#1F2937; min-height:100vh; -webkit-font-smoothing:antialiased; }
|
||||
|
||||
/* Header — clean anthracite */
|
||||
.site-header { background:#1F2937; padding:0.75rem 1.2rem; display:flex; align-items:center; flex-wrap:wrap; gap:0.5rem; position:sticky; top:0; z-index:100; box-shadow:0 1px 3px rgba(0,0,0,0.08); }
|
||||
.site-logo { display:flex; align-items:center; gap:0.5rem; text-decoration:none; color:#F9FAFB; min-width:0; flex-shrink:1; }
|
||||
.site-logo .logo-icon { width:36px; height:36px; background:#374151; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:1.3rem; flex-shrink:0; }
|
||||
.site-logo .logo-text { font-weight:800; font-size:1.05rem; letter-spacing:-0.01em; color:#F9FAFB; white-space:nowrap; }
|
||||
.site-logo .logo-sub { font-weight:400; color:#9CA3AF; font-size:0.75rem; }
|
||||
.site-logo-sub { font-size:0.68rem; font-weight:500; color:#9CA3AF; letter-spacing:0.03em; margin-left:0.3rem; white-space:normal; word-break:break-word; }
|
||||
.site-header .header-right { margin-left:auto; }
|
||||
.site-header .header-right a { color:#9CA3AF; text-decoration:none; font-size:0.8rem; transition:color 0.2s; }
|
||||
.site-header .header-right a:hover { color:#F9FAFB; }
|
||||
.filter-toggle-btn { background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.12); border-radius:8px; color:#D1D5DB; font-size:0.78rem; font-weight:600; cursor:pointer; padding:0.35rem 0.7rem; line-height:1.3; transition:all 0.15s; margin-left:0.5rem; font-family:inherit; }
|
||||
.filter-toggle-btn:hover { background:rgba(255,255,255,0.15); border-color:rgba(255,255,255,0.25); }
|
||||
.filter-toggle-btn.active { background:rgba(255,255,255,0.2); border-color:#D1D5DB; }
|
||||
.filter-collapsed { display:none; }
|
||||
.filter-backdrop { position:fixed; inset:0; z-index:100000; background:rgba(0,0,0,0.2); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); display:none; }
|
||||
.filter-backdrop.open { display:flex; align-items:flex-start; justify-content:center; padding-top:4rem; }
|
||||
.filter-overlay { background:#fff; border-radius:16px; box-shadow:0 12px 48px rgba(0,0,0,0.12); padding:1.2rem 1.5rem; width:90vw; max-width:600px; animation:fadeDown 0.2s ease; }
|
||||
|
||||
/* Offcanvas navigation */
|
||||
.nav-toggle { background:none; border:none; color:#D1D5DB; font-size:1.3rem; cursor:pointer; padding:0.3rem 0.4rem; line-height:1; margin-right:0.5rem; transition:opacity 0.2s; }
|
||||
.nav-toggle:hover { opacity:0.7; }
|
||||
.offcanvas-backdrop { position:fixed; inset:0; background:rgba(0,0,0,0.3); z-index:200; opacity:0; pointer-events:none; transition:opacity 0.3s ease; }
|
||||
.offcanvas-backdrop.open { opacity:1; pointer-events:auto; }
|
||||
.offcanvas-nav { position:fixed; top:0; left:0; width:280px; height:100%; height:100dvh; background:#fff; z-index:201; transform:translateX(-100%); transition:transform 0.3s cubic-bezier(0.4,0,0.2,1); box-shadow:4px 0 24px rgba(0,0,0,0.1); display:flex; flex-direction:column; }
|
||||
.offcanvas-nav.open { transform:translateX(0); }
|
||||
.offcanvas-nav-header { background:#1F2937; color:#F9FAFB; padding:1.2rem 1.5rem; display:flex; align-items:center; justify-content:space-between; }
|
||||
.offcanvas-nav-header .nav-logo { font-weight:800; font-size:1rem; }
|
||||
.offcanvas-nav-header .nav-close { background:none; border:none; color:#D1D5DB; font-size:1.4rem; cursor:pointer; line-height:1; }
|
||||
.offcanvas-nav-links { list-style:none; padding:1rem 0; flex:1; }
|
||||
.offcanvas-nav-links li { }
|
||||
.offcanvas-nav-links a { display:block; padding:0.75rem 1.5rem; color:#1F2937; text-decoration:none; font-size:0.95rem; font-weight:500; transition:background 0.15s; }
|
||||
.offcanvas-nav-links a:hover { background:#F3F4F6; }
|
||||
.offcanvas-nav-links .nav-section { padding:0.5rem 1.5rem 0.2rem; font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; color:#9CA3AF; }
|
||||
.offcanvas-nav-footer { padding:1rem 1.5rem; border-top:1px solid #E5E7EB; font-size:0.75rem; color:#9CA3AF; }
|
||||
|
||||
/* Main grid — single column (mobile-first) */
|
||||
.main-grid { max-width:640px; margin:1rem auto; padding:0 0.8rem; display:flex; flex-direction:column; gap:1rem; }
|
||||
|
||||
/* Card — clean, more whitespace */
|
||||
.story-card { background:#fff; border-radius:16px; overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,0.04),0 1px 2px rgba(0,0,0,0.03); transition:box-shadow 0.2s ease; position:relative; }
|
||||
.story-card:hover { box-shadow:0 4px 16px rgba(0,0,0,0.06); }
|
||||
.story-card img { width:100%; height:100%; object-fit:cover; display:block; }
|
||||
.story-card video { width:100%; height:auto; max-height:600px; object-fit:contain; display:block; background:#000; }
|
||||
.story-card audio { width:100%; margin-top:0.5rem; }
|
||||
|
||||
/* Hall badge — anthracite, light text */
|
||||
.story-halle-badge { position:absolute; top:0.5rem; right:0.5rem; background:#1F2937; color:#F9FAFB; padding:0.2rem 0.55rem; border-radius:6px; font-size:0.72rem; font-weight:600; letter-spacing:0.02em; z-index:5; }
|
||||
.story-halle-badge svg { stroke:#D1D5DB !important; }
|
||||
|
||||
/* Ausverkauft badge — keep red but cleaner */
|
||||
.story-ausverkauft-badge { position:absolute; top:0; left:0; right:0; z-index:7; background:linear-gradient(180deg,#EF4444 0%,#DC2626 100%); color:#fff; padding:0.4rem 1rem; font-size:0.75rem; font-weight:700; letter-spacing:0.08em; text-align:center; box-shadow:0 2px 8px rgba(220,38,38,0.3); display:flex; align-items:center; justify-content:center; gap:0.4rem; flex-wrap:wrap; }
|
||||
.story-ausverkauft-badge .badge-icon { font-size:0.9rem; }
|
||||
.story-ausverkauft-badge .badge-title { font-weight:500; letter-spacing:0.01em; font-size:0.7rem; opacity:0.85; }
|
||||
|
||||
/* Card content — more whitespace */
|
||||
.card-content { padding:0.75rem 1rem 0.7rem; display:flex; flex-direction:column; gap:0.35rem; }
|
||||
|
||||
/* Time — at top, small, dimmed */
|
||||
.story-time { font-size:0.7rem; color:#9CA3AF; font-weight:400; letter-spacing:0.01em; }
|
||||
.story-time-rel { color:#9CA3AF; font-weight:400; }
|
||||
|
||||
/* Time overlay (on media cards) — subtle */
|
||||
.story-time-overlay { position:absolute; top:0; left:0; padding:0.35rem 0.6rem; z-index:4; font-size:0.72rem; color:#6B7280; font-weight:500; letter-spacing:0.01em; }
|
||||
|
||||
/* Preview text */
|
||||
.story-preview { display:none; }
|
||||
.text-only .story-preview { display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis; font-size:0.85rem; line-height:1.55; color:#4B5563; margin-bottom:0; }
|
||||
.text-only .card-content { padding:0.8rem 1rem 0.7rem; }
|
||||
|
||||
/* Text-only card border */
|
||||
.text-only { /* no border */ }
|
||||
|
||||
/* Card link */
|
||||
.card-link { text-decoration:none; color:inherit; display:block; }
|
||||
|
||||
/* Author avatar */
|
||||
.author-avatar { width:24px; height:24px; border-radius:50%; background:#E5E7EB; color:#6B7280; display:inline-flex; align-items:center; justify-content:center; font-size:0.65rem; font-weight:700; letter-spacing:0.02em; flex-shrink:0; }
|
||||
|
||||
/* Metadata row — ONE clean line at bottom */
|
||||
.card-meta { display:flex; align-items:center; gap:0.5rem; padding-top:0.5rem; margin-top:0.35rem; border-top:1px solid #F3F4F6; flex-wrap:wrap; }
|
||||
.card-meta-item { display:flex; align-items:center; gap:0.2rem; font-size:0.72rem; color:#9CA3AF; }
|
||||
.card-meta-item svg { stroke:#9CA3AF; }
|
||||
.meta-author { display:flex; align-items:center; gap:0.35rem; color:#6B7280; font-size:0.75rem; font-weight:500; }
|
||||
.meta-author-name { font-weight:500; }
|
||||
.meta-date { font-size:0.68rem; color:#9CA3AF; font-weight:400; margin-left:0.5rem; }
|
||||
.meta-spacer { flex:1; }
|
||||
|
||||
/* Like button — subtle outline */
|
||||
.stat-like-btn { background:none; border:none; border-radius:999px; padding:0.25rem 0.6rem; font-size:0.72rem; cursor:pointer; color:#9CA3AF; font-family:inherit; transition:all 0.15s; display:flex; align-items:center; gap:0.2rem; -webkit-tap-highlight-color:transparent; min-width:44px; min-height:36px; justify-content:center; }
|
||||
.stat-like-btn svg, .stat-like-btn svg path { stroke:#EF4444 !important; fill:#EF4444 !important; }
|
||||
.stat-like-btn:hover { border-color:#9CA3AF; color:#6B7280; }
|
||||
.stat-like-btn.liked { background:none; }
|
||||
.stat-like-btn.liked svg, .stat-like-btn.liked svg path { stroke:#EF4444 !important; fill:#EF4444 !important; }
|
||||
.stat-like-btn:active { transform:scale(0.96); }
|
||||
|
||||
/* Filter bar */
|
||||
.frontend-filter { max-width:640px; margin:0.5rem auto 0; padding:0 0.8rem; display:flex; gap:0.4rem; flex-wrap:wrap; align-items:center; }
|
||||
.frontend-filter .filter-label { font-size:0.72rem; color:#9CA3AF; font-weight:600; text-transform:uppercase; letter-spacing:0.05em; }
|
||||
.frontend-filter a { display:inline-block; padding:0.35rem 0.8rem; border-radius:999px; text-decoration:none; font-size:0.78rem; font-weight:500; transition:all 0.15s; border:1.5px solid transparent; }
|
||||
.frontend-filter a.filter-pill { background:#fff; color:#6B7280; border-color:#E5E7EB; }
|
||||
.frontend-filter a.filter-pill:hover { border-color:#9CA3AF; color:#374151; }
|
||||
.frontend-filter a.filter-pill.active { background:#1F2937; color:#fff; border-color:#1F2937; font-weight:700; }
|
||||
.frontend-filter a.filter-reset { color:#9CA3AF; font-size:0.75rem; }
|
||||
.hall-select { appearance:none; -webkit-appearance:none; background:#fff; color:#374151; border:1.5px solid #E5E7EB; border-radius:999px; padding:0.35rem 2rem 0.35rem 0.9rem; font-size:0.78rem; font-weight:600; font-family:inherit; cursor:pointer; transition:all 0.15s; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'%3E%3C/path%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 0.55rem center; }
|
||||
.hall-select:hover { border-color:#9CA3AF; }
|
||||
.hall-select:focus { outline:none; border-color:#6B7280; box-shadow:0 0 0 3px rgba(107,114,128,0.1); }
|
||||
|
||||
/* Footer */
|
||||
.site-footer { text-align:center; padding:2rem; border-top:1px solid #E5E7EB; margin-top:2rem; }
|
||||
.site-footer p { color:#9CA3AF; font-size:0.8rem; }
|
||||
.site-footer a { color:#6B7280; text-decoration:none; font-weight:600; }
|
||||
.site-footer a:hover { text-decoration:underline; }
|
||||
|
||||
/* Video thumbnail */
|
||||
.video-thumb-link { display:block; text-decoration:none; }
|
||||
.video-thumb-link:hover .play-btn { transform:scale(1.1); transition:transform 0.2s ease; background:#fff; }
|
||||
.video-thumb-link:hover .video-thumb img { opacity:0.85; transition:opacity 0.2s ease; }
|
||||
|
||||
/* Media preview links */
|
||||
.media-preview-link { display:block; text-decoration:none; }
|
||||
.media-preview-link:hover .media-crop img { opacity:0.9; transition:opacity 0.2s ease; }
|
||||
.media-preview-link:hover .audio-preview { background:#F3F4F6; transition:background 0.2s ease; }
|
||||
.media-crop { border-radius:12px; }
|
||||
|
||||
/* Empty state */
|
||||
.empty-state { text-align:center; padding:4rem 2rem; }
|
||||
.empty-state .empty-icon { font-size:3rem; margin-bottom:1rem; }
|
||||
.empty-state h2 { color:#1F2937; font-size:1.8rem; font-weight:800; margin-bottom:0.5rem; }
|
||||
.empty-state p { color:#9CA3AF; max-width:400px; margin:0 auto; line-height:1.6; }
|
||||
|
||||
/* Desktop: multi-column masonry */
|
||||
@media(min-width:768px) {
|
||||
.main-grid { max-width:1300px; padding:0 1rem; column-count:4; column-gap:1.2rem; display:block; }
|
||||
.story-card { break-inside:avoid; margin-bottom:1.2rem; display:inline-block; width:100%; }
|
||||
.card-link { display:inline-block; width:100%; margin-bottom:1.2rem; break-inside:avoid; }
|
||||
}
|
||||
@media(max-width:1100px) { .main-grid { column-count:3; } }
|
||||
@media(max-width:750px) { .main-grid { column-count:2; padding:0 0.7rem; column-gap:0.8rem; } }
|
||||
@media(max-width:500px) { .main-grid { column-count:1; padding:0 0.8rem; display:flex; flex-direction:column; gap:1rem; } }
|
||||
|
||||
/* Mobile header tweaks */
|
||||
@media(max-width:500px) {
|
||||
.site-header { padding:0.6rem 0.8rem; gap:0.4rem; }
|
||||
.site-logo-sub { font-size:0.62rem; }
|
||||
.header-right { display:flex; align-items:center; gap:0.3rem; }
|
||||
.header-right a { font-size:0.7rem !important; }
|
||||
/* Chat & Submit zentriert am unteren Rand */
|
||||
.chat-bubble { bottom:1rem; right:auto; left:50%; transform:translateX(calc(-50% - 32px)); }
|
||||
.submit-bubble { bottom:1rem; right:auto; left:50%; transform:translateX(calc(-50% + 32px)); }
|
||||
.chat-overlay { bottom:5rem; right:0.5rem; left:0.5rem; width:auto; max-height:60vh; }
|
||||
.submit-overlay { bottom:5rem; right:0.5rem; left:0.5rem; width:auto; max-height:85vh; }
|
||||
}
|
||||
.chat-bubble { position:fixed; bottom:1.5rem; right:1.5rem; z-index:9999;
|
||||
width:56px; height:56px; border-radius:50%; background:#1F2937;
|
||||
color:#F9FAFB; border:none; cursor:pointer; font-size:1.6rem;
|
||||
box-shadow:0 6px 24px rgba(0,0,0,0.15); transition:transform 0.2s,box-shadow 0.2s,opacity 0.2s;
|
||||
display:flex; align-items:center; justify-content:center; }
|
||||
.chat-bubble.hidden { opacity:0; pointer-events:none; }
|
||||
.chat-bubble:hover { transform:scale(1.08); box-shadow:0 8px 32px rgba(0,0,0,0.2); }
|
||||
.chat-bubble:active { transform:scale(0.95); }
|
||||
.chat-bubble .bubble-dot { position:absolute; top:6px; right:6px; width:12px; height:12px;
|
||||
background:#10B981; border-radius:50%; border:2px solid #fff; }
|
||||
|
||||
.chat-overlay { position:fixed; bottom:5.5rem; right:1.5rem; z-index:10001;
|
||||
width:380px; max-width:calc(100vw - 2rem); max-height:520px;
|
||||
background:#fff; border-radius:18px; box-shadow:0 12px 48px rgba(0,0,0,0.12);
|
||||
display:none; flex-direction:column; overflow:hidden; }
|
||||
.chat-overlay.open { display:flex; }
|
||||
.chat-backdrop { position:fixed; inset:0; z-index:10000; background:rgba(0,0,0,0.15); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); display:none; height:100dvh; }
|
||||
.chat-backdrop.open { display:block; }
|
||||
.chat-header { background:#1F2937; color:#F9FAFB; padding:0.9rem 1.2rem;
|
||||
font-weight:700; font-size:0.9rem; display:flex; align-items:center; justify-content:space-between; }
|
||||
.chat-header button { background:none; border:none; color:#D1D5DB; font-size:1.3rem;
|
||||
cursor:pointer; opacity:0.8; transition:opacity 0.15s; padding:0; line-height:1; }
|
||||
.chat-header button:hover { opacity:1; }
|
||||
.chat-body { flex:1; overflow-y:auto; padding:1rem; display:flex; flex-direction:column; gap:0.6rem;
|
||||
max-height:320px; background:#F9FAFB; }
|
||||
.chat-msg { max-width:82%; padding:0.55rem 0.85rem; border-radius:14px;
|
||||
font-size:0.82rem; line-height:1.45; word-break:break-word; animation:fadeUp 0.25s ease; }
|
||||
.chat-msg.user { align-self:flex-end; background:#1F2937; color:#F9FAFB;
|
||||
border-bottom-right-radius:4px; }
|
||||
.chat-msg.assistant { align-self:flex-start; background:#E5E7EB; color:#1F2937;
|
||||
border-bottom-left-radius:4px; }
|
||||
.chat-msg.typing { background:#E5E7EB; color:#9CA3AF; font-style:italic; }
|
||||
@keyframes fadeUp { from{opacity:0;transform:translateY(8px);} to{opacity:1;transform:translateY(0);} }
|
||||
.chat-footer { padding:0.7rem 0.9rem; border-top:1px solid #E5E7EB; display:flex; gap:0.5rem; }
|
||||
.chat-footer input { flex:1; border:1.5px solid #E5E7EB; border-radius:999px;
|
||||
padding:0.55rem 1rem; font-size:16px; font-family:inherit; outline:none;
|
||||
transition:border-color 0.15s; background:#F9FAFB; }
|
||||
.chat-footer input:focus { border-color:#6B7280; }
|
||||
.chat-footer button { background:#1F2937; color:#F9FAFB; border:none; border-radius:999px;
|
||||
padding:0.55rem 1rem; font-weight:600; font-size:0.82rem; cursor:pointer;
|
||||
transition:background 0.15s; font-family:inherit; }
|
||||
.chat-footer button:hover { background:#374151; }
|
||||
.chat-footer button:disabled { opacity:0.5; cursor:default; }
|
||||
|
||||
/* ── Submit Overlay ────────────────────────────────────────── */
|
||||
.submit-bubble { position:fixed; bottom:1.5rem; right:5.5rem; z-index:9999;
|
||||
width:56px; height:56px; border-radius:50%; background:#1F2937;
|
||||
color:#F9FAFB; border:none; cursor:pointer; font-size:1.8rem; font-weight:300; line-height:1;
|
||||
box-shadow:0 6px 24px rgba(0,0,0,0.15); transition:transform 0.2s,box-shadow 0.2s,opacity 0.2s;
|
||||
display:flex; align-items:center; justify-content:center; }
|
||||
.submit-bubble.hidden { opacity:0; pointer-events:none; }
|
||||
.submit-bubble:hover { transform:scale(1.08); box-shadow:0 8px 32px rgba(0,0,0,0.2); }
|
||||
.submit-bubble:active { transform:scale(0.95); }
|
||||
|
||||
.submit-overlay { position:fixed; bottom:5.5rem; right:1.5rem; z-index:10001;
|
||||
width:400px; max-width:calc(100vw - 2rem); max-height:85vh;
|
||||
background:#fff; border-radius:18px; box-shadow:0 12px 48px rgba(0,0,0,0.12);
|
||||
display:none; flex-direction:column; overflow:hidden; }
|
||||
.submit-overlay.open { display:flex; }
|
||||
.submit-header { background:#1F2937; color:#F9FAFB; padding:0.9rem 1.2rem;
|
||||
font-weight:700; font-size:0.9rem; display:flex; align-items:center; justify-content:space-between; }
|
||||
.submit-header button { background:none; border:none; color:#D1D5DB; font-size:1.3rem;
|
||||
cursor:pointer; opacity:0.8; padding:0; line-height:1; }
|
||||
.submit-header button:hover { opacity:1; }
|
||||
.submit-body { flex:1; overflow-y:auto; padding:1rem; max-height:75vh; background:#F9FAFB; }
|
||||
.submit-body .hint { font-size:0.75rem; color:#6B7280; margin-bottom:1rem; line-height:1.5; }
|
||||
.submit-body label { display:block; font-size:0.7rem; font-weight:600; color:#6B7280;
|
||||
text-transform:uppercase; letter-spacing:0.03em; margin-bottom:0.2rem; margin-top:0.8rem; }
|
||||
.submit-body label:first-of-type { margin-top:0; }
|
||||
.submit-body input, .submit-body textarea { width:100%; border:1.5px solid #E5E7EB;
|
||||
border-radius:10px; padding:0.55rem 0.8rem; font-size:16px; font-family:inherit;
|
||||
outline:none; transition:border-color 0.15s; background:#fff; }
|
||||
.submit-body textarea { resize:vertical; min-height:70px; }
|
||||
.submit-body input:focus, .submit-body textarea:focus { border-color:#6B7280; }
|
||||
.submit-body input[type="file"] { padding:0.4rem 0; border:none; font-size:0.78rem; }
|
||||
.submit-body .submit-btn { width:100%; background:#1F2937; color:#F9FAFB; border:none;
|
||||
border-radius:10px; padding:0.7rem; font-weight:700; font-size:0.88rem;
|
||||
cursor:pointer; margin-top:1rem; transition:background 0.15s; font-family:inherit; }
|
||||
.submit-body .submit-btn:hover { background:#374151; }
|
||||
.submit-body .submit-btn:disabled { opacity:0.5; cursor:default; }
|
||||
.submit-body .status-msg { text-align:center; font-size:0.8rem; margin-top:0.6rem;
|
||||
min-height:1.2rem; }
|
||||
.capture-row { display:flex; gap:1.4rem; margin-top:0.3rem; justify-content:center; align-items:flex-start; }
|
||||
.capture-item { display:flex; flex-direction:column; align-items:center; gap:0.4rem; }
|
||||
.capture-btn, label.capture-btn { display:flex; align-items:center; justify-content:center; background:#fff; border:2px solid #E5E7EB; border-radius:50%; width:68px; height:68px; cursor:pointer; transition:all 0.15s; -webkit-tap-highlight-color:transparent; touch-action:manipulation; padding:0; }
|
||||
.capture-btn svg { display:block; }
|
||||
.capture-btn:active { transform:scale(0.92); background:#F3F4F6; border-color:#6B7280; }
|
||||
.capture-label { font-size:0.62rem; font-weight:600; color:#9CA3AF; text-transform:uppercase; letter-spacing:0.04em; text-align:center; }
|
||||
|
||||
/* ── Login-Dropdown ─────────────────────── */
|
||||
.login-dropdown { position:relative; display:inline-block; }
|
||||
.login-toggle-btn { background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.12); border-radius:8px; color:#D1D5DB; padding:0.35rem 0.7rem; font-size:0.78rem; font-weight:600; cursor:pointer; font-family:inherit; transition:all 0.15s; white-space:nowrap; line-height:1.3; }
|
||||
.login-toggle-btn:hover { background:rgba(255,255,255,0.15); border-color:rgba(255,255,255,0.25); }
|
||||
.login-toggle-btn.active { background:rgba(255,255,255,0.2); border-color:#D1D5DB; }
|
||||
.login-dropdown-menu { display:none; position:absolute; right:0; top:110%; background:#fff; border-radius:12px; box-shadow:0 8px 32px rgba(0,0,0,0.1); min-width:240px; z-index:300; overflow:hidden; }
|
||||
.login-dropdown-menu.open { display:block; animation:fadeDown 0.2s ease; }
|
||||
@keyframes fadeDown { from{opacity:0;transform:translateY(-8px);} to{opacity:1;transform:translateY(0);} }
|
||||
.login-dropdown-menu a { display:block; padding:0.65rem 1.1rem; color:#1F2937; text-decoration:none; font-size:0.85rem; font-weight:500; transition:background 0.15s; }
|
||||
.login-dropdown-menu a:hover { background:#F3F4F6; }
|
||||
.login-dropdown-form { padding:0.8rem 1rem 0.5rem; }
|
||||
.login-dropdown-form input { width:100%; padding:0.5rem 0.7rem; margin:0.3rem 0; border:1.5px solid #E5E7EB; border-radius:8px; font-size:0.82rem; font-family:inherit; outline:none; box-sizing:border-box; transition:border-color 0.15s; background:#fff; }
|
||||
.login-dropdown-form input:focus { border-color:#6B7280; }
|
||||
.login-dropdown-form button { width:100%; padding:0.55rem; background:#1F2937; color:#F9FAFB; border:none; border-radius:8px; font-size:0.82rem; font-weight:600; cursor:pointer; font-family:inherit; margin-top:0.4rem; transition:background 0.15s; }
|
||||
.login-dropdown-form button:hover { background:#374151; }
|
||||
.login-dropdown-register { border-top:1px solid #E5E7EB; font-size:0.78rem !important; color:#9CA3AF !important; text-align:center; }
|
||||
.login-dropdown-register:hover { color:#6B7280 !important; }
|
||||
.header-bsn-link { color:#9CA3AF; text-decoration:none; font-size:0.8rem; transition:color 0.2s; }
|
||||
.header-bsn-link:hover { color:#F9FAFB; }
|
||||
|
||||
/* ── Welcome Overlay ──────────────────────────────────────── */
|
||||
.welcome-backdrop { position:fixed; inset:0; z-index:100000; background:rgba(0,0,0,0.3); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); display:none; }
|
||||
.welcome-backdrop.open { display:flex; align-items:center; justify-content:center; padding:1rem; }
|
||||
.welcome-dialog { background:#fff; border-radius:18px; box-shadow:0 16px 64px rgba(0,0,0,0.15); max-width:480px; width:100%; max-height:90vh; overflow-y:auto; animation:fadeUp 0.3s ease; }
|
||||
.welcome-header { background:#1F2937; color:#F9FAFB; padding:1.2rem 1.5rem; border-radius:18px 18px 0 0; font-weight:800; font-size:1.1rem; display:flex; align-items:center; gap:0.5rem; }
|
||||
.welcome-body { padding:1.5rem; color:#374151; line-height:1.7; font-size:0.88rem; }
|
||||
.welcome-body strong { color:#1F2937; }
|
||||
.welcome-body .welcome-feature { display:flex; gap:0.6rem; align-items:flex-start; margin:0.7rem 0; }
|
||||
.welcome-body .welcome-icon { font-size:1.2rem; flex-shrink:0; margin-top:0.1rem; }
|
||||
.welcome-footer { padding:0.8rem 1.5rem 1.2rem; border-top:1px solid #E5E7EB; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:0.5rem; }
|
||||
.welcome-footer label { font-size:0.78rem; color:#9CA3AF; display:flex; align-items:center; gap:0.4rem; cursor:pointer; user-select:none; }
|
||||
.welcome-footer label input { width:16px; height:16px; accent-color:#1F2937; cursor:pointer; }
|
||||
.welcome-footer button { background:#1F2937; color:#F9FAFB; border:none; border-radius:10px; padding:0.55rem 1.4rem; font-size:0.85rem; font-weight:700; cursor:pointer; font-family:inherit; transition:background 0.15s; }
|
||||
.welcome-footer button:hover { background:#374151; }
|
||||
</style>
|
||||
<link rel="stylesheet" href="/static/theme.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@@ -3780,39 +3288,7 @@ def _overlay_page(title, content_html, max_width="640px"):
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400;14..32,500;14..32,600;14..32,700;14..32,800&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
* {{ margin:0; padding:0; box-sizing:border-box; }}
|
||||
body {{ font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; background:#F9FAFB; color:#1F2937; min-height:100vh; display:flex; align-items:flex-start; justify-content:center; padding:2rem 1rem; -webkit-font-smoothing:antialiased; }}
|
||||
/* Milchglas-Backdrop */
|
||||
body::before {{ content:''; position:fixed; inset:0; background:rgba(0,0,0,0.08); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); z-index:0; }}
|
||||
.overlay-card {{ position:relative; z-index:1; background:#fff; border-radius:18px; box-shadow:0 16px 64px rgba(0,0,0,0.12); width:100%; max-width:{max_width}; padding:2rem; animation:fadeUp 0.3s ease; }}
|
||||
@keyframes fadeUp {{ from{{opacity:0;transform:translateY(16px);}} to{{opacity:1;transform:translateY(0);}} }}
|
||||
.overlay-card h1 {{ font-size:1.5rem; font-weight:800; color:#1F2937; margin-bottom:0.3rem; }}
|
||||
.overlay-card .stand {{ font-size:0.78rem; color:#9CA3AF; margin-bottom:1.5rem; }}
|
||||
.overlay-card h2 {{ font-size:1.1rem; font-weight:700; color:#374151; margin:1.5rem 0 0.4rem; }}
|
||||
.overlay-card h3 {{ font-size:0.95rem; font-weight:600; color:#374151; margin:1rem 0 0.3rem; }}
|
||||
.overlay-card p {{ line-height:1.65; margin-bottom:0.7rem; font-size:0.9rem; color:#4B5563; }}
|
||||
.overlay-card ul, .overlay-card ol {{ margin:0.5rem 0 0.8rem 1.5rem; font-size:0.9rem; line-height:1.65; color:#4B5563; }}
|
||||
.overlay-card blockquote {{ border-left:3px solid #E5E7EB; padding:0.5rem 1rem; margin:1rem 0; background:#F9FAFB; border-radius:0 8px 8px 0; font-size:0.85rem; color:#6B7280; }}
|
||||
.overlay-card hr {{ border:none; border-top:1px solid #E5E7EB; margin:1.5rem 0; }}
|
||||
.overlay-card a {{ color:#1F2937; text-decoration:underline; text-underline-offset:2px; }}
|
||||
.overlay-card input, .overlay-card textarea, .overlay-card select {{ width:100%; padding:0.65rem 0.8rem; margin:0.3rem 0; border:1.5px solid #E5E7EB; border-radius:10px; font-size:0.9rem; font-family:inherit; outline:none; transition:border-color 0.15s; background:#fff; }}
|
||||
.overlay-card input:focus, .overlay-card textarea:focus {{ border-color:#6B7280; }}
|
||||
.overlay-card .btn {{ display:inline-block; width:100%; padding:0.7rem; background:#1F2937; color:#F9FAFB; border:none; border-radius:10px; font-size:0.9rem; font-weight:600; cursor:pointer; font-family:inherit; transition:background 0.15s; text-align:center; text-decoration:none; margin-top:0.5rem; }}
|
||||
.overlay-card .btn:hover {{ background:#374151; }}
|
||||
.overlay-card .btn-secondary {{ background:#F3F4F6; color:#374151; }}
|
||||
.overlay-card .btn-secondary:hover {{ background:#E5E7EB; }}
|
||||
.overlay-card .error {{ color:#EF4444; font-size:0.85rem; margin:0.5rem 0; }}
|
||||
.overlay-card .hint {{ color:#9CA3AF; font-size:0.75rem; margin:0.2rem 0 0.5rem; }}
|
||||
.overlay-card .link {{ text-align:center; margin-top:1rem; font-size:0.85rem; color:#6B7280; }}
|
||||
.overlay-card .link a {{ color:#1F2937; font-weight:500; }}
|
||||
.back-link {{ display:inline-flex; align-items:center; gap:0.3rem; margin-top:1.5rem; color:#9CA3AF; text-decoration:none; font-weight:500; font-size:0.85rem; transition:color 0.15s; }}
|
||||
.back-link:hover {{ color:#6B7280; }}
|
||||
.overlay-nav {{ display:flex; gap:1rem; flex-wrap:wrap; justify-content:center; padding-top:1.2rem; margin-top:1.2rem; border-top:1px solid #F3F4F6; }}
|
||||
.overlay-nav a {{ color:#9CA3AF; text-decoration:none; font-size:0.78rem; font-weight:500; transition:color 0.15s; }}
|
||||
.overlay-nav a:hover {{ color:#6B7280; }}
|
||||
@media(max-width:600px) {{ body {{ padding:0.5rem; align-items:flex-start; }} .overlay-card {{ padding:1.2rem; border-radius:14px; }} .overlay-nav {{ gap:0.6rem; }} }}
|
||||
</style>
|
||||
<link rel="stylesheet" href="/static/theme.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="overlay-card">
|
||||
@@ -4606,84 +4082,9 @@ def public_detail(sub_id: int):
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400;14..32,500;14..32,600;14..32,700;14..32,800&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
* {{ margin:0; padding:0; box-sizing:border-box; }}
|
||||
body {{ font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; background:#F9FAFB; color:#1F2937; min-height:100vh; -webkit-font-smoothing:antialiased; }}
|
||||
.site-header {{ background:#1F2937; padding:1rem 2rem; display:flex; align-items:center; gap:0.5rem; position:sticky; top:0; z-index:100; }}
|
||||
.nav-toggle {{ background:none; border:none; color:#D1D5DB; font-size:1.3rem; cursor:pointer; padding:0.3rem 0.4rem; line-height:1; margin-right:0.5rem; transition:opacity 0.2s; }}
|
||||
.nav-toggle:hover {{ opacity:0.7; }}
|
||||
.offcanvas-backdrop {{ position:fixed; inset:0; background:rgba(0,0,0,0.3); z-index:200; opacity:0; pointer-events:none; transition:opacity 0.3s ease; }}
|
||||
.offcanvas-backdrop.open {{ opacity:1; pointer-events:auto; }}
|
||||
.offcanvas-nav {{ position:fixed; top:0; left:0; width:280px; height:100%; height:100dvh; background:#fff; z-index:201; transform:translateX(-100%); transition:transform 0.3s cubic-bezier(0.4,0,0.2,1); box-shadow:4px 0 24px rgba(0,0,0,0.1); display:flex; flex-direction:column; }}
|
||||
.offcanvas-nav.open {{ transform:translateX(0); }}
|
||||
.offcanvas-nav-header {{ background:#1F2937; color:#F9FAFB; padding:1.2rem 1.5rem; display:flex; align-items:center; justify-content:space-between; }}
|
||||
.offcanvas-nav-header .nav-logo {{ font-weight:800; font-size:1rem; }}
|
||||
.offcanvas-nav-header .nav-close {{ background:none; border:none; color:#D1D5DB; font-size:1.4rem; cursor:pointer; line-height:1; }}
|
||||
.offcanvas-nav-links {{ list-style:none; padding:1rem 0; flex:1; }}
|
||||
.offcanvas-nav-links a {{ display:block; padding:0.75rem 1.5rem; color:#1F2937; text-decoration:none; font-size:0.95rem; font-weight:500; transition:background 0.15s; }}
|
||||
.offcanvas-nav-links a:hover {{ background:#F3F4F6; }}
|
||||
.offcanvas-nav-links .nav-section {{ padding:0.5rem 1.5rem 0.2rem; font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; color:#9CA3AF; }}
|
||||
.offcanvas-nav-footer {{ padding:1rem 1.5rem; border-top:1px solid #E5E7EB; font-size:0.75rem; color:#9CA3AF; }}
|
||||
.site-logo {{ display:flex; align-items:center; gap:0.6rem; text-decoration:none; color:#F9FAFB; }}
|
||||
.site-logo .logo-icon {{ width:40px; height:40px; background:#374151; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:1.3rem; }}
|
||||
.site-logo .logo-text {{ font-weight:800; font-size:1.15rem; color:#F9FAFB; }}
|
||||
.site-logo-sub {{ font-size:0.7rem; font-weight:500; color:#9CA3AF; letter-spacing:0.03em; margin-left:0.5rem; white-space:nowrap; }}
|
||||
.detail-container {{ max-width:720px; margin:2rem auto; padding:0 1.5rem; }}
|
||||
.back-link {{ display:inline-block; color:#20228a; text-decoration:none; font-weight:600; margin-bottom:1.5rem; font-size:0.9rem; }}
|
||||
.back-link:hover {{ text-decoration:underline; }}
|
||||
.detail-card {{ background:#fff; border-radius:16px; padding:2rem; box-shadow:0 4px 20px rgba(0,0,0,0.06); position:relative; }}
|
||||
.detail-ausverkauft-banner {{ position:absolute; top:0; left:0; right:0; z-index:2; background:linear-gradient(180deg,#dc3545 0%,#b02a37 100%); color:#fff; padding:0.5rem 1rem; font-size:0.8rem; font-weight:800; letter-spacing:0.12em; text-align:center; border-radius:16px 16px 0 0; display:flex; align-items:center; justify-content:center; gap:0.5rem; flex-wrap:wrap; }}
|
||||
.detail-ausverkauft-banner .badge-title {{ font-weight:500; letter-spacing:0.02em; font-size:0.72rem; opacity:0.9; }}
|
||||
.detail-meta {{ display:flex; align-items:center; gap:0.8rem; margin-bottom:1.5rem; flex-wrap:wrap; }}
|
||||
.detail-type {{ font-size:1.5rem; }}
|
||||
.detail-author {{ font-weight:700; color:#20228a; font-size:1rem; }}
|
||||
.detail-date {{ color:#999; font-size:0.8rem; margin-left:auto; }}
|
||||
.detail-halle {{ display:inline-block; background:#20228a; color:#fff; padding:0.35rem 0.8rem; border-radius:6px; font-size:0.85rem; font-weight:700; margin-bottom:1rem; }}
|
||||
.detail-card.has-banner .detail-halle {{ margin-top:2.8rem; }}
|
||||
.comments-section {{ max-width:720px; margin:2rem auto 0; padding:0 1.5rem; }}
|
||||
.comments-heading {{ font-size:1rem; font-weight:700; color:#1a1a2e; margin-bottom:1rem; }}
|
||||
.comment-item {{ background:#f8f6f0; border-radius:10px; padding:0.8rem 1rem; margin-bottom:0.6rem; }}
|
||||
.comment-header {{ display:flex; align-items:baseline; gap:0.5rem; margin-bottom:0.3rem; }}
|
||||
.comment-author {{ font-size:0.85rem; color:#20228a; }}
|
||||
.comment-date {{ font-size:0.7rem; color:#aaa; }}
|
||||
.comment-text {{ font-size:0.9rem; color:#333; line-height:1.5; white-space:pre-wrap; word-break:break-word; }}
|
||||
.comment-form {{ margin-top:1.5rem; display:flex; flex-direction:column; gap:0.6rem; }}
|
||||
.comment-input {{ padding:0.6rem 0.9rem; border:1.5px solid #ddd; border-radius:10px; font-size:0.85rem; font-family:inherit; }}
|
||||
.comment-input:focus {{ outline:none; border-color:#20228a; }}
|
||||
.comment-textarea {{ padding:0.6rem 0.9rem; border:1.5px solid #ddd; border-radius:10px; font-size:0.85rem; font-family:inherit; min-height:80px; resize:vertical; }}
|
||||
.comment-textarea:focus {{ outline:none; border-color:#20228a; }}
|
||||
.comment-submit-btn {{ align-self:flex-end; background:#20228a; color:#fff; border:none; border-radius:10px; padding:0.55rem 1.5rem; font-size:0.85rem; font-weight:600; cursor:pointer; font-family:inherit; transition:background 0.15s; }}
|
||||
.comment-submit-btn:hover {{ background:#161e6e; }}
|
||||
.comment-submit-btn:active {{ transform:scale(0.97); }}
|
||||
.comment-submit-btn:disabled {{ opacity:0.6; pointer-events:none; }}
|
||||
.reply-btn {{ background:none; border:1px solid #ccc; border-radius:6px; padding:0.2rem 0.6rem; font-size:0.72rem; color:#666; cursor:pointer; margin-top:0.3rem; font-family:inherit; transition:all 0.15s; }}
|
||||
.reply-btn:hover {{ border-color:#20228a; color:#20228a; background:rgba(32,34,138,0.04); }}
|
||||
.comment-actions {{ display:flex; align-items:center; gap:0.4rem; margin-top:0.4rem; }}
|
||||
.comment-like-btn {{ background:none; border:none; border-radius:999px; padding:0.15rem 0.5rem; font-size:0.68rem; cursor:pointer; color:#888; font-family:inherit; transition:all 0.15s; display:inline-flex; align-items:center; -webkit-tap-highlight-color:transparent; }}
|
||||
.comment-like-btn:hover {{ opacity:0.8; }}
|
||||
.comment-like-btn.liked {{ background:none; }}
|
||||
.comment-like-btn.liked svg, .comment-like-btn.liked svg path {{ stroke:#EF4444 !important; fill:#EF4444 !important; }}
|
||||
.comment-like-btn:active {{ transform:scale(0.94); }}
|
||||
.reply-info {{ font-size:0.75rem; color:#20228a; margin-bottom:0.3rem; font-weight:600; display:none; }}
|
||||
.comment-email, .comment-phone {{ padding:0.6rem 0.9rem; border:1.5px solid #ddd; border-radius:10px; font-size:0.85rem; font-family:inherit; }}
|
||||
.comment-email:focus, .comment-phone:focus {{ outline:none; border-color:#20228a; }}
|
||||
.comment-field-hint {{ font-size:0.7rem; color:#999; margin-top:-0.3rem; margin-bottom:0.3rem; }}
|
||||
.detail-content {{ font-size:1.05rem; line-height:1.7; color:#333; white-space:pre-wrap; word-break:break-word; }}
|
||||
.detail-media {{ margin-top:1.5rem; }}
|
||||
.site-footer {{ text-align:center; padding:2rem; border-top:1px solid #eee; margin-top:3rem; }}
|
||||
.site-footer p {{ color:#999; font-size:0.8rem; }}
|
||||
.site-footer a {{ color:#20228a; text-decoration:none; font-weight:600; }}
|
||||
@media(max-width:600px) {{
|
||||
.detail-card {{ padding:1.2rem; }}
|
||||
.site-header {{ padding:0.8rem 1rem; }}
|
||||
}}
|
||||
|
||||
.detail-like-btn:hover {{ opacity:0.8; }}
|
||||
.detail-like-btn.liked {{ background:none; }}
|
||||
.detail-like-btn.liked svg, .detail-like-btn.liked svg path {{ stroke:#EF4444 !important; fill:#EF4444 !important; }}
|
||||
.detail-like-btn:active {{ transform:scale(0.94); }}</style>
|
||||
<link rel="stylesheet" href="/static/theme.css">
|
||||
</head>
|
||||
<body>
|
||||
<body class="public">
|
||||
<header class="site-header">
|
||||
<button id="navToggle" class="nav-toggle" aria-label="Menü öffnen">☰</button>
|
||||
<a href="/" class="site-logo">
|
||||
@@ -5208,11 +4609,8 @@ def verify_comment(token: str):
|
||||
<html lang="de">
|
||||
<head><meta charset="UTF-8"><meta http-equiv="refresh" content="3;url=/beitrag/{row['submission_id']}">
|
||||
<title>Kommentar bestätigt</title>
|
||||
<style>
|
||||
body {{font-family:'Inter',sans-serif;text-align:center;padding:3rem;background:#f5f3ee;color:#1a1a2e;}}
|
||||
h1 {{color:#20228a;}}
|
||||
a {{color:#20228a;}}
|
||||
</style></head>
|
||||
<link rel="stylesheet" href="/static/theme.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>✅ Kommentar bestätigt!</h1>
|
||||
<p>Dein Kommentar ist jetzt auf boardgame.network sichtbar.</p>
|
||||
|
||||
Reference in New Issue
Block a user