Spaces:
Running
Running
СОЗДАЙ САЙТ ДЛЯ СОЗДАНИЯ МИРОВ, польностью рабочий со всем рабочим фукционалом, доведёный до идеала, песочница и игра и тд чтобы всё работало
69c9ef0 verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>WorldForge Studio</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://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#6366f1', | |
| secondary: '#8b5cf6', | |
| accent: '#ec4899', | |
| dark: '#1e293b', | |
| light: '#f8fafc' | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background-color: #0f172a; | |
| color: #f8fafc; | |
| } | |
| .world-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); | |
| gap: 1.5rem; | |
| } | |
| .tool-card { | |
| transition: all 0.3s ease; | |
| border-radius: 12px; | |
| overflow: hidden; | |
| } | |
| .tool-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3); | |
| } | |
| .world-preview { | |
| height: 180px; | |
| background-size: cover; | |
| background-position: center; | |
| } | |
| .btn-primary { | |
| background: linear-gradient(135deg, #6366f1, #8b5cf6); | |
| transition: all 0.3s ease; | |
| } | |
| .btn-primary:hover { | |
| transform: scale(1.05); | |
| box-shadow: 0 10px 15px -3px rgba(99, 102, 241, 0.4); | |
| } | |
| .sidebar-panel { | |
| backdrop-filter: blur(10px); | |
| background: rgba(30, 41, 59, 0.7); | |
| border-radius: 16px; | |
| border: 1px solid rgba(148, 163, 184, 0.2); | |
| } | |
| .floating-panel { | |
| backdrop-filter: blur(15px); | |
| background: rgba(15, 23, 42, 0.85); | |
| border-radius: 20px; | |
| border: 1px solid rgba(148, 163, 184, 0.2); | |
| box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); | |
| } | |
| .glow-effect { | |
| box-shadow: 0 0 20px rgba(99, 102, 241, 0.5); | |
| } | |
| .neon-text { | |
| text-shadow: 0 0 10px rgba(99, 102, 241, 0.7); | |
| } | |
| .scrollbar-hidden::-webkit-scrollbar { | |
| display: none; | |
| } | |
| .scrollbar-hidden { | |
| -ms-overflow-style: none; | |
| scrollbar-width: none; | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen"> | |
| <!-- Background Animation --> | |
| <div id="vanta-bg" class="fixed top-0 left-0 w-full h-full z-0"></div> | |
| <!-- Main Content --> | |
| <div class="relative z-10 min-h-screen"> | |
| <!-- Header --> | |
| <header class="py-6 px-8 flex justify-between items-center"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-12 h-12 rounded-xl bg-gradient-to-br from-primary to-secondary flex items-center justify-center glow-effect"> | |
| <i data-feather="globe" class="text-white"></i> | |
| </div> | |
| <h1 class="text-3xl font-bold neon-text">WorldForge<span class="text-accent">Studio</span></h1> | |
| </div> | |
| <nav class="hidden md:flex space-x-8"> | |
| <a href="#" class="font-medium hover:text-primary transition-colors">Dashboard</a> | |
| <a href="#" class="font-medium hover:text-primary transition-colors">My Worlds</a> | |
| <a href="#" class="font-medium hover:text-primary transition-colors">Community</a> | |
| <a href="#" class="font-medium hover:text-primary transition-colors">Marketplace</a> | |
| </nav> | |
| <div class="flex items-center space-x-4"> | |
| <button class="p-2 rounded-lg bg-dark hover:bg-slate-800 transition-colors"> | |
| <i data-feather="bell"></i> | |
| </button> | |
| <button class="p-2 rounded-lg bg-dark hover:bg-slate-800 transition-colors"> | |
| <i data-feather="settings"></i> | |
| </button> | |
| <div class="w-10 h-10 rounded-full bg-gradient-to-br from-primary to-secondary"></div> | |
| </div> | |
| </header> | |
| <!-- Main Content Area --> | |
| <main class="container mx-auto px-8 py-6"> | |
| <div class="flex flex-col lg:flex-row gap-8"> | |
| <!-- Left Sidebar --> | |
| <div class="lg:w-1/4"> | |
| <div class="sidebar-panel p-6 mb-6"> | |
| <h2 class="text-xl font-bold mb-4">Create New World</h2> | |
| <div class="space-y-4"> | |
| <button class="w-full btn-primary text-white py-3 rounded-xl font-semibold flex items-center justify-center space-x-2"> | |
| <i data-feather="plus-circle"></i> | |
| <span>New Blank World</span> | |
| </button> | |
| <button class="w-full bg-dark hover:bg-slate-800 py-3 rounded-xl font-semibold flex items-center justify-center space-x-2 transition-colors"> | |
| <i data-feather="upload"></i> | |
| <span>Import Template</span> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="sidebar-panel p-6"> | |
| <h2 class="text-xl font-bold mb-4">Recent Worlds</h2> | |
| <div class="space-y-4 max-h-96 overflow-y-auto scrollbar-hidden"> | |
| <div class="bg-dark rounded-xl p-4 hover:bg-slate-800 transition-colors cursor-pointer"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-12 h-12 rounded-lg bg-gradient-to-br from-green-500 to-emerald-600"></div> | |
| <div> | |
| <h3 class="font-semibold">Fantasy Realm</h3> | |
| <p class="text-sm text-slate-400">Edited 2 hours ago</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-dark rounded-xl p-4 hover:bg-slate-800 transition-colors cursor-pointer"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-12 h-12 rounded-lg bg-gradient-to-br from-blue-500 to-cyan-600"></div> | |
| <div> | |
| <h3 class="font-semibold">Oceanic Depths</h3> | |
| <p class="text-sm text-slate-400">Edited yesterday</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-dark rounded-xl p-4 hover:bg-slate-800 transition-colors cursor-pointer"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-12 h-12 rounded-lg bg-gradient-to-br from-red-500 to-orange-600"></div> | |
| <div> | |
| <h3 class="font-semibold">Volcanic Wasteland</h3> | |
| <p class="text-sm text-slate-400">Edited 3 days ago</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-dark rounded-xl p-4 hover:bg-slate-800 transition-colors cursor-pointer"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-12 h-12 rounded-lg bg-gradient-to-br from-purple-500 to-fuchsia-600"></div> | |
| <div> | |
| <h3 class="font-semibold">Cyber Nexus</h3> | |
| <p class="text-sm text-slate-400">Edited last week</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="lg:w-3/4"> | |
| <div class="floating-panel p-8 mb-8"> | |
| <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-8"> | |
| <div> | |
| <h2 class="text-3xl font-bold mb-2">Your Virtual Worlds</h2> | |
| <p class="text-slate-400">Create, edit, and explore infinite possibilities</p> | |
| </div> | |
| <div class="mt-4 md:mt-0"> | |
| <button class="btn-primary text-white py-3 px-6 rounded-xl font-semibold flex items-center space-x-2"> | |
| <i data-feather="plus"></i> | |
| <span>Create World</span> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="world-grid"> | |
| <!-- World Card 1 --> | |
| <div class="tool-card bg-dark"> | |
| <div class="world-preview rounded-t-xl bg-gradient-to-br from-green-500 to-emerald-700"></div> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-lg mb-1">Enchanted Forest</h3> | |
| <p class="text-slate-400 text-sm mb-3">Magical realm with ancient trees</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-xs bg-slate-800 px-2 py-1 rounded">Active</span> | |
| <div class="flex space-x-2"> | |
| <button class="p-2 rounded-lg bg-slate-800 hover:bg-slate-700"> | |
| <i data-feather="play" class="w-4 h-4"></i> | |
| </button> | |
| <button class="p-2 rounded-lg bg-slate-800 hover:bg-slate-700"> | |
| <i data-feather="edit" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- World Card 2 --> | |
| <div class="tool-card bg-dark"> | |
| <div class="world-preview rounded-t-xl bg-gradient-to-br from-blue-500 to-cyan-700"></div> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-lg mb-1">Abyssal Trench</h3> | |
| <p class="text-slate-400 text-sm mb-3">Deep sea exploration world</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-xs bg-slate-800 px-2 py-1 rounded">Paused</span> | |
| <div class="flex space-x-2"> | |
| <button class="p-2 rounded-lg bg-slate-800 hover:bg-slate-700"> | |
| <i data-feather="play" class="w-4 h-4"></i> | |
| </button> | |
| <button class="p-2 rounded-lg bg-slate-800 hover:bg-slate-700"> | |
| <i data-feather="edit" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- World Card 3 --> | |
| <div class="tool-card bg-dark"> | |
| <div class="world-preview rounded-t-xl bg-gradient-to-br from-red-500 to-orange-700"></div> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-lg mb-1">Lava Caverns</h3> | |
| <p class="text-slate-400 text-sm mb-3">Volcanic underground adventure</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-xs bg-slate-800 px-2 py-1 rounded">Completed</span> | |
| <div class="flex space-x-2"> | |
| <button class="p-2 rounded-lg bg-slate-800 hover:bg-slate-700"> | |
| <i data-feather="play" class="w-4 h-4"></i> | |
| </button> | |
| <button class="p-2 rounded-lg bg-slate-800 hover:bg-slate-700"> | |
| <i data-feather="edit" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- World Card 4 --> | |
| <div class="tool-card bg-dark"> | |
| <div class="world-preview rounded-t-xl bg-gradient-to-br from-purple-500 to-fuchsia-700"></div> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-lg mb-1">Neon Metropolis</h3> | |
| <p class="text-slate-400 text-sm mb-3">Futuristic cyberpunk city</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-xs bg-slate-800 px-2 py-1 rounded">Active</span> | |
| <div class="flex space-x-2"> | |
| <button class="p-2 rounded-lg bg-slate-800 hover:bg-slate-700"> | |
| <i data-feather="play" class="w-4 h-4"></i> | |
| </button> | |
| <button class="p-2 rounded-lg bg-slate-800 hover:bg-slate-700"> | |
| <i data-feather="edit" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- World Card 5 --> | |
| <div class="tool-card bg-dark"> | |
| <div class="world-preview rounded-t-xl bg-gradient-to-br from-amber-500 to-yellow-700"></div> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-lg mb-1">Desert Oasis</h3> | |
| <p class="text-slate-400 text-sm mb-3">Ancient ruins in the sand</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-xs bg-slate-800 px-2 py-1 rounded">Draft</span> | |
| <div class="flex space-x-2"> | |
| <button class="p-2 rounded-lg bg-slate-800 hover:bg-slate-700"> | |
| <i data-feather="play" class="w-4 h-4"></i> | |
| </button> | |
| <button class="p-2 rounded-lg bg-slate-800 hover:bg-slate-700"> | |
| <i data-feather="edit" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- World Card 6 --> | |
| <div class="tool-card bg-dark border-2 border-dashed border-slate-700 flex items-center justify-center"> | |
| <div class="text-center p-8"> | |
| <i data-feather="plus-circle" class="w-12 h-12 text-slate-500 mx-auto mb-3"></i> | |
| <h3 class="font-bold text-lg mb-1">New World</h3> | |
| <p class="text-slate-400 text-sm">Click to create a new world</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Tools Section --> | |
| <div class="floating-panel p-8"> | |
| <h2 class="text-2xl font-bold mb-6">World Creation Tools</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <div class="tool-card bg-dark p-6"> | |
| <div class="w-12 h-12 rounded-xl bg-gradient-to-br from-primary to-secondary flex items-center justify-center mb-4"> | |
| <i data-feather="mountain" class="text-white"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Terrain Editor</h3> | |
| <p class="text-slate-400 mb-4">Shape landscapes with intuitive tools</p> | |
| <button class="text-primary font-semibold flex items-center"> | |
| Open Editor | |
| <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i> | |
| </button> | |
| </div> | |
| <div class="tool-card bg-dark p-6"> | |
| <div class="w-12 h-12 rounded-xl bg-gradient-to-br from-secondary to-accent flex items-center justify-center mb-4"> | |
| <i data-feather="box" class="text-white"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Object Placer</h3> | |
| <p class="text-slate-400 mb-4">Add props, buildings, and entities</p> | |
| <button class="text-primary font-semibold flex items-center"> | |
| Open Editor | |
| <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i> | |
| </button> | |
| </div> | |
| <div class="tool-card bg-dark p-6"> | |
| <div class="w-12 h-12 rounded-xl bg-gradient-to-br from-accent to-pink-500 flex items-center justify-center mb-4"> | |
| <i data-feather="sun" class="text-white"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Environment Control</h3> | |
| <p class="text-slate-400 mb-4">Adjust lighting, weather, and time</p> | |
| <button class="text-primary font-semibold flex items-center"> | |
| Open Editor | |
| <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| <script> | |
| // Initialize Feather Icons | |
| feather.replace(); | |
| // Initialize Vanta.js Background | |
| VANTA.GLOBE({ | |
| el: "#vanta-bg", | |
| mouseControls: true, | |
| touchControls: true, | |
| gyroControls: false, | |
| minHeight: 200.00, | |
| minWidth: 200.00, | |
| scale: 1.00, | |
| scaleMobile: 1.00, | |
| color: 0x6366f1, | |
| color2: 0x8b5cf6, | |
| backgroundColor: 0x0f172a, | |
| size: 1.50, | |
| lineWidth: 1.00 | |
| }); | |
| </script> | |
| </body> | |
| </html> | |