Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>THE UNKNOWN</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=Major+Mono+Display&family=Space+Mono:wght@400;700&display=swap'); | |
| body { | |
| font-family: 'Space Mono', monospace; | |
| background-color: #0a0a0a; | |
| color: #e0e0e0; | |
| overflow-x: hidden; | |
| } | |
| .glitch { | |
| position: relative; | |
| } | |
| .glitch::before, .glitch::after { | |
| content: attr(data-text); | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .glitch::before { | |
| left: 2px; | |
| text-shadow: -2px 0 #ff00ff; | |
| clip: rect(44px, 450px, 56px, 0); | |
| animation: glitch-anim 5s infinite linear alternate-reverse; | |
| } | |
| .glitch::after { | |
| left: -2px; | |
| text-shadow: -2px 0 #00ffff; | |
| clip: rect(44px, 450px, 56px, 0); | |
| animation: glitch-anim2 5s infinite linear alternate-reverse; | |
| } | |
| @keyframes glitch-anim { | |
| 0% { clip: rect(31px, 9999px, 94px, 0); } | |
| 10% { clip: rect(112px, 9999px, 76px, 0); } | |
| 20% { clip: rect(85px, 9999px, 77px, 0); } | |
| 30% { clip: rect(27px, 9999px, 97px, 0); } | |
| 40% { clip: rect(64px, 9999px, 98px, 0); } | |
| 50% { clip: rect(61px, 9999px, 85px, 0); } | |
| 60% { clip: rect(99px, 9999px, 114px, 0); } | |
| 70% { clip: rect(34px, 9999px, 115px, 0); } | |
| 80% { clip: rect(98px, 9999px, 129px, 0); } | |
| 90% { clip: rect(43px, 9999px, 96px, 0); } | |
| 100% { clip: rect(82px, 9999px, 64px, 0); } | |
| } | |
| @keyframes glitch-anim2 { | |
| 0% { clip: rect(65px, 9999px, 119px, 0); } | |
| 10% { clip: rect(66px, 9999px, 151px, 0); } | |
| 20% { clip: rect(33px, 9999px, 149px, 0); } | |
| 30% { clip: rect(86px, 9999px, 102px, 0); } | |
| 40% { clip: rect(82px, 9999px, 129px, 0); } | |
| 50% { clip: rect(84px, 9999px, 84px, 0); } | |
| 60% { clip: rect(61px, 9999px, 92px, 0); } | |
| 70% { clip: rect(15px, 9999px, 16px, 0); } | |
| 80% { clip: rect(37px, 9999px, 39px, 0); } | |
| 90% { clip: rect(68px, 9999px, 72px, 0); } | |
| 100% { clip: rect(14px, 9999px, 87px, 0); } | |
| } | |
| .terminal { | |
| background: rgba(10, 10, 10, 0.8); | |
| border: 1px solid #333; | |
| box-shadow: 0 0 20px rgba(0, 255, 255, 0.2); | |
| } | |
| .terminal-header { | |
| background: linear-gradient(90deg, #111, #222); | |
| border-bottom: 1px solid #333; | |
| } | |
| .terminal-body { | |
| font-family: 'Major Mono Display', monospace; | |
| } | |
| .cursor { | |
| animation: blink 1s infinite; | |
| } | |
| @keyframes blink { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0; } | |
| } | |
| .particles { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: -1; | |
| } | |
| .portal { | |
| width: 200px; | |
| height: 200px; | |
| border-radius: 50%; | |
| background: radial-gradient(circle, rgba(0,255,255,0.8) 0%, rgba(0,0,255,0.2) 70%, transparent 100%); | |
| box-shadow: 0 0 30px rgba(0, 255, 255, 0.6); | |
| animation: pulse 4s infinite alternate; | |
| } | |
| @keyframes pulse { | |
| 0% { transform: scale(1); opacity: 0.8; } | |
| 100% { transform: scale(1.1); opacity: 1; } | |
| } | |
| .hidden-content { | |
| max-height: 0; | |
| overflow: hidden; | |
| transition: max-height 0.5s ease-out; | |
| } | |
| .revealed { | |
| max-height: 500px; | |
| transition: max-height 0.5s ease-in; | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen flex flex-col items-center justify-center p-4"> | |
| <div class="particles" id="particles-js"></div> | |
| <div class="max-w-4xl w-full mx-auto"> | |
| <header class="text-center mb-10"> | |
| <h1 class="glitch text-5xl md:text-7xl font-bold mb-4" data-text="UNKNOWN">UNKNOWN</h1> | |
| <p class="text-lg md:text-xl text-cyan-300 font-mono">Exploring the boundaries of the unexplained</p> | |
| </header> | |
| <div class="terminal rounded-lg overflow-hidden mb-10"> | |
| <div class="terminal-header flex items-center p-3"> | |
| <div class="flex space-x-2 mr-4"> | |
| <div class="w-3 h-3 rounded-full bg-red-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-yellow-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-green-500"></div> | |
| </div> | |
| <div class="text-sm font-mono">terminal.exe</div> | |
| </div> | |
| <div class="terminal-body p-4 font-mono text-green-400" id="terminal"> | |
| <div class="mb-2">> Initializing system...</div> | |
| <div class="mb-2">> Loading encrypted data...</div> | |
| <div class="mb-2">> Establishing secure connection...</div> | |
| <div class="mb-2">> Welcome to UNKNOWN network</div> | |
| <div class="mb-2">> Type <span class="text-cyan-300">'help'</span> for available commands</div> | |
| <div class="flex items-center"> | |
| <span>> </span> | |
| <input type="text" id="command-input" class="bg-transparent border-none outline-none flex-grow text-green-400 font-mono" autocomplete="off" spellcheck="false"> | |
| <span class="cursor">█</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-10"> | |
| <div class="bg-gray-900 bg-opacity-70 rounded-lg p-6 border border-gray-800 hover:border-cyan-500 transition-all cursor-pointer" onclick="revealContent('content1')"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-10 h-10 rounded-full bg-cyan-900 flex items-center justify-center mr-3"> | |
| <i class="fas fa-question text-cyan-400"></i> | |
| </div> | |
| <h3 class="text-xl font-bold">The Unexplained</h3> | |
| </div> | |
| <p class="text-gray-400">Discover phenomena that defy conventional understanding...</p> | |
| <div id="content1" class="hidden-content mt-4"> | |
| <p class="text-gray-300">From mysterious disappearances to inexplicable cosmic signals, our world is filled with events that challenge our perception of reality. What lies beyond our current understanding?</p> | |
| <button class="mt-3 px-4 py-2 bg-cyan-800 hover:bg-cyan-700 rounded text-sm">Learn More</button> | |
| </div> | |
| </div> | |
| <div class="bg-gray-900 bg-opacity-70 rounded-lg p-6 border border-gray-800 hover:border-purple-500 transition-all cursor-pointer" onclick="revealContent('content2')"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-10 h-10 rounded-full bg-purple-900 flex items-center justify-center mr-3"> | |
| <i class="fas fa-eye text-purple-400"></i> | |
| </div> | |
| <h3 class="text-xl font-bold">Hidden Realities</h3> | |
| </div> | |
| <p class="text-gray-400">Dimensions beyond our perception may hold secrets...</p> | |
| <div id="content2" class="hidden-content mt-4"> | |
| <p class="text-gray-300">Theoretical physics suggests there may be up to 11 dimensions. What if some of these dimensions contain civilizations or phenomena we can't perceive with our limited senses?</p> | |
| <button class="mt-3 px-4 py-2 bg-purple-800 hover:bg-purple-700 rounded text-sm">Explore</button> | |
| </div> | |
| </div> | |
| <div class="bg-gray-900 bg-opacity-70 rounded-lg p-6 border border-gray-800 hover:border-pink-500 transition-all cursor-pointer" onclick="revealContent('content3')"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-10 h-10 rounded-full bg-pink-900 flex items-center justify-center mr-3"> | |
| <i class="fas fa-brain text-pink-400"></i> | |
| </div> | |
| <h3 class="text-xl font-bold">Consciousness</h3> | |
| </div> | |
| <p class="text-gray-400">The greatest mystery may be within us...</p> | |
| <div id="content3" class="hidden-content mt-4"> | |
| <p class="text-gray-300">Consciousness remains one of science's greatest unsolved mysteries. Is it purely a product of the brain, or could it be something more fundamental to the universe itself?</p> | |
| <button class="mt-3 px-4 py-2 bg-pink-800 hover:bg-pink-700 rounded text-sm">Investigate</button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex flex-col items-center justify-center mb-10"> | |
| <div class="portal flex items-center justify-center mb-6"> | |
| <div class="text-center p-4"> | |
| <p class="text-xl font-bold mb-2">ACCESS PORTAL</p> | |
| <p class="text-sm">Enter if you dare</p> | |
| </div> | |
| </div> | |
| <button id="portal-btn" class="px-8 py-3 bg-transparent border-2 border-cyan-500 text-cyan-400 hover:bg-cyan-900 hover:text-white rounded-full font-bold transition-all"> | |
| ACTIVATE | |
| </button> | |
| </div> | |
| <footer class="text-center text-gray-500 text-sm mt-10"> | |
| <p>© 2023 UNKNOWN NETWORK | All rights reserved (or not)</p> | |
| <p class="mt-2">This website may or may not exist in your current reality</p> | |
| </footer> | |
| </div> | |
| <script> | |
| // Terminal functionality | |
| const commandInput = document.getElementById('command-input'); | |
| const terminal = document.getElementById('terminal'); | |
| commandInput.addEventListener('keypress', function(e) { | |
| if (e.key === 'Enter') { | |
| const command = commandInput.value.trim(); | |
| commandInput.value = ''; | |
| // Add the command to terminal history | |
| const commandLine = document.createElement('div'); | |
| commandLine.className = 'mb-2'; | |
| commandLine.textContent = '> ' + command; | |
| terminal.insertBefore(commandLine, commandInput.parentNode); | |
| // Process command | |
| processCommand(command); | |
| // Scroll to bottom | |
| terminal.scrollTop = terminal.scrollHeight; | |
| } | |
| }); | |
| function processCommand(command) { | |
| const response = document.createElement('div'); | |
| response.className = 'mb-2'; | |
| switch(command.toLowerCase()) { | |
| case 'help': | |
| response.innerHTML = ` | |
| Available commands:<br> | |
| - <span class="text-cyan-300">help</span>: Show this help<br> | |
| - <span class="text-cyan-300">about</span>: About this project<br> | |
| - <span class="text-cyan-300">contact</span>: Contact information<br> | |
| - <span class="text-cyan-300">clear</span>: Clear terminal<br> | |
| - <span class="text-cyan-300">access</span>: Request portal access | |
| `; | |
| break; | |
| case 'about': | |
| response.textContent = 'UNKNOWN is a research initiative exploring unexplained phenomena at the boundaries of science and perception.'; | |
| break; | |
| case 'contact': | |
| response.textContent = 'Contact not available through conventional means. Try alternative methods.'; | |
| break; | |
| case 'clear': | |
| // Remove all children except the last one (input line) | |
| while (terminal.children.length > 1) { | |
| terminal.removeChild(terminal.firstChild); | |
| } | |
| return; | |
| case 'access': | |
| response.innerHTML = 'Access request received. <span class="text-green-500">Portal activated.</span>'; | |
| activatePortal(); | |
| break; | |
| default: | |
| response.textContent = 'Command not recognized. Type "help" for available commands.'; | |
| } | |
| terminal.insertBefore(response, commandInput.parentNode); | |
| } | |
| // Content reveal functionality | |
| let currentlyOpen = null; | |
| function revealContent(id) { | |
| const content = document.getElementById(id); | |
| if (currentlyOpen && currentlyOpen !== content) { | |
| currentlyOpen.classList.remove('revealed'); | |
| } | |
| content.classList.toggle('revealed'); | |
| currentlyOpen = content.classList.contains('revealed') ? content : null; | |
| } | |
| // Portal activation | |
| const portalBtn = document.getElementById('portal-btn'); | |
| function activatePortal() { | |
| portalBtn.textContent = 'ENTERING...'; | |
| portalBtn.classList.remove('border-cyan-500', 'text-cyan-400', 'hover:bg-cyan-900'); | |
| portalBtn.classList.add('border-purple-500', 'text-purple-400', 'hover:bg-purple-900'); | |
| // Create particles effect | |
| const particles = document.getElementById('particles-js'); | |
| particles.innerHTML = ''; | |
| for (let i = 0; i < 50; i++) { | |
| const particle = document.createElement('div'); | |
| particle.className = 'absolute rounded-full bg-cyan-500'; | |
| particle.style.width = Math.random() * 5 + 2 + 'px'; | |
| particle.style.height = particle.style.width; | |
| particle.style.left = Math.random() * 100 + '%'; | |
| particle.style.top = Math.random() * 100 + '%'; | |
| particle.style.opacity = Math.random(); | |
| particle.style.animation = `float ${Math.random() * 5 + 3}s infinite ease-in-out`; | |
| // Add animation | |
| const keyframes = ` | |
| @keyframes float { | |
| 0% { transform: translate(0, 0); opacity: ${Math.random()}; } | |
| 50% { transform: translate(${Math.random() * 100 - 50}px, ${Math.random() * 100 - 50}px); opacity: ${Math.random()}; } | |
| 100% { transform: translate(0, 0); opacity: ${Math.random()}; } | |
| } | |
| `; | |
| const style = document.createElement('style'); | |
| style.innerHTML = keyframes; | |
| document.head.appendChild(style); | |
| particles.appendChild(particle); | |
| } | |
| // Change background | |
| document.body.style.background = 'radial-gradient(circle, #0a0a0a 0%, #111126 100%)'; | |
| // After delay, reset | |
| setTimeout(() => { | |
| portalBtn.textContent = 'ACTIVATED'; | |
| portalBtn.classList.remove('border-purple-500', 'text-purple-400', 'hover:bg-purple-900'); | |
| portalBtn.classList.add('border-green-500', 'text-green-400', 'hover:bg-green-900'); | |
| setTimeout(() => { | |
| portalBtn.textContent = 'ACTIVATE'; | |
| portalBtn.classList.remove('border-green-500', 'text-green-400', 'hover:bg-green-900'); | |
| portalBtn.classList.add('border-cyan-500', 'text-cyan-400', 'hover:bg-cyan-900'); | |
| document.body.style.background = '#0a0a0a'; | |
| particles.innerHTML = ''; | |
| }, 3000); | |
| }, 2000); | |
| } | |
| portalBtn.addEventListener('click', activatePortal); | |
| // Initial terminal focus | |
| commandInput.focus(); | |
| </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=zman6969/deploying-the-unknown" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |