Spaces:
Running
Running
| <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> |