reworked site
This commit is contained in:
@@ -2,195 +2,20 @@
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Einstellungen – Post Tracker</title>
|
||||
<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">
|
||||
<script>
|
||||
(function redirectToShell() {
|
||||
const url = new URL(window.location.href);
|
||||
const params = new URLSearchParams(url.search);
|
||||
params.set('view', 'settings');
|
||||
const target = `index.html${params.toString() ? `?${params}` : ''}${url.hash}`;
|
||||
window.location.replace(target);
|
||||
})();
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
|
||||
<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>
|
||||
<p>Weiterleitung zu den Einstellungen…</p>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user