diff --git a/src/app/globals.css b/src/app/globals.css index 785967f..cc13868 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -3,7 +3,6 @@ @tailwind utilities; :root { - /* Theme Colors - Light */ --light-primary: rgb(87, 76, 145); --light-primary-rgb: 87, 76, 145; --light-background: rgb(224, 222, 226); @@ -24,34 +23,20 @@ --light-card-bg: rgba(65, 62, 62, 0.1); --light-info-bg: rgba(65, 62, 62, 0.2); --light-shadow-black: rgba(65, 62, 62, 0.2); - --light-shadow-white: rgba(224, 222, 226, 0.3); - --light-shadow-trending-light: rgba(87, 76, 145, 0.5); - --light-shadow-trending-dark: rgba(87, 76, 145, 0.3); --light-text-glow-normal: 0 0 10px rgba(87, 76, 145, 0.7); --light-text-glow-hover: 0 0 30px rgba(87, 76, 145, 0.7), 0 0 50px rgba(87, 76, 145, 0.5); --light-glow-pink-light: rgba(255, 192, 203, 0.7); --light-glow-pink-dark: rgba(190, 133, 195, 0.5); - --light-planet-symbol: #8a6cb3; /* Darker purple color for planet symbols */ - --light-ascendant: #cc6096; /* Pink color for ascendant */ - --light-gradient-purple: #a855f7; /* Purple for gradients */ - --light-gradient-pink: #ec4899; /* Pink for gradients */ - --light-glow-purple: rgba(168, 85, 247, 0.5); /* Purple glow effect */ - --light-white-80: rgba(255, 255, 255, 0.8); /* White 80% opacity */ - --light-white-60: rgba(255, 255, 255, 0.6); /* White 60% opacity */ - --light-white-90: rgba(255, 255, 255, 0.9); /* White 90% opacity */ - --light-white-70: rgba(255, 255, 255, 0.7); /* White 70% opacity */ - --light-white-10: rgba(255, 255, 255, 0.1); /* White 10% opacity */ - --light-white-05: rgba(255, 255, 255, 0.05); /* White 5% opacity */ - --light-white-20: rgba(255, 255, 255, 0.2); /* White 20% opacity */ - --light-white-30: rgba(255, 255, 255, 0.3); /* White 30% opacity */ - --light-black-10: rgba(0, 0, 0, 0.1); /* Black 10% opacity */ - --light-black-15: rgba(0, 0, 0, 0.15); /* Black 15% opacity */ - --light-nebula-purple: rgba(120, 119, 198, 0.3); /* Nebula purple */ - --light-nebula-pink: rgba(255, 119, 198, 0.3); /* Nebula pink */ - --light-nebula-blue: rgba(120, 219, 255, 0.2); /* Nebula blue */ + --light-planet-symbol: #8a6cb3; + --light-ascendant: #cc6096; + --light-gradient-purple: #a855f7; + --light-gradient-pink: #ec4899; + --light-glow-purple: rgba(168, 85, 247, 0.5); + --light-nebula-purple: rgba(120, 119, 198, 0.3); + --light-nebula-pink: rgba(255, 119, 198, 0.3); + --light-nebula-blue: rgba(120, 219, 255, 0.2); - /* Theme Colors - Dark */ --dark-primary: #60a5fa; --dark-primary-rgb: 96, 165, 250; --dark-background: rgb(8, 12, 18); @@ -72,38 +57,23 @@ --dark-card-bg: rgba(16, 20, 30, 0.8); --dark-info-bg: rgba(0, 170, 255, 0.1); --dark-shadow-black: rgba(0, 0, 0, 0.4); - --dark-shadow-white: rgba(255, 255, 255, 0.05); - --dark-shadow-trending-light: rgba(0, 170, 255, 0.5); - --dark-shadow-trending-dark: rgba(0, 170, 255, 0.3); --dark-text-glow-normal: 0 0 10px rgba(0, 170, 255, 0.7); --dark-text-glow-hover: 0 0 30px rgba(0, 170, 255, 0.7), 0 0 50px rgba(0, 170, 255, 0.5); --dark-glow-pink-light: rgba(255, 64, 129, 0.5); --dark-glow-pink-dark: rgba(52, 211, 153, 0.4); - --dark-planet-symbol: #8a6cb3; /* Darker purple color for planet symbols */ - --dark-ascendant: #cc6096; /* Pink color for ascendant */ - --dark-gradient-purple: #a855f7; /* Purple for gradients */ - --dark-gradient-pink: #ec4899; /* Pink for gradients */ - --dark-glow-purple: rgba(168, 85, 247, 0.5); /* Purple glow effect */ - --dark-white-80: rgba(255, 255, 255, 0.8); /* White 80% opacity */ - --dark-white-60: rgba(255, 255, 255, 0.6); /* White 60% opacity */ - --dark-white-90: rgba(255, 255, 255, 0.9); /* White 90% opacity */ - --dark-white-70: rgba(255, 255, 255, 0.7); /* White 70% opacity */ - --dark-white-10: rgba(255, 255, 255, 0.1); /* White 10% opacity */ - --dark-white-05: rgba(255, 255, 255, 0.05); /* White 5% opacity */ - --dark-white-20: rgba(255, 255, 255, 0.2); /* White 20% opacity */ - --dark-white-30: rgba(255, 255, 255, 0.3); /* White 30% opacity */ - --dark-black-10: rgba(0, 0, 0, 0.1); /* Black 10% opacity */ - --dark-black-15: rgba(0, 0, 0, 0.15); /* Black 15% opacity */ - --dark-nebula-purple: rgba(120, 119, 198, 0.3); /* Nebula purple */ - --dark-nebula-pink: rgba(255, 119, 198, 0.3); /* Nebula pink */ - --dark-nebula-blue: rgba(120, 219, 255, 0.2); /* Nebula blue */ + --dark-planet-symbol: #8a6cb3; + --dark-ascendant: #cc6096; + --dark-gradient-purple: #a855f7; + --dark-gradient-pink: #ec4899; + --dark-glow-purple: rgba(168, 85, 247, 0.5); + --dark-nebula-purple: rgba(120, 119, 198, 0.3); + --dark-nebula-pink: rgba(255, 119, 198, 0.3); + --dark-nebula-blue: rgba(120, 219, 255, 0.2); - /* Common Variables */ --transition-duration: 0.3s; --transition-timing: ease; - /* Default to light theme */ --color-primary: var(--light-primary); --color-primary-rgb: var(--light-primary-rgb); --color-background: var(--light-background); @@ -124,9 +94,6 @@ --color-card-bg: var(--light-card-bg); --color-info-bg: var(--light-info-bg); --color-shadow-black: var(--light-shadow-black); - --color-shadow-white: var(--light-shadow-white); - --color-shadow-trending-light: var(--light-shadow-trending-light); - --color-shadow-trending-dark: var(--light-shadow-trending-dark); --color-text-glow-normal: var(--light-text-glow-normal); --color-text-glow-hover: var(--light-text-glow-hover); --glow-pink-light: var(--light-glow-pink-light); @@ -136,22 +103,11 @@ --gradient-purple: var(--light-gradient-purple); --gradient-pink: var(--light-gradient-pink); --glow-purple: var(--light-glow-purple); - --white-80: var(--light-white-80); - --white-60: var(--light-white-60); - --white-90: var(--light-white-90); - --white-70: var(--light-white-70); - --white-10: var(--light-white-10); - --white-05: var(--light-white-05); - --white-20: var(--light-white-20); - --white-30: var(--light-white-30); - --black-10: var(--light-black-10); - --black-15: var(--light-black-15); --nebula-purple: var(--light-nebula-purple); --nebula-pink: var(--light-nebula-pink); --nebula-blue: var(--light-nebula-blue); --opacity-medium: 0.6; - /* Logia-specific colors */ --logia-error: #ef4444; --logia-error-dark: #dc2626; --logia-element-fire: var(--color-bullish); @@ -167,25 +123,15 @@ --background-color: var(--color-background); --glow-shadow-hover: var(--color-glow-shadow-hover); - /* Tooltip Variables */ --tooltip-font-size: 0.8rem; --tooltip-border-radius: 16px; --tooltip-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); --tooltip-shadow: var(--glow-shadow); --tooltip-blur: blur(8px); --tooltip-large-bg: var(--color-primary); - --tooltip-quick-bg: var(--color-primary); - /* Opacity Variables */ --opacity-80: 0.8; - --opacity-90: 0.9; - --opacity-100: 1; - --opacity-10: 0.1; - /* Transition Variables */ - --transition-all: all 0.3s ease; - - /* Common variables */ --primary-color: var(--color-primary); --text-color: var(--color-text); --background-color: var(--color-background); @@ -199,13 +145,8 @@ --info-bg: var(--color-info-bg); --text-glow: var(--color-text-glow-normal); --text-glow-hover: var(--color-text-glow-hover); - --base-shadow: 0 0 5px var(--glow-shadow); - --trending-shadow-light: var(--color-shadow-trending-light); - --trending-shadow-dark: var(--color-shadow-trending-dark); - --black-30: rgba(0, 0, 0, 0.3); /* Black 30% opacity */ } -/* Dark theme */ html.dark { --color-primary: var(--dark-primary); --color-primary-rgb: var(--dark-primary-rgb); @@ -227,9 +168,6 @@ html.dark { --color-card-bg: var(--dark-card-bg); --color-info-bg: var(--dark-info-bg); --color-shadow-black: var(--dark-shadow-black); - --color-shadow-white: var(--dark-shadow-white); - --color-shadow-trending-light: var(--dark-shadow-trending-light); - --color-shadow-trending-dark: var(--dark-shadow-trending-dark); --color-text-glow-normal: var(--dark-text-glow-normal); --color-text-glow-hover: var(--dark-text-glow-hover); --glow-pink-light: var(--dark-glow-pink-light); @@ -239,22 +177,11 @@ html.dark { --gradient-purple: var(--dark-gradient-purple); --gradient-pink: var(--dark-gradient-pink); --glow-purple: var(--dark-glow-purple); - --white-80: var(--dark-white-80); - --white-60: var(--dark-white-60); - --white-90: var(--dark-white-90); - --white-70: var(--dark-white-70); - --white-10: var(--dark-white-10); - --white-05: var(--dark-white-05); - --white-20: var(--dark-white-20); - --white-30: var(--dark-white-30); - --black-10: var(--dark-black-10); - --black-15: var(--dark-black-15); --nebula-purple: var(--dark-nebula-purple); --nebula-pink: var(--dark-nebula-pink); --nebula-blue: var(--dark-nebula-blue); --opacity-medium: 0.6; - /* Logia-specific colors */ --logia-error: #ef4444; --logia-error-dark: #dc2626; --logia-element-fire: var(--color-bullish); @@ -270,25 +197,15 @@ html.dark { --background-color: var(--color-background); --glow-shadow-hover: var(--color-glow-shadow-hover); - /* Tooltip Variables */ --tooltip-font-size: 0.8rem; --tooltip-border-radius: 16px; --tooltip-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); --tooltip-shadow: var(--glow-shadow); --tooltip-blur: blur(8px); --tooltip-large-bg: var(--color-primary); - --tooltip-quick-bg: var(--color-primary); - /* Opacity Variables */ --opacity-80: 0.8; - --opacity-90: 0.9; - --opacity-100: 1; - --opacity-10: 0.1; - - /* Transition Variables */ - --transition-all: all 0.3s ease; - /* Common variables */ --primary-color: var(--color-primary); --text-color: var(--color-primary); --background-color: var(--color-background); @@ -302,13 +219,8 @@ html.dark { --info-bg: var(--color-info-bg); --text-glow: var(--color-text-glow-normal); --text-glow-hover: var(--color-text-glow-hover); - --base-shadow: 0 0 5px var(--glow-shadow); - --trending-shadow-light: var(--color-shadow-trending-light); - --trending-shadow-dark: var(--color-shadow-trending-dark); - --black-30: rgba(0, 0, 0, 0.3); /* Black 30% opacity */ } -/* Base Styles */ body { font-family: var(--font-quicksand), @@ -324,7 +236,6 @@ body { text-rendering: optimizeLegibility; } -/* Animations */ @keyframes modalFadeIn { from { opacity: 0; @@ -360,7 +271,6 @@ body { } } -/* Utility Classes */ .glow-text { text-shadow: var(--text-glow); will-change: text-shadow; @@ -374,7 +284,6 @@ body { color: var(--bearish-color); } -/* Links */ a { color: var(--color-primary); text-decoration: none; @@ -385,12 +294,10 @@ a:hover { text-shadow: var(--text-glow-hover); } -/* Form Elements */ button { font-family: inherit; } -/* Transitions */ .theme-transition { transition: background-color var(--transition-duration) var(--transition-timing), @@ -398,14 +305,12 @@ button { border-color var(--transition-duration) var(--transition-timing); } -/* Reset */ * { box-sizing: border-box; margin: 0; padding: 0; } -/* Layout Components */ .app-container { min-height: 100vh; display: flex; diff --git a/src/app/predict/page.tsx b/src/app/predict/page.tsx index bbd5086..f479000 100644 --- a/src/app/predict/page.tsx +++ b/src/app/predict/page.tsx @@ -1,18 +1,14 @@ -import PredictCards from "../../components/PredictCards"; +import PredictCards from "../../components/Predict"; import predictStrings from "../../i18n/predict.json"; import "../../styles/predict.css"; export default function PredictPage() { return (
-
-
-

{predictStrings.en.title}

-
-
- -
+
+

{predictStrings.en.title}

+
); } diff --git a/src/components/LogiaChart.tsx b/src/components/LogiaChart.tsx index 7b5ec15..fad8092 100644 --- a/src/components/LogiaChart.tsx +++ b/src/components/LogiaChart.tsx @@ -198,7 +198,6 @@ async function calculateChartData( const chartData: ChartData = { planets, houses, - aspects: [], birthDate, birthTime, latitude: coordinates.lat, diff --git a/src/components/PredictCards.tsx b/src/components/Predict.tsx similarity index 56% rename from src/components/PredictCards.tsx rename to src/components/Predict.tsx index 61f364b..afe709d 100644 --- a/src/components/PredictCards.tsx +++ b/src/components/Predict.tsx @@ -1,9 +1,8 @@ "use client"; -import React, { useState } from "react"; +import { useState } from "react"; import predictI18n from "../i18n/predict.json"; -import { PREDICTION_TARGETS } from "../config/crypto"; -import "../styles/predictCards.css"; +import "../styles/predict.css"; import { FaChartLine } from "react-icons/fa"; interface PredictCard { @@ -12,24 +11,36 @@ interface PredictCard { subtitle: string; } -const worldEventCards: PredictCard[] = Object.entries(PREDICTION_TARGETS).map( - ([key, value]) => ({ - id: key, - title: value.title, - subtitle: `will ${key} reach ${value.target} by the end of the year?`, - }), -); +const worldEventCards: PredictCard[] = Object.entries( + predictI18n.finance.targets, +).map(([key, target]) => ({ + id: key, + title: + predictI18n.finance.assets[key as keyof typeof predictI18n.finance.assets], + subtitle: predictI18n.finance.subtitleTemplate + .replace("{key}", key) + .replace("{target}", target), +})); const PredictCards: React.FC = () => { const [selectedOptions, setSelectedOptions] = useState< - Record + Record< + string, + typeof predictI18n.options.yes | typeof predictI18n.options.no | null + > >({}); const [activeTab, setActiveTab] = useState< - "world" | "personal" | "relationships" | "finance" - >("personal"); + | typeof predictI18n.tabs.world + | typeof predictI18n.tabs.personal + | typeof predictI18n.tabs.relationships + | typeof predictI18n.tabs.finance + >(predictI18n.tabs.personal); const [question, setQuestion] = useState(""); - const handleOptionClick = (cardId: string, option: "yes" | "no") => { + const handleOptionClick = ( + cardId: string, + option: typeof predictI18n.options.yes | typeof predictI18n.options.no, + ) => { setSelectedOptions((prev) => ({ ...prev, [cardId]: prev[cardId] === option ? null : option, @@ -43,31 +54,32 @@ const PredictCards: React.FC = () => { } }; - const handleCalculateSynastry = () => { - // TODO: Implement synastry calculation logic - }; - const renderWorldEventCards = () => (
{worldEventCards.map((card) => (

{card.title}

-

{card.subtitle}

@@ -84,11 +96,11 @@ const PredictCards: React.FC = () => { type="text" value={question} onChange={(e) => setQuestion(e.target.value)} - placeholder="Type your question here..." + placeholder={predictI18n.personal.placeholder} className="question-input" />
@@ -106,15 +118,9 @@ const PredictCards: React.FC = () => { ))}

{predictI18n.synastry.conclusion}

-
-
@@ -123,19 +129,13 @@ const PredictCards: React.FC = () => { const renderWorldCards = () => (
-

World Predictions

+

{predictI18n.world.title}

-

- Explore predictions about global events, politics, and world affairs. -

-
- +

{predictI18n.world.description}

+
+
@@ -145,35 +145,35 @@ const PredictCards: React.FC = () => {
- {activeTab === "personal" + {activeTab === predictI18n.tabs.personal ? renderPersonalPredictions() - : activeTab === "relationships" + : activeTab === predictI18n.tabs.relationships ? renderRelationshipCards() - : activeTab === "finance" + : activeTab === predictI18n.tabs.finance ? renderWorldEventCards() : renderWorldCards()}
diff --git a/src/config/logiaChart.ts b/src/config/logiaChart.ts index 0c20c71..ede97ee 100644 --- a/src/config/logiaChart.ts +++ b/src/config/logiaChart.ts @@ -1,8 +1,3 @@ -import logiaChartTranslations from "../i18n/logiaChart.json"; - -export const ZODIAC_SIGNS = logiaChartTranslations.en - .zodiacSigns as readonly string[]; - export interface PlanetPosition { name: string; position: number; @@ -10,17 +5,9 @@ export interface PlanetPosition { house: number; } -export interface Aspect { - planet1: string; - planet2: string; - type: string; - orb: number; -} - export interface ChartData { planets: PlanetPosition[]; houses: number[]; - aspects: Aspect[]; birthDate: string; birthTime: string; latitude: number; diff --git a/src/i18n/predict.json b/src/i18n/predict.json index f1353ad..9ca92d2 100644 --- a/src/i18n/predict.json +++ b/src/i18n/predict.json @@ -12,6 +12,47 @@ "yes": "yes", "no": "no" }, + "personal": { + "placeholder": "type your question here...", + "submit": "submit" + }, + "world": { + "title": "world predictions", + "description": "explore predictions about global events, politics, and world affairs.", + "comingSoon": "coming soon" + }, + "finance": { + "subtitleTemplate": "will {key} reach {target} by the end of the year?", + "viewChartTitle": "view chart", + "assets": { + "bitcoin": "bitcoin price", + "ethereum": "ethereum price", + "solana": "solana price", + "cardano": "cardano price", + "pepe": "pepe price", + "tron": "tron price", + "monero": "monero price", + "hyperliquid": "hyperliquid price", + "story": "story price", + "worldcoin": "worldcoin price", + "trump": "trump price", + "bittensor": "bittensor price" + }, + "targets": { + "bitcoin": "$150,000", + "ethereum": "$5,000", + "solana": "$500", + "cardano": "$10", + "pepe": "$0.01", + "tron": "$1", + "monero": "$500", + "hyperliquid": "$100", + "story": "$10", + "worldcoin": "$50", + "trump": "$50", + "bittensor": "$400" + } + }, "synastry": { "title": "understanding synastry", "description": "synastry is the science of comparing two birth charts to understand the dynamics of a relationship. it reveals how two people interact, their compatibility, and potential challenges they might face together.", @@ -23,6 +64,7 @@ "natural strengths in the relationship", "timing of important relationship milestones" ], - "conclusion": "this analysis helps you understand the deeper dynamics of your relationships and provides guidance for building stronger, more harmonious connections." + "conclusion": "this analysis helps you understand the deeper dynamics of your relationships and provides guidance for building stronger, more harmonious connections.", + "calculateButton": "calculate a synastry" } } diff --git a/src/styles/logia.css b/src/styles/logia.css index 3bf645e..5778d52 100644 --- a/src/styles/logia.css +++ b/src/styles/logia.css @@ -21,7 +21,6 @@ --color-glow-shadow: var(--glow-shadow); } -/* Dark theme overrides */ html.dark { --color-primary-rgb: 96, 165, 250; --color-primary: #60a5fa; @@ -778,8 +777,4 @@ html.dark { font-size: 2rem; margin-bottom: 1rem; } - - .logia-subtitle { - font-size: 1rem; - } } diff --git a/src/styles/predict.css b/src/styles/predict.css index e9b19cd..59a660c 100644 --- a/src/styles/predict.css +++ b/src/styles/predict.css @@ -1,7 +1,3 @@ -@tailwind base; -@tailwind components; -@tailwind utilities; - .predict-header { width: 100%; margin-top: 3rem; @@ -28,81 +24,304 @@ } } +.predict-cards-container { + width: 100%; + max-width: min(1200px, 95vw); + margin: 0 auto; + padding: clamp(0.5rem, 2vw, 1rem); +} + +.predict-tabs { + display: flex; + width: 100%; + margin-bottom: clamp(2rem, 5vh, 3rem); + border-bottom: 2px solid var(--color-primary); + background-color: var(--card-bg); + border-radius: clamp(1rem, 3vw, 2rem) clamp(1rem, 3vw, 2rem) 0 0; + overflow: hidden; +} + +.tab-button { + flex: 1; + padding: clamp(0.6rem, 1.5vw, 1rem); + border: none; + background: none; + font-size: clamp(1rem, 2vw, 1.2rem); + font-weight: 600; + color: var(--text-color); + cursor: pointer; + transition: all 0.3s ease; + text-align: center; + position: relative; +} + +.tab-button:hover { + background-color: var(--color-primary); + color: var(--background-color); +} + +.tab-button.active { + color: var(--text-color); + background-color: var(--card-bg); + font-weight: 700; + box-shadow: 0 -2px 0 var(--color-primary) inset; +} + +.tab-button.active::after { + content: ""; + position: absolute; + bottom: 0; + left: 0; + width: 100%; + height: 2px; + background-color: var(--color-primary); +} + .predict-cards-grid { display: grid; - grid-template-columns: repeat(4, 1fr); - gap: 1.5rem; - max-width: 1200px; - margin: 0 auto; - padding: 0 1rem; + grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); + gap: clamp(2em, 5vw, 4em); + width: 100%; + max-width: min(1200px, 95vw); + margin-top: clamp(2rem, 5vh, 4rem); + padding: 0 clamp(0.5rem, 2vw, 1rem); } .predict-card { - background: var(--white-90); - border-radius: 12px; - padding: 1.5rem; - box-shadow: 0 4px 6px var(--black-10); - transition: transform 0.2s ease; - border: 2px solid var(--primary-color); + position: relative; + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + min-height: 160px; + padding: clamp(1.5rem, 3vw, 2rem); + border-radius: clamp(1rem, 3vw, 2rem); + border: 1px solid var(--color-primary); + background-color: var(--card-bg); + box-shadow: + 0 8px 32px var(--color-shadow-black), + 0 0 15px var(--glow-shadow), + 0 0 30px var(--glow-shadow); + backdrop-filter: blur(8px); + transition: all 0.3s ease; } .predict-card:hover { transform: translateY(-2px); + border-color: var(--color-primary); + box-shadow: + 0 12px 40px var(--color-shadow-black), + 0 0 20px var(--glow-shadow-hover), + 0 0 40px var(--glow-shadow), + 0 0 60px var(--glow-pink-light); } -.card-title { - font-size: 1.25rem; - font-weight: 600; +.predict-card .card-header { + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; margin-bottom: 0.5rem; - color: var(--primary-color); } -.card-subtitle { - font-size: 0.875rem; +.predict-card .card-title { + font-size: clamp(1.3rem, 2.2vw, 1.5rem); + font-weight: 800; + margin: 0; color: var(--text-color); - margin-bottom: 1.5rem; + flex: 1; } -.card-options { +.predict-card .card-subtitle { + font-size: clamp(0.85rem, 1.5vw, 0.9rem); + line-height: 1.6; + font-weight: bold; + color: var(--text-color); + opacity: var(--opacity-light); + margin-bottom: clamp(1rem, 2vw, 1.5rem); +} + +.predict-card .card-options { display: flex; - gap: 1rem; + gap: clamp(1rem, 2vw, 1.5rem); + width: 100%; justify-content: center; } -.option-button { - padding: 0.5rem 1.5rem; - border-radius: 20px; - border: 1px solid var(--primary-color); +.predict-card .option-button { + flex: 1; + max-width: 120px; + padding: clamp(0.4rem, 1vw, 0.5rem) clamp(0.8rem, 1.5vw, 1rem); + font-size: clamp(0.85rem, 1.5vw, 0.9rem); + font-weight: 700; + color: var(--color-primary); background: transparent; - color: var(--primary-color); + border: 1px solid var(--color-primary); + border-radius: 0.4rem; cursor: pointer; - transition: all 0.2s ease; + transition: all 0.3s ease; } -.option-button:hover { - background: var(--primary-color); - color: var(--white-90); +.predict-card .option-button:hover { + color: var(--background-color); + background: var(--color-primary); + transform: translateY(-1px); } -.option-button.selected { - background: var(--primary-color); - color: var(--white-90); +.predict-card .option-button.selected { + color: var(--background-color); + background: var(--color-primary); + box-shadow: 0 0 15px var(--glow-shadow); } -@media (max-width: 1024px) { - .predict-cards-grid { - grid-template-columns: repeat(3, 1fr); - } +.personal-predictions-container { + width: 100%; + max-width: min(800px, 95vw); + margin: 0 auto; + padding: clamp(2rem, 5vh, 4rem) clamp(0.5rem, 2vw, 1rem); } -@media (max-width: 768px) { - .predict-cards-grid { - grid-template-columns: repeat(2, 1fr); - } +.question-form { + display: flex; + flex-direction: column; + gap: 1rem; + width: 100%; } -@media (max-width: 480px) { - .predict-cards-grid { - grid-template-columns: 1fr; - } +.question-input { + width: 100%; + padding: clamp(1rem, 2vw, 1.5rem); + font-size: clamp(1rem, 2vw, 1.2rem); + border: 2px solid var(--color-primary); + border-radius: clamp(0.5rem, 1vw, 1rem); + background-color: var(--card-bg); + color: var(--text-color); + transition: all 0.3s ease; +} + +.question-input:focus { + outline: none; + border-color: var(--color-primary); + box-shadow: 0 0 15px var(--glow-shadow); +} + +.question-input::placeholder { + color: var(--text-color); + opacity: 0.6; +} + +.submit-button { + align-self: center; + padding: clamp(0.8rem, 1.5vw, 1rem) clamp(2rem, 3vw, 3rem); + font-size: clamp(0.9rem, 1.5vw, 1.1rem); + font-weight: 600; + color: var(--background-color); + background: var(--color-primary); + border: none; + border-radius: clamp(0.5rem, 1vw, 1rem); + cursor: pointer; + transition: all 0.3s ease; + min-width: 200px; +} + +.submit-button:hover { + transform: translateY(-2px); + box-shadow: 0 0 20px var(--glow-shadow-hover); +} + +.submit-button:active { + transform: translateY(0); +} + +.button-container { + display: flex; + justify-content: center; + margin-top: 2rem; +} + +.world-card { + max-width: 800px; + margin: 2rem auto; + text-align: left; +} + +.world-content { + width: 100%; +} + +.world-content p { + color: var(--text-color); + line-height: 1.2; + margin-bottom: 0.8rem; + font-size: clamp(0.85rem, 1.5vw, 0.9rem); + opacity: var(--opacity-light); + font-weight: 600; +} + +.synastry-card { + max-width: 800px; + margin: 2rem auto; + text-align: left; +} + +.synastry-content { + width: 100%; +} + +.synastry-content p { + color: var(--text-color); + line-height: 1.2; + margin-bottom: 0.8rem; + font-size: clamp(0.85rem, 1.5vw, 0.9rem); + opacity: var(--opacity-light); + font-weight: 600; +} + +.synastry-content ul { + list-style-type: none; + padding-left: 1.5rem; + margin: 1rem 0; +} + +.synastry-content li { + color: var(--text-color); + margin-bottom: 0.5rem; + position: relative; + padding-left: 1.5rem; + line-height: 1.3; + font-size: clamp(0.85rem, 1.5vw, 0.9rem); + opacity: var(--opacity-light); + font-weight: 600; +} + +.synastry-content li:before { + content: "•"; + color: var(--color-primary); + position: absolute; + left: 0; + font-size: 1.2rem; +} + +.predict-view-chart-button { + background: none; + border: none; + color: var(--color-primary); + cursor: pointer; + padding: 0.5rem; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + transition: all 0.2s ease; + margin-left: 0.5rem; +} + +.predict-view-chart-button:hover { + background-color: rgba(var(--color-primary-rgb), 0.1); + transform: scale(1.1); +} + +.predict-view-chart-button svg { + width: 1.2rem; + height: 1.2rem; } diff --git a/src/styles/predictCards.css b/src/styles/predictCards.css deleted file mode 100644 index 2e82380..0000000 --- a/src/styles/predictCards.css +++ /dev/null @@ -1,299 +0,0 @@ -@tailwind base; -@tailwind components; -@tailwind utilities; - -.predict-cards-container { - width: 100%; - max-width: min(1200px, 95vw); - margin: 0 auto; - padding: clamp(0.5rem, 2vw, 1rem); -} - -.predict-tabs { - display: flex; - width: 100%; - margin-bottom: clamp(2rem, 5vh, 3rem); - border-bottom: 2px solid var(--color-primary); - background-color: var(--card-bg); - border-radius: clamp(1rem, 3vw, 2rem) clamp(1rem, 3vw, 2rem) 0 0; - overflow: hidden; -} - -.tab-button { - flex: 1; - padding: clamp(0.6rem, 1.5vw, 1rem); - border: none; - background: none; - font-size: clamp(1rem, 2vw, 1.2rem); - font-weight: 600; - color: var(--text-color); - cursor: pointer; - transition: all 0.3s ease; - text-align: center; - position: relative; -} - -.tab-button:hover { - background-color: var(--color-primary); - color: var(--background-color); -} - -.tab-button.active { - color: var(--text-color); - background-color: var(--card-bg); - font-weight: 700; - box-shadow: 0 -2px 0 var(--color-primary) inset; -} - -.tab-button.active::after { - content: ""; - position: absolute; - bottom: 0; - left: 0; - width: 100%; - height: 2px; - background-color: var(--color-primary); -} - -.predict-cards-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); - gap: clamp(2em, 5vw, 4em); - width: 100%; - max-width: min(1200px, 95vw); - margin-top: clamp(2rem, 5vh, 4rem); - padding: 0 clamp(0.5rem, 2vw, 1rem); -} - -.predict-card { - position: relative; - display: flex; - flex-direction: column; - align-items: center; - text-align: center; - min-height: 160px; - padding: clamp(1.5rem, 3vw, 2rem); - border-radius: clamp(1rem, 3vw, 2rem); - border: 1px solid var(--color-primary); - background-color: var(--card-bg); - box-shadow: - 0 8px 32px var(--color-shadow-black), - 0 0 15px var(--glow-shadow), - 0 0 30px var(--glow-shadow); - backdrop-filter: blur(8px); - transition: all 0.3s ease; -} - -.predict-card:hover { - transform: translateY(-2px); - border-color: var(--color-primary); - box-shadow: - 0 12px 40px var(--color-shadow-black), - 0 0 20px var(--glow-shadow-hover), - 0 0 40px var(--glow-shadow), - 0 0 60px var(--glow-pink-light); -} - -.card-header { - display: flex; - justify-content: space-between; - align-items: center; - width: 100%; - margin-bottom: 0.5rem; -} - -.card-title { - font-size: clamp(1.3rem, 2.2vw, 1.5rem); - font-weight: 800; - margin: 0; - color: var(--text-color); - flex: 1; -} - -.card-subtitle { - font-size: clamp(0.85rem, 1.5vw, 0.9rem); - line-height: 1.6; - font-weight: bold; - color: var(--text-color); - opacity: var(--opacity-light); - margin-bottom: clamp(1rem, 2vw, 1.5rem); -} - -.card-options { - display: flex; - gap: clamp(1rem, 2vw, 1.5rem); - width: 100%; - justify-content: center; -} - -.option-button { - flex: 1; - max-width: 120px; - padding: clamp(0.4rem, 1vw, 0.5rem) clamp(0.8rem, 1.5vw, 1rem); - font-size: clamp(0.85rem, 1.5vw, 0.9rem); - font-weight: 700; - color: var(--color-primary); - background: transparent; - border: 1px solid var(--color-primary); - border-radius: 0.4rem; - cursor: pointer; - transition: all 0.3s ease; -} - -.option-button:hover { - color: var(--background-color); - background: var(--color-primary); - transform: translateY(-1px); -} - -.option-button.selected { - color: var(--background-color); - background: var(--color-primary); - box-shadow: 0 0 15px var(--glow-shadow); -} - -.personal-predictions-container { - width: 100%; - max-width: min(800px, 95vw); - margin: 0 auto; - padding: clamp(2rem, 5vh, 4rem) clamp(0.5rem, 2vw, 1rem); -} - -.question-form { - display: flex; - flex-direction: column; - gap: 1rem; - width: 100%; -} - -.question-input { - width: 100%; - padding: clamp(1rem, 2vw, 1.5rem); - font-size: clamp(1rem, 2vw, 1.2rem); - border: 2px solid var(--color-primary); - border-radius: clamp(0.5rem, 1vw, 1rem); - background-color: var(--card-bg); - color: var(--text-color); - transition: all 0.3s ease; -} - -.question-input:focus { - outline: none; - border-color: var(--color-primary); - box-shadow: 0 0 15px var(--glow-shadow); -} - -.question-input::placeholder { - color: var(--text-color); - opacity: 0.6; -} - -.submit-button { - align-self: center; - padding: clamp(0.8rem, 1.5vw, 1rem) clamp(2rem, 3vw, 3rem); - font-size: clamp(0.9rem, 1.5vw, 1.1rem); - font-weight: 600; - color: var(--background-color); - background: var(--color-primary); - border: none; - border-radius: clamp(0.5rem, 1vw, 1rem); - cursor: pointer; - transition: all 0.3s ease; - min-width: 200px; -} - -.submit-button:hover { - transform: translateY(-2px); - box-shadow: 0 0 20px var(--glow-shadow-hover); -} - -.submit-button:active { - transform: translateY(0); -} - -.world-card { - max-width: 800px; - margin: 2rem auto; - text-align: left; -} - -.world-content { - width: 100%; -} - -.world-content p { - color: var(--text-color); - line-height: 1.2; - margin-bottom: 0.8rem; - font-size: clamp(0.85rem, 1.5vw, 0.9rem); - opacity: var(--opacity-light); - font-weight: 600; -} - -.synastry-card { - max-width: 800px; - margin: 2rem auto; - text-align: left; -} - -.synastry-content { - width: 100%; -} - -.synastry-content p { - color: var(--text-color); - line-height: 1.2; - margin-bottom: 0.8rem; - font-size: clamp(0.85rem, 1.5vw, 0.9rem); - opacity: var(--opacity-light); - font-weight: 600; -} - -.synastry-content ul { - list-style-type: none; - padding-left: 1.5rem; - margin: 1rem 0; -} - -.synastry-content li { - color: var(--text-color); - margin-bottom: 0.5rem; - position: relative; - padding-left: 1.5rem; - line-height: 1.3; - font-size: clamp(0.85rem, 1.5vw, 0.9rem); - opacity: var(--opacity-light); - font-weight: 600; -} - -.synastry-content li:before { - content: "•"; - color: var(--color-primary); - position: absolute; - left: 0; - font-size: 1.2rem; -} - -.view-chart-button { - background: none; - border: none; - color: var(--color-primary); - cursor: pointer; - padding: 0.5rem; - border-radius: 50%; - display: flex; - align-items: center; - justify-content: center; - transition: all 0.2s ease; - margin-left: 0.5rem; -} - -.view-chart-button:hover { - background-color: rgba(var(--color-primary-rgb), 0.1); - transform: scale(1.1); -} - -.view-chart-button svg { - width: 1.2rem; - height: 1.2rem; -} diff --git a/src/utils/chartFilling.ts b/src/utils/chartFilling.ts index 2df9905..98d867b 100644 --- a/src/utils/chartFilling.ts +++ b/src/utils/chartFilling.ts @@ -1,9 +1,4 @@ -import { - ChartData, - ZODIAC_SIGNS, - HOUSE_ANGLES, - ZODIAC_SYMBOLS, -} from "../config/logiaChart"; +import { ChartData, HOUSE_ANGLES, ZODIAC_SYMBOLS } from "../config/logiaChart"; import * as d3 from "d3"; import chartStrings from "../i18n/logiaChart.json"; @@ -34,12 +29,13 @@ export function updateOrderedSigns( ascendantSign: string, chartData: ChartData, ) { - const ascendantIndex = ZODIAC_SIGNS.findIndex( + const zodiacSigns = chartStrings.en.zodiacSigns; + const ascendantIndex = zodiacSigns.findIndex( (sign) => sign.toLowerCase() === ascendantSign.toLowerCase(), ); const orderedArray = [ - ...ZODIAC_SIGNS.slice(ascendantIndex), - ...ZODIAC_SIGNS.slice(0, ascendantIndex), + ...zodiacSigns.slice(ascendantIndex), + ...zodiacSigns.slice(0, ascendantIndex), ]; orderedSigns = new Map(); orderedArray.forEach((sign) => { @@ -66,13 +62,14 @@ export function drawZodiacSymbols( .attr("class", "tooltip tooltip-large"); const orderedArray = Array.from(orderedSigns.keys()); + const zodiacSigns = chartStrings.en.zodiacSigns; for (let index = 0; index < 12; index++) { const houseAngle = HOUSE_ANGLES[index]; const middleAngle = ((houseAngle + 15) * Math.PI) / 180; const x = zodiacRadius * Math.cos(middleAngle); const y = zodiacRadius * Math.sin(middleAngle); const signName = orderedArray[index].toLowerCase() as ZodiacSign; - const signSymbol = ZODIAC_ORDER[ZODIAC_SIGNS.indexOf(orderedArray[index])]; + const signSymbol = ZODIAC_ORDER[zodiacSigns.indexOf(orderedArray[index])]; g.append("text") .attr("x", x) @@ -123,27 +120,22 @@ export function drawPlanets( const signData = orderedSigns.get(sign); if (!signData) return; - // Calculate the middle angle for this house (15 degrees into the house) const middleAngle = ((houseAngle + 15) * Math.PI) / 180; - // Count planets in this sign and sort by angle (largest to smallest) const sortedPlanets = [...signData.planets].sort((a, b) => { const aPos = (a.position - houseAngle + 360) % 360; const bPos = (b.position - houseAngle + 360) % 360; - return bPos - aPos; // Reversed order + return bPos - aPos; }); const planetsInSign = sortedPlanets.length; - // Calculate spread based on number of planets (max 24 degrees to stay within house) const angleSpread = Math.min(24, planetsInSign * 5); sortedPlanets.forEach((planet, planetIndex) => { - // Calculate position within the spread - const angleStep = angleSpread / (planetsInSign - 1 || 1); // Avoid division by zero + const angleStep = angleSpread / (planetsInSign - 1 || 1); const offset = (planetIndex - (planetsInSign - 1) / 2) * angleStep; const angle = middleAngle + (offset * Math.PI) / 180; - // Calculate position with consistent radius const x = (radius - 45) * Math.cos(angle); const y = (radius - 45) * Math.sin(angle); @@ -234,65 +226,6 @@ export function drawPlanets( .attr("class", "planet-text ascendant-text"); } -export function calculateAspects( - planets: { name: string; position: number }[], -) { - const aspects = []; - for (let i = 0; i < planets.length; i++) { - for (let j = i + 1; j < planets.length; j++) { - const angle = Math.abs(planets[i].position - planets[j].position); - const normalizedAngle = Math.min(angle, 360 - angle); - - const aspectOrbs = { - conjunction: 8, - opposition: 8, - trine: 8, - square: 8, - sextile: 6, - }; - - // Check for aspects - if (normalizedAngle <= aspectOrbs.conjunction) { - aspects.push({ - planet1: planets[i].name, - planet2: planets[j].name, - type: "conjunction", - orb: normalizedAngle, - }); - } else if (Math.abs(normalizedAngle - 180) <= aspectOrbs.opposition) { - aspects.push({ - planet1: planets[i].name, - planet2: planets[j].name, - type: "opposition", - orb: Math.abs(normalizedAngle - 180), - }); - } else if (Math.abs(normalizedAngle - 120) <= aspectOrbs.trine) { - aspects.push({ - planet1: planets[i].name, - planet2: planets[j].name, - type: "trine", - orb: Math.abs(normalizedAngle - 120), - }); - } else if (Math.abs(normalizedAngle - 90) <= aspectOrbs.square) { - aspects.push({ - planet1: planets[i].name, - planet2: planets[j].name, - type: "square", - orb: Math.abs(normalizedAngle - 90), - }); - } else if (Math.abs(normalizedAngle - 60) <= aspectOrbs.sextile) { - aspects.push({ - planet1: planets[i].name, - planet2: planets[j].name, - type: "sextile", - orb: Math.abs(normalizedAngle - 60), - }); - } - } - } - return aspects; -} - export function calculateHouses(ascendantDegrees: number): number[] { return Array.from( { length: 12 }, diff --git a/src/utils/movingStars.tsx b/src/utils/movingStars.tsx index a0950ec..e852aed 100644 --- a/src/utils/movingStars.tsx +++ b/src/utils/movingStars.tsx @@ -1,6 +1,6 @@ "use client"; -import React, { useEffect, useState } from "react"; +import { useEffect, useState } from "react"; interface StarPosition { top: number; @@ -15,42 +15,32 @@ const DecorativeStars: React.FC = () => { const [stars, setStars] = useState([]); useEffect(() => { - // Create a grid of positions const gridSize = 15; const positions: StarPosition[] = []; - // Generate base grid positions for (let row = 0; row < gridSize; row++) { for (let col = 0; col < gridSize; col++) { - // Skip positions in the header area if (row < 2) continue; - // Calculate base position const baseTop = (row / gridSize) * 100; const baseLeft = (col / gridSize) * 100; - // Only place stars in the outer areas (around the text box) const isInOuterArea = - baseTop < 25 || // Above the box - baseTop > 85 || // Below the box - baseLeft < 10 || // Left of the box - baseLeft > 90; // Right of the box + baseTop < 25 || baseTop > 85 || baseLeft < 10 || baseLeft > 90; if (!isInOuterArea) continue; - // Add more randomness to the position - const top = baseTop + (Math.random() * 12 - 6); // ±6% variation - const left = baseLeft + (Math.random() * 12 - 6); // ±6% variation + const top = baseTop + (Math.random() * 12 - 6); + const left = baseLeft + (Math.random() * 12 - 6); const twinkleDelay = Math.random() * 2; const floatDelay = Math.random() * 7; - const size = Math.random() * 12 + 8; // Size range: 8-20px - const opacity = Math.random() * 0.5 + 0.2; // Varying opacity: 0.2-0.7 + const size = Math.random() * 12 + 8; + const opacity = Math.random() * 0.5 + 0.2; positions.push({ top, left, twinkleDelay, floatDelay, size, opacity }); } } - // Shuffle the positions and take the first 40 const shuffledPositions = positions .sort(() => Math.random() - 0.5) .slice(0, 40);