Spaces:
Running
Running
Crie uma landing page teaser visualmente futurista e impactante para divulgar o NeoOS, um sistema operacional revolucionário desenvolvido pela NeoCorp. O lançamento está previsto para 03 de agosto de 2026. A página deve criar hype, curiosidade e antecipação, como se fosse uma tecnologia de ponta prestes a ser revelada ao mundo. 🎨 Estilo visual: Interface escura (dark mode total) Azul neon, roxo e detalhes em glitch digital Animações sutis de partículas, códigos piscando, ou mapa de circuitos Estética hacker/sci-fi/minimalista > 📄 Conteúdo da página: 1. Hero Section: Frase de impacto como: "O próximo sistema está chegando..." "Em breve, o código será reiniciado." Fundo animado ou com shader tipo grid 3D Efeito digitando: > data de ativação: 03/08/2026 2. Contagem Regressiva (timer até o lançamento) 3. Descrição breve: “NeoOS é um sistema operacional leve, seguro, independente e totalmente inovador. Nenhum GRUB. Nenhum sistema legado. Apenas a próxima era.” 4. Formulário de inscrição (newsletter): "Receba acesso antecipado" 5. Rodapé misterioso: Links para redes sociais da NeoCorp (só ícones) Texto pequeno: "NeoCorp © 2026. Todos os direitos reservados." > 🛠️ Tecnologias sugeridas: TailwindCSS, Vite, GSAP para animações Particles.js ou Vanta.js no fundo Fontes tipo Orbitron ou JetBrains Mono para visual tech --- 👁️🗨️ Frases extras pro visual: system boot sequence pending... preparing the kernel of tomorrow... transmitting final prototype... NeoOS: powered by code, not compromise. - Initial Deployment
aed1bb7
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>NeoOS - The Future of Operating Systems</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=JetBrains+Mono:wght@300;400&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| body { | |
| font-family: 'JetBrains Mono', monospace; | |
| background-color: #0a0a15; | |
| color: #e0e0e0; | |
| overflow-x: hidden; | |
| } | |
| .tech-font { | |
| font-family: 'Orbitron', sans-serif; | |
| } | |
| .hero-gradient { | |
| background: linear-gradient(135deg, rgba(11,0,36,0.9) 0%, rgba(46,0,99,0.8) 50%, rgba(80,0,156,0.7) 100%); | |
| } | |
| .glow { | |
| text-shadow: 0 0 10px rgba(100, 65, 255, 0.8), 0 0 20px rgba(100, 65, 255, 0.6); | |
| } | |
| .glow-box { | |
| box-shadow: 0 0 15px rgba(100, 65, 255, 0.6); | |
| } | |
| .circuit-pattern { | |
| background-image: | |
| linear-gradient(to right, rgba(100, 65, 255, 0.1) 1px, transparent 1px), | |
| linear-gradient(to bottom, rgba(100, 65, 255, 0.1) 1px, transparent 1px); | |
| background-size: 30px 30px; | |
| } | |
| .input-glow:focus { | |
| box-shadow: 0 0 10px rgba(100, 65, 255, 0.6); | |
| } | |
| @keyframes flicker { | |
| 0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { | |
| opacity: 1; | |
| } | |
| 20%, 22%, 24%, 55% { | |
| opacity: 0.5; | |
| } | |
| } | |
| .flicker { | |
| animation: flicker 3s infinite ease-in-out; | |
| } | |
| .typing-cursor { | |
| animation: blink 1s infinite; | |
| } | |
| @keyframes blink { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0; } | |
| } | |
| .code-block { | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .code-block::after { | |
| content: ""; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: linear-gradient(transparent 50%, rgba(100, 65, 255, 0.1) 50%); | |
| background-size: 100% 4px; | |
| z-index: 0; | |
| } | |
| .neon-text { | |
| color: #fff; | |
| text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #6401ff, 0 0 30px #6401ff; | |
| } | |
| .floating { | |
| animation: float 6s ease-in-out infinite; | |
| } | |
| @keyframes float { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-15px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| </style> | |
| </head> | |
| <body class="circuit-pattern"> | |
| <div class="min-h-screen flex flex-col"> | |
| <!-- Hero Section --> | |
| <header class="hero-gradient relative overflow-hidden pt-20 pb-32 px-4 sm:px-6 lg:px-8"> | |
| <div class="absolute inset-0 opacity-10"> | |
| <div class="absolute inset-0 bg-black"></div> | |
| <div class="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1MCIgaGVpZ2h0PSI1MCIgdmlld0JveD0iMCAwIDUwIDUwIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZT0icmdiYSgxMDAsIDY1LCAyNTUsIDAuMSkiIHN0cm9rZS13aWR0aD0iMSI+PHBhdGggZD0iTTI0IDFINTBWMjZIMjRWMjZIMFYwSDI0VjFaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwIDApIHJvdGF0ZSg0NSAyNSA1MCkiLz48L2c+PC9zdmc+')] repeat"></div> | |
| </div> | |
| <div class="max-w-7xl mx-auto relative z-10 text-center"> | |
| <div class="mb-6 inline-block px-4 py-2 border border-purple-500 rounded-full"> | |
| <p class="text-xs sm:text-sm font-mono text-purple-300 tracking-widest">SYSTEM BOOT SEQUENCE PENDING...</p> | |
| </div> | |
| <h1 class="tech-font text-4xl sm:text-6xl md:text-7xl lg:text-8xl font-bold mb-6 glow"> | |
| <span class="block">THE NEXT SYSTEM</span> | |
| <span class="block neon-text floating">IS COMING</span> | |
| </h1> | |
| <div class="max-w-3xl mx-auto"> | |
| <p class="text-lg sm:text-xl md:text-2xl mb-8 text-purple-200"> | |
| NeoOS: powered by code, not compromise. No legacy systems. No unnecessary bulk. Just pure performance. | |
| </p> | |
| <div class="inline-block px-6 py-3 glow-box bg-black/50 border border-purple-500/50 rounded-lg backdrop-blur-sm"> | |
| <p class="font-mono text-sm md:text-base"> | |
| <span class="text-purple-400">> activation date:</span> | |
| <span id="typing" class="text-white"></span> | |
| <span class="typing-cursor">|</span> | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Floating tech elements --> | |
| <div class="hidden lg:block absolute top-20 left-10 w-16 h-16 bg-purple-500/10 rounded-full filter blur-xl"></div> | |
| <div class="hidden lg:block absolute bottom-1/3 right-20 w-24 h-24 bg-blue-500/10 rounded-full filter blur-xl"></div> | |
| <div class="hidden lg:block absolute bottom-20 left+1/4 w-20 h-20 bg-indigo-500/10 rounded-full filter blur-xl"></div> | |
| </header> | |
| <!-- Countdown Section --> | |
| <section class="py-16 px-4 sm:px-6 lg:px-8"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center mb-12"> | |
| <h2 class="tech-font text-2xl sm:text-3xl md:text-4xl mb-4 glow"> | |
| TRANSMITTING FINAL PROTOTYPE IN... | |
| </h2> | |
| <p class="text-sm sm:text-base text-purple-200 mb-2">PREPARING THE KERNEL OF TOMORROW</p> | |
| </div> | |
| <div class="max-w-4xl mx-auto"> | |
| <div class="grid grid-cols-4 gap-4 sm:gap-8"> | |
| <div class="text-center"> | |
| <div class="code-block bg-black/50 border border-purple-500/30 rounded-lg p-4 sm:p-6 mb-2"> | |
| <span id="days" class="tech-font text-3xl sm:text-4xl md:text-5xl font-bold text-purple-400">00</span> | |
| </div> | |
| <span class="text-xs sm:text-sm font-mono text-purple-300">DAYS</span> | |
| </div> | |
| <div class="text-center"> | |
| <div class="code-block bg-black/50 border border-purple-500/30 rounded-lg p-4 sm:p-6 mb-2"> | |
| <span id="hours" class="tech-font text-3xl sm:text-4xl md:text-5xl font-bold text-blue-400">00</span> | |
| </div> | |
| <span class="text-xs sm:text-sm font-mono text-blue-300">HOURS</span> | |
| </div> | |
| <div class="text-center"> | |
| <div class="code-block bg-black/50 border border-purple-500/30 rounded-lg p-4 sm:p-6 mb-2"> | |
| <span id="minutes" class="tech-font text-3xl sm:text-4xl md:text-5xl font-bold text-indigo-400">00</span> | |
| </div> | |
| <span class="text-xs sm:text-sm font-mono text-indigo-300">MINUTES</span> | |
| </div> | |
| <div class="text-center"> | |
| <div class="code-block bg-black/50 border border-purple-500/30 rounded-lg p-4 sm:p-6 mb-2"> | |
| <span id="seconds" class="tech-font text-3xl sm:text-4xl md:text-5xl font-bold text-pink-400">00</span> | |
| </div> | |
| <span class="text-xs sm:text-sm font-mono text-pink-300">SECONDS</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Description Section --> | |
| <section class="py-16 px-4 sm:px-6 lg:px-8 bg-black/20 backdrop-blur-sm"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="flex flex-col lg:flex-row gap-12 items-center"> | |
| <div class="lg:w-1/2"> | |
| <div class="p-8 sm:p-10 code-block border border-purple-700/50 rounded-xl bg-gradient-to-br from-black/60 to-purple-900/10 relative overflow-hidden"> | |
| <div class="absolute -inset-1 bg-gradient-to-tr from-purple-600/20 to-blue-600/20 rounded-xl blur opacity-60"></div> | |
| <div class="relative z-10"> | |
| <h3 class="tech-font text-xl sm:text-2xl md:text-3xl mb-6 text-white glow"> | |
| NEOOS ARCHITECTURE | |
| </h3> | |
| <ul class="space-y-4 text-sm sm:text-base"> | |
| <li class="flex items-start"> | |
| <span class="text-purple-400 mr-3 mt-1">❯</span> | |
| <span>Lightweight modular kernel design</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="text-purple-400 mr-3 mt-1">❯</span> | |
| <span>Quantum-resistant encryption protocols</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="text-purple-400 mr-3 mt-1">❯</span> | |
| <span>AI-optimized resource allocation</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="text-purple-400 mr-3 mt-1">❯</span> | |
| <span>No legacy code or backward compatibility tax</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="text-purple-400 mr-3 mt-1">❯</span> | |
| <span>Blockchain-based update verification</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="text-purple-400 mr-3 mt-1">❯</span> | |
| <span>98% less system overhead than traditional OS</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="lg:w-1/2"> | |
| <h3 class="tech-font text-2xl sm:text-3xl md:text-4xl mb-6 glow"> | |
| BEYOND LEGACY SYSTEMS | |
| </h3> | |
| <div class="space-y-4 text-sm sm:text-base text-gray-300"> | |
| <p> | |
| NeoOS is not an evolution - it's a revolution in operating system design. Built from atomic components with zero legacy baggage, it delivers what modern computing deserves: pure performance without compromise. | |
| </p> | |
| <p class="text-purple-200 border-l-4 border-purple-500 pl-4 py-2"> | |
| "No GRUB. No init systems from the 1980s. Just the next era of computing." | |
| </p> | |
| <p> | |
| The system you've been waiting for without knowing you needed it. A clean slate for the next generation of software. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Signup Section --> | |
| <section class="py-16 px-4 sm:px-6 lg:px-8 relative overflow-hidden"> | |
| <div class="absolute inset-0 -z-10 opacity-20"> | |
| <div class="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MCA1MCI+PHBhdGggZD0iTTI1IDFhMjQgMjQgMCAxIDAgMCA0OCAyNCAyNCAwIDAgMCAwLTQ4eiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJyZ2JhKDEwMCwgNjUsIDI1NSwgMC4wNSkiIHN0cm9rZS13aWR0aD0iMSIvPjwvc3ZnPg==')]"></div> | |
| </div> | |
| <div class="max-w-4xl mx-auto text-center"> | |
| <div class="inline-block px-4 py-1 bg-purple-900/30 border border-purple-700 rounded-full mb-6"> | |
| <p class="text-xs sm:text-sm font-mono text-purple-300">RECEIVE EARLY ACCESS</p> | |
| </div> | |
| <h3 class="tech-font text-2xl sm:text-3xl md:text-4xl mb-6 glow"> | |
| JOIN THE NEXUS | |
| </h3> | |
| <p class="text-sm sm:text-base text-gray-300 max-w-2xl mx-auto mb-8"> | |
| Be among the first to experience NeoOS. Subscribe for exclusive access to beta testing, developer documentation, and launch updates. | |
| </p> | |
| <form class="max-w-md mx-auto"> | |
| <div class="flex flex-col sm:flex-row gap-4"> | |
| <input type="email" placeholder="your@email.com" required | |
| class="flex-grow px-4 py-3 bg-black/50 border border-purple-500/50 rounded-lg focus:outline-none focus:border-purple-400 input-glow text-sm sm:text-base placeholder-purple-300/50"> | |
| <button type="submit" | |
| class="px-6 py-3 bg-gradient-to-r from-purple-600 to-blue-600 hover:from-purple-700 hover:to-blue-700 rounded-lg font-medium text-white glow-box transition-all duration-300 text-sm sm:text-base"> | |
| REGISTER INTEREST | |
| </button> | |
| </div> | |
| <p class="text-xs text-purple-300 mt-3 italic">100% private. No spam. Early access list only.</p> | |
| </form> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="mt-auto py-8 px-4 sm:px-6 lg:px-8 border-t border-purple-900/30"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-4 md:mb-0"> | |
| <p class="text-xs sm:text-sm font-mono text-purple-300">NEOOS™ | A NEO CORP SYSTEM | VERSION 0.9.7α</p> | |
| </div> | |
| <div class="flex items-center space-x-6"> | |
| <a href="#" class="text-purple-300 hover:text-purple-100 transition-colors duration-300"> | |
| <i class="fab fa-twitter text-lg"></i> | |
| </a> | |
| <a href="#" class="text-purple-300 hover:text-purple-100 transition-colors duration-300"> | |
| <i class="fab fa-github text-lg"></i> | |
| </a> | |
| <a href="#" class="text-purple-300 hover:text-purple-100 transition-colors duration-300"> | |
| <i class="fab fa-discord text-lg"></i> | |
| </a> | |
| <a href="#" class="text-purple-300 hover:text-purple-100 transition-colors duration-300"> | |
| <i class="fab fa-medium text-lg"></i> | |
| </a> | |
| </div> | |
| <div class="mt-4 md:mt-0"> | |
| <p class="text-xs text-purple-400 font-mono">NEO CORP © 2026. ALL SYSTEMS SECURED.</p> | |
| </div> | |
| </div> | |
| <div class="mt-8 pt-8 border-t border-purple-900/20 text-center"> | |
| <p class="text-xs font-mono text-purple-900 flicker">SYSTEM STATUS: ENCRYPTED // PREPARING FOR GLOBAL SYNCHRONIZATION</p> | |
| </div> | |
| </div> | |
| </footer> | |
| </div> | |
| <script> | |
| // Typing effect for activation date | |
| const typed = new Typed('#typing', { | |
| strings: ['03/08/2026'], | |
| typeSpeed: 50, | |
| backSpeed: 0, | |
| showCursor: false, | |
| }); | |
| // Countdown timer | |
| function updateCountdown() { | |
| const launchDate = new Date('August 3, 2026 00:00:00').getTime(); | |
| const now = new Date().getTime(); | |
| const distance = launchDate - now; | |
| const days = Math.floor(distance / (1000 * 60 * 60 * 24)); | |
| const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); | |
| const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); | |
| const seconds = Math.floor((distance % (1000 * 60)) / 1000); | |
| document.getElementById('days').textContent = days.toString().padStart(2, '0'); | |
| document.getElementById('hours').textContent = hours.toString().padStart(2, '0'); | |
| document.getElementById('minutes').textContent = minutes.toString().padStart(2, '0'); | |
| document.getElementById('seconds').textContent = seconds.toString().padStart(2, '0'); | |
| // Add animation class to seconds for extra effect | |
| const secondsElement = document.getElementById('seconds'); | |
| secondsElement.classList.add('animate-pulse'); | |
| setTimeout(() => secondsElement.classList.remove('animate-pulse'), 500); | |
| } | |
| // Update every second | |
| updateCountdown(); | |
| setInterval(updateCountdown, 1000); | |
| // Add glitch effect to hero text on hover | |
| const heroText = document.querySelector('.neon-text'); | |
| heroText.addEventListener('mouseover', function() { | |
| this.classList.add('animate-pulse'); | |
| }); | |
| heroText.addEventListener('mouseout', function() { | |
| this.classList.remove('animate-pulse'); | |
| }); | |
| // Random code elements effect | |
| const codeElements = document.querySelectorAll('.code-block'); | |
| codeElements.forEach(element => { | |
| element.addEventListener('mouseover', function() { | |
| this.style.boxShadow = '0 0 20px rgba(100, 65, 255, 0.8)'; | |
| setTimeout(() => { | |
| this.style.boxShadow = '0 0 15px rgba(100, 65, 255, 0.6)'; | |
| }, 300); | |
| }); | |
| }); | |
| </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=AZURA1234/neocorp-org" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |