Archiv: Letzter Stand der Webseite vor Promotion der Vorschau
Vollstaendiger Snapshot des Live-Standes von /opt/v2-Docker/aegis-website/html am 2026-04-26, kurz bevor die Inhalte aus /vorschau/ in den Root verschoben und die alte Webseite ausgemustert wurde. Dient als historische Referenz; nicht fuer aktive Entwicklung gedacht. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Dieser Commit ist enthalten in:
claude-dev
475
vorschau/css/style.css
Normale Datei
475
vorschau/css/style.css
Normale Datei
@@ -0,0 +1,475 @@
|
||||
/* AegisSight Monitor - Product Page v2 (Light Mode) */
|
||||
|
||||
/* Fonts */
|
||||
@font-face { font-family:'Inter'; src:url('/assets/fonts/Inter-Regular.woff2') format('woff2'),url('/assets/fonts/Inter-Regular.ttf') format('truetype'); font-weight:400; font-display:swap; }
|
||||
@font-face { font-family:'Inter'; src:url('/assets/fonts/Inter-SemiBold.woff2') format('woff2'),url('/assets/fonts/Inter-SemiBold.ttf') format('truetype'); font-weight:600; font-display:swap; }
|
||||
@font-face { font-family:'Inter'; src:url('/assets/fonts/Inter-Bold.woff2') format('woff2'),url('/assets/fonts/Inter-Bold.ttf') format('truetype'); font-weight:700; font-display:swap; }
|
||||
@font-face { font-family:'Inter'; src:url('/assets/fonts/Inter-Light.woff2') format('woff2'),url('/assets/fonts/Inter-Light.ttf') format('truetype'); font-weight:300; font-display:swap; }
|
||||
|
||||
:root {
|
||||
--navy: #0A1832;
|
||||
--navy-light: #132844;
|
||||
--gold: #C8A851;
|
||||
--gold-light: #D4B96A;
|
||||
--gold-dark: #B39645;
|
||||
--white: #FAFBFD;
|
||||
--base: #F5F7FA;
|
||||
--alt: #EDF0F5;
|
||||
--alt-solid: #F0F3F7;
|
||||
--gray-100: #E4E8EE;
|
||||
--gray-200: #D0D5DE;
|
||||
--gray-400: #9AA5B4;
|
||||
--gray-600: #5A6478;
|
||||
--text: #2A2F3A;
|
||||
--text-light: #5A6478;
|
||||
--radius: 8px;
|
||||
--radius-lg: 12px;
|
||||
--shadow: 0 2px 12px rgba(10,24,50,0.06);
|
||||
--shadow-lg: 0 8px 32px rgba(10,24,50,0.1);
|
||||
--nav-height: 72px;
|
||||
}
|
||||
|
||||
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
|
||||
html { scroll-behavior:smooth; scroll-padding-top:var(--nav-height); }
|
||||
body { font-family:'Inter',system-ui,-apple-system,sans-serif; font-size:16px; line-height:1.6; color:var(--text); background:var(--base); -webkit-font-smoothing:antialiased; }
|
||||
img { max-width:100%; height:auto; }
|
||||
a { color:inherit; text-decoration:none; }
|
||||
.container { max-width:1120px; margin:0 auto; padding:0 24px; }
|
||||
|
||||
/* ==================== NAV ==================== */
|
||||
.navbar { position:fixed; top:0; left:0; right:0; height:var(--nav-height); background:rgba(250,251,253,0.92); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); z-index:1000; transition:box-shadow 0.3s; }
|
||||
.navbar.scrolled { box-shadow:0 1px 16px rgba(10,24,50,0.08); }
|
||||
.nav-container { max-width:1120px; margin:0 auto; padding:0 24px; height:100%; display:flex; align-items:center; justify-content:space-between; }
|
||||
.nav-logo { display:flex; align-items:center; }
|
||||
.logo-img { height:36px; width:auto; }
|
||||
.nav-menu { list-style:none; display:flex; gap:32px; }
|
||||
.nav-menu a { font-size:0.9rem; font-weight:500; color:var(--navy); transition:color 0.2s; }
|
||||
.nav-menu a:hover { color:var(--gold); }
|
||||
|
||||
.mobile-menu-toggle { display:none; background:none; border:none; cursor:pointer; width:32px; height:24px; position:relative; flex-direction:column; justify-content:space-between; }
|
||||
.mobile-menu-toggle span { display:block; width:100%; height:2px; background:var(--navy); border-radius:2px; transition:transform 0.3s,opacity 0.3s; }
|
||||
.mobile-menu-toggle.active span:nth-child(1) { transform:rotate(45deg) translate(7px,7px); }
|
||||
.mobile-menu-toggle.active span:nth-child(2) { opacity:0; }
|
||||
.mobile-menu-toggle.active span:nth-child(3) { transform:rotate(-45deg) translate(7px,-7px); }
|
||||
|
||||
.mobile-menu { position:fixed; top:var(--nav-height); left:0; right:0; background:var(--white); padding:16px 24px 24px; box-shadow:var(--shadow-lg); transform:translateY(-100%); opacity:0; transition:transform 0.3s,opacity 0.3s; z-index:999; pointer-events:none; }
|
||||
.mobile-menu.open { transform:translateY(0); opacity:1; pointer-events:all; }
|
||||
.mobile-menu ul { list-style:none; }
|
||||
.mobile-menu li { border-bottom:1px solid var(--gray-100); }
|
||||
.mobile-menu a { display:block; padding:14px 0; font-size:1rem; font-weight:500; color:var(--navy); }
|
||||
.mobile-overlay { position:fixed; inset:0; background:rgba(10,24,50,0.3); z-index:998; opacity:0; pointer-events:none; transition:opacity 0.3s; }
|
||||
.mobile-overlay.open { opacity:1; pointer-events:all; }
|
||||
|
||||
/* ==================== HERO (Full-Video mit Endcard) ==================== */
|
||||
.hero { position:relative; min-height:88vh; 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; }
|
||||
.gold { color:var(--gold); font-weight:600; }
|
||||
|
||||
/* Overlay-Layer für Text + Navigation */
|
||||
.hero-content { position:absolute; inset:0; z-index:4; color:var(--white); pointer-events:none; }
|
||||
.hero-content > * { pointer-events:auto; }
|
||||
|
||||
/* Brand (Titel + Tagline): nur während Endcard sichtbar, in Hero-Mitte */
|
||||
.hero-brand { position:absolute; top:50%; left:0; right:0; padding:0 24px; text-align:center; transform:translateY(-50%); opacity:0; transition:opacity 0.5s ease; pointer-events:none; }
|
||||
.hero.endcard .hero-brand { opacity:1; transition-delay:0.35s; pointer-events:auto; }
|
||||
.hero-title { font-size:3.2rem; font-weight:700; line-height:1.1; letter-spacing:-0.02em; color:var(--white); margin:0; }
|
||||
.hero-tagline { font-size:1.2rem; font-weight:300; color:rgba(255,255,255,0.9); margin-top:12px; }
|
||||
|
||||
/* ==================== HERO SLIDER ==================== */
|
||||
/* Slider: unter der Navbar beginnen, oberhalb der Dots-Zone enden (60px Reserve fuer Dots) */
|
||||
.hero-slider { position:absolute; top:var(--nav-height); left:0; right:0; bottom:60px; z-index:1; }
|
||||
.hero-slide { position:absolute; inset:0; opacity:0; transition:opacity 0.6s ease; pointer-events:none; }
|
||||
.hero-slide.active { opacity:1; pointer-events:auto; }
|
||||
.hero-slide.exiting { opacity:0; transition:opacity 0.4s ease; }
|
||||
|
||||
/* Video füllt den Slide (contain = komplett sichtbar, Navy-Letterbox) */
|
||||
.hero-slide-video { position:absolute; inset:0; overflow:hidden; transition:opacity 0.4s ease; }
|
||||
.hero-slide-video video { display:block; width:100%; height:100%; object-fit:contain; background:var(--navy); }
|
||||
/* Beim Endcard-State Video ausfaden */
|
||||
.hero-slide.ended .hero-slide-video { opacity:0; }
|
||||
|
||||
/* Per-Slide-Bottom (Beispieltext + CTA): nur während Endcard sichtbar, unter dem Titel */
|
||||
.hero-slide-bottom { position:absolute; left:0; right:0; bottom:140px; padding:0 32px; text-align:center; opacity:0; transition:opacity 0.5s ease; pointer-events:none; }
|
||||
.hero-slide.ended .hero-slide-bottom { opacity:1; transition-delay:0.5s; pointer-events:auto; }
|
||||
.hero-slide-example { font-size:1.15rem; font-weight:400; line-height:1.55; color:rgba(255,255,255,0.9); margin:0 auto 24px; max-width:820px; padding:0; border:0; }
|
||||
.hero-slide-cta { display:flex; gap:16px; flex-wrap:wrap; justify-content:center; }
|
||||
.hero-slide-cta .btn-placeholder { opacity:0.5; cursor:default; border-style:dashed; pointer-events:none; }
|
||||
|
||||
/* Slider-Navigation: Dots zentriert ganz unten im Chevron-Band, ausserhalb des Video-Bereichs. */
|
||||
.hero-slider-nav { position:absolute; left:0; right:0; bottom:22px; display:flex; justify-content:center; padding:0 24px; pointer-events:none; z-index:5; }
|
||||
.hero-slider-dots { display:flex; gap:12px; pointer-events:auto; }
|
||||
.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 { /* Container - Pfeile positionieren sich absolut relativ zu hero-content */ }
|
||||
.hero-arrow { position:absolute; top:50%; transform:translateY(-50%); width:48px; height:48px; border-radius:50%; border:1px solid rgba(255,255,255,0.35); background:rgba(10,24,50,0.35); color:var(--white); font-size:1.2rem; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all 0.2s; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); z-index:5; }
|
||||
.hero-arrow:hover { border-color:var(--gold); color:var(--gold); background:rgba(10,24,50,0.6); }
|
||||
.hero-arrow-prev { left:24px; }
|
||||
.hero-arrow-next { right:24px; }
|
||||
|
||||
/* Altes hero-overlay nicht mehr verwendet */
|
||||
.hero-overlay { display:none; }
|
||||
|
||||
/* ==================== 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); }
|
||||
.btn-primary:hover { background:var(--gold-dark); border-color:var(--gold-dark); }
|
||||
.btn-outline-light { background:transparent; color:var(--white); border-color:rgba(255,255,255,0.4); }
|
||||
.btn-outline-light:hover { background:rgba(255,255,255,0.1); border-color:var(--white); }
|
||||
.btn-outline { background:transparent; color:var(--navy); border-color:var(--navy); }
|
||||
.btn-outline:hover { background:var(--navy); color:var(--white); }
|
||||
.btn-lg { padding:16px 40px; font-size:1.05rem; }
|
||||
.btn-block { width:100%; }
|
||||
|
||||
/* ==================== SECTIONS ==================== */
|
||||
.section { padding:88px 0; }
|
||||
.section-base { background:var(--base); }
|
||||
.section-alt { background:var(--alt-solid); }
|
||||
.section-dark { background:var(--navy-light); color:var(--white); }
|
||||
|
||||
.section-title { font-size:2rem; font-weight:700; color:var(--navy); text-align:center; margin-bottom:16px; letter-spacing:-0.01em; }
|
||||
.section-dark .section-title { color:var(--white); }
|
||||
.section-subtitle-light { color:rgba(255,255,255,0.6); }
|
||||
.section-subtitle { font-size:1.05rem; color:var(--text-light); text-align:center; max-width:600px; margin:0 auto 48px; }
|
||||
|
||||
/* ==================== SECTION DIVIDERS ==================== */
|
||||
.divider { line-height:0; margin:0; overflow:hidden; }
|
||||
.divider svg { display:block; width:100%; height:auto; }
|
||||
.divider-chevron { background:var(--alt-solid); }
|
||||
.divider-chevron-dark { background:var(--navy); }
|
||||
.divider-diagonal { background:var(--base); }
|
||||
.divider-diagonal-dark { background:var(--base); }
|
||||
.divider-gradient-alt-to-base { height:40px; background:linear-gradient(to bottom, var(--alt-solid), var(--base)); }
|
||||
.divider-gradient-base-to-alt { height:60px; background:linear-gradient(to bottom, var(--base), var(--alt-solid)); }
|
||||
.divider-gradient-dark-to-base { height:80px; background:linear-gradient(to bottom, var(--navy), var(--base)); }
|
||||
.divider-gradient-dark-to-alt { height:60px; background:linear-gradient(to bottom, var(--navy), var(--alt-solid)); }
|
||||
|
||||
/* ==================== GRID ==================== */
|
||||
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
|
||||
#features .grid-3 { justify-items:center; }
|
||||
#features .grid-3 .feature-card:nth-last-child(-n+2):nth-child(3n+1) { grid-column: 1; }
|
||||
#features .grid-3 { display:flex; flex-wrap:wrap; justify-content:center; }
|
||||
#features .grid-3 .feature-card { width:calc(33.333% - 20px); }
|
||||
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
|
||||
|
||||
/* ==================== PROBLEM ==================== */
|
||||
.problem-card { text-align:center; padding:32px 20px; }
|
||||
.problem-icon { width:64px; height:64px; margin:0 auto 20px; display:flex; align-items:center; justify-content:center; background:var(--white); border-radius:50%; box-shadow:var(--shadow); }
|
||||
.problem-card h3 { font-size:1.1rem; font-weight:700; color:var(--navy); margin-bottom:10px; }
|
||||
.problem-card p { font-size:0.93rem; color:var(--text-light); line-height:1.6; }
|
||||
|
||||
/* Problem dark variant */
|
||||
.problem-card-dark { color:var(--white); }
|
||||
.problem-card-dark h3 { color:var(--white); }
|
||||
.problem-card-dark p { color:rgba(255,255,255,0.7); }
|
||||
.problem-icon-dark { background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.1); box-shadow:none; }
|
||||
.problem-icon-dark img { filter:brightness(0) invert(1); }
|
||||
|
||||
/* ==================== WORKFLOW ==================== */
|
||||
.workflow { display:flex; align-items:flex-start; justify-content:center; margin-top:56px; }
|
||||
.workflow-step { flex:1; max-width:300px; text-align:center; padding:0 24px; }
|
||||
.step-number { width:48px; height:48px; margin:0 auto 20px; display:flex; align-items:center; justify-content:center; background:var(--gold); color:var(--navy); font-size:1.2rem; font-weight:700; border-radius:50%; }
|
||||
.workflow-step h3 { font-size:1.1rem; font-weight:700; color:var(--navy); margin-bottom:10px; }
|
||||
.workflow-step p { font-size:0.93rem; color:var(--text-light); line-height:1.6; }
|
||||
.workflow-connector { width:60px; height:2px; background:var(--gold); margin-top:23px; flex-shrink:0; opacity:0.4; }
|
||||
|
||||
/* ==================== FEATURES ==================== */
|
||||
.feature-card { background:var(--white); border-radius:var(--radius-lg); padding:28px 24px; box-shadow:var(--shadow); transition:box-shadow 0.3s,transform 0.3s,border-color 0.3s,background 0.3s; border:1px solid transparent; }
|
||||
.feature-card:hover { box-shadow:var(--shadow-lg); transform:translateY(-3px); }
|
||||
.feature-icon { width:48px; height:48px; display:flex; align-items:center; justify-content:center; background:var(--alt-solid); border-radius:var(--radius); margin-bottom:14px; border:1px solid transparent; }
|
||||
.feature-card h3 { font-size:1rem; font-weight:700; color:var(--navy); margin-bottom:8px; }
|
||||
.feature-card p { font-size:0.88rem; color:var(--text-light); line-height:1.6; }
|
||||
|
||||
/* Features im dunklen Section-Kontext: Glasmorphism mit Gold-Akzent */
|
||||
.section-dark .feature-card { background:rgba(255,255,255,0.04); border-color:rgba(200,168,81,0.2); box-shadow:none; }
|
||||
.section-dark .feature-card:hover { border-color:rgba(200,168,81,0.5); background:rgba(255,255,255,0.06); transform:translateY(-3px); box-shadow:0 8px 24px rgba(0,0,0,0.3); }
|
||||
.section-dark .feature-card h3 { color:var(--white); }
|
||||
.section-dark .feature-card p { color:rgba(255,255,255,0.7); }
|
||||
.section-dark .feature-icon { background:rgba(200,168,81,0.15); border-color:rgba(200,168,81,0.3); }
|
||||
.section-dark .feature-icon img { filter:brightness(0) saturate(100%) invert(74%) sepia(49%) saturate(471%) hue-rotate(2deg) brightness(91%) contrast(83%); }
|
||||
|
||||
/* ==================== DEMOS SECTION ==================== */
|
||||
#demos { padding-top:48px; }
|
||||
|
||||
/* ==================== LIVE STATS BAR ==================== */
|
||||
.live-stats-bar { margin-bottom:40px; text-align:center; }
|
||||
.live-stats-title { font-size:1rem; font-weight:600; color:var(--gold); text-transform:uppercase; letter-spacing:0.1em; margin-bottom:16px; }
|
||||
.live-stats-row { display:flex; justify-content:center; gap:20px; flex-wrap:wrap; }
|
||||
.live-stat { text-align:center; background:var(--white); border-radius:var(--radius-lg); padding:20px 32px; box-shadow:var(--shadow); border:1px solid var(--gray-100); min-width:160px; }
|
||||
.live-stat-value { display:block; font-size:2.4rem; font-weight:700; color:var(--navy); line-height:1.1; letter-spacing:-0.02em; }
|
||||
.live-stat-label { display:block; font-size:0.8rem; color:var(--text-light); text-transform:uppercase; letter-spacing:0.08em; margin-top:4px; }
|
||||
|
||||
/* ==================== FEATURE HIGHLIGHT ==================== */
|
||||
.feature-statement { text-align:center; max-width:700px; margin:0 auto 48px; padding:0 24px; }
|
||||
.feature-statement-text { font-size:1.6rem; font-weight:700; color:var(--navy); line-height:1.35; margin-bottom:12px; letter-spacing:-0.01em; }
|
||||
.feature-statement-sub { font-size:1rem; color:var(--text-light); line-height:1.6; }
|
||||
.section-dark .feature-statement-text { color:var(--white); }
|
||||
.section-dark .feature-statement-sub { color:rgba(255,255,255,0.7); }
|
||||
@media(max-width:768px) { .feature-statement-text { font-size:1.3rem; } }
|
||||
|
||||
/* ==================== 3D CAROUSEL ==================== */
|
||||
.carousel-viewport { overflow-x:clip; overflow-y:visible; padding:20px 0; position:relative; }
|
||||
.carousel-track { display:flex; justify-content:center; position:relative; }
|
||||
.carousel-card { width:860px; flex-shrink:0; background:var(--white); border-radius:var(--radius-lg); padding:28px 24px; box-shadow:var(--shadow); position:absolute; display:flex; flex-direction:column; transition:all 0.6s cubic-bezier(0.4,0,0.2,1); cursor:pointer; transform-style:preserve-3d; }
|
||||
.carousel-card.active { position:relative; transform:none; z-index:3; opacity:1; }
|
||||
.carousel-card.left { position:absolute; left:0; top:0; transform:scale(0.75) translateX(-70%); z-index:1; opacity:0.45; }
|
||||
.carousel-card.right { position:absolute; right:0; top:0; transform:scale(0.75) translateX(70%); z-index:1; opacity:0.45; }
|
||||
.carousel-card.hidden { position:absolute; transform:scale(0.5); z-index:0; opacity:0; pointer-events:none; }
|
||||
|
||||
/* Carousel arrows */
|
||||
.carousel-arrow { position:absolute; top:50%; transform:translateY(-50%); z-index:10; width:44px; height:44px; border-radius:50%; border:2px solid var(--gray-200); background:var(--white); color:var(--navy); font-size:1.6rem; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all 0.2s; box-shadow:var(--shadow); line-height:1; }
|
||||
.carousel-arrow:hover { border-color:var(--gold); color:var(--gold); box-shadow:var(--shadow-lg); }
|
||||
.carousel-prev { left:8px; }
|
||||
.carousel-next { right:8px; }
|
||||
.carousel-nav { display:flex; justify-content:center; gap:10px; margin-top:24px; }
|
||||
.carousel-dot { width:10px; height:10px; border-radius:50%; border:2px solid var(--gold); background:transparent; cursor:pointer; transition:all 0.3s; padding:0; }
|
||||
.carousel-dot.active { background:var(--gold); }
|
||||
.card-live { border:2px solid var(--gold); box-shadow:0 4px 24px rgba(200,168,81,0.15); }
|
||||
.card-placeholder { border:2px dashed var(--gray-200); opacity:0.55; }
|
||||
.demo-badge { display:inline-block; padding:4px 14px; border-radius:20px; font-size:0.72rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; margin-bottom:14px; width:fit-content; background:var(--gold); color:var(--navy); }
|
||||
.badge-soon { background:var(--gray-100); color:var(--gray-400); }
|
||||
.demo-title { font-size:1.25rem; font-weight:700; color:var(--navy); margin-bottom:16px; }
|
||||
|
||||
|
||||
.demo-excerpt { margin-bottom:16px; }
|
||||
.excerpt-text { font-size:0.88rem; color:var(--text); line-height:1.65; }
|
||||
|
||||
.excerpt-text h2 { font-size:1.05rem; font-weight:700; color:var(--navy); margin:20px 0 8px; }
|
||||
.excerpt-text h3 { font-size:0.95rem; font-weight:600; color:var(--navy); margin:16px 0 6px; }
|
||||
.excerpt-text p { margin-bottom:10px; }
|
||||
.excerpt-text ul { margin:8px 0 12px 20px; }
|
||||
.excerpt-text li { margin-bottom:4px; font-size:0.88rem; color:var(--text); }
|
||||
.placeholder-title { color:var(--gray-400); }
|
||||
.placeholder-text { font-size:0.95rem; color:var(--gray-400); flex:1; display:flex; align-items:center; justify-content:center; min-height:180px; }
|
||||
|
||||
/* ==================== MAP ==================== */
|
||||
.map-section { margin-top:48px; }
|
||||
.map-title { font-size:1.1rem; font-weight:600; color:var(--navy); margin-bottom:16px; text-align:center; }
|
||||
.map-section { transition:opacity 0.3s; }
|
||||
.map-section.map-hidden #map-container { display:none; }
|
||||
.map-section.map-hidden .map-empty { display:flex!important; }
|
||||
.map-empty { display:none; align-items:center; justify-content:center; height:300px; border:2px dashed var(--gray-200); border-radius:var(--radius-lg); color:var(--gray-400); font-size:1rem; background:var(--white); }
|
||||
#map-container { height:420px; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow); border:1px solid var(--gray-100); }
|
||||
|
||||
/* Map pulse markers (exact lagebild style) */
|
||||
.pulse-marker-wrapper { position:relative; width:20px; height:20px; }
|
||||
.pulse-marker-ring { position:absolute; inset:0; border-radius:50%; border:2px solid; animation:mapPulseRing 2s infinite; opacity:0; }
|
||||
.pulse-marker-ring:nth-child(2) { animation-delay:1s; }
|
||||
@keyframes mapPulseRing { 0%{transform:scale(0.5);opacity:0} 30%{opacity:0.6} 100%{transform:scale(2.5);opacity:0} }
|
||||
.pulse-marker-dot { position:absolute; top:50%; left:50%; width:8px; height:8px; margin:-4px 0 0 -4px; border-radius:50%; animation:pulseDot 2s infinite; }
|
||||
@keyframes pulseDot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.5;transform:scale(0.7)} }
|
||||
/* Dark popup style */
|
||||
.leaflet-popup-content-wrapper { background:#151D2E!important; color:#E8ECF4!important; border:1px solid #1E2D45!important; border-radius:4px!important; box-shadow:0 4px 16px rgba(0,0,0,0.4)!important; }
|
||||
.leaflet-popup-tip { background:#151D2E!important; }
|
||||
.leaflet-popup-content { margin:10px 14px!important; font-size:0.85rem!important; }
|
||||
|
||||
/* ==================== TRUST ==================== */
|
||||
.trust-grid { margin-top:48px; }
|
||||
.trust-card { text-align:center; padding:24px 16px; }
|
||||
.trust-icon-wrap { height:56px; display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
|
||||
.trust-icon-wrap img { filter:brightness(0) invert(1); }
|
||||
.trust-icon-wrap.trust-flag img { filter:none; }
|
||||
.trust-card h3 { font-size:1.05rem; font-weight:700; margin-bottom:8px; }
|
||||
.trust-card p { font-size:0.88rem; opacity:0.7; line-height:1.5; }
|
||||
|
||||
/* ==================== CTA ==================== */
|
||||
.cta-container { text-align:center; max-width:600px; }
|
||||
.cta-text { font-size:1.1rem; color:var(--text-light); margin-bottom:32px; }
|
||||
.cta-email { font-size:0.9rem; color:var(--text-light); margin-top:16px; }
|
||||
|
||||
|
||||
/* ==================== CONTACT MODAL ==================== */
|
||||
.modal-overlay { position:fixed; inset:0; z-index:9999; background:rgba(10,24,50,0.6); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; padding:24px; }
|
||||
.modal-content { background:var(--white); border-radius:var(--radius-lg); padding:40px; max-width:520px; width:100%; position:relative; box-shadow:0 24px 64px rgba(10,24,50,0.3); max-height:90vh; overflow-y:auto; }
|
||||
.modal-close { position:absolute; top:16px; right:20px; background:none; border:none; font-size:1.8rem; color:var(--gray-400); cursor:pointer; line-height:1; }
|
||||
.modal-close:hover { color:var(--navy); }
|
||||
.modal-content h2 { font-size:1.5rem; font-weight:700; color:var(--navy); margin-bottom:8px; }
|
||||
.modal-sub { font-size:0.95rem; color:var(--text-light); margin-bottom:28px; }
|
||||
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
|
||||
.form-group { margin-bottom:16px; }
|
||||
.form-group label { display:block; font-size:0.82rem; font-weight:600; color:var(--navy); margin-bottom:6px; text-transform:uppercase; letter-spacing:0.04em; }
|
||||
.form-group input, .form-group textarea { width:100%; padding:10px 14px; border:1px solid var(--gray-200); border-radius:var(--radius); font-family:inherit; font-size:0.95rem; color:var(--text); background:var(--base); transition:border-color 0.2s; }
|
||||
.form-group input:focus, .form-group textarea:focus { outline:none; border-color:var(--gold); }
|
||||
.form-group textarea { resize:vertical; }
|
||||
.form-success { text-align:center; padding:40px 0; }
|
||||
.form-success p { font-size:1.05rem; color:var(--navy); font-weight:500; }
|
||||
@media(max-width:768px) { .form-row { grid-template-columns:1fr; } .modal-content { padding:28px 20px; } }
|
||||
/* ==================== FOOTER ==================== */
|
||||
.footer { background:var(--navy); color:rgba(255,255,255,0.7); padding:40px 0; font-size:0.85rem; }
|
||||
.footer-content { display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; padding-bottom:24px; border-bottom:1px solid rgba(255,255,255,0.1); }
|
||||
.footer-company { font-weight:600; color:var(--white); margin-bottom:4px; }
|
||||
.footer-links { display:flex; gap:24px; }
|
||||
.footer-links a { color:rgba(255,255,255,0.7); transition:color 0.2s; }
|
||||
.footer-links a:hover { color:var(--white); }
|
||||
.footer-copyright { text-align:center; font-size:0.8rem; opacity:0.5; }
|
||||
|
||||
/* ==================== RESPONSIVE ==================== */
|
||||
@media(max-width:1024px) {
|
||||
.grid-3 { grid-template-columns:repeat(2,1fr); }
|
||||
.grid-4 { grid-template-columns:repeat(2,1fr); }
|
||||
.hero-title { font-size:2.5rem; }
|
||||
.section { padding:64px 0; }
|
||||
.workflow-connector { width:40px; }
|
||||
}
|
||||
|
||||
@media(max-width:768px) {
|
||||
.nav-menu { display:none; }
|
||||
.mobile-menu-toggle { display:flex; }
|
||||
.grid-3,.grid-4 { grid-template-columns:1fr; gap:20px; }
|
||||
.hero { min-height:75vh; }
|
||||
.hero-brand { padding:0 20px; }
|
||||
.hero-title { font-size:1.9rem; }
|
||||
.hero-tagline { font-size:0.95rem; margin-top:8px; }
|
||||
.hero-slide-bottom { bottom:110px; padding:0 20px; }
|
||||
.hero-slide-example { font-size:0.95rem; margin-bottom:18px; }
|
||||
.hero-slide-cta { flex-direction:column; }
|
||||
.hero-slide-cta .btn { width:100%; }
|
||||
.hero-slider-nav { bottom:18px; }
|
||||
.hero-slider-arrows { display:none; }
|
||||
.section { padding:48px 0; }
|
||||
.section-title { font-size:1.6rem; }
|
||||
.workflow { flex-direction:column; align-items:center; gap:8px; }
|
||||
.workflow-connector { width:2px; height:32px; margin:0; }
|
||||
.workflow-step { max-width:100%; padding:16px 0; }
|
||||
.footer-content { flex-direction:column; text-align:center; gap:16px; }
|
||||
|
||||
#map-container { height:300px; }
|
||||
#features .grid-3 { display:flex; flex-direction:column; }
|
||||
#features .grid-3 .feature-card { width:100%; }
|
||||
.carousel-card { width:100%!important; max-width:100%; position:relative!important; }
|
||||
.carousel-card.active { transform:none; }
|
||||
.carousel-card.left, .carousel-card.right { display:none; }
|
||||
.carousel-track { display:flex; flex-direction:column; }
|
||||
.carousel-arrow { display:none; }
|
||||
.carousel-viewport { overflow:visible; }
|
||||
.live-stats-bar { padding:0 8px; }
|
||||
.live-stats-row { gap:12px; }
|
||||
.live-stat { min-width:0; padding:16px 12px; }
|
||||
.live-stat-value { font-size:1.8rem; }
|
||||
}
|
||||
|
||||
@media(max-width:480px) {
|
||||
.hero-title { font-size:1.65rem; }
|
||||
.hero-tagline { font-size:0.9rem; }
|
||||
.hero-slide-example { font-size:0.9rem; }
|
||||
.container { padding:0 16px; }
|
||||
}
|
||||
|
||||
/* Marker-Cluster Dark Theme */
|
||||
.marker-cluster-small,
|
||||
.marker-cluster-medium,
|
||||
.marker-cluster-large {
|
||||
background: rgba(21, 29, 46, 0.8);
|
||||
}
|
||||
.marker-cluster-small div,
|
||||
.marker-cluster-medium div,
|
||||
.marker-cluster-large div {
|
||||
background: rgba(200, 168, 81, 0.9);
|
||||
color: #0A1832;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* === Neueste Entwicklungen (Live-Monitoring Vorschau) === */
|
||||
.dev-list-heading {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.8px;
|
||||
text-transform: uppercase;
|
||||
color: #C8A851;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.dev-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
.dev-bullet {
|
||||
background: rgba(30, 45, 69, 0.45);
|
||||
border-left: 3px solid #C8A851;
|
||||
border-radius: 4px;
|
||||
padding: 8px 12px;
|
||||
text-align: left;
|
||||
}
|
||||
.dev-bullet-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 4px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.dev-sources {
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px;
|
||||
align-items: center;
|
||||
min-width: 0;
|
||||
}
|
||||
.dev-source-pill {
|
||||
display: inline-block;
|
||||
padding: 2px 8px;
|
||||
background: rgba(200, 168, 81, 0.15);
|
||||
color: #E8ECF4;
|
||||
border-radius: 3px;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
line-height: 1.5;
|
||||
white-space: normal;
|
||||
overflow-wrap: anywhere;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
a.dev-source-pill:hover {
|
||||
background: rgba(200, 168, 81, 0.3);
|
||||
text-decoration: none;
|
||||
color: #E8ECF4;
|
||||
}
|
||||
.dev-time {
|
||||
color: #8896AB;
|
||||
font-size: 0.7rem;
|
||||
font-variant-numeric: tabular-nums;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.dev-body {
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.45;
|
||||
color: #E8ECF4;
|
||||
}
|
||||
|
||||
/* ==================== HELLIGKEITS-TONLEITER (Test) ==================== */
|
||||
/* Vier helle Sections in vier Helligkeitsstufen — Seite "atmet" beim Scrollen
|
||||
sanft von hell nach kühler, mündet hart in den dunklen Footer. */
|
||||
:root {
|
||||
--tone-1: #F5F7FA; /* Problem (hellster) */
|
||||
--tone-2: #ECF0F5; /* Workflow */
|
||||
--tone-3: #E4EAF1; /* Demos */
|
||||
--tone-4: #ECF2F9; /* Contact (hell blau-grau-weiß, frischer Akzent vor Trust) */
|
||||
}
|
||||
#problem { background: var(--tone-1); }
|
||||
#solution { background: var(--tone-2); }
|
||||
#demos { background: var(--tone-3); }
|
||||
#contact { background: var(--tone-4); }
|
||||
|
||||
/* Divider-Übergänge an die Tonstufen anpassen (Adjacent-Sibling) */
|
||||
#problem + .divider { background: linear-gradient(to bottom, var(--tone-1), var(--tone-2)); }
|
||||
#solution + .divider { background: linear-gradient(to bottom, var(--tone-2), var(--tone-3)); }
|
||||
#demos + .divider { background: linear-gradient(to bottom, var(--tone-3), var(--tone-4)); height: 60px; }
|
||||
#contact + .divider { background: var(--tone-4); } /* diagonal-dark Contact->Trust, Top-Farbe an Contact angleichen */
|
||||
#trust { margin-top: -1px; } /* schließt Subpixel-Lücke zum Diagonal-Divider darüber */
|
||||
|
||||
/* === EXCERPT FADE-MASK PATCH 2026-04-26 START === */
|
||||
/* Vereinheitlicht die Karussell-Kartenhoehe ueber feste Excerpt-Hoehe */
|
||||
/* + weicher Fade-out bei langen Lagen statt harter Abschneidung */
|
||||
.carousel-card .demo-excerpt {
|
||||
position: relative;
|
||||
height: 760px;
|
||||
overflow: hidden;
|
||||
-webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 80px), transparent 100%);
|
||||
mask-image: linear-gradient(to bottom, #000 calc(100% - 80px), transparent 100%);
|
||||
}
|
||||
@media(max-width:768px) {
|
||||
.carousel-card .demo-excerpt { height: 640px; }
|
||||
}
|
||||
/* === EXCERPT FADE-MASK PATCH 2026-04-26 END === */
|
||||
|
||||
|
||||
522
vorschau/index.html
Normale Datei
522
vorschau/index.html
Normale Datei
@@ -0,0 +1,522 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>AegisSight Monitor – Echtzeit-Lagebilder aus offenen Quellen</title>
|
||||
<meta name="description" content="OSINT-Monitoring Software aus Deutschland: KI-gestützte Echtzeit-Lagebilder aus offenen Quellen. Für Behörden, Redaktionen und Sicherheitsdienste.">
|
||||
<meta name="robots" content="noindex, nofollow, noarchive">
|
||||
<link rel="canonical" href="https://aegis-sight.de/">
|
||||
|
||||
<!-- Open Graph / Social Sharing -->
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:site_name" content="AegisSight">
|
||||
<meta property="og:title" content="AegisSight Monitor – Echtzeit-Lagebilder aus offenen Quellen">
|
||||
<meta property="og:description" content="KI-gestützte Echtzeit-Lagebilder aus offenen Quellen. Für Behörden, Redaktionen und Sicherheitsdienste – Made in Germany.">
|
||||
<meta property="og:url" content="https://aegis-sight.de/">
|
||||
<meta property="og:image" content="https://aegis-sight.de/assets/images/og-image.png">
|
||||
<meta property="og:image:width" content="1200">
|
||||
<meta property="og:image:height" content="630">
|
||||
<meta property="og:locale" content="de_DE">
|
||||
|
||||
<!-- Twitter Card -->
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:title" content="AegisSight Monitor – Echtzeit-Lagebilder aus offenen Quellen">
|
||||
<meta name="twitter:description" content="KI-gestützte Echtzeit-Lagebilder aus offenen Quellen. Für Behörden, Redaktionen und Sicherheitsdienste – Made in Germany.">
|
||||
<meta name="twitter:image" content="https://aegis-sight.de/assets/images/og-image.png">
|
||||
|
||||
<!-- Schema.org Organization -->
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
"@context": "https://schema.org",
|
||||
"@type": "Organization",
|
||||
"name": "AegisSight UG (haftungsbeschränkt)",
|
||||
"alternateName": "AegisSight",
|
||||
"url": "https://aegis-sight.de",
|
||||
"logo": "https://aegis-sight.de/assets/images/logos/AegisSightLogo_NavyGold.svg",
|
||||
"email": "info@aegis-sight.de",
|
||||
"address": {
|
||||
"@type": "PostalAddress",
|
||||
"streetAddress": "Gladbacher Straße 3-5",
|
||||
"postalCode": "40764",
|
||||
"addressLocality": "Langenfeld",
|
||||
"addressRegion": "Nordrhein-Westfalen",
|
||||
"addressCountry": "DE"
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
|
||||
<link rel="apple-touch-icon" href="/assets/images/logos/AegisSightLogo_NavyGold.svg">
|
||||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
|
||||
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.5.3/dist/MarkerCluster.css">
|
||||
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.5.3/dist/MarkerCluster.Default.css">
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<link rel="stylesheet" href="/cookie-consent.css">
|
||||
</head>
|
||||
<body>
|
||||
<!-- Password Gate -->
|
||||
<style>
|
||||
#login-gate{position:fixed;inset:0;z-index:10000;background:#0A1832;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:'Inter',system-ui,sans-serif}
|
||||
#login-gate .gate-logo{width:80px;height:80px;margin-bottom:2rem}
|
||||
#login-gate .gate-logo img{width:100%;height:100%;background:#fff;border-radius:12px;padding:6px}
|
||||
#login-gate h1{font-size:1.6rem;font-weight:700;color:#C8A851;margin-bottom:.5rem}
|
||||
#login-gate p{font-size:.95rem;color:#A0A8B8;margin-bottom:1.5rem}
|
||||
#login-gate .pw-form{display:flex;gap:.5rem}
|
||||
#login-gate .pw-input{padding:.7rem 1rem;border:1px solid rgba(200,168,81,.3);border-radius:6px;background:rgba(255,255,255,.05);color:#E8E8E8;font-family:inherit;font-size:.95rem;width:220px;outline:none}
|
||||
#login-gate .pw-input:focus{border-color:#C8A851}
|
||||
#login-gate .pw-input::placeholder{color:#5A6478}
|
||||
#login-gate .pw-btn{padding:.7rem 1.2rem;border:none;border-radius:6px;background:#C8A851;color:#0A1832;font-family:inherit;font-size:.95rem;font-weight:600;cursor:pointer}
|
||||
#login-gate .pw-btn:hover{background:#D4B96A}
|
||||
#login-gate .pw-error{color:#E85454;font-size:.85rem;margin-top:.75rem;display:none}
|
||||
body.locked{overflow:hidden}
|
||||
</style>
|
||||
<div id="login-gate">
|
||||
<div class="gate-logo"><img src="/assets/images/logos/AegisSightLogo_NavyGold.svg" alt="AegisSight"></div>
|
||||
<h1>Vorschau</h1>
|
||||
<p>Zugang nur mit Passwort</p>
|
||||
<form class="pw-form" onsubmit="return checkPassword(event)">
|
||||
<input type="password" class="pw-input" id="pw-input" placeholder="Passwort" autofocus>
|
||||
<button type="submit" class="pw-btn">Weiter</button>
|
||||
</form>
|
||||
<div class="pw-error" id="pw-error">Falsches Passwort</div>
|
||||
</div>
|
||||
<script>
|
||||
var PW_HASH='feab257468bdb1b836bae5bc439db625d9a1b9a56ca60e0916ab04fb04c2ec31';
|
||||
function sha256(s){return crypto.subtle.digest('SHA-256',new TextEncoder().encode(s)).then(function(b){return Array.from(new Uint8Array(b)).map(function(x){return x.toString(16).padStart(2,'0')}).join('')})}
|
||||
function getCookie(n){var m=document.cookie.match(new RegExp('(?:^|; )'+n+'=([^;]*)'));return m?m[1]:null}
|
||||
function setCookie(n,v,d){var e=new Date();e.setTime(e.getTime()+d*864e5);document.cookie=n+'='+v+';expires='+e.toUTCString()+';path=/vorschau/;SameSite=Strict;Secure'}
|
||||
function unlock(){document.getElementById('login-gate').style.display='none';document.body.classList.remove('locked')}
|
||||
function checkPassword(e){e.preventDefault();sha256(document.getElementById('pw-input').value).then(function(h){if(h===PW_HASH){setCookie('vorschau_auth',h,30);unlock()}else{document.getElementById('pw-error').style.display='block';document.getElementById('pw-input').value='';document.getElementById('pw-input').focus()}});return false}
|
||||
if(getCookie('vorschau_auth')===PW_HASH){unlock()}else{document.body.classList.add('locked')}
|
||||
</script>
|
||||
|
||||
<!-- Navigation -->
|
||||
<nav class="navbar" id="navbar">
|
||||
<div class="nav-container">
|
||||
<a href="#hero" class="nav-logo">
|
||||
<img src="/assets/images/logos/Logo+Schrift_Rechts.png" alt="AegisSight" class="logo-img">
|
||||
</a>
|
||||
<ul class="nav-menu">
|
||||
<li><a href="#features">Funktionen</a></li>
|
||||
<li><a href="#demos">Live-Lagebilder</a></li>
|
||||
<li><a href="#trust">Über uns</a></li>
|
||||
<li><a href="#contact">Kontakt</a></li>
|
||||
</ul>
|
||||
<button class="mobile-menu-toggle" aria-label="Menü öffnen" aria-expanded="false">
|
||||
<span></span><span></span><span></span>
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Mobile Menu -->
|
||||
<div class="mobile-menu" id="mobile-menu" aria-hidden="true">
|
||||
<ul>
|
||||
<li><a href="#features">Funktionen</a></li>
|
||||
<li><a href="#demos">Live-Lagebilder</a></li>
|
||||
<li><a href="#trust">Über uns</a></li>
|
||||
<li><a href="#contact">Kontakt</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="mobile-overlay" id="mobile-overlay"></div>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section class="hero" id="hero">
|
||||
<div class="hero-overlay"></div>
|
||||
<div class="hero-content">
|
||||
<div class="hero-brand">
|
||||
<h1 class="hero-title">AegisSight Monitor</h1>
|
||||
<p class="hero-tagline">KI-gestützte Echtzeit-Lagebilder aus offenen Quellen, <span class="gold">vollautomatisch.</span></p>
|
||||
</div>
|
||||
|
||||
<div class="hero-slider" role="region" aria-label="Produktvorteile" aria-live="polite">
|
||||
<!-- Slide 1: Echtzeit-Monitoring (Video) -->
|
||||
<div class="hero-slide active" data-slide="0">
|
||||
<div class="hero-slide-video">
|
||||
<video muted playsinline preload="auto">
|
||||
<source src="videos/hero-slide-1-monitoring.mp4" type="video/mp4">
|
||||
</video>
|
||||
</div>
|
||||
<div class="hero-slide-bottom">
|
||||
<p class="hero-slide-example">Live-Beispiel: Der Iran-Konflikt wird mit über 14.900 Artikeln aus 375 Quellen kontinuierlich überwacht.</p>
|
||||
<div class="hero-slide-cta">
|
||||
<a href="#demos" class="btn btn-primary" onclick="positionCards(0)">Live-Beispiel ansehen</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Slide 2: Automatischer Faktencheck (Video) -->
|
||||
<div class="hero-slide" data-slide="1">
|
||||
<div class="hero-slide-video">
|
||||
<video muted playsinline preload="metadata">
|
||||
<source src="videos/hero-slide-2-monitoring.mp4?v=3" type="video/mp4">
|
||||
</video>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Slide 3: KI-Recherche (Video) -->
|
||||
<div class="hero-slide" data-slide="2">
|
||||
<div class="hero-slide-video">
|
||||
<video muted playsinline preload="metadata">
|
||||
<source src="videos/hero-slide-3-monitoring.mp4?v=2" type="video/mp4">
|
||||
</video>
|
||||
</div>
|
||||
<div class="hero-slide-bottom">
|
||||
<p class="hero-slide-example">Beispiel: Ein Dossier zur rechtlichen Lage von Deepfakes in Deutschland, 121 Artikel aus 90 Quellen, automatisch erstellt.</p>
|
||||
<div class="hero-slide-cta">
|
||||
<a href="#demos" class="btn btn-primary" onclick="positionCards(2)">Recherche-Beispiel ansehen</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Slide 4: Globale Quellenabdeckung (Video) -->
|
||||
<div class="hero-slide" data-slide="3">
|
||||
<div class="hero-slide-video">
|
||||
<video muted playsinline preload="metadata">
|
||||
<source src="videos/hero-slide-4-monitoring.mp4" type="video/mp4">
|
||||
</video>
|
||||
</div>
|
||||
<div class="hero-slide-bottom">
|
||||
<p class="hero-slide-example">Im Iran-Konflikt werden Primärquellen in Farsi, Arabisch und Hebräisch direkt ausgewertet.</p>
|
||||
<div class="hero-slide-cta">
|
||||
<a href="#demos" class="btn btn-primary" onclick="positionCards(0)">Live-Beispiel ansehen</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Slide 5: Flexibel einsetzbar (Video) -->
|
||||
<div class="hero-slide" data-slide="4">
|
||||
<div class="hero-slide-video">
|
||||
<video muted playsinline preload="metadata">
|
||||
<source src="videos/hero-slide-5-monitoring.mp4?v=2" type="video/mp4">
|
||||
</video>
|
||||
</div>
|
||||
<div class="hero-slide-bottom">
|
||||
<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="#demos" class="btn btn-primary" onclick="positionCards(1)">Live-Beispiel ansehen</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hero-slider-nav">
|
||||
<div class="hero-slider-dots">
|
||||
<button class="hero-dot active" data-slide="0" aria-label="Echtzeit-Monitoring"></button>
|
||||
<button class="hero-dot" data-slide="1" aria-label="Faktencheck"></button>
|
||||
<button class="hero-dot" data-slide="2" aria-label="KI-gestützte Recherche"></button>
|
||||
<button class="hero-dot" data-slide="3" aria-label="Globale Abdeckung"></button>
|
||||
<button class="hero-dot" data-slide="4" aria-label="Flexibel einsetzbar"></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-slider-arrows">
|
||||
<button class="hero-arrow hero-arrow-prev" aria-label="Vorheriger Slide">←</button>
|
||||
<button class="hero-arrow hero-arrow-next" aria-label="Nächster Slide">→</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Features -->
|
||||
<section class="section section-dark" id="features">
|
||||
<div class="container">
|
||||
<h2 class="section-title">Was der Monitor leistet</h2>
|
||||
<!-- Highlight: Faktenprüfung -->
|
||||
<div class="feature-statement">
|
||||
<p class="feature-statement-text">Jede Behauptung wird automatisch gegen unabhängige Quellen geprüft.</p>
|
||||
<p class="feature-statement-sub">Statusverlauf, Evidenz und Quellenbelege. Automatisch und nachvollziehbar.</p>
|
||||
</div>
|
||||
|
||||
<div class="grid-3">
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">
|
||||
<img src="/assets/images/icons/monitor.svg" alt="" width="36" height="36">
|
||||
</div>
|
||||
<h3>Echtzeit-Monitoring</h3>
|
||||
<p>Kontinuierliche Überwachung Ihrer definierten Quellen, rund um die Uhr.</p>
|
||||
</div>
|
||||
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">
|
||||
<img src="/assets/images/icons/cube.svg" alt="" width="36" height="36">
|
||||
</div>
|
||||
<h3>Quellenanalyse</h3>
|
||||
<p>Automatische Aggregation und Deduplizierung aus hunderten internationalen Quellen.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">
|
||||
<img src="/assets/images/icons/location.svg" alt="" width="36" height="36">
|
||||
</div>
|
||||
<h3>Geografische Verortung</h3>
|
||||
<p>Orte werden erkannt und auf einer interaktiven Karte dargestellt.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">
|
||||
<img src="/assets/images/icons/languages.svg" alt="" width="36" height="36">
|
||||
</div>
|
||||
<h3>Mehrsprachige Auswertung</h3>
|
||||
<p>Quellen in verschiedenen Sprachen werden automatisch verarbeitet und zusammengeführt.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">
|
||||
<img src="/assets/images/icons/document.svg" alt="" width="36" height="36">
|
||||
</div>
|
||||
<h3>Strukturierte Lagebilder</h3>
|
||||
<p>Übersichtliche Zusammenfassungen mit Quellenbelegen und Zeitverläufen.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Gradient: Features -> Problem -->
|
||||
<div class="divider divider-gradient-dark-to-base"></div>
|
||||
|
||||
<!-- Problem Statement -->
|
||||
<section class="section section-base" id="problem">
|
||||
<div class="container">
|
||||
<h2 class="section-title">Warum manuelle OSINT-Auswertung nicht skaliert</h2>
|
||||
<p class="section-subtitle">Analysten in Sicherheitsbehörden, Redaktionen und Unternehmen stehen täglich vor der gleichen Herausforderung.</p>
|
||||
<div class="grid-3">
|
||||
<div class="problem-card">
|
||||
<div class="problem-icon">
|
||||
<img src="/assets/images/icons/world-globe.svg" alt="" width="40" height="40">
|
||||
</div>
|
||||
<h3>Quellenvielfalt</h3>
|
||||
<p>Hunderte Nachrichtenagenturen, Telegram-Kanäle und soziale Medien in dutzenden Sprachen. Kein Analyst überblickt alles gleichzeitig.</p>
|
||||
</div>
|
||||
<div class="problem-card">
|
||||
<div class="problem-icon">
|
||||
<img src="/assets/images/icons/clock.svg" alt="" width="40" height="40">
|
||||
</div>
|
||||
<h3>Zeitdruck</h3>
|
||||
<p>Neue Meldungen im Minutentakt. Manuelle Auswertung kostet Zeit, die Sie nicht haben.</p>
|
||||
</div>
|
||||
<div class="problem-card">
|
||||
<div class="problem-icon">
|
||||
<img src="/assets/images/icons/document.svg" alt="" width="40" height="40">
|
||||
</div>
|
||||
<h3>Informationsflut</h3>
|
||||
<p>Kritische Informationen gehen in der Masse unter, Zusammenhänge bleiben unsichtbar.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Gradient: Problem -> Workflow -->
|
||||
<div class="divider divider-gradient-base-to-alt"></div>
|
||||
|
||||
<!-- Solution / Workflow -->
|
||||
<section class="section section-alt" id="solution">
|
||||
<div class="container">
|
||||
<h2 class="section-title">So funktioniert der AegisSight Monitor</h2>
|
||||
<div class="workflow">
|
||||
<div class="workflow-step">
|
||||
<div class="step-number">1</div>
|
||||
<h3>Erfassen</h3>
|
||||
<p>Hunderte Quellen werden kontinuierlich überwacht. Nachrichtenagenturen, Telegram, Social Media und mehr.</p>
|
||||
</div>
|
||||
<div class="workflow-connector"></div>
|
||||
<div class="workflow-step">
|
||||
<div class="step-number">2</div>
|
||||
<h3>Analysieren</h3>
|
||||
<p>Meldungen werden automatisch ausgewertet, Fakten geprüft und geografisch verortet.</p>
|
||||
</div>
|
||||
<div class="workflow-connector"></div>
|
||||
<div class="workflow-step">
|
||||
<div class="step-number">3</div>
|
||||
<h3>Berichten</h3>
|
||||
<p>Strukturierte Lagebilder mit Quellenbelegen, Faktencheck und Kartenansicht. In Echtzeit.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Gradient: Solution -> Demos -->
|
||||
<div class="divider divider-gradient-alt-to-base"></div>
|
||||
|
||||
<!-- Live Demos / Showcase -->
|
||||
<section class="section section-base" id="demos">
|
||||
<div class="container">
|
||||
<!-- Live Stats Bar -->
|
||||
<div class="live-stats-bar">
|
||||
<div class="live-stats-title">Großlage - Irankonflikt</div>
|
||||
<div class="live-stats-row">
|
||||
<div class="live-stat">
|
||||
<span class="live-stat-value" id="stat-articles">...</span>
|
||||
<span class="live-stat-label">Artikel</span>
|
||||
</div>
|
||||
<div class="live-stat">
|
||||
<span class="live-stat-value" id="stat-sources">...</span>
|
||||
<span class="live-stat-label">Quellen</span>
|
||||
</div>
|
||||
<div class="live-stat">
|
||||
<span class="live-stat-value" id="stat-factchecks">...</span>
|
||||
<span class="live-stat-label">Faktenchecks</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 3D Carousel -->
|
||||
<div class="carousel-viewport">
|
||||
<button class="carousel-arrow carousel-prev" aria-label="Vorherige Lage">‹</button>
|
||||
<button class="carousel-arrow carousel-next" aria-label="Nächste Lage">›</button>
|
||||
<div class="carousel-track" id="carousel">
|
||||
<!-- Iran Card -->
|
||||
<div class="carousel-card card-live active" data-index="0" data-lage="iran-konflikt">
|
||||
<div class="demo-badge">LIVE</div>
|
||||
<h3 class="demo-title">Iran-Konflikt</h3>
|
||||
|
||||
<div class="demo-excerpt" id="demo-excerpt">
|
||||
<div class="excerpt-text" id="excerpt-text">Lagebild wird geladen...</div>
|
||||
</div>
|
||||
<a href="/lagen/iran-konflikt/" class="btn btn-primary btn-block">Vollständiges Lagebild öffnen</a>
|
||||
</div>
|
||||
<!-- 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">
|
||||
<div class="demo-badge">RECHERCHE</div>
|
||||
<h3 class="demo-title">Rechtliche Lage von Deepfakes in Deutschland</h3>
|
||||
|
||||
<div class="demo-excerpt" id="demo-excerpt-deepfakes">
|
||||
<div class="excerpt-text" id="excerpt-text-deepfakes">Recherche wird geladen...</div>
|
||||
</div>
|
||||
<a href="/lagen/deepfakes/" class="btn btn-primary btn-block">Vollständige Recherche öffnen</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="carousel-nav">
|
||||
<button class="carousel-dot active" data-index="0"></button>
|
||||
<button class="carousel-dot" data-index="1"></button>
|
||||
<button class="carousel-dot" data-index="2"></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Map -->
|
||||
<div class="map-section" id="map-section">
|
||||
<h3 class="map-title" id="map-title">Geografische Verortung der Meldungen</h3>
|
||||
<div id="map-container"></div>
|
||||
<div class="map-empty" id="map-empty" style="display:none">Kartendaten folgen</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Gradient: Demos -> Contact -->
|
||||
<div class="divider"></div>
|
||||
|
||||
<!-- Contact CTA -->
|
||||
<section class="section section-base" id="contact">
|
||||
<div class="container cta-container">
|
||||
<h2 class="section-title">Interesse am AegisSight Monitor?</h2>
|
||||
<p class="cta-text">Sprechen Sie mit uns über Ihren Einsatzfall.</p>
|
||||
<button class="btn btn-primary btn-lg" onclick="openContactModal()">Kontakt aufnehmen</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Diagonal: Contact -> Trust -->
|
||||
<div class="divider divider-diagonal-dark">
|
||||
<svg viewBox="0 0 1440 60" preserveAspectRatio="none"><path d="M0,60 L1440,0 L1440,60 Z" fill="#132844"/></svg>
|
||||
</div>
|
||||
|
||||
<!-- Trust / Unser Versprechen -->
|
||||
<section class="section section-dark" id="trust">
|
||||
<div class="container">
|
||||
<h2 class="section-title">Unser Versprechen</h2>
|
||||
<div class="grid-4 trust-grid">
|
||||
<div class="trust-card">
|
||||
<div class="trust-icon-wrap">
|
||||
<img src="/assets/images/icons/check-circle-filled.svg" alt="" width="48" height="48">
|
||||
</div>
|
||||
<h3>Enge Zusammenarbeit</h3>
|
||||
<p>Wir arbeiten Hand in Hand mit unseren Kunden für maßgeschneiderte Lösungen</p>
|
||||
</div>
|
||||
<div class="trust-card">
|
||||
<div class="trust-icon-wrap trust-flag">
|
||||
<img src="/assets/images/icons/german-flag.svg" alt="" width="60" height="36">
|
||||
</div>
|
||||
<h3>Made in Germany</h3>
|
||||
<p>Klare, robuste und sichere Software nach deutschen Qualitätsstandards</p>
|
||||
</div>
|
||||
<div class="trust-card">
|
||||
<div class="trust-icon-wrap">
|
||||
<img src="/assets/handshake.svg" alt="" width="50" height="50">
|
||||
</div>
|
||||
<h3>Verlässliche Partnerschaft</h3>
|
||||
<p>Basierend auf gemeinsamen Werten und langfristigem Vertrauen</p>
|
||||
</div>
|
||||
<div class="trust-card">
|
||||
<div class="trust-icon-wrap">
|
||||
<img src="/assets/images/icons/shield-check.svg" alt="" width="48" height="48">
|
||||
</div>
|
||||
<h3>Nachhaltigkeit</h3>
|
||||
<p>Fokus auf Sicherheit, Professionalität und zukunftssichere Lösungen</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="footer-content">
|
||||
<div class="footer-info">
|
||||
<p class="footer-company">AegisSight UG (haftungsbeschränkt)</p>
|
||||
<p>Gladbacher Straße 3-5, 40764 Langenfeld</p>
|
||||
</div>
|
||||
<div class="footer-links">
|
||||
<a href="/impressum.html">Impressum</a>
|
||||
<a href="/datenschutz.html">Datenschutz</a>
|
||||
<a href="#" id="cookie-settings-link">Cookie-Einstellungen</a>
|
||||
</div>
|
||||
</div>
|
||||
<p class="footer-copyright">© <span id="footer-year">2026</span> AegisSight UG (haftungsbeschränkt). Alle Rechte vorbehalten.</p>
|
||||
</div>
|
||||
</footer>
|
||||
<script>document.getElementById('footer-year').textContent=new Date().getFullYear();</script>
|
||||
|
||||
|
||||
<!-- Contact Modal -->
|
||||
<div class="modal-overlay" id="contact-modal" style="display:none">
|
||||
<div class="modal-content">
|
||||
<button class="modal-close" onclick="closeContactModal()">×</button>
|
||||
<h2>Kontakt aufnehmen</h2>
|
||||
<p class="modal-sub">Sprechen Sie mit uns über Ihren Einsatzfall.</p>
|
||||
<form id="contact-form" onsubmit="return submitContact(event)">
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="cf-name">Name</label>
|
||||
<input type="text" id="cf-name" name="name" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="cf-org">Organisation</label>
|
||||
<input type="text" id="cf-org" name="organisation">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="cf-email">E-Mail</label>
|
||||
<input type="email" id="cf-email" name="email" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="cf-message">Nachricht</label>
|
||||
<textarea id="cf-message" name="message" rows="4" required></textarea>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary btn-block">Nachricht senden</button>
|
||||
</form>
|
||||
<div class="form-success" id="form-success" style="display:none">
|
||||
<p>Vielen Dank für Ihre Nachricht. Wir melden uns zeitnah bei Ihnen.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
||||
<script src="https://unpkg.com/leaflet.markercluster@1.5.3/dist/leaflet.markercluster.js"></script>
|
||||
<script src="js/app.js"></script>
|
||||
<script src="/cookie-consent.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
719
vorschau/js/app.js
Normale Datei
719
vorschau/js/app.js
Normale Datei
@@ -0,0 +1,719 @@
|
||||
/* AegisSight Monitor - Product Page v2 */
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
/* ==================== NAVBAR ==================== */
|
||||
var navbar = document.getElementById('navbar');
|
||||
window.addEventListener('scroll', function () {
|
||||
navbar.classList.toggle('scrolled', window.scrollY > 10);
|
||||
});
|
||||
|
||||
/* ==================== MOBILE MENU ==================== */
|
||||
var toggle = document.querySelector('.mobile-menu-toggle');
|
||||
var menu = document.getElementById('mobile-menu');
|
||||
var overlay = document.getElementById('mobile-overlay');
|
||||
|
||||
function closeMenu() {
|
||||
toggle.classList.remove('active');
|
||||
menu.classList.remove('open');
|
||||
overlay.classList.remove('open');
|
||||
toggle.setAttribute('aria-expanded', 'false');
|
||||
}
|
||||
|
||||
toggle.addEventListener('click', function () {
|
||||
var isOpen = menu.classList.contains('open');
|
||||
if (isOpen) { closeMenu(); } else {
|
||||
toggle.classList.add('active');
|
||||
menu.classList.add('open');
|
||||
overlay.classList.add('open');
|
||||
toggle.setAttribute('aria-expanded', 'true');
|
||||
}
|
||||
});
|
||||
|
||||
overlay.addEventListener('click', closeMenu);
|
||||
menu.querySelectorAll('a').forEach(function (l) { l.addEventListener('click', closeMenu); });
|
||||
|
||||
/* ==================== SMOOTH SCROLL ==================== */
|
||||
document.querySelectorAll('a[href^="#"]').forEach(function (link) {
|
||||
link.addEventListener('click', function (e) {
|
||||
var t = document.querySelector(this.getAttribute('href'));
|
||||
if (t) { e.preventDefault(); t.scrollIntoView({ behavior: 'smooth' }); }
|
||||
});
|
||||
});
|
||||
|
||||
/* ==================== HERO SLIDER (video-driven mit Endcard) ==================== */
|
||||
var heroEl = document.querySelector('.hero');
|
||||
var heroSlides = document.querySelectorAll('.hero-slide');
|
||||
var heroDots = document.querySelectorAll('.hero-dot');
|
||||
var heroCurrentSlide = 0;
|
||||
var heroEndcardTimer = null;
|
||||
var heroFallbackTimer = null;
|
||||
var heroIsTransitioning = false;
|
||||
var HERO_ENDCARD_MS = 7000;
|
||||
var HERO_FALLBACK_MS = 25000;
|
||||
|
||||
function heroClearTimers() {
|
||||
if (heroEndcardTimer) { clearTimeout(heroEndcardTimer); heroEndcardTimer = null; }
|
||||
if (heroFallbackTimer) { clearTimeout(heroFallbackTimer); heroFallbackTimer = null; }
|
||||
}
|
||||
|
||||
function heroPlaySlideVideo(slide) {
|
||||
var v = slide && slide.querySelector('video');
|
||||
if (!v) return;
|
||||
try { v.currentTime = 0; } catch (err) { /* ignore */ }
|
||||
var p = v.play();
|
||||
if (p && typeof p.catch === 'function') p.catch(function () { /* autoplay blocked */ });
|
||||
}
|
||||
|
||||
function heroPauseSlideVideo(slide) {
|
||||
var v = slide && slide.querySelector('video');
|
||||
if (v) v.pause();
|
||||
}
|
||||
|
||||
function heroEnterEndcard() {
|
||||
if (!heroSlides.length) return;
|
||||
var slide = heroSlides[heroCurrentSlide];
|
||||
if (!slide || slide.classList.contains('ended')) return;
|
||||
slide.classList.add('ended');
|
||||
if (heroEl) heroEl.classList.add('endcard');
|
||||
heroClearTimers();
|
||||
heroEndcardTimer = setTimeout(function () {
|
||||
heroEndcardTimer = null;
|
||||
heroNext();
|
||||
}, HERO_ENDCARD_MS);
|
||||
}
|
||||
|
||||
function heroStartSlide() {
|
||||
var slide = heroSlides[heroCurrentSlide];
|
||||
if (!slide) return;
|
||||
slide.classList.remove('ended');
|
||||
if (heroEl) heroEl.classList.remove('endcard');
|
||||
heroPlaySlideVideo(slide);
|
||||
heroClearTimers();
|
||||
heroFallbackTimer = setTimeout(function () {
|
||||
heroFallbackTimer = null;
|
||||
heroEnterEndcard();
|
||||
}, HERO_FALLBACK_MS);
|
||||
}
|
||||
|
||||
function heroGoTo(index) {
|
||||
if (heroIsTransitioning || index === heroCurrentSlide || !heroSlides.length) return;
|
||||
heroIsTransitioning = true;
|
||||
heroClearTimers();
|
||||
|
||||
var oldIndex = heroCurrentSlide;
|
||||
heroSlides[oldIndex].classList.add('exiting');
|
||||
heroSlides[oldIndex].classList.remove('active');
|
||||
// .ended bleibt waehrend des Fade-outs erhalten - sonst blitzt das pausierte
|
||||
// Video-Frame durch, waehrend die Endcard ausfadet und der Container fadet aus.
|
||||
if (heroEl) heroEl.classList.remove('endcard');
|
||||
if (heroDots[oldIndex]) heroDots[oldIndex].classList.remove('active');
|
||||
|
||||
heroPauseSlideVideo(heroSlides[oldIndex]);
|
||||
|
||||
setTimeout(function () {
|
||||
heroSlides[oldIndex].classList.remove('exiting', 'ended');
|
||||
heroCurrentSlide = index;
|
||||
heroSlides[heroCurrentSlide].classList.add('active');
|
||||
if (heroDots[heroCurrentSlide]) heroDots[heroCurrentSlide].classList.add('active');
|
||||
heroStartSlide();
|
||||
heroIsTransitioning = false;
|
||||
}, 400);
|
||||
}
|
||||
|
||||
function heroNext() {
|
||||
heroGoTo((heroCurrentSlide + 1) % heroSlides.length);
|
||||
}
|
||||
|
||||
function heroPrev() {
|
||||
heroGoTo((heroCurrentSlide - 1 + heroSlides.length) % heroSlides.length);
|
||||
}
|
||||
|
||||
// Pro Video: 'ended' → Endcard-Phase starten
|
||||
heroSlides.forEach(function (slide) {
|
||||
var v = slide.querySelector('video');
|
||||
if (!v) return;
|
||||
v.addEventListener('ended', function () {
|
||||
if (slide.classList.contains('active')) heroEnterEndcard();
|
||||
});
|
||||
});
|
||||
|
||||
heroDots.forEach(function (dot, i) {
|
||||
dot.addEventListener('click', function () { heroGoTo(i); });
|
||||
});
|
||||
|
||||
var heroPrevBtn = document.querySelector('.hero-arrow-prev');
|
||||
var heroNextBtn = document.querySelector('.hero-arrow-next');
|
||||
if (heroPrevBtn) heroPrevBtn.addEventListener('click', heroPrev);
|
||||
if (heroNextBtn) heroNextBtn.addEventListener('click', heroNext);
|
||||
|
||||
var heroSlider = document.querySelector('.hero-slider');
|
||||
if (heroSlider) {
|
||||
var heroTouchStartX = 0;
|
||||
heroSlider.addEventListener('touchstart', function (e) {
|
||||
heroTouchStartX = e.changedTouches[0].screenX;
|
||||
}, { 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();
|
||||
}
|
||||
}, { passive: true });
|
||||
}
|
||||
|
||||
document.addEventListener('visibilitychange', function () {
|
||||
var slide = heroSlides[heroCurrentSlide];
|
||||
if (!slide) return;
|
||||
if (document.hidden) {
|
||||
heroClearTimers();
|
||||
heroPauseSlideVideo(slide);
|
||||
return;
|
||||
}
|
||||
if (slide.classList.contains('ended')) {
|
||||
heroEndcardTimer = setTimeout(function () {
|
||||
heroEndcardTimer = null;
|
||||
heroNext();
|
||||
}, HERO_ENDCARD_MS);
|
||||
} else {
|
||||
var v = slide.querySelector('video');
|
||||
if (v) {
|
||||
var p = v.play();
|
||||
if (p && typeof p.catch === 'function') p.catch(function () {});
|
||||
}
|
||||
heroFallbackTimer = setTimeout(function () {
|
||||
heroFallbackTimer = null;
|
||||
heroEnterEndcard();
|
||||
}, HERO_FALLBACK_MS);
|
||||
}
|
||||
});
|
||||
|
||||
// Initialer Start (Slide 0 ist bereits .active im HTML)
|
||||
if (heroSlides.length) heroStartSlide();
|
||||
|
||||
/* ==================== MAP STATE ==================== */
|
||||
var mapInstance = null;
|
||||
var markerLayer = null;
|
||||
var legendControl = null;
|
||||
var lageData = {};
|
||||
var dataLoaded = false;
|
||||
|
||||
var lageTitles = {
|
||||
'iran-konflikt': 'Gro\u00dflage - Irankonflikt',
|
||||
'cyberangriffe': 'Cyberangriffe auf deutsche Infrastruktur',
|
||||
'deepfakes': 'Rechtliche Lage von Deepfakes in Deutschland'
|
||||
};
|
||||
|
||||
/* ==================== 3D CAROUSEL ==================== */
|
||||
var cards = document.querySelectorAll('.carousel-card');
|
||||
var dots = document.querySelectorAll('.carousel-dot');
|
||||
var activeIndex = 0;
|
||||
|
||||
window.positionCards = function positionCards(idx) {
|
||||
activeIndex = idx;
|
||||
cards.forEach(function (card, i) {
|
||||
card.classList.remove('active', 'left', 'right', 'hidden');
|
||||
if (i === idx) card.classList.add('active');
|
||||
else if (i === (idx - 1 + cards.length) % cards.length) card.classList.add('left');
|
||||
else if (i === (idx + 1) % cards.length) card.classList.add('right');
|
||||
else card.classList.add('hidden');
|
||||
});
|
||||
dots.forEach(function (dot, i) {
|
||||
dot.classList.toggle('active', i === idx);
|
||||
});
|
||||
// Update map based on active Lage (only after data loaded)
|
||||
if (!dataLoaded) return;
|
||||
var lage = cards[idx].getAttribute('data-lage');
|
||||
var mapSection = document.getElementById('map-section');
|
||||
if (lage && lageData[lage]) {
|
||||
mapSection.classList.remove('map-hidden');
|
||||
showMarkers(lageData[lage].locations, lageData[lage].category_labels);
|
||||
// Stats-Bar aktualisieren
|
||||
var titleEl = document.querySelector('.live-stats-title');
|
||||
if (titleEl) titleEl.textContent = lageTitles[lage] || lage;
|
||||
countUp(document.getElementById('stat-articles'), lageData[lage].article_count);
|
||||
countUp(document.getElementById('stat-sources'), lageData[lage].source_count);
|
||||
countUp(document.getElementById('stat-factchecks'), lageData[lage].factcheck_count);
|
||||
} else {
|
||||
if (mapSection) mapSection.classList.add('map-hidden');
|
||||
clearMarkers();
|
||||
}
|
||||
}
|
||||
|
||||
cards.forEach(function (card, i) {
|
||||
card.addEventListener('click', function () {
|
||||
if (!card.classList.contains('active')) positionCards(i);
|
||||
});
|
||||
});
|
||||
|
||||
dots.forEach(function (dot, i) {
|
||||
dot.addEventListener('click', function () { positionCards(i); });
|
||||
});
|
||||
|
||||
positionCards(0);
|
||||
|
||||
// Arrow navigation
|
||||
var prevBtn = document.querySelector('.carousel-prev');
|
||||
var nextBtn = document.querySelector('.carousel-next');
|
||||
if (prevBtn) prevBtn.addEventListener('click', function () {
|
||||
positionCards((activeIndex - 1 + cards.length) % cards.length);
|
||||
});
|
||||
if (nextBtn) nextBtn.addEventListener('click', function () {
|
||||
positionCards((activeIndex + 1) % cards.length);
|
||||
});
|
||||
|
||||
/* ==================== NEUESTE ENTWICKLUNGEN (Live-Monitoring) ==================== */
|
||||
function htmlEscape(s) {
|
||||
return String(s == null ? '' : s)
|
||||
.replace(/&/g, '&')
|
||||
.replace(/</g, '<')
|
||||
.replace(/>/g, '>')
|
||||
.replace(/"/g, '"');
|
||||
}
|
||||
|
||||
function normalizeSourceName(s) {
|
||||
return String(s || '').toLowerCase().replace(/^(der|die|das)\s+/, '').replace(/\s+/g, ' ').trim();
|
||||
}
|
||||
|
||||
function renderLatestDevelopments(text, sources) {
|
||||
if (!text) return null;
|
||||
sources = Array.isArray(sources) ? sources : [];
|
||||
|
||||
var lines = text.split('\n').map(function (l) { return l.trim(); })
|
||||
.filter(function (l) { return l && (l.charAt(0) === '-' || l.charAt(0) === '['); });
|
||||
if (!lines.length) return null;
|
||||
|
||||
var bulletRe = /^(?:-\s*)?\[\s*(\d{1,2})\.(\d{1,2})\.?(?:\d{2,4})?\s+(\d{1,2}:\d{2})\s*\]\s*(.+?)\s*$/;
|
||||
var trailingRe = /\s*\{([^{}]+)\}\s*\.?\s*$/;
|
||||
var citationRe = /\[(\d+[a-z]?)\]/g;
|
||||
var junkRe = /^(unbekannt|unknown|n\/?a|keine|keine quelle|tba)$/i;
|
||||
|
||||
function buildPill(src, name) {
|
||||
var disp = (src && src.name) || name;
|
||||
var url = (src && src.url) || '';
|
||||
var tgMatch = url.match(/^https?:\/\/t\.me\/([^\/?#]+)/i);
|
||||
var label = tgMatch ? disp + ' (t.me/' + tgMatch[1] + ')' : disp;
|
||||
var e = htmlEscape(label);
|
||||
var titleEsc = htmlEscape(disp);
|
||||
if (src && src.url) {
|
||||
return '<a href="' + htmlEscape(src.url) + '" target="_blank" rel="noopener" class="dev-source-pill" title="' + titleEsc + '">' + e + '</a>';
|
||||
}
|
||||
return '<span class="dev-source-pill" title="' + titleEsc + '">' + e + '</span>';
|
||||
}
|
||||
|
||||
function lookupByName(name) {
|
||||
var n = normalizeSourceName(name);
|
||||
if (!n) return null;
|
||||
var exact = sources.find(function (s) { return normalizeSourceName(s.name) === n; });
|
||||
if (exact) return exact;
|
||||
return sources.find(function (s) {
|
||||
var sn = normalizeSourceName(s.name);
|
||||
return sn && (sn.indexOf(n) !== -1 || n.indexOf(sn) !== -1);
|
||||
}) || null;
|
||||
}
|
||||
|
||||
var cards = [];
|
||||
for (var i = 0; i < lines.length; i++) {
|
||||
var m = bulletRe.exec(lines[i]);
|
||||
if (!m) continue;
|
||||
var date = String(m[1]).padStart(2, '0') + '.' + String(m[2]).padStart(2, '0') + '.';
|
||||
var time = m[3];
|
||||
var body = m[4];
|
||||
|
||||
var pills = '';
|
||||
var t = trailingRe.exec(body);
|
||||
if (t) {
|
||||
body = body.replace(trailingRe, '').trim();
|
||||
var items = t[1].split(',').map(function (n) { return n.trim(); }).filter(Boolean);
|
||||
var seen = {};
|
||||
pills = items.map(function (item) {
|
||||
var pipeIdx = item.indexOf('|');
|
||||
var itemName = pipeIdx >= 0 ? item.slice(0, pipeIdx).trim() : item.trim();
|
||||
var itemUrl = pipeIdx >= 0 ? item.slice(pipeIdx + 1).trim() : '';
|
||||
if (!itemName || junkRe.test(itemName)) return '';
|
||||
var key = normalizeSourceName(itemName);
|
||||
if (seen[key]) return '';
|
||||
seen[key] = true;
|
||||
if (itemUrl) {
|
||||
return buildPill({ name: itemName, url: itemUrl }, itemName);
|
||||
}
|
||||
return buildPill(lookupByName(itemName), itemName);
|
||||
}).filter(Boolean).join('');
|
||||
}
|
||||
if (!pills) {
|
||||
var nums = [];
|
||||
var cm;
|
||||
while ((cm = citationRe.exec(body)) !== null) {
|
||||
if (nums.indexOf(cm[1]) === -1) nums.push(cm[1]);
|
||||
}
|
||||
citationRe.lastIndex = 0;
|
||||
if (nums.length) {
|
||||
body = body.replace(citationRe, '').replace(/\s+/g, ' ').trim();
|
||||
pills = nums.map(function (num) {
|
||||
var src = sources.find(function (s) { return String(s.nr) === num || Number(s.nr) === Number(num); });
|
||||
return src ? buildPill(src, src.name) : '';
|
||||
}).filter(Boolean).join('');
|
||||
}
|
||||
}
|
||||
|
||||
var head = '<div class="dev-bullet-head">'
|
||||
+ '<span class="dev-sources">' + pills + '</span>'
|
||||
+ '<span class="dev-time">' + htmlEscape(time) + ' \u00b7 ' + htmlEscape(date) + '</span>'
|
||||
+ '</div>';
|
||||
cards.push('<div class="dev-bullet">' + head + '<div class="dev-body">' + htmlEscape(body) + '</div></div>');
|
||||
}
|
||||
|
||||
if (!cards.length) return null;
|
||||
return '<div class="dev-list-heading">Neueste Entwicklungen</div>'
|
||||
+ '<div class="dev-list">' + cards.join('') + '</div>';
|
||||
}
|
||||
|
||||
/* ==================== SIMPLE MARKDOWN ==================== */
|
||||
function mdToHtml(md) {
|
||||
if (!md) return '';
|
||||
var lines = md.split('\n');
|
||||
var html = '';
|
||||
var inList = false;
|
||||
for (var i = 0; i < lines.length; i++) {
|
||||
var line = lines[i].trim();
|
||||
if (!line) {
|
||||
if (inList) { html += '</ul>'; inList = false; }
|
||||
continue;
|
||||
}
|
||||
line = line.replace(/\[(\d+[a-z]?)\]/g, '');
|
||||
line = line.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
|
||||
if (/^## /.test(line)) {
|
||||
if (inList) { html += '</ul>'; inList = false; }
|
||||
html += '<h2>' + line.replace(/^## /, '') + '</h2>';
|
||||
} else if (/^### /.test(line)) {
|
||||
if (inList) { html += '</ul>'; inList = false; }
|
||||
html += '<h3>' + line.replace(/^### /, '') + '</h3>';
|
||||
} else if (/^- /.test(line)) {
|
||||
if (!inList) { html += '<ul>'; inList = true; }
|
||||
html += '<li>' + line.replace(/^- /, '') + '</li>';
|
||||
} else {
|
||||
if (inList) { html += '</ul>'; inList = false; }
|
||||
html += '<p>' + line + '</p>';
|
||||
}
|
||||
}
|
||||
if (inList) html += '</ul>';
|
||||
return html;
|
||||
}
|
||||
|
||||
/* ==================== COUNT-UP ANIMATION ==================== */
|
||||
function countUp(el, target) {
|
||||
if (!el) return;
|
||||
if (!target) { el.textContent = '0'; return; }
|
||||
var duration = 1200;
|
||||
var startTime = null;
|
||||
function step(ts) {
|
||||
if (!startTime) startTime = ts;
|
||||
var progress = Math.min((ts - startTime) / duration, 1);
|
||||
var ease = 1 - Math.pow(1 - progress, 3);
|
||||
el.textContent = Math.floor(ease * target).toLocaleString('de-DE');
|
||||
if (progress < 1) requestAnimationFrame(step);
|
||||
}
|
||||
requestAnimationFrame(step);
|
||||
}
|
||||
|
||||
/* ==================== LIVE DATA ==================== */
|
||||
function timeAgo(dateStr) {
|
||||
var diffMin = Math.floor((Date.now() - new Date(dateStr).getTime()) / 60000);
|
||||
if (diffMin < 1) return 'Gerade eben aktualisiert';
|
||||
if (diffMin < 60) return 'Aktualisiert vor ' + diffMin + ' Min.';
|
||||
var diffH = Math.floor(diffMin / 60);
|
||||
if (diffH < 24) return 'Aktualisiert vor ' + diffH + ' Std.';
|
||||
var diffD = Math.floor(diffH / 24);
|
||||
return 'Aktualisiert vor ' + diffD + (diffD === 1 ? ' Tag' : ' Tagen');
|
||||
}
|
||||
|
||||
function loadLiveData() {
|
||||
fetch('/lagen/iran-konflikt/data/summary.json?t=' + Date.now())
|
||||
.then(function (r) { if (!r.ok) throw new Error(r.status); return r.json(); })
|
||||
.then(function (data) {
|
||||
var inc = data.incident || {};
|
||||
// summary.json has flat structure
|
||||
|
||||
var ea = document.getElementById('stat-articles');
|
||||
var es = document.getElementById('stat-sources');
|
||||
var ef = document.getElementById('stat-factchecks');
|
||||
countUp(ea, inc.article_count);
|
||||
countUp(es, inc.source_count);
|
||||
countUp(ef, inc.factcheck_count);
|
||||
|
||||
// Excerpt: pre-extracted in summary.json
|
||||
var excerptEl = document.getElementById('excerpt-text');
|
||||
if (excerptEl && data.zusammenfassung) {
|
||||
excerptEl.innerHTML = mdToHtml(data.zusammenfassung);
|
||||
}
|
||||
|
||||
// Store data and init map
|
||||
lageData['iran-konflikt'] = {
|
||||
locations: data.locations || [],
|
||||
category_labels: data.category_labels || {},
|
||||
article_count: inc.article_count || 0,
|
||||
source_count: inc.source_count || 0,
|
||||
factcheck_count: inc.factcheck_count || 0
|
||||
};
|
||||
dataLoaded = true;
|
||||
createMap();
|
||||
var mapSection = document.getElementById('map-section');
|
||||
if (mapSection) mapSection.classList.remove('map-hidden');
|
||||
showMarkers(data.locations || [], data.category_labels || {});
|
||||
})
|
||||
.catch(function () {
|
||||
});
|
||||
}
|
||||
|
||||
/* ==================== LEAFLET MAP ==================== */
|
||||
function clearMarkers() {
|
||||
if (markerLayer) { mapInstance.removeLayer(markerLayer); markerLayer = null; }
|
||||
if (legendControl && mapInstance) { mapInstance.removeControl(legendControl); legendControl = null; }
|
||||
}
|
||||
|
||||
function createMap() {
|
||||
if (mapInstance) return;
|
||||
var mapEl = document.getElementById('map-container');
|
||||
if (!mapEl || typeof L === 'undefined') return;
|
||||
|
||||
mapInstance = L.map(mapEl, {
|
||||
center: [33.0, 48.0], zoom: 5, zoomControl: true, scrollWheelZoom: true,
|
||||
minZoom: 2, maxBounds: [[-85, -180], [85, 180]], maxBoundsViscosity: 1.0
|
||||
});
|
||||
|
||||
L.tileLayer('https://tile.openstreetmap.de/{z}/{x}/{y}.png', {
|
||||
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
|
||||
maxZoom: 19, noWrap: true
|
||||
}).addTo(mapInstance);
|
||||
|
||||
setTimeout(function () { mapInstance.invalidateSize(); }, 500);
|
||||
}
|
||||
|
||||
function pulseIcon(color) {
|
||||
return L.divIcon({
|
||||
className: '',
|
||||
html: '<div class="pulse-marker-wrapper">'
|
||||
+ '<div class="pulse-marker-ring" style="border-color:' + color + '"></div>'
|
||||
+ '<div class="pulse-marker-ring" style="border-color:' + color + '"></div>'
|
||||
+ '<div class="pulse-marker-dot" style="background:' + color + ';box-shadow:0 0 10px ' + color + '"></div>'
|
||||
+ '</div>',
|
||||
iconSize: [20, 20], iconAnchor: [10, 10], popupAnchor: [0, -12]
|
||||
});
|
||||
}
|
||||
|
||||
function buildPopup(loc) {
|
||||
var html = '<strong style="color:#E8ECF4;">' + (loc.name || '') + '</strong>';
|
||||
if (loc.country_code) html += ' <span style="color:#8896AB;font-size:0.8rem;">(' + loc.country_code + ')</span>';
|
||||
html += '<br><span style="font-size:0.85rem;color:#8896AB;">' + (loc.article_count || 0) + ' Artikel</span>';
|
||||
if (loc.top_articles && loc.top_articles.length > 0) {
|
||||
html += '<div style="margin-top:6px;border-top:1px solid #1E2D45;padding-top:6px;">';
|
||||
loc.top_articles.forEach(function (a) {
|
||||
var hl = (a.headline || '').replace(/\*\*/g, '');
|
||||
if (hl.length > 60) hl = hl.substring(0, 60) + '\u2026';
|
||||
if (a.url) {
|
||||
html += '<a href="' + a.url + '" target="_blank" rel="noopener" style="color:#C8A851;font-size:0.8rem;display:block;margin-top:3px;text-decoration:none;">' + hl + '</a>';
|
||||
} else {
|
||||
html += '<span style="color:#8896AB;font-size:0.8rem;display:block;margin-top:3px;">' + hl + '</span>';
|
||||
}
|
||||
html += '<span style="color:#556B7A;font-size:0.7rem;">' + (a.source || '') + '</span>';
|
||||
});
|
||||
html += '</div>';
|
||||
}
|
||||
return html;
|
||||
}
|
||||
|
||||
function showMarkers(locations, apiLabels) {
|
||||
if (!mapInstance) createMap();
|
||||
clearMarkers();
|
||||
|
||||
var categoryColors = {
|
||||
primary: '#ef4444',
|
||||
secondary: '#f59e0b',
|
||||
tertiary: '#3b82f6',
|
||||
mentioned: '#7b7b7b'
|
||||
};
|
||||
|
||||
var defaultLabels = {
|
||||
primary: 'Hauptgeschehen',
|
||||
secondary: 'Reaktionen',
|
||||
tertiary: 'Beteiligte',
|
||||
mentioned: 'Erw\u00e4hnt'
|
||||
};
|
||||
|
||||
var categoryLabels = {};
|
||||
['primary', 'secondary', 'tertiary', 'mentioned'].forEach(function (k) {
|
||||
categoryLabels[k] = (apiLabels && apiLabels[k]) || defaultLabels[k];
|
||||
});
|
||||
|
||||
var clusterGroup = L.markerClusterGroup({
|
||||
maxClusterRadius: 50,
|
||||
spiderfyOnMaxZoom: true,
|
||||
showCoverageOnHover: false,
|
||||
zoomToBoundsOnClick: true,
|
||||
disableClusteringAtZoom: 10
|
||||
});
|
||||
|
||||
var usedCategories = {};
|
||||
var bounds = [];
|
||||
|
||||
locations.forEach(function (loc) {
|
||||
if (!loc.lat || !loc.lon) return;
|
||||
var cat = loc.category || 'mentioned';
|
||||
var color = categoryColors[cat] || '#7b7b7b';
|
||||
usedCategories[cat] = true;
|
||||
|
||||
var marker;
|
||||
if (cat === 'primary' || cat === 'secondary') {
|
||||
marker = L.marker([loc.lat, loc.lon], { icon: pulseIcon(color) });
|
||||
} else {
|
||||
marker = L.circleMarker([loc.lat, loc.lon], {
|
||||
radius: 5, fillColor: color, fillOpacity: 0.7,
|
||||
color: color, weight: 1, opacity: 0.9
|
||||
});
|
||||
}
|
||||
marker.bindPopup(buildPopup(loc), { maxWidth: 300 });
|
||||
clusterGroup.addLayer(marker);
|
||||
bounds.push([loc.lat, loc.lon]);
|
||||
});
|
||||
|
||||
markerLayer = clusterGroup;
|
||||
mapInstance.addLayer(markerLayer);
|
||||
|
||||
var legend = L.control({ position: 'bottomright' });
|
||||
legend.onAdd = function () {
|
||||
var div = L.DomUtil.create('div');
|
||||
div.style.cssText = 'background:#151D2E;padding:10px 14px;border-radius:4px;border:1px solid #1E2D45;box-shadow:0 2px 8px rgba(0,0,0,0.3);font-size:0.8rem;line-height:1.8;color:#E8ECF4;';
|
||||
var html = '<strong style="color:#C8A851;">Legende</strong><br>';
|
||||
['primary', 'secondary', 'tertiary', 'mentioned'].forEach(function (cat) {
|
||||
if (usedCategories[cat]) {
|
||||
html += '<span style="color:' + categoryColors[cat] + ';">●</span> ' + categoryLabels[cat] + '<br>';
|
||||
}
|
||||
});
|
||||
div.innerHTML = html;
|
||||
return div;
|
||||
};
|
||||
legendControl = legend;
|
||||
legendControl.addTo(mapInstance);
|
||||
|
||||
if (bounds.length > 0) {
|
||||
mapInstance.fitBounds(bounds, { padding: [30, 30], maxZoom: 7 });
|
||||
}
|
||||
|
||||
setTimeout(function () { mapInstance.invalidateSize(); }, 300);
|
||||
}
|
||||
|
||||
/* ==================== CONTACT MODAL ==================== */
|
||||
window.openContactModal = function () {
|
||||
document.getElementById('contact-modal').style.display = 'flex';
|
||||
document.body.style.overflow = 'hidden';
|
||||
if (window.umami) umami.track('contact_modal_open');
|
||||
};
|
||||
|
||||
window.closeContactModal = function () {
|
||||
document.getElementById('contact-modal').style.display = 'none';
|
||||
document.body.style.overflow = '';
|
||||
};
|
||||
|
||||
// Close on overlay click
|
||||
var modalOverlay = document.getElementById('contact-modal');
|
||||
if (modalOverlay) {
|
||||
modalOverlay.addEventListener('click', function (e) {
|
||||
if (e.target === modalOverlay) closeContactModal();
|
||||
});
|
||||
}
|
||||
|
||||
// Close on Escape
|
||||
document.addEventListener('keydown', function (e) {
|
||||
if (e.key === 'Escape' && modalOverlay && modalOverlay.style.display === 'flex') {
|
||||
closeContactModal();
|
||||
}
|
||||
});
|
||||
|
||||
// Form submit -> server-side SMTP
|
||||
window.submitContact = function (e) {
|
||||
e.preventDefault();
|
||||
var btn = e.target.querySelector('button[type="submit"]');
|
||||
if (btn) { btn.disabled = true; btn.textContent = 'Wird gesendet...'; }
|
||||
|
||||
fetch('/api/contact', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
name: document.getElementById('cf-name').value,
|
||||
organisation: document.getElementById('cf-org').value,
|
||||
email: document.getElementById('cf-email').value,
|
||||
message: document.getElementById('cf-message').value
|
||||
})
|
||||
})
|
||||
.then(function (r) { return r.json().then(function (d) { return { ok: r.ok, data: d }; }); })
|
||||
.then(function (res) {
|
||||
if (res.ok) {
|
||||
document.getElementById('contact-form').style.display = 'none';
|
||||
document.getElementById('form-success').style.display = 'block';
|
||||
if (window.umami) umami.track('contact_form_success');
|
||||
} else {
|
||||
alert(res.data.error || 'Fehler beim Senden');
|
||||
if (btn) { btn.disabled = false; btn.textContent = 'Nachricht senden'; }
|
||||
}
|
||||
})
|
||||
.catch(function () {
|
||||
alert('Verbindungsfehler. Bitte versuchen Sie es erneut.');
|
||||
if (btn) { btn.disabled = false; btn.textContent = 'Nachricht senden'; }
|
||||
});
|
||||
return false;
|
||||
};
|
||||
|
||||
/* ==================== LOAD DEEPFAKES DATA ==================== */
|
||||
function loadDeepfakesData() {
|
||||
fetch('/lagen/deepfakes/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-deepfakes');
|
||||
if (excerptEl && data.zusammenfassung) {
|
||||
var lines = data.zusammenfassung.split("\n");
|
||||
var filtered = lines.filter(function(l) { var t = l.trim(); return !t || t.indexOf("## ") === 0 || t.indexOf("- ") === 0; });
|
||||
excerptEl.innerHTML = mdToHtml(filtered.join("\n"));
|
||||
}
|
||||
|
||||
// Store data for map
|
||||
lageData['deepfakes'] = {
|
||||
locations: data.locations || [],
|
||||
category_labels: data.category_labels || {},
|
||||
article_count: (data.incident || {}).article_count || 0,
|
||||
source_count: (data.incident || {}).source_count || 0,
|
||||
factcheck_count: (data.incident || {}).factcheck_count || 0
|
||||
};
|
||||
})
|
||||
.catch(function () {
|
||||
var el = document.getElementById('excerpt-text-deepfakes');
|
||||
if (el) el.textContent = 'Daten konnten nicht geladen werden.';
|
||||
});
|
||||
}
|
||||
|
||||
/* ==================== 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 || {},
|
||||
article_count: (data.incident || {}).article_count || 0,
|
||||
source_count: (data.incident || {}).source_count || 0,
|
||||
factcheck_count: (data.incident || {}).factcheck_count || 0
|
||||
};
|
||||
})
|
||||
.catch(function () {
|
||||
var el = document.getElementById('excerpt-text-cyberangriffe');
|
||||
if (el) el.textContent = 'Daten konnten nicht geladen werden.';
|
||||
});
|
||||
}
|
||||
|
||||
/* ==================== INIT ==================== */
|
||||
loadLiveData();
|
||||
loadDeepfakesData();
|
||||
loadCyberangriffeData();
|
||||
})();
|
||||
BIN
vorschau/videos/hero-slide-1-monitoring.mp4
LFS
Normale Datei
BIN
vorschau/videos/hero-slide-1-monitoring.mp4
LFS
Normale Datei
Binäre Datei nicht angezeigt.
BIN
vorschau/videos/hero-slide-2-monitoring.mp4
LFS
Normale Datei
BIN
vorschau/videos/hero-slide-2-monitoring.mp4
LFS
Normale Datei
Binäre Datei nicht angezeigt.
BIN
vorschau/videos/hero-slide-3-monitoring.mp4
LFS
Normale Datei
BIN
vorschau/videos/hero-slide-3-monitoring.mp4
LFS
Normale Datei
Binäre Datei nicht angezeigt.
BIN
vorschau/videos/hero-slide-4-monitoring.mp4
LFS
Normale Datei
BIN
vorschau/videos/hero-slide-4-monitoring.mp4
LFS
Normale Datei
Binäre Datei nicht angezeigt.
BIN
vorschau/videos/hero-slide-5-monitoring.mp4
LFS
Normale Datei
BIN
vorschau/videos/hero-slide-5-monitoring.mp4
LFS
Normale Datei
Binäre Datei nicht angezeigt.
In neuem Issue referenzieren
Einen Benutzer sperren