Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Quantum Nexus | 2070</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> | |
| @keyframes float { | |
| 0% { transform: translateY(0px) rotate(0deg); } | |
| 50% { transform: translateY(-15px) rotate(3deg); } | |
| 100% { transform: translateY(0px) rotate(0deg); } | |
| } | |
| @keyframes pulse { | |
| 0% { opacity: 0.4; } | |
| 50% { opacity: 0.8; } | |
| 100% { opacity: 0.4; } | |
| } | |
| @keyframes shine { | |
| 0% { transform: translateX(-100%) rotate(30deg); } | |
| 15% { transform: translateX(100%) rotate(30deg); } | |
| 100% { transform: translateX(100%) rotate(30deg); } | |
| } | |
| @keyframes gradient { | |
| 0% { background-position: 0% 50%; } | |
| 50% { background-position: 100% 50%; } | |
| 100% { background-position: 0% 50%; } | |
| } | |
| .quantum-ui { | |
| background: rgba(15, 23, 42, 0.7); | |
| backdrop-filter: blur(25px); | |
| -webkit-backdrop-filter: blur(25px); | |
| border: 1px solid rgba(125, 211, 252, 0.15); | |
| box-shadow: 0 0 30px rgba(56, 182, 255, 0.1), | |
| 0 20px 60px rgba(8, 47, 73, 0.3); | |
| } | |
| .light-theme .quantum-ui { | |
| background: rgba(248, 250, 252, 0.8); | |
| border: 1px solid rgba(56, 182, 255, 0.3); | |
| box-shadow: 0 0 30px rgba(56, 182, 255, 0.2), | |
| 0 20px 60px rgba(8, 47, 73, 0.1); | |
| } | |
| .neon-text { | |
| text-shadow: 0 0 8px rgba(125, 211, 252, 0.7); | |
| } | |
| .holographic { | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .holographic::before { | |
| content: ''; | |
| position: absolute; | |
| top: -50%; | |
| left: -50%; | |
| width: 200%; | |
| height: 200%; | |
| background: linear-gradient( | |
| transparent 0%, | |
| rgba(165, 243, 252, 0.1) 50%, | |
| transparent 100% | |
| ); | |
| transform: rotate(30deg); | |
| animation: shine 8s infinite; | |
| } | |
| .neuro-border { | |
| position: relative; | |
| border-radius: 20px; | |
| overflow: hidden; | |
| } | |
| .neuro-border::after { | |
| content: ''; | |
| position: absolute; | |
| inset: -2px; | |
| z-index: -1; | |
| background: linear-gradient(45deg, | |
| #38bdf8, | |
| #7dd3fc, | |
| #93c5fd, | |
| #7dd3fc, | |
| #38bdf8); | |
| background-size: 200% 200%; | |
| border-radius: 22px; | |
| animation: gradient 6s ease infinite; | |
| opacity: 0.7; | |
| } | |
| .three-d-icon { | |
| transform: perspective(500px) rotateY(10deg); | |
| transition: all 0.3s ease; | |
| } | |
| .three-d-icon:hover { | |
| transform: perspective(500px) rotateY(0deg); | |
| filter: drop-shadow(0 0 10px rgba(125, 211, 252, 0.7)); | |
| } | |
| .particle { | |
| animation: pulse 3s infinite ease-in-out; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-slate-950 text-gray-300 font-sans min-h-screen flex items-center justify-center p-4 overflow-hidden relative"> | |
| <!-- Cosmic background effects --> | |
| <div class="fixed inset-0 overflow-hidden"> | |
| <div class="absolute w-full h-full bg-[url('https://img.freepik.com/free-vector/gradient-quantum-wave-background_23-2149343976.jpg')] bg-cover opacity-20"></div> | |
| <div class="particles absolute inset-0 overflow-hidden"></div> | |
| </div> | |
| <!-- Main Quantum Nexus Interface --> | |
| <div class="quantum-ui rounded-3xl w-full max-w-lg relative overflow-hidden z-10"> | |
| <!-- Network Status Bar --> | |
| <div class="px-6 py-3 flex justify-between items-center bg-slate-900/30 border-b border-slate-800/50"> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-3 h-3 rounded-full bg-emerald-400 shadow-[0_0_6px_3px_rgba(52,211,153,0.3)]"></div> | |
| <span class="text-xs font-mono text-emerald-400">QUANTUM_CONNECTED</span> | |
| </div> | |
| <div class="text-xs font-mono flex items-center space-x-3"> | |
| <span>NEURAL_LINK: 98%</span> | |
| <span class="text-amber-400">SOLAR_SYSTEM_WEB</span> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <!-- Quantum Navigation --> | |
| <div class="flex justify-between items-center mb-8"> | |
| <h1 class="text-2xl font-light tracking-wider neon-text"> | |
| <span class="text-cyan-300">Quantum</span><span class="text-white">Nexus</span> | |
| </h1> | |
| <div class="flex items-center space-x-3"> | |
| <button id="theme-toggle" class="w-8 h-8 rounded-full flex items-center justify-center bg-slate-800 hover:bg-slate-700 transition-all"> | |
| <i class="fas fa-adjust text-cyan-400 text-sm"></i> | |
| </button> | |
| <div class="text-xs px-3 py-1 rounded-full bg-blue-900/30 border border-cyan-400/30 neon-text"> | |
| v20.70 | |
| </div> | |
| </div> | |
| </div> | |
| <!-- User Profile --> | |
| <div class="neuro-border mb-8"> | |
| <div class="bg-slate-900/70 p-4 rounded-xl flex items-center justify-between"> | |
| <div class="flex items-center space-x-4"> | |
| <div class="three-d-icon"> | |
| <div class="w-12 h-12 rounded-full bg-gradient-to-br from-cyan-400 to-blue-500 flex items-center justify-center shadow-[0_0_15px_0_rgba(125,211,252,0.5)]"> | |
| <i class="fas fa-user-astronaut text-white"></i> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="text-lg font-medium text-white">Quantum Pilgrim</div> | |
| <div class="text-xs text-cyan-300 font-mono">ID: 2070-QNTM-NXS</div> | |
| </div> | |
| </div> | |
| <div class="text-right"> | |
| <div class="text-xs text-cyan-300 mb-1">SPIRITUAL_ENERGY</div> | |
| <div class="w-28 h-2 bg-slate-700 rounded-full overflow-hidden"> | |
| <div id="energy-bar" class="h-full bg-gradient-to-r from-cyan-400 to-blue-500 rounded-full transition-all duration-500" style="width: 78%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Quantum Tools --> | |
| <div class="grid grid-cols-3 gap-3 mb-6"> | |
| <button class="quantum-tool aspect-square bg-slate-900/40 hover:bg-slate-800/50 rounded-xl flex flex-col items-center justify-center transition-all border border-slate-800/50 hover:border-cyan-500/30 group"> | |
| <div class="w-10 h-10 bg-gradient-to-br from-blue-400 to-cyan-500 rounded-full flex items-center justify-center mb-2 group-hover:scale-110 transition-transform"> | |
| <i class="fas fa-atom text-white"></i> | |
| </div> | |
| <span class="text-xs">Meditation</span> | |
| </button> | |
| <button class="quantum-tool aspect-square bg-slate-900/40 hover:bg-slate-800/50 rounded-xl flex flex-col items-center justify-center transition-all border border-slate-800/50 hover:border-cyan-500/30 group"> | |
| <div class="w-10 h-10 bg-gradient-to-br from-purple-400 to-indigo-500 rounded-full flex items-center justify-center mb-2 group-hover:scale-110 transition-transform"> | |
| <i class="fas fa-brain text-white"></i> | |
| </div> | |
| <span class="text-xs">Mindfulness</span> | |
| </button> | |
| <button class="quantum-tool aspect-square bg-slate-900/40 hover:bg-slate-800/50 rounded-xl flex flex-col items-center justify-center transition-all border border-slate-800/50 hover:border-cyan-500/30 group"> | |
| <div class="w-10 h-10 bg-gradient-to-br from-amber-400 to-orange-500 rounded-full flex items-center justify-center mb-2 group-hover:scale-110 transition-transform"> | |
| <i class="fas fa-star text-white"></i> | |
| </div> | |
| <span class="text-xs">Gratitude</span> | |
| </button> | |
| <button class="quantum-tool aspect-square bg-slate-900/40 hover:bg-slate-800/50 rounded-xl flex flex-col items-center justify-center transition-all border border-slate-800/50 hover:border-cyan-500/30 group"> | |
| <div class="w-10 h-10 bg-gradient-to-br from-emerald-400 to-green-500 rounded-full flex items-center justify-center mb-2 group-hover:scale-110 transition-transform"> | |
| <i class="fas fa-leaf text-white"></i> | |
| </div> | |
| <span class="text-xs">Nature</span> | |
| </button> | |
| <button class="quantum-tool aspect-square bg-slate-900/40 hover:bg-slate-800/50 rounded-xl flex flex-col items-center justify-center transition-all border border-slate-800/50 hover:border-cyan-500/30 group"> | |
| <div class="w-10 h-10 bg-gradient-to-br from-pink-400 to-rose-500 rounded-full flex items-center justify-center mb-2 group-hover:scale-110 transition-transform"> | |
| <i class="fas fa-heart text-white"></i> | |
| </div> | |
| <span class="text-xs">Love</span> | |
| </button> | |
| <button class="quantum-tool aspect-square bg-slate-900/40 hover:bg-slate-800/50 rounded-xl flex flex-col items-center justify-center transition-all border border-slate-800/50 hover:border-cyan-500/30 group"> | |
| <div class="w-10 h-10 bg-gradient-to-br from-violet-400 to-fuchsia-500 rounded-full flex items-center justify-center mb-2 group-hover:scale-110 transition-transform"> | |
| <i class="fas fa-infinity text-white"></i> | |
| </div> | |
| <span class="text-xs">Wisdom</span> | |
| </button> | |
| </div> | |
| <!-- Meditation Module --> | |
| <div class="holographic bg-slate-900/50 rounded-xl p-5 mb-6"> | |
| <div class="flex justify-between items-start mb-4"> | |
| <div> | |
| <div class="text-xs text-cyan-300 mb-1">ACTIVE_MODULE</div> | |
| <h3 class="text-xl font-medium text-white">Quantum Meditation</h3> | |
| </div> | |
| <div class="text-xs px-2 py-1 rounded bg-blue-900/30 border border-cyan-400/30"> | |
| <span id="session-status">READY</span> | |
| </div> | |
| </div> | |
| <p class="text-sm mb-5">Synchronize your quantum consciousness with the universal energy field. This 8-minute session will elevate your vibrational frequency.</p> | |
| <div class="flex justify-between items-center mb-4"> | |
| <div> | |
| <div class="text-xs text-cyan-300">SESSION_DURATION</div> | |
| <div id="session-time" class="text-sm">8:00</div> | |
| </div> | |
| <div> | |
| <div class="text-xs text-cyan-300">BENEFITS_LEVEL</div> | |
| <div class="text-sm">⭐⭐⭐⭐⭐</div> | |
| </div> | |
| </div> | |
| <button id="start-meditation" class="w-full py-3 rounded-lg bg-gradient-to-r from-cyan-500 to-blue-600 hover:from-cyan-400 hover:to-blue-500 transition-all text-white font-medium text-sm flex items-center justify-center space-x-2 shadow-[0_0_15px_0_rgba(56,182,255,0.3)]"> | |
| <i class="fas fa-play"></i> | |
| <span>INITIATE_QUANTUM_STATE</span> | |
| </button> | |
| </div> | |
| <!-- Cosmic Stats --> | |
| <div class="grid grid-cols-3 gap-3 text-center mb-8"> | |
| <div class="bg-slate-900/40 rounded-lg p-3"> | |
| <div class="text-xs text-cyan-300 mb-1">STREAK</div> | |
| <div class="text-xl font-mono">147d</div> | |
| </div> | |
| <div class="bg-slate-900/40 rounded-lg p-3"> | |
| <div class="text-xs text-cyan-300 mb-1">SESSION</div> | |
| <div class="text-xl font-mono">328</div> | |
| </div> | |
| <div class="bg-slate-900/40 rounded-lg p-3"> | |
| <div class="text-xs text-cyan-300 mb-1">FOCUS</div> | |
| <div class="text-xl font-mono">92%</div> | |
| </div> | |
| </div> | |
| <!-- Navigation --> | |
| <div class="flex justify-around items-center py-3 border-t border-slate-800/50"> | |
| <button class="p-2 rounded-full text-cyan-400 hover:bg-slate-800 transition-all"> | |
| <i class="fas fa-home"></i> | |
| </button> | |
| <button class="p-2 rounded-full text-gray-400 hover:text-cyan-400 hover:bg-slate-800 transition-all"> | |
| <i class="fas fa-chart-line"></i> | |
| </button> | |
| <button class="p-2 rounded-full text-gray-400 hover:text-cyan-400 hover:bg-slate-800 transition-all"> | |
| <i class="fas fa-compass"></i> | |
| </button> | |
| <button class="p-2 rounded-full text-gray-400 hover:text-cyan-400 hover:bg-slate-800 transition-all"> | |
| <i class="fas fa-user-astronaut"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Floating quantum particles --> | |
| <div class="fixed top-1/4 left-1/6 w-3 h-3 rounded-full bg-cyan-400 opacity-30 animation-float" style="animation-delay: 0.3s;"></div> | |
| <div class="fixed top-3/4 right-1/5 w-4 h-4 rounded-full bg-blue-500 opacity-30 animation-float" style="animation-delay: 0.7s;"></div> | |
| <div class="fixed bottom-1/4 left-1/3 w-2 h-2 rounded-full bg-purple-400 opacity-30 animation-float" style="animation-delay: 1.1s;"></div> | |
| <div class="fixed top-1/3 right-1/4 w-5 h-5 rounded-full bg-indigo-400 opacity-30 animation-float" style="animation-delay: 1.6s;"></div> | |
| <script> | |
| // Create particles effect | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const particlesContainer = document.querySelector('.particles'); | |
| if (particlesContainer) { | |
| for (let i = 0; i < 50; i++) { | |
| const particle = document.createElement('div'); | |
| particle.className = 'particle absolute rounded-full bg-white opacity-5'; | |
| particle.style.width = `${Math.random() * 3 + 1}px`; | |
| particle.style.height = particle.style.width; | |
| particle.style.left = `${Math.random() * 100}%`; | |
| particle.style.top = `${Math.random() * 100}%`; | |
| particle.style.animation = `pulse ${Math.random() * 5 + 3}s infinite ease-in-out`; | |
| particlesContainer.appendChild(particle); | |
| } | |
| } | |
| // Register animations for floating elements | |
| document.querySelectorAll('.animation-float').forEach(el => { | |
| el.style.animation = `float ${3 + Math.random() * 3}s ease-in-out infinite ${el.style.animationDelay}`; | |
| }); | |
| // Initialize light theme if not set | |
| if (!localStorage.getItem('theme')) { | |
| localStorage.setItem('theme', 'dark'); | |
| } | |
| }); | |
| // Theme toggle | |
| const themeToggle = document.getElementById('theme-toggle'); | |
| if (themeToggle) { | |
| themeToggle.addEventListener('click', () => { | |
| document.body.classList.toggle('light-theme'); | |
| // Update theme preference | |
| const currentTheme = document.body.classList.contains('light-theme') ? 'light' : 'dark'; | |
| localStorage.setItem('theme', currentTheme); | |
| const icon = themeToggle.querySelector('i'); | |
| if (icon.classList.contains('fa-adjust')) { | |
| icon.classList.remove('fa-adjust'); | |
| icon.classList.add('fa-sun'); | |
| } else { | |
| icon.classList.remove('fa-sun'); | |
| icon.classList.add('fa-adjust'); | |
| } | |
| }); | |
| } | |
| // Meditation timer functionality | |
| const startMeditation = document.getElementById('start-meditation'); | |
| const sessionStatus = document.getElementById('session-status'); | |
| const energyBar = document.getElementById('energy-bar'); | |
| const sessionTime = document.getElementById('session-time'); | |
| let isMeditating = false; | |
| let meditationInterval; | |
| let remainingTime = 480; // 8 minutes in seconds | |
| if (startMeditation) { | |
| startMeditation.addEventListener('click', () => { | |
| if (!isMeditating) { | |
| // Start meditation | |
| startMeditationSession(); | |
| } else { | |
| // Pause meditation | |
| pauseMeditationSession(); | |
| } | |
| }); | |
| } | |
| function startMeditationSession() { | |
| isMeditating = true; | |
| sessionStatus.textContent = 'ACTIVE'; | |
| sessionStatus.parentElement.classList.remove('border-cyan-400/30'); | |
| sessionStatus.parentElement.classList.add('border-emerald-400/50'); | |
| startMeditation.innerHTML = '<i class="fas fa-pause"></i><span>PAUSE_QUANTUM_STATE</span>'; | |
| startMeditation.classList.remove('from-cyan-500', 'to-blue-600', 'hover:from-cyan-400', 'hover:to-blue-500'); | |
| startMeditation.classList.add('from-emerald-500', 'to-green-600', 'hover:from-emerald-400', 'hover:to-green-500'); | |
| // Update timer and energy bar during meditation | |
| meditationInterval = setInterval(updateMeditationSession, 1000); | |
| updateTimerDisplay(); | |
| } | |
| function pauseMeditationSession() { | |
| isMeditating = false; | |
| sessionStatus.textContent = 'PAUSED'; | |
| sessionStatus.parentElement.classList.remove('border-emerald-400/50'); | |
| sessionStatus.parentElement.classList.add('border-amber-400/50'); | |
| startMeditation.innerHTML = '<i class="fas fa-play"></i><span>RESUME_QUANTUM_STATE</span>'; | |
| clearInterval(meditationInterval); | |
| } | |
| function updateMeditationSession() { | |
| remainingTime--; | |
| updateTimerDisplay(); | |
| if (remainingTime <= 0) { | |
| completeMeditationSession(); | |
| } else { | |
| // Calculate energy percentage | |
| const elapsedPercent = ((480 - remainingTime) / 480) * 100; | |
| const energyPercent = Math.min(78 + elapsedPercent * 0.5, 100); | |
| energyBar.style.width = `${energyPercent}%`; | |
| // Update energy bar color based on level | |
| if (energyPercent > 90) { | |
| energyBar.className = 'h-full bg-gradient-to-r from-emerald-400 to-green-500 rounded-full transition-all duration-300'; | |
| } else if (energyPercent > 70) { | |
| energyBar.className = 'h-full bg-gradient-to-r from-cyan-400 to-blue-500 rounded-full transition-all duration-300'; | |
| } | |
| } | |
| } | |
| function updateTimerDisplay() { | |
| const minutes = Math.floor(remainingTime / 60); | |
| const seconds = remainingTime % 60; | |
| sessionTime.textContent = `${minutes}:${seconds < 10 ? '0' + seconds : seconds}`; | |
| } | |
| function completeMeditationSession() { | |
| isMeditating = false; | |
| sessionStatus.textContent = 'COMPLETE'; | |
| sessionStatus.parentElement.classList.remove('border-amber-400/50'); | |
| sessionStatus.parentElement.classList.add('border-purple-400/50'); | |
| startMeditation.innerHTML = '<i class="fas fa-redo"></i><span>START_NEW_SESSION</span>'; | |
| startMeditation.classList.remove('from-emerald-500', 'to-green-600', 'hover:from-emerald-400', 'hover:to-green-500'); | |
| startMeditation.classList.add('from-purple-500', 'to-indigo-600', 'hover:from-purple-400', 'hover:to-indigo-500'); | |
| // Animation effect | |
| startMeditation.style.animation = 'pulse 2s infinite'; | |
| setTimeout(() => { | |
| startMeditation.style.animation = ''; | |
| }, 5000); | |
| // Set energy to max | |
| energyBar.style.width = '100%'; | |
| energyBar.className = 'h-full bg-gradient-to-r from-emerald-400 to-green-500 rounded-full transition-all duration-1000'; | |
| // Reset timer | |
| remainingTime = 480; | |
| updateTimerDisplay(); | |
| } | |
| // Quantum tool hover effects | |
| document.querySelectorAll('.quantum-tool').forEach(tool => { | |
| tool.addEventListener('mouseenter', () => { | |
| const icon = tool.querySelector('div'); | |
| icon.style.boxShadow = '0 0 20px rgba(125, 211, 252, 0.5)'; | |
| }); | |
| tool.addEventListener('mouseleave', () => { | |
| const icon = tool.querySelector('div'); | |
| icon.style.boxShadow = ''; | |
| }); | |
| }); | |
| </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=Agelly/quantumnexus" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |