Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Siddhar Astro AI - Tamil Wisdom Meets AI</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Hind+Madurai:wght@400;500;600&display=swap'); | |
| :root { | |
| --cosmic-purple: #6a0dad; | |
| --neon-indigo: #4b0082; | |
| --electric-gold: #ffd700; | |
| --deep-night: #0a0a1a; | |
| --astro-pink: #ff2d75; | |
| } | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| background-color: var(--deep-night); | |
| color: white; | |
| overflow-x: hidden; | |
| } | |
| .tamil-font { | |
| font-family: 'Hind Madurai', sans-serif; | |
| } | |
| .glow-text { | |
| text-shadow: 0 0 10px rgba(255, 215, 0, 0.7); | |
| } | |
| .neon-border { | |
| border: 1px solid var(--electric-gold); | |
| box-shadow: 0 0 15px rgba(255, 215, 0, 0.5); | |
| } | |
| .cosmic-gradient { | |
| background: linear-gradient(135deg, var(--cosmic-purple), var(--neon-indigo)); | |
| } | |
| .astro-card { | |
| background: rgba(10, 10, 26, 0.7); | |
| backdrop-filter: blur(10px); | |
| border-radius: 16px; | |
| transition: all 0.3s ease; | |
| } | |
| .astro-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 20px rgba(106, 13, 173, 0.3); | |
| } | |
| .language-toggle { | |
| position: relative; | |
| width: 80px; | |
| height: 35px; | |
| border-radius: 20px; | |
| background: var(--neon-indigo); | |
| cursor: pointer; | |
| } | |
| .language-toggle::before { | |
| content: ''; | |
| position: absolute; | |
| width: 30px; | |
| height: 30px; | |
| border-radius: 50%; | |
| background: var(--electric-gold); | |
| top: 2.5px; | |
| left: 3px; | |
| transition: 0.3s; | |
| } | |
| .language-toggle.active::before { | |
| left: 47px; | |
| } | |
| .avatar-option { | |
| border: 2px solid transparent; | |
| transition: all 0.3s; | |
| } | |
| .avatar-option:hover, .avatar-option.selected { | |
| border-color: var(--electric-gold); | |
| transform: scale(1.05); | |
| } | |
| .dos-card { | |
| border-left: 4px solid var(--electric-gold); | |
| } | |
| .dont-card { | |
| border-left: 4px solid var(--astro-pink); | |
| } | |
| .planet-highlight { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { opacity: 0.7; } | |
| 50% { opacity: 1; } | |
| 100% { opacity: 0.7; } | |
| } | |
| .chat-bubble { | |
| max-width: 80%; | |
| padding: 12px 16px; | |
| border-radius: 18px; | |
| margin-bottom: 8px; | |
| position: relative; | |
| } | |
| .user-bubble { | |
| background: var(--neon-indigo); | |
| align-self: flex-end; | |
| border-bottom-right-radius: 4px; | |
| } | |
| .bot-bubble { | |
| background: rgba(74, 0, 130, 0.5); | |
| align-self: flex-start; | |
| border-bottom-left-radius: 4px; | |
| } | |
| #birthChart, #navamsaChart { | |
| background: rgba(10, 10, 26, 0.5); | |
| border-radius: 50%; | |
| } | |
| .zodiac-sign { | |
| position: absolute; | |
| width: 30px; | |
| height: 30px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| border-radius: 50%; | |
| background: rgba(106, 13, 173, 0.7); | |
| border: 1px solid var(--electric-gold); | |
| } | |
| .thirukkanitham-grid { | |
| display: grid; | |
| grid-template-columns: repeat(4, 1fr); | |
| gap: 8px; | |
| } | |
| .thirukkanitham-cell { | |
| padding: 6px; | |
| text-align: center; | |
| border-radius: 8px; | |
| font-size: 12px; | |
| } | |
| .thirukkanitham-header { | |
| background: rgba(106, 13, 173, 0.5); | |
| font-weight: bold; | |
| } | |
| .thirukkanitham-planet { | |
| background: rgba(74, 0, 130, 0.3); | |
| } | |
| .thirukkanitham-sign { | |
| background: rgba(255, 215, 0, 0.1); | |
| } | |
| .thirukkanitham-aspect { | |
| background: rgba(255, 45, 117, 0.1); | |
| } | |
| .chart-tabs { | |
| display: flex; | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.1); | |
| margin-bottom: 12px; | |
| } | |
| .chart-tab { | |
| padding: 8px 16px; | |
| cursor: pointer; | |
| border-bottom: 2px solid transparent; | |
| } | |
| .chart-tab.active { | |
| border-bottom: 2px solid var(--electric-gold); | |
| color: var(--electric-gold); | |
| } | |
| .chart-container { | |
| position: relative; | |
| width: 100%; | |
| height: 200px; | |
| } | |
| /* Updated chart styles for better visibility */ | |
| .chart-wrapper { | |
| background: rgba(30, 30, 50, 0.5); | |
| border-radius: 16px; | |
| padding: 16px; | |
| border: 1px solid rgba(255, 215, 0, 0.2); | |
| } | |
| .chart-label { | |
| color: white; | |
| font-weight: bold; | |
| text-shadow: 0 0 5px rgba(255, 215, 0, 0.5); | |
| } | |
| .chart-grid-line { | |
| color: rgba(255, 255, 255, 0.1); | |
| } | |
| /* Welcome Screen Styles */ | |
| .welcome-screen { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(135deg, #0a0a1a, #1a103a); | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: center; | |
| z-index: 1000; | |
| transition: all 0.5s ease; | |
| } | |
| .welcome-logo { | |
| font-size: 4rem; | |
| margin-bottom: 2rem; | |
| text-align: center; | |
| } | |
| .welcome-title { | |
| font-size: 3rem; | |
| font-weight: bold; | |
| margin-bottom: 1rem; | |
| text-align: center; | |
| } | |
| .welcome-subtitle { | |
| font-size: 1.2rem; | |
| max-width: 600px; | |
| text-align: center; | |
| margin-bottom: 3rem; | |
| opacity: 0.8; | |
| } | |
| .welcome-btn { | |
| padding: 15px 40px; | |
| border-radius: 50px; | |
| font-size: 1.2rem; | |
| font-weight: bold; | |
| background: linear-gradient(90deg, #6a0dad, #4b0082); | |
| border: none; | |
| color: white; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| box-shadow: 0 5px 15px rgba(106, 13, 173, 0.4); | |
| } | |
| .welcome-btn:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 8px 20px rgba(106, 13, 173, 0.6); | |
| } | |
| /* Login Screen Styles */ | |
| .login-screen { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(135deg, #0a0a1a, #1a103a); | |
| display: none; | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: center; | |
| z-index: 999; | |
| } | |
| .login-container { | |
| width: 100%; | |
| max-width: 400px; | |
| padding: 2rem; | |
| background: rgba(10, 10, 26, 0.8); | |
| border-radius: 16px; | |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); | |
| } | |
| .login-title { | |
| font-size: 2rem; | |
| font-weight: bold; | |
| margin-bottom: 1.5rem; | |
| text-align: center; | |
| } | |
| .login-input { | |
| width: 100%; | |
| padding: 12px 15px; | |
| margin-bottom: 1rem; | |
| border-radius: 8px; | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| background: rgba(255, 255, 255, 0.05); | |
| color: white; | |
| font-size: 1rem; | |
| } | |
| .login-input:focus { | |
| outline: none; | |
| border-color: #6a0dad; | |
| box-shadow: 0 0 0 2px rgba(106, 13, 173, 0.3); | |
| } | |
| .login-btn { | |
| width: 100%; | |
| padding: 12px; | |
| border-radius: 8px; | |
| background: linear-gradient(90deg, #6a0dad, #4b0082); | |
| color: white; | |
| font-weight: bold; | |
| border: none; | |
| cursor: pointer; | |
| margin-top: 1rem; | |
| } | |
| .login-footer { | |
| margin-top: 1.5rem; | |
| text-align: center; | |
| font-size: 0.9rem; | |
| opacity: 0.7; | |
| } | |
| .login-link { | |
| color: #ffd700; | |
| cursor: pointer; | |
| } | |
| /* Main Content */ | |
| .main-content { | |
| display: none; | |
| } | |
| /* Location Autocomplete */ | |
| .autocomplete { | |
| position: relative; | |
| } | |
| .autocomplete-items { | |
| position: absolute; | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| border-bottom: none; | |
| border-top: none; | |
| z-index: 99; | |
| top: 100%; | |
| left: 0; | |
| right: 0; | |
| max-height: 200px; | |
| overflow-y: auto; | |
| } | |
| .autocomplete-items div { | |
| padding: 10px; | |
| cursor: pointer; | |
| background-color: rgba(30, 30, 50, 0.9); | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .autocomplete-items div:hover { | |
| background-color: rgba(106, 13, 173, 0.5); | |
| } | |
| .autocomplete-active { | |
| background-color: rgba(106, 13, 173, 0.7) ; | |
| color: #ffffff; | |
| } | |
| /* Horoscope Results */ | |
| .horoscope-result { | |
| display: none; | |
| animation: fadeIn 0.5s ease-in; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(20px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .planet-position { | |
| display: flex; | |
| align-items: center; | |
| margin-bottom: 10px; | |
| } | |
| .planet-icon { | |
| width: 30px; | |
| height: 30px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| margin-right: 10px; | |
| border-radius: 50%; | |
| background: rgba(106, 13, 173, 0.3); | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen"> | |
| <!-- Welcome Screen --> | |
| <div class="welcome-screen" id="welcomeScreen"> | |
| <div class="welcome-logo"> | |
| <i class="fas fa-stars text-yellow-300"></i> | |
| <i class="fas fa-moon text-purple-400"></i> | |
| <i class="fas fa-sun text-yellow-300"></i> | |
| </div> | |
| <h1 class="welcome-title text-transparent bg-clip-text bg-gradient-to-r from-purple-400 via-pink-500 to-yellow-300"> | |
| Siddhar Astro AI | |
| </h1> | |
| <p class="welcome-subtitle text-gray-300"> | |
| Ancient Tamil wisdom meets AI-powered guidance for the modern soul | |
| </p> | |
| <button class="welcome-btn" onclick="showLoginScreen()"> | |
| Begin Cosmic Journey | |
| </button> | |
| </div> | |
| <!-- Login Screen --> | |
| <div class="login-screen" id="loginScreen"> | |
| <div class="login-container"> | |
| <h2 class="login-title text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-yellow-300"> | |
| Welcome Back | |
| </h2> | |
| <form id="loginForm"> | |
| <input type="email" class="login-input" placeholder="Email Address" required> | |
| <input type="password" class="login-input" placeholder="Password" required> | |
| <button type="button" class="login-btn" onclick="login()"> | |
| Sign In | |
| </button> | |
| </form> | |
| <div class="login-footer"> | |
| <p class="text-gray-300">Don't have an account? <span class="login-link" onclick="showSignup()">Sign up</span></p> | |
| <p class="text-gray-300 mt-2">Or <span class="login-link" onclick="skipLogin()">Continue as Guest</span></p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content (hidden initially) --> | |
| <div class="main-content" id="mainContent"> | |
| <!-- Language Toggle --> | |
| <div class="fixed top-4 right-4 z-50 flex items-center gap-2"> | |
| <span class="text-sm">EN</span> | |
| <div id="languageToggle" class="language-toggle" onclick="toggleLanguage()"></div> | |
| <span class="text-sm tamil-font">தமிழ்</span> | |
| </div> | |
| <!-- Main Container --> | |
| <div class="container mx-auto px-4 py-8"> | |
| <!-- Header --> | |
| <header class="text-center mb-10"> | |
| <h1 class="text-4xl md:text-5xl font-bold glow-text mb-2"> | |
| <span class="text-purple-400">Siddhar</span> | |
| <span class="text-yellow-300">Astro</span> | |
| <span class="text-pink-500">AI</span> | |
| </h1> | |
| <p class="text-gray-300 max-w-2xl mx-auto"> | |
| <span class="en-text">Ancient Tamil wisdom meets AI-powered guidance for the modern soul</span> | |
| <span class="tamil-text hidden tamil-font">தற்கால ஆத்மாக்களுக்கான AI சக்தி மூலம் பண்டைய தமிழ் ஞானம்</span> | |
| </p> | |
| </header> | |
| <!-- Dashboard Grid --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> | |
| <!-- User Setup Panel --> | |
| <div class="astro-card p-6 col-span-1"> | |
| <h2 class="text-xl font-semibold mb-4 flex items-center gap-2"> | |
| <i class="fas fa-user-astronaut text-yellow-300"></i> | |
| <span class="en-text">Your Cosmic Profile</span> | |
| <span class="tamil-text hidden tamil-font">உங்கள் காஸ்மிக் சுயவிவரம்</span> | |
| </h2> | |
| <div class="space-y-4"> | |
| <!-- Avatar Selection --> | |
| <div> | |
| <p class="text-sm text-gray-300 mb-2 en-text">Choose your AI guide:</p> | |
| <p class="text-sm text-gray-300 mb-2 tamil-text hidden tamil-font">உங்கள் AI வழிகாட்டியைத் தேர்ந்தெடுக்கவும்:</p> | |
| <div class="flex gap-4"> | |
| <div class="avatar-option text-center cursor-pointer" onclick="selectAvatar(this, 'siddhar')"> | |
| <div class="w-16 h-16 rounded-full bg-purple-800 flex items-center justify-center mx-auto mb-1"> | |
| <i class="fas fa-hat-wizard text-2xl text-yellow-300"></i> | |
| </div> | |
| <span class="text-xs en-text">Digital Siddhar</span> | |
| <span class="text-xs tamil-text hidden tamil-font">டிஜிட்டல் சித்தர்</span> | |
| </div> | |
| <div class="avatar-option text-center cursor-pointer" onclick="selectAvatar(this, 'cosmic')"> | |
| <div class="w-16 h-16 rounded-full bg-indigo-800 flex items-center justify-center mx-auto mb-1"> | |
| <i class="fas fa-robot text-2xl text-pink-400"></i> | |
| </div> | |
| <span class="text-xs en-text">Cosmic Buddy</span> | |
| <span class="text-xs tamil-text hidden tamil-font">காஸ்மிக் நண்பர்</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Birth Details Form --> | |
| <form id="birthForm" class="space-y-4"> | |
| <div> | |
| <label class="block text-sm text-gray-300 mb-1 en-text">Full Name</label> | |
| <label class="block text-sm text-gray-300 mb-1 tamil-text hidden tamil-font">முழு பெயர்</label> | |
| <input type="text" class="w-full bg-gray-900 border border-gray-700 rounded-md px-3 py-2 text-white focus:outline-none focus:ring-2 focus:ring-purple-500"> | |
| </div> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div> | |
| <label class="block text-sm text-gray-300 mb-1 en-text">Date of Birth</label> | |
| <label class="block text-sm text-gray-300 mb-1 tamil-text hidden tamil-font">பிறந்த தேதி</label> | |
| <input type="date" class="w-full bg-gray-900 border border-gray-700 rounded-md px-3 py-2 text-white focus:outline-none focus:ring-2 focus:ring-purple-500"> | |
| </div> | |
| <div> | |
| <label class="block text-sm text-gray-300 mb-1 en-text">Time of Birth</label> | |
| <label class="block text-sm text-gray-300 mb-1 tamil-text hidden tamil-font">பிறந்த நேரம்</label> | |
| <input type="time" class="w-full bg-gray-900 border border-gray-700 rounded-md px-3 py-2 text-white focus:outline-none focus:ring-2 focus:ring-purple-500"> | |
| </div> | |
| </div> | |
| <div class="autocomplete"> | |
| <label class="block text-sm text-gray-300 mb-1 en-text">Place of Birth</label> | |
| <label class="block text-sm text-gray-300 mb-1 tamil-text hidden tamil-font">பிறந்த இடம்</label> | |
| <input id="birthPlace" type="text" class="w-full bg-gray-900 border border-gray-700 rounded-md px-3 py-2 text-white focus:outline-none focus:ring-2 focus:ring-purple-500" placeholder="Start typing a location..."> | |
| </div> | |
| <div> | |
| <label class="block text-sm text-gray-300 mb-1 en-text">What brings you here?</label> | |
| <label class="block text-sm text-gray-300 mb-1 tamil-text hidden tamil-font">உங்களை இங்கே என்ன கொண்டு வந்தது?</label> | |
| <select class="w-full bg-gray-900 border border-gray-700 rounded-md px-3 py-2 text-white focus:outline-none focus:ring-2 focus:ring-purple-500"> | |
| <option value="" class="en-text">Select your focus</option> | |
| <option value="" class="tamil-text hidden tamil-font">உங்கள் கவனத்தைத் தேர்ந்தெடுக்கவும்</option> | |
| <option class="en-text">Spiritual Growth</option> | |
| <option class="tamil-text hidden tamil-font">ஆன்மீக வளர்ச்சி</option> | |
| <option class="en-text">Career Guidance</option> | |
| <option class="tamil-text hidden tamil-font">தொழில் வழிகாட்டுதல்</option> | |
| <option class="en-text">Love & Relationships</option> | |
| <option class="tamil-text hidden tamil-font">காதல் மற்றும் உறவுகள்</option> | |
| <option class="en-text">Life Direction</option> | |
| <option class="tamil-text hidden tamil-font">வாழ்க்கை திசை</option> | |
| </select> | |
| </div> | |
| <button type="button" onclick="generateHoroscope()" class="w-full cosmic-gradient text-white py-2 rounded-md font-medium flex items-center justify-center gap-2 hover:bg-purple-700 transition"> | |
| <i class="fas fa-stars"></i> | |
| <span class="en-text">Generate My Horoscope</span> | |
| <span class="tamil-text hidden tamil-font">எனது ஜாதகத்தை உருவாக்கு</span> | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| <!-- Horoscope Zone --> | |
| <div class="astro-card p-6 col-span-2"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-xl font-semibold flex items-center gap-2"> | |
| <i class="fas fa-stars text-yellow-300"></i> | |
| <span class="en-text">Horoscope Zone</span> | |
| <span class="tamil-text hidden tamil-font">ஜாதகம் மண்டலம்</span> | |
| </h2> | |
| <div class="flex bg-gray-800 rounded-md p-1"> | |
| <button class="px-3 py-1 text-xs rounded-md bg-purple-700 text-white en-text">Today</button> | |
| <button class="px-3 py-1 text-xs rounded-md text-gray-300 hover:bg-gray-700 en-text">7 Days</button> | |
| <button class="px-3 py-1 text-xs rounded-md text-gray-300 hover:bg-gray-700 en-text">30 Days</button> | |
| <button class="px-3 py-1 text-xs rounded-md bg-purple-700 text-white tamil-text hidden tamil-font">இன்று</button> | |
| <button class="px-3 py-1 text-xs rounded-md text-gray-300 hover:bg-gray-700 tamil-text hidden tamil-font">7 நாட்கள்</button> | |
| <button class="px-3 py-1 text-xs rounded-md text-gray-300 hover:bg-gray-700 tamil-text hidden tamil-font">30 நாட்கள்</button> | |
| </div> | |
| </div> | |
| <!-- Horoscope Results --> | |
| <div id="horoscopeResult" class="horoscope-result"> | |
| <!-- Vibe Check --> | |
| <div class="astro-card p-4 mb-4 neon-border"> | |
| <div class="flex items-center gap-3"> | |
| <div class="w-10 h-10 rounded-full bg-gradient-to-br from-purple-600 to-pink-500 flex items-center justify-center"> | |
| <i class="fas fa-bolt text-white"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-300 en-text">Today's Energy</p> | |
| <p class="text-sm text-gray-300 tamil-text hidden tamil-font">இன்றைய ஆற்றல்</p> | |
| <p class="font-medium text-yellow-300 flex items-center gap-1"> | |
| <span id="vibeText" class="en-text">Ambitious & Creative</span> | |
| <span id="vibeTextTamil" class="tamil-text hidden tamil-font">ஆர்வமும் படைப்பாற்றலும்</span> | |
| <span id="vibeEmoji">🔥</span> | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Planetary Positions --> | |
| <div class="astro-card p-4 mb-4"> | |
| <h3 class="text-lg font-semibold mb-3 en-text">Planetary Positions</h3> | |
| <h3 class="text-lg font-semibold mb-3 tamil-text hidden tamil-font">கிரக நிலைகள்</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div class="planet-position"> | |
| <div class="planet-icon"> | |
| <i class="fas fa-sun text-yellow-300"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium en-text">Sun in Leo 5°</p> | |
| <p class="font-medium tamil-text hidden tamil-font">சூரியன் சிம்மம் 5°</p> | |
| <p class="text-xs text-gray-400 en-text">Confidence, creativity, leadership</p> | |
| <p class="text-xs text-gray-400 tamil-text hidden tamil-font">நம்பிக்கை, படைப்பாற்றல், தலைமை</p> | |
| </div> | |
| </div> | |
| <div class="planet-position"> | |
| <div class="planet-icon"> | |
| <i class="fas fa-moon text-blue-300"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium en-text">Moon in Cancer 12°</p> | |
| <p class="font-medium tamil-text hidden tamil-font">சந்திரன் கடகம் 12°</p> | |
| <p class="text-xs text-gray-400 en-text">Emotional, nurturing, intuitive</p> | |
| <p class="text-xs text-gray-400 tamil-text hidden tamil-font">உணர்ச்சி, வளர்ப்பு, உள்ளுணர்வு</p> | |
| </div> | |
| </div> | |
| <div class="planet-position"> | |
| <div class="planet-icon"> | |
| <i class="fas fa-fire text-red-400"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium en-text">Mars in Aries 23°</p> | |
| <p class="font-medium tamil-text hidden tamil-font">செவ்வாய் மேஷம் 23°</p> | |
| <p class="text-xs text-gray-400 en-text">Energy, courage, initiative</p> | |
| <p class="text-xs text-gray-400 tamil-text hidden tamil-font">ஆற்றல், தைரியம், முன்முயற்சி</p> | |
| </div> | |
| </div> | |
| <div class="planet-position"> | |
| <div class="planet-icon"> | |
| <i class="fas fa-brain text-green-400"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium en-text">Mercury in Virgo 18°</p> | |
| <p class="font-medium tamil-text hidden tamil-font">புதன் கன்னி 18°</p> | |
| <p class="text-xs text-gray-400 en-text">Analytical, detail-oriented, practical</p> | |
| <p class="text-xs text-gray-400 tamil-text hidden tamil-font">பகுப்பாய்வு, விவரம் சார்ந்த, நடைமுறை</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Daily Prediction --> | |
| <div class="astro-card p-4 mb-4"> | |
| <h3 class="text-lg font-semibold mb-3 en-text">Daily Prediction</h3> | |
| <h3 class="text-lg font-semibold mb-3 tamil-text hidden tamil-font">தினசரி கணிப்பு</h3> | |
| <p class="text-gray-300 en-text"> | |
| Today is a favorable day for creative pursuits and financial planning. | |
| The Moon's position enhances your intuition, making it a good time for important decisions. | |
| Avoid conflicts in the afternoon when Mars squares Mercury. | |
| </p> | |
| <p class="text-gray-300 tamil-text hidden tamil-font"> | |
| இன்று படைப்பு நடவடிக்கைகள் மற்றும் நிதி திட்டமிடலுக்கு சாதகமான நாள். | |
| சந்திரனின் நிலை உங்கள் உள்ளுணர்வை அதிகரிக்கிறது, இது முக்கியமான முடிவுகளை எடுப்பதற்கு சிறந்த நேரம். | |
| பிற்பகலில் மோதல்களைத் தவிர்க்கவும், செவ்வாய் புதனை சதுரமிடுகிறது. | |
| </p> | |
| </div> | |
| <!-- Lucky Numbers --> | |
| <div class="astro-card p-4 mb-4"> | |
| <h3 class="text-lg font-semibold mb-3 en-text">Lucky Numbers & Colors</h3> | |
| <h3 class="text-lg font-semibold mb-3 tamil-text hidden tamil-font">அதிர்ஷ்ட எண்கள் மற்றும் நிறங்கள்</h3> | |
| <div class="flex items-center gap-4"> | |
| <div> | |
| <p class="text-sm text-gray-300 en-text">Numbers</p> | |
| <p class="text-sm text-gray-300 tamil-text hidden tamil-font">எண்கள்</p> | |
| <div class="flex gap-2 mt-1"> | |
| <span class="w-8 h-8 flex items-center justify-center bg-purple-700 rounded-full">3</span> | |
| <span class="w-8 h-8 flex items-center justify-center bg-purple-700 rounded-full">7</span> | |
| <span class="w-8 h-8 flex items-center justify-center bg-purple-700 rounded-full">9</span> | |
| </div> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-300 en-text">Colors</p> | |
| <p class="text-sm text-gray-300 tamil-text hidden tamil-font">நிறங்கள்</p> | |
| <div class="flex gap-2 mt-1"> | |
| <span class="w-8 h-8 rounded-full bg-yellow-400"></span> | |
| <span class="w-8 h-8 rounded-full bg-blue-500"></span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Planetary Influences --> | |
| <div class="mb-4"> | |
| <p class="text-sm text-gray-300 mb-2 en-text">Planetary Influences</p> | |
| <p class="text-sm text-gray-300 mb-2 tamil-text hidden tamil-font">கிரக தாக்கங்கள்</p> | |
| <div class="grid grid-cols-7 gap-2"> | |
| <div class="astro-card p-2 text-center planet-highlight"> | |
| <div class="text-xs text-gray-300 en-text">Sun</div> | |
| <div class="text-xs text-gray-300 tamil-text hidden tamil-font">சூரியன்</div> | |
| <div class="text-lg">☉</div> | |
| <div class="text-xs text-green-400 en-text">5° Leo</div> | |
| </div> | |
| <div class="astro-card p-2 text-center planet-highlight"> | |
| <div class="text-xs text-gray-300 en-text">Moon</div> | |
| <div class="text-xs text-gray-300 tamil-text hidden tamil-font">சந்திரன்</div> | |
| <div class="text-lg">🌙</div> | |
| <div class="text-xs text-green-400 en-text">12° Cancer</div> | |
| </div> | |
| <div class="astro-card p-2 text-center planet-highlight"> | |
| <div class="text-xs text-gray-300 en-text">Mars</div> | |
| <div class="text-xs text-gray-300 tamil-text hidden tamil-font">செவ்வாய்</div> | |
| <div class="text-lg">♂️</div> | |
| <div class="text-xs text-yellow-400 en-text">23° Aries</div> | |
| </div> | |
| <div class="astro-card p-2 text-center planet-highlight"> | |
| <div class="text-xs text-gray-300 en-text">Mercury</div> | |
| <div class="text-xs text-gray-300 tamil-text hidden tamil-font">புதன்</div> | |
| <div class="text-lg">☿</div> | |
| <div class="text-xs text-red-400 en-text">18° Virgo</div> | |
| </div> | |
| <div class="astro-card p-2 text-center planet-highlight"> | |
| <div class="text-xs text-gray-300 en-text">Jupiter</div> | |
| <div class="text-xs text-gray-300 tamil-text hidden tamil-font">குரு</div> | |
| <div class="text-lg">♃</div> | |
| <div class="text-xs text-green-400 en-text">7° Pisces</div> | |
| </div> | |
| <div class="astro-card p-2 text-center planet-highlight"> | |
| <div class="text-xs text-gray-300 en-text">Venus</div> | |
| <div class="text-xs text-gray-300 tamil-text hidden tamil-font">வெள்ளி</div> | |
| <div class="text-lg">♀️</div> | |
| <div class="text-xs text-green-400 en-text">3° Libra</div> | |
| </div> | |
| <div class="astro-card p-2 text-center planet-highlight"> | |
| <div class="text-xs text-gray-300 en-text">Saturn</div> | |
| <div class="text-xs text-gray-300 tamil-text hidden tamil-font">சனி</div> | |
| <div class="text-lg">♄</div> | |
| <div class="text-xs text-yellow-400 en-text">25° Capricorn</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Chart Tabs --> | |
| <div class="chart-tabs mb-4"> | |
| <div class="chart-tab active" onclick="switchChartTab('birth')"> | |
| <span class="en-text">Birth Chart</span> | |
| <span class="tamil-text hidden tamil-font">பிறப்பு விளக்கப்படம்</span> | |
| </div> | |
| <div class="chart-tab" onclick="switchChartTab('navamsa')"> | |
| <span class="en-text">Navamsa Chart</span> | |
| <span class="tamil-text hidden tamil-font">நவாம்சா விளக்கப்படம்</span> | |
| </div> | |
| <div class="chart-tab" onclick="switchChartTab('thirukkanitham')"> | |
| <span class="en-text">Thirukkanitham</span> | |
| <span class="tamil-text hidden tamil-font">திருக்கணிதம்</span> | |
| </div> | |
| </div> | |
| <!-- Chart Containers --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <!-- Birth Chart --> | |
| <div id="birthChartContainer" class="chart-wrapper"> | |
| <div class="chart-container"> | |
| <canvas id="birthChart"></canvas> | |
| </div> | |
| </div> | |
| <!-- Navamsa Chart --> | |
| <div id="navamsaChartContainer" class="chart-wrapper hidden"> | |
| <div class="chart-container"> | |
| <canvas id="navamsaChart"></canvas> | |
| </div> | |
| </div> | |
| <!-- Thirukkanitham Table --> | |
| <div id="thirukkanithamContainer" class="hidden col-span-2"> | |
| <div class="thirukkanitham-grid"> | |
| <!-- Header Row --> | |
| <div class="thirukkanitham-cell thirukkanitham-header en-text">Planet</div> | |
| <div class="thirukkanitham-cell thirukkanitham-header en-text">Sign</div> | |
| <div class="thirukkanitham-cell thirukkanitham-header en-text">House</div> | |
| <div class="thirukkanitham-cell thirukkanitham-header en-text">Aspects</div> | |
| <div class="thirukkanitham-cell thirukkanitham-header tamil-text hidden tamil-font">கிரகம்</div> | |
| <div class="thirukkanitham-cell thirukkanitham-header tamil-text hidden tamil-font">ராசி</div> | |
| <div class="thirukkanitham-cell thirukkanitham-header tamil-text hidden tamil-font">வீடு</div> | |
| <div class="thirukkanitham-cell thirukkanitham-header tamil-text hidden tamil-font">திருஷ்டிகள்</div> | |
| <!-- Sun Row --> | |
| <div class="thirukkanitham-cell thirukkanitham-planet">Sun ☉</div> | |
| <div class="thirukkanitham-cell thirukkanitham-sign">Leo 5°</div> | |
| <div class="thirukkanitham-cell">10</div> | |
| <div class="thirukkanitham-cell thirukkanitham-aspect">Moon, Mars</div> | |
| <!-- Moon Row --> | |
| <div class="thirukkanitham-cell thirukkanitham-planet">Moon 🌙</div> | |
| <div class="thirukkanitham-cell thirukkanitham-sign">Cancer 12°</div> | |
| <div class="thirukkanitham-cell">9</div> | |
| <div class="thirukkanitham-cell thirukkanitham-aspect">Sun, Jupiter</div> | |
| <!-- Mars Row --> | |
| <div class="thirukkanitham-cell thirukkanitham-planet">Mars ♂️</div> | |
| <div class="thirukkanitham-cell thirukkanitham-sign">Aries 23°</div> | |
| <div class="thirukkanitham-cell">6</div> | |
| <div class="thirukkanitham-cell thirukkanitham-aspect">Mercury, Saturn</div> | |
| <!-- Mercury Row --> | |
| <div class="thirukkanitham-cell thirukkanitham-planet">Mercury ☿</div> | |
| <div class="thirukkanitham-cell thirukkanitham-sign">Virgo 18°</div> | |
| <div class="thirukkanitham-cell">11</div> | |
| <div class="thirukkanitham-cell thirukkanitham-aspect">Venus</div> | |
| <!-- Jupiter Row --> | |
| <div class="thirukkanitham-cell thirukkanitham-planet">Jupiter ♃</div> | |
| <div class="thirukkanitham-cell thirukkanitham-sign">Pisces 7°</div> | |
| <div class="thirukkanitham-cell">5</div> | |
| <div class="thirukkanitham-cell thirukkanitham-aspect">Moon, Venus</div> | |
| <!-- Venus Row --> | |
| <div class="thirukkanitham-cell thirukkanitham-planet">Venus ♀️</div> | |
| <div class="thirukkanitham-cell thirukkanitham-sign">Libra 3°</div> | |
| <div class="thirukkanitham-cell">12</div> | |
| <div class="thirukkanitham-cell thirukkanitham-aspect">Jupiter</div> | |
| <!-- Saturn Row --> | |
| <div class="thirukkanitham-cell thirukkanitham-planet">Saturn ♄</div> | |
| <div class="thirukkanitham-cell thirukkanitham-sign">Capricorn 25°</div> | |
| <div class="thirukkanitham-cell">3</div> | |
| <div class="thirukkanitham-cell thirukkanitham-aspect">Mars</div> | |
| </div> | |
| <!-- Additional Thirukkanitham Data --> | |
| <div class="mt-4 grid grid-cols-1 md:grid-cols-3 gap-4"> | |
| <div class="astro-card p-4"> | |
| <p class="text-sm font-medium text-purple-300 mb-2 en-text">Current Nakshatra</p> | |
| <p class="text-sm font-medium text-purple-300 mb-2 tamil-text hidden tamil-font">தற்போதைய நட்சத்திரம்</p> | |
| <p class="text-lg text-yellow-300">Pushya</p> | |
| <p class="text-xs text-gray-400 en-text">Lord: Saturn | Symbol: Cow's udder</p> | |
| <p class="text-xs text-gray-400 tamil-text hidden tamil-font">தலைவர்: சனி | சின்னம்: பசுவின் மடி</p> | |
| </div> | |
| <div class="astro-card p-4"> | |
| <p class="text-sm font-medium text-purple-300 mb-2 en-text">Tamil Month</p> | |
| <p class="text-sm font-medium text-purple-300 mb-2 tamil-text hidden tamil-font">தமிழ் மாதம்</p> | |
| <p class="text-lg text-yellow-300">Aadi</p> | |
| <p class="text-xs text-gray-400 en-text">Jul 16 - Aug 16 | Auspicious for spiritual practices</p> | |
| <p class="text-xs text-gray-400 tamil-text hidden tamil-font">ஜூலை 16 - ஆகஸ்ட் 16 | ஆன்மீக நடைமுறைகளுக்கு சுபமானது</p> | |
| </div> | |
| <div class="astro-card p-4"> | |
| <p class="text-sm font-medium text-purple-300 mb-2 en-text">Yoga</p> | |
| <p class="text-sm font-medium text-purple-300 mb-2 tamil-text hidden tamil-font">யோகா</p> | |
| <p class="text-lg text-yellow-300">Shiva</p> | |
| <p class="text-xs text-gray-400 en-text">Good for new beginnings and spiritual growth</p> | |
| <p class="text-xs text-gray-400 tamil-text hidden tamil-font">புதிய தொடக்கங்களுக்கும் ஆன்மீக வளர்ச்சிக்கும் நல்லது</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- AI Chatbot Section --> | |
| <div class="astro-card p-6 mt-6"> | |
| <h2 class="text-xl font-semibold mb-4 flex items-center gap-2"> | |
| <i class="fas fa-robot text-yellow-300"></i> | |
| <span class="en-text">AI Siddhar Chat</span> | |
| <span class="tamil-text hidden tamil-font">AI சித்தர் அரட்டை</span> | |
| </h2> | |
| <div class="flex flex-col h-96"> | |
| <!-- Chat Messages --> | |
| <div id="chatMessages" class="flex-1 overflow-y-auto p-4 space-y-3"> | |
| <!-- Initial bot message --> | |
| <div class="chat-bubble bot-bubble"> | |
| <div class="flex items-center gap-2 mb-1"> | |
| <div class="w-6 h-6 rounded-full bg-purple-600 flex items-center justify-center"> | |
| <i class="fas fa-hat-wizard text-xs text-yellow-300"></i> | |
| </div> | |
| <span class="font-medium text-yellow-300 en-text">Digital Siddhar</span> | |
| <span class="font-medium text-yellow-300 tamil-text hidden tamil-font">டிஜிட்டல் சித்தர்</span> | |
| </div> | |
| <p class="en-text">Welcome, seeker! I'm here to guide you through the cosmic wisdom of the Tamil Siddhars. Ask me anything about your horoscope, life path, or spiritual growth.</p> | |
| <p class="tamil-text hidden tamil-font">வரவேற்பு, தேடுபவரே! தமிழ் சித்தர்களின் காஸ்மிக் ஞானத்தின் மூலம் உங்களுக்கு வழிகாட்ட நான் இங்கே இருக்கிறேன். உங்கள் ஜாதகம், வாழ்க்கை பாதை அல்லது ஆன்மீக வளர்ச்சி பற்றி எதையும் என்னிடம் கேளுங்கள்.</p> | |
| </div> | |
| </div> | |
| <!-- Chat Input --> | |
| <div class="mt-4 flex gap-2"> | |
| <input type="text" id="chatInput" placeholder="Ask your question..." class="flex-1 bg-gray-900 border border-gray-700 rounded-md px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-purple-500 en-text"> | |
| <input type="text" id="chatInputTamil" placeholder="உங்கள் கேள்வியைக் கேளுங்கள்..." class="flex-1 bg-gray-900 border border-gray-700 rounded-md px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-purple-500 tamil-text hidden tamil-font"> | |
| <button onclick="sendChatMessage()" class="bg-purple-700 hover:bg-purple-600 text-white px-4 py-2 rounded-md"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Astro Tools Section --> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-6"> | |
| <!-- Rahu Kalam Alert --> | |
| <div class="astro-card p-6"> | |
| <div class="flex items-center gap-2 mb-4"> | |
| <div class="w-10 h-10 rounded-full bg-red-900 bg-opacity-30 flex items-center justify-center text-red-400"> | |
| <i class="fas fa-clock"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold en-text">Rahu Kalam Alert</h3> | |
| <h3 class="text-lg font-semibold tamil-text hidden tamil-font">ராகு காலம் எச்சரிக்கை</h3> | |
| </div> | |
| <div class="space-y-2"> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-sm text-gray-300 en-text">Today's Rahu Kalam:</span> | |
| <span class="text-sm text-gray-300 tamil-text hidden tamil-font">இன்றைய ராகு காலம்:</span> | |
| <span class="text-sm font-medium text-red-400">10:30 AM - 12:00 PM</span> | |
| </div> | |
| <div class="text-xs text-gray-400 en-text">Avoid important activities during this period</div> | |
| <div class="text-xs text-gray-400 tamil-text hidden tamil-font">இந்த காலகட்டத்தில் முக்கியமான செயல்பாடுகளைத் தவிர்க்கவும்</div> | |
| </div> | |
| </div> | |
| <!-- Mantra of the Day --> | |
| <div class="astro-card p-6"> | |
| <div class="flex items-center gap-2 mb-4"> | |
| <div class="w-10 h-10 rounded-full bg-yellow-900 bg-opacity-30 flex items-center justify-center text-yellow-400"> | |
| <i class="fas fa-om"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold en-text">Mantra of the Day</h3> | |
| <h3 class="text-lg font-semibold tamil-text hidden tamil-font">இன்றைய மந்திரம்</h3> | |
| </div> | |
| <div class="space-y-2"> | |
| <p class="text-lg text-yellow-300 text-center">ॐ नमः शिवाय</p> | |
| <p class="text-xs text-gray-400 text-center en-text">Chant 108 times for spiritual protection</p> | |
| <p class="text-xs text-gray-400 text-center tamil-text hidden tamil-font">ஆன்மீக பாதுகாப்பிற்கு 108 முறை ஜபிக்கவும்</p> | |
| </div> | |
| </div> | |
| <!-- Personalized Ritual --> | |
| <div class="astro-card p-6"> | |
| <div class="flex items-center gap-2 mb-4"> | |
| <div class="w-10 h-10 rounded-full bg-purple-900 bg-opacity-30 flex items-center justify-center text-purple-400"> | |
| <i class="fas fa-hands-praying"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold en-text">Your Ritual Today</h3> | |
| <h3 class="text-lg font-semibold tamil-text hidden tamil-font">இன்றைய உங்கள் சடங்கு</h3> | |
| </div> | |
| <div class="space-y-2"> | |
| <p class="text-sm text-white flex items-center gap-1 en-text">Light a ghee lamp to Lakshmi <span>🪔</span></p> | |
| <p class="text-sm text-white flex items-center gap-1 tamil-text hidden tamil-font">லட்சுமிக்கு நெய் விளக்கு ஏற்றவும் <span>🪔</span></p> | |
| <p class="text-xs text-gray-400 en-text">Will enhance financial abundance and remove obstacles</p> | |
| <p class="text-xs text-gray-400 tamil-text hidden tamil-font">நிதி செழிப்பை அதிகரித்து தடைகளை நீக்கும்</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Siddhar Quote --> | |
| <div class="astro-card p-6 mt-6 text-center"> | |
| <div class="w-16 h-16 rounded-full bg-purple-900 bg-opacity-20 flex items-center justify-center mx-auto mb-4 border border-purple-700"> | |
| <i class="fas fa-quote-left text-purple-400 text-2xl"></i> | |
| </div> | |
| <p class="text-lg italic text-purple-300 max-w-2xl mx-auto en-text"> | |
| "When the mind is still, the universe reveals its secrets. Seek within to find the stars." | |
| </p> | |
| <p class="text-lg italic text-purple-300 max-w-2xl mx-auto tamil-text hidden tamil-font"> | |
| "மனம் அமைதியாக இருக்கும்போது, பிரபஞ்சம் அதன் ரகசியங்களை வெளிப்படுத்துகிறது. நட்சத்திரங்களைக் கண்டுபிடிக்க உள்ளே தேடுங்கள்." | |
| </p> | |
| <p class="text-sm text-gray-400 mt-2 en-text">- Siddhar Bogar</p> | |
| <p class="text-sm text-gray-400 mt-2 tamil-text hidden tamil-font">- சித்தர் போகர்</p> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 bg-opacity-50 py-6 mt-10"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <div class="flex justify-center gap-4 mb-4"> | |
| <a href="#" class="text-gray-400 hover:text-purple-400"><i class="fab fa-instagram"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-purple-400"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-purple-400"><i class="fab fa-youtube"></i></a> | |
| </div> | |
| <p class="text-sm text-gray-400 en-text">© 2023 Siddhar Astro AI. Ancient wisdom for the digital age.</p> | |
| <p class="text-sm text-gray-400 tamil-text hidden tamil-font">© 2023 சித்தர் ஜோதிடம் AI. டிஜிட்டல் யுகத்திற்கான பண்டைய ஞானம்.</p> | |
| </div> | |
| </footer> | |
| </div> | |
| <script> | |
| // Welcome and Login Screen Functions | |
| function showLoginScreen() { | |
| document.getElementById('welcomeScreen').style.display = 'none'; | |
| document.getElementById('loginScreen').style.display = 'flex'; | |
| } | |
| function showSignup() { | |
| // In a real app, this would show a signup form | |
| alert('Sign up functionality would go here'); | |
| } | |
| function skipLogin() { | |
| document.getElementById('loginScreen').style.display = 'none'; | |
| document.getElementById('mainContent').style.display = 'block'; | |
| } | |
| function login() { | |
| // In a real app, this would validate credentials | |
| document.getElementById('loginScreen').style.display = 'none'; | |
| document.getElementById('mainContent').style.display = 'block'; | |
| } | |
| // Language Toggle | |
| function toggleLanguage() { | |
| const toggle = document.getElementById('languageToggle'); | |
| toggle.classList.toggle('active'); | |
| // Toggle all English/Tamil text elements | |
| document.querySelectorAll('.en-text').forEach(el => el.classList.toggle('hidden')); | |
| document.querySelectorAll('.tamil-text').forEach(el => el.classList.toggle('hidden')); | |
| // Update chat input placeholder | |
| if (toggle.classList.contains('active')) { | |
| document.getElementById('chatInput').classList.add('hidden'); | |
| document.getElementById('chatInputTamil').classList.remove('hidden'); | |
| } else { | |
| document.getElementById('chatInput').classList.remove('hidden'); | |
| document.getElementById('chatInputTamil').classList.add('hidden'); | |
| } | |
| } | |
| // Avatar Selection | |
| function selectAvatar(element, type) { | |
| document.querySelectorAll('.avatar-option').forEach(el => el.classList.remove('selected')); | |
| element.classList.add('selected'); | |
| // Update chatbot avatar in the chat | |
| const botName = document.querySelector('.chat-bubble .font-medium'); | |
| if (type === 'siddhar') { | |
| botName.textContent = document.querySelector('.language-toggle.active') ? 'டிஜிட்டல் சித்தர்' : 'Digital Siddhar'; | |
| } else { | |
| botName.textContent = document.querySelector('.language-toggle.active') ? 'காஸ்மிக் நண்பர்' : 'Cosmic Buddy'; | |
| } | |
| } | |
| // Switch between chart tabs | |
| function switchChartTab(tabName) { | |
| // Hide all containers first | |
| document.getElementById('birthChartContainer').classList.add('hidden'); | |
| document.getElementById('navamsaChartContainer').classList.add('hidden'); | |
| document.getElementById('thirukkanithamContainer').classList.add('hidden'); | |
| // Remove active class from all tabs | |
| document.querySelectorAll('.chart-tab').forEach(tab => { | |
| tab.classList.remove('active'); | |
| }); | |
| // Show selected container and mark tab as active | |
| if (tabName === 'birth') { | |
| document.getElementById('birthChartContainer').classList.remove('hidden'); | |
| document.querySelector('.chart-tab:nth-child(1)').classList.add('active'); | |
| } else if (tabName === 'navamsa') { | |
| document.getElementById('navamsaChartContainer').classList.remove('hidden'); | |
| document.querySelector('.chart-tab:nth-child(2)').classList.add('active'); | |
| } else if (tabName === 'thirukkanitham') { | |
| document.getElementById('thirukkanithamContainer').classList.remove('hidden'); | |
| document.querySelector('.chart-tab:nth-child(3)').classList.add('active'); | |
| } | |
| } | |
| // Location Autocomplete | |
| function autocomplete(inp, arr) { | |
| let currentFocus; | |
| inp.addEventListener("input", function(e) { | |
| let val = this.value; | |
| closeAllLists(); | |
| if (!val) { return false; } | |
| currentFocus = -1; | |
| const list = document.createElement("div"); | |
| list.setAttribute("id", this.id + "autocomplete-list"); | |
| list.setAttribute("class", "autocomplete-items"); | |
| this.parentNode.appendChild(list); | |
| // Filter locations | |
| const filtered = arr.filter(item => | |
| item.toLowerCase().includes(val.toLowerCase()) | |
| ).slice(0, 5); | |
| // Create items for each match | |
| filtered.forEach(item => { | |
| const itemDiv = document.createElement("div"); | |
| itemDiv.innerHTML = "<strong>" + item.substr(0, val.length) + "</strong>"; | |
| itemDiv.innerHTML += item.substr(val.length); | |
| itemDiv.innerHTML += "<input type='hidden' value='" + item + "'>"; | |
| itemDiv.addEventListener("click", function(e) { | |
| inp.value = this.getElementsByTagName("input")[0].value; | |
| closeAllLists(); | |
| }); | |
| list.appendChild(itemDiv); | |
| }); | |
| }); | |
| inp.addEventListener("keydown", function(e) { | |
| let items = document.getElementById(this.id + "autocomplete-list"); | |
| if (items) items = items.getElementsByTagName("div"); | |
| if (e.keyCode == 40) { // Down arrow | |
| currentFocus++; | |
| addActive(items); | |
| } else if (e.keyCode == 38) { // Up arrow | |
| currentFocus--; | |
| addActive(items); | |
| } else if (e.keyCode == 13) { // Enter | |
| e.preventDefault(); | |
| if (currentFocus > -1) { | |
| if (items) items[currentFocus].click(); | |
| } | |
| } | |
| }); | |
| function addActive(items) { | |
| if (!items) return false; | |
| removeActive(items); | |
| if (currentFocus >= items.length) currentFocus = 0; | |
| if (currentFocus < 0) currentFocus = (items.length - 1); | |
| items[currentFocus].classList.add("autocomplete-active"); | |
| } | |
| function removeActive(items) { | |
| for (let i = 0; i < items.length; i++) { | |
| items[i].classList.remove("autocomplete-active"); | |
| } | |
| } | |
| function closeAllLists(elmnt) { | |
| const items = document.getElementsByClassName("autocomplete-items"); | |
| for (let i = 0; i < items.length; i++) { | |
| if (elmnt != items[i] && elmnt != inp) { | |
| items[i].parentNode.removeChild(items[i]); | |
| } | |
| } | |
| } | |
| document.addEventListener("click", function(e) { | |
| closeAllLists(e.target); | |
| }); | |
| } | |
| // Sample locations for autocomplete | |
| const locations = [ | |
| "Chennai, Tamil Nadu, India", | |
| "Coimbatore, Tamil Nadu, India", | |
| "Madurai, Tamil Nadu, India", | |
| "Trichy, Tamil Nadu, India", | |
| "Salem, Tamil Nadu, India", | |
| "Tirunelveli, Tamil Nadu, India", | |
| "Vellore, Tamil Nadu, India", | |
| "Erode, Tamil Nadu, India", | |
| "Bangalore, Karnataka, India", | |
| "Hyderabad, Telangana, India", | |
| "Mumbai, Maharashtra, India", | |
| "Delhi, India", | |
| "Kolkata, West Bengal, India" | |
| ]; | |
| // Initialize autocomplete | |
| document.addEventListener("DOMContentLoaded", function() { | |
| autocomplete(document.getElementById("birthPlace"), locations); | |
| }); | |
| // Generate Horoscope | |
| function generateHoroscope() { | |
| // Validate form | |
| const birthPlace = document.getElementById('birthPlace').value; | |
| if | |
| </html> |