diff --git a/vorschau/css/style.css b/vorschau/css/style.css index a5bf232..b93d3cc 100644 --- a/vorschau/css/style.css +++ b/vorschau/css/style.css @@ -1,722 +1,235 @@ -/* AegisSight Monitor - Product Page (Light Mode) */ +/* 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; -} +@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; } -/* Variables */ :root { --navy: #0A1832; --navy-light: #132844; --gold: #C8A851; --gold-light: #D4B96A; --gold-dark: #B39645; - --white: #FFFFFF; - --gray-50: #F8FAFB; - --gray-100: #F0F2F5; - --gray-200: #E0E4E8; + --white: #FAFBFD; + --base: #F5F7FA; + --alt: #EDF0F5; + --alt-solid: #F0F3F7; + --gray-100: #E4E8EE; + --gray-200: #D0D5DE; --gray-400: #9AA5B4; --gray-600: #5A6478; - --text: #333333; + --text: #2A2F3A; --text-light: #5A6478; --radius: 8px; --radius-lg: 12px; - --shadow: 0 2px 8px rgba(10, 24, 50, 0.08); - --shadow-lg: 0 8px 24px rgba(10, 24, 50, 0.12); + --shadow: 0 2px 12px rgba(10,24,50,0.06); + --shadow-lg: 0 8px 32px rgba(10,24,50,0.1); --nav-height: 72px; } -/* Reset */ -*, *::before, *::after { - margin: 0; - padding: 0; - box-sizing: border-box; -} +*,*::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; } -html { - scroll-behavior: smooth; - scroll-padding-top: var(--nav-height); -} +/* ==================== 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); } -body { - font-family: 'Inter', system-ui, -apple-system, sans-serif; - font-size: 16px; - line-height: 1.6; - color: var(--text); - background: var(--white); - -webkit-font-smoothing: antialiased; -} +.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); } -img { max-width: 100%; height: auto; } -a { color: inherit; text-decoration: none; } - -/* Container */ -.container { - max-width: 1120px; - margin: 0 auto; - padding: 0 24px; -} - -/* ==================== NAVIGATION ==================== */ -.navbar { - position: fixed; - top: 0; - left: 0; - right: 0; - height: var(--nav-height); - background: var(--white); - z-index: 1000; - transition: box-shadow 0.3s; -} - -.navbar.scrolled { - box-shadow: 0 1px 12px rgba(10, 24, 50, 0.1); -} - -.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; - letter-spacing: 0.01em; -} - -.nav-menu a:hover { color: var(--gold); } - -/* Mobile Menu Toggle */ -.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 */ -.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; -} +.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 ==================== */ -.hero { - position: relative; - min-height: 85vh; - display: flex; - align-items: center; - padding-top: var(--nav-height); - overflow: hidden; -} +.hero { position:relative; min-height:88vh; display:flex; align-items:center; padding-top:var(--nav-height); overflow:hidden; background:var(--navy); } -.hero-bg { - position: absolute; - inset: 0; - background: - radial-gradient(ellipse at 80% 20%, rgba(200, 168, 81, 0.06) 0%, transparent 50%), - radial-gradient(ellipse at 20% 80%, rgba(10, 24, 50, 0.04) 0%, transparent 50%), - linear-gradient(135deg, var(--white) 0%, var(--gray-50) 100%); - z-index: 0; -} +.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-content { - position: relative; - z-index: 1; - max-width: 720px; - padding: 80px 24px; -} - -.hero-title { - font-size: 3.2rem; - font-weight: 700; - color: var(--navy); - line-height: 1.1; - margin-bottom: 20px; - letter-spacing: -0.02em; -} - -.hero-claim { - font-size: 1.4rem; - font-weight: 300; - color: var(--text); - line-height: 1.5; - margin-bottom: 16px; -} - -.gold { color: var(--gold); font-weight: 600; } - -.hero-sub { - font-size: 1.05rem; - color: var(--text-light); - line-height: 1.7; - margin-bottom: 36px; -} - -.hero-cta { - display: flex; - gap: 16px; - flex-wrap: wrap; -} +.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); } +.hero-claim { font-size:1.45rem; font-weight:300; line-height:1.5; margin-bottom:16px; color:rgba(255,255,255,0.9); } +.gold { color:var(--gold); font-weight:600; } +.hero-sub { font-size:1.05rem; color:rgba(255,255,255,0.65); line-height:1.7; margin-bottom:36px; } +.hero-cta { display:flex; gap:16px; flex-wrap:wrap; } /* ==================== 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 { - 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%; } +.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: 96px 0; -} +.section { padding:88px 0; } +.section-base { background:var(--base); } +.section-alt { background:var(--alt-solid); } +.section-dark { background:var(--navy); color:var(--white); } -.section-gray { - background: var(--gray-50); -} +.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 { font-size:1.05rem; color:var(--text-light); text-align:center; max-width:600px; margin:0 auto 48px; } -.section-dark { - background: var(--navy); - 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 { - font-size: 1.05rem; - color: var(--text-light); - text-align: center; - max-width: 600px; - margin: 0 auto 56px; -} +/* ==================== WAVE DIVIDERS ==================== */ +.wave-divider { line-height:0; margin:0; overflow:hidden; } +.wave-divider svg { display:block; width:100%; height:auto; } +.wave-dark-to-light { background:var(--alt-solid); } +.wave-alt-to-base { background:var(--base); } +.wave-base-to-alt { background:var(--base); } +.wave-base-to-dark { background:var(--base); } +.wave-dark-to-base { background:var(--base); } /* ==================== GRID ==================== */ -.grid-3 { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 32px; - margin-top: 48px; -} +.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; } +.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; } -/* ==================== PROBLEM CARDS ==================== */ -.problem-card { - text-align: center; - padding: 32px 24px; -} - -.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.15rem; - font-weight: 700; - color: var(--navy); - margin-bottom: 10px; -} - -.problem-card p { - font-size: 0.95rem; - color: var(--text-light); - line-height: 1.6; -} +/* ==================== 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; } /* ==================== WORKFLOW ==================== */ -.workflow { - display: flex; - align-items: flex-start; - justify-content: center; - gap: 0; - margin-top: 56px; -} +.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; } -.workflow-step { - flex: 1; - max-width: 300px; - text-align: center; - padding: 0 24px; -} +/* ==================== 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; } +.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; } +.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; } -.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%; -} +/* ==================== CAROUSEL ==================== */ +.carousel-wrapper { overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; margin:0 -24px; padding:0 24px; } +.carousel-wrapper::-webkit-scrollbar { display:none; } +.carousel { display:flex; gap:24px; padding:8px 0 16px; } +.carousel-card { min-width:340px; max-width:380px; flex-shrink:0; background:var(--white); border-radius:var(--radius-lg); padding:28px 24px; box-shadow:var(--shadow); position:relative; display:flex; flex-direction:column; } +.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; } -.workflow-step h3 { - font-size: 1.15rem; - font-weight: 700; - color: var(--navy); - margin-bottom: 10px; -} +.demo-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:16px; } +.demo-stat { text-align:center; padding:10px 6px; background:var(--alt-solid); border-radius:var(--radius); } +.stat-value { display:block; font-size:1.4rem; font-weight:700; color:var(--navy); line-height:1.2; } +.stat-label { display:block; font-size:0.72rem; color:var(--text-light); margin-top:3px; } -.workflow-step p { - font-size: 0.95rem; - color: var(--text-light); - line-height: 1.6; -} +.demo-excerpt { margin-bottom:16px; } +.excerpt-text { font-size:0.88rem; color:var(--text); line-height:1.65; max-height:120px; overflow:hidden; position:relative; transition:max-height 0.4s ease; } +.excerpt-text.expanded { max-height:600px; } +.excerpt-text:not(.expanded)::after { content:''; position:absolute; bottom:0; left:0; right:0; height:40px; background:linear-gradient(transparent,var(--white)); } +.excerpt-toggle { background:none; border:none; color:var(--gold); font-family:inherit; font-size:0.85rem; font-weight:600; cursor:pointer; padding:6px 0; } +.excerpt-toggle:hover { color:var(--gold-dark); } -.workflow-connector { - width: 60px; - height: 2px; - background: var(--gold); - margin-top: 23px; - flex-shrink: 0; - opacity: 0.5; -} +.demo-updated { font-size:0.82rem; color:var(--text-light); margin-bottom:16px; } +.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; } -/* ==================== FEATURE CARDS ==================== */ -.feature-card { - background: var(--white); - border-radius: var(--radius-lg); - padding: 32px 28px; - box-shadow: var(--shadow); - transition: box-shadow 0.3s, transform 0.3s; -} +/* ==================== 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-container { height:420px; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow); border:1px solid var(--gray-100); } -.feature-card:hover { - box-shadow: var(--shadow-lg); - transform: translateY(-2px); -} - -.feature-icon { - width: 52px; - height: 52px; - display: flex; - align-items: center; - justify-content: center; - background: var(--gray-50); - border-radius: var(--radius); - margin-bottom: 16px; -} - -.feature-card h3 { - font-size: 1.05rem; - font-weight: 700; - color: var(--navy); - margin-bottom: 8px; -} - -.feature-card p { - font-size: 0.9rem; - color: var(--text-light); - line-height: 1.6; -} - -/* ==================== DEMO CARDS ==================== */ -.demos-grid { - margin-top: 48px; -} - -.demo-card { - background: var(--white); - border-radius: var(--radius-lg); - padding: 32px 28px; - box-shadow: var(--shadow); - position: relative; - overflow: hidden; - display: flex; - flex-direction: column; -} - -.demo-card-live { - border: 2px solid var(--gold); -} - -.demo-card-placeholder { - border: 2px dashed var(--gray-200); - opacity: 0.6; -} - -.demo-badge { - display: inline-block; - padding: 4px 14px; - border-radius: 20px; - font-size: 0.75rem; - font-weight: 700; - letter-spacing: 0.08em; - text-transform: uppercase; - margin-bottom: 16px; - width: fit-content; - background: var(--gold); - color: var(--navy); -} - -.badge-soon { - background: var(--gray-100); - color: var(--gray-400); -} - -.demo-title { - font-size: 1.3rem; - font-weight: 700; - color: var(--navy); - margin-bottom: 20px; -} - -.demo-stats { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 12px; - margin-bottom: 20px; -} - -.demo-stat { - text-align: center; - padding: 12px 8px; - background: var(--gray-50); - border-radius: var(--radius); -} - -.stat-value { - display: block; - font-size: 1.5rem; - font-weight: 700; - color: var(--navy); - line-height: 1.2; -} - -.stat-label { - display: block; - font-size: 0.75rem; - color: var(--text-light); - margin-top: 4px; -} - -.demo-updated { - font-size: 0.85rem; - color: var(--text-light); - margin-bottom: 20px; - padding-bottom: 20px; - border-bottom: 1px solid var(--gray-100); -} - -.demo-placeholder-text { - font-size: 1rem; - color: var(--gray-400); - flex: 1; - display: flex; - align-items: center; - justify-content: center; - min-height: 120px; -} +/* Map pulse markers */ +.pulse-marker { width:12px; height:12px; border-radius:50%; position:relative; } +.pulse-marker::after { content:''; position:absolute; inset:-4px; border-radius:50%; border:2px solid; opacity:0.5; animation:mapPulse 2s infinite; } +.pulse-marker.cat-primary { background:#E74C3C; } +.pulse-marker.cat-primary::after { border-color:#E74C3C; } +.pulse-marker.cat-secondary { background:#F39C12; } +.pulse-marker.cat-secondary::after { border-color:#F39C12; } +.pulse-marker.cat-tertiary { background:#3498DB; } +.pulse-marker.cat-tertiary::after { border-color:#3498DB; } +.pulse-marker.cat-mentioned { background:#95A5A6; } +.pulse-marker.cat-mentioned::after { border-color:#95A5A6; } +@keyframes mapPulse { 0%{transform:scale(1);opacity:0.5} 100%{transform:scale(2.5);opacity:0} } /* ==================== TRUST ==================== */ -.trust-grid { - margin-top: 0; -} - -.trust-card { - text-align: center; - padding: 24px; -} - -.trust-icon { - margin-bottom: 16px; - filter: brightness(0) invert(1); -} - -.trust-card h3 { - font-size: 1.1rem; - font-weight: 700; - margin-bottom: 8px; -} - -.trust-card p { - font-size: 0.9rem; - opacity: 0.75; -} +.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; -} +.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; } /* ==================== 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; -} +.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 ==================== */ - -/* Tablet */ -@media (max-width: 1024px) { - .grid-3 { grid-template-columns: repeat(2, 1fr); } - .hero-title { font-size: 2.6rem; } - .section { padding: 72px 0; } - .workflow-connector { width: 40px; } +@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.8rem; } + .section { padding:64px 0; } + .workflow-connector { width:40px; } + .carousel-card { min-width:300px; } } -/* Mobile */ -@media (max-width: 768px) { - .nav-menu { display: none; } - .mobile-menu-toggle { display: flex; } - - .grid-3 { grid-template-columns: 1fr; gap: 20px; } - .hero { min-height: 70vh; } - .hero-content { padding: 48px 24px; } - .hero-title { font-size: 2rem; } - .hero-claim { font-size: 1.15rem; } - .section { padding: 56px 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; - } - - .hero-cta { - flex-direction: column; - } - - .hero-cta .btn { width: 100%; } - - .footer-content { - flex-direction: column; - text-align: center; - gap: 16px; - } - - .demo-stats { grid-template-columns: repeat(3, 1fr); } +@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-content { padding:48px 24px; } + .hero-title { font-size:2.1rem; } + .hero-claim { font-size:1.15rem; } + .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; } + .hero-cta { flex-direction:column; } + .hero-cta .btn { width:100%; } + .footer-content { flex-direction:column; text-align:center; gap:16px; } + .carousel-card { min-width:280px; } + #map-container { height:300px; } } -/* Small Mobile */ -@media (max-width: 480px) { - .hero-title { font-size: 1.7rem; } - .container { padding: 0 16px; } +@media(max-width:480px) { + .hero-title { font-size:1.8rem; } + .container { padding:0 16px; } + .carousel-card { min-width:260px; } } diff --git a/vorschau/index.html b/vorschau/index.html index ec21ebb..df07a56 100644 --- a/vorschau/index.html +++ b/vorschau/index.html @@ -7,70 +7,28 @@ + -
- +

Vorschau

Zugang nur mit Passwort

@@ -96,9 +54,9 @@ AegisSight +
+
Daten werden geladen...
+ Vollständiges Lagebild öffnen + + +
+
Demnächst
+

Weitere Lage

+

In Vorbereitung

+
+ +
+
Demnächst
+

Weitere Lage

+

In Vorbereitung

+
+ + + + +
+

Geografische Verortung der Meldungen

+
+
+ + + + +
+ +
+ -
+

Warum manuelle OSINT-Auswertung nicht skaliert

@@ -142,14 +178,14 @@

Tausende Quellen

-

Hunderte Quellen in dutzenden Sprachen — kein Analyst überblickt alles gleichzeitig.

+

Hunderte Quellen in dutzenden Sprachen. Kein Analyst überblickt alles gleichzeitig.

Zeitdruck

-

Neue Meldungen im Minutentakt — manuelle Auswertung kostet Zeit, die Sie nicht haben.

+

Neue Meldungen im Minutentakt. Manuelle Auswertung kostet Zeit, die Sie nicht haben.

@@ -162,15 +198,20 @@
+ +
+ +
+ -
+

So funktioniert der AegisSight Monitor

1

Erfassen

-

Hunderte Quellen werden kontinuierlich überwacht — Nachrichtenagenturen, Telegram, Social Media und mehr.

+

Hunderte Quellen werden kontinuierlich überwacht. Nachrichtenagenturen, Telegram, Social Media und mehr.

@@ -182,14 +223,19 @@
3

Berichten

-

Strukturierte Lagebilder mit Quellenbelegen, Faktencheck und Kartenansicht — in Echtzeit.

+

Strukturierte Lagebilder mit Quellenbelegen, Faktencheck und Kartenansicht. In Echtzeit.

+ +
+ +
+ -
+

Was der Monitor leistet

@@ -209,7 +255,7 @@
- +

Quellenanalyse

Automatische Aggregation und Deduplizierung aus hunderten internationalen Quellen.

@@ -239,76 +285,55 @@
- -
-
-

Sehen Sie den Monitor in Aktion

-

Echte Lagebilder, erstellt vom AegisSight Monitor — live und ohne Bearbeitung.

-
- -
-
LIVE
-

Iran-Konflikt

-
-
- — - Artikel -
-
- — - Quellen -
-
- — - Faktenchecks -
-
-
- Daten werden geladen... -
- Live ansehen -
- -
-
Demnächst
-

Weitere Lage

-

In Vorbereitung

-
- -
-
Demnächst
-

Weitere Lage

-

In Vorbereitung

-
-
-
-
+ +
+ +
- +
-
+

Unser Versprechen

+
- +
+ +
+

Enge Zusammenarbeit

+

Wir arbeiten Hand in Hand mit unseren Kunden für maßgeschneiderte Lösungen

+
+
+
+ +

Made in Germany

-

Entwickelt in Nordrhein-Westfalen

+

Klare, robuste und sichere Software nach deutschen Qualitätsstandards

- -

DSGVO-konform

-

Datenschutz nach europäischem Standard

+
+ +
+

Verlässliche Partnerschaft

+

Basierend auf gemeinsamen Werten und langfristigem Vertrauen

- -

Hosting in Deutschland

-

Alle Daten bleiben in Deutschland

+
+ +
+

Nachhaltigkeit

+

Fokus auf Sicherheit, Professionalität und zukunftssichere Lösungen

+ +
+ +
+ -
+

Interesse am AegisSight Monitor?

Sprechen Sie mit uns über Ihren Einsatzfall.

@@ -334,6 +359,7 @@
+ diff --git a/vorschau/js/app.js b/vorschau/js/app.js index 73747d1..a1b8199 100644 --- a/vorschau/js/app.js +++ b/vorschau/js/app.js @@ -1,16 +1,11 @@ -/* AegisSight Monitor - Product Page JS */ - +/* AegisSight Monitor - Product Page v2 */ (function () { 'use strict'; - /* ==================== NAVBAR SHADOW ==================== */ + /* ==================== NAVBAR ==================== */ var navbar = document.getElementById('navbar'); window.addEventListener('scroll', function () { - if (window.scrollY > 10) { - navbar.classList.add('scrolled'); - } else { - navbar.classList.remove('scrolled'); - } + navbar.classList.toggle('scrolled', window.scrollY > 10); }); /* ==================== MOBILE MENU ==================== */ @@ -18,55 +13,86 @@ var menu = document.getElementById('mobile-menu'); var overlay = document.getElementById('mobile-overlay'); - function openMenu() { - toggle.classList.add('active'); - menu.classList.add('open'); - overlay.classList.add('open'); - toggle.setAttribute('aria-expanded', 'true'); - menu.setAttribute('aria-hidden', 'false'); - } - function closeMenu() { toggle.classList.remove('active'); menu.classList.remove('open'); overlay.classList.remove('open'); toggle.setAttribute('aria-expanded', 'false'); - menu.setAttribute('aria-hidden', 'true'); } toggle.addEventListener('click', function () { - if (menu.classList.contains('open')) { - closeMenu(); - } else { - openMenu(); + 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); - - // Close on link click - menu.querySelectorAll('a').forEach(function (link) { - link.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 target = document.querySelector(this.getAttribute('href')); - if (target) { - e.preventDefault(); - target.scrollIntoView({ behavior: 'smooth' }); - } + var t = document.querySelector(this.getAttribute('href')); + if (t) { e.preventDefault(); t.scrollIntoView({ behavior: 'smooth' }); } }); }); - /* ==================== LIVE DATA FETCH ==================== */ - function timeAgo(dateStr) { - var now = new Date(); - var then = new Date(dateStr); - var diffMs = now - then; - var diffMin = Math.floor(diffMs / 60000); + /* ==================== HERO VIDEOS ==================== */ + var videos = document.querySelectorAll('.hero-video'); + var currentVideo = 0; + var ROTATION_INTERVAL = 12000; + var rotationTimer; + 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 startRotation() { + rotationTimer = setInterval(switchVideo, ROTATION_INTERVAL); + } + + // Pause when tab hidden + 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 (videos.length > 1) startRotation(); + + /* ==================== SIMPLE MARKDOWN ==================== */ + function mdToText(md) { + if (!md) return ''; + // Remove ## headers and bold markers, keep text + return md + .replace(/^## .+$/gm, '') + .replace(/^### .+$/gm, '') + .replace(/\*\*(.+?)\*\*/g, '$1') + .replace(/\[(\d+[a-z]?)\]/g, '') + .replace(/\n{3,}/g, '\n\n') + .trim() + .split('\n\n') + .filter(function (p) { return p.trim().length > 0; }) + .map(function (p) { return '

' + p.trim().replace(/\n/g, ' ') + '

'; }) + .join(''); + } + + /* ==================== 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); @@ -75,33 +101,103 @@ return 'Aktualisiert vor ' + diffD + (diffD === 1 ? ' Tag' : ' Tagen'); } + var liveData = null; + function loadLiveData() { fetch('/lagen/iran-konflikt/data/current.json?t=' + Date.now()) - .then(function (res) { - if (!res.ok) throw new Error('HTTP ' + res.status); - return res.json(); - }) + .then(function (r) { if (!r.ok) throw new Error(r.status); return r.json(); }) .then(function (data) { - var incident = data.incident || {}; - var lagebild = data.current_lagebild || {}; + liveData = data; + var inc = data.incident || {}; + var lag = data.current_lagebild || {}; - var elArticles = document.getElementById('stat-articles'); - var elSources = document.getElementById('stat-sources'); - var elFactchecks = document.getElementById('stat-factchecks'); - var elUpdated = document.getElementById('demo-updated'); + // Stats + var ea = document.getElementById('stat-articles'); + var es = document.getElementById('stat-sources'); + var ef = document.getElementById('stat-factchecks'); + var eu = document.getElementById('demo-updated'); + if (ea) ea.textContent = inc.article_count || 0; + if (es) es.textContent = inc.source_count || 0; + if (ef) ef.textContent = inc.factcheck_count || 0; + if (eu && lag.updated_at) eu.textContent = timeAgo(lag.updated_at); - if (elArticles) elArticles.textContent = incident.article_count || '—'; - if (elSources) elSources.textContent = incident.source_count || '—'; - if (elFactchecks) elFactchecks.textContent = incident.factcheck_count || '—'; - if (elUpdated && lagebild.updated_at) { - elUpdated.textContent = timeAgo(lagebild.updated_at); + // Excerpt + var excerptEl = document.getElementById('excerpt-text'); + var toggleBtn = document.getElementById('excerpt-toggle'); + if (excerptEl && lag.summary_markdown) { + var html = mdToText(lag.summary_markdown); + excerptEl.innerHTML = html; + toggleBtn.style.display = 'inline-block'; + + toggleBtn.addEventListener('click', function () { + var expanded = excerptEl.classList.toggle('expanded'); + this.textContent = expanded ? 'Weniger anzeigen' : 'Weiterlesen'; + }); + } + + // Map + if (data.locations && data.locations.length > 0) { + initMap(data.locations, data.category_labels || {}); } }) .catch(function () { - var elUpdated = document.getElementById('demo-updated'); - if (elUpdated) elUpdated.textContent = 'Daten derzeit nicht verfügbar'; + var eu = document.getElementById('demo-updated'); + if (eu) eu.textContent = 'Daten derzeit nicht verfügbar'; }); } + /* ==================== LEAFLET MAP ==================== */ + function initMap(locations, categoryLabels) { + var mapEl = document.getElementById('map-container'); + if (!mapEl || typeof L === 'undefined') return; + + var map = L.map(mapEl, { + center: [33.0, 48.0], + zoom: 5, + zoomControl: true, + scrollWheelZoom: false + }); + + L.tileLayer('https://tile.openstreetmap.de/{z}/{x}/{y}.png', { + attribution: '© OpenStreetMap', + maxZoom: 18 + }).addTo(map); + + var catColors = { + primary: '#E74C3C', + secondary: '#F39C12', + tertiary: '#3498DB', + mentioned: '#95A5A6' + }; + + var bounds = []; + + locations.forEach(function (loc) { + if (!loc.lat || !loc.lon) return; + var cat = loc.category || 'mentioned'; + var color = catColors[cat] || catColors.mentioned; + var catClass = 'cat-' + cat; + + var icon = L.divIcon({ + className: 'pulse-marker ' + catClass, + iconSize: [12, 12], + iconAnchor: [6, 6] + }); + + var marker = L.marker([loc.lat, loc.lon], { icon: icon }).addTo(map); + var label = categoryLabels[cat] || cat; + marker.bindPopup('' + loc.name + '
' + label + ' (' + (loc.article_count || 0) + ' Artikel)'); + bounds.push([loc.lat, loc.lon]); + }); + + if (bounds.length > 0) { + map.fitBounds(bounds, { padding: [30, 30], maxZoom: 7 }); + } + + // Fix tile rendering on hidden tab / late load + setTimeout(function () { map.invalidateSize(); }, 500); + } + + /* ==================== INIT ==================== */ loadLiveData(); })();