Files
gott/wwwroot/index.html
T
Meleki 8a9293218b refactor: Shared Links als Card-Grid mit Card-Menü (wie Cronjobs)
- index.html: shared-links-list → card-grid
- dashboard.js: Cards mit card-compact, card-menu-dropdown, fa-cog statt fa-robot
- dashboard.css: 60 Zeilen shared-link-*/danger-icon CSS entfernt (nutzt card-Styles)
2026-03-05 15:11:05 +01:00

472 lines
20 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>// gott</title>
<script src="js/title.js"></script>
<link rel="stylesheet" href="lib/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="css/fonts.css">
<link rel="stylesheet" href="css/theme.css">
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/login.css">
<link rel="stylesheet" href="css/form.css">
<link rel="stylesheet" href="css/dashboard.css">
<link rel="stylesheet" href="css/chat.css">
<link rel="stylesheet" href="css/placeholder.css">
<link rel="stylesheet" href="css/codemirror.min.css">
<link rel="stylesheet" href="css/easymde.min.css">
<link rel="stylesheet" href="css/file-explorer.css">
<link rel="stylesheet" href="css/markdown.css">
<link rel="stylesheet" href="css/tooltip.css">
<link rel="stylesheet" href="css/mobile.css">
</head>
<body>
<div id="claudeStatusBar" class="status-bar" hidden>
<span class="status-indicator"></span>
<span class="status-text"></span>
<button class="status-close icon-btn"><i class="fa fa-times"></i></button>
</div>
<div id="app"></div>
<!-- Templates -->
<template id="tpl-login">
<div class="page login-page">
<div class="login-box">
<h1 class="login-title">// gott</h1>
<div class="login-form">
<input type="text" id="loginUsername" placeholder="Benutzername" autocomplete="username" autofocus>
<input type="password" id="loginPassword" placeholder="Passwort" autocomplete="current-password">
<div class="login-error" id="loginError" hidden></div>
<button id="loginBtn">Anmelden</button>
</div>
</div>
</div>
</template>
<template id="tpl-dashboard">
<div class="page dashboard">
<header>
<button class="back-btn icon-btn" disabled></button>
<h1 class="dashboard-title">// gott</h1>
<div class="dashboard-links">
<a id="dashboardSettingsLink" class="dashboard-link">Einstellungen</a>
<a id="dashboardProfileLink" class="dashboard-link">Mein Profil</a>
</div>
</header>
<div class="page-content">
<section>
<div class="section-header">
<h2>Sessions</h2>
<button id="newSessionBtn" class="section-add-btn"><i class="fa fa-plus"></i> Neue Session</button>
</div>
<div class="card-grid" id="sessionCards"></div>
</section>
<section>
<div class="section-header">
<h2>Cronjobs</h2>
<button id="newCronjobBtn" class="section-add-btn"><i class="fa fa-plus"></i> Neuer Cronjob</button>
</div>
<div class="card-grid" id="cronjobCards"></div>
</section>
<section>
<div class="section-header">
<h2>Agents</h2>
<button id="newAgentBtn" class="section-add-btn"><i class="fa fa-plus"></i> Neuer Agent</button>
</div>
<div class="card-grid" id="agentCards"></div>
</section>
<section id="sharedLinksSection" hidden>
<div class="section-header">
<h2>Geteilte Links</h2>
</div>
<div class="card-grid" id="sharedLinksCards"></div>
</section>
</div>
</div>
</template>
<template id="tpl-session">
<div class="page form-page">
<header>
<button class="back-btn icon-btn" data-page="dashboard"><i class="fa fa-arrow-left"></i></button>
<h1 id="sessionPageTitle">Neue Session</h1>
</header>
<div class="page-content">
<div class="form">
<div class="avatar-section">
<div class="avatar-preview" id="sessionImagePreview">?</div>
<input type="file" id="sessionImageInput" accept="image/*" hidden>
<button id="sessionImageBtn">Bild ändern</button>
<button id="sessionImageClearBtn">Entfernen</button>
</div>
<label>Name</label>
<input type="text" id="sessionName" placeholder="Name der Session">
<label>Beschreibung</label>
<textarea id="sessionDescription" rows="3" placeholder="Beschreibung (optional)"></textarea>
<label>Agent</label>
<select id="agentSelect"></select>
<label>Workspace</label>
<div class="input-with-btn">
<input type="text" id="sessionWorkspace" placeholder="Absoluter Pfad zum Arbeitsverzeichnis (optional)">
<button type="button" id="sessionWorkspaceBrowse" class="icon-btn"><i class="fa fa-folder"></i></button>
</div>
<label>Kontext</label>
<textarea id="sessionContext" rows="4" placeholder="Zusätzlicher Kontext für den System-Prompt (optional)"></textarea>
<label>Benutzerdefinierte Befehle</label>
<div class="custom-commands" id="customCommandsList"></div>
<button type="button" id="addCommandBtn" class="add-cmd-btn">+ Befehl hinzufügen</button>
<label><i class="fa fa-paper-plane"></i> <b>Telegram Bot</b></label>
<span>Erstelle einen Bot via <a href="https://t.me/BotFather" target="_blank">@BotFather</a></span>
<label>Bot-Token</label>
<input type="text" id="sessionTelegramToken" placeholder="123456:ABC-DEF..." autocomplete="off">
<label>Webhook-Secret</label>
<input type="text" id="sessionTelegramSecret" readonly style="opacity: var(--semi-transparent); ">
<label>Status</label>
<div id="sessionTelegramStatusBox" class="telegram-status-box">Kein Status verfügbar</div>
<div class="telegram-actions">
<button type="button" id="sessionTelegramRegisterBtn" hidden>Webhook registrieren</button>
<button type="button" id="sessionTelegramDeleteBtn" class="danger-btn" hidden>Webhook entfernen</button>
</div>
<div class="form-actions">
<button id="sessionSaveBtn">Speichern</button>
<button id="sessionCancelBtn">Abbrechen</button>
<button id="sessionDeleteBtn" class="danger-btn" hidden>Löschen</button>
</div>
</div>
</div>
</div>
</template>
<template id="tpl-cronjob">
<div class="page form-page">
<header>
<button class="back-btn icon-btn" data-page="dashboard"><i class="fa fa-arrow-left"></i></button>
<h1 id="cronjobPageTitle">Neuer Cronjob</h1>
</header>
<div class="page-content">
<div class="form-group form-check-group">
<label>
<input type="checkbox" id="cronjobEnabled" checked>
Aktiv
</label>
</div>
<div class="form-group">
<label for="cronjobName">Name</label>
<input type="text" id="cronjobName" placeholder="z.B. Täglicher Report">
</div>
<div class="form-group">
<label for="cronjobSession">Session</label>
<select id="cronjobSession"></select>
</div>
<div class="form-group">
<label for="cronjobCron">Cron-Expression</label>
<input type="text" id="cronjobCron" placeholder="z.B. 0 9 * * *">
<small id="cronjobCronPreview" class="form-hint"></small>
</div>
<div class="form-group">
<label for="cronjobPrompt">Prompt</label>
<textarea id="cronjobPrompt" rows="6" placeholder="Die Nachricht, die an den Agent gesendet wird..."></textarea>
</div>
<div class="form-group">
<label for="cronjobNotifySession">Benachrichtigungs-Session <small>(optional)</small></label>
<select id="cronjobNotifySession"></select>
<small class="form-hint">Wenn gesetzt, wird eine Zusammenfassung in diese Session geschrieben (z.B. eine mit Telegram).</small>
</div>
<div class="form-group">
<div id="cronjobStatusBox" class="form-status-box" hidden></div>
</div>
<div class="form-actions">
<button id="cronjobSaveBtn">Speichern</button>
<button id="cronjobRunBtn" class="positive-btn" hidden><i class="fa fa-play"></i> Jetzt ausführen</button>
<button id="cronjobDeleteBtn" class="danger-btn" hidden>Löschen</button>
</div>
</div>
</div>
</template>
<template id="tpl-agent">
<div class="page form-page">
<header>
<button class="back-btn icon-btn" data-page="dashboard"><i class="fa fa-arrow-left"></i></button>
<h1 id="agentPageTitle">Neuer Agent</h1>
</header>
<div class="page-content">
<div class="form">
<div class="avatar-section">
<div class="avatar-preview" id="avatarPreview">?</div>
<input type="file" id="avatarInput" accept="image/*" hidden>
<button id="avatarBtn">Avatar ändern</button>
<button id="avatarClearBtn">Entfernen</button>
</div>
<label>Name</label>
<input type="text" id="agentName" placeholder="Name des Agents">
<label>Beschreibung</label>
<input type="text" id="agentDescription" placeholder="Kurze Beschreibung (optional)">
<label>Model</label>
<select id="agentModel">
<option value="sonnet-4-5">Sonnet 4.5</option>
<option value="sonnet-4-6">Sonnet 4.6</option>
<option value="opus-4-5">Opus 4.5</option>
<option value="opus-4-6">Opus 4.6</option>
<option value="haiku-4-5">Haiku 4.5</option>
</select>
<label class="checkbox-label">
<input type="checkbox" id="agentToolChoice" checked>
Tool-Nutzung erzwingen <span class="checkbox-hint">(tool_choice: any)</span>
</label>
<label>Git-Commit-Verhalten</label>
<select id="agentAutoCommit">
<option value="">Nicht erwähnen</option>
<option value="mention">Anmerken (nur auf Anweisung)</option>
<option value="enforce">Erzwingen (nach jeder Änderung)</option>
<option value="forbid">Verbieten (strikt verboten)</option>
</select>
<label>Ego</label>
<label class="checkbox-label">
<input type="checkbox" id="agentUseSoul" checked>
Hat eine Seele <span class="checkbox-hint">(SOUL.md im System-Prompt)</span>
</label>
<label class="checkbox-label">
<input type="checkbox" id="agentUseIdentity" checked>
Hat eine Identität <span class="checkbox-hint">(IDENTITY.md im System-Prompt)</span>
</label>
<label class="checkbox-label">
<input type="checkbox" id="agentUseUserInfo" checked>
Kennt sein Gegenüber <span class="checkbox-hint">(Benutzer-Persona im System-Prompt)</span>
</label>
<label class="checkbox-label">
<input type="checkbox" id="agentUseMemory" checked>
Zugriff auf Erinnerungen <span class="checkbox-hint">(Memory-Tools verfügbar)</span>
</label>
<label>Web-Suche</label>
<select id="agentWebSearchVersion">
<option value="">Deaktiviert</option>
<option value="web_search_20250305">Aktiviert - Version 2025</option>
<option value="web_search_20260209">Aktiviert - Version 2026</option>
</select>
<label>Skills</label>
<div id="agentSkillsSection" hidden>
<div class="skill-list" id="agentSkillList"></div>
</div>
<label>Benutzerdefinierte Befehle</label>
<div class="custom-commands" id="agentCommandsList"></div>
<button type="button" id="agentAddCommandBtn" class="add-cmd-btn">+ Befehl hinzufügen</button>
<div class="form-actions">
<button id="agentSaveBtn">Speichern</button>
<button id="agentCancelBtn">Abbrechen</button>
<button id="agentDeleteBtn" class="danger-btn" hidden>Löschen</button>
</div>
</div>
</div>
</div>
</template>
<template id="tpl-chat">
<div class="page chat-page">
<header>
<button class="back-btn icon-btn" id="chatBackBtn"><i class="fa fa-arrow-left"></i></button>
<h1 id="sessionTitle">-</h1>
<div class="header-menu">
<button class="header-menu-trigger icon-btn" id="chatMenuBtn"><i class="fa fa-ellipsis-v"></i></button>
<div class="header-menu-dropdown" id="chatMenuDropdown" hidden>
<button class="header-menu-item" id="systemPromptBtn">System-Prompt anzeigen</button>
<button class="header-menu-item" id="archiveBtn">Archivieren</button>
</div>
</div>
</header>
<div class="page-content">
<div id="chat"></div>
<div class="meta-bar" id="meta"></div>
<div id="filePreview" class="file-preview" hidden></div>
<div id="refPreview" class="ref-preview" hidden></div>
<div id="replyPreview" class="reply-preview" hidden></div>
<div class="input-area">
<input type="file" id="fileInput" accept="image/jpeg,image/png,image/gif,image/webp,application/pdf" multiple hidden>
<button id="fileBtn" class="icon-btn" title="Datei anhängen"><i class="fa fa-paperclip"></i></button>
<button id="explorerBtn" class="icon-btn" title="Workspace durchsuchen"><i class="fa fa-folder"></i></button>
<textarea id="input" placeholder="Nachricht..." rows="1"></textarea>
<button id="emojiBtn" class="icon-btn" title="Emoji einfügen"><i class="fa fa-smile-o"></i></button>
<button id="send" class="icon-btn"><i class="fa fa-paper-plane"></i></button>
<button id="stop" class="icon-btn stop-btn" hidden title="Antwort abbrechen"><i class="fa fa-stop"></i></button>
</div>
</div>
</div>
</template>
<template id="tpl-settings">
<div class="page settings-page">
<header>
<button class="back-btn icon-btn" data-page="dashboard"><i class="fa fa-arrow-left"></i></button>
<h1>Einstellungen</h1>
</header>
<div class="page-content">
<div class="settings">
<section class="settings-section">
<h2>Darstellung</h2>
<div class="setting-row">
<div class="setting-info">
<label>Seitenbreite</label>
<span class="setting-hint">Maximale Breite des Inhaltsbereichs</span>
</div>
<div class="setting-control">
<input type="range" id="settingPageWidth" min="600" max="1800" step="50">
<span class="setting-value" id="settingPageWidthValue">900px</span>
</div>
</div>
</section>
<section class="settings-section">
<h2>Chat</h2>
<div class="setting-row">
<div class="setting-info">
<label>Tool-Calls</label>
<span class="setting-hint">Welche Tool-Aufrufe im Chat angezeigt werden</span>
</div>
<div class="setting-control">
<select id="settingToolCallDisplay">
<option value="all">Alle anzeigen</option>
<option value="modifications">Nur Modifikationen</option>
<option value="hidden">Verstecken</option>
</select>
</div>
</div>
<div class="setting-row">
<div class="setting-info">
<label>Chain-Info</label>
<span class="setting-hint">Tokens, Dauer und Iterationen nach jeder Antwort</span>
</div>
<div class="setting-control">
<select id="settingChainMetaDisplay">
<option value="always">Immer anzeigen</option>
<option value="sometimes">Manchmal anzeigen</option>
<option value="never">Nie anzeigen</option>
</select>
</div>
</div>
<div class="setting-row">
<div class="setting-info">
<label>Gelöschte Nachrichten</label>
<span class="setting-hint">Gelöschte Nachrichten durchgestrichen anzeigen (werden nicht an die KI gesendet)</span>
</div>
<div class="setting-control">
<label class="toggle-switch">
<input type="checkbox" id="settingShowDeletedMessages">
<span class="toggle-slider"></span>
</label>
</div>
</div>
</section>
<section id="settingsBackupSection" class="settings-section" style="display:none">
<h2>Daten</h2>
<div class="setting-row">
<div class="setting-info">
<label>Backup erstellen</label>
<span class="setting-hint">Sichert den gesamten Data-Ordner (Datenbank, Agents, Memories)</span>
</div>
<div class="setting-control">
<button id="settingsBackupBtn">Jetzt sichern</button>
</div>
</div>
</section>
<section class="settings-section settings-reset">
<button id="settingsResetBtn" class="danger-btn">Alle Einstellungen zurücksetzen</button>
</section>
</div>
</div>
</div>
</template>
<template id="tpl-profile">
<div class="page form-page">
<header>
<button class="back-btn icon-btn" data-page="dashboard"><i class="fa fa-arrow-left"></i></button>
<h1>Mein Profil</h1>
</header>
<div class="page-content">
<div class="form">
<label>Benutzername</label>
<input type="text" id="profileUsername" disabled>
<label>Anzeigename</label>
<input type="text" id="profileDisplayName" placeholder="Anzeigename">
<label>Persona</label>
<span class="setting-hint">Wird im System-Prompt verwendet, wenn der Agent "Kennt sein Gegenüber" aktiviert hat.</span>
<textarea id="profilePersona" rows="8" placeholder="Beschreibe dich selbst – Name, Rolle, Präferenzen, Kommunikationsstil..."></textarea>
<div class="form-actions">
<button id="profileSaveBtn">Speichern</button>
</div>
<div class="profile-message" id="profileMessage" hidden></div>
<hr class="profile-divider">
<h2>Passwort ändern</h2>
<label>Aktuelles Passwort</label>
<input type="password" id="profileCurrentPassword" placeholder="Aktuelles Passwort" autocomplete="current-password">
<label>Neues Passwort</label>
<input type="password" id="profileNewPassword" placeholder="Neues Passwort" autocomplete="new-password">
<label>Neues Passwort bestätigen</label>
<input type="password" id="profileConfirmPassword" placeholder="Passwort wiederholen" autocomplete="new-password">
<div class="form-actions">
<button id="profilePasswordBtn">Passwort ändern</button>
</div>
<div class="profile-message" id="profilePasswordMessage" hidden></div>
<hr class="profile-divider">
<button id="profileLogoutBtn" class="danger-btn">Abmelden</button>
</div>
</div>
</div>
</template>
<template id="tpl-shared">
<div class="shared-page">
<div class="shared-header">
<span class="shared-logo">// gott</span>
<span class="shared-label">Geteilte Nachricht</span>
</div>
<div class="shared-content" id="sharedContent">
<div class="shared-loading"><i class="fa fa-spinner fa-spin"></i> Lade...</div>
</div>
<div class="shared-footer"></div>
</div>
</template>
<script src="js/lib/marked.min.js"></script>
<script src="js/lib/codemirror.min.js"></script>
<script src="js/lib/cm-mode-xml.min.js"></script>
<script src="js/lib/cm-mode-javascript.min.js"></script>
<script src="js/lib/cm-mode-css.min.js"></script>
<script src="js/lib/cm-mode-htmlmixed.min.js"></script>
<script src="js/lib/cm-mode-python.min.js"></script>
<script src="js/lib/cm-mode-markdown.min.js"></script>
<script src="js/lib/cm-mode-shell.min.js"></script>
<script src="js/lib/cm-mode-clike.min.js"></script>
<script src="js/lib/cm-mode-yaml.min.js"></script>
<script src="js/lib/easymde.min.js"></script>
<script src="js/tooltip.js"></script>
<script src="js/emoji.js"></script>
<script src="js/emoji.userdata.js"></script>
<script src="js/ui.js"></script>
<script src="js/api.js"></script>
<script src="js/session.js"></script>
<script src="js/file-explorer.js"></script>
<script src="js/chat.js"></script>
<script src="js/history.js"></script>
<script src="js/router.js"></script>
<script src="js/commands-ui.js"></script>
<script src="js/pages/dashboard.js"></script>
<script src="js/pages/cronjob-page.js"></script>
<script src="js/pages/agent-page.js"></script>
<script src="js/pages/session-page.js"></script>
<script src="js/pages/chat-page.js"></script>
<script src="js/pages/login-page.js"></script>
<script src="js/pages/settings-page.js"></script>
<script src="js/pages/profile-page.js"></script>
<script src="js/pages/shared-page.js"></script>
<script src="js/app.js"></script>
</body>
</html>