Pages were unstyled HTML until now. design/enterprise.css (enconf's 4400-line stylesheet) is tightly coupled to Ant Design/React class names and a fixed desktop sidebar layout — not usable as-is for Deklarix's plain server-rendered forms. Instead, internal/web/static/ app.css is a small, purpose-built mobile-first stylesheet that reuses enconf's actual design tokens (primary blue #1677ff, radius scale, shadows, Inter) for brand consistency without dragging in the unrelated layout/framework rules. Inter is self-hosted (copied from enconf's font files) rather than pulled from Google Fonts, keeping the "no runtime internet dependency" property. Only the "latin" subset is included — German umlauts and ß all live in U+0000-00FF, so the cyrillic/greek/vietnamese subsets enconf ships aren't needed here. Inputs/buttons are sized for touch (44px min-height) and use 16px font size to avoid iOS's auto-zoom-on-focus. Findings are color-coded by severity (red/amber/green backgrounds with a matching left border). Verified visually with chromium --headless --screenshot at both mobile (390px) and desktop (1280px) viewports, including a real WK-001 finding fetched from the running server and rendered through the actual stylesheet — not just asserted via HTTP status codes. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
49 lines
1.5 KiB
HTML
49 lines
1.5 KiB
HTML
{{define "index"}}<!doctype html>
|
|
<html lang="de">
|
|
<head>{{template "head" .}}</head>
|
|
<body>
|
|
{{template "nav" .}}
|
|
<div class="page">
|
|
<h1>Pre-Publish-Prüfung</h1>
|
|
<p>Caption und Plattform eingeben, um auf Kennzeichnungsrisiken zu prüfen.</p>
|
|
|
|
<form hx-post="/pruefen" hx-target="#ergebnis" hx-swap="innerHTML">
|
|
<label for="platform">Plattform</label>
|
|
<select id="platform" name="platform" required>
|
|
<option value="instagram">Instagram</option>
|
|
<option value="tiktok">TikTok</option>
|
|
</select>
|
|
|
|
<label for="post_type">Beitragstyp</label>
|
|
<select id="post_type" name="post_type" required>
|
|
<option value="feed">Feed</option>
|
|
<option value="reel">Reel</option>
|
|
<option value="story">Story</option>
|
|
<option value="video">Video</option>
|
|
</select>
|
|
|
|
<label for="consideration">Gegenleistung</label>
|
|
<select id="consideration" name="consideration" required>
|
|
<option value="">— bitte wählen —</option>
|
|
<option value="bezahlt">Bezahlt</option>
|
|
<option value="sachbezug">Sachbezug (Produkt, Einladung, ...)</option>
|
|
<option value="keine">Keine</option>
|
|
<option value="unklar">Unklar</option>
|
|
</select>
|
|
<p class="hinweis">
|
|
Das kann die Prüfung nicht aus der Caption erraten — nur wer
|
|
einreicht, weiß, ob eine Gegenleistung vorlag.
|
|
</p>
|
|
|
|
<label for="caption">Caption</label>
|
|
<textarea id="caption" name="caption" rows="6" required></textarea>
|
|
|
|
<button type="submit">Prüfen</button>
|
|
</form>
|
|
|
|
<div id="ergebnis"></div>
|
|
</div>
|
|
</body>
|
|
</html>
|
|
{{end}}
|