Spaces:
Running
Running
| <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>© 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> |