Create a simple homepage that displays rotating and translating cubes that warp into eachother based on mouse movement

cube-warp.js

@@ -0,0 +1,148 @@
+class CubeWarp {
+    constructor() {
+        this.scene = new THREE.Scene();
+        this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+        this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
+        
+        this.cubes = [];
+        this.mouseX = 0;
+        this.mouseY = 0;
+        this.targetX = 0;
+        this.targetY = 0;
+        
+        this.init();
+        this.animate();
+    }
+
+    init() {
+        // Setup renderer
+        this.renderer.setSize(window.innerWidth, window.innerHeight);
+        this.renderer.setClearColor(0x000000, 0);
+        document.getElementById('container').appendChild(this.renderer.domElement);
+
+        // Create multiple cubes with different colors and positions
+        const colors = [
+            0xff6b6b, 0x4ecdc4, 0x45b7d1, 0x96ceb4, 0xffeaa7,
+            0xdda0dd, 0x98d8c8, 0xf7dc6f, 0xbb8fce
+        ];
+
+        for (let i = 0; i < 15; i++) {
+            const geometry = new THREE.BoxGeometry(2, 2, 2);
+            const material = new THREE.MeshPhongMaterial({
+                color: colors[i % colors.length],
+                transparent: true,
+                opacity: 0.8,
+                shininess: 100
+            });
+
+            const cube = new THREE.Mesh(geometry, material);
+            
+            // Position cubes in a spherical arrangement
+            const radius = 8 + Math.random() * 4;
+            const theta = Math.random() * Math.PI * 2;
+            const phi = Math.acos((Math.random() * 2) - 1);
+            
+            cube.position.x = radius * Math.sin(phi) * Math.cos(theta);
+            cube.position.y = radius * Math.sin(phi) * Math.sin(theta);
+            cube.position.z = radius * Math.cos(phi);
+            
+            cube.userData = {
+                originalPosition: cube.position.clone(),
+                speed: 0.5 + Math.random() * 1.5,
+                rotationSpeed: {
+                    x: (Math.random() - 0.5) * 0.02,
+                    y: (Math.random() - 0.5) * 0.02,
+                    z: (Math.random() - 0.5) * 0.02
+                },
+                warpFactor: 0
+            };
+
+            this.scene.add(cube);
+            this.cubes.push(cube);
+        }
+
+        // Add lights
+        const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
+        this.scene.add(ambientLight);
+
+        const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
+        directionalLight.position.set(5, 5, 5);
+        this.scene.add(directionalLight);
+
+        const pointLight = new THREE.PointLight(0x4ecdc4, 1, 100);
+        pointLight.position.set(-5, -5, -5);
+        this.scene.add(pointLight);
+
+        // Position camera
+        this.camera.position.z = 15;
+
+        // Mouse move event
+        document.addEventListener('mousemove', (event) => {
+            this.mouseX = (event.clientX / window.innerWidth) * 2 - 1;
+            this.mouseY = -(event.clientY / window.innerHeight) * 2 + 1;
+        });
+
+        // Window resize
+        window.addEventListener('resize', () => {
+            this.camera.aspect = window.innerWidth / window.innerHeight;
+            this.camera.updateProjectionMatrix();
+            this.renderer.setSize(window.innerWidth, window.innerHeight);
+        });
+    }
+
+    animate() {
+        requestAnimationFrame(() => this.animate());
+
+        // Smooth mouse movement
+        this.targetX += (this.mouseX - this.targetX) * 0.05;
+        this.targetY += (this.mouseY - this.targetY) * 0.05;
+
+        // Update cubes
+        this.cubes.forEach((cube, index) => {
+            const data = cube.userData;
+            
+            // Calculate warp effect based on mouse position and cube distance
+            const distanceToCenter = cube.position.length();
+            const mouseDistance = Math.sqrt(this.targetX * this.targetX + this.targetY * this.targetY);
+            
+            // Warp factor increases with mouse movement and proximity
+            data.warpFactor = Math.min(1, mouseDistance * 2 + (1 - distanceToCenter / 20));
+            
+            // Rotation
+            cube.rotation.x += data.rotationSpeed.x * (1 + data.warpFactor * 2);
+            cube.rotation.y += data.rotationSpeed.y * (1 + data.warpFactor * 2);
+            cube.rotation.z += data.rotationSpeed.z * (1 + data.warpFactor * 2);
+            
+            // Position warping - cubes move towards each other and distort
+            const time = Date.now() * 0.001;
+            const warpX = Math.sin(time + index) * data.warpFactor * 3;
+            const warpY = Math.cos(time + index * 0.7) * data.warpFactor * 3;
+            const warpZ = Math.sin(time * 0.5 + index * 0.3) * data.warpFactor * 3;
+            
+            cube.position.x = data.originalPosition.x + warpX + this.targetX * 2;
+            cube.position.y = data.originalPosition.y + warpY + this.targetY * 2;
+            cube.position.z = data.originalPosition.z + warpZ;
+            
+            // Scale warping
+            const scale = 1 + data.warpFactor * 0.5;
+            cube.scale.set(scale, scale, scale);
+            
+            // Color intensity based on warp factor
+            cube.material.color.setHSL(
+                (index * 0.1 + time * 0.1) % 1,
+                0.8,
+                0.6 + data.warpFactor * 0.4
+            );
+            
+            // Opacity pulsing
+            cube.material.opacity = 0.6 + Math.sin(time * 2 + index) * 0.2;
+        });
+
+        this.renderer.render(this.scene, this.camera);
+    }
+}
+
+// Initialize when page loads
+window.addEventListener('load', () => {
+    new CubeWarp();
+});

index.html

@@ -1,97 +1,27 @@
+
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>CodeFingerprint Detective</title>
+    <title>Cube Warp Homepage</title>
     <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
     <link rel="stylesheet" href="style.css">
     <script src="https://cdn.tailwindcss.com"></script>
-    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
-    <script src="https://unpkg.com/feather-icons"></script>
-    <script>
-        tailwind.config = {
-            theme: {
-                extend: {
-                    colors: {
-                        cyan: {
-                            50: '#ecfeff',
-                            100: '#cffafe',
-                            200: '#a5f3fc',
-                            300: '#67e8f9',
-                            400: '#22d3ee',
-                            500: '#06b6d4',
-                            600: '#0891b2',
-                            700: '#0e7490',
-                            800: '#155e75',
-                            900: '#164e63',
-                        }
-                    }
-                }
-            }
-        }
-    </script>
+    <style>
+        body { margin: 0; padding: 0; overflow: hidden; }
+        canvas { display: block; }
+    </style>
 </head>
-<body class="bg-gradient-to-br from-cyan-50 to-cyan-100 min-h-screen">
-    <custom-header></custom-header>
-    
-    <main class="container mx-auto px-4 py-8">
-        <div class="max-w-4xl mx-auto">
-            <!-- Upload Section -->
-            <section class="bg-white rounded-2xl shadow-xl p-8 mb-8 border border-cyan-200">
-                <div class="text-center mb-8">
-                    <h1 class="text-4xl font-bold text-cyan-800 mb-4">CodeFingerprint Detective</h1>
-                    <p class="text-cyan-600 text-lg">Upload multiple code files to detect their largest common similarities</p>
-                </div>
-                
-                <div class="border-2 border-dashed border-cyan-300 rounded-xl p-8 text-center bg-cyan-50 transition-all duration-300 hover:border-cyan-400 hover:bg-cyan-100">
-                    <i data-feather="upload-cloud" class="w-16 h-16 text-cyan-500 mx-auto mb-4"></i>
-                    <input type="file" id="fileInput" multiple accept=".py,.js,.java,.cpp,.c,.html,.css,.txt,.md,.json,.xml" class="hidden">
-                    <button id="uploadBtn" class="bg-cyan-500 hover:bg-cyan-600 text-white font-semibold py-3 px-8 rounded-lg transition-colors duration-300 flex items-center justify-center mx-auto">
-                        <i data-feather="upload" class="w-5 h-5 mr-2"></i>
-                        Choose Files to Analyze
-                    </button>
-                    <p class="text-cyan-600 mt-4 text-sm">Supported: Python, JavaScript, Java, C++, C, HTML, CSS, Text, Markdown, JSON, XML</p>
-                </div>
-                
-                <div id="fileList" class="mt-6 space-y-3 hidden">
-                    <h3 class="text-lg font-semibold text-cyan-800 mb-3">Selected Files:</h3>
-                    <div id="fileItems" class="space-y-2"></div>
-                </div>
-                
-                <div class="mt-6 text-center">
-                    <button id="analyzeBtn" class="bg-gradient-to-r from-cyan-500 to-cyan-600 hover:from-cyan-600 hover:to-cyan-700 text-white font-bold py-4 px-12 rounded-xl transition-all duration-300 transform hover:scale-105 shadow-lg hidden">
-                        <i data-feather="search" class="w-5 h-5 mr-2 inline"></i>
-                        Analyze Common Patterns
-                    </button>
-                </div>
-            </section>
-
-            <!-- Results Section -->
-            <section id="resultsSection" class="bg-white rounded-2xl shadow-xl p-8 border border-cyan-200 hidden">
-                <h2 class="text-3xl font-bold text-cyan-800 mb-6 text-center">Analysis Results</h2>
-                <div id="resultsContainer" class="space-y-6"></div>
-            </section>
-
-            <!-- Loading State -->
-            <div id="loadingState" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
-                <div class="bg-white rounded-2xl p-8 text-center max-w-md">
-                    <div class="animate-spin rounded-full h-16 w-16 border-b-2 border-cyan-500 mx-auto mb-4"></div>
-                    <h3 class="text-xl font-semibold text-cyan-800 mb-2">Analyzing Files</h3>
-                    <p class="text-cyan-600">Detecting largest common similarities...</p>
-                </div>
-            </div>
+<body class="bg-black">
+    <div id="container"></div>
+    <div class="absolute top-0 left-0 w-full h-full flex items-center justify-center pointer-events-none">
+        <div class="text-center text-white">
+            <h1 class="text-6xl font-bold mb-4">Cube Warp</h1>
+            <p class="text-xl opacity-80">Move your mouse to warp the cubes</p>
         </div>
-    </main>
-
-    <custom-footer></custom-footer>
+    </div>
 
-    <script src="components/header.js"></script>
-    <script src="components/footer.js"></script>
-    <script src="script.js"></script>
-    <script>
-        feather.replace();
-    </script>
-<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+    <script src="cube-warp.js"></script>
 </body>
-</html>
+</html>

style.css

@@ -1,9 +1,20 @@
+
 @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap');
 
 * {
     font-family: 'Inter', sans-serif;
 }
 
+body {
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+}
+
+canvas {
+    display: block;
+}
+
 .code-font {
     font-family: 'JetBrains Mono', monospace;
 }
@@ -48,4 +59,4 @@
 .lcs-tag:hover {
     transform: scale(1.05);
     box-shadow: 0 4px 12px rgba(6, 182, 212, 0.3);
-}
+}