AegisSight/Website
3
0
Fork 0
Code Issues Pull-Requests Actions Pakete Projekte Releases Wiki Aktivität

Lagebild: CTA-Block durch Floating Pill ersetzt

Quellcode durchsuchen 
- Statischer CTA-Block am Seitenende entfernt
- Floating Pill am unteren Bildschirmrand (zentriert)
- Erscheint nach 400px Scroll, Glasmorphism-Stil
- Gold-Button Kontakt aufnehmen mit mailto-Link
- Schliessbar mit X-Button
- Responsive: volle Breite auf Mobile

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Dieser Commit ist enthalten in:
Claude Code
2026-03-07 15:30:34 +01:00
Ursprung d48c090385
Commit 3c0989545b
3 geänderte Dateien mit 296 neuen und 224 gelöschten Zeilen
Patch-Datei herunterladen Vergleichs-Datei herunterladen Alle Dateien ausklappen Alle Dateien einklappen

385
lagebild/index.html
Datei anzeigen

@@ -1,196 +1,189 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="de"> <html lang="de">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lagebild Irankonflikt - AegisSight</title> <title>Lagebild Irankonflikt - AegisSight</title>
<meta name="robots" content="noindex, nofollow, noarchive, nosnippet, noimageindex"> <meta name="robots" content="noindex, nofollow, noarchive, nosnippet, noimageindex">
<link rel="icon" type="image/svg+xml" href="../favicon.svg"> <link rel="icon" type="image/svg+xml" href="../favicon.svg">
<link rel="stylesheet" href="../css/main.css"> <link rel="stylesheet" href="../css/main.css">
<link rel="stylesheet" href="../css/fonts.css"> <link rel="stylesheet" href="../css/fonts.css">
<link rel="stylesheet" href="../css/mobile.css"> <link rel="stylesheet" href="../css/mobile.css">
<link rel="stylesheet" href="lagebild.css"> <link rel="stylesheet" href="lagebild.css">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" /> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
</head> </head>
<body class="lagebild-page"> <body class="lagebild-page">
<!-- Navigation --> <!-- Navigation -->
<nav class="navbar" role="navigation"> <nav class="navbar" role="navigation">
<div class="nav-container"> <div class="nav-container">
<div class="logo"> <div class="logo">
<a href="/"><img src="../assets/images/logos/Logo+Schrift_Rechts.png" alt="AegisSight" class="logo-img"></a> <a href="/"><img src="../assets/images/logos/Logo+Schrift_Rechts.png" alt="AegisSight" class="logo-img"></a>
</div> </div>
<ul class="nav-menu"> <ul class="nav-menu">
<li><a href="/" data-translate="navHome">Startseite</a></li> <li><a href="/" data-translate="navHome">Startseite</a></li>
<li><a href="/#about" data-translate="navAbout">Über uns</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="/#products" data-translate="navProducts">Lösungen</a></li>
<li><a href="/lagebild" class="nav-active" data-translate="navLagebild">Lagebild</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> <li><a href="mailto:info@aegis-sight.de" data-translate="navContact">Kontakt</a></li>
</ul> </ul>
<div class="nav-extras"> <div class="nav-extras">
<button class="lang-toggle" data-lang="de" aria-label="Sprache wechseln" data-translate="langSwitch">DE | EN</button> <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"> <button class="mobile-menu-toggle" aria-label="Menü öffnen" aria-expanded="false">
<span class="hamburger"><span></span><span></span><span></span></span> <span class="hamburger"><span></span><span></span><span></span></span>
</button> </button>
</div> </div>
</div> </div>
</nav> </nav>
<!-- Mobile Navigation --> <!-- Mobile Navigation -->
<div class="nav-menu-mobile" aria-hidden="true"> <div class="nav-menu-mobile" aria-hidden="true">
<button class="mobile-menu-close" aria-label="Menü schließen"> <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> <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> </button>
<ul> <ul>
<li><a href="/" data-translate="navHome">Startseite</a></li> <li><a href="/" data-translate="navHome">Startseite</a></li>
<li><a href="/#about" data-translate="navAbout">Über uns</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="/#products" data-translate="navProducts">Lösungen</a></li>
<li><a href="/lagebild" class="nav-active" data-translate="navLagebild">Lagebild</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> <li><a href="mailto:info@aegis-sight.de" data-translate="navContact">Kontakt</a></li>
</ul> </ul>
</div> </div>
<div class="mobile-menu-overlay"></div> <div class="mobile-menu-overlay"></div>
<!-- Hero Section --> <!-- Hero Section -->
<section class="lagebild-hero"> <section class="lagebild-hero">
<div class="hero-bg-pattern"></div> <div class="hero-bg-pattern"></div>
<div class="container"> <div class="container">
<div class="hero-badge"> <div class="hero-badge">
<span class="badge-dot"></span> <span class="badge-dot"></span>
<span>LIVE-LAGEBILD</span> <span>LIVE-LAGEBILD</span>
</div> </div>
<h1 id="hero-title">LAGEBILD</h1> <h1 id="hero-title">LAGEBILD</h1>
<p class="hero-incident-title" id="incident-title"></p> <p class="hero-incident-title" id="incident-title"></p>
<!-- Stat Cards --> <!-- Stat Cards -->
<div class="hero-stats" id="hero-stats"></div> <div class="hero-stats" id="hero-stats"></div>
</div> </div>
</section> </section>
<!-- Control Bar: Timeline + Tabs --> <!-- Control Bar: Timeline + Tabs -->
<div class="control-bar"> <div class="control-bar">
<div class="container"> <div class="container">
<div class="timeline-wrapper"> <div class="timeline-wrapper">
<div class="timeline-strip" id="timeline-strip"></div> <div class="timeline-strip" id="timeline-strip"></div>
<div class="timeline-dropdown" id="timeline-dropdown"></div> <div class="timeline-dropdown" id="timeline-dropdown"></div>
</div> </div>
<div class="tab-nav" id="tab-nav"> <div class="tab-nav" id="tab-nav">
<button class="tab-btn active" data-tab="lagebild">Lagebild</button> <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="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="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="faktenchecks">Faktenchecks <span class="tab-badge" id="tab-badge-faktenchecks"></span></button>
</div> </div>
</div> </div>
</div> </div>
<!-- Main Content --> <!-- Main Content -->
<main class="lagebild-main"> <main class="lagebild-main">
<div class="container"> <div class="container">
<!-- Tab: Lagebild --> <!-- Tab: Lagebild -->
<div class="tab-panel active" id="panel-lagebild"> <div class="tab-panel active" id="panel-lagebild">
<section class="content-card"> <section class="content-card">
<div class="card-header"> <div class="card-header">
<h2 id="lagebild-date-title">Lagebild</h2> <h2 id="lagebild-date-title">Lagebild</h2>
<span class="card-timestamp" id="lagebild-timestamp"></span> <span class="card-timestamp" id="lagebild-timestamp"></span>
</div> </div>
<div class="card-body" id="summary-content"> <div class="card-body" id="summary-content">
<div class="loading-skeleton"> <div class="loading-skeleton">
<div class="skeleton-line"></div> <div class="skeleton-line"></div>
<div class="skeleton-line"></div> <div class="skeleton-line"></div>
<div class="skeleton-line short"></div> <div class="skeleton-line short"></div>
</div> </div>
</div> </div>
<div class="card-footer" id="inline-sources"></div> <div class="card-footer" id="inline-sources"></div>
</section> </section>
</div> </div>
<!-- Tab: Quellen --> <!-- Tab: Quellen -->
<div class="tab-panel" id="panel-quellen"> <div class="tab-panel" id="panel-quellen">
<section class="content-card"> <section class="content-card">
<div class="card-header"> <div class="card-header">
<h2>Quellen &amp; Quellenberichte</h2> <h2>Quellen &amp; Quellenberichte</h2>
<p class="card-description">Alle vom AegisSight Monitor aggregierten Quellen und Artikel</p> <p class="card-description">Alle vom AegisSight Monitor aggregierten Quellen und Artikel</p>
</div> </div>
<div class="card-body"> <div class="card-body">
<div id="sources-cited" class="sources-section"></div> <div id="sources-cited" class="sources-section"></div>
<h3 class="section-subtitle" id="articles-heading">Alle Artikel</h3> <h3 class="section-subtitle" id="articles-heading">Alle Artikel</h3>
<div id="articles-content"></div> <div id="articles-content"></div>
</div> </div>
</section> </section>
</div> </div>
<!-- Tab: Karte --> <!-- Tab: Karte -->
<div class="tab-panel" id="panel-karte"> <div class="tab-panel" id="panel-karte">
<section class="content-card"> <section class="content-card">
<div class="card-header"> <div class="card-header">
<h2>Karte</h2> <h2>Karte</h2>
<p class="card-description">Geografische Einordnung der Meldungen</p> <p class="card-description">Geografische Einordnung der Meldungen</p>
</div> </div>
<div class="card-body"> <div class="card-body">
<div id="map-container" style="height:500px;border-radius:4px;overflow:hidden;"></div> <div id="map-container" style="height:500px;border-radius:4px;overflow:hidden;"></div>
</div> </div>
</section> </section>
</div> </div>
<!-- Tab: Faktenchecks --> <!-- Tab: Faktenchecks -->
<div class="tab-panel" id="panel-faktenchecks"> <div class="tab-panel" id="panel-faktenchecks">
<section class="content-card"> <section class="content-card">
<div class="card-header"> <div class="card-header">
<h2>Faktenchecks</h2> <h2>Faktenchecks</h2>
<p class="card-description">KI-gestützte Verifizierung aller zentralen Aussagen gegen unabhängige Quellen</p> <p class="card-description">KI-gestützte Verifizierung aller zentralen Aussagen gegen unabhängige Quellen</p>
</div> </div>
<div class="card-body" id="factchecks-content"></div> <div class="card-body" id="factchecks-content"></div>
</section> </section>
</div> </div>
<!-- CTA --> <!-- CTA -->
<section class="lagebild-cta"> </div>
<div class="cta-content"> </main>
<h3>Interesse an AegisSight Monitor?</h3>
<p>Erhalten Sie Echtzeit-Lagebilder für Ihre Organisation mit KI-gestützter Analyse und Faktencheck.</p> <!-- Footer -->
<a href="mailto:info@aegis-sight.de" class="cta-button">Kontakt aufnehmen</a> <footer class="footer">
</div> <div class="container">
</section> <div class="footer-content">
</div> <div class="footer-section">
</main> <h4 data-translate="footerCompanyTitle">AegisSight UG (haftungsbeschränkt)</h4>
<p data-translate="footerCompanyAddress1">Gladbacher Strasse 3-5</p>
<!-- Footer --> <p data-translate="footerCompanyAddress2">40764 Langenfeld</p>
<footer class="footer"> </div>
<div class="container"> <div class="footer-section">
<div class="footer-content"> <h4 data-translate="footerNavTitle">Navigation</h4>
<div class="footer-section"> <ul>
<h4 data-translate="footerCompanyTitle">AegisSight UG (haftungsbeschränkt)</h4> <li><a href="/" data-translate="footerNavHome">Startseite</a></li>
<p data-translate="footerCompanyAddress1">Gladbacher Strasse 3-5</p> <li><a href="/#about" data-translate="footerNavAbout">Über uns</a></li>
<p data-translate="footerCompanyAddress2">40764 Langenfeld</p> <li><a href="/#products" data-translate="footerNavProducts">Lösungen</a></li>
</div> </ul>
<div class="footer-section"> </div>
<h4 data-translate="footerNavTitle">Navigation</h4> <div class="footer-section">
<ul> <h4 data-translate="footerLegalTitle">Rechtliches</h4>
<li><a href="/" data-translate="footerNavHome">Startseite</a></li> <ul>
<li><a href="/#about" data-translate="footerNavAbout">Über uns</a></li> <li><a href="/impressum.html" data-translate="footerImprint">Impressum</a></li>
<li><a href="/#products" data-translate="footerNavProducts">Lösungen</a></li> <li><a href="/datenschutz.html" data-translate="footerPrivacy">Datenschutz</a></li>
</ul> </ul>
</div> </div>
<div class="footer-section"> <div class="footer-section">
<h4 data-translate="footerLegalTitle">Rechtliches</h4> <h4 data-translate="footerContactTitle">Kontakt</h4>
<ul> <p>info@aegis-sight.de</p>
<li><a href="/impressum.html" data-translate="footerImprint">Impressum</a></li> </div>
<li><a href="/datenschutz.html" data-translate="footerPrivacy">Datenschutz</a></li> </div>
</ul> <p class="copyright">&copy; 2026 AegisSight UG (haftungsbeschränkt). Alle Rechte vorbehalten.</p>
</div> </div>
<div class="footer-section"> </footer>
<h4 data-translate="footerContactTitle">Kontakt</h4>
<p>info@aegis-sight.de</p> <!-- Scripts -->
</div> <script src="../js/config.js"></script>
</div> <script src="../js/translations.js"></script>
<p class="copyright">&copy; 2026 AegisSight UG (haftungsbeschränkt). Alle Rechte vorbehalten.</p> <script src="../js/mobile-nav.js"></script>
</div> <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
</footer> <script src="lagebild.js"></script>
</body>
<!-- Scripts --> </html>
<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>

108
lagebild/lagebild.css
Datei anzeigen

@@ -941,46 +941,98 @@
word-break: break-all; word-break: break-all;
} }
/* ---------- CTA Section ---------- */ /* ---------- Floating CTA Pill ---------- */
.lagebild-cta { .floating-cta {
margin-top: 2rem; position: fixed;
text-align: center; bottom: 24px;
left: 50%;
transform: translateX(-50%) translateY(100px);
display: flex;
align-items: center;
gap: 16px;
background: rgba(21, 29, 46, 0.92);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(200, 168, 81, 0.25);
border-radius: 50px;
padding: 10px 14px 10px 24px;
z-index: 1000;
opacity: 0;
transition: opacity 0.4s, transform 0.4s;
pointer-events: none;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
} }
.cta-content { .floating-cta.visible {
background: linear-gradient(135deg, #111B30 0%, #1a2744 50%, #0f1a2e 100%); opacity: 1;
border: 1px solid var(--lb-border); transform: translateX(-50%) translateY(0);
border-radius: var(--radius-sm, 4px); pointer-events: auto;
padding: 48px 32px;
color: #fff;
} }
.cta-content h3 { .floating-cta.dismissed {
font-size: 1.5rem; opacity: 0;
font-weight: 700; transform: translateX(-50%) translateY(100px);
margin: 0 0 0.8rem; pointer-events: none;
color: #fff;
} }
.cta-content p { .floating-cta-text {
font-size: 1rem; font-size: 0.88rem;
color: rgba(255, 255, 255, 0.6); color: var(--lb-text-sec);
margin: 0 0 1.5rem; font-weight: 500;
max-width: 500px; white-space: nowrap;
margin-left: auto;
margin-right: auto;
} }
.cta-button { .floating-cta-btn {
display: inline-block; display: inline-block;
background: var(--lb-accent); background: var(--lb-accent);
color: #0a0f1c; color: #0a0f1c;
padding: 12px 32px; padding: 8px 20px;
border-radius: var(--radius-sm, 4px); border-radius: 50px;
font-weight: 700; font-weight: 700;
text-decoration: none; text-decoration: none;
font-size: 0.95rem; font-size: 0.85rem;
white-space: nowrap;
transition: background 0.2s, transform 0.2s; transition: background 0.2s, transform 0.2s;
} }
.cta-button:hover { .floating-cta-btn:hover {
background: var(--lb-accent-hover); background: var(--lb-accent-hover);
transform: translateY(-2px); transform: scale(1.03);
}
.floating-cta-close {
background: none;
border: none;
color: var(--lb-text-sec);
font-size: 1.3rem;
cursor: pointer;
padding: 0 4px;
line-height: 1;
transition: color 0.2s;
font-family: inherit;
}
.floating-cta-close:hover {
color: var(--lb-text);
}
@media (max-width: 768px) {
.floating-cta {
left: 12px;
right: 12px;
transform: translateX(0) translateY(100px);
border-radius: 16px;
gap: 10px;
padding: 10px 12px 10px 16px;
}
.floating-cta.visible {
transform: translateX(0) translateY(0);
}
.floating-cta.dismissed {
transform: translateX(0) translateY(100px);
}
.floating-cta-text {
font-size: 0.8rem;
white-space: normal;
}
.floating-cta-btn {
font-size: 0.8rem;
padding: 7px 14px;
flex-shrink: 0;
}
} }
/* ---------- Loading Skeleton ---------- */ /* ---------- Loading Skeleton ---------- */

27
lagebild/lagebild.js
Datei anzeigen

@@ -41,6 +41,7 @@ var Lagebild = {
this.initTabs(); this.initTabs();
this.initLangToggle(); this.initLangToggle();
this.initScrollReveal(); this.initScrollReveal();
this.initFloatingCta();
} catch (e) { } catch (e) {
console.error('Lagebild laden fehlgeschlagen:', e); console.error('Lagebild laden fehlgeschlagen:', e);
this.showError(); this.showError();
@@ -576,6 +577,32 @@ var Lagebild = {
}); });
}, },
/* ===== FLOATING CTA ===== */
initFloatingCta: function() {
var cta = document.createElement('div');
cta.className = 'floating-cta';
cta.innerHTML = '<span class="floating-cta-text">AegisSight Monitor f\u00fcr Ihre Organisation</span>'
+ '<a href="mailto:info@aegis-sight.de" class="floating-cta-btn">Kontakt aufnehmen \u2192</a>'
+ '<button class="floating-cta-close" aria-label="Schlie\u00dfen">&times;</button>';
document.body.appendChild(cta);
// Show after scrolling past hero
var shown = false;
window.addEventListener('scroll', function() {
if (shown) return;
if (window.scrollY > 400) {
cta.classList.add('visible');
shown = true;
}
});
// Close button
cta.querySelector('.floating-cta-close').addEventListener('click', function(e) {
e.preventDefault();
cta.classList.add('dismissed');
});
},
/* ===== SCROLL REVEAL ===== */ /* ===== SCROLL REVEAL ===== */
initScrollReveal: function() { initScrollReveal: function() {
var cards = document.querySelectorAll('.content-card, .lagebild-cta'); var cards = document.querySelectorAll('.content-card, .lagebild-cta');