203 lines
7.9 KiB
HTML
203 lines
7.9 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Einstellungen - Facebook Post Tracker</title>
|
||
<link rel="icon" type="image/png" sizes="32x32" href="assets/app-icon-64.png">
|
||
<link rel="icon" type="image/png" sizes="192x192" href="assets/app-icon-192.png">
|
||
<link rel="apple-touch-icon" href="assets/app-icon-192.png">
|
||
<link rel="stylesheet" href="style.css">
|
||
<link rel="stylesheet" href="settings.css">
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<header>
|
||
<div class="header-main">
|
||
<h1>⚙️ Einstellungen</h1>
|
||
<a href="index.html" class="btn btn-secondary">Zurück zu Beiträgen</a>
|
||
</div>
|
||
</header>
|
||
|
||
<div id="loading" class="loading" style="display: none;">Lade Einstellungen...</div>
|
||
<div id="error" class="error" style="display: none;"></div>
|
||
<div id="success" class="success" style="display: none;"></div>
|
||
|
||
<div class="settings-container">
|
||
|
||
<!-- AI Credentials Section -->
|
||
<section class="settings-section">
|
||
<h2 class="section-title">AI-Anmeldedaten</h2>
|
||
<p class="section-description">
|
||
Verwalte deine API-Schlüssel für verschiedene AI-Provider. Du kannst mehrere Credentials speichern und schnell zwischen ihnen wechseln.
|
||
</p>
|
||
|
||
<div id="credentialsList" class="credentials-list"></div>
|
||
|
||
<button type="button" class="btn btn-primary" id="addCredentialBtn">
|
||
➕ Neue Anmeldedaten hinzufügen
|
||
</button>
|
||
</section>
|
||
|
||
<!-- AI Settings Section -->
|
||
<section class="settings-section">
|
||
<h2 class="section-title">AI-Kommentar-Generator</h2>
|
||
<p class="section-description">
|
||
Konfiguriere die automatische Generierung von Kommentaren durch KI.
|
||
</p>
|
||
|
||
<form id="aiSettingsForm">
|
||
<div class="form-group">
|
||
<label class="form-label">
|
||
<input type="checkbox" id="aiEnabled" class="form-checkbox">
|
||
<span>AI-Kommentar-Generator aktivieren</span>
|
||
</label>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="activeCredential" class="form-label">Aktive Anmeldedaten</label>
|
||
<select id="activeCredential" class="form-select">
|
||
<option value="">-- Bitte wählen --</option>
|
||
</select>
|
||
<p class="form-help">
|
||
Wähle welche API-Anmeldedaten verwendet werden sollen
|
||
</p>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="aiPromptPrefix" class="form-label">Prompt-Präfix</label>
|
||
<textarea id="aiPromptPrefix" class="form-textarea" rows="4"
|
||
placeholder="Anweisungen für die KI vor dem Post-Text..."></textarea>
|
||
<p class="form-help">
|
||
Dieser Text wird vor dem eigentlichen Post-Text an die KI gesendet. Verwende <code>{FREUNDE}</code> als Platzhalter für Freundesnamen.
|
||
</p>
|
||
</div>
|
||
</form>
|
||
</section>
|
||
|
||
<!-- Profile Friends Section -->
|
||
<section class="settings-section">
|
||
<h2 class="section-title">👥 Freundesnamen pro Profil</h2>
|
||
<p class="section-description">
|
||
Gib für jedes Profil eine Liste von Freundesnamen an, die im Prompt verwendet werden können.
|
||
</p>
|
||
|
||
<div id="profileFriendsList"></div>
|
||
</section>
|
||
|
||
<!-- Save Button at the end -->
|
||
<section class="settings-section">
|
||
<div class="form-actions">
|
||
<button type="button" class="btn btn-primary" id="saveAllBtn">
|
||
💾 Einstellungen speichern
|
||
</button>
|
||
<button type="button" class="btn btn-secondary" id="testBtn">
|
||
🧪 Kommentar testen
|
||
</button>
|
||
</div>
|
||
</section>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Add/Edit Credential Modal -->
|
||
<div id="credentialModal" class="modal" hidden>
|
||
<div class="modal__backdrop"></div>
|
||
<div class="modal__content" role="dialog" aria-modal="true">
|
||
<button type="button" id="credentialModalClose" class="modal__close">×</button>
|
||
<h2 class="modal__title" id="credentialModalTitle">Anmeldedaten hinzufügen</h2>
|
||
|
||
<form id="credentialForm">
|
||
<input type="hidden" id="credentialId">
|
||
|
||
<div class="form-group">
|
||
<label for="credentialName" class="form-label">Name *</label>
|
||
<input type="text" id="credentialName" class="form-input" placeholder="z.B. Mein Gemini Key" required>
|
||
<p class="form-help">Gib einen eindeutigen Namen für diese Anmeldedaten an</p>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="credentialProvider" class="form-label">Provider *</label>
|
||
<select id="credentialProvider" class="form-select" required>
|
||
<option value="gemini">Google Gemini</option>
|
||
<option value="claude">Anthropic Claude</option>
|
||
<option value="openai">OpenAI / ChatGPT</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="credentialApiKey" class="form-label">API-Schlüssel</label>
|
||
<input type="password" id="credentialApiKey" class="form-input" placeholder="sk-...">
|
||
<p class="form-help" id="credentialApiKeyHelp"></p>
|
||
</div>
|
||
|
||
<div class="form-group" id="credentialBaseUrlGroup" style="display: none;">
|
||
<label for="credentialBaseUrl" class="form-label">Basis-URL</label>
|
||
<input type="text" id="credentialBaseUrl" class="form-input" placeholder="https://api.openai.com/v1">
|
||
<p class="form-help" id="credentialBaseUrlHelp"></p>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="credentialModel" class="form-label">Modell</label>
|
||
<input type="text" id="credentialModel" class="form-input" list="credentialModelOptions"
|
||
placeholder="z.B. gpt-4o-mini">
|
||
<datalist id="credentialModelOptions"></datalist>
|
||
<p class="form-help" id="credentialModelHelp"></p>
|
||
</div>
|
||
|
||
<div class="form-actions">
|
||
<button type="submit" class="btn btn-primary">Speichern</button>
|
||
<button type="button" class="btn btn-secondary" id="credentialCancelBtn">Abbrechen</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Test Modal -->
|
||
<div id="testModal" class="modal" hidden>
|
||
<div class="modal__backdrop"></div>
|
||
<div class="modal__content" role="dialog" aria-modal="true">
|
||
<button type="button" id="testModalClose" class="modal__close">×</button>
|
||
<h2 class="modal__title">Kommentar-Generator testen</h2>
|
||
|
||
<div class="modal__body">
|
||
<div class="form-group">
|
||
<label for="testProfileNumber" class="form-label">Test mit Profil</label>
|
||
<select id="testProfileNumber" class="form-select">
|
||
<option value="1">Profil 1</option>
|
||
<option value="2">Profil 2</option>
|
||
<option value="3">Profil 3</option>
|
||
<option value="4">Profil 4</option>
|
||
<option value="5">Profil 5</option>
|
||
</select>
|
||
<p class="form-help">Wähle ein Profil, um die Freundesnamen zu testen</p>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="testPostText" class="form-label">Test Post-Text</label>
|
||
<textarea id="testPostText" class="form-textarea" rows="4"
|
||
placeholder="Füge hier einen Beispiel-Post-Text ein..."></textarea>
|
||
</div>
|
||
|
||
<button type="button" class="btn btn-primary" id="generateTestComment">
|
||
✨ Kommentar generieren
|
||
</button>
|
||
|
||
<div id="testLoading" class="test-loading" style="display: none;">
|
||
Generiere Kommentar...
|
||
</div>
|
||
|
||
<div id="testResult" class="test-result" style="display: none;">
|
||
<h3>Generierter Kommentar:</h3>
|
||
<div id="testComment" class="test-comment"></div>
|
||
</div>
|
||
|
||
<div id="testError" class="test-error" style="display: none;"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="settings.js"></script>
|
||
</body>
|
||
</html>
|