From 774a72bc226ecbf836bf532f282a6968f2179637 Mon Sep 17 00:00:00 2001 From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com> Date: Sat, 28 Feb 2026 20:11:49 +0000 Subject: [PATCH] Enhance the horoscope page with cosmic events and detailed sign information Refactor client/src/pages/horoscope.tsx to introduce AstroEventsSection and improve sign detail display with carousel navigation. Replit-Commit-Author: Agent Replit-Commit-Session-Id: 413891e8-d784-4bea-b9f5-91a5a68316b4 Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Event-Id: c5d5d9ec-0385-4ba4-9d22-4d8e94460720 Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/f209e72a-0939-48fa-84fc-57854de71967/413891e8-d784-4bea-b9f5-91a5a68316b4/oYq1Msd Replit-Helium-Checkpoint-Created: true --- client/src/pages/horoscope.tsx | 570 +++++++++++++++++++++------------ 1 file changed, 364 insertions(+), 206 deletions(-) diff --git a/client/src/pages/horoscope.tsx b/client/src/pages/horoscope.tsx index 5c4402c..387b9c5 100644 --- a/client/src/pages/horoscope.tsx +++ b/client/src/pages/horoscope.tsx @@ -1,12 +1,28 @@ -import { useState } from "react"; -import { Link } from "wouter"; -import { Star, Heart, Briefcase, TrendingUp, ChevronLeft, Calendar, CalendarDays, Sparkles, Lightbulb } from "lucide-react"; +import { useState, useEffect, useRef } from "react"; +import { Link, useParams } from "wouter"; +import { + Star, + Heart, + Briefcase, + TrendingUp, + ChevronLeft, + ChevronRight, + Calendar, + CalendarDays, + Sparkles, + Lightbulb, + AlertTriangle, + Moon, + Sun, + ArrowRight, +} from "lucide-react"; import Header from "@/components/header"; import Footer from "@/components/footer"; import { InArticleAd } from "@/components/adsense"; import { SIGNS, ELEMENT_COLORS, + ASTRO_EVENTS, getHoroscope, getRating, getLuckyNumbers, @@ -23,9 +39,335 @@ function StarRating({ count }: { count: number }) { ); } -export default function HoroscopePage() { - const [selected, setSelected] = useState(null); +function getEventIcon(icon: string) { + switch (icon) { + case "mercury": return ; + case "moon": return ; + case "venus": return ; + case "sun": return ; + case "saturn": return ; + case "newmoon": return ; + default: return ; + } +} + +function getEventColor(type: string) { + switch (type) { + case "retrograde": return { bg: "bg-amber-500/10", border: "border-amber-500/20", accent: "text-amber-400" }; + case "moon": return { bg: "bg-blue-500/10", border: "border-blue-500/20", accent: "text-blue-400" }; + case "transit": return { bg: "bg-pink-500/10", border: "border-pink-500/20", accent: "text-pink-400" }; + case "season": return { bg: "bg-emerald-500/10", border: "border-emerald-500/20", accent: "text-emerald-400" }; + default: return { bg: "bg-primary/10", border: "border-primary/20", accent: "text-primary" }; + } +} + +function AstroEventsSection() { + return ( +
+

+ + Aktuelle kosmische Ereignisse +

+
+ {ASTRO_EVENTS.map((event, i) => { + const ec = getEventColor(event.type); + return ( +
+
+ {getEventIcon(event.icon)} +
+

{event.title}

+

{event.dateRange}

+
+
+

{event.description}

+
+ {event.affectedSigns.map((s) => { + const sign = SIGNS.find((x) => x.name === s); + return ( + + {sign?.symbol} {s} + + ); + })} +
+
+ ); + })} +
+
+ ); +} + +function SignGrid({ onSelect, selectedIndex }: { onSelect: (i: number) => void; selectedIndex: number | null }) { + return ( +
+

+ + Ihr Sternzeichen wählen +

+
+ {SIGNS.map((sign, i) => { + const ec = ELEMENT_COLORS[sign.element]; + const horoscope = getHoroscope(i); + const isSelected = selectedIndex === i; + return ( + + ); + })} +
+
+ ); +} + +function SignDetail({ signIndex, onNavigate }: { signIndex: number; onNavigate: (i: number) => void }) { const [tab, setTab] = useState<"daily" | "weekly" | "monthly">("daily"); + const sign = SIGNS[signIndex]; + const ec = ELEMENT_COLORS[sign.element]; + const horoscope = getHoroscope(signIndex); + const luckyNums = getLuckyNumbers(signIndex); + const dailyColor = getDailyColor(signIndex); + const detailRef = useRef(null); + + const prevIndex = (signIndex - 1 + SIGNS.length) % SIGNS.length; + const nextIndex = (signIndex + 1) % SIGNS.length; + + useEffect(() => { + setTab("daily"); + }, [signIndex]); + + return ( +
+
+ +

+ {sign.symbol} + {sign.name} +

+ +
+ +
+
+
+
+ {sign.symbol} +
+
+

{sign.name}

+

{sign.date}

+
+ {sign.element} + Planet: {sign.planet} + Farbe: {sign.color} + Stein: {sign.stone} +
+
+
+ +
+
+ +

Liebe

+ +
+
+ +

Beruf

+ +
+
+ +

Gesundheit

+ +
+
+ +

Glückszahlen

+

{luckyNums.join(", ")}

+
+
+
+

Tagesfarbe

+

{dailyColor}

+
+
+ +

Kompatibel

+

{sign.compatible.join(", ")}

+
+
+ +
+ {(["daily", "weekly", "monthly"] as const).map((t) => ( + + ))} +
+ + {tab === "daily" && ( +
+
+

+ Allgemein +

+

{horoscope.general}

+
+
+

+ Liebe & Partnerschaft +

+

{horoscope.love}

+
+
+ )} + + {tab === "weekly" && ( +
+

+ Wochenhoroskop +

+

{horoscope.weekly}

+
+ )} + + {tab === "monthly" && ( +
+

+ Monatshoroskop +

+

{horoscope.monthly}

+
+ )} +
+ + + + {tab === "daily" && ( +
+
+
+

+ Beruf & Finanzen +

+

{horoscope.career}

+
+
+

+ Gesundheit & Wohlbefinden +

+

{horoscope.health}

+
+
+

+ + Tipp des Tages: {horoscope.tip} +

+
+
+
+ )} + + + +
+

Weitere Sternzeichen entdecken

+
+ {SIGNS.filter((_, i) => i !== signIndex).map((s) => { + const origIdx = SIGNS.findIndex((x) => x.name === s.name); + const sEc = ELEMENT_COLORS[s.element]; + return ( + + ); + })} +
+
+
+
+ ); +} + +export default function HoroscopePage() { + const params = useParams<{ sign?: string }>(); + const [selected, setSelected] = useState(null); + const detailRef = useRef(null); + + useEffect(() => { + if (params.sign) { + const idx = SIGNS.findIndex((s) => s.name.toLowerCase() === params.sign?.toLowerCase()); + if (idx >= 0) setSelected(idx); + } + }, [params.sign]); + + const handleSelect = (i: number) => { + setSelected(i); + setTimeout(() => { + detailRef.current?.scrollIntoView({ behavior: "smooth", block: "start" }); + }, 100); + }; return (
@@ -39,214 +381,30 @@ export default function HoroscopePage() {

- Tageshoroskop + Horoskop

- Was sagen die Sterne heute? Wählen Sie Ihr Sternzeichen für Ihr persönliches Tageshoroskop. + Entdecken Sie, was die Sterne für Sie bereithalten. Aktuelle kosmische Ereignisse und Ihr persönliches Tageshoroskop.

-
- {SIGNS.map((sign, i) => { - const ec = ELEMENT_COLORS[sign.element]; - return ( - - ); - })} + + + + +
+ {selected !== null ? ( + + ) : ( +
+ +

Wählen Sie oben Ihr Sternzeichen

+

für Ihr persönliches Tages-, Wochen- und Monatshoroskop

+
+ )}
- - {selected === null ? ( -
- -

Wählen Sie Ihr Sternzeichen oben aus

-
- ) : ( -
- {(() => { - const sign = SIGNS[selected]; - const ec = ELEMENT_COLORS[sign.element]; - const horoscope = getHoroscope(selected); - const luckyNums = getLuckyNumbers(selected); - const dailyColor = getDailyColor(selected); - - return ( - <> -
-
-
- {sign.symbol} -
-
-

{sign.name}

-

{sign.date}

-
- {sign.element} - Planet: {sign.planet} - Farbe: {sign.color} - Stein: {sign.stone} -
-
-
- -
-
- -

Liebe

- -
-
- -

Beruf

- -
-
- -

Gesundheit

- -
-
- -

Glückszahlen

-

{luckyNums.join(", ")}

-
-
-
-

Tagesfarbe

-

{dailyColor}

-
-
- -

Kompatibel

-

{sign.compatible.join(", ")}

-
-
- -
- {(["daily", "weekly", "monthly"] as const).map((t) => ( - - ))} -
- - {tab === "daily" && ( -
-
-

- Allgemein -

-

{horoscope.general}

-
-
-

- Liebe & Partnerschaft -

-

{horoscope.love}

-
-
- )} - - {tab === "weekly" && ( -
-

- Wochenhoroskop -

-

{horoscope.weekly}

-
- )} - - {tab === "monthly" && ( -
-

- Monatshoroskop -

-

{horoscope.monthly}

-
- )} -
- - - - {tab === "daily" && ( -
-
-
-

- Beruf & Finanzen -

-

{horoscope.career}

-
-
-

- Gesundheit & Wohlbefinden -

-

{horoscope.health}

-
-
-

- - Tipp des Tages: {horoscope.tip} -

-
-
-
- )} - - - -
-

Weitere Sternzeichen entdecken

-
- {SIGNS.filter((_, i) => i !== selected).map((s) => { - const origIdx = SIGNS.findIndex((x) => x.name === s.name); - const sEc = ELEMENT_COLORS[s.element]; - return ( - - ); - })} -
-
- - ); - })()} -
- )}
); -} +} \ No newline at end of file