Lets-Vibe-CodeOnChain

Running

App Files Files Community

karhar92 commited on Apr 6

Commit

5bde1a8

verified ·

1 Parent(s): 017046b

Add 2 files

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +597 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Astrology4
-emoji: 😻
-colorFrom: green
-colorTo: indigo
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: astrology4
+emoji: 🐳
+colorFrom: blue
+colorTo: purple
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,597 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Siddhar Astro AI Platform</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Catamaran:wght@400;700&display=swap');
+        :root {
+            --cosmic-indigo: #4b0082;
+            --electric-violet: #8a2be2;
+            --glowing-gold: #ffd700;
+            --deep-space: #0f0f1a;
+            --neon-pink: #ff6ec7;
+        }
+        body {
+            font-family: 'Poppins', sans-serif;
+            background-color: var(--deep-space);
+            color: white;
+            overflow-x: hidden;
+        }
+        .tamil-font {
+            font-family: 'Catamaran', sans-serif;
+        }
+        .glow-border {
+            border: 1px solid var(--electric-violet);
+            box-shadow: 0 0 10px var(--electric-violet),
+                        inset 0 0 5px var(--electric-violet);
+        }
+        .glow-text {
+            text-shadow: 0 0 5px var(--glowing-gold);
+        }
+        .card-glow {
+            box-shadow: 0 0 15px rgba(138, 43, 226, 0.5);
+        }
+        .planet {
+            animation: float 6s ease-in-out infinite;
+        }
+        @keyframes float {
+            0% { transform: translateY(0px); }
+            50% { transform: translateY(-10px); }
+            100% { transform: translateY(0px); }
+        }
+        .sun-pulse {
+            animation: pulse 3s infinite;
+        }
+        @keyframes pulse {
+            0% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.7); }
+            70% { box-shadow: 0 0 0 10px rgba(255, 215, 0, 0); }
+            100% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0); }
+        }
+        .yantra-spin {
+            animation: spin 30s linear infinite;
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+        .fade-in {
+            animation: fadeIn 1.5s ease-in;
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; }
+            to { opacity: 1; }
+        }
+        .language-toggle {
+            position: relative;
+            width: 80px;
+            height: 35px;
+            border-radius: 25px;
+            background: var(--cosmic-indigo);
+            cursor: pointer;
+        }
+        .language-toggle .slider {
+            position: absolute;
+            width: 35px;
+            height: 35px;
+            border-radius: 50%;
+            background: var(--glowing-gold);
+            transition: all 0.3s;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        .language-toggle.active .slider {
+            transform: translateX(45px);
+        }
+        .navagraha-chart {
+            position: relative;
+            width: 250px;
+            height: 250px;
+        }
+        .planet-orbit {
+            position: absolute;
+            border: 1px dashed rgba(255, 255, 255, 0.2);
+            border-radius: 50%;
+        }
+        .planet-position {
+            position: absolute;
+            width: 20px;
+            height: 20px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        .avatar-container {
+            perspective: 1000px;
+        }
+        .avatar {
+            transition: transform 0.5s;
+        }
+        .avatar:hover {
+            transform: rotateY(20deg);
+        }
+        .dos-card {
+            transition: all 0.3s;
+        }
+        .dos-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 20px rgba(138, 43, 226, 0.3);
+        }
+        .timeline-tab {
+            position: relative;
+        }
+        .timeline-tab.active::after {
+            content: '';
+            position: absolute;
+            bottom: -5px;
+            left: 0;
+            width: 100%;
+            height: 3px;
+            background: var(--glowing-gold);
+            border-radius: 3px;
+        }
+        .input-field:focus {
+            outline: none;
+            box-shadow: 0 0 0 2px var(--electric-violet);
+        }
+        .generate-btn {
+            background: linear-gradient(45deg, var(--electric-violet), var(--neon-pink));
+            transition: all 0.3s;
+        }
+        .generate-btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 5px 15px rgba(138, 43, 226, 0.4);
+        }
+        .mood-selector input[type="radio"]:checked + label {
+            border-color: var(--glowing-gold);
+            box-shadow: 0 0 10px var(--glowing-gold);
+        }
+    </style>
+</head>
+<body class="min-h-screen flex flex-col">
+    <!-- Header with Logo -->
+    <header class="py-4 px-6 flex justify-between items-center bg-black bg-opacity-50 border-b border-purple-900">
+        <div class="flex items-center space-x-3">
+            <div class="w-12 h-12 rounded-full bg-purple-900 flex items-center justify-center sun-pulse">
+                <div class="w-8 h-8 rounded-full bg-yellow-400"></div>
+            </div>
+            <h1 class="text-2xl font-bold glow-text">
+                <span class="text-purple-400">Siddhar</span>
+                <span class="text-yellow-400">Astro</span>
+                <span class="text-pink-400">AI</span>
+            </h1>
+        </div>
+        <div class="flex items-center space-x-4">
+            <div class="language-toggle flex items-center" id="languageToggle">
+                <div class="slider">
+                    <span class="text-xs font-bold text-black">EN</span>
+                </div>
+            </div>
+            <button class="px-4 py-2 rounded-full bg-purple-800 hover:bg-purple-700 transition">
+                <i class="fas fa-user-circle mr-2"></i>Login
+            </button>
+        </div>
+    </header>
+    <!-- Main Dashboard -->
+    <main class="flex-grow flex flex-col md:flex-row p-4 md:p-6 gap-6">
+        <!-- Left Panel - Input Form -->
+        <div class="w-full md:w-1/2 bg-gray-900 bg-opacity-70 rounded-xl p-6 glow-border fade-in">
+            <h2 class="text-xl font-bold mb-6 text-purple-300 flex items-center">
+                <i class="fas fa-user-astronaut mr-2"></i> Your Cosmic Info
+            </h2>
+            <form id="astroForm" class="space-y-5">
+                <div>
+                    <label class="block text-sm font-medium text-gray-300 mb-1">Full Name</label>
+                    <input type="text" class="w-full px-4 py-3 rounded-lg bg-gray-800 border border-gray-700 focus:border-purple-500 input-field" placeholder="Enter your name">
+                </div>
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    <div>
+                        <label class="block text-sm font-medium text-gray-300 mb-1">Date of Birth</label>
+                        <input type="date" class="w-full px-4 py-3 rounded-lg bg-gray-800 border border-gray-700 focus:border-purple-500 input-field">
+                    </div>
+                    <div>
+                        <label class="block text-sm font-medium text-gray-300 mb-1">Time of Birth</label>
+                        <input type="time" class="w-full px-4 py-3 rounded-lg bg-gray-800 border border-gray-700 focus:border-purple-500 input-field">
+                    </div>
+                </div>
+                <div>
+                    <label class="block text-sm font-medium text-gray-300 mb-1">Place of Birth</label>
+                    <input type="text" class="w-full px-4 py-3 rounded-lg bg-gray-800 border border-gray-700 focus:border-purple-500 input-field" placeholder="City, Country">
+                </div>
+                <div>
+                    <label class="block text-sm font-medium text-gray-300 mb-1">Today's Mood</label>
+                    <div class="grid grid-cols-4 gap-2 mt-2 mood-selector">
+                        <input type="radio" name="mood" id="mood1" class="hidden" checked>
+                        <label for="mood1" class="flex flex-col items-center p-2 border border-transparent rounded-lg cursor-pointer hover:bg-gray-800">
+                            <span class="text-2xl">🔥</span>
+                            <span class="text-xs mt-1">Hustle</span>
+                        </label>
+                        <input type="radio" name="mood" id="mood2" class="hidden">
+                        <label for="mood2" class="flex flex-col items-center p-2 border border-transparent rounded-lg cursor-pointer hover:bg-gray-800">
+                            <span class="text-2xl">😌</span>
+                            <span class="text-xs mt-1">Chill</span>
+                        </label>
+                        <input type="radio" name="mood" id="mood3" class="hidden">
+                        <label for="mood3" class="flex flex-col items-center p-2 border border-transparent rounded-lg cursor-pointer hover:bg-gray-800">
+                            <span class="text-2xl">💕</span>
+                            <span class="text-xs mt-1">Romantic</span>
+                        </label>
+                        <input type="radio" name="mood" id="mood4" class="hidden">
+                        <label for="mood4" class="flex flex-col items-center p-2 border border-transparent rounded-lg cursor-pointer hover:bg-gray-800">
+                            <span class="text-2xl">🧠</span>
+                            <span class="text-xs mt-1">Focused</span>
+                        </label>
+                    </div>
+                </div>
+                <div>
+                    <label class="block text-sm font-medium text-gray-300 mb-1">Focus Area</label>
+                    <select class="w-full px-4 py-3 rounded-lg bg-gray-800 border border-gray-700 focus:border-purple-500 input-field">
+                        <option value="general">General</option>
+                        <option value="career">Career</option>
+                        <option value="love">Love & Relationships</option>
+                        <option value="health">Health</option>
+                        <option value="finance">Finance</option>
+                        <option value="spiritual">Spiritual Growth</option>
+                    </select>
+                </div>
+                <div>
+                    <label class="block text-sm font-medium text-gray-300 mb-1">Avatar Style</label>
+                    <div class="flex space-x-4 mt-2">
+                        <div class="flex items-center">
+                            <input type="radio" name="avatar" id="siddharAvatar" class="hidden" checked>
+                            <label for="siddharAvatar" class="flex items-center cursor-pointer">
+                                <div class="w-10 h-10 rounded-full bg-yellow-600 flex items-center justify-center mr-2">
+                                    <i class="fas fa-om text-white"></i>
+                                </div>
+                                <span>Siddhar</span>
+                            </label>
+                        </div>
+                        <div class="flex items-center">
+                            <input type="radio" name="avatar" id="genzAvatar" class="hidden">
+                            <label for="genzAvatar" class="flex items-center cursor-pointer">
+                                <div class="w-10 h-10 rounded-full bg-pink-600 flex items-center justify-center mr-2">
+                                    <i class="fas fa-robot text-white"></i>
+                                </div>
+                                <span>Gen Z</span>
+                            </label>
+                        </div>
+                    </div>
+                </div>
+                <div class="pt-4">
+                    <button type="button" id="generateBtn" class="w-full py-3 px-6 rounded-full font-bold generate-btn flex items-center justify-center">
+                        <i class="fas fa-stars mr-2"></i> Generate Horoscope
+                    </button>
+                </div>
+            </form>
+            <div class="mt-8 pt-6 border-t border-gray-800">
+                <h3 class="text-sm font-semibold text-purple-300 mb-3">Today's Siddhar Wisdom</h3>
+                <div class="bg-gray-800 bg-opacity-50 rounded-lg p-4 glow-border">
+                    <p class="italic text-gray-300">"அகத்தின் அழகு முகத்தில் தெரியும்; முகத்தின் அழகு கண்ணில் தெரியும்."</p>
+                    <p class="mt-2 text-sm text-gray-400">"Inner beauty reflects on the face; facial beauty reflects in the eyes."</p>
+                </div>
+            </div>
+        </div>
+        <!-- Right Panel - Results -->
+        <div class="w-full md:w-1/2 bg-gray-900 bg-opacity-70 rounded-xl p-6 glow-border fade-in" id="resultsPanel" style="display: none;">
+            <div class="flex justify-between items-center mb-6">
+                <h2 class="text-xl font-bold text-purple-300 flex items-center">
+                    <i class="fas fa-crystal-ball mr-2"></i> Your Horoscope
+                </h2>
+                <div class="flex space-x-2">
+                    <button class="timeline-tab active px-3 py-1 text-sm font-medium">Today</button>
+                    <button class="timeline-tab px-3 py-1 text-sm font-medium text-gray-400 hover:text-white">7 Days</button>
+                    <button class="timeline-tab px-3 py-1 text-sm font-medium text-gray-400 hover:text-white">30 Days</button>
+                </div>
+            </div>
+            <!-- Daily Prediction -->
+            <div class="mb-6">
+                <div class="flex items-center mb-3">
+                    <h3 class="text-lg font-semibold text-yellow-400">Daily Prediction</h3>
+                    <span class="ml-3 px-2 py-1 text-xs rounded-full bg-pink-900 text-pink-200">Taurus</span>
+                </div>
+                <div class="bg-gray-800 bg-opacity-50 rounded-lg p-4 mb-4 card-glow">
+                    <p class="text-gray-300">Today, the Moon's position in your 5th house enhances creativity and romantic prospects. However, Saturn's aspect suggests being cautious with financial decisions. A good day to start new projects but avoid lending money.</p>
+                </div>
+                <div class="flex items-center text-sm text-gray-400">
+                    <i class="fas fa-bolt mr-1 text-yellow-400"></i>
+                    <span>Today's Vibe: <span class="font-medium text-yellow-400">🔥 Hustle with caution</span></span>
+                </div>
+            </div>
+            <!-- Dos and Don'ts -->
+            <div class="mb-6">
+                <h3 class="text-lg font-semibold text-yellow-400 mb-3">Dos & Don'ts</h3>
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
+                    <div class="dos-card bg-green-900 bg-opacity-40 rounded-lg p-3 flex items-start">
+                        <div class="w-8 h-8 rounded-full bg-green-700 flex items-center justify-center mr-3 flex-shrink-0">
+                            <i class="fas fa-check text-green-200"></i>
+                        </div>
+                        <div>
+                            <h4 class="font-medium text-green-300">Do</h4>
+                            <p class="text-sm text-gray-300">Wear green today for prosperity</p>
+                        </div>
+                    </div>
+                    <div class="dos-card bg-red-900 bg-opacity-40 rounded-lg p-3 flex items-start">
+                        <div class="w-8 h-8 rounded-full bg-red-700 flex items-center justify-center mr-3 flex-shrink-0">
+                            <i class="fas fa-times text-red-200"></i>
+                        </div>
+                        <div>
+                            <h4 class="font-medium text-red-300">Don't</h4>
+                            <p class="text-sm text-gray-300">Avoid important meetings after 3PM</p>
+                        </div>
+                    </div>
+                    <div class="dos-card bg-green-900 bg-opacity-40 rounded-lg p-3 flex items-start">
+                        <div class="w-8 h-8 rounded-full bg-green-700 flex items-center justify-center mr-3 flex-shrink-0">
+                            <i class="fas fa-check text-green-200"></i>
+                        </div>
+                        <div>
+                            <h4 class="font-medium text-green-300">Do</h4>
+                            <p class="text-sm text-gray-300">Meditate during sunrise</p>
+                        </div>
+                    </div>
+                    <div class="dos-card bg-red-900 bg-opacity-40 rounded-lg p-3 flex items-start">
+                        <div class="w-8 h-8 rounded-full bg-red-700 flex items-center justify-center mr-3 flex-shrink-0">
+                            <i class="fas fa-times text-red-200"></i>
+                        </div>
+                        <div>
+                            <h4 class="font-medium text-red-300">Don't</h4>
+                            <p class="text-sm text-gray-300">Postpone travel plans to North</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!-- Lucky Elements -->
+            <div class="mb-6">
+                <h3 class="text-lg font-semibold text-yellow-400 mb-3">Lucky Elements</h3>
+                <div class="grid grid-cols-3 gap-4">
+                    <div class="bg-purple-900 bg-opacity-40 rounded-lg p-3 text-center card-glow">
+                        <div class="w-12 h-12 rounded-full bg-purple-700 flex items-center justify-center mx-auto mb-2">
+                            <i class="fas fa-palette text-purple-200"></i>
+                        </div>
+                        <h4 class="font-medium text-purple-300">Color</h4>
+                        <p class="text-sm text-gray-300">Emerald Green</p>
+                    </div>
+                    <div class="bg-blue-900 bg-opacity-40 rounded-lg p-3 text-center card-glow">
+                        <div class="w-12 h-12 rounded-full bg-blue-700 flex items-center justify-center mx-auto mb-2">
+                            <i class="fas fa-clock text-blue-200"></i>
+                        </div>
+                        <h4 class="font-medium text-blue-300">Time</h4>
+                        <p class="text-sm text-gray-300">9:30 AM - 11:00 AM</p>
+                    </div>
+                    <div class="bg-yellow-900 bg-opacity-40 rounded-lg p-3 text-center card-glow">
+                        <div class="w-12 h-12 rounded-full bg-yellow-700 flex items-center justify-center mx-auto mb-2">
+                            <i class="fas fa-hashtag text-yellow-200"></i>
+                        </div>
+                        <h4 class="font-medium text-yellow-300">Number</h4>
+                        <p class="text-sm text-gray-300">7</p>
+                    </div>
+                </div>
+            </div>
+            <!-- Planet Positions -->
+            <div class="mb-6">
+                <h3 class="text-lg font-semibold text-yellow-400 mb-3">Planet Positions</h3>
+                <div class="flex flex-col md:flex-row items-center">
+                    <div class="navagraha-chart mb-4 md:mb-0 md:mr-6">
+                        <div class="planet-orbit orbit-1" style="width: 60px; height: 60px; top: 95px; left: 95px;"></div>
+                        <div class="planet-orbit orbit-2" style="width: 100px; height: 100px; top: 75px; left: 75px;"></div>
+                        <div class="planet-orbit orbit-3" style="width: 140px; height: 140px; top: 55px; left: 55px;"></div>
+                        <div class="planet-orbit orbit-4" style="width: 180px; height: 180px; top: 35px; left: 35px;"></div>
+                        <div class="planet-orbit orbit-5" style="width: 220px; height: 220px; top: 15px; left: 15px;"></div>
+                        <!-- Sun at center -->
+                        <div class="planet-position" style="top: 115px; left: 115px; background: radial-gradient(circle, #ffd700, #ff8c00);">
+                            <i class="fas fa-sun text-xs text-white"></i>
+                        </div>
+                        <!-- Other planets -->
+                        <div class="planet-position" style="top: 85px; left: 125px; background: radial-gradient(circle, #87CEEB, #1E90FF);">
+                            <i class="fas fa-moon text-xs text-white"></i>
+                        </div>
+                        <div class="planet-position" style="top: 55px; left: 95px; background: radial-gradient(circle, #FF6347, #B22222);">
+                            <i class="fas fa-fire text-xs text-white"></i>
+                        </div>
+                        <div class="planet-position" style="top: 95px; left: 55px; background: radial-gradient(circle, #9370DB, #4B0082);">
+                            <i class="fas fa-crown text-xs text-white"></i>
+                        </div>
+                        <div class="planet-position" style="top: 175px; left: 95px; background: radial-gradient(circle, #20B2AA, #008080);">
+                            <i class="fas fa-feather-alt text-xs text-white"></i>
+                        </div>
+                    </div>
+                    <div class="flex-grow">
+                        <div class="grid grid-cols-2 gap-2 text-sm">
+                            <div class="flex items-center">
+                                <div class="w-4 h-4 rounded-full bg-blue-500 mr-2"></div>
+                                <span>Moon in Taurus</span>
+                            </div>
+                            <div class="flex items-center">
+                                <div class="w-4 h-4 rounded-full bg-red-500 mr-2"></div>
+                                <span>Mars in 6th House</span>
+                            </div>
+                            <div class="flex items-center">
+                                <div class="w-4 h-4 rounded-full bg-purple-500 mr-2"></div>
+                                <span>Jupiter Retrograde</span>
+                            </div>
+                            <div class="flex items-center">
+                                <div class="w-4 h-4 rounded-full bg-teal-500 mr-2"></div>
+                                <span>Saturn Aspect</span>
+                            </div>
+                            <div class="flex items-center">
+                                <div class="w-4 h-4 rounded-full bg-yellow-500 mr-2"></div>
+                                <span>Sun in 10th House</span>
+                            </div>
+                            <div class="flex items-center">
+                                <div class="w-4 h-4 rounded-full bg-pink-500 mr-2"></div>
+                                <span>Venus Trine</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!-- AI Avatar Tip -->
+            <div class="bg-gray-800 bg-opacity-70 rounded-xl p-4 glow-border">
+                <div class="flex items-start">
+                    <div class="avatar-container mr-4">
+                        <div class="avatar w-16 h-16 rounded-full bg-gradient-to-br from-yellow-600 to-purple-600 flex items-center justify-center">
+                            <i class="fas fa-om text-2xl text-white"></i>
+                        </div>
+                    </div>
+                    <div class="flex-grow">
+                        <div class="flex items-center mb-1">
+                            <h4 class="font-bold text-yellow-400">Siddhar AI Tip</h4>
+                            <span class="ml-2 text-xs px-2 py-1 rounded-full bg-yellow-900 text-yellow-200">Today's Guidance</span>
+                        </div>
+                        <p class="text-gray-300">"Don't let Mars in 6th House mess up your focus today. The planetary alignment suggests completing pending tasks first before starting new ventures. Practice the 'So Hum' meditation for 11 minutes to enhance concentration."</p>
+                        <div class="mt-3 flex justify-end">
+                            <button class="text-xs px-3 py-1 rounded-full bg-purple-800 hover:bg-purple-700 flex items-center">
+                                <i class="fas fa-volume-up mr-1"></i> Listen
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+    <!-- Footer -->
+    <footer class="py-4 px-6 bg-black bg-opacity-50 border-t border-purple-900 text-center text-sm text-gray-400">
+        <div class="flex justify-center space-x-6 mb-3">
+            <a href="#" class="hover:text-purple-300"><i class="fab fa-instagram"></i></a>
+            <a href="#" class="hover:text-blue-300"><i class="fab fa-twitter"></i></a>
+            <a href="#" class="hover:text-red-300"><i class="fab fa-youtube"></i></a>
+            <a href="#" class="hover:text-green-300"><i class="fab fa-whatsapp"></i></a>
+        </div>
+        <p>© 2023 Siddhar Astro AI Platform. All cosmic wisdom reserved.</p>
+        <p class="mt-1">Consult your intuition before making important decisions.</p>
+    </footer>
+    <script>
+        // Language Toggle
+        const languageToggle = document.getElementById('languageToggle');
+        languageToggle.addEventListener('click', function() {
+            this.classList.toggle('active');
+            const isTamil = this.classList.contains('active');
+            const slider = this.querySelector('.slider');
+            if (isTamil) {
+                slider.innerHTML = '<span class="text-xs font-bold text-black tamil-font">தமிழ்</span>';
+                // Here you would add code to translate the UI to Tamil
+            } else {
+                slider.innerHTML = '<span class="text-xs font-bold text-black">EN</span>';
+                // Here you would add code to translate the UI to English
+            }
+        });
+        // Timeline Tabs
+        const timelineTabs = document.querySelectorAll('.timeline-tab');
+        timelineTabs.forEach(tab => {
+            tab.addEventListener('click', function() {
+                timelineTabs.forEach(t => t.classList.remove('active', 'text-white'));
+                timelineTabs.forEach(t => t.classList.add('text-gray-400'));
+                this.classList.add('active', 'text-white');
+                this.classList.remove('text-gray-400');
+                // Here you would add code to load the appropriate timeline data
+            });
+        });
+        // Generate Horoscope Button
+        const generateBtn = document.getElementById('generateBtn');
+        const resultsPanel = document.getElementById('resultsPanel');
+        generateBtn.addEventListener('click', function() {
+            // Show loading animation
+            this.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Calculating Stars...';
+            // Simulate API call with timeout
+            setTimeout(() => {
+                // Show results panel
+                resultsPanel.style.display = 'block';
+                // Reset button
+                this.innerHTML = '<i class="fas fa-stars mr-2"></i> Generate Horoscope';
+                // Scroll to results
+                resultsPanel.scrollIntoView({ behavior: 'smooth' });
+                // Add animation to cards
+                const cards = document.querySelectorAll('.dos-card, .card-glow');
+                cards.forEach((card, index) => {
+                    setTimeout(() => {
+                        card.classList.add('animate__animated', 'animate__fadeInUp');
+                    }, index * 100);
+                });
+            }, 2000);
+        });
+        // Mood Selector
+        const moodInputs = document.querySelectorAll('.mood-selector input[type="radio"]');
+        moodInputs.forEach(input => {
+            input.addEventListener('change', function() {
+                const allLabels = document.querySelectorAll('.mood-selector label');
+                allLabels.forEach(label => label.classList.remove('border-yellow-500'));
+                const selectedLabel = document.querySelector(`.mood-selector label[for="${this.id}"]`);
+                selectedLabel.classList.add('border-yellow-500');
+            });
+        });
+        // On load, select first mood by default
+        document.querySelector('.mood-selector input[type="radio"]').checked = true;
+        document.querySelector('.mood-selector label').classList.add('border-yellow-500');
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=karhar92/astrology4" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>