Cyberangriffe-Lagebild + Vorschau: Slide und Carousel aktualisiert
Neue Seite /lagen/cyberangriffe/ mit 93 Artikeln, 41 Quellen, 28 Locations. Hero-Slide "Flexibel einsetzbar" verlinkt jetzt auf Cyberangriffe. Carousel: Platzhalter 2 ersetzt durch Live-Card mit Zusammenfassung. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Dieser Commit ist enthalten in:
Claude Code
122
lagen/cyberangriffe/index.html
Normale Datei
122
lagen/cyberangriffe/index.html
Normale Datei
@@ -0,0 +1,122 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Lagebild: Cyberangriffe auf deutsche Infrastruktur - AegisSight</title>
|
||||
<meta name="robots" content="noindex, nofollow, noarchive, nosnippet, noimageindex">
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
|
||||
<link rel="stylesheet" href="/css/main.css">
|
||||
<link rel="stylesheet" href="/css/fonts.css">
|
||||
<link rel="stylesheet" href="/css/mobile.css">
|
||||
<link rel="stylesheet" href="/lagen/iran-konflikt/lagebild.css">
|
||||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
|
||||
</head>
|
||||
<body class="lagebild-page">
|
||||
<div class="scroll-progress" id="scroll-progress"></div>
|
||||
<nav class="navbar" role="navigation">
|
||||
<div class="nav-container">
|
||||
<div class="logo">
|
||||
<a href="/"><img src="/assets/images/logos/Logo+Schrift_Rechts.png" alt="AegisSight" class="logo-img"></a>
|
||||
</div>
|
||||
<ul class="nav-menu">
|
||||
<li><a href="/">Startseite</a></li>
|
||||
<li><a href="/#about">\u00dcber uns</a></li>
|
||||
<li><a href="/#products">L\u00f6sungen</a></li>
|
||||
<li><a href="mailto:info@aegis-sight.de">Kontakt</a></li>
|
||||
</ul>
|
||||
<div class="nav-extras">
|
||||
<button class="mobile-menu-toggle" aria-label="Men\u00fc \u00f6ffnen" aria-expanded="false">
|
||||
<span class="hamburger"><span></span><span></span><span></span></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="nav-menu-mobile" aria-hidden="true">
|
||||
<button class="mobile-menu-close" aria-label="Men\u00fc schlie\u00dfen">
|
||||
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18 6L6 18M6 6l12 12" stroke="currentColor"/></svg>
|
||||
</button>
|
||||
<ul>
|
||||
<li><a href="/">Startseite</a></li>
|
||||
<li><a href="/#about">\u00dcber uns</a></li>
|
||||
<li><a href="/#products">L\u00f6sungen</a></li>
|
||||
<li><a href="mailto:info@aegis-sight.de">Kontakt</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="mobile-menu-overlay"></div>
|
||||
<section class="lagebild-hero">
|
||||
<canvas id="hero-particles"></canvas>
|
||||
<div class="hero-bg-pattern"></div>
|
||||
<div class="container">
|
||||
<h1 id="hero-title">LAGEBILD</h1>
|
||||
<p class="hero-incident-title" id="incident-title"></p>
|
||||
<div class="hero-stats" id="hero-stats"></div>
|
||||
</div>
|
||||
</section>
|
||||
<div class="control-bar">
|
||||
<div class="container">
|
||||
<div class="timeline-wrapper">
|
||||
<div class="timeline-strip" id="timeline-strip"></div>
|
||||
<div class="timeline-dropdown" id="timeline-dropdown"></div>
|
||||
</div>
|
||||
<div class="tab-nav" id="tab-nav">
|
||||
<button class="tab-btn active" data-tab="lagebild">Lagebild</button>
|
||||
<button class="tab-btn" data-tab="karte">Karte</button>
|
||||
<button class="tab-btn" data-tab="faktenchecks">Faktenchecks <span class="tab-badge" id="tab-badge-faktenchecks"></span></button>
|
||||
<button class="tab-btn" data-tab="quellen">Quellen <span class="tab-badge" id="tab-badge-quellen"></span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<main class="lagebild-main">
|
||||
<div class="container">
|
||||
<div class="tab-panel active" id="panel-lagebild">
|
||||
<p class="data-source-note">Daten bereitgestellt durch AegisSight Monitor</p>
|
||||
<section class="content-card">
|
||||
<div class="card-header">
|
||||
<h2 id="lagebild-date-title">Lagebild</h2>
|
||||
<span class="card-timestamp" id="lagebild-timestamp"></span>
|
||||
</div>
|
||||
<div class="card-body" id="summary-content">
|
||||
<div class="loading-skeleton"><div class="skeleton-line"></div><div class="skeleton-line"></div><div class="skeleton-line short"></div></div>
|
||||
</div>
|
||||
<div class="card-footer" id="inline-sources"></div>
|
||||
</section>
|
||||
</div>
|
||||
<div class="tab-panel" id="panel-quellen">
|
||||
<section class="content-card">
|
||||
<div class="card-header"><h2>Quellen</h2><p class="card-description">Alle vom AegisSight Monitor \u00fcberwachten Quellen</p></div>
|
||||
<div class="card-body" id="sources-grid-container"><div class="loading-skeleton"><div class="skeleton-line"></div><div class="skeleton-line short"></div></div></div>
|
||||
</section>
|
||||
</div>
|
||||
<div class="tab-panel" id="panel-karte">
|
||||
<section class="content-card">
|
||||
<div class="card-header"><h2>Karte</h2><p class="card-description">Geografische Einordnung der Meldungen</p></div>
|
||||
<div class="card-body"><div id="map-container" style="height:500px;border-radius:4px;overflow:hidden;"></div></div>
|
||||
</section>
|
||||
</div>
|
||||
<div class="tab-panel" id="panel-faktenchecks">
|
||||
<section class="content-card">
|
||||
<div class="card-header"><h2>Faktenchecks</h2><p class="card-description">KI-gest\u00fctzte Verifizierung aller zentralen Aussagen gegen unabh\u00e4ngige Quellen.</p></div>
|
||||
<div class="card-body" id="factchecks-content"></div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="footer-content">
|
||||
<div class="footer-section"><h4>AegisSight UG (haftungsbeschr\u00e4nkt)</h4><p>Gladbacher Strasse 3-5</p><p>40764 Langenfeld</p></div>
|
||||
<div class="footer-section"><h4>Navigation</h4><ul><li><a href="/">Startseite</a></li><li><a href="/#about">\u00dcber uns</a></li><li><a href="/#products">L\u00f6sungen</a></li></ul></div>
|
||||
<div class="footer-section"><h4>Rechtliches</h4><ul><li><a href="/impressum.html">Impressum</a></li><li><a href="/datenschutz.html">Datenschutz</a></li></ul></div>
|
||||
<div class="footer-section"><h4>Kontakt</h4><p>info@aegis-sight.de</p></div>
|
||||
</div>
|
||||
<p class="copyright">© 2026 AegisSight UG (haftungsbeschr\u00e4nkt). Alle Rechte vorbehalten.</p>
|
||||
</div>
|
||||
</footer>
|
||||
<script src="/js/config.js"></script>
|
||||
<script src="/js/translations.js"></script>
|
||||
<script src="/js/mobile-nav.js"></script>
|
||||
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
||||
<script src="/lagen/iran-konflikt/lagebild.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -159,9 +159,9 @@
|
||||
<span class="hero-slide-label">Flexibel einsetzbar</span>
|
||||
<h2 class="hero-slide-headline">Von der Großlage bis zum Einzelthema.</h2>
|
||||
<p class="hero-slide-text">Geopolitische Konflikte, Unternehmensrisiken, regionale Krisen oder Einzelpersonen: Der AegisSight Monitor skaliert mit Ihrem Bedarf. Definieren Sie Ihr Thema, wählen Sie Ihre Quellen, der Rest läuft automatisch. Jede Lage erhält ihr eigenes Lagebild mit Quellenbelegen, Karte und Faktencheck.</p>
|
||||
<p class="hero-slide-example">Weitere Live-Beispiele folgen in Kürze.</p>
|
||||
<p class="hero-slide-example">Beispiel: Cyberangriffe auf deutsche Infrastruktur, 93 Artikel aus 41 Quellen, automatisch überwacht.</p>
|
||||
<div class="hero-slide-cta">
|
||||
<a href="#" class="btn btn-outline-light btn-placeholder" aria-disabled="true">Demnächst verfügbar</a>
|
||||
<a href="/lagen/cyberangriffe/" class="btn btn-primary">Live-Beispiel ansehen</a>
|
||||
<button class="btn btn-outline-light" onclick="openContactModal()">Kontakt aufnehmen</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -286,11 +286,15 @@
|
||||
</div>
|
||||
<a href="/lagen/iran-konflikt/" class="btn btn-primary btn-block">Vollständiges Lagebild öffnen</a>
|
||||
</div>
|
||||
<!-- Placeholder 2 -->
|
||||
<div class="carousel-card card-placeholder" data-index="1" data-lage="">
|
||||
<div class="demo-badge badge-soon">Demnächst</div>
|
||||
<h3 class="demo-title placeholder-title">Weitere Lage</h3>
|
||||
<p class="placeholder-text">In Vorbereitung</p>
|
||||
<!-- Cyberangriffe -->
|
||||
<div class="carousel-card card-live" data-index="1" data-lage="cyberangriffe">
|
||||
<div class="demo-badge">LIVE</div>
|
||||
<h3 class="demo-title">Cyberangriffe auf deutsche Infrastruktur</h3>
|
||||
|
||||
<div class="demo-excerpt" id="demo-excerpt-cyberangriffe">
|
||||
<div class="excerpt-text" id="excerpt-text-cyberangriffe">Lagebild wird geladen...</div>
|
||||
</div>
|
||||
<a href="/lagen/cyberangriffe/" class="btn btn-primary btn-block">Vollständiges Lagebild öffnen</a>
|
||||
</div>
|
||||
<!-- Deepfakes Recherche -->
|
||||
<div class="carousel-card card-live" data-index="2" data-lage="deepfakes">
|
||||
|
||||
@@ -457,7 +457,28 @@ function mdToHtml(md) {
|
||||
});
|
||||
}
|
||||
|
||||
/* ==================== LOAD CYBERANGRIFFE DATA ==================== */
|
||||
function loadCyberangriffeData() {
|
||||
fetch('/lagen/cyberangriffe/data/summary.json?t=' + Date.now())
|
||||
.then(function (r) { if (!r.ok) throw new Error(r.status); return r.json(); })
|
||||
.then(function (data) {
|
||||
var excerptEl = document.getElementById('excerpt-text-cyberangriffe');
|
||||
if (excerptEl && data.zusammenfassung) {
|
||||
excerptEl.innerHTML = mdToHtml(data.zusammenfassung);
|
||||
}
|
||||
lageData['cyberangriffe'] = {
|
||||
locations: data.locations || [],
|
||||
category_labels: data.category_labels || {}
|
||||
};
|
||||
})
|
||||
.catch(function () {
|
||||
var el = document.getElementById('excerpt-text-cyberangriffe');
|
||||
if (el) el.textContent = 'Daten konnten nicht geladen werden.';
|
||||
});
|
||||
}
|
||||
|
||||
/* ==================== INIT ==================== */
|
||||
loadLiveData();
|
||||
loadDeepfakesData();
|
||||
loadCyberangriffeData();
|
||||
})();
|
||||
|
||||
In neuem Issue referenzieren
Einen Benutzer sperren