diff --git a/vorschau/css/style.css b/vorschau/css/style.css index ec90342..641555e 100644 --- a/vorschau/css/style.css +++ b/vorschau/css/style.css @@ -63,10 +63,8 @@ a { color:inherit; text-decoration:none; } /* ==================== HERO ==================== */ .hero { position:relative; min-height:88vh; display:flex; align-items:center; padding-top:var(--nav-height); overflow:hidden; background:var(--navy); clip-path:polygon(0 0, 100% 0, 100% calc(100% - 60px), 50% 100%, 0 calc(100% - 60px)); margin-bottom:-60px; z-index:1; } -.hero-video-container { position:absolute; inset:0; z-index:0; } -.hero-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 3s ease; } -.hero-video.active { opacity:1; } -.hero-overlay { position:absolute; inset:0; background:linear-gradient(135deg,rgba(10,24,50,0.82) 0%,rgba(10,24,50,0.65) 50%,rgba(10,24,50,0.75) 100%); z-index:1; } + +.hero-overlay { position:absolute; inset:0; background:linear-gradient(135deg,rgba(10,24,50,0.95) 0%,rgba(19,40,68,0.98) 50%,rgba(10,24,50,0.95) 100%); z-index:1; } .hero-content { position:relative; z-index:2; max-width:700px; padding:80px 24px; color:var(--white); } .hero-title { font-size:3.4rem; font-weight:700; line-height:1.1; margin-bottom:20px; letter-spacing:-0.02em; color:var(--white); } @@ -75,6 +73,68 @@ a { color:inherit; text-decoration:none; } .hero-sub { font-size:0.95rem; color:rgba(255,255,255,0.55); line-height:1.7; margin-bottom:36px; } .hero-cta { display:flex; gap:16px; flex-wrap:wrap; } + +/* ==================== HERO SLIDER ==================== */ +.hero-brand { margin-bottom:28px; } +.hero-tagline { font-size:1.05rem; font-weight:300; color:rgba(255,255,255,0.6); margin-top:8px; } + +.hero-slider { position:relative; min-height:280px; } +.hero-slide { position:absolute; top:0; left:0; width:100%; opacity:0; transform:translateY(12px); transition:opacity 0.6s ease, transform 0.6s ease; pointer-events:none; visibility:hidden; } +.hero-slide.active { position:relative; opacity:1; transform:translateY(0); pointer-events:auto; visibility:visible; } +.hero-slide.exiting { opacity:0; transform:translateY(-12px); transition:opacity 0.4s ease, transform 0.4s ease; } + +.hero-slide-inner { display:flex; gap:40px; align-items:flex-start; } +.hero-slide-text-col { flex:1; min-width:0; } +.hero-slide-media-col { flex:0 0 360px; display:none; } +.hero-slide-media-col:not(:empty) { display:block; } +.hero-slide-media-col img { width:100%; height:auto; border-radius:var(--radius-lg); box-shadow:0 8px 32px rgba(0,0,0,0.3); } + +.hero-slide-label { display:inline-block; padding:4px 14px; border-radius:20px; font-size:0.72rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; background:var(--gold); color:var(--navy); margin-bottom:14px; } +.hero-slide-headline { font-size:2rem; font-weight:700; line-height:1.15; margin-bottom:16px; color:var(--white); letter-spacing:-0.01em; } +.hero-slide-text { font-size:1.05rem; font-weight:300; line-height:1.65; color:rgba(255,255,255,0.8); margin-bottom:12px; max-width:640px; } +.hero-slide-example { font-size:0.88rem; font-weight:400; line-height:1.5; color:var(--gold); opacity:0.85; margin-bottom:24px; max-width:640px; padding-left:14px; border-left:2px solid rgba(200,168,81,0.4); } +.hero-slide-cta { display:flex; gap:16px; flex-wrap:wrap; } +.hero-slide-cta .btn-placeholder { opacity:0.5; cursor:default; border-style:dashed; pointer-events:none; } + +.hero-slider-nav { display:flex; align-items:center; gap:20px; margin-top:32px; } +.hero-slider-dots { display:flex; gap:10px; } +.hero-dot { width:10px; height:10px; border-radius:50%; border:2px solid var(--gold); background:transparent; cursor:pointer; transition:all 0.3s; padding:0; } +.hero-dot.active { background:var(--gold); } +.hero-slider-arrows { display:flex; gap:8px; margin-left:auto; } +.hero-arrow { width:36px; height:36px; border-radius:50%; border:1px solid rgba(255,255,255,0.3); background:transparent; color:var(--white); font-size:1rem; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all 0.2s; } +.hero-arrow:hover { border-color:var(--gold); color:var(--gold); } + + +/* ==================== HERO SLIDER ==================== */ +.hero-brand { margin-bottom:28px; } +.hero-tagline { font-size:1.05rem; font-weight:300; color:rgba(255,255,255,0.6); margin-top:8px; } + +.hero-slider { position:relative; min-height:280px; } +.hero-slide { position:absolute; top:0; left:0; width:100%; opacity:0; transform:translateY(12px); transition:opacity 0.6s ease, transform 0.6s ease; pointer-events:none; visibility:hidden; } +.hero-slide.active { position:relative; opacity:1; transform:translateY(0); pointer-events:auto; visibility:visible; } +.hero-slide.exiting { opacity:0; transform:translateY(-12px); transition:opacity 0.4s ease, transform 0.4s ease; } + +.hero-slide-inner { display:flex; gap:40px; align-items:flex-start; } +.hero-slide-text-col { flex:1; min-width:0; } +.hero-slide-media-col { flex:0 0 360px; display:none; } +.hero-slide-media-col:not(:empty) { display:block; } +.hero-slide-media-col img { width:100%; height:auto; border-radius:var(--radius-lg); box-shadow:0 8px 32px rgba(0,0,0,0.3); } + +.hero-slide-label { display:inline-block; padding:4px 14px; border-radius:20px; font-size:0.72rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; background:var(--gold); color:var(--navy); margin-bottom:14px; } +.hero-slide-headline { font-size:2rem; font-weight:700; line-height:1.15; margin-bottom:16px; color:var(--white); letter-spacing:-0.01em; } +.hero-slide-text { font-size:1.05rem; font-weight:300; line-height:1.65; color:rgba(255,255,255,0.8); margin-bottom:12px; max-width:640px; } +.hero-slide-example { font-size:0.88rem; font-weight:400; line-height:1.5; color:var(--gold); opacity:0.85; margin-bottom:24px; max-width:640px; padding-left:14px; border-left:2px solid rgba(200,168,81,0.4); } +.hero-slide-cta { display:flex; gap:16px; flex-wrap:wrap; } +.hero-slide-cta .btn-placeholder { opacity:0.5; cursor:default; border-style:dashed; pointer-events:none; } + +.hero-slider-nav { display:flex; align-items:center; gap:20px; margin-top:32px; } +.hero-slider-dots { display:flex; gap:10px; } +.hero-dot { width:10px; height:10px; border-radius:50%; border:2px solid var(--gold); background:transparent; cursor:pointer; transition:all 0.3s; padding:0; } +.hero-dot.active { background:var(--gold); } +.hero-slider-arrows { display:flex; gap:8px; margin-left:auto; } +.hero-arrow { width:36px; height:36px; border-radius:50%; border:1px solid rgba(255,255,255,0.3); background:transparent; color:var(--white); font-size:1rem; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all 0.2s; } +.hero-arrow:hover { border-color:var(--gold); color:var(--gold); } + /* ==================== BUTTONS ==================== */ .btn { display:inline-flex; align-items:center; justify-content:center; padding:12px 28px; border-radius:var(--radius); font-family:inherit; font-size:0.95rem; font-weight:600; cursor:pointer; transition:all 0.2s; border:2px solid transparent; text-decoration:none; } .btn-primary { background:var(--gold); color:var(--navy); border-color:var(--gold); } @@ -264,7 +324,7 @@ a { color:inherit; text-decoration:none; } .hero-title { font-size:2.8rem; } .section { padding:64px 0; } .workflow-connector { width:40px; } - + .hero-slide-media-col { flex:0 0 280px; } } @media(max-width:768px) { @@ -282,6 +342,14 @@ a { color:inherit; text-decoration:none; } .workflow-step { max-width:100%; padding:16px 0; } .hero-cta { flex-direction:column; } .hero-cta .btn { width:100%; } + .hero-slider { min-height:320px; } + .hero-slide-headline { font-size:1.5rem; } + .hero-slide-text { font-size:0.95rem; } + .hero-slide-inner { flex-direction:column; gap:20px; } + .hero-slide-media-col { flex:none; width:100%; } + .hero-slider-arrows { display:none; } + .hero-slide-cta { flex-direction:column; } + .hero-slide-cta .btn { width:100%; } .footer-content { flex-direction:column; text-align:center; gap:16px; } #map-container { height:300px; } diff --git a/vorschau/index.html b/vorschau/index.html index c3c95be..370d288 100644 --- a/vorschau/index.html +++ b/vorschau/index.html @@ -78,25 +78,112 @@
-
- - - -
-

AegisSight Monitor

-

KI-gestützte Echtzeit-Lagebilder aus offenen Quellen,
vollautomatisch.

-

Aggregiert, analysiert und verifiziert Informationen aus öffentlich zugänglichen Quellen.

-
- Live-Demo ansehen - +
+

AegisSight Monitor

+

KI-gestützte Echtzeit-Lagebilder aus offenen Quellen, vollautomatisch.

+
+ +
+ +
+
+
+ Echtzeit-Monitoring +

Lagebilder in Echtzeit. Vollautomatisch.

+

Der AegisSight Monitor überwacht hunderte Quellen rund um die Uhr und erstellt strukturierte Lagebilder, ohne manuellen Aufwand. Neue Entwicklungen werden in Minuten erfasst, analysiert und eingeordnet. Sie entscheiden, was überwacht wird, der Monitor liefert das Lagebild.

+

Live-Beispiel: Der Iran-Konflikt wird mit über 14.900 Artikeln aus 375 Quellen kontinuierlich überwacht.

+
+ Live-Beispiel ansehen + +
+
+
+
+
+ + +
+
+
+ Faktencheck +

Jede Behauptung geprüft. Automatisch.

+

Kernaussagen werden gegen unabhängige Quellen verifiziert und mit einem Verifikationsstatus versehen. Widersprechen sich Quellen, wird das transparent dargestellt. Wenn neue Belege auftauchen, aktualisiert sich die Bewertung. Keine blinden Flecken, systematische Verifikation.

+

Im Live-Lagebild zum Iran-Konflikt wurden bisher über 1.600 Faktenchecks automatisch durchgeführt.

+
+ Faktencheck ansehen + +
+
+
+
+
+ + +
+
+
+ KI-Recherche +

Umfassende Recherche in Minuten statt Tagen.

+

Definieren Sie ein Thema, der Monitor recherchiert, strukturiert und belegt vollautomatisch. Quellenbasierte Analyse mit Faktenprüfung, kein Copy-Paste aus Suchmaschinen. Das Ergebnis: ein vollständiges Dossier mit Quellenbelegen und Faktenchecks.

+

Beispiel: Ein Dossier zur rechtlichen Lage von Deepfakes in Deutschland, 121 Artikel aus 90 Quellen, automatisch erstellt.

+
+ Recherche-Beispiel ansehen + +
+
+
+
+
+ + +
+
+
+ Globale Abdeckung +

Dutzende Sprachen. Hunderte Quellen. Null blinde Flecken.

+

Arabisch, Persisch, Hebräisch, Russisch, Chinesisch: Der Monitor verarbeitet Quellen, die den meisten Analystenteams sprachlich verschlossen bleiben. Automatische Übersetzung, Kontextanalyse und Einordnung. Globale Abdeckung ohne globale Personalkosten.

+

Im Iran-Konflikt werden Primärquellen in Farsi, Arabisch und Hebräisch direkt ausgewertet.

+
+ Live-Beispiel ansehen + +
+
+
+
+
+ + +
+
+
+ Flexibel einsetzbar +

Von der Grosslage bis zum Einzelthema.

+

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.

+

Weitere Live-Beispiele folgen in Kürze.

+
+ Demnächst verfügbar + +
+
+
+
+
+
+ +
+
+ + + + + +
+
+ + +
diff --git a/vorschau/js/app.js b/vorschau/js/app.js index 5d31d50..1c23ec0 100644 --- a/vorschau/js/app.js +++ b/vorschau/js/app.js @@ -41,35 +41,86 @@ }); }); - /* ==================== HERO VIDEOS ==================== */ - var videos = document.querySelectorAll('.hero-video'); - var currentVideo = 0; - var rotationTimer; + /* ==================== HERO SLIDER ==================== */ + var heroSlides = document.querySelectorAll('.hero-slide'); + var heroDots = document.querySelectorAll('.hero-dot'); + var heroCurrentSlide = 0; + var heroTimer = null; + var HERO_INTERVAL = 8000; + var heroIsTransitioning = false; - function switchVideo() { - videos[currentVideo].classList.remove('active'); - currentVideo = (currentVideo + 1) % videos.length; - var next = videos[currentVideo]; - next.currentTime = 0; - next.play().catch(function () {}); - next.classList.add('active'); + function heroGoTo(index) { + if (heroIsTransitioning || index === heroCurrentSlide || !heroSlides.length) return; + heroIsTransitioning = true; + + var oldIndex = heroCurrentSlide; + heroSlides[oldIndex].classList.add('exiting'); + heroSlides[oldIndex].classList.remove('active'); + if (heroDots[oldIndex]) heroDots[oldIndex].classList.remove('active'); + + setTimeout(function () { + heroSlides[oldIndex].classList.remove('exiting'); + heroCurrentSlide = index; + heroSlides[heroCurrentSlide].classList.add('active'); + if (heroDots[heroCurrentSlide]) heroDots[heroCurrentSlide].classList.add('active'); + heroIsTransitioning = false; + }, 400); } - function startRotation() { - rotationTimer = setInterval(switchVideo, 12000); + function heroNext() { + heroGoTo((heroCurrentSlide + 1) % heroSlides.length); + } + + function heroPrev() { + heroGoTo((heroCurrentSlide - 1 + heroSlides.length) % heroSlides.length); + } + + function heroStartAutoplay() { + heroStopAutoplay(); + heroTimer = setInterval(heroNext, HERO_INTERVAL); + } + + function heroStopAutoplay() { + if (heroTimer) { clearInterval(heroTimer); heroTimer = null; } + } + + heroDots.forEach(function (dot, i) { + dot.addEventListener('click', function () { + heroGoTo(i); + heroStartAutoplay(); + }); + }); + + var heroPrevBtn = document.querySelector('.hero-arrow-prev'); + var heroNextBtn = document.querySelector('.hero-arrow-next'); + if (heroPrevBtn) heroPrevBtn.addEventListener('click', function () { heroPrev(); heroStartAutoplay(); }); + if (heroNextBtn) heroNextBtn.addEventListener('click', function () { heroNext(); heroStartAutoplay(); }); + + var heroSlider = document.querySelector('.hero-slider'); + if (heroSlider) { + heroSlider.addEventListener('mouseenter', heroStopAutoplay); + heroSlider.addEventListener('mouseleave', heroStartAutoplay); + + var heroTouchStartX = 0; + heroSlider.addEventListener('touchstart', function (e) { + heroTouchStartX = e.changedTouches[0].screenX; + heroStopAutoplay(); + }, { passive: true }); + heroSlider.addEventListener('touchend', function (e) { + var diff = e.changedTouches[0].screenX - heroTouchStartX; + if (Math.abs(diff) > 50) { + if (diff < 0) heroNext(); else heroPrev(); + } + heroStartAutoplay(); + }, { passive: true }); } document.addEventListener('visibilitychange', function () { - if (document.hidden) { - clearInterval(rotationTimer); - videos.forEach(function (v) { v.pause(); }); - } else { - videos.forEach(function (v) { if (v.classList.contains('active')) v.play().catch(function () {}); }); - startRotation(); - } + if (document.hidden) { heroStopAutoplay(); } + else { heroStartAutoplay(); } }); - if (videos.length > 1) startRotation(); + if (heroSlides.length > 1) heroStartAutoplay(); /* ==================== MAP STATE ==================== */ var mapInstance = null;