Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Cosmic Conversations</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap'); | |
| :root { | |
| --cosmic-purple: #7e22ce; | |
| --cosmic-blue: #3b82f6; | |
| --cosmic-pink: #ec4899; | |
| } | |
| body { | |
| font-family: 'Space Grotesk', sans-serif; | |
| background: radial-gradient(ellipse at bottom, #0f172a 0%, #000000 100%); | |
| min-height: 100vh; | |
| color: #e2e8f0; | |
| overflow-x: hidden; | |
| } | |
| .cosmic-text { | |
| background: linear-gradient(90deg, var(--cosmic-purple), var(--cosmic-blue), var(--cosmic-pink)); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| background-size: 200% auto; | |
| animation: shine 3s linear infinite; | |
| } | |
| @keyframes shine { | |
| to { | |
| background-position: 200% center; | |
| } | |
| } | |
| .star { | |
| position: absolute; | |
| background-color: white; | |
| border-radius: 50%; | |
| animation: twinkle var(--duration) infinite ease-in-out; | |
| transform-origin: center; | |
| } | |
| @keyframes twinkle { | |
| 0%, 100% { | |
| opacity: 0.2; | |
| transform: scale(0.8); | |
| } | |
| 50% { | |
| opacity: 1; | |
| transform: scale(1.2); | |
| } | |
| } | |
| .floating { | |
| animation: float 8s ease-in-out infinite; | |
| } | |
| @keyframes float { | |
| 0%, 100% { | |
| transform: translateY(0) rotate(-2deg); | |
| } | |
| 50% { | |
| transform: translateY(-20px) rotate(2deg); | |
| } | |
| } | |
| .phone-icon { | |
| transform: rotate(15deg); | |
| filter: drop-shadow(0 0 8px rgba(147, 197, 253, 0.7)); | |
| } | |
| .cosmic-border { | |
| border: 1px solid; | |
| border-image: linear-gradient(45deg, var(--cosmic-purple), var(--cosmic-blue), var(--cosmic-pink)) 1; | |
| animation: border-pulse 6s infinite; | |
| } | |
| @keyframes border-pulse { | |
| 0% { border-image-source: linear-gradient(45deg, var(--cosmic-purple), var(--cosmic-blue), var(--cosmic-pink)); } | |
| 33% { border-image-source: linear-gradient(45deg, var(--cosmic-blue), var(--cosmic-pink), var(--cosmic-purple)); } | |
| 66% { border-image-source: linear-gradient(45deg, var(--cosmic-pink), var(--cosmic-purple), var(--cosmic-blue)); } | |
| 100% { border-image-source: linear-gradient(45deg, var(--cosmic-purple), var(--cosmic-blue), var(--cosmic-pink)); } | |
| } | |
| .message-card { | |
| transition: all 0.3s ease; | |
| transform-style: preserve-3d; | |
| } | |
| .message-card:hover { | |
| transform: translateY(-5px) rotateX(5deg); | |
| box-shadow: 0 20px 25px -5px rgba(59, 130, 246, 0.3), 0 10px 10px -5px rgba(59, 130, 246, 0.1); | |
| } | |
| .cosmic-bg { | |
| background: rgba(15, 23, 42, 0.7); | |
| backdrop-filter: blur(10px); | |
| -webkit-backdrop-filter: blur(10px); | |
| } | |
| .comet { | |
| position: absolute; | |
| width: 6px; | |
| height: 6px; | |
| border-radius: 50%; | |
| background: linear-gradient(90deg, rgba(255,255,255,0.8), rgba(59, 130, 246, 0.8)); | |
| box-shadow: 0 0 10px 2px rgba(59, 130, 246, 0.6); | |
| animation: cometFly linear infinite; | |
| } | |
| @keyframes cometFly { | |
| 0% { | |
| transform: translate(0, 0); | |
| opacity: 1; | |
| } | |
| 100% { | |
| transform: translate(100vw, -100vh); | |
| opacity: 0; | |
| } | |
| } | |
| .cosmic-btn { | |
| background: linear-gradient(45deg, var(--cosmic-purple), var(--cosmic-blue)); | |
| border: none; | |
| color: white; | |
| overflow: hidden; | |
| position: relative; | |
| transition: all 0.3s; | |
| } | |
| .cosmic-btn:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.3); | |
| } | |
| .cosmic-btn::after { | |
| content: ''; | |
| position: absolute; | |
| top: -50%; | |
| left: -50%; | |
| width: 200%; | |
| height: 200%; | |
| background: linear-gradient( | |
| to bottom right, | |
| rgba(255,255,255,0) 45%, | |
| rgba(255,255,255,0.3) 50%, | |
| rgba(255,255,255,0) 55% | |
| ); | |
| transform: rotate(30deg); | |
| animation: shine-btn 3s infinite; | |
| } | |
| @keyframes shine-btn { | |
| to { | |
| transform: translateX(100%) rotate(30deg); | |
| } | |
| } | |
| .audio-wave { | |
| display: flex; | |
| justify-content: space-between; | |
| width: 50px; | |
| height: 30px; | |
| align-items: flex-end; | |
| } | |
| .audio-wave span { | |
| width: 5px; | |
| background: linear-gradient(to top, var(--cosmic-blue), var(--cosmic-pink)); | |
| border-radius: 5px; | |
| animation: audio-wave 1.5s infinite ease-in-out; | |
| } | |
| .audio-wave span:nth-child(1) { | |
| height: 20%; | |
| animation-delay: 0.1s; | |
| } | |
| .audio-wave span:nth-child(2) { | |
| height: 50%; | |
| animation-delay: 0.3s; | |
| } | |
| .audio-wave span:nth-child(3) { | |
| height: 80%; | |
| animation-delay: 0.5s; | |
| } | |
| .audio-wave span:nth-child(4) { | |
| height: 50%; | |
| animation-delay: 0.7s; | |
| } | |
| .audio-wave span:nth-child(5) { | |
| height: 20%; | |
| animation-delay: 0.9s; | |
| } | |
| @keyframes audio-wave { | |
| 0%, 100% { height: 20%; } | |
| 50% { height: 100%; } | |
| } | |
| </style> | |
| </head> | |
| <body class="relative"> | |
| <!-- Background elements --> | |
| <div id="stars-container"></div> | |
| <div id="comets-container"></div> | |
| <!-- Cosmic particles --> | |
| <div id="particles-container" class="fixed inset-0 pointer-events-none"></div> | |
| <div class="container mx-auto px-4 py-12 max-w-4xl relative z-10"> | |
| <header class="text-center mb-16"> | |
| <div class="inline-block bg-gradient-to-br from-indigo-900/40 to-purple-900/30 backdrop-blur-md rounded-full p-6 border border-indigo-400/20 floating relative"> | |
| <i class="fas fa-phone-alt phone-icon text-5xl text-white"></i> | |
| <div class="audio-wave absolute -bottom-4 left-1/2 transform -translate-x-1/2"></div> | |
| </div> | |
| <h1 class="text-5xl md:text-6xl font-bold mt-8 mb-4 cosmic-text">Cosmic Phone</h1> | |
| <p class="text-xl text-indigo-300 max-w-2xl mx-auto">Overheard conversations from the halls of Olympus</p> | |
| <div class="mt-8 flex justify-center space-x-4"> | |
| <button id="play-btn" class="cosmic-btn px-6 py-2 rounded-full font-medium flex items-center"> | |
| <i class="fas fa-play mr-2"></i> Play Transmission | |
| </button> | |
| <button id="effects-btn" class="bg-slate-800 hover:bg-slate-700 px-6 py-2 rounded-full font-medium border border-slate-600 transition"> | |
| <i class="fas fa-magic mr-2"></i> Cosmic Effects | |
| </button> | |
| </div> | |
| </header> | |
| <main class="cosmic-bg rounded-xl p-8 md:p-12 cosmic-border shadow-xl shadow-indigo-900/20"> | |
| <div class="flex items-start mb-8"> | |
| <div class="bg-gradient-to-br from-purple-600 to-blue-500 rounded-full w-12 h-12 flex items-center justify-center mr-4 flex-shrink-0 shadow-lg"> | |
| <i class="fas fa-user-astronaut text-xl text-white"></i> | |
| </div> | |
| <div class="message-card"> | |
| <h3 class="font-semibold text-indigo-300 mb-1">The Listener</h3> | |
| <p class="italic text-slate-300">While listening on my cosmic phone I caught words from the Olympus blown.</p> | |
| </div> | |
| </div> | |
| <div class="space-y-8 pl-16"> | |
| <div class="relative"> | |
| <div class="absolute -left-4 top-0 h-full w-0.5 bg-gradient-to-b from-indigo-500 to-transparent"></div> | |
| <div class="flex items-start"> | |
| <div class="bg-gradient-to-br from-amber-500 to-yellow-400 rounded-full w-10 h-10 flex items-center justify-center mr-4 flex-shrink-0 shadow-lg"> | |
| <i class="fas fa-crown text-sm text-white"></i> | |
| </div> | |
| <div class="message-card"> | |
| <h3 class="font-semibold text-amber-300 mb-1">Olympian Guide</h3> | |
| <p class="text-slate-200">A newcomer was shown around; That much I could guess, aided by sound.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="relative"> | |
| <div class="absolute -left-4 top-0 h-full w-0.5 bg-gradient-to-b from-indigo-500 to-transparent"></div> | |
| <div class="flex items-start"> | |
| <div class="bg-gradient-to-br from-blue-600 to-cyan-400 rounded-full w-10 h-10 flex items-center justify-center mr-4 flex-shrink-0 shadow-lg"> | |
| <i class="fas fa-balance-scale-right text-sm text-white"></i> | |
| </div> | |
| <div class="message-card"> | |
| <h3 class="font-semibold text-blue-300 mb-1">Archimedes</h3> | |
| <p class="text-slate-200">"There's Archimedes with his lever Still busy on problems as ever. Says: matter and force are transmutable And wrong the laws you thought immutable."</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="relative"> | |
| <div class="absolute -left-4 top-0 h-full w-0.5 bg-gradient-to-b from-indigo-500 to-transparent"></div> | |
| <div class="flex items-start"> | |
| <div class="bg-gradient-to-br from-purple-600 to-pink-500 rounded-full w-10 h-10 flex items-center justify-center mr-4 flex-shrink-0 shadow-lg"> | |
| <i class="fas fa-globe-europe text-sm text-white"></i> | |
| </div> | |
| <div class="message-card"> | |
| <h3 class="font-semibold text-purple-300 mb-1">Olympian Guide</h3> | |
| <p class="text-slate-200">"Below, on Earth, they work at full blast And news are coming in thick and fast. The latest tells of a cosmic gun. To be pelted is very poor fun. We are wary with so much at stake, Those beggars are a pest—no mistake."</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="relative"> | |
| <div class="absolute -left-4 top-0 h-full w-0.5 bg-gradient-to-b from-indigo-500 to-transparent"></div> | |
| <div class="flex items-start"> | |
| <div class="bg-gradient-to-br from-green-600 to-emerald-400 rounded-full w-10 h-10 flex items-center justify-center mr-4 flex-shrink-0 shadow-lg"> | |
| <i class="fas fa-apple-alt text-sm text-white"></i> | |
| </div> | |
| <div class="message-card"> | |
| <h3 class="font-semibold text-green-300 mb-1">Sir Isaac Newton</h3> | |
| <p class="text-slate-200">"Too bad, Sir Isaac, they dimmed your renown And turned your great science upside down. Now a long haired crank, Einstein by name, Puts on your high teaching all the blame. Says: matter and force are transmutable And wrong the laws you thought immutable."</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="relative"> | |
| <div class="absolute -left-4 top-0 h-full w-0.5 bg-gradient-to-b from-indigo-500 to-transparent"></div> | |
| <div class="flex items-start"> | |
| <div class="bg-gradient-to-br from-red-600 to-orange-400 rounded-full w-10 h-10 flex items-center justify-center mr-4 flex-shrink-0 shadow-lg"> | |
| <i class="fas fa-hat-wizard text-sm text-white"></i> | |
| </div> | |
| <div class="message-card"> | |
| <h3 class="font-semibold text-red-300 mb-1">Newton's Reply</h3> | |
| <p class="text-slate-200">"I am much too ignorant, my son, For grasping schemes so finely spun. My followers are of stronger mind And I am content to stay behind, Perhaps I failed, but I did my best, These masters of mine may do the rest. Come, Kelvin, I have finished my cup. When is your friend Tesla coming up."</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="relative"> | |
| <div class="absolute -left-4 top-0 h-full w-0.5 bg-gradient-to-b from-indigo-500 to-transparent"></div> | |
| <div class="flex items-start"> | |
| <div class="bg-gradient-to-br from-cyan-500 to-blue-400 rounded-full w-10 h-10 flex items-center justify-center mr-4 flex-shrink-0 shadow-lg"> | |
| <i class="fas fa-bolt text-sm text-white"></i> | |
| </div> | |
| <div class="message-card"> | |
| <h3 class="font-semibold text-cyan-300 mb-1">Kelvin</h3> | |
| <p class="text-slate-200">"Oh, quoth Kelvin, he is always late, It would be useless to remonstrate."</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <footer class="mt-16 text-center text-slate-400 text-sm"> | |
| <p>A celestial conversation overheard through the cosmic phone</p> | |
| <div class="mt-6 flex justify-center space-x-6"> | |
| <a href="#" class="hover:text-indigo-300 transition transform hover:scale-110"> | |
| <i class="fab fa-twitter text-lg"></i> | |
| </a> | |
| <a href="#" class="hover:text-indigo-300 transition transform hover:scale-110"> | |
| <i class="fab fa-github text-lg"></i> | |
| </a> | |
| <a href="#" class="hover:text-indigo-300 transition transform hover:scale-110"> | |
| <i class="fas fa-envelope text-lg"></i> | |
| </a> | |
| <a href="#" class="hover:text-indigo-300 transition transform hover:scale-110"> | |
| <i class="fas fa-star text-lg"></i> | |
| </a> | |
| </div> | |
| <div class="mt-6"> | |
| <button id="scroll-top" class="bg-slate-800 hover:bg-slate-700 w-10 h-10 rounded-full flex items-center justify-center border border-slate-600 transition opacity-0 invisible"> | |
| <i class="fas fa-arrow-up"></i> | |
| </button> | |
| </div> | |
| </footer> | |
| </div> | |
| <!-- Audio element --> | |
| <audio id="cosmic-audio" loop> | |
| <source src="https://assets.mixkit.co/sfx/preview/mixkit-sci-fi-ambience-1692.mp3" type="audio/mpeg"> | |
| </audio> | |
| <script> | |
| // Create stars | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const container = document.getElementById('stars-container'); | |
| const starCount = 150; | |
| for (let i = 0; i < starCount; i++) { | |
| const star = document.createElement('div'); | |
| star.classList.add('star'); | |
| // Random size between 1 and 3px | |
| const size = Math.random() * 2 + 1; | |
| star.style.width = `${size}px`; | |
| star.style.height = `${size}px`; | |
| // Random position | |
| star.style.left = `${Math.random() * 100}%`; | |
| star.style.top = `${Math.random() * 100}%`; | |
| // Random animation duration | |
| star.style.setProperty('--duration', `${Math.random() * 5 + 3}s`); | |
| container.appendChild(star); | |
| } | |
| // Create comets | |
| const cometsContainer = document.getElementById('comets-container'); | |
| const cometCount = 3; | |
| for (let i = 0; i < cometCount; i++) { | |
| createComet(); | |
| } | |
| function createComet() { | |
| const comet = document.createElement('div'); | |
| comet.classList.add('comet'); | |
| // Random position | |
| const startX = Math.random() * 20; | |
| const startY = Math.random() * 20 + 20; | |
| comet.style.left = `${startX}%`; | |
| comet.style.top = `${startY}%`; | |
| // Random size | |
| const size = Math.random() * 4 + 3; | |
| comet.style.width = `${size}px`; | |
| comet.style.height = `${size}px`; | |
| // Random duration | |
| const duration = Math.random() * 20 + 20; | |
| comet.style.animationDuration = `${duration}s`; | |
| cometsContainer.appendChild(comet); | |
| // Remove comet after animation completes | |
| setTimeout(() => { | |
| comet.remove(); | |
| // Create new comet after delay | |
| setTimeout(createComet, Math.random() * 10000 + 5000); | |
| }, duration * 1000); | |
| } | |
| // Create cosmic particles | |
| const particlesContainer = document.getElementById('particles-container'); | |
| const particleCount = 30; | |
| for (let i = 0; i < particleCount; i++) { | |
| createParticle(); | |
| } | |
| function createParticle() { | |
| const particle = document.createElement('div'); | |
| particle.classList.add('star'); | |
| // Random size between 1 and 2px | |
| const size = Math.random() * 1 + 1; | |
| particle.style.width = `${size}px`; | |
| particle.style.height = `${size}px`; | |
| // Random position | |
| particle.style.left = `${Math.random() * 100}%`; | |
| particle.style.top = `${Math.random() * 100}%`; | |
| // Random animation duration | |
| particle.style.setProperty('--duration', `${Math.random() * 10 + 5}s`); | |
| // Random color | |
| const colors = ['rgba(59, 130, 246, 0.8)', 'rgba(124, 58, 237, 0.8)', 'rgba(236, 72, 153, 0.8)']; | |
| const randomColor = colors[Math.floor(Math.random() * colors.length)]; | |
| particle.style.backgroundColor = randomColor; | |
| particlesContainer.appendChild(particle); | |
| } | |
| // Audio controls | |
| const audio = document.getElementById('cosmic-audio'); | |
| const playBtn = document.getElementById('play-btn'); | |
| let isPlaying = false; | |
| playBtn.addEventListener('click', () => { | |
| if (isPlaying) { | |
| audio.pause(); | |
| playBtn.innerHTML = '<i class="fas fa-play mr-2"></i> Play Transmission'; | |
| } else { | |
| audio.play(); | |
| playBtn.innerHTML = '<i class="fas fa-pause mr-2"></i> Pause Transmission'; | |
| } | |
| isPlaying = !isPlaying; | |
| }); | |
| // Effects button | |
| const effectsBtn = document.getElementById('effects-btn'); | |
| let effectsEnabled = true; | |
| effectsBtn.addEventListener('click', () => { | |
| effectsEnabled = !effectsEnabled; | |
| if (effectsEnabled) { | |
| effectsBtn.innerHTML = '<i class="fas fa-magic mr-2"></i> Cosmic Effects'; | |
| particlesContainer.style.display = 'block'; | |
| cometsContainer.style.display = 'block'; | |
| } else { | |
| effectsBtn.innerHTML = '<i class="fas fa-eye-slash mr-2"></i> Hide Effects'; | |
| particlesContainer.style.display = 'none'; | |
| cometsContainer.style.display = 'none'; | |
| } | |
| }); | |
| // Scroll to top button | |
| const scrollTopBtn = document.getElementById('scroll-top'); | |
| window.addEventListener('scroll', () => { | |
| if (window.pageYOffset > 300) { | |
| scrollTopBtn.classList.remove('opacity-0', 'invisible'); | |
| scrollTopBtn.classList.add('opacity-100', 'visible'); | |
| } else { | |
| scrollTopBtn.classList.remove('opacity-100', 'visible'); | |
| scrollTopBtn.classList.add('opacity-0', 'invisible'); | |
| } | |
| }); | |
| scrollTopBtn.addEventListener('click', () => { | |
| window.scrollTo({ | |
| top: 0, | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| // Mouse parallax effect | |
| document.addEventListener('mousemove', (e) => { | |
| const x = e.clientX / window.innerWidth; | |
| const y = e.clientY / window.innerHeight; | |
| document.querySelector('main').style.transform = `translate(${x * 10 - 5}px, ${y * 10 - 5}px) rotate3d(${y}, ${x}, 0, ${x * 2}deg)`; | |
| // Move particles slightly with mouse | |
| particlesContainer.style.transform = `translate(${x * 20 - 10}px, ${y * 20 - 10}px)`; | |
| }); | |
| // Message hover effect | |
| const messageCards = document.querySelectorAll('.message-card'); | |
| messageCards.forEach(card => { | |
| card.addEventListener('mouseenter', () => { | |
| if (effectsEnabled) { | |
| const particles = document.createElement('div'); | |
| particles.className = 'absolute inset-0 overflow-hidden rounded-lg pointer-events-none'; | |
| for (let i = 0; i < 5; i++) { | |
| const particle = document.createElement('div'); | |
| particle.className = 'absolute w-1 h-1 rounded-full bg-blue-400 opacity-70'; | |
| particle.style.left = `${Math.random() * 100}%`; | |
| particle.style.top = `${Math.random() * 100}%`; | |
| particle.style.transform = `scale(${Math.random() * 0.5 + 0.5})`; | |
| particle.style.animation = `float ${Math.random() * 3 + 2}s infinite ease-in-out ${Math.random() * 1}s`; | |
| particles.appendChild(particle); | |
| } | |
| card.appendChild(particles); | |
| setTimeout(() => { | |
| particles.remove(); | |
| }, 2000); | |
| } | |
| }); | |
| }); | |
| }); | |
| </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=dhishooooom/cosmic-phone" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |