Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>ChronoBirth Magic - Discover Your Cosmic Birthday</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script> | |
| tailwind.config = { | |
| darkMode: 'class', | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: { | |
| 50: '#fef2f2', | |
| 100: '#fee2e2', | |
| 200: '#fecaca', | |
| 300: '#fca5a5', | |
| 400: '#f87171', | |
| 500: '#ef4444', | |
| 600: '#dc2626', | |
| 700: '#b91c1c', | |
| 800: '#991b1b', | |
| 900: '#7f1d1d', | |
| }, | |
| secondary: { | |
| 50: '#fffbeb', | |
| 100: '#fef3c7', | |
| 200: '#fde68a', | |
| 300: '#fcd34d', | |
| 400: '#fbbf24', | |
| 500: '#f59e0b', | |
| 600: '#d97706', | |
| 700: '#b45309', | |
| 800: '#92400e', | |
| 900: '#78350f', | |
| } | |
| }, | |
| animation: { | |
| 'float': 'float 6s ease-in-out infinite', | |
| 'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite', | |
| 'spin-slow': 'spin 20s linear infinite', | |
| 'bounce-slow': 'bounce 3s infinite', | |
| 'slide-up': 'slideUp 0.6s ease-out forwards', | |
| 'fade-in': 'fadeIn 0.5s ease-out forwards', | |
| 'scale-in': 'scaleIn 0.4s ease-out forwards', | |
| 'glow': 'glow 2s ease-in-out infinite alternate', | |
| }, | |
| keyframes: { | |
| float: { | |
| '0%, 100%': { transform: 'translateY(0)' }, | |
| '50%': { transform: 'translateY(-20px)' }, | |
| }, | |
| slideUp: { | |
| '0%': { opacity: '0', transform: 'translateY(30px)' }, | |
| '100%': { opacity: '1', transform: 'translateY(0)' }, | |
| }, | |
| fadeIn: { | |
| '0%': { opacity: '0' }, | |
| '100%': { opacity: '1' }, | |
| }, | |
| scaleIn: { | |
| '0%': { opacity: '0', transform: 'scale(0.9)' }, | |
| '100%': { opacity: '1', transform: 'scale(1)' }, | |
| }, | |
| glow: { | |
| '0%': { boxShadow: '0 0 20px rgba(239, 68, 68, 0.3)' }, | |
| '100%': { boxShadow: '0 0 40px rgba(239, 68, 68, 0.6)' }, | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body class="min-h-screen bg-gradient-to-br from-slate-50 via-white to-slate-100 dark:from-slate-900 dark:via-slate-800 dark:to-slate-900 transition-colors duration-500"> | |
| <!-- Animated Background Elements --> | |
| <div class="fixed inset-0 overflow-hidden pointer-events-none"> | |
| <div class="absolute top-20 left-10 w-72 h-72 bg-primary-400/20 rounded-full blur-3xl animate-float"></div> | |
| <div class="absolute bottom-20 right-10 w-96 h-96 bg-secondary-400/20 rounded-full blur-3xl animate-float" style="animation-delay: -2s;"></div> | |
| <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-gradient-radial from-primary-500/10 to-transparent rounded-full"></div> | |
| </div> | |
| <!-- Theme Toggle --> | |
| <button id="themeToggle" class="fixed top-6 right-6 z-50 p-3 rounded-full bg-white/80 dark:bg-slate-800/80 backdrop-blur-sm shadow-lg hover:shadow-xl transition-all duration-300 hover:scale-110 group"> | |
| <i data-feather="sun" class="w-5 h-5 text-secondary-500 hidden dark:block group-hover:rotate-180 transition-transform duration-500"></i> | |
| <i data-feather="moon" class="w-5 h-5 text-slate-600 block dark:hidden group-hover:-rotate-12 transition-transform duration-300"></i> | |
| </button> | |
| <!-- Main Container --> | |
| <main class="relative z-10 min-h-screen flex items-center justify-center p-4 sm:p-6 lg:p-8"> | |
| <!-- Form Card --> | |
| <div id="birthFormCard" class="w-full max-w-2xl bg-white/70 dark:bg-slate-800/70 backdrop-blur-xl rounded-3xl shadow-2xl border border-white/50 dark:border-slate-700/50 p-8 sm:p-12 animate-scale-in"> | |
| <!-- Header --> | |
| <div class="text-center mb-10"> | |
| <div class="inline-flex items-center justify-center w-20 h-20 rounded-2xl bg-gradient-to-br from-primary-500 to-secondary-500 mb-6 animate-pulse-slow shadow-lg shadow-primary-500/30"> | |
| <i data-feather="gift" class="w-10 h-10 text-white"></i> | |
| </div> | |
| <h1 class="text-4xl sm:text-5xl font-bold bg-gradient-to-r from-primary-600 to-secondary-500 bg-clip-text text-transparent mb-3"> | |
| ChronoBirth | |
| </h1> | |
| <p class="text-slate-600 dark:text-slate-400 text-lg">Unlock the secrets of your cosmic birthday</p> | |
| </div> | |
| <!-- Progress Steps --> | |
| <div class="flex items-center justify-center gap-2 mb-10"> | |
| <div class="step-indicator active" data-step="1"> | |
| <span class="step-number">1</span> | |
| <span class="step-label">Date</span> | |
| </div> | |
| <div class="step-line"></div> | |
| <div class="step-indicator" data-step="2"> | |
| <span class="step-number">2</span> | |
| <span class="step-label">Time</span> | |
| </div> | |
| <div class="step-line"></div> | |
| <div class="step-indicator" data-step="3"> | |
| <span class="step-number">3</span> | |
| <span class="step-label">Magic</span> | |
| </div> | |
| </div> | |
| <!-- Form Content --> | |
| <form id="birthForm" class="space-y-8"> | |
| <!-- Step 1: Date Selection --> | |
| <div class="form-step active" data-step="1"> | |
| <div class="grid grid-cols-1 sm:grid-cols-3 gap-4"> | |
| <!-- Day --> | |
| <div class="input-group"> | |
| <label class="input-label"> | |
| <i data-feather="calendar" class="w-4 h-4"></i> | |
| Day | |
| </label> | |
| <div class="input-wrapper"> | |
| <input type="number" id="day" min="1" max="31" placeholder="DD" class="birth-input" required> | |
| <div class="input-glow"></div> | |
| </div> | |
| </div> | |
| <!-- Month --> | |
| <div class="input-group"> | |
| <label class="input-label"> | |
| <i data-feather="moon" class="w-4 h-4"></i> | |
| Month | |
| </label> | |
| <div class="input-wrapper"> | |
| <select id="month" class="birth-input" required> | |
| <option value="" disabled selected>MM</option> | |
| <option value="1">January</option> | |
| <option value="2">February</option> | |
| <option value="3">March</option> | |
| <option value="4">April</option> | |
| <option value="5">May</option> | |
| <option value="6">June</option> | |
| <option value="7">July</option> | |
| <option value="8">August</option> | |
| <option value="9">September</option> | |
| <option value="10">October</option> | |
| <option value="11">November</option> | |
| <option value="12">December</option> | |
| </select> | |
| <div class="input-glow"></div> | |
| </div> | |
| </div> | |
| <!-- Year --> | |
| <div class="input-group"> | |
| <label class="input-label"> | |
| <i data-feather="clock" class="w-4 h-4"></i> | |
| Year | |
| </label> | |
| <div class="input-wrapper"> | |
| <input type="number" id="year" min="1900" max="2024" placeholder="YYYY" class="birth-input" required> | |
| <div class="input-glow"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Quick Date Presets --> | |
| <div class="mt-6 flex flex-wrap gap-2 justify-center"> | |
| <button type="button" class="preset-btn" data-preset="today">Today</button> | |
| <button type="button" class="preset-btn" data-preset="newyear">New Year</button> | |
| <button type="button" class="preset-btn" data-preset="leap">Leap Day</button> | |
| <button type="button" class="preset-btn" data-preset="halloween">Halloween</button> | |
| </div> | |
| </div> | |
| <!-- Step 2: Time & Location --> | |
| <div class="form-step" data-step="2"> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 gap-6"> | |
| <!-- Time --> | |
| <div class="input-group"> | |
| <label class="input-label"> | |
| <i data-feather="watch" class="w-4 h-4"></i> | |
| Birth Time | |
| </label> | |
| <div class="input-wrapper"> | |
| <input type="time" id="time" class="birth-input" required> | |
| <div class="input-glow"></div> | |
| </div> | |
| </div> | |
| <!-- Timezone --> | |
| <div class="input-group"> | |
| <label class="input-label"> | |
| <i data-feather="globe" class="w-4 h-4"></i> | |
| Timezone | |
| </label> | |
| <div class="input-wrapper"> | |
| <select id="timezone" class="birth-input"> | |
| <option value="UTC">UTC (Universal)</option> | |
| <option value="EST">EST (New York)</option> | |
| <option value="CST">CST (Chicago)</option> | |
| <option value="MST">MST (Denver)</option> | |
| <option value="PST">PST (Los Angeles)</option> | |
| <option value="GMT">GMT (London)</option> | |
| <option value="CET">CET (Paris)</option> | |
| <option value="JST">JST (Tokyo)</option> | |
| <option value="AEST">AEST (Sydney)</option> | |
| </select> | |
| <div class="input-glow"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Location Visual --> | |
| <div class="mt-6 p-6 rounded-2xl bg-gradient-to-br from-slate-100 to-slate-50 dark:from-slate-700/50 dark:to-slate-800/50 border border-slate-200 dark:border-slate-600"> | |
| <div class="flex items-center gap-4"> | |
| <div class="w-16 h-16 rounded-full bg-gradient-to-br from-primary-500 to-secondary-500 flex items-center justify-center animate-spin-slow"> | |
| <i data-feather="compass" class="w-8 h-8 text-white"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-semibold text-slate-800 dark:text-slate-200">Location Magic</h3> | |
| <p class="text-sm text-slate-600 dark:text-slate-400">Your birthplace affects your cosmic alignment</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Step 3: Final Magic --> | |
| <div class="form-step" data-step="3"> | |
| <div class="text-center space-y-6"> | |
| <!-- Zodiac Preview --> | |
| <div id="zodiacPreview" class="opacity-50 transition-all duration-500"> | |
| <div class="w-32 h-32 mx-auto rounded-full bg-gradient-to-br from-primary-500/20 to-secondary-500/20 flex items-center justify-center mb-4"> | |
| <span id="zodiacIcon" class="text-6xl">✨</span> | |
| </div> | |
| <h3 id="zodiacName" class="text-2xl font-bold text-slate-800 dark:text-slate-200">Select your date</h3> | |
| <p id="zodiacDates" class="text-slate-600 dark:text-slate-400">Your zodiac sign will appear here</p> | |
| </div> | |
| <!-- Fun Facts --> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div class="fact-card"> | |
| <i data-feather="sunrise" class="w-6 h-6 text-primary-500"></i> | |
| <span class="fact-label">Day of Week</span> | |
| <span id="dayOfWeek" class="fact-value">-</span> | |
| </div> | |
| <div class="fact-card"> | |
| <i data-feather="trending-up" class="w-6 h-6 text-secondary-500"></i> | |
| <span class="fact-label">Age</span> | |
| <span id="agePreview" class="fact-value">-</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Navigation Buttons --> | |
| <div class="flex justify-between pt-6 border-t border-slate-200 dark:border-slate-700"> | |
| <button type="button" id="prevBtn" class="nav-btn secondary hidden"> | |
| <i data-feather="arrow-left" class="w-5 h-5"></i> | |
| Back | |
| </button> | |
| <button type="button" id="nextBtn" class="nav-btn primary ml-auto"> | |
| Continue | |
| <i data-feather="arrow-right" class="w-5 h-5"></i> | |
| </button> | |
| <button type="submit" id="submitBtn" class="nav-btn magic hidden"> | |
| <span class="magic-text">Reveal Magic</span> | |
| <i data-feather="sparkles" class="w-5 h-5"></i> | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| <!-- Results Card (Hidden initially) --> | |
| <div id="resultsCard" class="hidden w-full max-w-4xl"> | |
| <div class="bg-white/80 dark:bg-slate-800/80 backdrop-blur-xl rounded-3xl shadow-2xl border border-white/50 dark:border-slate-700/50 p-8 sm:p-12 animate-slide-up"> | |
| <!-- Results Header --> | |
| <div class="text-center mb-10"> | |
| <div class="inline-flex items-center justify-center w-24 h-24 rounded-full bg-gradient-to-br from-primary-500 to-secondary-500 mb-6 animate-glow"> | |
| <span id="resultZodiacIcon" class="text-5xl">🎉</span> | |
| </div> | |
| <h2 class="text-3xl sm:text-4xl font-bold text-slate-800 dark:text-slate-200 mb-2">Your Cosmic Profile</h2> | |
| <p id="resultDate" class="text-slate-600 dark:text-slate-400 text-lg"></p> | |
| </div> | |
| <!-- Results Grid --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-10"> | |
| <!-- Zodiac Card --> | |
| <div class="result-card group"> | |
| <div class="result-icon bg-primary-500/10 text-primary-500 group-hover:bg-primary-500 group-hover:text-white"> | |
| <i data-feather="star" class="w-6 h-6"></i> | |
| </div> | |
| <h3 class="result-title">Zodiac Sign</h3> | |
| <p id="resultZodiac" class="result-value">-</p> | |
| <p id="resultZodiacElement" class="result-subtitle">-</p> | |
| </div> | |
| <!-- Age Card --> | |
| <div class="result-card group"> | |
| <div class="result-icon bg-secondary-500/10 text-secondary-500 group-hover:bg-secondary-500 group-hover:text-white"> | |
| <i data-feather="clock" class="w-6 h-6"></i> | |
| </div> | |
| <h3 class="result-title">Exact Age</h3> | |
| <p id="resultAge" class="result-value">-</p> | |
| <p id="resultAgeDetailed" class="result-subtitle">-</p> | |
| </div> | |
| <!-- Birth Day Card --> | |
| <div class="result-card group"> | |
| <div class="result-icon bg-emerald-500/10 text-emerald-500 group-hover:bg-emerald-500 group-hover:text-white"> | |
| <i data-feather="calendar" class="w-6 h-6"></i> | |
| </div> | |
| <h3 class="result-title">Born On</h3> | |
| <p id="resultDayName" class="result-value">-</p> | |
| <p id="resultDayType" class="result-subtitle">-</p> | |
| </div> | |
| <!-- Next Birthday Card --> | |
| <div class="result-card group"> | |
| <div class="result-icon bg-rose-500/10 text-rose-500 group-hover:bg-rose-500 group-hover:text-white"> | |
| <i data-feather="gift" class="w-6 h-6"></i> | |
| </div> | |
| <h3 class="result-title">Next Birthday</h3> | |
| <p id="resultNextBirthday" class="result-value">-</p> | |
| <p id="resultDaysUntil" class="result-subtitle">-</p> | |
| </div> | |
| <!-- Season Card --> | |
| <div class="result-card group"> | |
| <div class="result-icon bg-amber-500/10 text-amber-500 group-hover:bg-amber-500 group-hover:text-white"> | |
| <i data-feather="sun" class="w-6 h-6"></i> | |
| </div> | |
| <h3 class="result-title">Birth Season</h3> | |
| <p id="resultSeason" class="result-value">-</p> | |
| <p id="resultSeasonDates" class="result-subtitle">-</p> | |
| </div> | |
| <!-- Life Progress Card --> | |
| <div class="result-card group"> | |
| <div class="result-icon bg-violet-500/10 text-violet-500 group-hover:bg-violet-500 group-hover:text-white"> | |
| <i data-feather="activity" class="w-6 h-6"></i> | |
| </div> | |
| <h3 class="result-title">Life Progress</h3> | |
| <div class="w-full bg-slate-200 dark:bg-slate-700 rounded-full h-2 mt-2 mb-2"> | |
| <div id="lifeProgressBar" class="bg-gradient-to-r from-primary-500 to-secondary-500 h-2 rounded-full transition-all duration-1000" style="width: 0%"></div> | |
| </div> | |
| <p id="resultLifeProgress" class="result-subtitle">-</p> | |
| </div> | |
| </div> | |
| <!-- Fun Facts Section --> | |
| <div class="bg-gradient-to-r from-primary-500/5 to-secondary-500/5 rounded-2xl p-6 mb-8"> | |
| <h3 class="text-xl font-bold text-slate-800 dark:text-slate-200 mb-4 flex items-center gap-2"> | |
| <i data-feather="zap" class="w-5 h-5 text-primary-500"></i> | |
| Fascinating Facts | |
| </h3> | |
| <ul id="funFactsList" class="space-y-3"> | |
| <!-- Populated by JS --> | |
| </ul> | |
| </div> | |
| <!-- Action Buttons --> | |
| <div class="flex flex-wrap justify-center gap-4"> | |
| <button type="button" id="shareBtn" class="action-btn"> | |
| <i data-feather="share-2" class="w-5 h-5"></i> | |
| Share | |
| </button> | |
| <button type="button" id="saveBtn" class="action-btn"> | |
| <i data-feather="download" class="w-5 h-5"></i> | |
| Save | |
| </button> | |
| <button type="button" id="resetBtn" class="action-btn primary"> | |
| <i data-feather="refresh-cw" class="w-5 h-5"></i> | |
| Try Another | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Confetti Canvas --> | |
| <canvas id="confettiCanvas" class="fixed inset-0 pointer-events-none z-50"></canvas> | |
| <!-- Toast Notification --> | |
| <div id="toast" class="fixed bottom-6 left-1/2 -translate-x-1/2 bg-slate-800 dark:bg-white text-white dark:text-slate-800 px-6 py-3 rounded-full shadow-2xl transform translate-y-20 opacity-0 transition-all duration-300 z-50 flex items-center gap-3"> | |
| <i data-feather="check-circle" class="w-5 h-5 text-emerald-400 dark:text-emerald-500"></i> | |
| <span id="toastMessage">Copied to clipboard!</span> | |
| </div> | |
| <script src="script.js"></script> | |
| <script>feather.replace();</script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |