| <!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> |
| @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> |
| <style> |
| @media (max-width: 640px) { |
| .galaxy-disk { |
| width: 280px; |
| height: 280px; |
| } |
| .galaxy-core { |
| width: 16px; |
| height: 16px; |
| } |
| .info-card { |
| padding: 1rem; |
| } |
| } |
| </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, #0f0524 0%, #000000 100%);"></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( |
| #00ffff 0deg 45deg, |
| #9d00ff 45deg 90deg, |
| #ff00ff 90deg 135deg, |
| #ff7b00 135deg 180deg, |
| #ff2d2d 180deg 225deg, |
| #00ff6b 225deg 270deg, |
| #ffeb00 270deg 315deg, |
| #00ffcc 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 w-full max-w-full p-6 info-card rounded-t-xl opacity-0 invisible translate-y-full 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')"> |
| <i data-feather="x"></i> Close |
| </button> |
| </div> |
| |
| <div class="fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-80 max-w-full p-6 info-card rounded-xl opacity-0 invisible scale-50 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 top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-80 max-w-full p-6 info-card rounded-xl opacity-0 invisible scale-50 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 top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-80 max-w-full p-6 info-card rounded-xl opacity-0 invisible scale-50 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 top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-80 max-w-full p-6 info-card rounded-xl opacity-0 invisible scale-50 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 top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-80 max-w-full p-6 info-card rounded-xl opacity-0 invisible scale-50 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 top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-80 max-w-full p-6 info-card rounded-xl opacity-0 invisible scale-50 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 top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-80 max-w-full p-6 info-card rounded-xl opacity-0 invisible scale-50 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> |
| |
| VANTA.GLOBE({ |
| el: "#galaxy-bg", |
| mouseControls: true, |
| touchControls: true, |
| gyroControls: false, |
| minHeight: 200.00, |
| minWidth: 200.00, |
| scale: 1.00, |
| scaleMobile: 1.00, |
| color: 0x9d00ff, |
| backgroundColor: 0x0, |
| size: 1.00 |
| }); |
| |
| |
| 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', 'translate-y-0'); |
| card.classList.add('opacity-0', 'invisible', 'translate-y-full'); |
| }); |
| document.getElementById(cardId).classList.add('opacity-100', 'visible', 'translate-y-0'); |
| document.getElementById(cardId).classList.remove('opacity-0', 'invisible', 'translate-y-full'); |
| }); |
| }); |
| function closeCard(id) { |
| document.getElementById(id).classList.remove('opacity-100', 'visible', 'translate-y-0'); |
| document.getElementById(id).classList.add('opacity-0', 'invisible', 'translate-y-full'); |
| } |
| |
| 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', 'scale-100'); |
| card.classList.add('opacity-0', 'invisible', 'scale-50'); |
| }); |
| } |
| }); |
| |
| for (let i = 0; i < 200; i++) { |
| const star = document.createElement('div'); |
| star.style.position = 'absolute'; |
| star.style.width = Math.random() * 3 + 'px'; |
| star.style.height = star.style.width; |
| star.style.backgroundColor = 'white'; |
| star.style.borderRadius = '50%'; |
| star.style.left = Math.random() * 100 + '%'; |
| star.style.top = Math.random() * 100 + '%'; |
| star.style.opacity = Math.random(); |
| star.style.animation = `twinkle ${Math.random() * 5 + 3}s infinite alternate`; |
| document.getElementById('galaxy-bg').appendChild(star); |
| } |
| |
| |
| feather.replace(); |
| |
| |
| const style = document.createElement('style'); |
| style.textContent = ` |
| @keyframes twinkle { |
| 0% { opacity: 0.2; } |
| 100% { opacity: 1; } |
| } |
| `; |
| document.head.appendChild(style); |
| </script> |
| </body> |
| </html> |
|
|
