a0f0315768
Resize-Demo (Schritt 25): - Nutzt jetzt CSS transform:scale() statt width/height-Aenderung - GridStack wird gar nicht beruehrt, Kachel bleibt nach Demo exakt in Originalgroesse (kein Schrumpfen mehr) Karte (Schritt 23): - Verwendet jetzt tile.openstreetmap.de (gleiche Quelle wie echte App) - Kein Dark/Light-Tile-Unterschied mehr (App nutzt auch nur einen Server) - Tiles laden jetzt korrekt statt grauem Hintergrund Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
784 Zeilen
52 KiB
HTML
784 Zeilen
52 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<script>(function(){var t=localStorage.getItem('osint_theme');if(t)document.documentElement.setAttribute('data-theme',t);try{var a=JSON.parse(localStorage.getItem('osint_a11y')||'{}');Object.keys(a).forEach(function(k){if(a[k])document.documentElement.setAttribute('data-a11y-'+k,'true');});}catch(e){}})()</script>
|
|
<link rel="icon" type="image/png" sizes="32x32" href="/static/favicon-32x32.png">
|
|
<link rel="icon" type="image/png" sizes="16x16" href="/static/favicon-16x16.png">
|
|
<link rel="apple-touch-icon" sizes="180x180" href="/static/apple-touch-icon.png">
|
|
<link rel="shortcut icon" href="/static/favicon.ico">
|
|
<title>AegisSight Monitor</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
<link href="https://cdn.jsdelivr.net/npm/gridstack@12/dist/gridstack.min.css" rel="stylesheet">
|
|
<link rel="stylesheet" href="/static/vendor/leaflet.css">
|
|
<link rel="stylesheet" href="/static/vendor/MarkerCluster.css">
|
|
<link rel="stylesheet" href="/static/vendor/MarkerCluster.Default.css">
|
|
<link rel="stylesheet" href="/static/css/network.css?v=20260316a">
|
|
<link rel="stylesheet" href="/static/css/style.css?v=20260316h">
|
|
</head>
|
|
<body>
|
|
<a href="#main-content" class="skip-link">Zum Hauptinhalt springen</a>
|
|
<div class="dashboard">
|
|
<!-- Header -->
|
|
<header class="header">
|
|
<div class="header-left">
|
|
<div class="header-logo">Aegis<span>Sight</span> Monitor</div>
|
|
<h1 class="sr-only">AegisSight Monitor Dashboard</h1>
|
|
</div>
|
|
<div class="header-right">
|
|
<div class="theme-switch" id="theme-toggle" onclick="ThemeManager.toggle()" role="switch" aria-checked="true" aria-label="Dark Mode" title="Theme wechseln">
|
|
<span class="theme-switch-icon theme-switch-sun">☀︎</span>
|
|
<div class="theme-switch-track">
|
|
<div class="theme-switch-knob"></div>
|
|
</div>
|
|
<span class="theme-switch-icon theme-switch-moon">☽</span>
|
|
</div>
|
|
<div class="header-user-info">
|
|
<button class="header-user-btn" id="header-user-btn" aria-expanded="false" aria-haspopup="true">
|
|
<span class="header-user" id="header-user"></span>
|
|
<span class="header-user-chevron" aria-hidden="true">▾</span>
|
|
</button>
|
|
<div class="header-user-dropdown" id="header-user-dropdown" role="menu">
|
|
<div class="header-dropdown-row">
|
|
<span class="header-dropdown-label">Organisation</span>
|
|
<span class="header-dropdown-value" id="header-org-name">-</span>
|
|
</div>
|
|
<div class="header-dropdown-row">
|
|
<span class="header-dropdown-label">Lizenz</span>
|
|
<span class="header-dropdown-value" id="header-license-info">-</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="header-license-warning" id="header-license-warning"></div>
|
|
<button class="btn btn-secondary btn-small" id="logout-btn">Abmelden</button>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Sidebar -->
|
|
<nav class="sidebar" aria-label="Seitenleiste">
|
|
<div class="sidebar-section">
|
|
<button class="btn btn-primary btn-full btn-small" id="new-incident-btn" style="margin-bottom:6px;">+ Neue Lage</button>
|
|
<!-- <button class="btn btn-primary btn-full btn-small" id="new-network-btn" onclick="App.openNetworkModal()">+ Neue Netzwerkanalyse</button> -->
|
|
</div>
|
|
|
|
<div class="sidebar-filter">
|
|
<button class="sidebar-filter-btn active" data-filter="all" onclick="App.setSidebarFilter('all')" aria-pressed="true">Alle</button>
|
|
<button class="sidebar-filter-btn" data-filter="mine" onclick="App.setSidebarFilter('mine')" aria-pressed="false">Eigene</button>
|
|
</div>
|
|
|
|
<div class="sidebar-section">
|
|
<h2 class="sidebar-section-title collapsible" onclick="App.toggleSidebarSection('active-incidents')" role="button" tabindex="0" aria-expanded="true">
|
|
<span class="sidebar-chevron" id="chevron-active-incidents" aria-hidden="true">▾</span>
|
|
Live-Monitoring
|
|
<span class="sidebar-section-count" id="count-active-incidents"></span>
|
|
</h2>
|
|
<div id="active-incidents" aria-live="polite"></div>
|
|
</div>
|
|
|
|
<div class="sidebar-section">
|
|
<h2 class="sidebar-section-title collapsible" onclick="App.toggleSidebarSection('active-research')" role="button" tabindex="0" aria-expanded="true">
|
|
<span class="sidebar-chevron" id="chevron-active-research" aria-hidden="true">▾</span>
|
|
Deep-Research
|
|
<span class="sidebar-section-count" id="count-active-research"></span>
|
|
</h2>
|
|
<div id="active-research" aria-live="polite"></div>
|
|
</div>
|
|
|
|
|
|
<div class="sidebar-section">
|
|
<h2 class="sidebar-section-title collapsible" onclick="App.toggleSidebarSection('network-analyses-list')" role="button" tabindex="0" aria-expanded="true">
|
|
<span class="sidebar-chevron" id="chevron-network-analyses-list" aria-hidden="true">▾</span>
|
|
Netzwerkanalysen
|
|
<span class="sidebar-section-count" id="count-network-analyses"></span>
|
|
</h2>
|
|
<div id="network-analyses-list" aria-live="polite"></div>
|
|
</div>
|
|
|
|
<div class="sidebar-section">
|
|
<h2 class="sidebar-section-title collapsible" onclick="App.toggleSidebarSection('archived-incidents')" role="button" tabindex="0" aria-expanded="false">
|
|
<span class="sidebar-chevron" id="chevron-archived-incidents" aria-hidden="true">▾</span>
|
|
Archiv
|
|
<span class="sidebar-section-count" id="count-archived-incidents"></span>
|
|
</h2>
|
|
<div id="archived-incidents" aria-live="polite" style="display:none;"></div>
|
|
</div>
|
|
<div class="sidebar-sources-link">
|
|
<button class="btn btn-secondary btn-full btn-small" onclick="App.openSourceManagement()">Quellen verwalten</button>
|
|
<button class="btn btn-secondary btn-full btn-small sidebar-feedback-btn" onclick="App.openFeedback()">Feedback senden</button>
|
|
<div class="sidebar-stats-mini">
|
|
<span id="stat-sources-count">0 Quellen</span> · <span id="stat-articles-count">0 Artikel</span>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Main Content -->
|
|
<main class="main-content" id="main-content">
|
|
<div class="empty-state" id="empty-state">
|
|
<div class="empty-state-icon">☉</div>
|
|
<div class="empty-state-title">Kein Vorfall ausgewählt</div>
|
|
<div class="empty-state-text">Erstelle eine neue Lage oder wähle einen bestehenden Vorfall aus der Seitenleiste.</div>
|
|
</div>
|
|
|
|
|
|
<!-- Netzwerkanalyse View (hidden by default) -->
|
|
<div id="network-view" style="display:none;">
|
|
<!-- Header Strip -->
|
|
<div class="network-header-strip">
|
|
<div class="network-header-row1">
|
|
<div class="network-header-left">
|
|
<span class="incident-type-badge type-network">Netzwerk</span>
|
|
<h2 class="network-header-title" id="network-title"></h2>
|
|
<span class="network-update-badge" id="network-update-badge" style="display:none;" onclick="App.regenerateNetwork()">Aktualisierung verfügbar</span>
|
|
</div>
|
|
<div class="network-header-actions">
|
|
<button class="btn btn-primary btn-small" onclick="App.regenerateNetwork()">Neu generieren</button>
|
|
<div class="export-dropdown">
|
|
<button class="btn btn-secondary btn-small" onclick="this.nextElementSibling.classList.toggle('show')" aria-haspopup="true">Exportieren ▾</button>
|
|
<div class="export-dropdown-menu" role="menu">
|
|
<button class="export-dropdown-item" role="menuitem" onclick="App.exportNetwork('json')">JSON</button>
|
|
<button class="export-dropdown-item" role="menuitem" onclick="App.exportNetwork('csv')">CSV (Kantenliste)</button>
|
|
<hr class="export-dropdown-divider" role="separator">
|
|
<button class="export-dropdown-item" role="menuitem" onclick="App.exportNetwork('png')">PNG Screenshot</button>
|
|
</div>
|
|
</div>
|
|
<button class="btn btn-danger btn-small" onclick="App.deleteNetworkAnalysis()">Löschen</button>
|
|
</div>
|
|
</div>
|
|
<div class="network-header-meta">
|
|
<span id="network-entity-count"></span>
|
|
<span id="network-relation-count"></span>
|
|
<span id="network-last-generated"></span>
|
|
<span id="network-incident-list-text" style="opacity:0.7;"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Progress Bar -->
|
|
<div class="network-progress" id="network-progress-bar" style="display:none;">
|
|
<div class="network-progress-steps">
|
|
<div class="network-progress-step" data-step="entity_extraction">
|
|
<div class="network-progress-step-dot"></div>
|
|
<span>Entitäten</span>
|
|
</div>
|
|
<div class="network-progress-connector"></div>
|
|
<div class="network-progress-step" data-step="relationship_extraction">
|
|
<div class="network-progress-step-dot"></div>
|
|
<span>Beziehungen</span>
|
|
</div>
|
|
<div class="network-progress-connector"></div>
|
|
<div class="network-progress-step" data-step="correction">
|
|
<div class="network-progress-step-dot"></div>
|
|
<span>Korrekturen</span>
|
|
</div>
|
|
</div>
|
|
<div class="network-progress-track">
|
|
<div class="network-progress-fill" id="network-progress-fill"></div>
|
|
</div>
|
|
<div class="network-progress-label" id="network-progress-label">Wird verarbeitet...</div>
|
|
</div>
|
|
|
|
<!-- Graph + Sidebar -->
|
|
<div class="network-content">
|
|
<div class="network-graph-area" id="network-graph-area">
|
|
<div class="network-empty-state">
|
|
<div class="network-empty-state-icon">☉</div>
|
|
<div class="network-empty-state-text">Graph wird geladen...</div>
|
|
</div>
|
|
</div>
|
|
<div class="network-sidebar">
|
|
<div class="network-sidebar-section">
|
|
<div class="network-sidebar-section-title">Suche</div>
|
|
<input type="text" class="network-search-input" id="network-search" placeholder="Entität suchen...">
|
|
</div>
|
|
<div class="network-sidebar-section">
|
|
<div class="network-sidebar-section-title">Typ-Filter</div>
|
|
<div class="network-type-filters" id="network-type-filter-container"></div>
|
|
</div>
|
|
<div class="network-sidebar-section">
|
|
<div class="network-sidebar-section-title">Min. Gewicht: <strong id="network-weight-value">1</strong></div>
|
|
<input type="range" class="network-weight-slider" id="network-weight-slider" min="1" max="5" value="1" step="1">
|
|
<div class="network-weight-labels"><span>1</span><span>5</span></div>
|
|
</div>
|
|
<div class="network-sidebar-section" style="border-bottom:none;">
|
|
<button class="btn btn-secondary btn-small btn-full" onclick="App.resetNetworkView()" style="margin-bottom:6px;">Filter zurücksetzen</button>
|
|
<button class="btn btn-secondary btn-small btn-full" onclick="App.isolateNetworkCluster()">Cluster isolieren</button>
|
|
</div>
|
|
<div class="network-detail-panel" id="network-detail-panel">
|
|
<div class="network-detail-empty">Klicke auf einen Knoten für Details</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tooltip -->
|
|
<div class="network-tooltip" id="network-tooltip"></div>
|
|
</div>
|
|
|
|
<!-- Lagebild (hidden by default) -->
|
|
<div id="incident-view" style="display:none;">
|
|
<!-- Header Strip -->
|
|
<div class="incident-header-strip" id="incident-header-strip">
|
|
<div class="incident-header-row0">
|
|
<span class="incident-type-badge" id="incident-type-badge"></span>
|
|
<span class="auto-refresh-indicator" id="meta-refresh-mode"></span>
|
|
</div>
|
|
<div class="incident-header-row1">
|
|
<div class="incident-header-left">
|
|
<h2 class="incident-header-title" id="incident-title"></h2>
|
|
</div>
|
|
<div class="incident-header-actions">
|
|
<button class="btn btn-primary btn-small" id="refresh-btn">Aktualisieren</button>
|
|
<button class="btn btn-secondary btn-small" id="edit-incident-btn">Bearbeiten</button>
|
|
<div class="export-dropdown" id="export-dropdown">
|
|
<button class="btn btn-secondary btn-small" onclick="App.toggleExportDropdown(event)" aria-expanded="false" aria-haspopup="true">Exportieren ▾</button>
|
|
<div class="export-dropdown-menu" id="export-dropdown-menu" role="menu">
|
|
<button class="export-dropdown-item" role="menuitem" onclick="App.exportIncident('md','report')">Lagebericht (Markdown)</button>
|
|
<button class="export-dropdown-item" role="menuitem" onclick="App.exportIncident('json','report')">Lagebericht (JSON)</button>
|
|
<hr class="export-dropdown-divider" role="separator">
|
|
<button class="export-dropdown-item" role="menuitem" onclick="App.exportIncident('md','full')">Vollexport (Markdown)</button>
|
|
<button class="export-dropdown-item" role="menuitem" onclick="App.exportIncident('json','full')">Vollexport (JSON)</button>
|
|
<hr class="export-dropdown-divider" role="separator">
|
|
<button class="export-dropdown-item" role="menuitem" onclick="App.printIncident()">Drucken / PDF</button>
|
|
</div>
|
|
</div>
|
|
<button class="btn btn-secondary btn-small" id="archive-incident-btn">Archivieren</button>
|
|
<button class="btn btn-danger btn-small" id="delete-incident-btn">Löschen</button>
|
|
</div>
|
|
</div>
|
|
<div class="incident-header-row2">
|
|
<div class="incident-header-row2-left">
|
|
<span class="incident-creator-badge">von <strong id="incident-creator"></strong></span>
|
|
<span class="intl-badge" id="intl-badge"></span>
|
|
<span id="incident-description" class="incident-description-text"></span>
|
|
</div>
|
|
<div class="incident-header-row2-right">
|
|
<div class="summary-meta" id="summary-meta">
|
|
<span id="meta-updated" class="meta-updated-link" role="button" tabindex="0" onclick="App.toggleRefreshHistory()" onkeydown="if(event.key==='Enter')App.toggleRefreshHistory()"></span>
|
|
</div>
|
|
<div class="refresh-history-popover" id="refresh-history-popover" style="display:none;">
|
|
<div class="refresh-history-header">
|
|
<span class="refresh-history-title">Refresh-Verlauf</span>
|
|
<button class="refresh-history-close" onclick="App.closeRefreshHistory()">×</button>
|
|
</div>
|
|
<div class="refresh-history-list" id="refresh-history-list">
|
|
<div style="padding:12px;color:var(--text-disabled);font-size:12px;">Lade...</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Fortschrittsanzeige -->
|
|
<div class="progress-bar" id="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" aria-label="Verarbeitungsfortschritt" style="display:none;">
|
|
<div class="progress-steps">
|
|
<div class="progress-step" id="step-researching">
|
|
<div class="progress-step-dot"></div>
|
|
<span>Recherche</span>
|
|
</div>
|
|
<div class="progress-step" id="step-analyzing">
|
|
<div class="progress-step-dot"></div>
|
|
<span>Analyse</span>
|
|
</div>
|
|
<div class="progress-step" id="step-factchecking">
|
|
<div class="progress-step-dot"></div>
|
|
<span>Faktencheck</span>
|
|
</div>
|
|
</div>
|
|
<div class="progress-track">
|
|
<div class="progress-fill" id="progress-fill"></div>
|
|
</div>
|
|
<div class="progress-label-container">
|
|
<span id="progress-label" class="progress-label">Warte auf Start...</span>
|
|
<span id="progress-timer" class="progress-timer"></span>
|
|
</div>
|
|
<button id="progress-cancel-btn" class="progress-cancel-btn" onclick="App.cancelRefresh()">Abbrechen</button>
|
|
</div>
|
|
|
|
<!-- Layout-Toolbar -->
|
|
<div class="layout-toolbar" id="layout-toolbar" style="display:none;">
|
|
<div class="layout-toggles">
|
|
<button class="layout-toggle-btn active" data-tile="lagebild" onclick="LayoutManager.toggleTile('lagebild')" aria-pressed="true">Lagebild</button>
|
|
<button class="layout-toggle-btn active" data-tile="faktencheck" onclick="LayoutManager.toggleTile('faktencheck')" aria-pressed="true">Faktencheck</button>
|
|
<button class="layout-toggle-btn active" data-tile="quellen" onclick="LayoutManager.toggleTile('quellen')" aria-pressed="true">Quellen</button>
|
|
<button class="layout-toggle-btn active" data-tile="timeline" onclick="LayoutManager.toggleTile('timeline')" aria-pressed="true">Timeline</button>
|
|
<button class="layout-toggle-btn active" data-tile="karte" onclick="LayoutManager.toggleTile('karte')" aria-pressed="true">Karte</button>
|
|
</div>
|
|
<button class="btn btn-secondary btn-small" onclick="LayoutManager.reset()">Layout zurücksetzen</button>
|
|
</div>
|
|
|
|
<!-- gridstack Dashboard-Grid -->
|
|
<div class="grid-stack">
|
|
<div class="grid-stack-item" gs-id="lagebild" gs-x="0" gs-y="0" gs-w="6" gs-h="4" gs-min-w="4" gs-min-h="4">
|
|
<div class="grid-stack-item-content">
|
|
<div class="card incident-analysis-summary">
|
|
<div class="card-header">
|
|
<div class="card-title clickable" role="button" tabindex="0" onclick="openContentModal('Lagebild', 'summary-content')">Lagebild</div>
|
|
<span class="lagebild-timestamp" id="lagebild-timestamp"></span>
|
|
</div>
|
|
<div id="summary-content">
|
|
<div id="summary-text" class="summary-text"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid-stack-item" gs-id="faktencheck" gs-x="6" gs-y="0" gs-w="6" gs-h="4" gs-min-w="4" gs-min-h="4">
|
|
<div class="grid-stack-item-content">
|
|
<div class="card incident-analysis-factcheck" id="factcheck-card">
|
|
<div class="card-header">
|
|
<div class="card-title clickable" role="button" tabindex="0" onclick="openContentModal('Faktencheck', 'factcheck-list')">Faktencheck <span class="info-icon" data-tooltip="Gesichert/Bestätigt = durch mehrere unabhängige Quellen belegt. Unbestätigt/Ungeprüft = noch nicht ausreichend verifiziert. Widerlegt/Umstritten = Quellen widersprechen sich.">i</span></div>
|
|
<div class="fc-filter-bar" id="fc-filters"></div>
|
|
</div>
|
|
<div class="factcheck-list" id="factcheck-list">
|
|
<div class="empty-state" style="padding:20px;">
|
|
<div class="empty-state-text">Noch keine Fakten geprüft</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid-stack-item" gs-id="quellen" gs-x="0" gs-y="4" gs-w="12" gs-h="2" gs-min-w="6" gs-min-h="2">
|
|
<div class="grid-stack-item-content">
|
|
<div class="card source-overview-card">
|
|
<div class="card-header source-overview-header-toggle" onclick="App.toggleSourceOverview()" role="button" tabindex="0" aria-expanded="false">
|
|
<span class="source-overview-chevron" id="source-overview-chevron" title="Aufklappen" aria-hidden="true">▸</span>
|
|
<div class="card-title clickable">Quellenübersicht</div>
|
|
<button class="btn btn-secondary btn-small source-detail-btn" onclick="event.stopPropagation(); openContentModal('Quellenübersicht', 'source-overview-content')">Detailansicht</button>
|
|
</div>
|
|
<div class="source-overview-subheader" onclick="App.toggleSourceOverview()" role="button">
|
|
<span class="source-overview-header-stats" id="source-overview-header-stats"></span>
|
|
</div>
|
|
<div id="source-overview-content" style="display:none;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid-stack-item" gs-id="timeline" gs-x="0" gs-y="5" gs-w="12" gs-h="4" gs-min-w="6" gs-min-h="4">
|
|
<div class="grid-stack-item-content">
|
|
<div class="card timeline-card">
|
|
<div class="card-header">
|
|
<div class="card-title clickable" role="button" tabindex="0" onclick="openContentModal('Ereignis-Timeline', 'timeline')">Ereignis-Timeline</div>
|
|
<div class="ht-controls">
|
|
<div class="ht-filter-group">
|
|
<button class="ht-filter-btn active" data-filter="all" onclick="App.setTimelineFilter('all')" aria-pressed="true">Alle</button>
|
|
<button class="ht-filter-btn" data-filter="articles" onclick="App.setTimelineFilter('articles')" aria-pressed="false">Meldungen</button>
|
|
<button class="ht-filter-btn" data-filter="snapshots" onclick="App.setTimelineFilter('snapshots')" aria-pressed="false">Lageberichte</button>
|
|
</div>
|
|
<span class="ht-count" id="article-count"></span>
|
|
<div class="ht-range-group">
|
|
<button class="ht-range-btn" data-range="24h" onclick="App.setTimelineRange('24h')" aria-pressed="false">24h</button>
|
|
<button class="ht-range-btn" data-range="7d" onclick="App.setTimelineRange('7d')" aria-pressed="false">7T</button>
|
|
<button class="ht-range-btn active" data-range="all" onclick="App.setTimelineRange('all')" aria-pressed="true">Alles</button>
|
|
</div>
|
|
<label for="timeline-search" class="sr-only">Timeline durchsuchen</label>
|
|
<input type="text" id="timeline-search" class="timeline-filter-input" placeholder="Suche..." oninput="App.debouncedRerenderTimeline()">
|
|
</div>
|
|
</div>
|
|
<div id="timeline" class="ht-timeline-container">
|
|
<div class="ht-empty">Noch keine Meldungen</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid-stack-item" gs-id="karte" gs-x="0" gs-y="9" gs-w="12" gs-h="8" gs-min-w="6" gs-min-h="3">
|
|
<div class="grid-stack-item-content">
|
|
<div class="card map-card">
|
|
<div class="card-header">
|
|
<div class="card-title">Geografische Verteilung</div>
|
|
<span class="map-stats" id="map-stats"></span>
|
|
<div class="card-header-actions">
|
|
<button class="btn btn-secondary btn-small" id="geoparse-btn" onclick="App.triggerGeoparse()" title="Orte aus Artikeln einlesen">Orte einlesen</button>
|
|
<button class="btn btn-secondary btn-small map-expand-btn" id="map-expand-btn" onclick="UI.toggleMapFullscreen()" title="Vollbild" aria-label="Karte im Vollbild anzeigen">
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 3 21 3 21 9"/><polyline points="9 21 3 21 3 15"/><line x1="21" y1="3" x2="14" y2="10"/><line x1="3" y1="21" x2="10" y2="14"/></svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="map-container" id="map-container">
|
|
<div class="map-empty" id="map-empty">Keine Orte erkannt</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Parkplatz für ausgeblendete Kacheln -->
|
|
<div id="tile-parking" style="display:none;"></div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<!-- Modal: Neue Lage -->
|
|
<div class="modal-overlay" id="modal-new" role="dialog" aria-modal="true" aria-labelledby="modal-new-title">
|
|
<div class="modal">
|
|
<div class="modal-header">
|
|
<div class="modal-title" id="modal-new-title">Neue Lage anlegen</div>
|
|
<button class="modal-close" onclick="closeModal('modal-new')" aria-label="Schließen">×</button>
|
|
</div>
|
|
<form id="new-incident-form">
|
|
<div class="modal-body">
|
|
<div class="form-group">
|
|
<label for="inc-title">Titel des Vorfalls</label>
|
|
<input type="text" id="inc-title" required aria-required="true" placeholder="z.B. Explosion in Madrid">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="inc-description">Beschreibung / Kontext</label>
|
|
<textarea id="inc-description" placeholder="Weitere Details zum Vorfall (optional)"></textarea>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="inc-type">Art der Lage</label>
|
|
<select id="inc-type" onchange="toggleTypeDefaults()">
|
|
<option value="adhoc">Live-Monitoring — Ereignis beobachten</option>
|
|
<option value="research">Analyse — Thema recherchieren</option>
|
|
</select>
|
|
<div class="form-hint" id="type-hint">
|
|
Durchsucht laufend hunderte Nachrichtenquellen nach neuen Meldungen. Empfohlen: Automatische Aktualisierung.
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Quellen</label>
|
|
<div class="toggle-group">
|
|
<label class="toggle-label">
|
|
<input type="checkbox" id="inc-international" checked>
|
|
<span class="toggle-switch"></span>
|
|
<span class="toggle-text">Internationale Quellen einbeziehen <span class="info-icon tooltip-below" data-tooltip="Aktiviert: Sucht auch in englischsprachigen und internationalen Medien. Deaktiviert: Nur deutschsprachige Quellen.">i</span></span>
|
|
</label>
|
|
</div>
|
|
<div class="toggle-group" style="margin-top: 8px;">
|
|
<label class="toggle-label">
|
|
<input type="checkbox" id="inc-telegram">
|
|
<span class="toggle-switch"></span>
|
|
<span class="toggle-text">Telegram-Kanäle einbeziehen <span class="info-icon tooltip-below" data-tooltip="Bezieht OSINT-relevante Telegram-Kanäle als zusätzliche Quelle ein. Kann die Aktualität erhöhen, aber auch unbestätigte Informationen liefern.">i</span></span>
|
|
</label>
|
|
</div> </div>
|
|
<div class="form-group">
|
|
<label>Sichtbarkeit <span class="info-icon tooltip-below" data-tooltip="Öffentlich: Alle Nutzer der Organisation sehen diese Lage. Privat: Nur für dich sichtbar.">i</span></label>
|
|
<div class="toggle-group">
|
|
<label class="toggle-label">
|
|
<input type="checkbox" id="inc-visibility" checked>
|
|
<span class="toggle-switch"></span>
|
|
<span class="toggle-text" id="visibility-text">Öffentlich — für alle Nutzer sichtbar</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="inc-refresh-mode">Aktualisierung</label>
|
|
<select id="inc-refresh-mode" onchange="toggleRefreshInterval()">
|
|
<option value="manual">Manuell</option>
|
|
<option value="auto">Automatisch</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group conditional-field" id="refresh-interval-field">
|
|
<label for="inc-refresh-value">Intervall</label>
|
|
<div class="interval-input-group">
|
|
<input type="number" id="inc-refresh-value" min="10" value="15">
|
|
<select id="inc-refresh-unit" onchange="updateIntervalMin()">
|
|
<option value="1" selected>Minuten</option>
|
|
<option value="60">Stunden</option>
|
|
<option value="1440">Tage</option>
|
|
<option value="10080">Wochen</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="inc-retention">Aufbewahrung (Tage) <span class="info-icon tooltip-below" data-tooltip="Nach Ablauf wird die Lage automatisch archiviert. 0 = unbegrenzt aufbewahren.">i</span></label>
|
|
<input type="number" id="inc-retention" min="0" max="999" value="30" placeholder="0 = Unbegrenzt">
|
|
</div>
|
|
<div class="form-group" style="margin-top: 8px;">
|
|
<label>E-Mail-Benachrichtigungen</label>
|
|
<div class="form-hint" style="margin-bottom: 8px;">Per E-Mail benachrichtigen bei:</div>
|
|
<div class="toggle-group">
|
|
<label class="toggle-label">
|
|
<input type="checkbox" id="inc-notify-summary">
|
|
<span class="toggle-switch"></span>
|
|
<span class="toggle-text">Neues Lagebild</span>
|
|
</label>
|
|
</div>
|
|
<div class="toggle-group" style="margin-top: 8px;">
|
|
<label class="toggle-label">
|
|
<input type="checkbox" id="inc-notify-new-articles">
|
|
<span class="toggle-switch"></span>
|
|
<span class="toggle-text">Neue Artikel</span>
|
|
</label>
|
|
</div>
|
|
<div class="toggle-group" style="margin-top: 8px;">
|
|
<label class="toggle-label">
|
|
<input type="checkbox" id="inc-notify-status-change">
|
|
<span class="toggle-switch"></span>
|
|
<span class="toggle-text">Statusänderung Faktencheck</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" onclick="closeModal('modal-new')">Abbrechen</button>
|
|
<button type="submit" class="btn btn-primary" id="modal-new-submit">Lage anlegen</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal: Quellenverwaltung -->
|
|
<div class="modal-overlay" id="modal-sources" role="dialog" aria-modal="true" aria-labelledby="modal-sources-title">
|
|
<div class="modal modal-wide">
|
|
<div class="modal-header">
|
|
<div class="modal-title" id="modal-sources-title">Quellenverwaltung</div>
|
|
<button class="modal-close" onclick="closeModal('modal-sources')" aria-label="Schließen">×</button>
|
|
</div>
|
|
<div class="modal-body sources-modal-body">
|
|
<!-- Stats-Leiste -->
|
|
<div class="sources-stats-bar" id="sources-stats-bar"></div>
|
|
|
|
<!-- Toolbar -->
|
|
<div class="sources-toolbar">
|
|
<div class="sources-filters">
|
|
<label for="sources-filter-type" class="sr-only">Quellentyp filtern</label>
|
|
<select id="sources-filter-type" class="timeline-filter-select" onchange="App.filterSources()">
|
|
<option value="">Alle Typen</option>
|
|
<option value="rss_feed">RSS-Feed</option>
|
|
<option value="web_source">Web-Quelle</option>
|
|
<option value="telegram_channel">Telegram</option>
|
|
<option value="excluded">Von mir ausgeschlossen</option>
|
|
</select>
|
|
<label for="sources-filter-category" class="sr-only">Kategorie filtern</label>
|
|
<select id="sources-filter-category" class="timeline-filter-select" onchange="App.filterSources()">
|
|
<option value="">Alle Kategorien</option>
|
|
<option value="nachrichtenagentur">Nachrichtenagentur</option>
|
|
<option value="oeffentlich-rechtlich">Öffentlich-Rechtlich</option>
|
|
<option value="qualitaetszeitung">Qualitätszeitung</option>
|
|
<option value="behoerde">Behörde</option>
|
|
<option value="fachmedien">Fachmedien</option>
|
|
<option value="think-tank">Think Tank</option>
|
|
<option value="international">International</option>
|
|
<option value="regional">Regional</option>
|
|
<option value="boulevard">Boulevard</option>
|
|
<option value="sonstige">Sonstige</option>
|
|
</select>
|
|
<label for="sources-search" class="sr-only">Quellen durchsuchen</label>
|
|
<input type="text" id="sources-search" class="timeline-filter-input sources-search-input" placeholder="Suche..." oninput="App.filterSources()">
|
|
</div>
|
|
<div class="sources-toolbar-actions">
|
|
<button class="btn btn-primary btn-small" onclick="App.toggleSourceForm()">+ Quelle</button>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- Inline-Formular: Quelle hinzufügen (ein-/ausklappbar) -->
|
|
<div class="sources-add-form" id="sources-add-form" style="display:none;">
|
|
<div class="sources-form-row">
|
|
<div class="form-group flex-1">
|
|
<label for="src-discover-url">URL oder Domain</label>
|
|
<input type="text" id="src-discover-url" placeholder="z.B. netzpolitik.org oder t.me/kanalname">
|
|
</div>
|
|
<button class="btn btn-secondary btn-small" id="src-discover-btn" onclick="App.discoverSource()">Erkennen</button>
|
|
</div>
|
|
|
|
<!-- Ergebnis-Anzeige (nach Discovery) -->
|
|
<div id="src-discovery-result" class="sources-discovery-result" style="display:none;">
|
|
<div class="sources-add-form-grid">
|
|
<div class="form-group">
|
|
<label for="src-name">Name</label>
|
|
<input type="text" id="src-name" placeholder="Wird erkannt...">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="src-category">Kategorie</label>
|
|
<select id="src-category">
|
|
<option value="nachrichtenagentur">Nachrichtenagentur</option>
|
|
<option value="oeffentlich-rechtlich">Öffentlich-Rechtlich</option>
|
|
<option value="qualitaetszeitung">Qualitätszeitung</option>
|
|
<option value="behoerde">Behörde</option>
|
|
<option value="fachmedien">Fachmedien</option>
|
|
<option value="think-tank">Think Tank</option>
|
|
<option value="international">International</option>
|
|
<option value="regional">Regional</option>
|
|
<option value="boulevard">Boulevard</option>
|
|
<option value="sonstige" selected>Sonstige</option>
|
|
<option value="ukraine-russland-krieg">Ukraine-Russland-Krieg</option>
|
|
<option value="irankonflikt">Irankonflikt</option>
|
|
<option value="osint-international">OSINT International</option>
|
|
<option value="extremismus-deutschland">Extremismus Deutschland</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="src-type-select">Typ</label>
|
|
<select id="src-type-select">
|
|
<option value="rss_feed">RSS-Feed</option>
|
|
<option value="web_source">Web-Quelle</option>
|
|
<option value="telegram_channel">Telegram-Kanal</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group" id="src-rss-url-group">
|
|
<label>RSS-Feed URL</label>
|
|
<input type="text" id="src-rss-url" class="input-readonly" readonly>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Domain</label>
|
|
<input type="text" id="src-domain" class="input-readonly" readonly>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="src-notes">Notizen</label>
|
|
<input type="text" id="src-notes" placeholder="Optional">
|
|
</div>
|
|
</div>
|
|
<div class="sources-discovery-actions">
|
|
<button class="btn btn-primary btn-small" onclick="App.saveSource()">Speichern</button>
|
|
<button class="btn btn-secondary btn-small" onclick="App.toggleSourceForm(false)">Abbrechen</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Quellen-Liste (gruppiert) -->
|
|
<div class="sources-list" id="sources-list">
|
|
<div class="empty-state-text" style="padding:var(--sp-3xl);text-align:center;">Lade Quellen...</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal: Content-Viewer (wiederverwendbar für Lagebild, Faktencheck, Quellenübersicht, Timeline) -->
|
|
<div class="modal-overlay" id="modal-content-viewer" role="dialog" aria-modal="true" aria-labelledby="content-viewer-title">
|
|
<div class="modal modal-content-viewer">
|
|
<div class="modal-header">
|
|
<div class="modal-title" id="content-viewer-title"></div>
|
|
<div class="modal-header-extra" id="content-viewer-header-extra"></div>
|
|
<button class="modal-close" onclick="closeModal('modal-content-viewer')" aria-label="Schließen">×</button>
|
|
</div>
|
|
<div class="modal-body" id="content-viewer-body"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal: Feedback -->
|
|
<div class="modal-overlay" id="modal-feedback" role="dialog" aria-modal="true" aria-labelledby="modal-feedback-title">
|
|
<div class="modal">
|
|
<div class="modal-header">
|
|
<div class="modal-title" id="modal-feedback-title">Feedback senden</div>
|
|
<button class="modal-close" onclick="closeModal('modal-feedback')" aria-label="Schließen">×</button>
|
|
</div>
|
|
<form id="feedback-form">
|
|
<div class="modal-body">
|
|
<div class="form-group">
|
|
<label for="fb-category">Kategorie</label>
|
|
<select id="fb-category">
|
|
<option value="bug">Fehlerbericht</option>
|
|
<option value="feature">Feature-Wunsch</option>
|
|
<option value="question">Frage</option>
|
|
<option value="other">Sonstiges</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="fb-message">Nachricht</label>
|
|
<textarea id="fb-message" required aria-required="true" minlength="10" maxlength="5000" rows="6" placeholder="Beschreibe dein Anliegen (mind. 10 Zeichen)..."></textarea>
|
|
<div class="form-hint"><span id="fb-char-count">0</span> / 5.000 Zeichen</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="fb-files">Bilder anhaengen (optional)</label>
|
|
<input type="file" id="fb-files" accept="image/jpeg,image/png" multiple style="font-size:13px;">
|
|
<div class="form-hint">Max. 3 Bilder (JPEG/PNG, je max. 5 MB)</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" onclick="closeModal('modal-feedback')">Abbrechen</button>
|
|
<button type="submit" class="btn btn-primary" id="fb-submit-btn">Absenden</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Chat-Assistent Widget -->
|
|
<button class="chat-toggle-btn" id="chat-toggle-btn" title="Chat-Assistent" aria-label="Chat-Assistent oeffnen">
|
|
<svg viewBox="0 0 24 24"><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H5.2L4 17.2V4h16v12z"/></svg>
|
|
</button>
|
|
<div class="chat-window" id="chat-window">
|
|
<div class="chat-header">
|
|
<span class="chat-header-title">AegisSight Assistent</span>
|
|
<div class="chat-header-actions">
|
|
<button class="chat-header-btn chat-reset-btn" id="chat-reset-btn" title="Neuer Chat" aria-label="Neuen Chat starten" style="display:none">
|
|
<svg viewBox="0 0 24 24" width="15" height="15"><path d="M17.65 6.35A7.958 7.958 0 0012 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08A5.99 5.99 0 0112 18c-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z" fill="currentColor"/></svg>
|
|
</button>
|
|
<button class="chat-header-btn" id="chat-fullscreen-btn" title="Vollbild" aria-label="Vollbild umschalten">
|
|
<svg viewBox="0 0 24 24" width="15" height="15"><path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" fill="currentColor"/></svg>
|
|
</button>
|
|
<button class="chat-header-btn chat-header-close" id="chat-close-btn" title="Schließen" aria-label="Chat schließen">×</button>
|
|
</div>
|
|
</div>
|
|
<div class="chat-messages" id="chat-messages"></div>
|
|
<form class="chat-input-area" id="chat-form" autocomplete="off">
|
|
<textarea id="chat-input" rows="1" placeholder="Frage stellen..." maxlength="2000"></textarea>
|
|
<button type="submit" class="chat-send-btn" title="Senden" aria-label="Nachricht senden">
|
|
<svg viewBox="0 0 24 24"><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/></svg>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
|
|
<!-- Modal: Neue Netzwerkanalyse -->
|
|
<div class="modal-overlay" id="modal-network-new" role="dialog" aria-modal="true" aria-labelledby="modal-network-new-title">
|
|
<div class="modal">
|
|
<div class="modal-header">
|
|
<div class="modal-title" id="modal-network-new-title">Neue Netzwerkanalyse</div>
|
|
<button class="modal-close" onclick="closeModal('modal-network-new')" aria-label="Schließen">×</button>
|
|
</div>
|
|
<form onsubmit="App.submitNetworkAnalysis(event); return false;">
|
|
<div class="modal-body">
|
|
<div class="form-group">
|
|
<label for="network-name">Name der Analyse</label>
|
|
<input type="text" id="network-name" required placeholder="z.B. Irankonflikt-Netzwerk">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Lagen auswählen</label>
|
|
<div class="network-incident-list">
|
|
<input type="text" class="network-incident-search" id="network-incident-search" placeholder="Lagen durchsuchen...">
|
|
<div id="network-incident-options"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" onclick="closeModal('modal-network-new')">Abbrechen</button>
|
|
<button type="submit" class="btn btn-primary" id="network-submit-btn">Analyse starten</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tutorial -->
|
|
<div class="tutorial-overlay" id="tutorial-overlay">
|
|
<div class="tutorial-spotlight" id="tutorial-spotlight"></div>
|
|
</div>
|
|
<div class="tutorial-bubble" id="tutorial-bubble"></div>
|
|
<div class="tutorial-cursor" id="tutorial-cursor"></div>
|
|
|
|
<!-- Toast Container -->
|
|
<div class="toast-container" id="toast-container" aria-live="polite" aria-atomic="true"></div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/gridstack@12/dist/gridstack-all.js"></script>
|
|
<script src="/static/vendor/leaflet.js"></script>
|
|
<script src="/static/vendor/leaflet.markercluster.js"></script>
|
|
<script src="/static/js/api.js?v=20260316b"></script>
|
|
<script src="/static/js/ws.js?v=20260316b"></script>
|
|
<script src="/static/js/components.js?v=20260316d"></script>
|
|
<script src="/static/js/layout.js?v=20260316b"></script>
|
|
<script src="/static/js/app.js?v=20260316b"></script>
|
|
<script src="/static/js/api_network.js?v=20260316a"></script>
|
|
<script src="/static/js/network-graph.js?v=20260316a"></script>
|
|
<script src="/static/js/app_network.js?v=20260316a"></script>
|
|
<script src="/static/js/tutorial.js?v=20260316r"></script>
|
|
<script src="/static/js/chat.js?v=20260316f"></script>
|
|
<script>document.addEventListener("DOMContentLoaded",function(){Chat.init();Tutorial.init()});</script>
|
|
|
|
<!-- Map Fullscreen Overlay -->
|
|
<div class="map-fullscreen-overlay" id="map-fullscreen-overlay">
|
|
<div class="map-fullscreen-header">
|
|
<div class="map-fullscreen-title">Geografische Verteilung</div>
|
|
<span class="map-stats map-fullscreen-stats" id="map-fullscreen-stats"></span>
|
|
<button class="btn btn-secondary btn-small" onclick="UI.toggleMapFullscreen()" title="Vollbild beenden" aria-label="Vollbild beenden">
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 14 10 14 10 20"/><polyline points="20 10 14 10 14 4"/><line x1="14" y1="10" x2="21" y2="3"/><line x1="3" y1="21" x2="10" y2="14"/></svg>
|
|
</button>
|
|
</div>
|
|
<div class="map-fullscreen-container" id="map-fullscreen-container"></div>
|
|
</div>
|
|
</body>
|
|
</html>
|