Spaces:

FantomClans
/

deepsite-project

Running

App Files Files Community

FantomClans commited on Sep 28, 2025

Commit

bcae056

verified ·

1 Parent(s): 76be617

Сделай сайт который позволяет человек создавать свой мир, в 2д или же в 3д

Browse files

Files changed (2) hide show

index.html +0 -452
world-builder.html +263 -0

index.html CHANGED Viewed

@@ -1,452 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Interactive Desk Game</title>
-    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
-    <script src="https://cdn.tailwindcss.com"></script>
-    <script src="https://unpkg.com/feather-icons"></script>
-    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
-    <style>
-        :root {
-            --primary-color: #8B5CF6;
-            --secondary-color: #EC4899;
-        }
-        body {
-            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
-            color: #f0f0f0;
-            min-height: 100vh;
-        }
-        .game-board {
-            display: grid;
-            grid-template-columns: repeat(3, 1fr);
-            gap: 15px;
-            max-width: 500px;
-            margin: 0 auto;
-        }
-        .game-cell {
-            aspect-ratio: 1;
-            background: rgba(255, 255, 255, 0.1);
-            border-radius: 12px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 3rem;
-            font-weight: bold;
-            cursor: pointer;
-            transition: all 0.3s ease;
-            backdrop-filter: blur(10px);
-            border: 1px solid rgba(255, 255, 255, 0.1);
-        }
-        .game-cell:hover {
-            background: rgba(255, 255, 255, 0.2);
-            transform: translateY(-5px);
-        }
-        .game-cell.x {
-            color: var(--primary-color);
-        }
-        .game-cell.o {
-            color: var(--secondary-color);
-        }
-        .winning-cell {
-            animation: pulse 1.5s infinite;
-            box-shadow: 0 0 15px currentColor;
-        }
-        @keyframes pulse {
-            0% { transform: scale(1); }
-            50% { transform: scale(1.05); }
-            100% { transform: scale(1); }
-        }
-        .score-card {
-            background: rgba(255, 255, 255, 0.1);
-            border-radius: 16px;
-            padding: 20px;
-            backdrop-filter: blur(10px);
-            border: 1px solid rgba(255, 255, 255, 0.1);
-        }
-        .btn-primary {
-            background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
-            color: white;
-            border: none;
-            padding: 12px 24px;
-            border-radius: 50px;
-            font-weight: bold;
-            cursor: pointer;
-            transition: all 0.3s ease;
-            box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
-        }
-        .btn-primary:hover {
-            transform: translateY(-3px);
-            box-shadow: 0 6px 20px rgba(139, 92, 246, 0.5);
-        }
-        .btn-primary:active {
-            transform: translateY(1px);
-        }
-        .player-indicator {
-            display: inline-block;
-            width: 20px;
-            height: 20px;
-            border-radius: 50%;
-            margin-right: 8px;
-        }
-        .player-x-indicator {
-            background: var(--primary-color);
-        }
-        .player-o-indicator {
-            background: var(--secondary-color);
-        }
-        .notification {
-            position: fixed;
-            top: 20px;
-            right: 20px;
-            padding: 15px 25px;
-            border-radius: 12px;
-            background: rgba(255, 255, 255, 0.15);
-            backdrop-filter: blur(10px);
-            border-left: 4px solid var(--primary-color);
-            transform: translateX(150%);
-            transition: transform 0.3s ease;
-            z-index: 1000;
-        }
-        .notification.show {
-            transform: translateX(0);
-        }
-    </style>
-</head>
-<body class="min-h-screen flex flex-col">
-    <!-- Background Animation -->
-    <div id="background-animation" class="fixed inset-0 z-0"></div>
-    <!-- Header -->
-    <header class="relative z-10 py-6 px-4 sm:px-8">
-        <div class="container mx-auto flex justify-between items-center">
-            <h1 class="text-3xl font-bold flex items-center">
-                <i data-feather="grid" class="mr-3 text-purple-400"></i>
-                DeskGame<span class="text-pink-500">.io</span>
-            </h1>
-            <nav>
-                <ul class="flex space-x-6">
-                    <li><a href="#" class="hover:text-purple-400 transition">Play</a></li>
-                    <li><a href="#" class="hover:text-purple-400 transition">Leaderboard</a></li>
-                    <li><a href="#" class="hover:text-purple-400 transition">About</a></li>
-                </ul>
-            </nav>
-        </div>
-    </header>
-    <!-- Main Content -->
-    <main class="flex-grow relative z-10 py-12 px-4">
-        <div class="container mx-auto max-w-4xl">
-            <div class="text-center mb-12">
-                <h2 class="text-4xl font-bold mb-4">Interactive Desk Game</h2>
-                <p class="text-xl text-gray-300 max-w-2xl mx-auto">
-                    Challenge your friends in this classic strategy game. Play against AI or invite a friend for an epic battle!
-                </p>
-            </div>
-            <div class="flex flex-col lg:flex-row gap-8 items-center">
-                <!-- Game Board -->
-                <div class="flex-1">
-                    <div class="bg-gray-800 bg-opacity-50 rounded-2xl p-6 backdrop-blur-sm border border-gray-700">
-                        <div class="flex justify-between items-center mb-6">
-                            <div class="text-xl font-semibold">
-                                Current Player:
-                                <span id="current-player" class="ml-2">
-                                    <span class="player-indicator player-x-indicator"></span>
-                                    Player X
-                                </span>
-                            </div>
-                            <button id="reset-btn" class="btn-primary flex items-center">
-                                <i data-feather="refresh-ccw" class="mr-2"></i>
-                                Reset Game
-                            </button>
-                        </div>
-                        <div class="game-board mb-6">
-                            <div class="game-cell" data-cell-index="0"></div>
-                            <div class="game-cell" data-cell-index="1"></div>
-                            <div class="game-cell" data-cell-index="2"></div>
-                            <div class="game-cell" data-cell-index="3"></div>
-                            <div class="game-cell" data-cell-index="4"></div>
-                            <div class="game-cell" data-cell-index="5"></div>
-                            <div class="game-cell" data-cell-index="6"></div>
-                            <div class="game-cell" data-cell-index="7"></div>
-                            <div class="game-cell" data-cell-index="8"></div>
-                        </div>
-                        <div class="text-center">
-                            <div id="game-status" class="text-2xl font-bold mb-4">Player X's turn</div>
-                            <button id="new-game-btn" class="btn-primary hidden">
-                                <i data-feather="plus-circle" class="mr-2"></i>
-                                New Game
-                            </button>
-                        </div>
-                    </div>
-                </div>
-                <!-- Score & Info Panel -->
-                <div class="w-full lg:w-80">
-                    <div class="score-card mb-6">
-                        <h3 class="text-2xl font-bold mb-4 flex items-center">
-                            <i data-feather="award" class="mr-2 text-yellow-400"></i>
-                            Scoreboard
-                        </h3>
-                        <div class="space-y-4">
-                            <div class="flex justify-between items-center p-3 bg-gray-700 bg-opacity-50 rounded-lg">
-                                <div class="flex items-center">
-                                    <span class="player-indicator player-x-indicator"></span>
-                                    <span>Player X</span>
-                                </div>
-                                <span id="score-x" class="text-2xl font-bold">0</span>
-                            </div>
-                            <div class="flex justify-between items-center p-3 bg-gray-700 bg-opacity-50 rounded-lg">
-                                <div class="flex items-center">
-                                    <span class="player-indicator player-o-indicator"></span>
-                                    <span>Player O</span>
-                                </div>
-                                <span id="score-o" class="text-2xl font-bold">0</span>
-                            </div>
-                            <div class="flex justify-between items-center p-3 bg-gray-700 bg-opacity-50 rounded-lg">
-                                <div class="flex items-center">
-                                    <i data-feather="minus" class="mr-2"></i>
-                                    <span>Draws</span>
-                                </div>
-                                <span id="score-draw" class="text-2xl font-bold">0</span>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="score-card">
-                        <h3 class="text-2xl font-bold mb-4 flex items-center">
-                            <i data-feather="info" class="mr-2 text-blue-400"></i>
-                            How to Play
-                        </h3>
-                        <ul class="space-y-3">
-                            <li class="flex items-start">
-                                <i data-feather="check-circle" class="mr-2 mt-1 text-green-400 flex-shrink-0"></i>
-                                <span>Players take turns placing X or O marks</span>
-                            </li>
-                            <li class="flex items-start">
-                                <i data-feather="check-circle" class="mr-2 mt-1 text-green-400 flex-shrink-0"></i>
-                                <span>First to get 3 in a row wins</span>
-                            </li>
-                            <li class="flex items-start">
-                                <i data-feather="check-circle" class="mr-2 mt-1 text-green-400 flex-shrink-0"></i>
-                                <span>Row can be horizontal, vertical, or diagonal</span>
-                            </li>
-                        </ul>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </main>
-    <!-- Notification -->
-    <div id="notification" class="notification">
-        <div id="notification-message"></div>
-    </div>
-    <!-- Footer -->
-    <footer class="relative z-10 py-8 px-4 border-t border-gray-800">
-        <div class="container mx-auto text-center">
-            <p class="text-gray-400">
-                © 2023 DeskGame.io - The Ultimate Interactive Gaming Experience
-            </p>
-            <div class="mt-4 flex justify-center space-x-6">
-                <a href="#" class="text-gray-400 hover:text-purple-400 transition">
-                    <i data-feather="github"></i>
-                </a>
-                <a href="#" class="text-gray-400 hover:text-purple-400 transition">
-                    <i data-feather="twitter"></i>
-                </a>
-                <a href="#" class="text-gray-400 hover:text-purple-400 transition">
-                    <i data-feather="facebook"></i>
-                </a>
-            </div>
-        </div>
-    </footer>
-    <script>
-        // Initialize Feather Icons
-        feather.replace();
-        // Initialize Vanta.js Background
-        VANTA.GLOBE({
-            el: "#background-animation",
-            mouseControls: true,
-            touchControls: true,
-            gyroControls: false,
-            minHeight: 200.00,
-            minWidth: 200.00,
-            scale: 1.00,
-            scaleMobile: 1.00,
-            color: 0x8b5cf6,
-            color2: 0xec4899,
-            backgroundColor: 0x16213e,
-            size: 1.00,
-            lineWidth: 1.00,
-            spacing: 17.00,
-            points: 19.00
-        });
-        // Game Logic
-        document.addEventListener('DOMContentLoaded', () => {
-            const cells = document.querySelectorAll('.game-cell');
-            const currentPlayerDisplay = document.getElementById('current-player');
-            const gameStatus = document.getElementById('game-status');
-            const resetBtn = document.getElementById('reset-btn');
-            const newGameBtn = document.getElementById('new-game-btn');
-            const scoreX = document.getElementById('score-x');
-            const scoreO = document.getElementById('score-o');
-            const scoreDraw = document.getElementById('score-draw');
-            const notification = document.getElementById('notification');
-            const notificationMessage = document.getElementById('notification-message');
-            let currentPlayer = 'X';
-            let gameBoard = ['', '', '', '', '', '', '', '', ''];
-            let gameActive = true;
-            let scores = { X: 0, O: 0, draw: 0 };
-            const winningConditions = [
-                [0, 1, 2], [3, 4, 5], [6, 7, 8], // rows
-                [0, 3, 6], [1, 4, 7], [2, 5, 8], // columns
-                [0, 4, 8], [2, 4, 6]             // diagonals
-            ];
-            // Show notification
-            function showNotification(message) {
-                notificationMessage.textContent = message;
-                notification.classList.add('show');
-                setTimeout(() => {
-                    notification.classList.remove('show');
-                }, 3000);
-            }
-            // Update score display
-            function updateScore() {
-                scoreX.textContent = scores.X;
-                scoreO.textContent = scores.O;
-                scoreDraw.textContent = scores.draw;
-            }
-            // Handle cell click
-            function handleCellClick(e) {
-                const cell = e.target;
-                const cellIndex = parseInt(cell.getAttribute('data-cell-index'));
-                if (gameBoard[cellIndex] !== '' || !gameActive) return;
-                // Update board state
-                gameBoard[cellIndex] = currentPlayer;
-                cell.textContent = currentPlayer;
-                cell.classList.add(currentPlayer.toLowerCase());
-                // Check for win or draw
-                if (checkWin()) {
-                    gameStatus.textContent = `Player ${currentPlayer} wins!`;
-                    scores[currentPlayer]++;
-                    updateScore();
-                    gameActive = false;
-                    newGameBtn.classList.remove('hidden');
-                    showNotification(`Player ${currentPlayer} wins the round!`);
-                } else if (isDraw()) {
-                    gameStatus.textContent = "Game ended in a draw!";
-                    scores.draw++;
-                    updateScore();
-                    gameActive = false;
-                    newGameBtn.classList.remove('hidden');
-                    showNotification("It's a draw!");
-                } else {
-                    // Switch player
-                    currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
-                    updateCurrentPlayerDisplay();
-                    gameStatus.textContent = `Player ${currentPlayer}'s turn`;
-                }
-            }
-            // Check for win
-            function checkWin() {
-                for (let condition of winningConditions) {
-                    const [a, b, c] = condition;
-                    if (
-                        gameBoard[a] &&
-                        gameBoard[a] === gameBoard[b] &&
-                        gameBoard[a] === gameBoard[c]
-                    ) {
-                        // Highlight winning cells
-                        cells[a].classList.add('winning-cell');
-                        cells[b].classList.add('winning-cell');
-                        cells[c].classList.add('winning-cell');
-                        return true;
-                    }
-                }
-                return false;
-            }
-            // Check for draw
-            function isDraw() {
-                return gameBoard.every(cell => cell !== '');
-            }
-            // Update current player display
-            function updateCurrentPlayerDisplay() {
-                currentPlayerDisplay.innerHTML = `
-                    <span class="player-indicator player-${currentPlayer.toLowerCase()}-indicator"></span>
-                    Player ${currentPlayer}
-                `;
-            }
-            // Reset game board
-            function resetGame() {
-                gameBoard = ['', '', '', '', '', '', '', '', ''];
-                gameActive = true;
-                currentPlayer = 'X';
-                cells.forEach(cell => {
-                    cell.textContent = '';
-                    cell.classList.remove('x', 'o', 'winning-cell');
-                });
-                updateCurrentPlayerDisplay();
-                gameStatus.textContent = "Player X's turn";
-                newGameBtn.classList.add('hidden');
-            }
-            // Initialize game
-            function initGame() {
-                cells.forEach(cell => {
-                    cell.addEventListener('click', handleCellClick);
-                });
-                resetBtn.addEventListener('click', resetGame);
-                newGameBtn.addEventListener('click', resetGame);
-                updateCurrentPlayerDisplay();
-                updateScore();
-            }
-            initGame();
-        });
-    </script>
-</body>
-</html>

world-builder.html ADDED Viewed

	@@ -0,0 +1,263 @@

+<!DOCTYPE html>
+<html lang="ru">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Создание Мира | World Builder</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet">
+    <style>
+        body {
+            font-family: 'Inter', sans-serif;
+            background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%);
+            min-height: 100vh;
+        }
+        .world-card {
+            transition: all 0.3s ease;
+            background: rgba(255, 255, 255, 0.05);
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+        }
+        .world-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
+            background: rgba(255, 255, 255, 0.08);
+        }
+        .dimension-btn {
+            transition: all 0.2s ease;
+        }
+        .dimension-btn:hover {
+            transform: scale(1.05);
+        }
+        .dimension-btn.active {
+            box-shadow: 0 0 0 3px #6366f1;
+        }
+        .tool-btn {
+            transition: all 0.2s ease;
+        }
+        .tool-btn:hover {
+            background: rgba(99, 102, 241, 0.2);
+        }
+        .tool-btn.active {
+            background: #4f46e5;
+        }
+    </style>
+</head>
+<body class="text-gray-100">
+    <!-- Header -->
+    <header class="bg-gray-900 border-b border-gray-800">
+        <div class="container mx-auto px-4 py-4 flex justify-between items-center">
+            <div class="flex items-center space-x-2">
+                <i data-feather="globe" class="text-indigo-400"></i>
+                <h1 class="text-2xl font-bold">World<span class="text-indigo-400">Builder</span></h1>
+            </div>
+            <nav class="hidden md:flex space-x-8">
+                <a href="index.html" class="hover:text-indigo-400 transition">Главная</a>
+                <a href="#" class="text-indigo-400 font-medium">Создание</a>
+                <a href="#" class="hover:text-indigo-400 transition">Галерея</a>
+                <a href="#" class="hover:text-indigo-400 transition">Сообщество</a>
+            </nav>
+            <div class="flex items-center space-x-4">
+                <button class="bg-indigo-600 hover:bg-indigo-700 px-4 py-2 rounded-lg transition">Войти</button>
+                <button class="border border-gray-700 hover:bg-gray-800 px-4 py-2 rounded-lg transition">Регистрация</button>
+            </div>
+        </div>
+    </header>
+    <!-- Main Content -->
+    <main class="container mx-auto px-4 py-8">
+        <div class="text-center mb-12">
+            <h1 class="text-4xl md:text-5xl font-bold mb-4">Создайте свой уникальный мир</h1>
+            <p class="text-xl text-gray-300 max-w-3xl mx-auto">Выберите размерность, инструменты и начните строить фэнтезийные ландшафты, города или целые вселенные</p>
+        </div>
+        <!-- Dimension Selector -->
+        <div class="bg-gray-800 rounded-xl p-6 mb-10">
+            <h2 class="text-2xl font-bold mb-6 text-center">Выберите размерность мира</h2>
+            <div class="flex flex-wrap justify-center gap-6">
+                <button class="dimension-btn active bg-gray-700 border-2 border-indigo-500 rounded-xl p-6 w-64 flex flex-col items-center">
+                    <i data-feather="square" class="w-12 h-12 mb-3 text-indigo-400"></i>
+                    <h3 class="text-xl font-bold mb-2">2D Мир</h3>
+                    <p class="text-gray-300 text-center text-sm">Создавайте плоские миры с тайлами, спрайтами и изометрическими ландшафтами</p>
+                </button>
+                <button class="dimension-btn bg-gray-700 border-2 border-gray-600 rounded-xl p-6 w-64 flex flex-col items-center">
+                    <i data-feather="box" class="w-12 h-12 mb-3 text-indigo-400"></i>
+                    <h3 class="text-xl font-bold mb-2">3D Мир</h3>
+                    <p class="text-gray-300 text-center text-sm">Стройте объемные миры с ландшафтами, зданиями и детализированными объектами</p>
+                </button>
+            </div>
+        </div>
+        <!-- Tools Panel -->
+        <div class="grid grid-cols-1 lg:grid-cols-4 gap-8 mb-10">
+            <div class="lg:col-span-1">
+                <div class="bg-gray-800 rounded-xl p-6">
+                    <h2 class="text-2xl font-bold mb-6">Инструменты</h2>
+                    <div class="space-y-3">
+                        <button class="tool-btn active w-full text-left p-3 rounded-lg flex items-center">
+                            <i data-feather="mountain" class="w-5 h-5 mr-3"></i>
+                            <span>Ландшафт</span>
+                        </button>
+                        <button class="tool-btn w-full text-left p-3 rounded-lg flex items-center">
+                            <i data-feather="home" class="w-5 h-5 mr-3"></i>
+                            <span>Здания</span>
+                        </button>
+                        <button class="tool-btn w-full text-left p-3 rounded-lg flex items-center">
+                            <i data-feather="users" class="w-5 h-5 mr-3"></i>
+                            <span>Персонажи</span>
+                        </button>
+                        <button class="tool-btn w-full text-left p-3 rounded-lg flex items-center">
+                            <i data-feather="droplet" class="w-5 h-5 mr-3"></i>
+                            <span>Вода</span>
+                        </button>
+                        <button class="tool-btn w-full text-left p-3 rounded-lg flex items-center">
+                            <i data-feather="tree" class="w-5 h-5 mr-3"></i>
+                            <span>Растения</span>
+                        </button>
+                        <button class="tool-btn w-full text-left p-3 rounded-lg flex items-center">
+                            <i data-feather="sun" class="w-5 h-5 mr-3"></i>
+                            <span>Погода</span>
+                        </button>
+                    </div>
+                </div>
+            </div>
+            <!-- Canvas Area -->
+            <div class="lg:col-span-3">
+                <div class="bg-gray-800 rounded-xl p-6">
+                    <div class="flex justify-between items-center mb-6">
+                        <h2 class="text-2xl font-bold">Рабочая область</h2>
+                        <div class="flex space-x-3">
+                            <button class="bg-gray-700 hover:bg-gray-600 px-4 py-2 rounded-lg transition flex items-center">
+                                <i data-feather="save" class="w-4 h-4 mr-2"></i>
+                                Сохранить
+                            </button>
+                            <button class="bg-indigo-600 hover:bg-indigo-700 px-4 py-2 rounded-lg transition flex items-center">
+                                <i data-feather="play" class="w-4 h-4 mr-2"></i>
+                                Запустить
+                            </button>
+                        </div>
+                    </div>
+                    <div class="bg-gray-900 rounded-lg h-96 flex items-center justify-center border-2 border-dashed border-gray-700">
+                        <div class="text-center">
+                            <i data-feather="edit-3" class="w-12 h-12 mx-auto mb-4 text-gray-500"></i>
+                            <p class="text-gray-400">Выберите инструменты и начните создавать ваш мир</p>
+                            <p class="text-gray-500 text-sm mt-2">Кликните на рабочую область для начала рисования</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- Recent Worlds -->
+        <div class="mb-12">
+            <div class="flex justify-between items-center mb-6">
+                <h2 class="text-2xl font-bold">Ваши миры</h2>
+                <button class="text-indigo-400 hover:text-indigo-300 flex items-center">
+                    <i data-feather="plus" class="w-5 h-5 mr-1"></i>
+                    Создать новый
+                </button>
+            </div>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                <div class="world-card rounded-xl p-5">
+                    <img src="http://static.photos/nature/640x360/1" alt="Мир" class="rounded-lg mb-4 w-full h-40 object-cover">
+                    <h3 class="text-xl font-bold mb-2">Фэнтезийный лес</h3>
+                    <p class="text-gray-400 text-sm mb-4">2D мир с магическими существами</p>
+                    <div class="flex justify-between">
+                        <span class="text-xs bg-indigo-900 text-indigo-300 px-2 py-1 rounded">2D</span>
+                        <span class="text-xs text-gray-500">Обновлен: 2 дня назад</span>
+                    </div>
+                </div>
+                <div class="world-card rounded-xl p-5">
+                    <img src="http://static.photos/cityscape/640x360/2" alt="Мир" class="rounded-lg mb-4 w-full h-40 object-cover">
+                    <h3 class="text-xl font-bold mb-2">Киберпанк город</h3>
+                    <p class="text-gray-400 text-sm mb-4">3D мегаполис будущего</p>
+                    <div class="flex justify-between">
+                        <span class="text-xs bg-purple-900 text-purple-300 px-2 py-1 rounded">3D</span>
+                        <span class="text-xs text-gray-500">Обновлен: 1 неделю назад</span>
+                    </div>
+                </div>
+                <div class="world-card rounded-xl p-5">
+                    <img src="http://static.photos/abstract/640x360/3" alt="Мир" class="rounded-lg mb-4 w-full h-40 object-cover">
+                    <h3 class="text-xl font-bold mb-2">Пустынный оазис</h3>
+                    <p class="text-gray-400 text-sm mb-4">2D мир в стиле арт-нуво</p>
+                    <div class="flex justify-between">
+                        <span class="text-xs bg-indigo-900 text-indigo-300 px-2 py-1 rounded">2D</span>
+                        <span class="text-xs text-gray-500">Обновлен: 3 дня назад</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+    <!-- Footer -->
+    <footer class="bg-gray-900 border-t border-gray-800 py-12">
+        <div class="container mx-auto px-4">
+            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
+                <div>
+                    <div class="flex items-center space-x-2 mb-4">
+                        <i data-feather="globe" class="text-indigo-400"></i>
+                        <h2 class="text-xl font-bold">World<span class="text-indigo-400">Builder</span></h2>
+                    </div>
+                    <p class="text-gray-400">Создавайте уникальные миры в 2D и 3D для ваших игр, историй и фантазий</p>
+                </div>
+                <div>
+                    <h3 class="text-lg font-bold mb-4">Продукт</h3>
+                    <ul class="space-y-2 text-gray-400">
+                        <li><a href="#" class="hover:text-indigo-400 transition">Возможности</a></li>
+                        <li><a href="#" class="hover:text-indigo-400 transition">Примеры</a></li>
+                        <li><a href="#" class="hover:text-indigo-400 transition">Тарифы</a></li>
+                        <li><a href="#" class="hover:text-indigo-400 transition">API</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h3 class="text-lg font-bold mb-4">Ресурсы</h3>
+                    <ul class="space-y-2 text-gray-400">
+                        <li><a href="#" class="hover:text-indigo-400 transition">Документация</a></li>
+                        <li><a href="#" class="hover:text-indigo-400 transition">Блог</a></li>
+                        <li><a href="#" class="hover:text-indigo-400 transition">Сообщество</a></li>
+                        <li><a href="#" class="hover:text-indigo-400 transition">Поддержка</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h3 class="text-lg font-bold mb-4">Компания</h3>
+                    <ul class="space-y-2 text-gray-400">
+                        <li><a href="#" class="hover:text-indigo-400 transition">О нас</a></li>
+                        <li><a href="#" class="hover:text-indigo-400 transition">Карьера</a></li>
+                        <li><a href="#" class="hover:text-indigo-400 transition">Контакты</a></li>
+                        <li><a href="#" class="hover:text-indigo-400 transition">Партнеры</a></li>
+                    </ul>
+                </div>
+            </div>
+            <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-500">
+                <p>&copy; 2023 WorldBuilder. Все права защищены.</p>
+            </div>
+        </div>
+    </footer>
+    <script>
+        feather.replace();
+        // Dimension selector
+        const dimensionBtns = document.querySelectorAll('.dimension-btn');
+        dimensionBtns.forEach(btn => {
+            btn.addEventListener('click', () => {
+                dimensionBtns.forEach(b => b.classList.remove('active', 'border-indigo-500'));
+                btn.classList.add('active', 'border-indigo-500');
+            });
+        });
+        // Tool selector
+        const toolBtns = document.querySelectorAll('.tool-btn');
+        toolBtns.forEach(btn => {
+            btn.addEventListener('click', () => {
+                toolBtns.forEach(b => b.classList.remove('active'));
+                btn.classList.add('active');
+            });
+        });
+    </script>
+</body>
+</html>