AegisSight/Website
3
0
Fork 0
Code Issues Pull-Requests Actions Pakete Projekte Releases Wiki Aktivität
Dateien
500f6129f169797847fbc89fb1d3824ddf94923d
Website/lagebild/index.html
Claude Code 500f6129f1 Lagebild Design-Refresh: Dark Theme mit Navy/Gold Design System 
- CSS komplett neu: Dark Theme mit eigenen Variablen (--lb-*), Glasmorphism Stat-Cards, Timeline-Strip
- Hero: Count-Up Animationen, Faktencheck-Quick-Stats, Powered-by Badge
- Kalender-Timeline ersetzt Snapshot-Dropdown (Tage gruppiert, Gold-Akzent für aktiven Tag)
- Tab-Badges mit Quellen-/Faktencheck-Zähler
- Dark Map Tiles (CartoDB Dark Matter) mit dunkler Legende und Popups
- Scroll-Reveal Animationen (IntersectionObserver)
- Smooth-Scroll für Zitat-Links mit Gold-Highlight
- Favicons via Google Favicon API bei Artikeln
- Responsive: Mobile 2x2 Stat-Grid, scrollbare Timeline
- Nav + Footer Dark Override ohne Änderung an main.css

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-07 14:17:49 +01:00

206 Zeilen
9.9 KiB
HTML
Originalformat Blame Verlauf

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lagebild Irankonflikt - 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="lagebild.css">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
</head>
<body class="lagebild-page">
<!-- Navigation -->
<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="/" data-translate="navHome">Startseite</a></li>
<li><a href="/#about" data-translate="navAbout">Über uns</a></li>
<li><a href="/#products" data-translate="navProducts">Lösungen</a></li>
<li><a href="/lagebild" class="nav-active" data-translate="navLagebild">Lagebild</a></li>
<li><a href="mailto:info@aegis-sight.de" data-translate="navContact">Kontakt</a></li>
</ul>
<div class="nav-extras">
<button class="lang-toggle" data-lang="de" aria-label="Sprache wechseln" data-translate="langSwitch">DE | EN</button>
<button class="mobile-menu-toggle" aria-label="Menü öffnen" aria-expanded="false">
<span class="hamburger"><span></span><span></span><span></span></span>
</button>
</div>
</div>
</nav>
<!-- Mobile Navigation -->
<div class="nav-menu-mobile" aria-hidden="true">
<button class="mobile-menu-close" aria-label="Menü schließen">
<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="/" data-translate="navHome">Startseite</a></li>
<li><a href="/#about" data-translate="navAbout">Über uns</a></li>
<li><a href="/#products" data-translate="navProducts">Lösungen</a></li>
<li><a href="/lagebild" class="nav-active" data-translate="navLagebild">Lagebild</a></li>
<li><a href="mailto:info@aegis-sight.de" data-translate="navContact">Kontakt</a></li>
</ul>
</div>
<div class="mobile-menu-overlay"></div>
<!-- Hero Section -->
<section class="lagebild-hero">
<div class="hero-bg-pattern"></div>
<div class="container">
<div class="hero-badge">
<span class="badge-dot"></span>
<span>LIVE-LAGEBILD</span>
</div>
<h1 id="hero-title">LAGEBILD</h1>
<p class="hero-incident-title" id="incident-title"></p>
<!-- Stat Cards -->
<div class="hero-stats" id="hero-stats"></div>
<!-- FC Quick Stats -->
<div class="hero-fc-stats" id="hero-fc-stats"></div>
<!-- Powered By -->
<div class="hero-powered-by">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
<span>Daten durch AegisSight Monitor — KI-gestützte OSINT-Analyse</span>
</div>
</div>
</section>
<!-- Control Bar: Timeline + Tabs -->
<div class="control-bar">
<div class="container">
<div class="timeline-wrapper">
<div class="timeline-strip" id="timeline-strip"></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="quellen">Quellen <span class="tab-badge" id="tab-badge-quellen"></span></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>
</div>
</div>
</div>
<!-- Main Content -->
<main class="lagebild-main">
<div class="container">
<!-- Tab: Lagebild -->
<div class="tab-panel active" id="panel-lagebild">
<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>
<!-- Tab: Quellen -->
<div class="tab-panel" id="panel-quellen">
<section class="content-card">
<div class="card-header">
<h2>Quellen &amp; Quellenberichte</h2>
<p class="card-description">Alle vom AegisSight Monitor aggregierten Quellen und Artikel</p>
</div>
<div class="card-body">
<div id="sources-cited" class="sources-section"></div>
<h3 class="section-subtitle" id="articles-heading">Alle Artikel</h3>
<div id="articles-content"></div>
</div>
</section>
</div>
<!-- Tab: Karte -->
<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>
<!-- Tab: Faktenchecks -->
<div class="tab-panel" id="panel-faktenchecks">
<section class="content-card">
<div class="card-header">
<h2>Faktenchecks</h2>
<p class="card-description">KI-gestützte Verifizierung aller zentralen Aussagen gegen unabhängige Quellen</p>
</div>
<div class="card-body" id="factchecks-content"></div>
</section>
</div>
<!-- CTA -->
<section class="lagebild-cta">
<p class="cta-powered-text">Dieses Lagebild wird automatisch durch unseren KI-Monitor erstellt.</p>
<div class="cta-content">
<h3>Interesse an AegisSight Monitor?</h3>
<p>Erhalten Sie Echtzeit-Lagebilder für Ihre Organisation mit KI-gestützter Analyse und Faktencheck.</p>
<a href="mailto:info@aegis-sight.de" class="cta-button">Kontakt aufnehmen</a>
</div>
</section>
</div>
</main>
<!-- Footer -->
<footer class="footer">
<div class="container">
<div class="footer-content">
<div class="footer-section">
<h4 data-translate="footerCompanyTitle">AegisSight UG (haftungsbeschränkt)</h4>
<p data-translate="footerCompanyAddress1">Gladbacher Strasse 3-5</p>
<p data-translate="footerCompanyAddress2">40764 Langenfeld</p>
</div>
<div class="footer-section">
<h4 data-translate="footerNavTitle">Navigation</h4>
<ul>
<li><a href="/" data-translate="footerNavHome">Startseite</a></li>
<li><a href="/#about" data-translate="footerNavAbout">Über uns</a></li>
<li><a href="/#products" data-translate="footerNavProducts">Lösungen</a></li>
</ul>
</div>
<div class="footer-section">
<h4 data-translate="footerLegalTitle">Rechtliches</h4>
<ul>
<li><a href="/impressum.html" data-translate="footerImprint">Impressum</a></li>
<li><a href="/datenschutz.html" data-translate="footerPrivacy">Datenschutz</a></li>
</ul>
</div>
<div class="footer-section">
<h4 data-translate="footerContactTitle">Kontakt</h4>
<p>info@aegis-sight.de</p>
</div>
</div>
<p class="copyright">&copy; 2026 AegisSight UG (haftungsbeschränkt). Alle Rechte vorbehalten.</p>
</div>
</footer>
<!-- Scripts -->
<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="lagebild.js"></script>
</body>
</html>
In neuem Issue referenzieren Git Blame ansehen Permalink kopieren