Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>NEO | 未来科技峰会</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"> | |
| <script> | |
| tailwind.config = { | |
| darkMode: 'class', | |
| theme: { | |
| extend: { | |
| colors: { | |
| neonGreen: '#03fc90', | |
| neonPink: '#fc03f8', | |
| darkBg: '#0a0a0a', | |
| }, | |
| animation: { | |
| 'fade-in': 'fadeIn 0.5s ease-out forwards', | |
| 'slide-up': 'slideUp 0.8s ease-out forwards', | |
| 'scale-in': 'scaleIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards', | |
| }, | |
| keyframes: { | |
| fadeIn: { | |
| '0%': { opacity: '0' }, | |
| '100%': { opacity: '1' }, | |
| }, | |
| slideUp: { | |
| '0%': { transform: 'translateY(30px)', opacity: '0' }, | |
| '100%': { transform: 'translateY(0)', opacity: '1' }, | |
| }, | |
| scaleIn: { | |
| '0%': { transform: 'scale(0.95)', opacity: '0' }, | |
| '100%': { transform: 'scale(1)', opacity: '1' }, | |
| }, | |
| }, | |
| }, | |
| }, | |
| } | |
| </script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&display=swap'); | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background-color: #0a0a0a; | |
| color: white; | |
| overflow-x: hidden; | |
| } | |
| .grid-pattern { | |
| background-image: | |
| linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), | |
| linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px); | |
| background-size: 40px 40px; | |
| } | |
| .neon-text-green { | |
| text-shadow: 0 0 5px rgba(3, 252, 144, 0.3); | |
| } | |
| .neon-text-pink { | |
| text-shadow: 0 0 5px rgba(252, 3, 248, 0.3); | |
| } | |
| .neon-glow-green { | |
| box-shadow: 0 0 15px rgba(3, 252, 144, 0.5); | |
| } | |
| .neon-glow-pink { | |
| box-shadow: 0 0 15px rgba(252, 3, 248, 0.5); | |
| } | |
| .section { | |
| min-height: 100vh; | |
| padding: 80px 0; | |
| position: relative; | |
| } | |
| .fade-in { | |
| animation: fadeIn 0.8s ease-out forwards; | |
| } | |
| .animate-on-scroll { | |
| opacity: 0; | |
| transform: translateY(30px); | |
| transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1); | |
| } | |
| .animate-on-scroll.visible { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| .graphic-line { | |
| stroke-dasharray: 1000; | |
| stroke-dashoffset: 1000; | |
| animation: dash 3s linear forwards; | |
| } | |
| @keyframes dash { | |
| to { | |
| stroke-dashoffset: 0; | |
| } | |
| } | |
| .scroll-hint { | |
| position: absolute; | |
| bottom: 40px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| animation: bounce 2s infinite; | |
| } | |
| @keyframes bounce { | |
| 0%, 20%, 50%, 80%, 100% { | |
| transform: translateY(0) translateX(-50%); | |
| } | |
| 40% { | |
| transform: translateY(-20px) translateX(-50%); | |
| } | |
| 60% { | |
| transform: translateY(-10px) translateX(-50%); | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="grid-pattern"> | |
| <!-- Navigation --> | |
| <nav class="fixed top-0 left-0 right-0 z-50 py-6 px-8 flex justify-between items-center"> | |
| <div class="text-2xl font-bold">NEO<span class="text-neonGreen">.</span></div> | |
| <div class="hidden md:flex space-x-8"> | |
| <a href="#" class="text-sm uppercase tracking-widest hover:text-neonGreen transition-colors">About</a> | |
| <a href="#" class="text-sm uppercase tracking-widest hover:text-neonPink transition-colors">Speakers</a> | |
| <a href="#" class="text-sm uppercase tracking-widest hover:text-neonGreen transition-colors">Schedule</a> | |
| <a href="#" class="text-sm uppercase tracking-widest hover:text-neonPink transition-colors">Register</a> | |
| </div> | |
| <button class="md:hidden text-neonGreen"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="section flex items-center justify-center relative"> | |
| <div class="container mx-auto px-6"> | |
| <div class="max-w-4xl mx-auto text-center"> | |
| <h1 class="text-6xl md:text-8xl font-black mb-6 neon-text-green" style="animation-delay: 0.2s;"> | |
| 未来科技<span class="text-neonGreen">峰会</span> | |
| </h1> | |
| <p class="text-lg md:text-xl text-gray-400 mb-12 max-w-2xl mx-auto" style="animation-delay: 0.4s;"> | |
| Where innovation meets reality. 探索科技前沿，塑造明日世界 | |
| </p> | |
| <div class="flex flex-col sm:flex-row justify-center gap-4" style="animation-delay: 0.6s;"> | |
| <button class="px-8 py-4 bg-neonGreen text-black font-bold rounded-full hover:bg-opacity-90 transition-all transform hover:scale-105 neon-glow-green"> | |
| 立即注册 | |
| </button> | |
| <button class="px-8 py-4 border border-neonPink text-neonPink font-bold rounded-full hover:bg-neonPink hover:bg-opacity-10 transition-all transform hover:scale-105 neon-glow-pink"> | |
| Watch Trailer | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="scroll-hint animate-on-scroll" style="animation-delay: 1s;"> | |
| <div class="text-neonGreen text-sm mb-2">SCROLL DOWN</div> | |
| <div class="w-6 h-10 border-2 border-neonGreen rounded-full flex justify-center items-start p-1"> | |
| <div class="w-1 h-2 bg-neonGreen rounded-full animate-bounce"></div> | |
| </div> | |
| </div> | |
| <!-- Floating elements --> | |
| <div class="absolute top-1/4 left-10 w-16 h-16 rounded-full bg-neonGreen bg-opacity-20 blur-xl animate-pulse"></div> | |
| <div class="absolute bottom-1/4 right-10 w-24 h-24 rounded-full bg-neonPink bg-opacity-20 blur-xl animate-pulse"></div> | |
| </section> | |
| <!-- Stats Section --> | |
| <section class="section flex items-center relative"> | |
| <div class="container mx-auto px-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-12"> | |
| <div class="animate-on-scroll"> | |
| <div class="text-7xl md:text-8xl font-black text-neonGreen mb-4">50+</div> | |
| <div class="text-xl font-bold mb-2">全球顶尖演讲者</div> | |
| <div class="text-gray-400">From Silicon Valley to Shenzhen</div> | |
| <svg width="120" height="10" viewBox="0 0 120 10" class="mt-6"> | |
| <line x1="0" y1="5" x2="120" y2="5" stroke="#03fc90" stroke-width="4" class="graphic-line" style="animation-delay: 0.3s;"/> | |
| </svg> | |
| </div> | |
| <div class="animate-on-scroll" style="transition-delay: 0.2s;"> | |
| <div class="text-7xl md:text-8xl font-black text-neonPink mb-4">3K+</div> | |
| <div class="text-xl font-bold mb-2">行业精英参会</div> | |
| <div class="text-gray-400">Networking opportunities</div> | |
| <svg width="120" height="10" viewBox="0 0 120 10" class="mt-6"> | |
| <line x1="0" y1="5" x2="120" y2="5" stroke="#fc03f8" stroke-width="4" class="graphic-line" style="animation-delay: 0.5s;"/> | |
| </svg> | |
| </div> | |
| <div class="animate-on-scroll" style="transition-delay: 0.4s;"> | |
| <div class="text-7xl md:text-8xl font-black text-neonGreen mb-4">24</div> | |
| <div class="text-xl font-bold mb-2">小时创新体验</div> | |
| <div class="text-gray-400">Non-stop tech showcase</div> | |
| <svg width="120" height="10" viewBox="0 0 120 10" class="mt-6"> | |
| <line x1="0" y1="5" x2="120" y2="5" stroke="#03fc90" stroke-width="4" class="graphic-line" style="animation-delay: 0.7s;"/> | |
| </svg> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Floating elements --> | |
| <div class="absolute -bottom-20 -right-20 w-64 h-64 rounded-full bg-neonGreen bg-opacity-10 blur-3xl"></div> | |
| </section> | |
| <!-- Featured Tech Section --> | |
| <section class="section flex items-center relative"> | |
| <div class="container mx-auto px-6"> | |
| <div class="max-w-4xl mx-auto mb-20 animate-on-scroll"> | |
| <h2 class="text-4xl md:text-6xl font-black mb-6"> | |
| 探索<span class="text-neonPink">前沿科技</span> | |
| </h2> | |
| <p class="text-xl text-gray-400"> | |
| Cutting-edge technologies that will redefine our future | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-12"> | |
| <div class="animate-on-scroll"> | |
| <div class="flex items-start mb-6"> | |
| <div class="text-5xl font-black text-neonGreen mr-4">01</div> | |
| <div> | |
| <h3 class="text-2xl font-bold mb-2">量子计算突破</h3> | |
| <p class="text-gray-400">Quantum supremacy in practical applications</p> | |
| </div> | |
| </div> | |
| <div class="h-px bg-gradient-to-r from-neonGreen to-transparent mb-6"></div> | |
| <p class="text-gray-300"> | |
| 全球首个商业化量子计算机平台，解决传统计算机无法处理的复杂问题。Join us to witness the quantum revolution. | |
| </p> | |
| </div> | |
| <div class="animate-on-scroll" style="transition-delay: 0.2s;"> | |
| <div class="flex items-start mb-6"> | |
| <div class="text-5xl font-black text-neonPink mr-4">02</div> | |
| <div> | |
| <h3 class="text-2xl font-bold mb-2">脑机接口</h3> | |
| <p class="text-gray-400">Mind-controlled devices</p> | |
| </div> | |
| </div> | |
| <div class="h-px bg-gradient-to-r from-neonPink to-transparent mb-6"></div> | |
| <p class="text-gray-300"> | |
| 最新一代非侵入式脑机接口技术，实现思维与机器的无缝连接。See live demonstrations of thought-to-text technology. | |
| </p> | |
| </div> | |
| <div class="animate-on-scroll" style="transition-delay: 0.4s;"> | |
| <div class="flex items-start mb-6"> | |
| <div class="text-5xl font-black text-neonGreen mr-4">03</div> | |
| <div> | |
| <h3 class="text-2xl font-bold mb-2">6G网络</h3> | |
| <p class="text-gray-400">Next-gen connectivity</p> | |
| </div> | |
| </div> | |
| <div class="h-px bg-gradient-to-r from-neonGreen to-transparent mb-6"></div> | |
| <p class="text-gray-300"> | |
| 超越5G的通信技术，实现Tbps级传输速度与1ms以下延迟。Experience the future of connectivity. | |
| </p> | |
| </div> | |
| <div class="animate-on-scroll" style="transition-delay: 0.6s;"> | |
| <div class="flex items-start mb-6"> | |
| <div class="text-5xl font-black text-neonPink mr-4">04</div> | |
| <div> | |
| <h3 class="text-2xl font-bold mb-2">通用人工智能</h3> | |
| <p class="text-gray-400">AGI breakthroughs</p> | |
| </div> | |
| </div> | |
| <div class="h-px bg-gradient-to-r from-neonPink to-transparent mb-6"></div> | |
| <p class="text-gray-300"> | |
| 首个通过图灵测试的AGI系统展示，具备跨领域学习与推理能力。Witness history in the making. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Floating elements --> | |
| <div class="absolute top-1/3 -left-40 w-80 h-80 rounded-full bg-neonPink bg-opacity-10 blur-3xl"></div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="section flex items-center relative"> | |
| <div class="container mx-auto px-6"> | |
| <div class="max-w-4xl mx-auto text-center animate-on-scroll"> | |
| <h2 class="text-4xl md:text-6xl font-black mb-8"> | |
| 加入<span class="text-neonGreen">科技革命</span> | |
| </h2> | |
| <p class="text-xl text-gray-400 mb-12 max-w-2xl mx-auto"> | |
| Limited seats available. 立即注册获取早鸟优惠 | |
| </p> | |
| <button class="px-12 py-5 bg-neonGreen text-black font-bold rounded-full hover:bg-opacity-90 transition-all transform hover:scale-105 text-xl neon-glow-green"> | |
| 立即注册 → | |
| </button> | |
| <div class="mt-20 text-gray-500 text-sm"> | |
| <p>NEO TECH SUMMIT 2024 | 北京 · 上海 · 深圳 · 线上</p> | |
| <p class="mt-2">Nov 11-13, 2024</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Floating elements --> | |
| <div class="absolute bottom-0 left-0 right-0 h-1/2 bg-gradient-to-t from-black to-transparent z-0"></div> | |
| </section> | |
| <script> | |
| // Scroll animation | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| entry.target.classList.add('visible'); | |
| } | |
| }); | |
| }, { | |
| threshold: 0.1 | |
| }); | |
| document.querySelectorAll('.animate-on-scroll').forEach(el => { | |
| observer.observe(el); | |
| }); | |
| // Apple-like scroll effect | |
| let lastScrollPosition = 0; | |
| const sections = document.querySelectorAll('.section'); | |
| window.addEventListener('scroll', function() { | |
| const currentScrollPosition = window.pageYOffset; | |
| sections.forEach(section => { | |
| const sectionTop = section.offsetTop; | |
| const sectionHeight = section.offsetHeight; | |
| if (currentScrollPosition >= sectionTop && currentScrollPosition < sectionTop + sectionHeight) { | |
| const scrollPercent = (currentScrollPosition - sectionTop) / sectionHeight; | |
| // Apply different effects based on scroll direction | |
| if (currentScrollPosition > lastScrollPosition) { | |
| // Scrolling down | |
| section.style.transform = `translateY(${-scrollPercent * 20}px)`; | |
| section.style.opacity = 1 - scrollPercent * 0.3; | |
| } else { | |
| // Scrolling up | |
| section.style.transform = `translateY(${scrollPercent * 10}px)`; | |
| } | |
| } | |
| }); | |
| lastScrollPosition = currentScrollPosition; | |
| }); | |
| }); | |
| </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=moosll/deepseek-website" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body> | |
| </html> |