From 520a63754697a85cf1ef994fb74c442704d69464 Mon Sep 17 00:00:00 2001 From: Claude Date: Thu, 30 Oct 2025 16:03:29 +0000 Subject: [PATCH 1/2] =?UTF-8?q?Deaktiviere=20Standort-Animation=20f=C3=BCr?= =?UTF-8?q?=20sofortige=20Anzeige?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Die Karte springt jetzt direkt zum Benutzerstandort ohne Flug-Animation ("Helikopter-Effekt"). Änderung: - map.setView() mit animate: false beim Standort - Sofortige Positionierung statt 1 Sekunde Animation - Bessere UX: Kein Warten auf Animation 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- index.html | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index 5c63bfe..b69d670 100644 --- a/index.html +++ b/index.html @@ -1030,10 +1030,9 @@ const lon = position.coords.longitude; userPosition = [lat, lon]; - // Center map on user location + // Center map on user location immediately (no animation) map.setView([lat, lon], 16, { - animate: true, - duration: 1 + animate: false }); // Remove old location marker if exists From 1aff2e4202e008ab4d72d1b93aa7080a5a95fb48 Mon Sep 17 00:00:00 2001 From: Claude Date: Tue, 16 Dec 2025 07:47:35 +0000 Subject: [PATCH 2/2] Verbessere Uhr-Design: Modern, elegant und responsiv MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Umfassende Verbesserung der Uhr unten rechts: Design-Verbesserungen: - Modernes Glassmorphism-Design mit Gradient-Hintergrund - Cyan-Akzente passend zur App-Farbgebung - Gradient-Text-Effekt für elegante Uhrzeit-Darstellung - Subtile Leuchteffekte (Glow) bei Hover - Dekorative Accent-Line am oberen Rand Typografie: - Tabular-nums für gleichbleibende Ziffernbreite - Verbesserte Lesbarkeit durch optimierten Letter-Spacing - Text-Shadows für besseren Kontrast - Uppercase-Datum mit Cyan-Färbung Interaktivität: - Smooth Hover-Animation mit Lift-Effekt - Verstärkter Glow-Effekt bei Hover - Sanfte Transitions mit cubic-bezier Responsive Design: - Optimiert für Tablets (768px) - Optimiert für Smartphones (480px) - Angepasste Schriftgrößen und Paddings - Kleinere Mindestbreite auf mobilen Geräten Browser-Kompatibilität: - Webkit-Prefixes für Safari - Backdrop-filter für modernen Blur-Effekt 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- index.html | 118 +++++++++++++++++++++++++++++++++++++++++------------ 1 file changed, 93 insertions(+), 25 deletions(-) diff --git a/index.html b/index.html index b69d670..1be189d 100644 --- a/index.html +++ b/index.html @@ -63,41 +63,88 @@ bottom: 40px; right: 40px; z-index: 1000; - background: rgba(20, 20, 30, 0.85); - backdrop-filter: blur(20px); - padding: 35px 45px; - border-radius: 25px; - box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6); - border: 1px solid rgba(255, 255, 255, 0.15); - transition: background 0.3s ease, box-shadow 0.3s ease; - min-width: 350px; - min-height: 160px; + background: linear-gradient(135deg, + rgba(20, 20, 35, 0.95), + rgba(10, 15, 30, 0.9) + ); + backdrop-filter: blur(25px) saturate(180%); + -webkit-backdrop-filter: blur(25px) saturate(180%); + padding: 30px 40px; + border-radius: 28px; + box-shadow: + 0 8px 32px rgba(0, 0, 0, 0.7), + 0 0 0 1px rgba(255, 255, 255, 0.1), + inset 0 1px 0 rgba(255, 255, 255, 0.1); + border: 1px solid rgba(0, 255, 255, 0.15); + transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); + min-width: 320px; display: flex; flex-direction: column; justify-content: center; + overflow: hidden; + } + + .clock-container::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 1px; + background: linear-gradient(90deg, + transparent, + rgba(0, 255, 255, 0.5), + transparent + ); + opacity: 0.6; } .clock-container:hover { - background: rgba(20, 20, 30, 0.95); - box-shadow: 0 12px 40px rgba(0, 0, 0, 0.7); - transform: none; + background: linear-gradient(135deg, + rgba(25, 25, 40, 0.98), + rgba(15, 20, 35, 0.95) + ); + box-shadow: + 0 12px 48px rgba(0, 0, 0, 0.8), + 0 0 0 1px rgba(0, 255, 255, 0.3), + inset 0 1px 0 rgba(255, 255, 255, 0.15), + 0 0 60px rgba(0, 255, 255, 0.1); + border-color: rgba(0, 255, 255, 0.3); + transform: translateY(-2px); } .time { - font-size: 84px; - font-weight: 200; - color: rgba(255, 255, 255, 0.98); - letter-spacing: -2px; + font-size: 72px; + font-weight: 300; + color: #ffffff; + letter-spacing: 2px; line-height: 1; - text-shadow: 0 3px 20px rgba(0, 0, 0, 0.8); + text-shadow: + 0 0 20px rgba(0, 255, 255, 0.3), + 0 4px 12px rgba(0, 0, 0, 0.8), + 0 2px 4px rgba(0, 0, 0, 0.6); + font-variant-numeric: tabular-nums; + transition: all 0.3s ease; + background: linear-gradient(180deg, + rgba(255, 255, 255, 1) 0%, + rgba(200, 240, 255, 0.95) 100% + ); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; } .date { - font-size: 18px; - color: rgba(255, 255, 255, 0.75); - margin-top: 8px; - font-weight: 400; - text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7); + font-size: 16px; + color: rgba(0, 255, 255, 0.85); + margin-top: 12px; + font-weight: 500; + letter-spacing: 0.5px; + text-transform: uppercase; + text-shadow: + 0 0 10px rgba(0, 255, 255, 0.4), + 0 2px 8px rgba(0, 0, 0, 0.6); + opacity: 0.9; } /* ===== Loading Indicator ===== */ @@ -315,17 +362,38 @@ /* ===== Responsive Design ===== */ @media (max-width: 768px) { .clock-container { - padding: 25px 30px; + padding: 20px 28px; bottom: 20px; right: 20px; + min-width: 260px; + border-radius: 24px; } .time { - font-size: 56px; + font-size: 52px; + letter-spacing: 1px; } .date { - font-size: 14px; + font-size: 13px; + margin-top: 10px; + } + } + + @media (max-width: 480px) { + .clock-container { + padding: 18px 24px; + bottom: 15px; + right: 15px; + min-width: 220px; + } + + .time { + font-size: 44px; + } + + .date { + font-size: 12px; } }