Spaces:

gladiopeace
/

cabinet

Running

File size: 30,644 Bytes

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D Cabinet Generator</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/controls/OrbitControls.js"></script>
    <style>
        #modelContainer {
            width: 100%;
            height: 500px;
            background-color: #f5f3f0;
            border-radius: 8px;
            overflow: hidden;
            position: relative;
        }
        .loading-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(245, 243, 240, 0.8);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 10;
        }
        .progress-ring {
            width: 60px;
            height: 60px;
        }
        .progress-ring circle {
            transition: stroke-dashoffset 0.3s;
        }
        .controls-overlay {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 10px;
            z-index: 5;
        }
    </style>
</head>
<body class="bg-gray-50">
    <div class="container mx-auto px-4 py-8">
        <header class="mb-8 text-center">
            <h1 class="text-3xl font-bold text-gray-800">3D Cabinet Generator</h1>
            <p class="text-gray-600 mt-2">Customize your cabinet with real-time 3D visualization</p>
        </header>

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
            <!-- Controls -->
            <div class="bg-white rounded-lg shadow p-6">
                <h2 class="text-xl font-semibold mb-4">Configuration</h2>
                
                <div class="mb-4">
                    <label class="block text-gray-700 mb-2">Cabinet Type</label>
                    <select id="cabinetType" class="w-full p-2 border rounded">
                        <option value="base">Base Cabinet</option>
                        <option value="wall">Wall Cabinet</option>
                        <option value="tall">Tall Cabinet</option>
                    </select>
                </div>

                <div class="mb-4">
                    <label class="block text-gray-700 mb-2">Width: <span id="widthValue">24</span>"</label>
                    <input type="range" id="widthSlider" min="12" max="48" value="24" step="1" class="w-full">
                </div>

                <div class="mb-4">
                    <label class="block text-gray-700 mb-2">Height: <span id="heightValue">36</span>"</label>
                    <input type="range" id="heightSlider" min="12" max="96" value="36" step="1" class="w-full">
                </div>

                <div class="mb-4">
                    <label class="block text-gray-700 mb-2">Depth: <span id="depthValue">12</span>"</label>
                    <input type="range" id="depthSlider" min="12" max="24" value="12" step="1" class="w-full">
                </div>

                <div class="mb-4">
                    <label class="block text-gray-700 mb-2">Material</label>
                    <select id="material" class="w-full p-2 border rounded">
                        <option value="oak">Oak</option>
                        <option value="maple">Maple</option>
                        <option value="cherry">Cherry</option>
                        <option value="laminate">Laminate</option>
                    </select>
                </div>

                <div class="mb-4">
                    <label class="block text-gray-700 mb-2">Number of Doors</label>
                    <div class="flex space-x-2">
                        <button id="oneDoor" class="flex-1 py-2 bg-blue-100 text-blue-700 rounded">1 Door</button>
                        <button id="twoDoors" class="flex-1 py-2 bg-gray-100 text-gray-700 rounded">2 Doors</button>
                    </div>
                </div>

                <div class="mb-4">
                    <label class="block text-gray-700 mb-2">Number of Shelves: <span id="shelvesValue">1</span></label>
                    <input type="range" id="shelvesSlider" min="0" max="5" value="1" class="w-full">
                </div>

                <div id="drawersContainer" class="mb-4 hidden">
                    <label class="block text-gray-700 mb-2">Number of Drawers: <span id="drawersValue">1</span></label>
                    <input type="range" id="drawersSlider" min="1" max="3" value="1" class="w-full">
                </div>

                <div class="mt-6 bg-gray-50 p-4 rounded-lg">
                    <h3 class="font-semibold mb-2">Price Estimation</h3>
                    <div class="text-2xl font-bold text-blue-600" id="totalPrice">$299.99</div>
                </div>
            </div>

            <!-- 3D Preview -->
            <div class="lg:col-span-2">
                <div id="modelContainer">
                    <div id="doorControls" class="controls-overlay hidden">
                        <button id="openBtn" class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 flex items-center">
                            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                            </svg>
                            Open Doors
                        </button>
                        <button id="closeBtn" class="px-4 py-2 bg-gray-600 text-white rounded hover:bg-gray-700 flex items-center">
                            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"></path>
                            </svg>
                            Close Doors
                        </button>
                    </div>
                    <div id="loadingOverlay" class="loading-overlay">
                        <svg class="progress-ring" viewBox="0 0 60 60">
                            <circle class="text-gray-300" stroke="currentColor" stroke-width="4" fill="none" r="25" cx="30" cy="30"></circle>
                            <circle class="text-blue-500" stroke="currentColor" stroke-width="4" fill="none" r="25" cx="30" cy="30" stroke-dasharray="157" stroke-dashoffset="157"></circle>
                        </svg>
                        <p class="mt-2 text-gray-600">Generating 3D model...</p>
                    </div>
                </div>

                <div class="mt-4 flex justify-end space-x-2">
                    <button id="downloadBtn" class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 flex items-center">
                        <svg class="w-5 h-5 mr-2" fill="none stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path>
                        </svg>
                        Download 3D Model
                    </button>
                </div>
            </div>
        </div>
    </div>

    <script>
        // Three.js variables
        let scene, camera, renderer, controls, cabinetGroup;
        const modelContainer = document.getElementById('modelContainer');
        const loadingOverlay = document.getElementById('loadingOverlay');
        const progressRing = document.querySelector('.progress-ring circle:last-child');
        const doorControls = document.getElementById('doorControls');
        const openBtn = document.getElementById('openBtn');
        const closeBtn = document.getElementById('closeBtn');

        // Door related variables
        let leftDoor, rightDoor, leftDoorHinge, rightDoorHinge;
        let isAnimating = false;
        let doorState = 'closed'; // 'closed', 'opening', 'open', 'closing'

        // Initialize Three.js
        function initThreeJS() {
            // Create scene
            scene = new THREE.Scene();
            scene.background = new THREE.Color(0xf5f3f0);
            
            // Create camera
            camera = new THREE.PerspectiveCamera(
                60, // fov
                modelContainer.clientWidth / modelContainer.clientHeight, // aspect
                0.1, // near
                1000 // far
            );
            camera.position.set(40, 40, 40);
            
            // Create renderer
            renderer = new THREE.WebGLRenderer({ antialias: true });
            renderer.setSize(modelContainer.clientWidth, modelContainer.clientHeight);
            renderer.shadowMap.enabled = true;
            modelContainer.appendChild(renderer.domElement);
            
            // Add lights
            const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
            scene.add(ambientLight);
            
            const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
            directionalLight.position.set(30, 50, 20);
            directionalLight.castShadow = true;
            directionalLight.shadow.mapSize.width = 2048;
            directionalLight.shadow.mapSize.height = 2048;
            scene.add(directionalLight);
            
            // Add helper light from the front
            const fillLight = new THREE.DirectionalLight(0xffffff, 0.3);
            fillLight.position.set(-30, 30, 30);
            scene.add(fillLight);
            
            // Add controls
            controls = new THREE.OrbitControls(camera, renderer.domElement);
            controls.enableDamping = true;
            controls.dampingFactor = 0.05;
            controls.minDistance = 10;
            controls.maxDistance = 200;
            
            // Create cabinet group
            cabinetGroup = new THREE.Group();
            scene.add(cabinetGroup);
            
            // Add grid and axes helpers (for debugging)
            const gridHelper = new THREE.GridHelper(100, 100);
            gridHelper.position.y = -0.01; // Just below the cabinet
            scene.add(gridHelper);
            
            // Initial render
            updateCabinetModel();
            
            // Animation loop
            function animate() {
                requestAnimationFrame(animate);
                controls.update();
                renderer.render(scene, camera);
            }
            animate();
            
            // Handle window resize
            window.addEventListener('resize', onWindowResize);
        }
        
        function onWindowResize() {
            camera.aspect = modelContainer.clientWidth / modelContainer.clientHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(modelContainer.clientWidth, modelContainer.clientHeight);
        }
        
        // Create cabinet model
        function updateCabinetModel() {
            showLoading();
            
            // Clear previous cabinet
            while (cabinetGroup.children.length > 0) {
                cabinetGroup.remove(cabinetGroup.children[0]);
            }
            
            // Reset door variables
            leftDoor = null;
            rightDoor = null;
            leftDoorHinge = null;
            rightDoorHinge = null;
            
            // Get parameters
            const width = parseFloat(document.getElementById('widthSlider').value);
            const height = parseFloat(document.getElementById('heightSlider').value);
            const depth = parseFloat(document.getElementById('depthSlider').value);
            const materialType = document.getElementById('material').value;
            const isTwoDoors = document.getElementById('twoDoors').classList.contains('bg-blue-100');
            const shelvesCount = parseInt(document.getElementById('shelvesSlider').value);
            const drawersCount = parseInt(document.getElementById('drawersSlider').value || 0);
            const cabinetType = document.getElementById('cabinetType').value;
            
            // Create materials
            const materials = {
                exterior: createMaterial(materialType),
                interior: new THREE.MeshStandardMaterial({ color: 0xF5F5F5, roughness: 0.7 }),
                shelf: new THREE.MeshStandardMaterial({ color: 0xEAEAEA, roughness: 0.6 }),
                hardware: new THREE.MeshStandardMaterial({ color: 0x333333 })
            };
            
            // Main cabinet structure
            createCabinetStructure(width, height, depth, materials, cabinetType, isTwoDoors);
            
            // Add shelves if needed
            if (shelvesCount > 0) {
                const availableHeight = height - 2; // account for frame
                const shelfSpacing = availableHeight / (shelvesCount + 1);
                
                for (let i = 0; i < shelvesCount; i++) {
                    const shelfY = -height/2 + 1 + (i + 1) * shelfSpacing;
                    createShelf(width - 2.5, 0.5, depth - 2, shelfY, materials.shelf);
                }
            }
            
            // Add drawers for base cabinets
            if (cabinetType === 'base' && drawersCount > 0) {
                const drawerHeight = (height / 3) / drawersCount;
                
                for (let i = 0; i < drawersCount; i++) {
                    const drawerY = -height/2 + (i + 0.5) * drawerHeight;
                    createDrawer(width * 0.8, drawerHeight * 0.8, depth * 0.7, drawerY, materials.exterior, materials.interior);
                }
            }
            
            // Update camera position based on cabinet size
            const maxDimension = Math.max(width, height, depth);
            camera.position.set(maxDimension * 1.5, maxDimension * 1.2, maxDimension * 1.5);
            controls.target.set(0, height/4, 0);
            controls.update();
            
            // Show/hide door controls
            if (cabinetType !== 'base' || drawersCount === 0) {
                doorControls.classList.remove('hidden');
            } else {
                doorControls.classList.add('hidden');
            }
            
            // Hide loading after a short delay to ensure smooth UI
            setTimeout(hideLoading, 500);
        }
        
        // Create cabinet frame and panels
        function createCabinetStructure(width, height, depth, materials, type, isTwoDoors) {
            const thickness = 0.75; // standard material thickness
            
            // Bottom panel
            createBox(width, thickness, depth, [0, -height/2 + thickness/2, 0], materials.exterior);
            
            // Top panel (not for base cabinets with countertop)
            if (type !== 'base') {
                createBox(width, thickness, depth, [0, height/2 - thickness/2, 0], materials.exterior);
            }
            
            // Left side
            createBox(thickness, height - 2*thickness, depth, 
                     [-width/2 + thickness/2, 0, 0], materials.exterior);
            
            // Right side
            createBox(thickness, height - 2*thickness, depth, 
                     [width/2 - thickness/2, 0, 0], materials.exterior);
            
            // Back panel
            createBox(width - 2*thickness, height - 2*thickness, thickness, 
                     [0, 0, -depth/2 + thickness/2], materials.exterior);
            
            // Middle divider for two doors
            if (isTwoDoors) {
                createBox(thickness, height - 2*thickness, depth, [0, 0, 0], materials.exterior);
                
                // Create door hinges (invisible objects for rotation)
                leftDoorHinge = new THREE.Group();
                leftDoorHinge.position.set(-width/2 + thickness, 0, depth/2 - thickness/2);
                cabinetGroup.add(leftDoorHinge);
                
                rightDoorHinge = new THREE.Group();
                rightDoorHinge.position.set(width/2 - thickness, 0, depth/2 - thickness/2);
                cabinetGroup.add(rightDoorHinge);
                
                // Left door (rotates around left edge)
                leftDoor = createBox(width/2 - thickness, height - 2*thickness, thickness, 
                                   [0, 0, -thickness/2], materials.exterior);
                leftDoorHinge.add(leftDoor);
                
                // Right door (rotates around right edge)
                rightDoor = createBox(width/2 - thickness, height - 2*thickness, thickness, 
                                    [0, 0, -thickness/2], materials.exterior);
                rightDoorHinge.add(rightDoor);
                
                // Add handles
                // Left handle (positioned on the right side of left door)
                const leftHandle = createBox(0.2, 2, 1, [width/4 - thickness/2, 0, 0.75], materials.hardware);
                leftDoorHinge.add(leftHandle);
                
                // Right handle (positioned on the left side of right door)
                const rightHandle = createBox(0.2, 2, 1, [-width/4 + thickness/2, 0, 0.75], materials.hardware);
                rightDoorHinge.add(rightHandle);
            } else {
                // Single door (right side hinge)
                rightDoorHinge = new THREE.Group();
                rightDoorHinge.position.set(width/2 - thickness/2, 0, depth/2 - thickness/2);
                cabinetGroup.add(rightDoorHinge);
                
                rightDoor = createBox(width - thickness, height - 2*thickness, thickness, 
                                    [-width/2 + thickness/2, 0, -thickness/2], materials.exterior);
                rightDoorHinge.add(rightDoor);
                
                // Handle (positioned on the left side of the door)
                const handle = createBox(0.2, 2, 1, [-width/2 + thickness + 1, 0, 0.75], materials.hardware);
                rightDoorHinge.add(handle);
            }
        }
        
        function createShelf(width, thickness, depth, yPos, material) {
            createBox(width, thickness, depth, [0, yPos, 0], material);
            
            // Add shelf supports
            createBox(0.5, 1, 0.5, [-width/2 + 0.25, yPos - 0.75, 0], material);
            createBox(0.5, 1, 0.5, [width/2 - 0.25, yPos - 0.75, 0], material);
        }
        
        function createDrawer(width, height, depth, yPos, frontMaterial, interiorMaterial) {
            // Drawer front
            createBox(width * 1.1, height * 1.1, 0.5, [0, yPos, depth/2 + 0.25], frontMaterial);
            
            // Drawer box
            createBox(width, height, depth, [0, yPos, 0], interiorMaterial);
            
            // Handle (simplified as a horizontal bar)
            createBox(3, 0.5, 0.3, [0, yPos, depth/2 + 0.4], frontMaterial);
        }
        
        function createBox(width, height, depth, position, material) {
            const geometry = new THREE.BoxGeometry(width, height, depth);
            const mesh = new THREE.Mesh(geometry, material);
            mesh.position.set(position[0], position[1], position[2]);
            mesh.castShadow = true;
            mesh.receiveShadow = true;
            
            if (material.color.getHex() !== 0x333333) { // Don't add shadow to hardware
                mesh.castShadow = true;
                mesh.receiveShadow = true;
            }
            
            cabinetGroup.add(mesh);
            return mesh;
        }
        
        function createMaterial(type) {
            const materials = {
                oak: {
                    color: 0xC19A6B,
                    roughness: 0.5
                },
                maple: {
                    color: 0xE6CEAC,
                    roughness: 0.4
                },
                cherry: {
                    color: 0x8B4513,
                    roughness: 0.3
                },
                laminate: {
                    color: 0xFFFFFF,
                    roughness: 0.1,
                    metalness: 0.1
                }
            };
            
            return new THREE.MeshStandardMaterial(materials[type]);
        }
        
        // Animate doors
        function animateDoors(targetAngle) {
            if (isAnimating) return;
            
            isAnimating = true;
            const duration = 1000; // ms
            const startTime = Date.now();
            const isTwoDoors = document.getElementById('twoDoors').classList.contains('bg-blue-100');
            
            // Determine current angles
            const leftStartAngle = leftDoorHinge ? leftDoorHinge.rotation.y : 0;
            const rightStartAngle = rightDoorHinge ? rightDoorHinge.rotation.y : 0;
            
            // Target angles
            let leftTarget = 0;
            let rightTarget = 0;
            
            if (targetAngle === 0) { // Closing
                leftTarget = 0;
                rightTarget = 0;
                doorState = 'closing';
            } else { // Opening
                if (isTwoDoors) {
                    leftTarget = -targetAngle; // Left door opens inward (negative rotation)
                    rightTarget = targetAngle; // Right door opens inward (positive rotation)
                } else {
                    rightTarget = targetAngle; // Single door opens inward (positive rotation)
                }
                doorState = 'opening';
            }
            
            const animateFrame = () => {
                const elapsed = Date.now() - startTime;
                const progress = Math.min(elapsed / duration, 1);
                
                // Easing function
                const easeProgress = easeOutCubic(progress);
                
                if (leftDoorHinge) {
                    leftDoorHinge.rotation.y = leftStartAngle + (leftTarget - leftStartAngle) * easeProgress;
                }
                
                if (rightDoorHinge) {
                    rightDoorHinge.rotation.y = rightStartAngle + (rightTarget - rightStartAngle) * easeProgress;
                }
                
                if (progress < 1) {
                    requestAnimationFrame(animateFrame);
                } else {
                    isAnimating = false;
                    doorState = targetAngle === 0 ? 'closed' : 'open';
                }
            };
            
            animateFrame();
        }
        
        // Easing function for smooth animation
        function easeOutCubic(t) {
            return 1 - Math.pow(1 - t, 3);
        }
        
        // Open/close door functions
        function openDoors() {
            if (doorState === 'closed' || doorState === 'closing') {
                animateDoors(Math.PI/2); // 90 degrees in radians
            }
        }
        
        function closeDoors() {
            if (doorState === 'open' || doorState === 'opening') {
                animateDoors(0);
            }
        }
        
        function showLoading() {
            loadingOverlay.style.display = 'flex';
            let progress = 0;
            
            const interval = setInterval(() => {
                progress += 10;
                const offset = 157 * (1 - progress/100);
                progressRing.style.strokeDashoffset = offset;
                
                if (progress >= 100) {
                    clearInterval(interval);
                }
            }, 50);
        }
        
        function hideLoading() {
            loadingOverlay.style.display = 'none';
            progressRing.style.strokeDashoffset = '157';
            doorState = 'closed'; // Reset door state after loading
        }
        
        // Update price calculation
        function updatePrice() {
            const width = parseFloat(document.getElementById('widthSlider').value);
            const height = parseFloat(document.getElementById('heightSlider').value);
            const depth = parseFloat(document.getElementById('depthSlider').value);
            const material = document.getElementById('material').value;
            const isTwoDoors = document.getElementById('twoDoors').classList.contains('bg-blue-100');
            const shelvesCount = parseInt(document.getElementById('shelvesSlider').value);
            const drawersCount = parseInt(document.getElementById('drawersSlider').value || 0);
            const cabinetType = document.getElementById('cabinetType').value;
            
            // Calculate base price
            let basePrice = 100 + (width * height * depth) / 100;
            
            // Adjust by type
            if (cabinetType === 'base') basePrice *= 1.3;
            else if (cabinetType === 'tall') basePrice *= 1.5;
            
            // Material multipliers
            if (material === 'maple') basePrice *= 1.2;
            else if (material === 'cherry') basePrice *= 1.4;
            
            // Features
            if (isTwoDoors) basePrice += 50;
            if (shelvesCount > 1) basePrice += (shelvesCount - 1) * 25;
            if (drawersCount > 0) basePrice += drawersCount * 60;
            
            document.getElementById('totalPrice').textContent = `$${basePrice.toFixed(2)}`;
        }
        
        // Event listeners
        openBtn.addEventListener('click', openDoors);
        closeBtn.addEventListener('click', closeDoors);
        
        document.getElementById('widthSlider').addEventListener('input', function() {
            document.getElementById('widthValue').textContent = this.value;
            updateCabinetModel();
            updatePrice();
        });
        
        document.getElementById('heightSlider').addEventListener('input', function() {
            document.getElementById('heightValue').textContent = this.value;
            updateCabinetModel();
            updatePrice();
        });
        
        document.getElementById('depthSlider').addEventListener('input', function() {
            document.getElementById('depthValue').textContent = this.value;
            updateCabinetModel();
            updatePrice();
        });
        
        document.getElementById('material').addEventListener('change', function() {
            updateCabinetModel();
            updatePrice();
        });
        
        document.getElementById('cabinetType').addEventListener('change', function() {
            // Adjust default dimensions
            if (this.value === 'base') {
                document.getElementById('heightSlider').value = 34.5;
                document.getElementById('depthSlider').value = 24;
                document.getElementById('heightValue').textContent = '34.5';
                document.getElementById('depthValue').textContent = '24';
                
                document.getElementById('drawersContainer').classList.remove('hidden');
            } else {
                if (this.value === 'wall') {
                    document.getElementById('heightSlider').value = 36;
                    document.getElementById('depthSlider').value = 12;
                } else if (this.value === 'tall') {
                    document.getElementById('heightSlider').value = 84;
                    document.getElementById('depthSlider').value = 24;
                }
                
                document.getElementById('heightValue').textContent = document.getElementById('heightSlider').value;
                document.getElementById('depthValue').textContent = document.getElementById('depthSlider').value;
                
                document.getElementById('drawersContainer').classList.add('hidden');
            }
            
            updateCabinetModel();
            updatePrice();
        });
        
        document.getElementById('oneDoor').addEventListener('click', function() {
            this.classList.add('bg-blue-100', 'text-blue-700');
            document.getElementById('twoDoors').classList.remove('bg-blue-100', 'text-blue-700');
            updateCabinetModel();
            updatePrice();
        });
        
        document.getElementById('twoDoors').addEventListener('click', function() {
            this.classList.add('bg-blue-100', 'text-blue-700');
            document.getElementById('oneDoor').classList.remove('bg-blue-100', 'text-blue-700');
            updateCabinetModel();
            updatePrice();
        });
        
        document.getElementById('shelvesSlider').addEventListener('input', function() {
            document.getElementById('shelvesValue').textContent = this.value;
            updateCabinetModel();
            updatePrice();
        });
        
        document.getElementById('drawersSlider').addEventListener('input', function() {
            document.getElementById('drawersValue').textContent = this.value;
            updateCabinetModel();
            updatePrice();
        });
        
        document.getElementById('downloadBtn').addEventListener('click', function() {
            alert('In a complete implementation, this would export your cabinet as a 3D model file.');
        });
        
        // Initialize
        window.addEventListener('load', function() {
            initThreeJS();
            updatePrice();
            
            // Set one door as active by default
            document.getElementById('oneDoor').classList.add('bg-blue-100', 'text-blue-700');
        });
    </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=gladiopeace/cabinet" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>