Files
pv-agent/web/index.html
T

102 lines
4.9 KiB
HTML

<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta</head> name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Testoberfläche für den PV RAG Agent">
<title>PV Wissen — Test-Chat</title>
<link rel="stylesheet" href="/assets/styles.css">
<script src="/assets/app.js" defer></script>
</head>
<body>
<div class="shell">
<header class="topbar">
<a class="brand" href="/" aria-label="PV Wissen Startseite">
<span class="brand-mark" aria-hidden="true">PV</span>
<span>
<strong>PV Wissen</strong>
<small>Agent für österreichische Personalverrechnung</small>
</span>
</a>
<div id="health" class="health health-loading" role="status" aria-live="polite">
<span class="health-dot" aria-hidden="true"></span>
<span>Verbindung wird geprüft</span>
</div>
</header>
<main>
<section class="hero" aria-labelledby="page-title">
<p class="eyebrow">Belegt. Nachvollziehbar. Lokal.</p>
<h1 id="page-title">Was möchtest du zur Personalverrechnung wissen?</h1>
<p>Antworten stammen ausschließlich aus der kuratierten Wissensbasis und führen ihre Quellen direkt an.</p>
</section>
<section class="workspace">
<aside class="settings" aria-labelledby="settings-title">
<div class="settings-heading">
<h2 id="settings-title">Verbindung</h2>
<button id="settings-toggle" class="icon-button" type="button" aria-expanded="true" aria-controls="settings-body" title="Einstellungen ein- oder ausblenden"></button>
</div>
<div id="settings-body">
<label for="api-key">Service-Key</label>
<div class="key-row">
<input id="api-key" type="password" autocomplete="off" spellcheck="false" placeholder="Bearer-Key, falls aktiviert">
<button id="key-visibility" class="secondary compact" type="button" aria-label="Service-Key anzeigen">Anzeigen</button>
</div>
<label class="check-row" for="remember-key">
<input id="remember-key" type="checkbox">
<span>Nur für diesen Tab merken</span>
</label>
<label for="top-k">Kontextumfang</label>
<select id="top-k">
<option value="">Automatisch</option>
<option value="6">6 Quellenblöcke</option>
<option value="8">8 Quellenblöcke</option>
<option value="12">12 Quellenblöcke</option>
<option value="16">16 Quellenblöcke</option>
</select>
<div class="privacy-note">
<strong>Datenschutzgrenze</strong>
<span>Keine Namen, Personalnummern oder Lohndaten eingeben. Fragen, Antworten, Bewertungen und Kommentare werden für die Qualitätsprüfung protokolliert.</span>
</div>
</div>
</aside>
<section class="chat" aria-label="Chat mit dem PV Agenten">
<div id="empty-state" class="empty-state">
<div class="empty-icon" aria-hidden="true">§</div>
<h2>Mit einer Fachfrage starten</h2>
<p>Zum Beispiel zu Reisekosten, Abgaben, Kollektivverträgen oder arbeitsrechtlichen Ansprüchen.</p>
<div class="suggestions" aria-label="Beispielfragen">
<button type="button" data-question="Ich will meinem Mitarbeiter 500 Euro zusätzlich auszahlen. Was ist die günstigste Lösung?">500 Euro zusätzlich auszahlen</button>
<button type="button" data-question="Wie hoch ist der steuerfreie Tagesgeldsatz bei einer Inlandsdienstreise?">Steuerfreies Tagesgeld</button>
<button type="button" data-question="Welche Voraussetzungen gelten für die Mitarbeiterprämie 2026?">Mitarbeiterprämie 2026</button>
</div>
</div>
<div id="messages" class="messages" aria-live="polite" aria-label="Nachrichtenverlauf"></div>
<form id="ask-form" class="composer">
<label class="sr-only" for="question">Frage</label>
<textarea id="question" rows="3" maxlength="2000" required placeholder="Frage zur österreichischen Personalverrechnung …"></textarea>
<div class="composer-footer">
<span id="char-count" class="character-count">0 / 2000</span>
<div class="composer-actions">
<button id="cancel" class="secondary" type="button" hidden>Abbrechen</button>
<button id="submit" class="primary" type="submit">
<span>Frage senden</span>
<span class="send-icon" aria-hidden="true"></span>
</button>
</div>
</div>
</form>
<p class="footnote">Der Agent kann Fehler machen. Fachliche Entscheidungen anhand der angeführten Quellen prüfen.</p>
</section>
</section>
</main>
</div>
</body>
</html>