Spaces:

RobinsAIWorld
/

astrosyn

Running

App Files Files Community

RobinsAIWorld commited on 4 days ago

Commit

34736ef

verified ·

1 Parent(s): 2979357

Button still not responding to clicks - Initial Deployment

Browse files

Files changed (2) hide show

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

README.md CHANGED Viewed

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

 ---
+title: astrosyn
+emoji: 🐳
+colorFrom: yellow
+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,577 @@
-<!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>AstroSyn - Advanced Synastry Analyzer</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/lucide@latest"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+        * {
+            font-family: 'Inter', sans-serif;
+        }
+        .glass {
+            background: rgba(255, 255, 255, 0.05);
+            backdrop-filter: blur(20px);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+        }
+        .glass-hover {
+            transition: all 0.3s ease;
+        }
+        .glass-hover:hover {
+            background: rgba(255, 255, 255, 0.08);
+            transform: translateY(-2px);
+            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
+        }
+        .gradient-text {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+        .liquid-bg {
+            background: linear-gradient(-45deg, #1a1a2e, #16213e, #0f3460, #533483);
+            background-size: 400% 400%;
+            animation: liquid 15s ease infinite;
+        }
+        @keyframes liquid {
+            0% { background-position: 0% 50%; }
+            50% { background-position: 100% 50%; }
+            100% { background-position: 0% 50%; }
+        }
+        .glow {
+            box-shadow: 0 0 20px rgba(102, 126, 234, 0.5);
+        }
+        .input-glow:focus {
+            box-shadow: 0 0 20px rgba(102, 126, 234, 0.5);
+            border-color: rgba(102, 126, 234, 0.5);
+        }
+        .tab-active {
+            background: rgba(102, 126, 234, 0.2);
+            border-color: rgba(102, 126, 234, 0.5);
+        }
+        .chart-container {
+            position: relative;
+            height: 300px;
+            width: 100%;
+        }
+        .fade-in {
+            animation: fadeIn 0.5s ease-in;
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(20px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        .pulse-glow {
+            animation: pulseGlow 2s ease-in-out infinite;
+        }
+        @keyframes pulseGlow {
+            0%, 100% { box-shadow: 0 0 20px rgba(102, 126, 234, 0.5); }
+            50% { box-shadow: 0 0 40px rgba(102, 126, 234, 0.8); }
+        }
+        .zodiac-wheel {
+            width: 200px;
+            height: 200px;
+            border-radius: 50%;
+            position: relative;
+            background: conic-gradient(
+                from 0deg,
+                #ff6b6b 0deg 30deg,
+                #4ecdc4 30deg 60deg,
+                #45b7d1 60deg 90deg,
+                #96ceb4 90deg 120deg,
+                #feca57 120deg 150deg,
+                #ff9ff3 150deg 180deg,
+                #54a0ff 180deg 210deg,
+                #5f27cd 210deg 240deg,
+                #00d2d3 240deg 270deg,
+                #ff9f43 270deg 300deg,
+                #10ac84 300deg 330deg,
+                #ee5a24 330deg 360deg
+            );
+        }
+    </style>
+</head>
+<body class="liquid-bg min-h-screen text-white">
+    <div class="container mx-auto px-4 py-8">
+        <!-- Header -->
+        <header class="text-center mb-12">
+            <h1 class="text-6xl font-bold mb-4">
+                <span class="gradient-text">AstroSyn</span>
+            </h1>
+            <p class="text-xl text-gray-300">Advanced Synastry & Individual Analysis</p>
+        </header>
+        <!-- Input Section -->
+        <section id="input-section" class="glass rounded-2xl p-8 mb-8">
+            <h2 class="text-3xl font-semibold mb-6 text-center">Enter Birth Details</h2>
+            <div class="grid md:grid-cols-2 gap-8">
+                <div>
+                    <h3 class="text-xl font-medium mb-4 text-purple-300">Person A</h3>
+                    <input type="text" id="nameA" placeholder="Full Name" class="w-full mb-3 p-3 rounded-lg glass glass-hover input-glow text-white placeholder-gray-400">
+                    <input type="date" id="dobA" class="w-full mb-3 p-3 rounded-lg glass glass-hover input-glow text-white">
+                    <input type="time" id="timeA" class="w-full mb-3 p-3 rounded-lg glass glass-hover input-glow text-white">
+                    <input type="text" id="locationA" placeholder="Birth Location" class="w-full p-3 rounded-lg glass glass-hover input-glow text-white placeholder-gray-400">
+                </div>
+                <div>
+                    <h3 class="text-xl font-medium mb-4 text-purple-300">Person B</h3>
+                    <input type="text" id="nameB" placeholder="Full Name" class="w-full mb-3 p-3 rounded-lg glass glass-hover input-glow text-white placeholder-gray-400">
+                    <input type="date" id="dobB" class="w-full mb-3 p-3 rounded-lg glass glass-hover input-glow text-white">
+                    <input type="time" id="timeB" class="w-full mb-3 p-3 rounded-lg glass glass-hover input-glow text-white">
+                    <input type="text" id="locationB" placeholder="Birth Location" class="w-full p-3 rounded-lg glass glass-hover input-glow text-white placeholder-gray-400">
+                </div>
+            </div>
+            <div class="text-center mt-6">
+                <button onclick="analyzeSynastry()" class="px-8 py-3 bg-gradient-to-r from-purple-600 to-blue-600 rounded-full font-semibold glow pulse-glow hover:scale-105 transition-transform">
+                    Analyze Compatibility
+                </button>
+            </div>
+        </section>
+        <!-- Results Section -->
+        <section id="results-section" class="hidden">
+            <!-- Export / Share Bar -->
+            <div class="glass rounded-2xl p-4 mb-6 flex flex-wrap justify-center gap-3">
+                <button onclick="window.print()" class="px-4 py-2 rounded-lg glass glass-hover flex items-center gap-2">
+                    <span>Print</span>
+                </button>
+                <button onclick="downloadPDF()" class="px-4 py-2 rounded-lg glass glass-hover flex items-center gap-2">
+                    <span>Export PDF</span>
+                </button>
+                <button onclick="shareLink()" class="px-4 py-2 rounded-lg glass glass-hover flex items-center gap-2">
+                    <span>Share Link</span>
+                </button>
+            </div>
+            <!-- Navigation Tabs -->
+            <div class="glass rounded-2xl p-4 mb-6">
+                <div class="flex flex-wrap justify-center gap-2">
+                    <button onclick="switchTab('synastry')" id="tab-synastry" class="px-4 py-2 rounded-lg glass glass-hover tab-active">Synastry Report</button>
+                    <button onclick="switchTab('personA')" id="tab-personA" class="px-4 py-2 rounded-lg glass glass-hover">Person A Analysis</button>
+                    <button onclick="switchTab('personB')" id="tab-personB" class="px-4 py-2 rounded-lg glass glass-hover">Person B Analysis</button>
+                    <button onclick="switchTab('composite')" id="tab-composite" class="px-4 py-2 rounded-lg glass glass-hover">Composite Chart</button>
+                </div>
+            </div>
+            <!-- Content -->
+            <div id="content-synastry" class="fade-in">
+                <div class="grid lg:grid-cols-2 gap-8">
+                    <!-- Compatibility Score -->
+                    <div class="glass rounded-2xl p-6">
+                        <h3 class="text-2xl font-semibold mb-4">Overall Compatibility</h3>
+                        <div class="text-center">
+                            <div class="relative w-48 h-48 mx-auto mb-4">
+                                <canvas id="compatibilityChart"></canvas>
+                                <div class="absolute inset-0 flex items-center justify-center">
+                                    <span class="text-4xl font-bold gradient-text" id="compatibilityScore">85%</span>
+                                </div>
+                            </div>
+                            <p class="text-gray-300">Based on Western, Vedic & Chinese astrology</p>
+                        </div>
+                    </div>
+                    <!-- Key Aspects -->
+                    <div class="glass rounded-2xl p-6">
+                        <h3 class="text-2xl font-semibold mb-4">Key Aspects</h3>
+                        <div class="space-y-3">
+                            <div class="flex justify-between items-center">
+                                <span>Emotional Connection</span>
+                                <div class="w-32 bg-gray-700 rounded-full h-2">
+                                    <div class="bg-gradient-to-r from-purple-600 to-blue-600 h-2 rounded-full" style="width: 90%"></div>
+                                </div>
+                            </div>
+                            <div class="flex justify-between items-center">
+                                <span>Communication</span>
+                                <div class="w-32 bg-gray-700 rounded-full h-2">
+                                    <div class="bg-gradient-to-r from-purple-600 to-blue-600 h-2 rounded-full" style="width: 75%"></div>
+                                </div>
+                            </div>
+                            <div class="flex justify-between items-center">
+                                <span>Physical Chemistry</span>
+                                <div class="w-32 bg-gray-700 rounded-full h-2">
+                                    <div class="bg-gradient-to-r from-purple-600 to-blue-600 h-2 rounded-full" style="width: 95%"></div>
+                                </div>
+                            </div>
+                            <div class="flex justify-between items-center">
+                                <span>Long-term Potential</span>
+                                <div class="w-32 bg-gray-700 rounded-full h-2">
+                                    <div class="bg-gradient-to-r from-purple-600 to-blue-600 h-2 rounded-full" style="width: 82%"></div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <!-- Planetary Aspects -->
+                    <div class="glass rounded-2xl p-6 lg:col-span-2">
+                        <h3 class="text-2xl font-semibold mb-4">Planetary Aspects</h3>
+                        <div class="grid md:grid-cols-2 gap-6">
+                            <div>
+                                <h4 class="text-lg font-medium mb-2 text-purple-300">Sun-Sun Aspects</h4>
+                                <p class="text-sm text-gray-300 mb-3">Harmonious trine creates mutual understanding and shared values</p>
+                                <h4 class="text-lg font-medium mb-2 text-purple-300">Moon-Venus Aspects</h4>
+                                <p class="text-sm text-gray-300 mb-3">Strong emotional support and nurturing energy</p>
+                            </div>
+                            <div>
+                                <h4 class="text-lg font-medium mb-2 text-purple-300">Mars-Venus Aspects</h4>
+                                <p class="text-sm text-gray-300 mb-3">Passionate attraction with balanced energy exchange</p>
+                                <h4 class="text-lg font-medium mb-2 text-purple-300">Saturn Connections</h4>
+                                <p class="text-sm text-gray-300 mb-3">Karmic bonds and long-term commitment potential</p>
+                            </div>
+                        </div>
+                    </div>
+                    <!-- Chinese Zodiac -->
+                    <div class="glass rounded-2xl p-6 context-menu-container">
+                        <div class="flex justify-between items-center mb-4">
+                            <h3 class="text-2xl font-semibold">Chinese Zodiac Compatibility</h3>
+                            <label class="relative inline-flex items-center cursor-pointer">
+                                <input type="checkbox" id="lunarToggle" class="sr-only peer" onchange="toggleLunar(this.checked)">
+                                <div class="w-11 h-6 bg-gray-600 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-purple-600"></div>
+                                <span class="ml-3 text-sm text-gray-300">Lunar mode</span>
+                            </label>
+                        </div>
+                        <div class="text-center">
+                            <div class="flex justify-around items-center mb-4">
+                                <div>
+                                    <div id="czA" class="text-4xl mb-2 cursor-pointer hover:scale-110 transition-transform">🐰</div>
+                                    <p class="text-sm">Person A: <span id="czATxt">Rabbit</span></p>
+                                </div>
+                                <div class="text-2xl">❤️</div>
+                                <div>
+                                    <div id="czB" class="text-4xl mb-2 cursor-pointer hover:scale-110 transition-transform">🐉</div>
+                                    <p class="text-sm">Person B: <span id="czBTxt">Dragon</span></p>
+                                </div>
+                            </div>
+                            <p id="czDesc" class="text-gray-300 text-sm">
+                                Wood Rabbit and Fire Dragon: an unusual but complementary pair.  The Rabbit’s diplomacy softens the Dragon’s bold moves.
+                            </p>
+                        </div>
+                        <div id="czNotes" class="hidden mt-3 text-xs text-purple-300"></div>
+                    </div>
+                    <!-- Vedic Analysis -->
+                    <div class="glass rounded-2xl p-6">
+                        <h3 class="text-2xl font-semibold mb-4">Vedic Astrology</h3>
+                        <div>
+                            <h4 class="text-lg font-medium mb-2 text-purple-300">Nakshatra Compatibility</h4>
+                            <p class="text-sm text-gray-300 mb-3">Rohini and Shravana - Excellent match for marriage</p>
+                            <h4 class="text-lg font-medium mb-2 text-purple-300">Dosha Analysis</h4>
+                            <p class="text-sm text-gray-300 mb-3">No major doshas found. Minor Mangal dosha neutralized</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div id="content-personA" class="hidden fade-in">
+                <div class="glass rounded-2xl p-6 mb-6">
+                    <div class="flex items-center mb-4">
+                        <div class="w-20 h-20 rounded-full bg-gradient-to-r from-purple-600 to-blue-600 flex items-center justify-center text-2xl font-bold">
+                            A
+                        </div>
+                        <div class="ml-4">
+                            <h3 class="text-2xl font-semibold" id="personAName">Person A</h3>
+                            <p class="text-gray-300">Western: Leo Sun, Cancer Moon | Chinese: Wood Dragon</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="grid lg:grid-cols-3 gap-6">
+                    <div class="glass rounded-2xl p-6">
+                        <h4 class="text-xl font-semibold mb-4">Western Chart</h4>
+                        <div class="zodiac-wheel mx-auto mb-4"></div>
+                        <div class="space-y-2 text-sm">
+                            <p><strong>Sun:</strong> Leo 15° - Creative, confident</p>
+                            <p><strong>Moon:</strong> Cancer 8° - Emotional, nurturing</p>
+                            <p><strong>Rising:</strong> Scorpio - Intense, mysterious</p>
+                        </div>
+                    </div>
+                    <div class="glass rounded-2xl p-6">
+                        <h4 class="text-xl font-semibold mb-4">Vedic Chart</h4>
+                        <div class="space-y-3 text-sm">
+                            <p><strong>Lagna:</strong> Libra</p>
+                            <p><strong>Moon Sign:</strong> Gemini</p>
+                            <p><strong>Nakshatra:</strong> Rohini</p>
+                            <p><strong>Dosha:</strong> Pitta</p>
+                        </div>
+                    </div>
+                    <div class="glass rounded-2xl p-6">
+                        <h4 class="text-xl font-semibold mb-4">Chinese Astrology</h4>
+                        <div class="text-center">
+                            <div class="text-6xl mb-2">🐉</div>
+                            <p class="font-semibold">Wood Dragon</p>
+                            <p class="text-sm text-gray-300 mt-2">Ambitious, charismatic, natural leader</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div id="content-personB" class="hidden fade-in">
+                <div class="glass rounded-2xl p-6 mb-6">
+                    <div class="flex items-center mb-4">
+                        <div class="w-20 h-20 rounded-full bg-gradient-to-r from-purple-600 to-blue-600 flex items-center justify-center text-2xl font-bold">
+                            B
+                        </div>
+                        <div class="ml-4">
+                            <h3 class="text-2xl font-semibold" id="personBName">Person B</h3>
+                            <p class="text-gray-300">Western: Scorpio Sun, Pisces Moon | Chinese: Fire Snake</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="grid lg:grid-cols-3 gap-6">
+                    <div class="glass rounded-2xl p-6">
+                        <h4 class="text-xl font-semibold mb-4">Western Chart</h4>
+                        <div class="zodiac-wheel mx-auto mb-4"></div>
+                        <div class="space-y-2 text-sm">
+                            <p><strong>Sun:</strong> Scorpio 22° - Intense, transformative</p>
+                            <p><strong>Moon:</strong> Pisces 12° - Intuitive, compassionate</p>
+                            <p><strong>Rising:</strong> Leo - Dramatic, charismatic</p>
+                        </div>
+                    </div>
+                    <div class="glass rounded-2xl p-6">
+                        <h4 class="text-xl font-semibold mb-4">Vedic Chart</h4>
+                        <div class="space-y-3 text-sm">
+                            <p><strong>Lagna:</strong> Cancer</p>
+                            <p><strong>Moon Sign:</strong> Aquarius</p>
+                            <p><strong>Nakshatra:</strong> Shravana</p>
+                            <p><strong>Dosha:</strong> Vata</p>
+                        </div>
+                    </div>
+                    <div class="glass rounded-2xl p-6">
+                        <h4 class="text-xl font-semibold mb-4">Chinese Astrology</h4>
+                        <div class="text-center">
+                            <div class="text-6xl mb-2">🐍</div>
+                            <p class="font-semibold">Fire Snake</p>
+                            <p class="text-sm text-gray-300 mt-2">Wise, mysterious, deeply intuitive</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div id="content-composite" class="hidden fade-in">
+                <div class="glass rounded-2xl p-6">
+                    <h3 class="text-2xl font-semibold mb-6">Composite Chart</h3>
+                    <div class="grid lg:grid-cols-2 gap-8">
+                        <div>
+                            <canvas id="compositeChart" class="w-full"></canvas>
+                        </div>
+                        <div>
+                            <h4 class="text-xl font-semibold mb-4">Relationship Themes</h4>
+                            <div class="space-y-4">
+                                <div class="glass rounded-lg p-4">
+                                    <h5 class="font-semibold text-purple-300">Sun in 7th House</h5>
+                                    <p class="text-sm text-gray-300">Partnership is central to this relationship's identity</p>
+                                </div>
+                                <div class="glass rounded-lg p-4">
+                                    <h5 class="font-semibold text-purple-300">Moon Trine Venus</h5>
+                                    <p class="text-sm text-gray-300">Deep emotional connection and mutual appreciation</p>
+                                </div>
+                                <div class="glass rounded-lg p-4">
+                                    <h5 class="font-semibold text-purple-300">Mars Square Saturn</h5>
+                                    <p class="text-sm text-gray-300">Need to balance passion with responsibility</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </div>
+    <script>
+        let lunarMode = false; // false = Gregorian, true = strict lunar
+        // helper: very simple Chinese zodiac lookup (1900 ≡ Rat)
+        function getChineseZodiac(year) {
+            const animals = ["🐀","🐂","🐅","🐇","🐉","🐍","🐎","🐐","🐒","🐓","🐕","🐖"];
+            return animals[(year-1900) % 12];
+        }
+        function getAnimalName(year) {
+            const names = ["Rat","Ox","Tiger","Rabbit","Dragon","Snake","Horse","Goat","Monkey","Rooster","Dog","Pig"];
+            return names[(year-1900) % 12];
+        }
+        function updateChineseZodiac() {
+            const dobA = document.getElementById("dobA").value;
+            const dobB = document.getElementById("dobB").value;
+            if (!dobA || !dobB) return; // wait until dates are entered
+            const yearA = new Date(dobA).getFullYear();
+            const yearB = new Date(dobB).getFullYear();
+            // Person A toggles between Rabbit and Dragon for demo purposes
+            // In real code you’d use a proper lunar-calendar library
+            const aAnimal = lunarMode ? "🐇" : "🐉";
+            const aName   = lunarMode ? "Rabbit" : "Dragon";
+            const bAnimal = getChineseZodiac(yearB);
+            const bName   = getAnimalName(yearB);
+            document.getElementById("czA").textContent   = aAnimal;
+            document.getElementById("czATxt").textContent  = aName;
+            document.getElementById("czB").textContent     = bAnimal;
+            document.getElementById("czBTxt").textContent  = bName;
+            document.getElementById("czDesc").textContent =
+                `${aName} and ${bName}: ` +
+                (aName === "Rabbit" && bName === "Dragon"
+                    ? "an unusual but complementary pair. The Rabbit’s diplomacy softens the Dragon’s bold moves."
+                    : "Dragon and Snake form a powerful alliance. Both are intelligent and ambitious, creating a dynamic partnership.");
+        }
+        function toggleLunar(on) {
+            lunarMode = on;
+            updateChineseZodiac();
+        }
+        function analyzeSynastry() {
+            // Get input values
+            const nameA = document.getElementById('nameA').value || 'Person A';
+            const nameB = document.getElementById('nameB').value || 'Person B';
+            // Update names
+            document.getElementById('personAName').textContent = nameA;
+            document.getElementById('personBName').textContent = nameB;
+            // Show results
+            document.getElementById('input-section').classList.add('hidden');
+            document.getElementById('results-section').classList.remove('hidden');
+            updateChineseZodiac();
+            initCharts();
+        }
+        function initCharts() {
+            // Compatibility Chart
+            const ctx1 = document.getElementById('compatibilityChart').getContext('2d');
+            new Chart(ctx1, {
+                type: 'doughnut',
+                data: {
+                    datasets: [{
+                        data: [85, 15],
+                        backgroundColor: [
+                            'rgba(102, 126, 234, 0.8)',
+                            'rgba(255, 255, 255, 0.1)'
+                        ],
+                        borderWidth: 0
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    plugins: {
+                        legend: { display: false }
+                    },
+                    cutout: '80%'
+                }
+            });
+            // Composite Chart
+            const ctx2 = document.getElementById('compositeChart').getContext('2d');
+            new Chart(ctx2, {
+                type: 'radar',
+                data: {
+                    labels: ['Emotional', 'Physical', 'Intellectual', 'Spiritual', 'Communication', 'Values'],
+                    datasets: [{
+                        label: 'Relationship Strength',
+                        data: [90, 85, 75, 80, 70, 95],
+                        borderColor: 'rgba(102, 126, 234, 1)',
+                        backgroundColor: 'rgba(102, 126, 234, 0.2)',
+                        pointBackgroundColor: 'rgba(102, 126, 234, 1)'
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    plugins: {
+                        legend: { display: false }
+                    },
+                    scales: {
+                        r: {
+                            angleLines: { color: 'rgba(255, 255, 255, 0.2)' },
+                            grid: { color: 'rgba(255, 255, 255, 0.2)' },
+                            pointLabels: { color: 'white' },
+                            ticks: { color: 'white', backdropColor: 'transparent' }
+                        }
+                    }
+                }
+            });
+        }
+        function switchTab(tabName) {
+            // Hide all content
+            document.querySelectorAll('[id^="content-"]').forEach(el => el.classList.add('hidden'));
+            document.querySelectorAll('[id^="tab-"]').forEach(el => el.classList.remove('tab-active'));
+            // Show selected content
+            document.getElementById('content-' + tabName).classList.remove('hidden');
+            document.getElementById('tab-' + tabName).classList.add('tab-active');
+        }
+        // Add some interactive elements
+        // Context-menu (right-click) & hover tool-tips
+        document.addEventListener('DOMContentLoaded', () => {
+            document.addEventListener('contextmenu', e => {
+                const container = e.target.closest('.context-menu-container');
+                if (!container) return;
+                e.preventDefault();
+                const note = prompt('Add a note / interpretation:');
+                if (note) {
+                    const noteBox = container.querySelector('[id$="Notes"]') || container;
+                    noteBox.classList.remove('hidden');
+                    noteBox.textContent = `Note: ${note}`;
+                }
+            });
+            // Simple hover tool-tip
+            document.querySelectorAll('[class*="zodiac-wheel"], .zodiac-wheel, #czA, #czB').forEach(el => {
+                el.title = 'Right-click to annotate or learn more';
+            });
+        function downloadPDF() {
+            const { jsPDF } = window.jspdf;
+            const doc = new jsPDF('p', 'mm', 'a4');
+            html2canvas(document.getElementById('results-section'), {
+                backgroundColor: '#1e1e2f',
+                scale: 1
+            }).then(canvas => {
+                const imgData = canvas.toDataURL('image/png');
+                const imgProps = doc.getImageProperties(imgData);
+                const pdfWidth = doc.internal.pageSize.getWidth();
+                const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;
+                doc.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight);
+                doc.save('AstroSyn_Report.pdf');
+            });
+        }
+        function shareLink() {
+            const url = window.location.href;
+            navigator.clipboard.writeText(url).then(() => {
+                alert('Sharable link copied to clipboard!');
+            });
+        }
+    </script>
+    <!-- PDF generation -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></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=RobinsAIWorld/astrosyn" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>