19855efacc
Some checks failed
Tests / Go Tests (push) Has been cancelled
Tests / Python Tests (push) Has been cancelled
Tests / Integration Tests (push) Has been cancelled
Tests / Go Lint (push) Has been cancelled
Tests / Python Lint (push) Has been cancelled
Tests / Security Scan (push) Has been cancelled
Tests / All Checks Passed (push) Has been cancelled
Security Scanning / Secret Scanning (push) Has been cancelled
Security Scanning / Dependency Vulnerability Scan (push) Has been cancelled
Security Scanning / Go Security Scan (push) Has been cancelled
Security Scanning / Python Security Scan (push) Has been cancelled
Security Scanning / Node.js Security Scan (push) Has been cancelled
Security Scanning / Docker Image Security (push) Has been cancelled
Security Scanning / Security Summary (push) Has been cancelled
CI/CD Pipeline / Go Tests (push) Has been cancelled
CI/CD Pipeline / Python Tests (push) Has been cancelled
CI/CD Pipeline / Website Tests (push) Has been cancelled
CI/CD Pipeline / Linting (push) Has been cancelled
CI/CD Pipeline / Security Scan (push) Has been cancelled
CI/CD Pipeline / Docker Build & Push (push) Has been cancelled
CI/CD Pipeline / Integration Tests (push) Has been cancelled
CI/CD Pipeline / Deploy to Staging (push) Has been cancelled
CI/CD Pipeline / Deploy to Production (push) Has been cancelled
CI/CD Pipeline / CI Summary (push) Has been cancelled
ci/woodpecker/manual/build-ci-image Pipeline was successful
ci/woodpecker/manual/main Pipeline failed
All services: admin-v2, studio-v2, website, ai-compliance-sdk, consent-service, klausur-service, voice-service, and infrastructure. Large PDFs and compiled binaries excluded via .gitignore.
1443 lines
80 KiB
Plaintext
1443 lines
80 KiB
Plaintext
|
||
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>BreakPilot – Arbeitsblatt Studio</title>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<link rel="stylesheet" href="/static/css/studio.css">
|
||
</head>
|
||
<body>
|
||
<div class="app-root">
|
||
<header class="topbar">
|
||
<div class="brand">
|
||
<div class="brand-logo">BP</div>
|
||
<div>
|
||
<div class="brand-text-main">BreakPilot</div>
|
||
<div class="brand-text-sub">Studio</div>
|
||
</div>
|
||
</div>
|
||
<nav class="top-nav" style="display:none;">
|
||
<div class="top-nav-item active" data-screen="1"></div>
|
||
<div class="top-nav-item" data-screen="2"></div>
|
||
</nav>
|
||
<div class="top-actions">
|
||
<div class="language-selector">
|
||
<select id="language-select" class="lang-select">
|
||
<option value="de">🇩🇪 Deutsch</option>
|
||
<option value="tr">🇹🇷 Türkçe</option>
|
||
<option value="ar">🇸🇦 العربية</option>
|
||
<option value="ru">🇷🇺 Русский</option>
|
||
<option value="uk">🇺🇦 Українська</option>
|
||
<option value="pl">🇵🇱 Polski</option>
|
||
<option value="en">🇬🇧 English</option>
|
||
</select>
|
||
</div>
|
||
<button class="theme-toggle" id="theme-toggle" title="Dark/Light Mode">
|
||
<span class="theme-toggle-icon" id="theme-icon">🌙</span>
|
||
<span id="theme-label">Dark</span>
|
||
</button>
|
||
<button class="btn btn-sm btn-ghost" id="btn-legal" title="Rechtliches">⚖️</button>
|
||
<button class="btn btn-sm btn-ghost" id="btn-admin" title="Admin Panel">⚙️</button>
|
||
<button class="btn btn-sm btn-ghost" id="btn-login" data-i18n="login">Login / Anmeldung</button>
|
||
<!-- Notification Bell (shown when logged in) -->
|
||
<div class="notification-bell" id="notification-bell">
|
||
<button class="notification-bell-btn" id="notification-bell-btn" title="Benachrichtigungen">
|
||
🔔
|
||
</button>
|
||
<span class="notification-badge hidden" id="notification-badge">0</span>
|
||
<div class="notification-panel" id="notification-panel">
|
||
<div class="notification-panel-header">
|
||
<span class="notification-panel-title">Benachrichtigungen</span>
|
||
<div class="notification-panel-actions">
|
||
<button class="notification-panel-action" onclick="markAllNotificationsRead()" title="Alle als gelesen markieren">✓ Alle</button>
|
||
<button class="notification-panel-action" onclick="showNotificationPreferences()" title="Einstellungen">⚙️</button>
|
||
</div>
|
||
</div>
|
||
<div class="notification-list" id="notification-list">
|
||
<div class="notification-empty">
|
||
<div class="notification-empty-icon">🔔</div>
|
||
<div>Keine Benachrichtigungen</div>
|
||
</div>
|
||
</div>
|
||
<div class="notification-footer">
|
||
<button class="notification-footer-btn" onclick="loadMoreNotifications()">Mehr laden</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- User Dropdown (shown when logged in) -->
|
||
<div class="auth-user-dropdown">
|
||
<button class="auth-user-btn" id="auth-user-btn">
|
||
<div class="auth-user-avatar">BP</div>
|
||
<span>▼</span>
|
||
</button>
|
||
<div class="auth-user-menu" id="auth-user-menu">
|
||
<div class="auth-user-menu-header">
|
||
<div class="auth-user-menu-name">Benutzer</div>
|
||
<div class="auth-user-menu-email">user@example.com</div>
|
||
</div>
|
||
<button class="auth-user-menu-item" onclick="showProfileModal()">👤 Profil</button>
|
||
<button class="auth-user-menu-item" onclick="showSessionsModal()">🔐 Aktive Sitzungen</button>
|
||
<button class="auth-user-menu-item danger" onclick="logout()">🚪 Abmelden</button>
|
||
</div>
|
||
</div>
|
||
<div class="pill" data-i18n="mvp_local">MVP · Lokal auf deinem Mac</div>
|
||
</div>
|
||
</header>
|
||
|
||
<div class="main-layout">
|
||
<aside class="sidebar">
|
||
<div>
|
||
<div class="sidebar-section-title">Bereiche</div>
|
||
<div class="sidebar-menu">
|
||
<div class="sidebar-item active">
|
||
<div class="sidebar-item-label">
|
||
<span>Arbeitsblatt Studio</span>
|
||
</div>
|
||
<div class="sidebar-item-badge">aktiv</div>
|
||
</div>
|
||
<div class="sidebar-item">
|
||
<div class="sidebar-item-label">
|
||
<span>Eltern-Kanal</span>
|
||
</div>
|
||
<div class="sidebar-item-badge">demnächst</div>
|
||
</div>
|
||
<div class="sidebar-item">
|
||
<div class="sidebar-item-label">
|
||
<span>Korrektur / Noten</span>
|
||
</div>
|
||
<div class="sidebar-item-badge">demnächst</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<div class="sidebar-section-title">Lerneinheiten (lokal)</div>
|
||
<div class="unit-form">
|
||
<input class="unit-input" id="unit-student" placeholder="Schüler/in">
|
||
<input class="unit-input" id="unit-subject" placeholder="Fach">
|
||
<input class="unit-input" id="unit-grade" placeholder="Klasse (z.B. 7a)">
|
||
<input class="unit-input" id="unit-title" placeholder="Lerneinheit / Thema">
|
||
<button type="button" class="btn btn-sm btn-primary btn-unit-add" id="btn-add-unit">Anlegen</button>
|
||
<ul class="unit-list" id="unit-list"></ul>
|
||
<button type="button" class="btn btn-sm btn-ghost" id="btn-attach-current-to-lu">Aktuelles Arbeitsblatt hinzufügen</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<div class="sidebar-section-title">Dateien hochladen</div>
|
||
<div class="upload-inline">
|
||
<input type="file" id="file-input" multiple>
|
||
<button type="button" class="btn btn-sm btn-primary" id="btn-upload-inline">Hochladen</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<div class="sidebar-section-title">GPU Infrastruktur</div>
|
||
<div id="vast-control" class="vast-control">
|
||
<div class="vast-status-row">
|
||
<span class="vast-label">Status:</span>
|
||
<span id="vast-status-badge" class="vast-badge vast-badge-unknown">Laden...</span>
|
||
</div>
|
||
<div class="vast-status-row">
|
||
<span class="vast-label">GPU:</span>
|
||
<span id="vast-gpu-name" class="vast-value">-</span>
|
||
</div>
|
||
<div class="vast-status-row">
|
||
<span class="vast-label">Kosten/h:</span>
|
||
<span id="vast-cost-hour" class="vast-value">-</span>
|
||
</div>
|
||
<div class="vast-status-row">
|
||
<span class="vast-label">Auto-Stop:</span>
|
||
<span id="vast-auto-shutdown" class="vast-value">-</span>
|
||
</div>
|
||
<div class="vast-status-row" style="margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--bp-border);">
|
||
<span class="vast-label">Budget:</span>
|
||
<span id="vast-credit" class="vast-value" style="color: var(--bp-success);">-</span>
|
||
</div>
|
||
<div class="vast-status-row">
|
||
<span class="vast-label">Session:</span>
|
||
<span id="vast-session-cost" class="vast-value">-</span>
|
||
</div>
|
||
<div class="vast-buttons">
|
||
<button type="button" class="btn btn-sm btn-primary" id="btn-vast-start" disabled>Starten</button>
|
||
<button type="button" class="btn btn-sm btn-danger" id="btn-vast-stop" disabled>Stoppen</button>
|
||
</div>
|
||
<div id="vast-message" class="vast-message"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<div class="sidebar-section-title">Speicherort</div>
|
||
<div class="sidebar-footer">
|
||
CI / Brandbook: Farben kommen bereits aus Variablen und sind später leicht anpassbar.
|
||
</div>
|
||
</div>
|
||
</aside>
|
||
|
||
<main class="content">
|
||
<!-- Screen 1: Eingangsdateien & Alt/Neu-Vergleich -->
|
||
<section class="panel" id="panel-compare" style="display:flex;">
|
||
<div class="panel-header">
|
||
<div>
|
||
<div class="panel-title">Arbeitsblätter & Vergleich</div>
|
||
<div class="panel-subtitle">Links Scan · Rechts neu aufgebautes Arbeitsblatt</div>
|
||
<div class="panel-subtitle" id="unit-heading-screen1">Keine Lerneinheit ausgewählt</div>
|
||
</div>
|
||
<div style="display: flex; align-items: center; gap: 8px;">
|
||
<button type="button" class="btn btn-sm btn-primary" id="btn-toggle-filter" style="font-size: 10px;">
|
||
Nur Lerneinheit
|
||
</button>
|
||
<span class="small-pill" id="eingang-count">0 Dateien</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="panel-body">
|
||
<ul class="file-list" id="eingang-list"></ul>
|
||
|
||
<div class="inline-process">
|
||
<button type="button" class="btn btn-sm btn-primary" id="btn-full-process">
|
||
Arbeitsblätter neu aufbauen
|
||
</button>
|
||
</div>
|
||
|
||
<div class="preview-container" id="preview-container">
|
||
<div class="preview-placeholder">
|
||
Lade Arbeitsblätter hoch und klicke auf „Arbeitsblätter neu aufbauen".<br>
|
||
Dann kannst du mit den Pfeilen durch die Scans und die bereinigten Versionen blättern.<br>
|
||
Mit Doppelklick öffnest du das Dokument im Vollbild.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Screen 2: Kacheln -->
|
||
<section class="panel" id="panel-tiles" style="display:none;">
|
||
<div class="panel-tools-header">
|
||
<div>
|
||
<div class="panel-title"><span id="unit-heading-screen2">Keine Lerneinheit ausgewählt</span> – Bitte wähle Deine Lernkacheln aus, die Du verwenden möchtest.</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="panel-body">
|
||
<div class="card-toggle-bar">
|
||
<button class="toggle-pill active" data-tile="mindmap">Mindmap</button>
|
||
<button class="toggle-pill active" data-tile="qa">Frage–Antwort</button>
|
||
<button class="toggle-pill active" data-tile="mc">Multiple Choice</button>
|
||
<button class="toggle-pill active" data-tile="cloze">Lückentext</button>
|
||
</div>
|
||
|
||
<div class="cards-grid">
|
||
<!-- Mindmap Lernposter -->
|
||
<div class="card card-half" data-tile="mindmap">
|
||
<div class="card-header">
|
||
<div class="card-title">Mindmap Lernposter</div>
|
||
<div class="card-badge" id="mindmap-badge">Bereit</div>
|
||
</div>
|
||
<div class="card-body">
|
||
<div>Erstellt eine kindgerechte Mindmap mit dem Hauptthema in der Mitte und allen Fachbegriffen in farbigen Kategorien. Perfekt zum Ausdrucken als A3-Poster!</div>
|
||
<div id="mindmap-preview" class="mindmap-preview"></div>
|
||
<div class="card-actions" style="flex-wrap:wrap;gap:6px;">
|
||
<button class="btn btn-sm btn-primary" id="btn-mindmap-generate">Mindmap erstellen</button>
|
||
<button class="btn btn-sm btn-ghost" id="btn-mindmap-show" style="display:none;">Ansehen</button>
|
||
<button class="btn btn-sm btn-ghost" id="btn-mindmap-print" style="display:none;">A3 Drucken</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Frage–Antwort mit Leitner-System -->
|
||
<div class="card card-half" data-tile="qa">
|
||
<div class="card-header">
|
||
<div class="card-title">Frage–Antwort-Blatt</div>
|
||
<div class="card-badge" id="qa-badge">Bereit</div>
|
||
</div>
|
||
<div class="card-body">
|
||
<div>Frage-Antwort-Paare mit Leitner-Box System. Wiederholung nach Schwierigkeitsgrad für nachhaltiges Lernen.</div>
|
||
<div id="qa-preview" class="mc-preview"></div>
|
||
<div class="card-actions" style="flex-wrap:wrap;gap:6px;">
|
||
<button class="btn btn-sm btn-primary" id="btn-qa-generate">Q&A generieren</button>
|
||
<button class="btn btn-sm btn-ghost" id="btn-qa-learn" style="display:none;">Lernen starten</button>
|
||
<button class="btn btn-sm btn-ghost" id="btn-qa-print" style="display:none;">Drucken</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Multiple Choice -->
|
||
<div class="card card-half" data-tile="mc">
|
||
<div class="card-header">
|
||
<div class="card-title">Multiple Choice Test</div>
|
||
<div class="card-badge" id="mc-badge">Bereit</div>
|
||
</div>
|
||
<div class="card-body">
|
||
<div>Erzeugt passende MC-Aufgaben zur ursprünglichen Schwierigkeit (z. B. Klasse 7), ohne das Niveau zu verändern.</div>
|
||
<div id="mc-preview" class="mc-preview"></div>
|
||
<div class="card-actions" style="flex-wrap:wrap;gap:6px;">
|
||
<button class="btn btn-sm btn-primary" id="btn-mc-generate">MC generieren</button>
|
||
<button class="btn btn-sm btn-ghost" id="btn-mc-show" style="display:none;">Quiz starten</button>
|
||
<button class="btn btn-sm btn-ghost" id="btn-mc-print" style="display:none;">Drucken</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Lückentext -->
|
||
<div class="card card-half" data-tile="cloze">
|
||
<div class="card-header">
|
||
<div class="card-title">Lückentext</div>
|
||
<div class="card-badge" id="cloze-badge">Bereit</div>
|
||
</div>
|
||
<div class="card-body">
|
||
<div>Erzeugt Lückentexte mit mehreren sinnvollen Lücken pro Satz. Inkl. Übersetzung für Eltern.</div>
|
||
<div class="cloze-language-select" style="margin-top:8px;">
|
||
<label style="font-size:11px;color:var(--bp-text-muted);">Übersetzung:</label>
|
||
<select id="cloze-language" class="unit-input" style="padding:4px 8px;font-size:11px;width:auto;">
|
||
<option value="tr">Türkisch</option>
|
||
<option value="ar">Arabisch</option>
|
||
<option value="ru">Russisch</option>
|
||
<option value="uk">Ukrainisch</option>
|
||
<option value="pl">Polnisch</option>
|
||
<option value="en">Englisch</option>
|
||
<option value="fr">Französisch</option>
|
||
<option value="es">Spanisch</option>
|
||
</select>
|
||
</div>
|
||
<div id="cloze-preview" class="cloze-preview"></div>
|
||
<div class="card-actions" style="flex-wrap:wrap;gap:6px;">
|
||
<button class="btn btn-sm btn-primary" id="btn-cloze-generate">Lückentext generieren</button>
|
||
<button class="btn btn-sm btn-ghost" id="btn-cloze-show" style="display:none;">Übung starten</button>
|
||
<button class="btn btn-sm btn-ghost" id="btn-cloze-print" style="display:none;">Drucken</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<div class="pager">
|
||
<button id="pager-prev"><</button>
|
||
<span id="pager-label">1 von 2</span>
|
||
<button id="pager-next">></button>
|
||
</div>
|
||
|
||
<div class="status-bar" id="status-bar">
|
||
<div class="status-dot" id="status-dot"></div>
|
||
<div>
|
||
<div class="status-text-main" id="status-main"></div>
|
||
<div class="status-text-sub" id="status-sub"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Vollbild-Overlay -->
|
||
<div class="lightbox hidden" id="lightbox">
|
||
<div class="lightbox-inner">
|
||
<button type="button" class="lightbox-close" id="lightbox-close">Schließen ✕</button>
|
||
<img id="lightbox-img" class="lightbox-img" src="" alt="">
|
||
<div id="lightbox-caption" class="lightbox-caption"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- MC Quiz Modal -->
|
||
<div class="mc-modal hidden" id="mc-modal">
|
||
<div class="mc-modal-content">
|
||
<div class="mc-modal-header">
|
||
<div class="mc-modal-title">Multiple Choice Quiz</div>
|
||
<button type="button" class="mc-modal-close" id="mc-modal-close">Schließen ✕</button>
|
||
</div>
|
||
<div id="mc-modal-body"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Cloze / Lückentext Modal -->
|
||
<div class="mc-modal hidden" id="cloze-modal">
|
||
<div class="mc-modal-content" style="max-width:700px;">
|
||
<div class="mc-modal-header">
|
||
<div class="mc-modal-title">Lückentext-Übung</div>
|
||
<button type="button" class="mc-modal-close" id="cloze-modal-close">Schließen ✕</button>
|
||
</div>
|
||
<div id="cloze-modal-body"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Q&A / Frage-Antwort Modal mit Leitner-System -->
|
||
<div class="mc-modal hidden" id="qa-modal">
|
||
<div class="mc-modal-content" style="max-width:700px;">
|
||
<div class="mc-modal-header">
|
||
<div class="mc-modal-title">Frage-Antwort Lernmodus</div>
|
||
<button type="button" class="mc-modal-close" id="qa-modal-close">Schließen ✕</button>
|
||
</div>
|
||
<div id="qa-modal-body"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="footer">
|
||
<span>BreakPilot · MVP lokal</span>
|
||
<span>·</span>
|
||
<a href="#" onclick="openImprintModal(); return false;">Impressum</a>
|
||
<a href="#" onclick="openLegalModal(); return false;">Rechtliches</a>
|
||
</div>
|
||
|
||
|
||
|
||
<!-- Admin Panel Modal -->
|
||
<div id="admin-modal" class="admin-modal">
|
||
<div class="admin-modal-content">
|
||
<div class="admin-modal-header">
|
||
<h2><span>⚙️</span> Consent Admin Panel</h2>
|
||
<button id="admin-modal-close" class="legal-modal-close">×</button>
|
||
</div>
|
||
<div class="admin-tabs">
|
||
<button class="admin-tab active" data-tab="documents">Dokumente</button>
|
||
<button class="admin-tab" data-tab="versions">Versionen</button>
|
||
<button class="admin-tab" data-tab="cookies">Cookie-Kategorien</button>
|
||
<button class="admin-tab" data-tab="stats">Statistiken</button>
|
||
<button class="admin-tab" data-tab="emails">E-Mail Vorlagen</button>
|
||
<button class="admin-tab" data-tab="dsr">Betroffenenanfragen</button>
|
||
<button class="admin-tab" data-tab="dsms">DSMS</button>
|
||
</div>
|
||
<div class="admin-body">
|
||
<!-- Documents Tab -->
|
||
<div id="admin-documents" class="admin-content active">
|
||
<div class="admin-toolbar">
|
||
<div class="admin-toolbar-left">
|
||
<input type="text" class="admin-search" placeholder="Dokumente suchen..." id="admin-doc-search">
|
||
</div>
|
||
<button class="btn btn-primary btn-sm" onclick="showDocumentForm()">+ Neues Dokument</button>
|
||
</div>
|
||
|
||
<!-- Document Creation Form -->
|
||
<div id="admin-document-form" class="admin-form" style="display: none;">
|
||
<h3 class="admin-form-title" id="admin-document-form-title">Neues Dokument erstellen</h3>
|
||
<input type="hidden" id="admin-document-id">
|
||
<div class="admin-form-row">
|
||
<div class="admin-form-group">
|
||
<label class="admin-form-label">Dokumenttyp *</label>
|
||
<select class="admin-form-select" id="admin-document-type">
|
||
<option value="">-- Typ auswählen --</option>
|
||
<option value="terms">AGB (Allgemeine Geschäftsbedingungen)</option>
|
||
<option value="privacy">Datenschutzerklärung</option>
|
||
<option value="cookies">Cookie-Richtlinie</option>
|
||
<option value="community">Community Guidelines</option>
|
||
<option value="imprint">Impressum</option>
|
||
</select>
|
||
</div>
|
||
<div class="admin-form-group">
|
||
<label class="admin-form-label">Name *</label>
|
||
<input type="text" class="admin-form-input" id="admin-document-name" placeholder="z.B. Allgemeine Geschäftsbedingungen">
|
||
</div>
|
||
</div>
|
||
<div class="admin-form-row">
|
||
<div class="admin-form-group full-width">
|
||
<label class="admin-form-label">Beschreibung</label>
|
||
<input type="text" class="admin-form-input" id="admin-document-description" placeholder="Kurze Beschreibung des Dokuments">
|
||
</div>
|
||
</div>
|
||
<div class="admin-form-row">
|
||
<div class="admin-form-group">
|
||
<label class="admin-form-label">
|
||
<input type="checkbox" id="admin-document-mandatory" style="margin-right: 8px;">
|
||
Pflichtdokument (Nutzer müssen zustimmen)
|
||
</label>
|
||
</div>
|
||
</div>
|
||
<div class="admin-form-actions">
|
||
<button class="btn btn-ghost btn-sm" onclick="hideDocumentForm()">Abbrechen</button>
|
||
<button class="btn btn-primary btn-sm" onclick="saveDocument()">Dokument erstellen</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="admin-doc-table-container">
|
||
<div class="admin-loading">Lade Dokumente...</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Versions Tab -->
|
||
<div id="admin-versions" class="admin-content">
|
||
<div class="admin-toolbar">
|
||
<div class="admin-toolbar-left">
|
||
<select class="admin-form-select" id="admin-version-doc-select" onchange="loadVersionsForDocument()">
|
||
<option value="">-- Dokument auswählen --</option>
|
||
</select>
|
||
</div>
|
||
<button class="btn btn-primary btn-sm" onclick="showVersionForm()" id="btn-new-version" disabled>+ Neue Version</button>
|
||
</div>
|
||
|
||
<div id="admin-version-form" class="admin-form">
|
||
<h3 class="admin-form-title" id="admin-version-form-title">Neue Version erstellen</h3>
|
||
<input type="hidden" id="admin-version-id">
|
||
<div class="admin-form-row">
|
||
<div class="admin-form-group">
|
||
<label class="admin-form-label">Version *</label>
|
||
<input type="text" class="admin-form-input" id="admin-version-number" placeholder="z.B. 1.0.0">
|
||
</div>
|
||
<div class="admin-form-group">
|
||
<label class="admin-form-label">Sprache *</label>
|
||
<select class="admin-form-select" id="admin-version-lang">
|
||
<option value="de">Deutsch</option>
|
||
<option value="en">English</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="admin-form-row">
|
||
<div class="admin-form-group full-width">
|
||
<label class="admin-form-label">Titel *</label>
|
||
<input type="text" class="admin-form-input" id="admin-version-title" placeholder="Titel der Version">
|
||
</div>
|
||
</div>
|
||
<div class="admin-form-row">
|
||
<div class="admin-form-group full-width">
|
||
<label class="admin-form-label">Zusammenfassung</label>
|
||
<input type="text" class="admin-form-input" id="admin-version-summary" placeholder="Kurze Zusammenfassung der Änderungen">
|
||
</div>
|
||
</div>
|
||
<div class="admin-form-row">
|
||
<div class="admin-form-group full-width">
|
||
<label class="admin-form-label">Inhalt *</label>
|
||
<div class="editor-container">
|
||
<div class="editor-toolbar">
|
||
<div class="editor-toolbar-group">
|
||
<button type="button" class="editor-btn" onclick="formatDoc('bold')" title="Fett (Strg+B)"><b>B</b></button>
|
||
<button type="button" class="editor-btn" onclick="formatDoc('italic')" title="Kursiv (Strg+I)"><i>I</i></button>
|
||
<button type="button" class="editor-btn" onclick="formatDoc('underline')" title="Unterstrichen (Strg+U)"><u>U</u></button>
|
||
</div>
|
||
<div class="editor-toolbar-group">
|
||
<button type="button" class="editor-btn" onclick="formatBlock('h1')" title="Überschrift 1">H1</button>
|
||
<button type="button" class="editor-btn" onclick="formatBlock('h2')" title="Überschrift 2">H2</button>
|
||
<button type="button" class="editor-btn" onclick="formatBlock('h3')" title="Überschrift 3">H3</button>
|
||
<button type="button" class="editor-btn" onclick="formatBlock('p')" title="Absatz">P</button>
|
||
</div>
|
||
<div class="editor-toolbar-group">
|
||
<button type="button" class="editor-btn" onclick="formatDoc('insertUnorderedList')" title="Aufzählung">• Liste</button>
|
||
<button type="button" class="editor-btn" onclick="formatDoc('insertOrderedList')" title="Nummerierung">1. Liste</button>
|
||
</div>
|
||
<div class="editor-toolbar-group">
|
||
<button type="button" class="editor-btn" onclick="insertLink()" title="Link einfügen">🔗</button>
|
||
<button type="button" class="editor-btn" onclick="formatDoc('formatBlock', 'blockquote')" title="Zitat">❝</button>
|
||
<button type="button" class="editor-btn" onclick="formatDoc('insertHorizontalRule')" title="Trennlinie">—</button>
|
||
</div>
|
||
<div class="editor-toolbar-group">
|
||
<button type="button" class="editor-btn editor-btn-upload" onclick="document.getElementById('word-upload').click()" title="Word-Dokument importieren">📄 Word Import</button>
|
||
<input type="file" id="word-upload" class="word-upload-input" accept=".docx,.doc" onchange="handleWordUpload(event)">
|
||
</div>
|
||
</div>
|
||
<div id="admin-version-editor" class="editor-content" contenteditable="true" placeholder="Schreiben Sie hier den Inhalt..."></div>
|
||
<div class="editor-status">
|
||
<span id="editor-char-count">0 Zeichen</span> |
|
||
<span style="color: var(--bp-text-muted);">Tipp: Sie können direkt aus Word kopieren und einfügen!</span>
|
||
</div>
|
||
</div>
|
||
<input type="hidden" id="admin-version-content">
|
||
</div>
|
||
</div>
|
||
<div class="admin-form-actions">
|
||
<button class="btn btn-ghost btn-sm" onclick="hideVersionForm()">Abbrechen</button>
|
||
<button class="btn btn-primary btn-sm" onclick="saveVersion()">Speichern</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="admin-version-table-container">
|
||
<div class="admin-empty">Wählen Sie ein Dokument aus, um dessen Versionen anzuzeigen.</div>
|
||
</div>
|
||
|
||
<!-- Approval Dialog -->
|
||
<div id="approval-dialog" class="admin-dialog">
|
||
<div class="admin-dialog-content">
|
||
<h3>Version genehmigen</h3>
|
||
<p class="admin-dialog-info">
|
||
Legen Sie einen Veröffentlichungszeitpunkt fest. Die Version wird automatisch zum gewählten Zeitpunkt veröffentlicht.
|
||
</p>
|
||
<div class="admin-form-row">
|
||
<div class="admin-form-group">
|
||
<label class="admin-form-label">Veröffentlichungsdatum *</label>
|
||
<input type="date" class="admin-form-input" id="approval-date" required>
|
||
</div>
|
||
<div class="admin-form-group">
|
||
<label class="admin-form-label">Uhrzeit</label>
|
||
<input type="time" class="admin-form-input" id="approval-time" value="00:00">
|
||
</div>
|
||
</div>
|
||
<div class="admin-form-row">
|
||
<div class="admin-form-group full-width">
|
||
<label class="admin-form-label">Kommentar (optional)</label>
|
||
<input type="text" class="admin-form-input" id="approval-comment" placeholder="z.B. Genehmigt nach rechtlicher Prüfung">
|
||
</div>
|
||
</div>
|
||
<div class="admin-dialog-actions">
|
||
<button class="btn btn-ghost btn-sm" onclick="hideApprovalDialog()">Abbrechen</button>
|
||
<button class="btn btn-primary btn-sm" onclick="submitApproval()">Genehmigen & Planen</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Version Compare View (Full Screen Overlay) -->
|
||
<div id="version-compare-view" class="version-compare-overlay">
|
||
<div class="version-compare-header">
|
||
<h2>Versionsvergleich</h2>
|
||
<div class="version-compare-info">
|
||
<span id="compare-published-info"></span>
|
||
<span class="compare-vs">vs</span>
|
||
<span id="compare-draft-info"></span>
|
||
</div>
|
||
<button class="btn btn-ghost" onclick="hideCompareView()">Schließen</button>
|
||
</div>
|
||
<div class="version-compare-container">
|
||
<div class="version-compare-panel">
|
||
<div class="version-compare-panel-header">
|
||
<span class="compare-label compare-label-published">Veröffentlichte Version</span>
|
||
<span id="compare-published-version"></span>
|
||
</div>
|
||
<div class="version-compare-content" id="compare-content-left"></div>
|
||
</div>
|
||
<div class="version-compare-panel">
|
||
<div class="version-compare-panel-header">
|
||
<span class="compare-label compare-label-draft">Neue Version</span>
|
||
<span id="compare-draft-version"></span>
|
||
</div>
|
||
<div class="version-compare-content" id="compare-content-right"></div>
|
||
</div>
|
||
</div>
|
||
<div class="version-compare-footer">
|
||
<div id="compare-history-container"></div>
|
||
<div id="compare-actions-container" style="display: flex; gap: 12px; justify-content: flex-end; margin-top: 12px;"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Cookie Categories Tab -->
|
||
<div id="admin-cookies" class="admin-content">
|
||
<div class="admin-toolbar">
|
||
<div class="admin-toolbar-left">
|
||
<span style="color: var(--bp-text-muted);">Cookie-Kategorien verwalten</span>
|
||
</div>
|
||
<button class="btn btn-primary btn-sm" onclick="showCookieForm()">+ Neue Kategorie</button>
|
||
</div>
|
||
|
||
<div id="admin-cookie-form" class="admin-form">
|
||
<h3 class="admin-form-title">Neue Cookie-Kategorie</h3>
|
||
<input type="hidden" id="admin-cookie-id">
|
||
<div class="admin-form-row">
|
||
<div class="admin-form-group">
|
||
<label class="admin-form-label">Technischer Name *</label>
|
||
<input type="text" class="admin-form-input" id="admin-cookie-name" placeholder="z.B. analytics">
|
||
</div>
|
||
<div class="admin-form-group">
|
||
<label class="admin-form-label">Anzeigename (DE) *</label>
|
||
<input type="text" class="admin-form-input" id="admin-cookie-display-de" placeholder="z.B. Analyse-Cookies">
|
||
</div>
|
||
</div>
|
||
<div class="admin-form-row">
|
||
<div class="admin-form-group">
|
||
<label class="admin-form-label">Anzeigename (EN)</label>
|
||
<input type="text" class="admin-form-input" id="admin-cookie-display-en" placeholder="z.B. Analytics Cookies">
|
||
</div>
|
||
<div class="admin-form-group">
|
||
<label class="admin-form-label">
|
||
<input type="checkbox" id="admin-cookie-mandatory"> Notwendig (kann nicht deaktiviert werden)
|
||
</label>
|
||
</div>
|
||
</div>
|
||
<div class="admin-form-row">
|
||
<div class="admin-form-group full-width">
|
||
<label class="admin-form-label">Beschreibung (DE)</label>
|
||
<input type="text" class="admin-form-input" id="admin-cookie-desc-de" placeholder="Beschreibung auf Deutsch">
|
||
</div>
|
||
</div>
|
||
<div class="admin-form-actions">
|
||
<button class="btn btn-ghost btn-sm" onclick="hideCookieForm()">Abbrechen</button>
|
||
<button class="btn btn-primary btn-sm" onclick="saveCookieCategory()">Speichern</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="admin-cookie-table-container">
|
||
<div class="admin-loading">Lade Cookie-Kategorien...</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Statistics Tab -->
|
||
<div id="admin-stats" class="admin-content">
|
||
<div id="admin-stats-container">
|
||
<div class="admin-loading">Lade Statistiken...</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- E-Mail Templates Tab -->
|
||
<div id="admin-emails" class="admin-content">
|
||
<div class="admin-toolbar">
|
||
<div class="admin-toolbar-left">
|
||
<select class="admin-form-select" id="email-template-select" onchange="loadEmailTemplateVersions()">
|
||
<option value="">-- E-Mail-Vorlage auswählen --</option>
|
||
</select>
|
||
</div>
|
||
<button class="btn btn-ghost btn-sm" onclick="initializeEmailTemplates()">Templates initialisieren</button>
|
||
<button class="btn btn-primary btn-sm" onclick="showEmailVersionForm()" id="btn-new-email-version" disabled>+ Neue Version</button>
|
||
</div>
|
||
|
||
<!-- E-Mail Template Info Card -->
|
||
<div id="email-template-info" style="display: none; margin-bottom: 16px;">
|
||
<div style="background: var(--bp-surface-elevated); border-radius: 8px; padding: 16px; border: 1px solid var(--bp-border);">
|
||
<div style="display: flex; justify-content: space-between; align-items: start;">
|
||
<div>
|
||
<h3 style="margin: 0 0 8px 0; font-size: 16px;" id="email-template-name">-</h3>
|
||
<p style="margin: 0; color: var(--bp-text-muted); font-size: 13px;" id="email-template-description">-</p>
|
||
</div>
|
||
<div style="text-align: right;">
|
||
<div class="admin-badge" id="email-template-type-badge">-</div>
|
||
</div>
|
||
</div>
|
||
<div style="margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--bp-border);">
|
||
<span style="font-size: 12px; color: var(--bp-text-muted);">Variablen: </span>
|
||
<span id="email-template-variables" style="font-size: 12px; font-family: monospace; color: var(--bp-primary);"></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- E-Mail Version Form -->
|
||
<div id="email-version-form" class="admin-form" style="display: none;">
|
||
<h3 class="admin-form-title" id="email-version-form-title">Neue E-Mail-Version erstellen</h3>
|
||
<input type="hidden" id="email-version-id">
|
||
<div class="admin-form-row">
|
||
<div class="admin-form-group">
|
||
<label class="admin-form-label">Version *</label>
|
||
<input type="text" class="admin-form-input" id="email-version-number" placeholder="z.B. 1.0.0">
|
||
</div>
|
||
<div class="admin-form-group">
|
||
<label class="admin-form-label">Sprache *</label>
|
||
<select class="admin-form-select" id="email-version-lang">
|
||
<option value="de">Deutsch</option>
|
||
<option value="en">English</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="admin-form-row">
|
||
<div class="admin-form-group full-width">
|
||
<label class="admin-form-label">Betreff *</label>
|
||
<input type="text" class="admin-form-input" id="email-version-subject" placeholder="E-Mail Betreff (kann Variablen enthalten)">
|
||
</div>
|
||
</div>
|
||
<div class="admin-form-row">
|
||
<div class="admin-form-group full-width">
|
||
<label class="admin-form-label">HTML-Inhalt *</label>
|
||
<div class="editor-container">
|
||
<div class="editor-toolbar">
|
||
<div class="editor-toolbar-group">
|
||
<button type="button" class="editor-btn" onclick="formatEmailDoc('bold')" title="Fett"><b>B</b></button>
|
||
<button type="button" class="editor-btn" onclick="formatEmailDoc('italic')" title="Kursiv"><i>I</i></button>
|
||
<button type="button" class="editor-btn" onclick="formatEmailDoc('underline')" title="Unterstrichen"><u>U</u></button>
|
||
</div>
|
||
<div class="editor-toolbar-group">
|
||
<button type="button" class="editor-btn" onclick="formatEmailBlock('h1')" title="Überschrift 1">H1</button>
|
||
<button type="button" class="editor-btn" onclick="formatEmailBlock('h2')" title="Überschrift 2">H2</button>
|
||
<button type="button" class="editor-btn" onclick="formatEmailBlock('p')" title="Absatz">P</button>
|
||
</div>
|
||
<div class="editor-toolbar-group">
|
||
<button type="button" class="editor-btn" onclick="insertEmailVariable()" title="Variable einfügen">{{var}}</button>
|
||
<button type="button" class="editor-btn" onclick="insertEmailLink()" title="Link einfügen">🔗</button>
|
||
<button type="button" class="editor-btn" onclick="insertEmailButton()" title="Button einfügen">🔘</button>
|
||
</div>
|
||
</div>
|
||
<div id="email-version-editor" class="editor-content" contenteditable="true" placeholder="HTML-Inhalt der E-Mail..." style="min-height: 200px;"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="admin-form-row">
|
||
<div class="admin-form-group full-width">
|
||
<label class="admin-form-label">Text-Version (Plain Text)</label>
|
||
<textarea class="admin-form-input" id="email-version-text" rows="5" placeholder="Plain-Text-Version der E-Mail (optional, wird aus HTML generiert falls leer)"></textarea>
|
||
</div>
|
||
</div>
|
||
<div class="admin-form-actions">
|
||
<button class="btn btn-ghost btn-sm" onclick="hideEmailVersionForm()">Abbrechen</button>
|
||
<button class="btn btn-ghost btn-sm" onclick="previewEmailVersion()">Vorschau</button>
|
||
<button class="btn btn-primary btn-sm" onclick="saveEmailVersion()">Speichern</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- E-Mail Versions Table -->
|
||
<div id="email-version-table-container">
|
||
<div class="admin-empty">Wählen Sie eine E-Mail-Vorlage aus, um deren Versionen anzuzeigen.</div>
|
||
</div>
|
||
|
||
<!-- E-Mail Preview Dialog -->
|
||
<div id="email-preview-dialog" class="admin-dialog" style="display: none;">
|
||
<div class="admin-dialog-content" style="max-width: 700px; max-height: 80vh; overflow-y: auto;">
|
||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;">
|
||
<h3 style="margin: 0;">E-Mail Vorschau</h3>
|
||
<button class="btn btn-ghost btn-sm" onclick="hideEmailPreview()">Schließen</button>
|
||
</div>
|
||
<div style="margin-bottom: 12px;">
|
||
<strong>Betreff:</strong> <span id="email-preview-subject"></span>
|
||
</div>
|
||
<div style="border: 1px solid var(--bp-border); border-radius: 8px; padding: 16px; background: white; color: #333;">
|
||
<div id="email-preview-content"></div>
|
||
</div>
|
||
<div style="margin-top: 16px; display: flex; gap: 8px;">
|
||
<input type="email" class="admin-form-input" id="email-test-address" placeholder="Test-E-Mail-Adresse" style="flex: 1;">
|
||
<button class="btn btn-primary btn-sm" onclick="sendTestEmail()">Test-E-Mail senden</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- E-Mail Approval Dialog -->
|
||
<div id="email-approval-dialog" class="admin-dialog" style="display: none;">
|
||
<div class="admin-dialog-content">
|
||
<h3>E-Mail-Version genehmigen</h3>
|
||
<div class="admin-form-row">
|
||
<div class="admin-form-group full-width">
|
||
<label class="admin-form-label">Kommentar (optional)</label>
|
||
<input type="text" class="admin-form-input" id="email-approval-comment" placeholder="z.B. Genehmigt nach Marketing-Prüfung">
|
||
</div>
|
||
</div>
|
||
<div class="admin-dialog-actions">
|
||
<button class="btn btn-ghost btn-sm" onclick="hideEmailApprovalDialog()">Abbrechen</button>
|
||
<button class="btn btn-primary btn-sm" onclick="submitEmailApproval()">Genehmigen</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- DSR (Betroffenenanfragen) Tab -->
|
||
<div id="admin-dsr" class="admin-content">
|
||
<div class="admin-toolbar">
|
||
<div class="admin-toolbar-left">
|
||
<select class="admin-form-select" id="dsr-filter-status" onchange="loadDSRList()" style="min-width: 150px;">
|
||
<option value="">Alle Status</option>
|
||
<option value="intake">Eingang</option>
|
||
<option value="identity_verification">Identitätsprüfung</option>
|
||
<option value="processing">In Bearbeitung</option>
|
||
<option value="completed">Abgeschlossen</option>
|
||
<option value="rejected">Abgelehnt</option>
|
||
<option value="cancelled">Storniert</option>
|
||
</select>
|
||
<select class="admin-form-select" id="dsr-filter-type" onchange="loadDSRList()" style="min-width: 150px;">
|
||
<option value="">Alle Typen</option>
|
||
<option value="access">Art. 15 - Auskunft</option>
|
||
<option value="rectification">Art. 16 - Berichtigung</option>
|
||
<option value="erasure">Art. 17 - Löschung</option>
|
||
<option value="restriction">Art. 18 - Einschränkung</option>
|
||
<option value="portability">Art. 20 - Datenübertragbarkeit</option>
|
||
</select>
|
||
<label style="display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--bp-text-muted);">
|
||
<input type="checkbox" id="dsr-filter-overdue" onchange="loadDSRList()">
|
||
Nur überfällige
|
||
</label>
|
||
</div>
|
||
<button class="btn btn-primary btn-sm" onclick="showDSRCreateForm()">+ Neue Anfrage</button>
|
||
</div>
|
||
|
||
<!-- DSR Stats Dashboard -->
|
||
<div id="dsr-stats-cards" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin: 16px 0;">
|
||
<div class="admin-loading">Lade Statistiken...</div>
|
||
</div>
|
||
|
||
<!-- DSR Create Form -->
|
||
<div id="dsr-create-form" class="admin-form" style="display: none;">
|
||
<h3 class="admin-form-title">Neue Betroffenenanfrage erstellen</h3>
|
||
<div class="admin-form-row">
|
||
<div class="admin-form-group">
|
||
<label class="admin-form-label">Anfragetyp *</label>
|
||
<select class="admin-form-select" id="dsr-create-type" required>
|
||
<option value="">-- Typ wählen --</option>
|
||
<option value="access">Art. 15 - Auskunftsrecht</option>
|
||
<option value="rectification">Art. 16 - Recht auf Berichtigung</option>
|
||
<option value="erasure">Art. 17 - Recht auf Löschung</option>
|
||
<option value="restriction">Art. 18 - Recht auf Einschränkung</option>
|
||
<option value="portability">Art. 20 - Recht auf Datenübertragbarkeit</option>
|
||
</select>
|
||
</div>
|
||
<div class="admin-form-group">
|
||
<label class="admin-form-label">Priorität</label>
|
||
<select class="admin-form-select" id="dsr-create-priority">
|
||
<option value="normal">Normal</option>
|
||
<option value="high">Hoch</option>
|
||
<option value="expedited">Beschleunigt</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="admin-form-row">
|
||
<div class="admin-form-group">
|
||
<label class="admin-form-label">E-Mail des Antragstellers *</label>
|
||
<input type="email" class="admin-form-input" id="dsr-create-email" required placeholder="email@example.com">
|
||
</div>
|
||
<div class="admin-form-group">
|
||
<label class="admin-form-label">Name des Antragstellers</label>
|
||
<input type="text" class="admin-form-input" id="dsr-create-name" placeholder="Max Mustermann">
|
||
</div>
|
||
</div>
|
||
<div class="admin-form-row">
|
||
<div class="admin-form-group full-width">
|
||
<label class="admin-form-label">Telefon</label>
|
||
<input type="text" class="admin-form-input" id="dsr-create-phone" placeholder="+49 123 456789">
|
||
</div>
|
||
</div>
|
||
<div class="admin-form-actions">
|
||
<button class="btn btn-ghost btn-sm" onclick="hideDSRCreateForm()">Abbrechen</button>
|
||
<button class="btn btn-primary btn-sm" onclick="createDSR()">Anfrage erstellen</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- DSR Table -->
|
||
<div id="dsr-table-container">
|
||
<div class="admin-loading">Lade Betroffenenanfragen...</div>
|
||
</div>
|
||
|
||
<!-- DSR Detail View -->
|
||
<div id="dsr-detail-view" style="display: none;">
|
||
<div class="admin-toolbar" style="margin-bottom: 16px;">
|
||
<button class="btn btn-ghost btn-sm" onclick="hideDSRDetail()">← Zurück zur Liste</button>
|
||
<div style="display: flex; gap: 8px;">
|
||
<button class="btn btn-ghost btn-sm" id="dsr-btn-verify" onclick="verifyDSRIdentity()">Identität verifizieren</button>
|
||
<button class="btn btn-ghost btn-sm" id="dsr-btn-assign" onclick="showDSRAssignDialog()">Zuweisen</button>
|
||
<button class="btn btn-ghost btn-sm" id="dsr-btn-extend" onclick="showDSRExtendDialog()">Frist verlängern</button>
|
||
<button class="btn btn-primary btn-sm" id="dsr-btn-complete" onclick="showDSRCompleteDialog()">Abschließen</button>
|
||
<button class="btn btn-danger btn-sm" id="dsr-btn-reject" onclick="showDSRRejectDialog()">Ablehnen</button>
|
||
</div>
|
||
</div>
|
||
<div id="dsr-detail-content"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- DSMS Tab -->
|
||
<div id="admin-dsms" class="admin-content">
|
||
<div class="admin-toolbar">
|
||
<div class="admin-toolbar-left">
|
||
<span style="font-weight: 600; color: var(--bp-primary);">Dezentrales Speichersystem (IPFS)</span>
|
||
</div>
|
||
<div style="display: flex; gap: 8px;">
|
||
<button class="btn btn-ghost btn-sm" onclick="openDsmsWebUI()">DSMS WebUI</button>
|
||
<button class="btn btn-primary btn-sm" onclick="loadDsmsData()">Aktualisieren</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- DSMS Status Cards -->
|
||
<div id="dsms-status-cards" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 24px;">
|
||
<div class="admin-loading">Lade DSMS Status...</div>
|
||
</div>
|
||
|
||
<!-- DSMS Tabs -->
|
||
<div style="display: flex; gap: 8px; margin-bottom: 16px; border-bottom: 1px solid var(--bp-border); padding-bottom: 8px;">
|
||
<button class="dsms-subtab active" data-dsms-tab="archives" onclick="switchDsmsTab('archives')">Archivierte Dokumente</button>
|
||
<button class="dsms-subtab" data-dsms-tab="verify" onclick="switchDsmsTab('verify')">Verifizierung</button>
|
||
<button class="dsms-subtab" data-dsms-tab="settings" onclick="switchDsmsTab('settings')">Einstellungen</button>
|
||
</div>
|
||
|
||
<!-- Archives Sub-Tab -->
|
||
<div id="dsms-archives" class="dsms-content active">
|
||
<div class="admin-toolbar" style="margin-bottom: 16px;">
|
||
<div class="admin-toolbar-left">
|
||
<input type="text" class="admin-search" placeholder="CID suchen..." id="dsms-cid-search" style="width: 300px;">
|
||
</div>
|
||
<button class="btn btn-primary btn-sm" onclick="showArchiveForm()">+ Dokument archivieren</button>
|
||
</div>
|
||
|
||
<!-- Archive Form -->
|
||
<div id="dsms-archive-form" class="admin-form" style="display: none; margin-bottom: 16px;">
|
||
<h3 class="admin-form-title">Dokument im DSMS archivieren</h3>
|
||
<div class="admin-form-row">
|
||
<div class="admin-form-group">
|
||
<label class="admin-form-label">Dokument auswählen *</label>
|
||
<select class="admin-form-select" id="dsms-archive-doc-select">
|
||
<option value="">-- Dokument wählen --</option>
|
||
</select>
|
||
</div>
|
||
<div class="admin-form-group">
|
||
<label class="admin-form-label">Version *</label>
|
||
<select class="admin-form-select" id="dsms-archive-version-select" disabled>
|
||
<option value="">-- Erst Dokument wählen --</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="admin-form-actions">
|
||
<button class="btn btn-ghost btn-sm" onclick="hideArchiveForm()">Abbrechen</button>
|
||
<button class="btn btn-primary btn-sm" onclick="archiveDocumentToDsms()">Archivieren</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="dsms-archives-table">
|
||
<div class="admin-loading">Lade archivierte Dokumente...</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Verify Sub-Tab -->
|
||
<div id="dsms-verify" class="dsms-content" style="display: none;">
|
||
<div style="background: var(--bp-surface-elevated); border-radius: 8px; padding: 24px; border: 1px solid var(--bp-border);">
|
||
<h3 style="margin: 0 0 16px 0; font-size: 16px;">Dokumentenintegrität prüfen</h3>
|
||
<p style="color: var(--bp-text-muted); margin-bottom: 16px; font-size: 14px;">
|
||
Geben Sie einen CID (Content Identifier) ein, um die Integrität eines archivierten Dokuments zu verifizieren.
|
||
</p>
|
||
<div style="display: flex; gap: 12px; margin-bottom: 16px;">
|
||
<input type="text" class="admin-form-input" id="dsms-verify-cid" placeholder="Qm... oder bafy..." style="flex: 1;">
|
||
<button class="btn btn-primary btn-sm" onclick="verifyDsmsDocument()">Verifizieren</button>
|
||
</div>
|
||
<div id="dsms-verify-result" style="display: none;"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Settings Sub-Tab -->
|
||
<div id="dsms-settings" class="dsms-content" style="display: none;">
|
||
<div style="display: grid; gap: 16px;">
|
||
<!-- Node Info -->
|
||
<div style="background: var(--bp-surface-elevated); border-radius: 8px; padding: 24px; border: 1px solid var(--bp-border);">
|
||
<h3 style="margin: 0 0 16px 0; font-size: 16px;">Node-Informationen</h3>
|
||
<div id="dsms-node-info">
|
||
<div class="admin-loading">Lade Node-Info...</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Quick Links -->
|
||
<div style="background: var(--bp-surface-elevated); border-radius: 8px; padding: 24px; border: 1px solid var(--bp-border);">
|
||
<h3 style="margin: 0 0 16px 0; font-size: 16px;">Schnellzugriff</h3>
|
||
<div style="display: flex; flex-wrap: wrap; gap: 12px;">
|
||
<button class="btn btn-primary btn-sm" onclick="openDsmsWebUI()">DSMS WebUI</button>
|
||
<a href="http://localhost:8082/docs" target="_blank" class="btn btn-ghost btn-sm">DSMS API Docs</a>
|
||
<a href="http://localhost:8085" target="_blank" class="btn btn-ghost btn-sm">IPFS Gateway</a>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Lizenzhinweise -->
|
||
<div style="background: var(--bp-surface-elevated); border-radius: 8px; padding: 24px; border: 1px solid var(--bp-border);">
|
||
<h3 style="margin: 0 0 16px 0; font-size: 16px;">Open Source Lizenzen</h3>
|
||
<p style="color: var(--bp-text-muted); font-size: 13px; margin-bottom: 12px;">
|
||
DSMS verwendet folgende Open-Source-Komponenten:
|
||
</p>
|
||
<ul style="color: var(--bp-text-muted); font-size: 13px; margin: 0; padding-left: 20px;">
|
||
<li><strong>IPFS Kubo</strong> - MIT + Apache 2.0 (Dual License) - Protocol Labs, Inc.</li>
|
||
<li><strong>IPFS WebUI</strong> - MIT License - Protocol Labs, Inc.</li>
|
||
<li><strong>FastAPI</strong> - MIT License</li>
|
||
</ul>
|
||
<p style="color: var(--bp-text-muted); font-size: 12px; margin-top: 12px; font-style: italic;">
|
||
Alle Komponenten erlauben kommerzielle Nutzung.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- DSMS WebUI Modal -->
|
||
<div id="dsms-webui-modal" class="legal-modal" style="display: none;">
|
||
<div class="legal-modal-content" style="max-width: 1200px; width: 95%; height: 90vh;">
|
||
<div class="legal-modal-header" style="border-bottom: 1px solid var(--bp-border);">
|
||
<h2 style="display: flex; align-items: center; gap: 10px;">
|
||
<span style="font-size: 24px;">🌐</span> DSMS WebUI
|
||
</h2>
|
||
<button id="dsms-webui-modal-close" class="legal-modal-close" onclick="closeDsmsWebUI()">×</button>
|
||
</div>
|
||
<div style="display: flex; height: calc(100% - 60px);">
|
||
<!-- Sidebar -->
|
||
<div style="width: 200px; background: var(--bp-surface); border-right: 1px solid var(--bp-border); padding: 16px;">
|
||
<nav style="display: flex; flex-direction: column; gap: 4px;">
|
||
<button class="dsms-webui-nav active" data-section="overview" onclick="switchDsmsWebUISection('overview')">
|
||
<span>📈</span> Übersicht
|
||
</button>
|
||
<button class="dsms-webui-nav" data-section="files" onclick="switchDsmsWebUISection('files')">
|
||
<span>📁</span> Dateien
|
||
</button>
|
||
<button class="dsms-webui-nav" data-section="explore" onclick="switchDsmsWebUISection('explore')">
|
||
<span>🔍</span> Erkunden
|
||
</button>
|
||
<button class="dsms-webui-nav" data-section="peers" onclick="switchDsmsWebUISection('peers')">
|
||
<span>🌐</span> Peers
|
||
</button>
|
||
<button class="dsms-webui-nav" data-section="config" onclick="switchDsmsWebUISection('config')">
|
||
<span>⚙</span> Konfiguration
|
||
</button>
|
||
</nav>
|
||
</div>
|
||
<!-- Main Content -->
|
||
<div style="flex: 1; overflow-y: auto; padding: 24px;" id="dsms-webui-content">
|
||
<!-- Overview Section (default) -->
|
||
<div id="dsms-webui-overview" class="dsms-webui-section active">
|
||
<h3 style="margin: 0 0 24px 0;">Node Übersicht</h3>
|
||
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 24px;">
|
||
<div class="dsms-webui-stat-card">
|
||
<div class="dsms-webui-stat-label">Status</div>
|
||
<div class="dsms-webui-stat-value" id="webui-status">--</div>
|
||
</div>
|
||
<div class="dsms-webui-stat-card">
|
||
<div class="dsms-webui-stat-label">Node ID</div>
|
||
<div class="dsms-webui-stat-value" id="webui-node-id" style="font-size: 11px; word-break: break-all;">--</div>
|
||
</div>
|
||
<div class="dsms-webui-stat-card">
|
||
<div class="dsms-webui-stat-label">Protokoll</div>
|
||
<div class="dsms-webui-stat-value" id="webui-protocol">--</div>
|
||
</div>
|
||
<div class="dsms-webui-stat-card">
|
||
<div class="dsms-webui-stat-label">Agent</div>
|
||
<div class="dsms-webui-stat-value" id="webui-agent">--</div>
|
||
</div>
|
||
</div>
|
||
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px;">
|
||
<div class="dsms-webui-stat-card">
|
||
<div class="dsms-webui-stat-label">Repo Größe</div>
|
||
<div class="dsms-webui-stat-value" id="webui-repo-size">--</div>
|
||
<div class="dsms-webui-stat-sub" id="webui-storage-info">--</div>
|
||
</div>
|
||
<div class="dsms-webui-stat-card">
|
||
<div class="dsms-webui-stat-label">Objekte</div>
|
||
<div class="dsms-webui-stat-value" id="webui-num-objects">--</div>
|
||
</div>
|
||
<div class="dsms-webui-stat-card">
|
||
<div class="dsms-webui-stat-label">Gepinnte Dokumente</div>
|
||
<div class="dsms-webui-stat-value" id="webui-pinned-count">--</div>
|
||
</div>
|
||
</div>
|
||
<div style="margin-top: 24px;">
|
||
<h4 style="margin: 0 0 12px 0;">Adressen</h4>
|
||
<div id="webui-addresses" style="background: var(--bp-input-bg); border-radius: 8px; padding: 12px; font-family: monospace; font-size: 12px; max-height: 150px; overflow-y: auto;">
|
||
Lade...
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Files Section -->
|
||
<div id="dsms-webui-files" class="dsms-webui-section" style="display: none;">
|
||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px;">
|
||
<h3 style="margin: 0;">Dateien hochladen</h3>
|
||
</div>
|
||
<div class="dsms-webui-upload-zone" id="dsms-upload-zone" ondrop="handleDsmsFileDrop(event)" ondragover="handleDsmsDragOver(event)" ondragleave="handleDsmsDragLeave(event)">
|
||
<div style="text-align: center;">
|
||
<div style="font-size: 48px; margin-bottom: 16px;">📥</div>
|
||
<p style="color: var(--bp-text); margin-bottom: 8px;">Dateien hierher ziehen</p>
|
||
<p style="color: var(--bp-text-muted); font-size: 13px;">oder</p>
|
||
<input type="file" id="dsms-file-input" style="display: none;" onchange="handleDsmsFileSelect(event)" multiple>
|
||
<button class="btn btn-primary btn-sm" onclick="document.getElementById('dsms-file-input').click()">Dateien auswählen</button>
|
||
</div>
|
||
</div>
|
||
<div id="dsms-upload-progress" style="display: none; margin-top: 16px;">
|
||
<div style="background: var(--bp-surface-elevated); border-radius: 8px; padding: 16px;">
|
||
<div id="dsms-upload-status">Hochladen...</div>
|
||
<div style="background: var(--bp-border); border-radius: 4px; height: 8px; margin-top: 8px; overflow: hidden;">
|
||
<div id="dsms-upload-bar" style="background: var(--bp-primary); height: 100%; width: 0%; transition: width 0.3s;"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="dsms-upload-results" style="margin-top: 24px;"></div>
|
||
</div>
|
||
|
||
<!-- Explore Section -->
|
||
<div id="dsms-webui-explore" class="dsms-webui-section" style="display: none;">
|
||
<h3 style="margin: 0 0 24px 0;">IPFS Explorer</h3>
|
||
<div style="display: flex; gap: 12px; margin-bottom: 24px;">
|
||
<input type="text" class="admin-search" placeholder="CID eingeben (z.B. QmXyz...)" id="webui-explore-cid" style="flex: 1;">
|
||
<button class="btn btn-primary btn-sm" onclick="exploreDsmsCid()">Erkunden</button>
|
||
</div>
|
||
<div id="dsms-explore-result" style="display: none;">
|
||
<div style="background: var(--bp-surface-elevated); border-radius: 8px; padding: 16px;">
|
||
<div id="dsms-explore-content"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Peers Section -->
|
||
<div id="dsms-webui-peers" class="dsms-webui-section" style="display: none;">
|
||
<h3 style="margin: 0 0 24px 0;">Verbundene Peers</h3>
|
||
<p style="color: var(--bp-text-muted); margin-bottom: 16px;">
|
||
Hinweis: In einem privaten DSMS-Netzwerk sind normalerweise keine externen Peers verbunden.
|
||
</p>
|
||
<div id="webui-peers-list">
|
||
<div class="admin-loading">Lade Peers...</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Config Section -->
|
||
<div id="dsms-webui-config" class="dsms-webui-section" style="display: none;">
|
||
<h3 style="margin: 0 0 24px 0;">Konfiguration</h3>
|
||
<div style="display: grid; gap: 16px;">
|
||
<div style="background: var(--bp-surface-elevated); border-radius: 8px; padding: 16px;">
|
||
<h4 style="margin: 0 0 12px 0;">API Endpoints</h4>
|
||
<table style="width: 100%; font-size: 13px;">
|
||
<tr>
|
||
<td style="padding: 8px 0; color: var(--bp-text-muted);">IPFS API</td>
|
||
<td style="padding: 8px 0; font-family: monospace;">http://localhost:5001</td>
|
||
</tr>
|
||
<tr>
|
||
<td style="padding: 8px 0; color: var(--bp-text-muted);">DSMS Gateway</td>
|
||
<td style="padding: 8px 0; font-family: monospace;">http://localhost:8082</td>
|
||
</tr>
|
||
<tr>
|
||
<td style="padding: 8px 0; color: var(--bp-text-muted);">IPFS Gateway</td>
|
||
<td style="padding: 8px 0; font-family: monospace;">http://localhost:8085</td>
|
||
</tr>
|
||
<tr>
|
||
<td style="padding: 8px 0; color: var(--bp-text-muted);">Swarm P2P</td>
|
||
<td style="padding: 8px 0; font-family: monospace;">:4001</td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
<div style="background: var(--bp-surface-elevated); border-radius: 8px; padding: 16px;">
|
||
<h4 style="margin: 0 0 12px 0;">Aktionen</h4>
|
||
<div style="display: flex; flex-wrap: wrap; gap: 12px;">
|
||
<button class="btn btn-ghost btn-sm" onclick="runDsmsGarbageCollection()">🗑 Garbage Collection</button>
|
||
<button class="btn btn-ghost btn-sm" onclick="loadDsmsWebUIData()">↻ Daten aktualisieren</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Legal Modal -->
|
||
<div id="legal-modal" class="legal-modal">
|
||
<div class="legal-modal-content">
|
||
<div class="legal-modal-header">
|
||
<h2>Rechtliches</h2>
|
||
<button id="legal-modal-close" class="legal-modal-close">×</button>
|
||
</div>
|
||
<div class="legal-tabs">
|
||
<button class="legal-tab active" data-tab="terms">AGB</button>
|
||
<button class="legal-tab" data-tab="privacy">Datenschutz</button>
|
||
<button class="legal-tab" data-tab="community">Community Guidelines</button>
|
||
<button class="legal-tab" data-tab="cookies">Cookie-Einstellungen</button>
|
||
<button class="legal-tab" data-tab="gdpr">DSGVO-Rechte</button>
|
||
</div>
|
||
<div class="legal-body">
|
||
<div id="legal-terms" class="legal-content active">
|
||
<div id="legal-terms-content">
|
||
<div class="legal-loading">Lade AGB...</div>
|
||
</div>
|
||
</div>
|
||
<div id="legal-privacy" class="legal-content">
|
||
<div id="legal-privacy-content">
|
||
<div class="legal-loading">Lade Datenschutzerklärung...</div>
|
||
</div>
|
||
</div>
|
||
<div id="legal-community" class="legal-content">
|
||
<div id="legal-community-content">
|
||
<div class="legal-loading">Lade Community Guidelines...</div>
|
||
</div>
|
||
</div>
|
||
<div id="legal-cookies" class="legal-content">
|
||
<h3>Cookie-Einstellungen</h3>
|
||
<p>Wir verwenden Cookies, um Ihnen die bestmögliche Erfahrung zu bieten. Hier können Sie Ihre Präferenzen jederzeit anpassen.</p>
|
||
<div id="cookie-categories-container" class="cookie-categories">
|
||
<div class="legal-loading">Lade Cookie-Kategorien...</div>
|
||
</div>
|
||
<button class="btn btn-primary" style="margin-top:16px" onclick="saveCookiePreferences()">Einstellungen speichern</button>
|
||
</div>
|
||
<div id="legal-gdpr" class="legal-content">
|
||
<h3>Ihre DSGVO-Rechte</h3>
|
||
<p>Nach der Datenschutz-Grundverordnung haben Sie folgende Rechte:</p>
|
||
<div class="gdpr-actions">
|
||
<div class="gdpr-action">
|
||
<h4>📋 Datenauskunft (Art. 15)</h4>
|
||
<p>Erfahren Sie, welche Daten wir über Sie gespeichert haben.</p>
|
||
<button class="btn btn-sm" onclick="requestDataExport()">Meine Daten anfordern</button>
|
||
</div>
|
||
<div class="gdpr-action">
|
||
<h4>📤 Datenübertragbarkeit (Art. 20)</h4>
|
||
<p>Exportieren Sie Ihre Daten in einem maschinenlesbaren Format.</p>
|
||
<button class="btn btn-sm" onclick="requestDataDownload()">Daten exportieren</button>
|
||
</div>
|
||
<div class="gdpr-action">
|
||
<h4>🗑️ Recht auf Löschung (Art. 17)</h4>
|
||
<p>Beantragen Sie die vollständige Löschung Ihrer Daten.</p>
|
||
<button class="btn btn-sm btn-danger" onclick="requestDataDeletion()">Löschung beantragen</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Imprint Modal (Impressum - muss direkt erreichbar sein) -->
|
||
<div id="imprint-modal" class="legal-modal">
|
||
<div class="legal-modal-content">
|
||
<div class="legal-modal-header">
|
||
<h2>Impressum</h2>
|
||
<button id="imprint-modal-close" class="legal-modal-close">×</button>
|
||
</div>
|
||
<div class="legal-body" style="padding: 24px;">
|
||
<div id="imprint-content">
|
||
<div class="legal-loading">Lade Impressum...</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Auth Modal -->
|
||
<div id="auth-modal" class="auth-modal">
|
||
<div class="auth-modal-content">
|
||
<div class="auth-modal-header">
|
||
<h2><span>🔐</span> Anmeldung</h2>
|
||
<button id="auth-modal-close" class="legal-modal-close">×</button>
|
||
</div>
|
||
<div class="auth-tabs">
|
||
<button class="auth-tab active" data-tab="login">Anmelden</button>
|
||
<button class="auth-tab" data-tab="register">Registrieren</button>
|
||
</div>
|
||
<div class="auth-body">
|
||
<!-- Login Tab -->
|
||
<div id="auth-login" class="auth-content active">
|
||
<div id="auth-login-error" class="auth-error"></div>
|
||
<div id="auth-login-success" class="auth-success"></div>
|
||
<form id="auth-login-form">
|
||
<div class="auth-form-group">
|
||
<label class="auth-form-label">E-Mail</label>
|
||
<input type="email" class="auth-form-input" id="login-email" placeholder="ihre@email.de" required>
|
||
</div>
|
||
<div class="auth-form-group">
|
||
<label class="auth-form-label">Passwort</label>
|
||
<input type="password" class="auth-form-input" id="login-password" placeholder="Ihr Passwort" required>
|
||
</div>
|
||
<button type="submit" class="auth-btn auth-btn-primary" id="login-btn">Anmelden</button>
|
||
</form>
|
||
<div class="auth-link">
|
||
<a href="#" id="auth-forgot-password">Passwort vergessen?</a>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Register Tab -->
|
||
<div id="auth-register" class="auth-content">
|
||
<div id="auth-register-error" class="auth-error"></div>
|
||
<div id="auth-register-success" class="auth-success"></div>
|
||
<form id="auth-register-form">
|
||
<div class="auth-form-group">
|
||
<label class="auth-form-label">Name (optional)</label>
|
||
<input type="text" class="auth-form-input" id="register-name" placeholder="Ihr Name">
|
||
</div>
|
||
<div class="auth-form-group">
|
||
<label class="auth-form-label">E-Mail</label>
|
||
<input type="email" class="auth-form-input" id="register-email" placeholder="ihre@email.de" required>
|
||
</div>
|
||
<div class="auth-form-group">
|
||
<label class="auth-form-label">Passwort</label>
|
||
<input type="password" class="auth-form-input" id="register-password" placeholder="Mind. 8 Zeichen" required minlength="8">
|
||
</div>
|
||
<div class="auth-form-group">
|
||
<label class="auth-form-label">Passwort bestätigen</label>
|
||
<input type="password" class="auth-form-input" id="register-password-confirm" placeholder="Passwort wiederholen" required>
|
||
</div>
|
||
<button type="submit" class="auth-btn auth-btn-primary" id="register-btn">Registrieren</button>
|
||
</form>
|
||
<div class="auth-link">
|
||
Bereits registriert? <a href="#" id="auth-goto-login">Hier anmelden</a>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Forgot Password Tab (hidden by default) -->
|
||
<div id="auth-forgot" class="auth-content">
|
||
<div id="auth-forgot-error" class="auth-error"></div>
|
||
<div id="auth-forgot-success" class="auth-success"></div>
|
||
<p style="color: var(--bp-text-muted); font-size: 13px; margin-bottom: 16px;">
|
||
Geben Sie Ihre E-Mail-Adresse ein und wir senden Ihnen einen Link zum Zurücksetzen Ihres Passworts.
|
||
</p>
|
||
<form id="auth-forgot-form">
|
||
<div class="auth-form-group">
|
||
<label class="auth-form-label">E-Mail</label>
|
||
<input type="email" class="auth-form-input" id="forgot-email" placeholder="ihre@email.de" required>
|
||
</div>
|
||
<button type="submit" class="auth-btn auth-btn-primary" id="forgot-btn">Link senden</button>
|
||
</form>
|
||
<div class="auth-link">
|
||
<a href="#" id="auth-back-to-login">Zurück zur Anmeldung</a>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Reset Password Tab (hidden by default, shown via URL token) -->
|
||
<div id="auth-reset" class="auth-content">
|
||
<div id="auth-reset-error" class="auth-error"></div>
|
||
<div id="auth-reset-success" class="auth-success"></div>
|
||
<form id="auth-reset-form">
|
||
<div class="auth-form-group">
|
||
<label class="auth-form-label">Neues Passwort</label>
|
||
<input type="password" class="auth-form-input" id="reset-password" placeholder="Mind. 8 Zeichen" required minlength="8">
|
||
</div>
|
||
<div class="auth-form-group">
|
||
<label class="auth-form-label">Passwort bestätigen</label>
|
||
<input type="password" class="auth-form-input" id="reset-password-confirm" placeholder="Passwort wiederholen" required>
|
||
</div>
|
||
<input type="hidden" id="reset-token">
|
||
<button type="submit" class="auth-btn auth-btn-primary" id="reset-btn">Passwort ändern</button>
|
||
</form>
|
||
</div>
|
||
|
||
<!-- Email Verification Tab (hidden by default, shown via URL token) -->
|
||
<div id="auth-verify" class="auth-content">
|
||
<div id="auth-verify-error" class="auth-error"></div>
|
||
<div id="auth-verify-success" class="auth-success"></div>
|
||
<div style="text-align: center; padding: 20px 0;">
|
||
<div id="auth-verify-loading" style="color: var(--bp-text-muted);">
|
||
E-Mail wird verifiziert...
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Notification Preferences Modal -->
|
||
<div id="notification-prefs-modal" class="notification-prefs-modal">
|
||
<div class="notification-prefs-content">
|
||
<div class="auth-modal-header">
|
||
<h2>Benachrichtigungseinstellungen</h2>
|
||
<button class="legal-modal-close" onclick="closeNotificationPreferences()">×</button>
|
||
</div>
|
||
<div class="auth-body">
|
||
<div class="notification-pref-item">
|
||
<div>
|
||
<div class="notification-pref-label">E-Mail-Benachrichtigungen</div>
|
||
<div class="notification-pref-desc">Wichtige Updates per E-Mail erhalten</div>
|
||
</div>
|
||
<div class="toggle-switch active" id="pref-email-toggle" onclick="toggleNotificationPref('email')">
|
||
<div class="toggle-switch-handle"></div>
|
||
</div>
|
||
</div>
|
||
<div class="notification-pref-item">
|
||
<div>
|
||
<div class="notification-pref-label">In-App-Benachrichtigungen</div>
|
||
<div class="notification-pref-desc">Benachrichtigungen in der App anzeigen</div>
|
||
</div>
|
||
<div class="toggle-switch active" id="pref-inapp-toggle" onclick="toggleNotificationPref('inapp')">
|
||
<div class="toggle-switch-handle"></div>
|
||
</div>
|
||
</div>
|
||
<div class="notification-pref-item">
|
||
<div>
|
||
<div class="notification-pref-label">Push-Benachrichtigungen</div>
|
||
<div class="notification-pref-desc">Browser-Push-Benachrichtigungen aktivieren</div>
|
||
</div>
|
||
<div class="toggle-switch" id="pref-push-toggle" onclick="toggleNotificationPref('push')">
|
||
<div class="toggle-switch-handle"></div>
|
||
</div>
|
||
</div>
|
||
<div style="margin-top: 20px;">
|
||
<button class="auth-btn auth-btn-primary" onclick="saveNotificationPreferences()">Speichern</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Suspension Overlay -->
|
||
<div id="suspension-overlay" class="suspension-overlay">
|
||
<div class="suspension-content">
|
||
<div class="suspension-icon">🚫</div>
|
||
<div class="suspension-title">Account vorübergehend gesperrt</div>
|
||
<div class="suspension-message">
|
||
Ihr Account wurde gesperrt, da ausstehende Zustimmungen nicht innerhalb der Frist erteilt wurden.
|
||
Bitte bestätigen Sie die folgenden Dokumente, um Ihren Account wiederherzustellen.
|
||
</div>
|
||
<div class="suspension-docs">
|
||
<div class="suspension-docs-title">Ausstehende Dokumente:</div>
|
||
<div id="suspension-doc-list">
|
||
<!-- Will be populated dynamically -->
|
||
</div>
|
||
</div>
|
||
<button class="suspension-btn" onclick="showConsentModal()">
|
||
Jetzt bestätigen
|
||
</button>
|
||
<div class="suspension-countdown" id="suspension-countdown"></div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
</body>
|
||
</html>
|
||
<script src="/static/js/studio.js"></script>
|
||
</body>
|
||
</html> |