Spaces:

engerl
/

luxury-snake

Running

App Files Files Community

engerl commited on Apr 2

Commit

b92c118

verified ·

1 Parent(s): 5e84889

Add 1 files

Browse files

Files changed (1) hide show

index.html +593 -565

index.html CHANGED Viewed

@@ -3,662 +3,690 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Luxury Snake Game</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">
     <style>
-        @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap');
         body {
-            font-family: 'Montserrat', sans-serif;
-            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
-            color: #e6e6e6;
-            min-height: 100vh;
-            overflow-x: hidden;
-        }
-        .game-container {
-            perspective: 1000px;
-        }
-        .game-board {
-            background: rgba(255, 255, 255, 0.05);
-            border-radius: 16px;
-            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
-            backdrop-filter: blur(5px);
-            -webkit-backdrop-filter: blur(5px);
-            border: 1px solid rgba(255, 255, 255, 0.1);
-            transform-style: preserve-3d;
-            transition: all 0.3s ease;
         }
-        .game-board:hover {
-            transform: translateY(-5px) rotateX(5deg);
-            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
         }
-        .snake-cell {
-            background: rgba(255, 255, 255, 0.1);
-            border-radius: 4px;
-            transition: all 0.2s ease;
         }
-        .snake-head {
-            background: linear-gradient(135deg, #00b4db 0%, #0083b0 100%);
-            box-shadow: 0 0 15px rgba(0, 180, 219, 0.7);
-            border-radius: 6px;
-            transform: scale(1.1);
         }
-        .snake-body {
-            background: linear-gradient(135deg, #00b4db 0%, #0083b0 100%);
-            border-radius: 4px;
-            opacity: 0.8;
         }
-        .food {
-            background: linear-gradient(135deg, #f12711 0%, #f5af19 100%);
             border-radius: 50%;
-            animation: pulse 1.5s infinite;
-            box-shadow: 0 0 15px rgba(241, 39, 17, 0.7);
         }
-        @keyframes pulse {
-            0% { transform: scale(0.95); }
-            50% { transform: scale(1.1); }
-            100% { transform: scale(0.95); }
         }
-        .score-display {
-            background: rgba(255, 255, 255, 0.1);
-            border-radius: 12px;
-            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
         }
-        .modal {
-            background: rgba(26, 26, 46, 0.9);
-            backdrop-filter: blur(10px);
-            -webkit-backdrop-filter: blur(10px);
         }
-        .btn-glow {
-            background: linear-gradient(135deg, #00b4db 0%, #0083b0 100%);
-            box-shadow: 0 0 15px rgba(0, 180, 219, 0.5);
-            transition: all 0.3s ease;
         }
-        .btn-glow:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 0 20px rgba(0, 180, 219, 0.8);
         }
-        .btn-danger {
-            background: linear-gradient(135deg, #f12711 0%, #f5af19 100%);
-            box-shadow: 0 0 15px rgba(241, 39, 17, 0.5);
         }
-        .btn-danger:hover {
-            box-shadow: 0 0 20px rgba(241, 39, 17, 0.8);
         }
-        .controls-btn {
-            background: rgba(255, 255, 255, 0.1);
             border-radius: 50%;
-            width: 50px;
-            height: 50px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            transition: all 0.2s ease;
         }
-        .controls-btn:hover {
-            background: rgba(255, 255, 255, 0.2);
-            transform: scale(1.1);
         }
-        .grid-cell {
-            transition: all 0.1s ease;
         }
-        .grid-cell:hover {
-            background: rgba(255, 255, 255, 0.15);
         }
     </style>
 </head>
-<body class="flex flex-col items-center justify-center p-4">
-    <div class="text-center mb-6">
-        <h1 class="text-4xl md:text-5xl font-bold mb-2 bg-clip-text text-transparent bg-gradient-to-r from-cyan-400 to-blue-600">
-            <i class="fas fa-snake mr-3"></i>Luxury Snake
-        </h1>
-        <p class="text-gray-400">A modern twist on the classic game</p>
     </div>
-    <div class="game-container w-full max-w-2xl mb-8">
-        <div class="flex justify-between items-center mb-4">
-            <div class="score-display px-6 py-3 flex items-center">
-                <i class="fas fa-star text-yellow-400 mr-2"></i>
-                <span class="font-bold text-xl" id="score">0</span>
-            </div>
-            <div class="flex space-x-3">
-                <button id="sound-btn" class="controls-btn">
-                    <i class="fas fa-volume-up text-blue-400"></i>
-                </button>
-                <button id="pause-btn" class="controls-btn">
-                    <i class="fas fa-pause text-blue-400"></i>
-                </button>
-                <button id="restart-btn" class="controls-btn">
-                    <i class="fas fa-redo text-blue-400"></i>
-                </button>
-            </div>
-        </div>
-        <div class="game-board w-full aspect-square relative overflow-hidden rounded-xl">
-            <canvas id="gameCanvas" class="w-full h-full"></canvas>
-        </div>
     </div>
-    <div class="grid grid-cols-3 gap-3 mb-8 w-full max-w-xs">
-        <div></div>
-        <button id="up-btn" class="controls-btn">
-            <i class="fas fa-arrow-up"></i>
         </button>
-        <div></div>
-        <button id="left-btn" class="controls-btn">
-            <i class="fas fa-arrow-left"></i>
         </button>
-        <button id="down-btn" class="controls-btn">
-            <i class="fas fa-arrow-down"></i>
         </button>
-        <button id="right-btn" class="controls-btn">
-            <i class="fas fa-arrow-right"></i>
         </button>
     </div>
-    <div class="text-center text-gray-400 text-sm mb-4">
-        <p>Use arrow keys or buttons to control the snake</p>
-        <p>Collect the golden food to grow and earn points</p>
-    </div>
-    <!-- Game Over Modal -->
-    <div id="game-over-modal" class="fixed inset-0 flex items-center justify-center z-50 modal hidden">
-        <div class="bg-gray-800 rounded-xl p-8 max-w-md w-full mx-4 text-center transform transition-all duration-300 scale-95 opacity-0">
-            <div class="text-6xl mb-4 text-red-500">
-                <i class="fas fa-skull"></i>
-            </div>
-            <h2 class="text-3xl font-bold mb-2">Game Over!</h2>
-            <p class="text-xl mb-6">Your score: <span id="final-score" class="font-bold text-blue-400">0</span></p>
-            <div class="flex justify-center space-x-4">
-                <button id="play-again-btn" class="btn-glow px-6 py-3 rounded-lg font-bold">
-                    <i class="fas fa-play mr-2"></i>Play Again
-                </button>
-                <button id="quit-btn" class="btn-danger px-6 py-3 rounded-lg font-bold">
-                    <i class="fas fa-times mr-2"></i>Quit
-                </button>
-            </div>
-        </div>
-    </div>
-    <!-- Start Modal -->
-    <div id="start-modal" class="fixed inset-0 flex items-center justify-center z-50 modal">
-        <div class="bg-gray-800 rounded-xl p-8 max-w-md w-full mx-4 text-center">
-            <div class="text-6xl mb-4 text-blue-400">
-                <i class="fas fa-snake"></i>
-            </div>
-            <h2 class="text-3xl font-bold mb-4">Luxury Snake</h2>
-            <p class="mb-6 text-gray-300">A modern take on the classic snake game with beautiful visuals and smooth gameplay.</p>
-            <div class="mb-6">
-                <div class="flex items-center justify-center mb-2">
-                    <div class="w-6 h-6 rounded-full bg-gradient-to-r from-red-500 to-yellow-500 mr-2"></div>
-                    <span>Collect food to grow</span>
-                </div>
-                <div class="flex items-center justify-center mb-2">
-                    <div class="w-6 h-6 rounded-full bg-gradient-to-r from-cyan-400 to-blue-600 mr-2"></div>
-                    <span>Don't hit walls or yourself</span>
-                </div>
-            </div>
-            <button id="start-btn" class="btn-glow px-8 py-4 rounded-lg font-bold text-lg w-full">
-                <i class="fas fa-play mr-2"></i>Start Game
-            </button>
-        </div>
-    </div>
-    <audio id="eat-sound" src="https://assets.mixkit.co/sfx/preview/mixkit-arcade-game-jump-coin-216.mp3" preload="auto"></audio>
-    <audio id="game-over-sound" src="https://assets.mixkit.co/sfx/preview/mixkit-retro-arcade-lose-2027.mp3" preload="auto"></audio>
-    <audio id="move-sound" src="https://assets.mixkit.co/sfx/preview/mixkit-quick-jump-arcade-game-239.mp3" preload="auto"></audio>
-    <script>
-        document.addEventListener('DOMContentLoaded', () => {
-            // Game elements
-            const canvas = document.getElementById('gameCanvas');
-            const ctx = canvas.getContext('2d');
-            const scoreDisplay = document.getElementById('score');
-            const finalScoreDisplay = document.getElementById('final-score');
-            const startModal = document.getElementById('start-modal');
-            const gameOverModal = document.getElementById('game-over-modal');
-            const startBtn = document.getElementById('start-btn');
-            const playAgainBtn = document.getElementById('play-again-btn');
-            const quitBtn = document.getElementById('quit-btn');
-            const pauseBtn = document.getElementById('pause-btn');
-            const restartBtn = document.getElementById('restart-btn');
-            const soundBtn = document.getElementById('sound-btn');
-            const upBtn = document.getElementById('up-btn');
-            const downBtn = document.getElementById('down-btn');
-            const leftBtn = document.getElementById('left-btn');
-            const rightBtn = document.getElementById('right-btn');
-            // Sound elements
-            const eatSound = document.getElementById('eat-sound');
-            const gameOverSound = document.getElementById('game-over-sound');
-            const moveSound = document.getElementById('move-sound');
-            // Game variables
-            let gridSize = 20;
-            let tileCount = 20;
-            let tileSize;
-            let speed = 7;
-            let score = 0;
-            let isPaused = false;
-            let isGameOver = false;
-            let soundEnabled = true;
-            let gameLoop;
-            // Snake variables
-            let snake = [];
-            let snakeLength = 3;
-            let xVelocity = 0;
-            let yVelocity = 0;
-            let nextXVelocity = 0;
-            let nextYVelocity = 0;
-            // Food variables
-            let foodX = 5;
-            let foodY = 5;
-            // Initialize game
-            function initGame() {
-                // Set canvas size
-                const container = canvas.parentElement;
-                const size = Math.min(container.clientWidth, container.clientHeight);
-                canvas.width = size;
-                canvas.height = size;
-                tileSize = size / tileCount;
-                // Reset game state
-                score = 0;
-                scoreDisplay.textContent = score;
-                isGameOver = false;
-                isPaused = false;
-                pauseBtn.innerHTML = '<i class="fas fa-pause text-blue-400"></i>';
-                // Reset snake
-                snake = [];
-                snakeLength = 3;
-                for (let i = snakeLength - 1; i >= 0; i--) {
-                    snake.push({ x: i, y: 0 });
-                }
-                // Reset velocity
-                xVelocity = 1;
-                yVelocity = 0;
-                nextXVelocity = 1;
-                nextYVelocity = 0;
-                // Place food
-                placeFood();
-                // Start game loop
-                if (gameLoop) clearInterval(gameLoop);
-                gameLoop = setInterval(gameTick, 1000 / speed);
             }
-            // Game tick
-            function gameTick() {
-                if (isPaused || isGameOver) return;
-                // Update snake direction
-                xVelocity = nextXVelocity;
-                yVelocity = nextYVelocity;
-                // Move snake
-                const head = { x: snake[0].x + xVelocity, y: snake[0].y + yVelocity };
-                // Check collision with walls
-                if (head.x < 0 || head.x >= tileCount || head.y < 0 || head.y >= tileCount) {
-                    gameOver();
-                    return;
                 }
-                // Check collision with self
-                for (let i = 0; i < snake.length; i++) {
-                    if (head.x === snake[i].x && head.y === snake[i].y) {
-                        gameOver();
-                        return;
-                    }
                 }
-                // Add new head
-                snake.unshift(head);
-                // Check if snake ate food
-                if (head.x === foodX && head.y === foodY) {
-                    // Play sound
-                    if (soundEnabled) {
-                        eatSound.currentTime = 0;
-                        eatSound.play();
-                    }
-                    // Increase score and speed
-                    score += 10;
-                    scoreDisplay.textContent = score;
-                    snakeLength++;
-                    // Increase speed every 50 points
-                    if (score % 50 === 0 && speed < 15) {
-                        speed += 1;
-                        clearInterval(gameLoop);
-                        gameLoop = setInterval(gameTick, 1000 / speed);
                     }
-                    // Place new food
-                    placeFood();
-                } else {
-                    // Remove tail if no food eaten
-                    snake.pop();
-                }
-                // Play move sound
-                if (soundEnabled && (xVelocity !== 0 || yVelocity !== 0)) {
-                    moveSound.currentTime = 0;
-                    moveSound.play();
-                }
-                // Draw game
-                drawGame();
             }
-            // Draw game
-            function drawGame() {
-                // Clear canvas
-                ctx.fillStyle = 'rgba(26, 26, 46, 0.7)';
-                ctx.fillRect(0, 0, canvas.width, canvas.height);
-                // Draw grid
-                ctx.strokeStyle = 'rgba(255, 255, 255, 0.05)';
-                ctx.lineWidth = 0.5;
-                for (let i = 0; i < tileCount; i++) {
-                    for (let j = 0; j < tileCount; j++) {
-                        ctx.strokeRect(i * tileSize, j * tileSize, tileSize, tileSize);
-                    }
-                }
-                // Draw snake
-                for (let i = 0; i < snake.length; i++) {
-                    const segment = snake[i];
-                    // Head
-                    if (i === 0) {
-                        const gradient = ctx.createLinearGradient(
-                            segment.x * tileSize,
-                            segment.y * tileSize,
-                            segment.x * tileSize + tileSize,
-                            segment.y * tileSize + tileSize
-                        );
-                        gradient.addColorStop(0, '#00b4db');
-                        gradient.addColorStop(1, '#0083b0');
-                        ctx.fillStyle = gradient;
-                    }
-                    // Body
-                    else {
-                        const opacity = 0.7 - (i / snake.length * 0.5);
-                        const gradient = ctx.createLinearGradient(
-                            segment.x * tileSize,
-                            segment.y * tileSize,
-                            segment.x * tileSize + tileSize,
-                            segment.y * tileSize + tileSize
-                        );
-                        gradient.addColorStop(0, `rgba(0, 180, 219, ${opacity})`);
-                        gradient.addColorStop(1, `rgba(0, 131, 176, ${opacity})`);
-                        ctx.fillStyle = gradient;
-                    }
-                    // Draw segment with rounded corners
-                    const x = segment.x * tileSize;
-                    const y = segment.y * tileSize;
-                    const radius = i === 0 ? 6 : 4;
-                    ctx.beginPath();
-                    ctx.moveTo(x + radius, y);
-                    ctx.lineTo(x + tileSize - radius, y);
-                    ctx.quadraticCurveTo(x + tileSize, y, x + tileSize, y + radius);
-                    ctx.lineTo(x + tileSize, y + tileSize - radius);
-                    ctx.quadraticCurveTo(x + tileSize, y + tileSize, x + tileSize - radius, y + tileSize);
-                    ctx.lineTo(x + radius, y + tileSize);
-                    ctx.quadraticCurveTo(x, y + tileSize, x, y + tileSize - radius);
-                    ctx.lineTo(x, y + radius);
-                    ctx.quadraticCurveTo(x, y, x + radius, y);
-                    ctx.closePath();
-                    ctx.fill();
-                    // Add shine effect to head
-                    if (i === 0) {
-                        ctx.fillStyle = 'rgba(255, 255, 255, 0.2)';
-                        ctx.beginPath();
-                        ctx.moveTo(x + radius, y);
-                        ctx.lineTo(x + tileSize * 0.3, y + tileSize * 0.3);
-                        ctx.lineTo(x + radius, y + tileSize * 0.3);
-                        ctx.quadraticCurveTo(x, y + tileSize * 0.3, x, y + radius);
-                        ctx.quadraticCurveTo(x, y, x + radius, y);
-                        ctx.closePath();
-                        ctx.fill();
-                    }
                 }
-                // Draw food
-                const foodGradient = ctx.createRadialGradient(
-                    foodX * tileSize + tileSize / 2,
-                    foodY * tileSize + tileSize / 2,
-                    0,
-                    foodX * tileSize + tileSize / 2,
-                    foodY * tileSize + tileSize / 2,
-                    tileSize / 2
-                );
-                foodGradient.addColorStop(0, '#f5af19');
-                foodGradient.addColorStop(1, '#f12711');
-                ctx.fillStyle = foodGradient;
-                ctx.beginPath();
-                ctx.arc(
-                    foodX * tileSize + tileSize / 2,
-                    foodY * tileSize + tileSize / 2,
-                    tileSize / 2 - 2,
-                    0,
-                    Math.PI * 2
-                );
-                ctx.fill();
-                // Add shine to food
-                ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
-                ctx.beginPath();
-                ctx.arc(
-                    foodX * tileSize + tileSize / 3,
-                    foodY * tileSize + tileSize / 3,
-                    tileSize / 6,
-                    0,
-                    Math.PI * 2
-                );
-                ctx.fill();
             }
-            // Place food randomly
-            function placeFood() {
-                let validPlacement = false;
-                while (!validPlacement) {
-                    foodX = Math.floor(Math.random() * tileCount);
-                    foodY = Math.floor(Math.random() * tileCount);
-                    validPlacement = true;
-                    // Check if food is on snake
-                    for (let i = 0; i < snake.length; i++) {
-                        if (snake[i].x === foodX && snake[i].y === foodY) {
-                            validPlacement = false;
-                            break;
-                        }
-                    }
-                }
-            }
-            // Game over
-            function gameOver() {
-                isGameOver = true;
-                clearInterval(gameLoop);
-                // Play sound
-                if (soundEnabled) {
-                    gameOverSound.currentTime = 0;
-                    gameOverSound.play();
-                }
-                // Show game over modal
-                finalScoreDisplay.textContent = score;
-                const modalContent = gameOverModal.querySelector('div');
-                modalContent.classList.remove('scale-95', 'opacity-0');
-                modalContent.classList.add('scale-100', 'opacity-100');
-                gameOverModal.classList.remove('hidden');
-            }
-            // Event listeners
-            document.addEventListener('keydown', (e) => {
-                switch (e.key) {
-                    case 'ArrowUp':
-                        if (yVelocity !== 1) {
-                            nextXVelocity = 0;
-                            nextYVelocity = -1;
-                        }
-                        break;
-                    case 'ArrowDown':
-                        if (yVelocity !== -1) {
-                            nextXVelocity = 0;
-                            nextYVelocity = 1;
-                        }
-                        break;
-                    case 'ArrowLeft':
-                        if (xVelocity !== 1) {
-                            nextXVelocity = -1;
-                            nextYVelocity = 0;
-                        }
-                        break;
-                    case 'ArrowRight':
-                        if (xVelocity !== -1) {
-                            nextXVelocity = 1;
-                            nextYVelocity = 0;
-                        }
-                        break;
-                    case ' ':
-                        togglePause();
-                        break;
-                    case 'r':
-                        initGame();
-                        break;
-                }
             });
-            // Button controls
-            upBtn.addEventListener('click', () => {
-                if (yVelocity !== 1) {
-                    nextXVelocity = 0;
-                    nextYVelocity = -1;
-                }
             });
-            downBtn.addEventListener('click', () => {
-                if (yVelocity !== -1) {
-                    nextXVelocity = 0;
-                    nextYVelocity = 1;
-                }
             });
-            leftBtn.addEventListener('click', () => {
-                if (xVelocity !== 1) {
-                    nextXVelocity = -1;
-                    nextYVelocity = 0;
-                }
             });
-            rightBtn.addEventListener('click', () => {
-                if (xVelocity !== -1) {
-                    nextXVelocity = 1;
-                    nextYVelocity = 0;
-                }
             });
-            // Toggle pause
-            function togglePause() {
-                if (isGameOver) return;
-                isPaused = !isPaused;
-                if (isPaused) {
-                    pauseBtn.innerHTML = '<i class="fas fa-play text-blue-400"></i>';
-                } else {
-                    pauseBtn.innerHTML = '<i class="fas fa-pause text-blue-400"></i>';
-                }
-            }
-            pauseBtn.addEventListener('click', togglePause);
-            // Restart game
-            restartBtn.addEventListener('click', () => {
-                initGame();
-                gameOverModal.classList.add('hidden');
             });
-            // Toggle sound
-            soundBtn.addEventListener('click', () => {
-                soundEnabled = !soundEnabled;
-                if (soundEnabled) {
-                    soundBtn.innerHTML = '<i class="fas fa-volume-up text-blue-400"></i>';
-                } else {
-                    soundBtn.innerHTML = '<i class="fas fa-volume-mute text-blue-400"></i>';
-                }
             });
-            // Start game
-            startBtn.addEventListener('click', () => {
-                startModal.classList.add('hidden');
-                initGame();
             });
-            // Play again
-            playAgainBtn.addEventListener('click', () => {
-                gameOverModal.classList.add('hidden');
-                initGame();
             });
-            // Quit game
-            quitBtn.addEventListener('click', () => {
-                gameOverModal.classList.add('hidden');
-                startModal.classList.remove('hidden');
             });
-            // Initialize canvas size on load and resize
-            function handleResize() {
-                if (!isGameOver && !startModal.classList.contains('hidden')) {
-                    const container = canvas.parentElement;
-                    const size = Math.min(container.clientWidth, container.clientHeight);
-                    canvas.width = size;
-                    canvas.height = size;
-                    tileSize = size / tileCount;
-                    drawGame();
-                }
-            }
             window.addEventListener('resize', handleResize);
-            // Initial setup
-            handleResize();
         });
     </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=engerl/luxury-snake" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Interactive 3D Solar System</title>
     <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
     <style>
         body {
+            overflow: hidden;
+            background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%);
+            height: 100vh;
+            margin: 0;
+            font-family: 'Arial', sans-serif;
+            cursor: grab;
+            user-select: none;
         }
+        body.grabbing {
+            cursor: grabbing;
         }
+        #stars {
+            position: absolute;
+            width: 300%;
+            height: 300%;
+            z-index: 0;
+            transform-origin: center;
         }
+        .star {
+            position: absolute;
+            background-color: white;
+            border-radius: 50%;
+            animation: twinkle var(--duration) infinite ease-in-out;
         }
+        @keyframes twinkle {
+            0%, 100% { opacity: 0.2; }
+            50% { opacity: 1; }
         }
+        .orbit {
+            position: absolute;
+            border: 1px dashed rgba(255, 255, 255, 0.1);
             border-radius: 50%;
+            transform-origin: center;
         }
+        .planet {
+            position: absolute;
+            border-radius: 50%;
+            transform-origin: center;
+            cursor: pointer;
+            transition: transform 0.3s, box-shadow 0.3s;
+            z-index: 5;
         }
+        .planet:hover {
+            transform: scale(1.5);
+            box-shadow: 0 0 15px currentColor;
+            z-index: 10;
         }
+        .planet-info {
+            position: absolute;
+            background: rgba(0, 0, 0, 0.8);
+            border: 1px solid #444;
+            border-radius: 8px;
+            padding: 15px;
+            color: white;
+            max-width: 250px;
+            display: none;
+            z-index: 100;
+            backdrop-filter: blur(5px);
+            pointer-events: none;
         }
+        .sun {
+            position: absolute;
+            border-radius: 50%;
+            background: radial-gradient(circle at center, #ffde00, #ff8c00, #ff3d00);
+            box-shadow: 0 0 60px #ff8c00, 0 0 98px #ff4500;
+            z-index: 2;
         }
+        .controls {
+            position: fixed;
+            bottom: 20px;
+            left: 50%;
+            transform: translateX(-50%);
+            background: rgba(0, 0, 0, 0.7);
+            padding: 15px;
+            border-radius: 10px;
+            display: flex;
+            gap: 15px;
+            align-items: center;
+            z-index: 100;
+            backdrop-filter: blur(5px);
         }
+        .speed-display {
+            color: white;
+            min-width: 80px;
+            text-align: center;
         }
+        .title {
+            position: fixed;
+            top: 20px;
+            left: 50%;
+            transform: translateX(-50%);
+            color: white;
+            font-size: 2.5rem;
+            text-align: center;
+            z-index: 100;
+            text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
+            background: rgba(0, 0, 0, 0.5);
+            padding: 10px 20px;
+            border-radius: 10px;
+            pointer-events: none;
         }
+        .ring {
+            position: absolute;
             border-radius: 50%;
+            opacity: 0.7;
+            transform-origin: center;
+            pointer-events: none;
         }
+        .solar-system-container {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            transform-origin: center;
+            transition: transform 0.1s ease-out;
         }
+        .tooltip {
+            position: absolute;
+            background: rgba(0, 0, 0, 0.7);
+            color: white;
+            padding: 5px 10px;
+            border-radius: 5px;
+            font-size: 12px;
+            pointer-events: none;
+            opacity: 0;
+            transition: opacity 0.3s;
+            z-index: 20;
+        }
+        .asteroid {
+            position: absolute;
+            background-color: #888;
+            border-radius: 50%;
+            pointer-events: none;
+        }
+        .comet {
+            position: absolute;
+            width: 10px;
+            height: 3px;
+            background: linear-gradient(to right, rgba(200,200,255,1), transparent);
+            transform-origin: center;
+            pointer-events: none;
         }
+        .drag-indicator {
+            position: fixed;
+            bottom: 20px;
+            left: 20px;
+            background: rgba(0, 0, 0, 0.7);
+            color: white;
+            padding: 10px;
+            border-radius: 8px;
+            z-index: 100;
         }
     </style>
 </head>
+<body>
+    <div class="solar-system-container" id="solarSystem">
+        <div id="stars"></div>
+        <div class="sun" id="sun"></div>
     </div>
+    <div class="title">Interactive 3D Solar System</div>
+    <div id="positionIndicator" class="fixed bottom-20 right-4 bg-black bg-opacity-50 text-white p-2 rounded-md z-50">
+        X: 0 | Y: 0 | Zoom: 1x
     </div>
+    <div class="drag-indicator">
+        <i class="fas fa-arrows-alt"></i> Hold left mouse button to drag view
+    </div>
+    <div class="controls">
+        <button id="slowDown" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded transition-colors">
+            <i class="fas fa-minus"></i> Slower
         </button>
+        <div class="speed-display" id="speedDisplay">1x</div>
+        <button id="speedUp" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded transition-colors">
+            <i class="fas fa-plus"></i> Faster
         </button>
+        <button id="pauseBtn" class="bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded transition-colors">
+            <i class="fas fa-pause"></i> Pause
         </button>
+        <button id="resetBtn" class="bg-gray-600 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded transition-colors">
+            <i class="fas fa-sync-alt"></i> Reset
+        </button>
+        <button id="zoomIn" class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded transition-colors">
+            <i class="fas fa-search-plus"></i>
+        </button>
+        <button id="zoomOut" class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded transition-colors">
+            <i class="fas fa-search-minus"></i>
         </button>
     </div>
+    <div id="tooltip" class="tooltip"></div>
+    <script>
+        // Configuration
+        const config = {
+            scale: 0.5,   // Initial scale factor for distances
+            speed: 1,     // Initial speed multiplier
+            paused: false,
+            zoom: 1,
+            offsetX: 0,
+            offsetY: 0,
+            isDragging: false,
+            lastX: 0,
+            lastY: 0
+        };
+        // Planet data (relative sizes and distances)
+        const planets = [
+            { name: "Mercury", color: "#B8B8B8", size: 4, distance: 58, orbitTime: 88, info: "The smallest planet in our solar system and closest to the Sun." },
+            { name: "Venus", color: "#E6C229", size: 9.5, distance: 108, orbitTime: 225, info: "Similar in size to Earth but with a toxic atmosphere of carbon dioxide." },
+            { name: "Earth", color: "#6B93D6", size: 10, distance: 150, orbitTime: 365, hasMoon: true, info: "Our home planet, the only known place in the universe confirmed to host life." },
+            { name: "Mars", color: "#C1440E", size: 5.3, distance: 228, orbitTime: 687, info: "Known as the Red Planet due to iron oxide on its surface." },
+            { name: "Jupiter", color: "#D39C7E", size: 112, distance: 778, orbitTime: 4333, info: "The largest planet in our solar system, a gas giant with a Great Red Spot." },
+            { name: "Saturn", color: "#E4D191", size: 94, distance: 1427, orbitTime: 10759, hasRings: true, info: "Famous for its beautiful ring system made of ice and rock." },
+            { name: "Uranus", color: "#D1E7E7", size: 40, distance: 2871, orbitTime: 30687, info: "An ice giant that rotates on its side, with a blue-green color." },
+            { name: "Neptune", color: "#5B5DDF", size: 38, distance: 4498, orbitTime: 60190, info: "The windiest planet with the strongest winds in the solar system." },
+            { name: "Pluto", color: "#D1B7A3", size: 1.8, distance: 5906, orbitTime: 90560, info: "A dwarf planet in the Kuiper belt, smaller than Earth's moon." }
+        ];
+        // Create stars
+        function createStars() {
+            const starsContainer = document.getElementById('stars');
+            const starCount = 1000;
+            for (let i = 0; i < starCount; i++) {
+                const star = document.createElement('div');
+                star.className = 'star';
+                // Random position
+                const x = Math.random() * 300;
+                const y = Math.random() * 300;
+                // Random size (0.5px to 2px)
+                const size = Math.random() * 1.5 + 0.5;
+                // Random twinkle duration (3s to 10s)
+                const duration = Math.random() * 7 + 3;
+                star.style.left = `${x - 50}%`;
+                star.style.top = `${y - 50}%`;
+                star.style.width = `${size}px`;
+                star.style.height = `${size}px`;
+                star.style.setProperty('--duration', `${duration}s`);
+                starsContainer.appendChild(star);
+            }
+        }
+        // Create asteroid belt
+        function createAsteroidBelt() {
+            const container = document.getElementById('solarSystem');
+            const centerX = window.innerWidth / 2;
+            const centerY = window.innerHeight / 2;
+            const asteroidCount = 100;
+            for (let i = 0; i < asteroidCount; i++) {
+                const asteroid = document.createElement('div');
+                asteroid.className = 'asteroid';
+                // Random position in asteroid belt area (between Mars and Jupiter)
+                const distance = Math.random() * 230 + 350;
+                const angle = Math.random() * Math.PI * 2;
+                const x = centerX + Math.cos(angle) * distance * config.scale;
+                const y = centerY + Math.sin(angle) * distance * config.scale;
+                // Random size (0.5px to 3px)
+                const size = Math.random() * 2.5 + 0.5;
+                asteroid.style.left = `${x}px`;
+                asteroid.style.top = `${y}px`;
+                asteroid.style.width = `${size}px`;
+                asteroid.style.height = `${size}px`;
+                container.appendChild(asteroid);
             }
+            // Create a comet
+            const comet = document.createElement('div');
+            comet.className = 'comet';
+            comet.id = 'comet';
+            comet.style.left = `${centerX - 500}px`;
+            comet.style.top = `${centerY - 300}px`;
+            container.appendChild(comet);
+        }
+        // Create solar system
+        function createSolarSystem() {
+            const container = document.getElementById('solarSystem');
+            const centerX = window.innerWidth / 2;
+            const centerY = window.innerHeight / 2;
+            // Create Sun
+            const sun = document.getElementById('sun');
+            sun.style.width = '50px';
+            sun.style.height = '50px';
+            sun.style.left = `${centerX - 25}px`;
+            sun.style.top = `${centerY - 25}px`;
+            // Create planets and orbits
+            planets.forEach((planet, index) => {
+                // Create orbit path
+                const orbit = document.createElement('div');
+                orbit.className = 'orbit';
+                const orbitRadius = planet.distance * config.scale;
+                orbit.style.width = `${orbitRadius * 2}px`;
+                orbit.style.height = `${orbitRadius * 2}px`;
+                orbit.style.left = `${centerX - orbitRadius}px`;
+                orbit.style.top = `${centerY - orbitRadius}px`;
+                container.appendChild(orbit);
+                // Create planet
+                const planetElement = document.createElement('div');
+                planetElement.className = 'planet';
+                planetElement.id = `planet-${index}`;
+                planetElement.style.backgroundColor = planet.color;
+                planetElement.style.boxShadow = `0 0 10px ${planet.color}`;
+                planetElement.style.color = planet.color; // For glow effect
+                const planetSize = planet.size * 0.5;
+                planetElement.style.width = `${planetSize}px`;
+                planetElement.style.height = `${planetSize}px`;
+                // Initial position
+                const angle = Math.random() * Math.PI * 2;
+                const x = centerX + Math.cos(angle) * orbitRadius - planetSize / 2;
+                const y = centerY + Math.sin(angle) * orbitRadius - planetSize / 2;
+                planetElement.style.left = `${x}px`;
+                planetElement.style.top = `${y}px`;
+                container.appendChild(planetElement);
+                // Create moon for Earth
+                if (planet.hasMoon) {
+                    const moon = document.createElement('div');
+                    moon.className = 'planet';
+                    moon.style.backgroundColor = '#ddd';
+                    moon.style.width = '3px';
+                    moon.style.height = '3px';
+                    moon.style.left = `${x + planetSize/2 + 8}px`;
+                    moon.style.top = `${y + planetSize/2 - 3}px`;
+                    container.appendChild(moon);
+                    planet.moon = moon;
                 }
+                // Create rings for Saturn
+                if (planet.hasRings) {
+                    const ring = document.createElement('div');
+                    ring.className = 'ring';
+                    ring.style.border = `15px solid #C0C0C0`;
+                    ring.style.width = `${planetSize * 2.5}px`;
+                    ring.style.height = `${planetSize * 0.5}px`;
+                    ring.style.left = `${x - planetSize * 0.75}px`;
+                    ring.style.top = `${y + planetSize * 0.25}px`;
+                    container.appendChild(ring);
+                    planet.ringElement = ring;
                 }
+                // Create info panel
+                const infoPanel = document.createElement('div');
+                infoPanel.className = 'planet-info';
+                infoPanel.id = `info-${index}`;
+                infoPanel.innerHTML = `
+                    <h3 class="font-bold text-lg mb-2">${planet.name}</h3>
+                    <p class="text-sm mb-1">Distance from Sun: ${planet.distance} million km</p>
+                    <p class="text-sm mb-1">Orbit Period: ${planet.orbitTime} Earth days</p>
+                    <p class="text-sm">${planet.info}</p>
+                `;
+                container.appendChild(infoPanel);
+                // Add hover event for tooltip
+                planetElement.addEventListener('mousemove', (e) => {
+                    const tooltip = document.getElementById('tooltip');
+                    tooltip.textContent = planet.name;
+                    tooltip.style.left = `${e.pageX + 15}px`;
+                    tooltip.style.top = `${e.pageY + 15}px`;
+                    tooltip.style.opacity = '1';
+                });
+                planetElement.addEventListener('mouseleave', () => {
+                    document.getElementById('tooltip').style.opacity = '0';
+                });
+                // Add click event to show info
+                planetElement.addEventListener('click', (e) => {
+                    e.stopPropagation();
+                    hideAllInfoPanels();
+                    infoPanel.style.display = 'block';
+                    // Position the info panel
+                    const rect = planetElement.getBoundingClientRect();
+                    infoPanel.style.left = `${rect.right + 10}px`;
+                    infoPanel.style.top = `${rect.top}px`;
+                    // Adjust if it goes off screen
+                    if (parseInt(infoPanel.style.left) + infoPanel.offsetWidth > window.innerWidth) {
+                        infoPanel.style.left = `${rect.left - infoPanel.offsetWidth - 10}px`;
                     }
+                });
+                // Store planet data for animation
+                planet.element = planetElement;
+                planet.angle = angle;
+                planet.orbitRadius = orbitRadius;
+            });
+            // Hide info panels when clicking anywhere else
+            document.addEventListener('click', hideAllInfoPanels);
+        }
+        function hideAllInfoPanels() {
+            document.querySelectorAll('.planet-info').forEach(panel => {
+                panel.style.display = 'none';
+            });
+        }
+        // Animate planets
+        function animatePlanets() {
+            if (config.paused) {
+                requestAnimationFrame(animatePlanets);
+                return;
             }
+            const container = document.getElementById('solarSystem');
+            const centerX = window.innerWidth / 2;
+            const centerY = window.innerHeight / 2;
+            planets.forEach((planet) => {
+                // Update angle based on orbit time and speed
+                planet.angle += (0.01 / planet.orbitTime) * config.speed;
+                // Calculate new position (accounting for offset and zoom)
+                const effectiveOrbitRadius = planet.orbitRadius * config.zoom;
+                const x = centerX + config.offsetX + Math.cos(planet.angle) * effectiveOrbitRadius - planet.element.offsetWidth / 2;
+                const y = centerY + config.offsetY + Math.sin(planet.angle) * effectiveOrbitRadius - planet.element.offsetHeight / 2;
+                // Update planet position
+                planet.element.style.left = `${x}px`;
+                planet.element.style.top = `${y}px`;
+                // Update moon position for Earth
+                if (planet.hasMoon) {
+                    planet.moon.style.left = `${x + planet.size * 0.5 / 2 + 8}px`;
+                    planet.moon.style.top = `${y + planet.size * 0.5 / 2 - 3}px`;
                 }
+                // Update ring position for Saturn
+                if (planet.hasRings) {
+                    planet.ringElement.style.left = `${x - planet.size * 0.75 * 0.5}px`;
+                    planet.ringElement.style.top = `${y + planet.size * 0.25 * 0.5}px`;
+                    planet.ringElement.style.transform = `rotate(${planet.angle * 2}rad)`;
+                }
+            });
+            // Animate comet
+            const comet = document.getElementById('comet');
+            if (comet) {
+                const cometAngle = performance.now() * 0.0001;
+                const cometDistance = 1000;
+                const cometX = centerX + config.offsetX + Math.cos(cometAngle) * cometDistance * config.scale;
+                const cometY = centerY + config.offsetY + Math.sin(cometAngle * 1.5) * cometDistance * config.scale;
+                comet.style.left = `${cometX}px`;
+                comet.style.top = `${cometY}px`;
+                comet.style.transform = `rotate(${cometAngle}rad)`;
             }
+            // Update solar system container transform
+            container.style.transform = `translate(${config.offsetX}px, ${config.offsetY}px) scale(${config.zoom})`;
+            requestAnimationFrame(animatePlanets);
+        }
+        // Handle mouse drag for panning
+        function setupDragControls() {
+            const container = document.body;
+            container.addEventListener('mousedown', (e) => {
+                // Only respond to left mouse button
+                if (e.button !== 0) return;
+                if (e.target.closest('button') || e.target.closest('.planet-info')) return;
+                config.isDragging = true;
+                config.lastX = e.clientX;
+                config.lastY = e.clientY;
+                container.classList.add('grabbing');
+                e.preventDefault();
+            });
+            container.addEventListener('mousemove', (e) => {
+                if (!config.isDragging) return;
+                const dx = e.clientX - config.lastX;
+                const dy = e.clientY - config.lastY;
+                config.offsetX += dx;
+                config.offsetY += dy;
+                config.lastX = e.clientX;
+                config.lastY = e.clientY;
+                updatePositionIndicator();
+                e.preventDefault();
+            });
+            container.addEventListener('mouseup', (e) => {
+                if (e.button !== 0) return;
+                config.isDragging = false;
+                container.classList.remove('grabbing');
+                e.preventDefault();
             });
+            container.addEventListener('mouseleave', () => {
+                config.isDragging = false;
+                container.classList.remove('grabbing');
             });
+            // Touch support
+            container.addEventListener('touchstart', (e) => {
+                if (e.target.closest('button') || e.target.closest('.planet-info')) return;
+                config.isDragging = true;
+                config.lastX = e.touches[0].clientX;
+                config.lastY = e.touches[0].clientY;
+                e.preventDefault();
             });
+            container.addEventListener('touchmove', (e) => {
+                if (!config.isDragging) return;
+                const dx = e.touches[0].clientX - config.lastX;
+                const dy = e.touches[0].clientY - config.lastY;
+                config.offsetX += dx;
+                config.offsetY += dy;
+                config.lastX = e.touches[0].clientX;
+                config.lastY = e.touches[0].clientY;
+                updatePositionIndicator();
+                e.preventDefault();
             });
+            container.addEventListener('touchend', () => {
+                config.isDragging = false;
             });
+        }
+        function updatePositionIndicator() {
+            const indicator = document.getElementById('positionIndicator');
+            indicator.textContent = `X: ${Math.round(config.offsetX)} | Y: ${Math.round(config.offsetY)} | Zoom: ${config.zoom.toFixed(1)}x`;
+        }
+        // Handle window resize
+        function handleResize() {
+            const centerX = window.innerWidth / 2;
+            const centerY = window.innerHeight / 2;
+            // Update Sun position
+            const sun = document.getElementById('sun');
+            sun.style.left = `${centerX - 25}px`;
+            sun.style.top = `${centerY - 25}px`;
+        }
+        // Initialize
+        window.addEventListener('load', () => {
+            createStars();
+            createSolarSystem();
+            createAsteroidBelt();
+            setupDragControls();
+            animatePlanets();
+            updatePositionIndicator();
+            // Set up controls
+            document.getElementById('speedUp').addEventListener('click', () => {
+                config.speed *= 1.5;
+                updateControls();
+            });
+            document.getElementById('slowDown').addEventListener('click', () => {
+                config.speed /= 1.5;
+                if (config.speed < 0.01) config.speed = 0.01;
+                updateControls();
             });
+            document.getElementById('pauseBtn').addEventListener('click', () => {
+                config.paused = !config.paused;
+                updateControls();
+                if (!config.paused) animatePlanets();
             });
+            document.getElementById('resetBtn').addEventListener('click', () => {
+                config.speed = 1;
+                config.paused = false;
+                config.zoom = 1;
+                config.offsetX = 0;
+                config.offsetY = 0;
+                updateControls();
+                // Reset planet positions to random angles
+                planets.forEach(planet => {
+                    planet.angle = Math.random() * Math.PI * 2;
+                });
+                animatePlanets();
             });
+            document.getElementById('zoomIn').addEventListener('click', () => {
+                config.zoom *= 1.2;
+                if (config.zoom > 5) config.zoom = 5;
+                updatePositionIndicator();
             });
+            document.getElementById('zoomOut').addEventListener('click', () => {
+                config.zoom /= 1.2;
+                if (config.zoom < 0.5) config.zoom = 0.5;
+                updatePositionIndicator();
             });
+            // Mouse wheel zoom
+            document.addEventListener('wheel', (e) => {
+                e.preventDefault();
+                const delta = e.deltaY < 0 ? 1.2 : 1/1.2;
+                // Zoom toward mouse position
+                const mouseX = e.clientX;
+                const mouseY = e.clientY;
+                const newZoom = config.zoom * delta;
+                if (newZoom > 5) return;
+                if (newZoom < 0.5) return;
+                // Calculate the offset needed to zoom toward mouse position
+                const containerX = window.innerWidth / 2;
+                const containerY = window.innerHeight / 2;
+                const offsetX = mouseX - containerX;
+                const offsetY = mouseY - containerY;
+                config.offsetX = offsetX + (config.offsetX - offsetX) * delta;
+                config.offsetY = offsetY + (config.offsetY - offsetY) * delta;
+                config.zoom = newZoom;
+                updatePositionIndicator();
+            }, { passive: false });
             window.addEventListener('resize', handleResize);
         });
+        function updateControls() {
+            document.getElementById('speedDisplay').textContent =
+                config.speed.toFixed(2) + 'x';
+            const btn = document.getElementById('pauseBtn');
+            if (config.paused) {
+                btn.innerHTML = '<i class="fas fa-play"></i> Play';
+                btn.classList.remove('bg-red-600');
+                btn.classList.add('bg-green-600');
+            } else {
+                btn.innerHTML = '<i class="fas fa-pause"></i> Pause';
+                btn.classList.remove('bg-green-600');
+                btn.classList.add('bg-red-600');
+            }
+        }
     </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=engerl/luxury-snake" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
 </html>