From 747ea0f5e4e869aa350b371e26189b3952d9feae Mon Sep 17 00:00:00 2001 From: Claude Code Date: Mon, 6 Apr 2026 18:39:28 +0200 Subject: [PATCH] feat: Stats-Bar ueber Karussell, Pfeil-Navigation, Count-Up - Stats (Artikel/Quellen/Faktenchecks) als prominente Bar ueber dem Karussell mit Count-Up-Animation und gruener Live-Pulse-Anzeige - Pfeil-Buttons links/rechts fuer Karussell-Navigation - Text-Card breiter (860px) - Stats nicht mehr in der Card Co-Authored-By: Claude Opus 4.6 (1M context) --- vorschau/css/style.css | 24 +++++++++++++++++------- vorschau/index.html | 35 ++++++++++++++++++++--------------- vorschau/js/app.js | 30 +++++++++++++++++++++++++++--- 3 files changed, 64 insertions(+), 25 deletions(-) diff --git a/vorschau/css/style.css b/vorschau/css/style.css index 5d96621..ce59bc2 100644 --- a/vorschau/css/style.css +++ b/vorschau/css/style.css @@ -130,14 +130,29 @@ a { color:inherit; text-decoration:none; } .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; } +/* ==================== LIVE STATS BAR ==================== */ +.live-stats-bar { display:flex; justify-content:center; align-items:center; gap:48px; margin-bottom:40px; flex-wrap:wrap; } +.live-stat { text-align:center; } +.live-stat-value { display:block; font-size:2.8rem; 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; } +.live-stat-updated { font-size:0.82rem; color:var(--text-light); display:flex; align-items:center; gap:6px; } +.live-stat-updated::before { content:''; width:8px; height:8px; border-radius:50%; background:#4CAF50; animation:livePulse 2s infinite; } +@keyframes livePulse { 0%,100%{opacity:1} 50%{opacity:0.4} } + /* ==================== 3D CAROUSEL ==================== */ -.carousel-viewport { overflow:hidden; padding:40px 0 20px; } +.carousel-viewport { overflow:hidden; padding:20px 0; position:relative; } .carousel-track { display:flex; justify-content:center; align-items:center; position:relative; min-height:440px; } -.carousel-card { width:720px; 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 { 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 { transform:scale(1) translateX(0) rotateY(0); z-index:3; opacity:1; pointer-events:all; } .carousel-card.left { transform:scale(0.78) translateX(-110%) rotateY(12deg); z-index:1; opacity:0.5; pointer-events:all; } .carousel-card.right { transform:scale(0.78) translateX(110%) rotateY(-12deg); z-index:1; opacity:0.5; pointer-events:all; } .carousel-card.hidden { transform:scale(0.6) translateX(0); 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); } @@ -147,10 +162,6 @@ a { color:inherit; text-decoration:none; } .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-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; } .demo-excerpt { margin-bottom:16px; } .excerpt-text { font-size:0.88rem; color:var(--text); line-height:1.65; } @@ -160,7 +171,6 @@ a { color:inherit; text-decoration:none; } .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); } -.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; } diff --git a/vorschau/index.html b/vorschau/index.html index 5f763a8..7150915 100644 --- a/vorschau/index.html +++ b/vorschau/index.html @@ -112,31 +112,36 @@

Sehen Sie den Monitor in Aktion

Echte Lagebilder, erstellt vom AegisSight Monitor. Live und ohne Bearbeitung.

+ +
+
+ ... + Artikel +
+
+ ... + Quellen +
+
+ ... + Faktenchecks +
+
Daten werden geladen...
+
+
+ +