diff --git a/lagebild/index.html b/lagebild/index.html index 1857d04..9b931f4 100644 --- a/lagebild/index.html +++ b/lagebild/index.html @@ -1,196 +1,189 @@ - - - - - - Lagebild Irankonflikt - AegisSight - - - - - - - - - - - - - - -
- - -
-
-
-
- - LIVE-LAGEBILD -
-

LAGEBILD

-

- - -
-
-
- - -
-
-
-
-
-
-
- - - - -
-
-
- - -
-
- -
-
-
-

Lagebild

- -
-
-
-
-
-
-
-
- -
-
- - -
-
-
-

Quellen & Quellenberichte

-

Alle vom AegisSight Monitor aggregierten Quellen und Artikel

-
-
-
-

Alle Artikel

-
-
-
-
- - -
-
-
-

Karte

-

Geografische Einordnung der Meldungen

-
-
-
-
-
-
- - -
-
-
-

Faktenchecks

-

KI-gestützte Verifizierung aller zentralen Aussagen gegen unabhängige Quellen

-
-
-
-
- - -
-
-

Interesse an AegisSight Monitor?

-

Erhalten Sie Echtzeit-Lagebilder für Ihre Organisation mit KI-gestützter Analyse und Faktencheck.

- Kontakt aufnehmen -
-
-
-
- - - - - - - - - - - - + + + + + + Lagebild Irankonflikt - AegisSight + + + + + + + + + + + + + + +
+ + +
+
+
+
+ + LIVE-LAGEBILD +
+

LAGEBILD

+

+ + +
+
+
+ + +
+
+
+
+
+
+
+ + + + +
+
+
+ + +
+
+ +
+
+
+

Lagebild

+ +
+
+
+
+
+
+
+
+ +
+
+ + +
+
+
+

Quellen & Quellenberichte

+

Alle vom AegisSight Monitor aggregierten Quellen und Artikel

+
+
+
+

Alle Artikel

+
+
+
+
+ + +
+
+
+

Karte

+

Geografische Einordnung der Meldungen

+
+
+
+
+
+
+ + +
+
+
+

Faktenchecks

+

KI-gestützte Verifizierung aller zentralen Aussagen gegen unabhängige Quellen

+
+
+
+
+ + +
+
+ + + + + + + + + + + + diff --git a/lagebild/lagebild.css b/lagebild/lagebild.css index 70e3eb0..67148a3 100644 --- a/lagebild/lagebild.css +++ b/lagebild/lagebild.css @@ -941,46 +941,98 @@ word-break: break-all; } -/* ---------- CTA Section ---------- */ -.lagebild-cta { - margin-top: 2rem; - text-align: center; +/* ---------- Floating CTA Pill ---------- */ +.floating-cta { + position: fixed; + 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 { - background: linear-gradient(135deg, #111B30 0%, #1a2744 50%, #0f1a2e 100%); - border: 1px solid var(--lb-border); - border-radius: var(--radius-sm, 4px); - padding: 48px 32px; - color: #fff; +.floating-cta.visible { + opacity: 1; + transform: translateX(-50%) translateY(0); + pointer-events: auto; } -.cta-content h3 { - font-size: 1.5rem; - font-weight: 700; - margin: 0 0 0.8rem; - color: #fff; +.floating-cta.dismissed { + opacity: 0; + transform: translateX(-50%) translateY(100px); + pointer-events: none; } -.cta-content p { - font-size: 1rem; - color: rgba(255, 255, 255, 0.6); - margin: 0 0 1.5rem; - max-width: 500px; - margin-left: auto; - margin-right: auto; +.floating-cta-text { + font-size: 0.88rem; + color: var(--lb-text-sec); + font-weight: 500; + white-space: nowrap; } -.cta-button { +.floating-cta-btn { display: inline-block; background: var(--lb-accent); color: #0a0f1c; - padding: 12px 32px; - border-radius: var(--radius-sm, 4px); + padding: 8px 20px; + border-radius: 50px; font-weight: 700; text-decoration: none; - font-size: 0.95rem; + font-size: 0.85rem; + white-space: nowrap; transition: background 0.2s, transform 0.2s; } -.cta-button:hover { +.floating-cta-btn: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 ---------- */ diff --git a/lagebild/lagebild.js b/lagebild/lagebild.js index 1c23ea3..0e5904c 100644 --- a/lagebild/lagebild.js +++ b/lagebild/lagebild.js @@ -41,6 +41,7 @@ var Lagebild = { this.initTabs(); this.initLangToggle(); this.initScrollReveal(); + this.initFloatingCta(); } catch (e) { console.error('Lagebild laden fehlgeschlagen:', e); this.showError(); @@ -576,6 +577,32 @@ var Lagebild = { }); }, + /* ===== FLOATING CTA ===== */ + initFloatingCta: function() { + var cta = document.createElement('div'); + cta.className = 'floating-cta'; + cta.innerHTML = 'AegisSight Monitor f\u00fcr Ihre Organisation' + + 'Kontakt aufnehmen \u2192' + + ''; + 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 ===== */ initScrollReveal: function() { var cards = document.querySelectorAll('.content-card, .lagebild-cta');