| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Cosmic Time Galaxy Explorer</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script> |
| <style> |
| @media (max-width: 640px) { |
| .galaxy-disk { |
| width: 300px !important; |
| height: 300px !important; |
| } |
| .galaxy-core { |
| width: 18px !important; |
| height: 18px !important; |
| } |
| } |
| @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@600&family=Poppins:wght@400;600;700&display=swap'); |
| |
| :root { |
| --color-neon-blue: #00ffff; |
| --color-neon-purple: #9d00ff; |
| --color-neon-pink: #ff00ff; |
| --color-core-white: rgba(255, 255, 255, 0.9); |
| } |
| |
| .galaxy-disk { |
| box-shadow: |
| 0 0 60px 20px rgba(157, 0, 255, 0.6), |
| 0 0 100px 40px rgba(0, 255, 255, 0.3), |
| 0 0 200px 80px rgba(255, 0, 255, 0.2); |
| animation: pulseGlow 8s ease-in-out infinite alternate; |
| } |
| |
| @keyframes pulseGlow { |
| 0% { box-shadow: |
| 0 0 60px 20px rgba(157, 0, 255, 0.6), |
| 0 0 100px 40px rgba(0, 255, 255, 0.3), |
| 0 0 200px 80px rgba(255, 0, 255, 0.2); } |
| 100% { box-shadow: |
| 0 0 80px 30px rgba(157, 0, 255, 0.8), |
| 0 0 120px 50px rgba(0, 255, 255, 0.4), |
| 0 0 240px 90px rgba(255, 0, 255, 0.3); } |
| } |
| |
| .galaxy-segment { |
| clip-path: polygon(100% 0, 0% 100%, 0 0); |
| transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); |
| filter: brightness(0.8); |
| } |
| |
| .galaxy-segment:hover { |
| filter: brightness(1.3) drop-shadow(0 0 12px currentColor); |
| transform: scale(1.1); |
| z-index: 20; |
| } |
| |
| .segment-text { |
| transform: rotate(calc(-1 * var(--rotate-base))); |
| text-shadow: 0 0 10px rgba(0, 0, 0, 0.8); |
| } |
| |
| .galaxy-core { |
| box-shadow: |
| 0 0 40px 15px rgba(255, 255, 255, 0.7), |
| 0 0 80px 30px rgba(157, 0, 255, 0.4), |
| 0 0 160px 60px rgba(0, 255, 255, 0.2); |
| animation: corePulse 4s ease infinite alternate; |
| } |
| |
| @keyframes corePulse { |
| 0% { transform: scale(1); opacity: 0.9; } |
| 100% { transform: scale(1.1); opacity: 1; } |
| } |
| |
| .info-card { |
| backdrop-filter: blur(16px) saturate(180%); |
| -webkit-backdrop-filter: blur(16px) saturate(180%); |
| background: linear-gradient(135deg, rgba(0, 0, 20, 0.7), rgba(30, 0, 50, 0.5)); |
| box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5); |
| border: 1px solid rgba(157, 0, 255, 0.3); |
| transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); |
| } |
| </style> |
| </head> |
| <body class="bg-black text-white overflow-hidden font-sans" style="font-family: 'Poppins', sans-serif;"> |
| <div id="galaxy-bg" class="absolute w-full h-full" style="background: radial-gradient(ellipse at center, #000000 0%, #090a0f 100%);"></div> |
| <div class="absolute w-full h-full" style="background-image: |
| radial-gradient(white, rgba(255,255,255,.2) 1px, transparent 1px), |
| radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 1px), |
| radial-gradient(white, rgba(255,255,255,.1) 1px, transparent 1px); |
| background-size: 300px 300px, 200px 200px, 100px 100px; |
| background-position: 0 0, 40px 60px, 130px 270px;"></div> |
| <div class="relative z-10 w-full h-screen flex items-center justify-center"> |
| <div class="relative w-96 h-96 galaxy-disk rounded-full" style="background: conic-gradient( |
| from 0deg at 50% 50%, |
| #3b82f6 0deg 45deg, |
| #8b5cf6 45deg 90deg, |
| #ec4899 90deg 135deg, |
| #f97316 135deg 180deg, |
| #ef4444 180deg 225deg, |
| #10b981 225deg 270deg, |
| #f59e0b 270deg 315deg, |
| #14b8a6 315deg 360deg |
| );"> |
| |
| <div class="absolute w-full h-full"> |
| |
| <div class="absolute top-0 left-0 w-1/2 h-1/2 galaxy-segment bg-blue-500" |
| style="--rotate-base: 0deg; transform: rotate(0deg);" |
| data-card="discovery"> |
| <div class="w-full h-full flex items-center justify-center segment-text" style="transform: rotate(-0deg);"> |
| <span class="text-center font-bold font-mono" style="font-family: 'Orbitron', sans-serif;"> |
| Discovery<br><span class="text-xs">(0-10)</span> |
| </span> |
| </div> |
| </div> |
| |
| |
| <div class="absolute top-0 left-0 w-1/2 h-1/2 galaxy-segment bg-purple-600" |
| style="--rotate-base: 45deg; transform: rotate(45deg);" |
| data-card="identity"> |
| <div class="w-full h-full flex items-center justify-center segment-text" style="transform: rotate(-45deg);"> |
| <span class="text-center font-bold font-mono" style="font-family: 'Orbitron', sans-serif;"> |
| Identity<br><span class="text-xs">(11-20)</span> |
| </span> |
| </div> |
| </div> |
| |
| |
| <div class="absolute top-0 left-0 w-1/2 h-1/2 galaxy-segment bg-pink-500" |
| style="--rotate-base: 90deg; transform: rotate(90deg);" |
| data-card="construction"> |
| <div class="w-full h-full flex items-center justify-center segment-text" style="transform: rotate(-90deg);"> |
| <span class="text-center font-bold font-mono" style="font-family: 'Orbitron', sans-serif;"> |
| Construction<br><span class="text-xs">(21-30)</span> |
| </span> |
| </div> |
| </div> |
| |
| |
| <div class="absolute top-0 left-0 w-1/2 h-1/2 galaxy-segment bg-orange-500" |
| style="--rotate-base: 135deg; transform: rotate(135deg);" |
| data-card="balance"> |
| <div class="w-full h-full flex items-center justify-center segment-text" style="transform: rotate(-135deg);"> |
| <span class="text-center font-bold font-mono" style="font-family: 'Orbitron', sans-serif;"> |
| Balance<br><span class="text-xs">(31-40)</span> |
| </span> |
| </div> |
| </div> |
| |
| |
| <div class="absolute top-0 left-0 w-1/2 h-1/2 galaxy-segment bg-red-500" |
| style="--rotate-base: 180deg; transform: rotate(180deg);" |
| data-card="review"> |
| <div class="w-full h-full flex items-center justify-center segment-text" style="transform: rotate(-180deg);"> |
| <span class="text-center font-bold font-mono" style="font-family: 'Orbitron', sans-serif;"> |
| Review<br><span class="text-xs">(41-50)</span> |
| </span> |
| </div> |
| </div> |
| |
| |
| <div class="absolute top-0 left-0 w-1/2 h-1/2 galaxy-segment bg-green-500" |
| style="--rotate-base: 225deg; transform: rotate(225deg);" |
| data-card="wisdom"> |
| <div class="w-full h-full flex items-center justify-center segment-text" style="transform: rotate(-225deg);"> |
| <span class="text-center font-bold font-mono" style="font-family: 'Orbitron', sans-serif;"> |
| Wisdom<br><span class="text-xs">(51-60)</span> |
| </span> |
| </div> |
| </div> |
| |
| |
| <div class="absolute top-0 left-0 w-1/2 h-1/2 galaxy-segment bg-yellow-400" |
| style="--rotate-base: 270deg; transform: rotate(270deg);" |
| data-card="freedom"> |
| <div class="w-full h-full flex items-center justify-center segment-text" style="transform: rotate(-270deg);"> |
| <span class="text-center font-bold font-mono" style="font-family: 'Orbitron', sans-serif;"> |
| Freedom<br><span class="text-xs">(61-70)</span> |
| </span> |
| </div> |
| </div> |
| |
| |
| <div class="absolute top-0 left-0 w-1/2 h-1/2 galaxy-segment bg-teal-400" |
| style="--rotate-base: 315deg; transform: rotate(315deg);" |
| data-card="contemplation"> |
| <div class="w-full h-full flex items-center justify-center segment-text" style="transform: rotate(-315deg);"> |
| <span class="text-center font-bold font-mono" style="font-family: 'Orbitron', sans-serif;"> |
| Contemplation<br><span class="text-xs">(71-80)</span> |
| </span> |
| </div> |
| </div> |
| |
| |
| <div class="absolute top-1/2 left-1/2 w-24 h-24 galaxy-core rounded-full flex items-center justify-center transform -translate-x-1/2 -translate-y-1/2 z-30"> |
| <span class="text-black text-center font-bold text-xs" style="font-family: 'Orbitron', sans-serif;">TIME<br>IS NOW</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="fixed bottom-0 left-0 right-0 mx-auto mb-4 w-11/12 max-w-md p-6 info-card rounded-xl opacity-0 invisible transition-all duration-500" id="discovery-card"> |
| <h2 class="text-xl font-bold mb-4 text-cyan-300" style="font-family: 'Orbitron', sans-serif;">0-10: Discovery</h2> |
| <p class="text-sm mb-4">Total sensory absorption. Physical development and language acquisition. The world is constant novelty and learning is exponential.</p> |
| <p class="text-xs text-pink-400 font-semibold">Symbolic Risk: Fragility of Beginning (Vulnerability to external factors and childhood accidents).</p> |
| <button class="mt-4 w-full py-2 bg-gradient-to-r from-purple-600 to-blue-500 rounded-lg font-bold text-sm hover:from-purple-700 hover:to-blue-600 transition-all" onclick="closeCard('discovery-card')">Close</button> |
| </div> |
| <div class="fixed bottom-0 left-0 right-0 mx-auto mb-4 w-11/12 max-w-md p-6 info-card rounded-xl opacity-0 invisible transition-all duration-500" id="identity-card"> |
| <h2 class="text-xl font-bold mb-4 text-purple-300" style="font-family: 'Orbitron', sans-serif;">11-20: Identity</h2> |
| <p class="text-sm mb-4">Personality formation and search for belonging. Challenges of rules and beginning of independence. Time is perceived as fast and infinite.</p> |
| <p class="text-xs text-pink-400 font-semibold">Symbolic Risk: Impulsiveness (Risky behavior, traffic accidents, hasty decisions).</p> |
| <button class="mt-4 w-full py-2 bg-gradient-to-r from-purple-600 to-blue-500 rounded-lg font-bold text-sm hover:from-purple-700 hover:to-blue-600 transition-all" onclick="closeCard('identity-card')">Close</button> |
| </div> |
| <div class="fixed bottom-0 left-0 right-0 mx-auto mb-4 w-11/12 max-w-md p-6 info-card rounded-xl opacity-0 invisible transition-all duration-500" id="construction-card"> |
| <h2 class="text-xl font-bold mb-4 text-pink-300" style="font-family: 'Orbitron', sans-serif;">21-30: Construction</h2> |
| <p class="text-sm mb-4">Focus on career, establishment of lasting relationships and financial independence. Period of high energy and belief in immortality.</p> |
| <p class="text-xs text-pink-400 font-semibold">Symbolic Risk: Stress and Burnout (Beginning of bad health habits and overwork).</p> |
| <button class="mt-4 w-full py-2 bg-gradient-to-r from-purple-600 to-blue-500 rounded-lg font-bold text-sm hover:from-purple-700 hover:to-blue-600 transition-all" onclick="closeCard('construction-card')">Close</button> |
| </div> |
| <div class="fixed bottom-0 left-0 right-0 mx-auto mb-4 w-11/12 max-w-md p-6 info-card rounded-xl opacity-0 invisible transition-all duration-500" id="balance-card"> |
| <h2 class="text-xl font-bold mb-4 text-orange-300" style="font-family: 'Orbitron', sans-serif;">31-40: Balance</h2> |
| <p class="text-sm mb-4">Reconciliation between professional, family and personal life. Search for quality of life and stability. Time is already beginning to be valued.</p> |
| <p class="text-xs text-pink-400 font-semibold">Symbolic Risk: Sedentary Lifestyle and Silent Disease (Diabetes, hypertension, weight gain related to lifestyle).</p> |
| <button class="mt-4 w-full py-2 bg-gradient-to-r from-purple-600 to-blue-500 rounded-lg font-bold text-sm hover:from-purple-700 hover:to-blue-600 transition-all" onclick="closeCard('balance-card')">Close</button> |
| </div> |
| <div class="fixed bottom-0 left-0 right-0 mx-auto mb-4 w-11/12 max-w-md p-6 info-card rounded-xl opacity-0 invisible transition-all duration-500" id="review-card"> |
| <h2 class="text-xl font-bold mb-4 text-red-300" style="font-family: 'Orbitron', sans-serif;">41-50: Review</h2> |
| <p class="text-sm mb-4">The being reassesses the choices made, questions the purpose and plans the second half of life. Need for renewal and new challenges.</p> |
| <p class="text-xs text-pink-400 font-semibold">Symbolic Risk: Health Alert (First important chronic diagnoses; need for radical change in habits).</p> |
| <button class="mt-4 w-full py-2 bg-gradient-to-r from-purple-600 to-blue-500 rounded-lg font-bold text-sm hover:from-purple-700 hover:to-blue-600 transition-all" onclick="closeCard('review-card')">Close</button> |
| </div> |
| <div class="fixed bottom-0 left-0 right-0 mx-auto mb-4 w-11/12 max-w-md p-6 info-card rounded-xl opacity-0 invisible transition-all duration-500" id="wisdom-card"> |
| <h2 class="text-xl font-bold mb-4 text-green-300" style="font-family: 'Orbitron', sans-serif;">51-60: Wisdom</h2> |
| <p class="text-sm mb-4">Period of greatest influence and legacy. The application of knowledge for one's own benefit and that of the community. Consolidation of stability.</p> |
| <p class="text-xs text-pink-400 font-semibold">Symbolic Risk: Chronic Challenges (Aging-related diseases requiring daily management and focus on treatment).</p> |
| <button class="mt-4 w-full py-2 bg-gradient-to-r from-purple-600 to-blue-500 rounded-lg font-bold text-sm hover:from-purple-700 hover:to-blue-600 transition-all" onclick="closeCard('wisdom-card')">Close</button> |
| </div> |
| <div class="fixed bottom-0 left-0 right-0 mx-auto mb-4 w-11/12 max-w-md p-6 info-card rounded-xl opacity-0 invisible transition-all duration-500" id="freedom-card"> |
| <h2 class="text-xl font-bold mb-4 text-yellow-300" style="font-family: 'Orbitron', sans-serif;">61-70: Freedom</h2> |
| <p class="text-sm mb-4">Retirement and total dedication to hobbies, travel and social relationships. Period of reduction of obligations and focus on personal satisfaction.</p> |
| <p class="text-xs text-pink-400 font-semibold">Symbolic Risk: Physical Decline (Higher risk of falls, reduced mobility and impact of pre-existing diseases).</p> |
| <button class="mt-4 w-full py-2 bg-gradient-to-r from-purple-600 to-blue-500 rounded-lg font-bold text-sm hover:from-purple-700 hover:to-blue-600 transition-all" onclick="closeCard('freedom-card')">Close</button> |
| </div> |
| <div class="fixed bottom-0 left-0 right-0 mx-auto mb-4 w-11/12 max-w-md p-6 info-card rounded-xl opacity-0 invisible transition-all duration-500" id="contemplation-card"> |
| <h2 class="text-xl font-bold mb-4 text-teal-300" style="font-family: 'Orbitron', sans-serif;">71-80: Contemplation</h2> |
| <p class="text-sm mb-4">Focus on memories, health and acceptance of finitude. The being understands its journey and contemplates life in its entirety, with gratitude and peace.</p> |
| <p class="text-xs text-pink-400 font-semibold">Symbolic Risk: Maximum Fragility (General vulnerability, degenerative and cognitive diseases).</p> |
| <button class="mt-4 w-full py-2 bg-gradient-to-r from-purple-600 to-blue-500 rounded-lg font-bold text-sm hover:from-purple-700 hover:to-blue-600 transition-all" onclick="closeCard('contemplation-card')">Close</button> |
| </div> |
|
|
| <script> |
| |
| document.querySelectorAll('[data-card]').forEach(segment => { |
| segment.addEventListener('click', () => { |
| const cardId = segment.getAttribute('data-card') + '-card'; |
| document.querySelectorAll('.fixed').forEach(card => { |
| card.classList.remove('opacity-100', 'visible'); |
| card.classList.add('opacity-0', 'invisible'); |
| }); |
| document.getElementById(cardId).classList.add('opacity-100', 'visible'); |
| document.getElementById(cardId).classList.remove('opacity-0', 'invisible'); |
| }); |
| }); |
| |
| function closeCard(id) { |
| document.getElementById(id).classList.remove('opacity-100', 'visible'); |
| document.getElementById(id).classList.add('opacity-0', 'invisible'); |
| } |
| |
| |
| document.addEventListener('click', (e) => { |
| if (!e.target.closest('[data-card]') && !e.target.closest('.fixed')) { |
| document.querySelectorAll('.fixed').forEach(card => { |
| card.classList.remove('opacity-100', 'visible'); |
| card.classList.add('opacity-0', 'invisible'); |
| }); |
| } |
| }); |
| |
| |
| feather.replace(); |
| </script> |
| </body> |
| </html> |
|
|
