| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Futuristic 3D Navigation</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> |
| <script src="https://cdn.jsdelivr.net/npm/gsap@3.11.4/dist/gsap.min.js"></script> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700&display=swap'); |
| |
| body { |
| font-family: 'Orbitron', sans-serif; |
| background-color: #000; |
| color: #fff; |
| overflow-x: hidden; |
| perspective: 1000px; |
| } |
| |
| .nav-item { |
| position: relative; |
| transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); |
| transform-style: preserve-3d; |
| } |
| |
| .nav-item::before, .nav-item::after { |
| content: ''; |
| position: absolute; |
| width: 100%; |
| height: 100%; |
| top: 0; |
| left: 0; |
| background: rgba(20, 20, 20, 0.8); |
| border: 1px solid rgba(255, 255, 255, 0.05); |
| border-radius: 0.5rem; |
| transform: translateZ(-10px); |
| transition: all 0.3s ease; |
| } |
| |
| .nav-item::after { |
| transform: translateZ(-20px); |
| background: rgba(10, 10, 10, 0.6); |
| } |
| |
| .nav-item:hover { |
| transform: translateY(-5px) rotateX(10deg); |
| } |
| |
| .nav-item:hover::before { |
| transform: translateZ(-5px); |
| border-color: rgba(0, 255, 255, 0.3); |
| } |
| |
| .nav-item:hover::after { |
| transform: translateZ(-15px); |
| border-color: rgba(0, 255, 255, 0.1); |
| } |
| |
| .nav-item.active { |
| background: linear-gradient(135deg, rgba(0, 255, 255, 0.1), rgba(0, 150, 255, 0.1)); |
| border-color: rgba(0, 255, 255, 0.5); |
| } |
| |
| .nav-item.active::before { |
| border-color: rgba(0, 255, 255, 0.5); |
| box-shadow: 0 0 15px rgba(0, 255, 255, 0.3); |
| } |
| |
| .nav-item.active::after { |
| border-color: rgba(0, 255, 255, 0.2); |
| } |
| |
| .glow { |
| position: absolute; |
| width: 100%; |
| height: 100%; |
| top: 0; |
| left: 0; |
| background: radial-gradient(circle at center, rgba(0, 255, 255, 0.1) 0%, transparent 70%); |
| opacity: 0; |
| transition: opacity 0.3s ease; |
| pointer-events: none; |
| } |
| |
| .nav-item:hover .glow { |
| opacity: 1; |
| } |
| |
| .particles { |
| position: absolute; |
| width: 100%; |
| height: 100%; |
| top: 0; |
| left: 0; |
| pointer-events: none; |
| z-index: -1; |
| } |
| |
| .nav-icon { |
| filter: drop-shadow(0 0 5px rgba(0, 255, 255, 0.5)); |
| transition: all 0.3s ease; |
| } |
| |
| .nav-item:hover .nav-icon { |
| transform: scale(1.1); |
| filter: drop-shadow(0 0 8px rgba(0, 255, 255, 0.8)); |
| } |
| |
| @keyframes float { |
| 0%, 100% { transform: translateY(0) rotateX(0deg); } |
| 50% { transform: translateY(-10px) rotateX(5deg); } |
| } |
| |
| .floating { |
| animation: float 6s ease-in-out infinite; |
| } |
| </style> |
| </head> |
| <body class="min-h-screen flex items-center justify-center p-4"> |
| <div class="particles" id="particles"></div> |
| |
| <div class="max-w-6xl w-full"> |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-6"> |
| |
| <div class="nav-item floating relative p-6 rounded-lg bg-black border border-gray-800 cursor-pointer transition-all duration-300 hover:shadow-2xl hover:shadow-cyan-500/10" data-section="dashboard"> |
| <div class="glow"></div> |
| <div class="flex flex-col items-center"> |
| <svg class="nav-icon w-12 h-12 mb-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" /> |
| </svg> |
| <span class="text-sm md:text-base font-medium text-gray-300">Dashboard</span> |
| <span class="text-xs text-cyan-400 opacity-0 transition-opacity duration-300">Enter</span> |
| </div> |
| </div> |
| |
| <div class="nav-item floating relative p-6 rounded-lg bg-black border border-gray-800 cursor-pointer transition-all duration-300 hover:shadow-2xl hover:shadow-purple-500/10" data-section="analytics"> |
| <div class="glow"></div> |
| <div class="flex flex-col items-center"> |
| <svg class="nav-icon w-12 h-12 mb-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" /> |
| </svg> |
| <span class="text-sm md:text-base font-medium text-gray-300">Analytics</span> |
| <span class="text-xs text-purple-400 opacity-0 transition-opacity duration-300">Enter</span> |
| </div> |
| </div> |
| |
| <div class="nav-item floating relative p-6 rounded-lg bg-black border border-gray-800 cursor-pointer transition-all duration-300 hover:shadow-2xl hover:shadow-pink-500/10" data-section="projects"> |
| <div class="glow"></div> |
| <div class="flex flex-col items-center"> |
| <svg class="nav-icon w-12 h-12 mb-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" /> |
| </svg> |
| <span class="text-sm md:text-base font-medium text-gray-300">Projects</span> |
| <span class="text-xs text-pink-400 opacity-0 transition-opacity duration-300">Enter</span> |
| </div> |
| </div> |
| |
| <div class="nav-item floating relative p-6 rounded-lg bg-black border border-gray-800 cursor-pointer transition-all duration-300 hover:shadow-2xl hover:shadow-blue-500/10" data-section="messages"> |
| <div class="glow"></div> |
| <div class="flex flex-col items-center"> |
| <svg class="nav-icon w-12 h-12 mb-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" /> |
| </svg> |
| <span class="text-sm md:text-base font-medium text-gray-300">Messages</span> |
| <span class="text-xs text-blue-400 opacity-0 transition-opacity duration-300">Enter</span> |
| </div> |
| </div> |
| |
| <div class="nav-item floating relative p-6 rounded-lg bg-black border border-gray-800 cursor-pointer transition-all duration-300 hover:shadow-2xl hover:shadow-green-500/10" data-section="files"> |
| <div class="glow"></div> |
| <div class="flex flex-col items-center"> |
| <svg class="nav-icon w-12 h-12 mb-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 13h6m-3-3v6m-9 1V7a2 2 0 012-2h6l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z" /> |
| </svg> |
| <span class="text-sm md:text-base font-medium text-gray-300">Files</span> |
| <span class="text-xs text-green-400 opacity-0 transition-opacity duration-300">Enter</span> |
| </div> |
| </div> |
| |
| <div class="nav-item floating relative p-6 rounded-lg bg-black border border-gray-800 cursor-pointer transition-all duration-300 hover:shadow-2xl hover:shadow-yellow-500/10" data-section="calendar"> |
| <div class="glow"></div> |
| <div class="flex flex-col items-center"> |
| <svg class="nav-icon w-12 h-12 mb-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" /> |
| </svg> |
| <span class="text-sm md:text-base font-medium text-gray-300">Calendar</span> |
| <span class="text-xs text-yellow-400 opacity-0 transition-opacity duration-300">Enter</span> |
| </div> |
| </div> |
| |
| <div class="nav-item floating relative p-6 rounded-lg bg-black border border-gray-800 cursor-pointer transition-all duration-300 hover:shadow-2xl hover:shadow-red-500/10" data-section="settings"> |
| <div class="glow"></div> |
| <div class="flex flex-col items-center"> |
| <svg class="nav-icon w-12 h-12 mb-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" /> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /> |
| </svg> |
| <span class="text-sm md:text-base font-medium text-gray-300">Settings</span> |
| <span class="text-xs text-red-400 opacity-0 transition-opacity duration-300">Enter</span> |
| </div> |
| </div> |
| |
| <div class="nav-item floating relative p-6 rounded-lg bg-black border border-gray-800 cursor-pointer transition-all duration-300 hover:shadow-2xl hover:shadow-indigo-500/10" data-section="profile"> |
| <div class="glow"></div> |
| <div class="flex flex-col items-center"> |
| <svg class="nav-icon w-12 h-12 mb-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" /> |
| </svg> |
| <span class="text-sm md:text-base font-medium text-gray-300">Profile</span> |
| <span class="text-xs text-indigo-400 opacity-0 transition-opacity duration-300">Enter</span> |
| </div> |
| </div> |
| </div> |
| |
| <div class="mt-12 text-center"> |
| <div class="inline-block px-6 py-3 rounded-full bg-black border border-gray-800 hover:bg-gray-900 transition-all duration-300 cursor-pointer"> |
| <span class="text-sm font-medium text-gray-400">SYSTEM STATUS: <span class="text-green-400">ONLINE</span></span> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| |
| document.addEventListener('DOMContentLoaded', function() { |
| |
| const scene = new THREE.Scene(); |
| const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); |
| const renderer = new THREE.WebGLRenderer({ alpha: true }); |
| renderer.setSize(window.innerWidth, window.innerHeight); |
| document.getElementById('particles').appendChild(renderer.domElement); |
| |
| |
| const particlesGeometry = new THREE.BufferGeometry(); |
| const particlesCount = 500; |
| |
| const posArray = new Float32Array(particlesCount * 3); |
| |
| for(let i = 0; i < particlesCount * 3; i++) { |
| posArray[i] = (Math.random() - 0.5) * 10; |
| } |
| |
| particlesGeometry.setAttribute('position', new THREE.BufferAttribute(posArray, 3)); |
| |
| const particlesMaterial = new THREE.PointsMaterial({ |
| size: 0.02, |
| color: 0x00ffff, |
| transparent: true, |
| opacity: 0.8, |
| blending: THREE.AdditiveBlending |
| }); |
| |
| const particlesMesh = new THREE.Points(particlesGeometry, particlesMaterial); |
| scene.add(particlesMesh); |
| |
| camera.position.z = 3; |
| |
| |
| function animate() { |
| requestAnimationFrame(animate); |
| |
| particlesMesh.rotation.x += 0.0005; |
| particlesMesh.rotation.y += 0.0005; |
| |
| renderer.render(scene, camera); |
| } |
| |
| animate(); |
| |
| |
| window.addEventListener('resize', function() { |
| camera.aspect = window.innerWidth / window.innerHeight; |
| camera.updateProjectionMatrix(); |
| renderer.setSize(window.innerWidth, window.innerHeight); |
| }); |
| |
| |
| const navItems = document.querySelectorAll('.nav-item'); |
| |
| navItems.forEach(item => { |
| item.addEventListener('mouseenter', function() { |
| const enterText = this.querySelector('span:last-child'); |
| gsap.to(enterText, { opacity: 1, duration: 0.3 }); |
| |
| |
| gsap.to(this, { |
| rotateX: 10, |
| rotateY: 5, |
| duration: 0.5, |
| ease: "power2.out" |
| }); |
| }); |
| |
| item.addEventListener('mouseleave', function() { |
| const enterText = this.querySelector('span:last-child'); |
| gsap.to(enterText, { opacity: 0, duration: 0.3 }); |
| |
| |
| gsap.to(this, { |
| rotateX: 0, |
| rotateY: 0, |
| duration: 0.5, |
| ease: "power2.out" |
| }); |
| }); |
| |
| item.addEventListener('click', function() { |
| |
| navItems.forEach(navItem => { |
| navItem.classList.remove('active'); |
| }); |
| |
| |
| this.classList.add('active'); |
| |
| |
| const section = this.getAttribute('data-section'); |
| |
| |
| console.log(`Loading ${section} section...`); |
| |
| |
| gsap.fromTo(this, |
| { scale: 0.95 }, |
| { scale: 1.05, duration: 0.3, yoyo: true, repeat: 1 } |
| ); |
| }); |
| }); |
| |
| |
| gsap.utils.toArray('.floating').forEach((item, i) => { |
| gsap.to(item, { |
| y: -10, |
| duration: 3 + Math.random() * 2, |
| yoyo: true, |
| repeat: -1, |
| ease: "sine.inOut", |
| delay: i * 0.2 |
| }); |
| }); |
| }); |
| </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=GMA2/test123" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
