|
|
<!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> |
|
|
|
