Add 3 files

README.md

@@ -1,10 +1,12 @@
 ---
-title: Test123
-emoji: 💻
-colorFrom: gray
-colorTo: green
+title: test123
+emoji: 🐳
+colorFrom: purple
+colorTo: yellow
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html

@@ -1,19 +1,344 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!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">
+            <!-- Navigation Items -->
+            <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>
+        // Initialize Three.js particles
+        document.addEventListener('DOMContentLoaded', function() {
+            // Set up Three.js scene for particles
+            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);
+            
+            // Create particles
+            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;
+            
+            // Animation loop
+            function animate() {
+                requestAnimationFrame(animate);
+                
+                particlesMesh.rotation.x += 0.0005;
+                particlesMesh.rotation.y += 0.0005;
+                
+                renderer.render(scene, camera);
+            }
+            
+            animate();
+            
+            // Handle window resize
+            window.addEventListener('resize', function() {
+                camera.aspect = window.innerWidth / window.innerHeight;
+                camera.updateProjectionMatrix();
+                renderer.setSize(window.innerWidth, window.innerHeight);
+            });
+            
+            // Navigation interaction
+            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 });
+                    
+                    // Add subtle tilt effect
+                    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 });
+                    
+                    // Reset tilt
+                    gsap.to(this, { 
+                        rotateX: 0,
+                        rotateY: 0,
+                        duration: 0.5,
+                        ease: "power2.out"
+                    });
+                });
+                
+                item.addEventListener('click', function() {
+                    // Remove active class from all items
+                    navItems.forEach(navItem => {
+                        navItem.classList.remove('active');
+                    });
+                    
+                    // Add active class to clicked item
+                    this.classList.add('active');
+                    
+                    // Get section name
+                    const section = this.getAttribute('data-section');
+                    
+                    // Here you would typically load the section content
+                    console.log(`Loading ${section} section...`);
+                    
+                    // Animation for active state
+                    gsap.fromTo(this, 
+                        { scale: 0.95 }, 
+                        { scale: 1.05, duration: 0.3, yoyo: true, repeat: 1 }
+                    );
+                });
+            });
+            
+            // Random floating animation delays
+            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>

prompts.txt

@@ -0,0 +1 @@
+create the most futuristic desktop navigation for 8 sections with interactivity for a black on black design, 3D