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>World Editor - 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> | |
| 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; | |
| } | |
| .editor-toolbar { | |
| backdrop-filter: blur(10px); | |
| background: rgba(30, 41, 59, 0.7); | |
| border-radius: 16px; | |
| border: 1px solid rgba(148, 163, 184, 0.2); | |
| } | |
| .property-panel { | |
| backdrop-filter: blur(15px); | |
| background: rgba(15, 23, 42, 0.85); | |
| border-radius: 20px; | |
| border: 1px solid rgba(148, 163, 184, 0.2); | |
| } | |
| .canvas-container { | |
| background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); | |
| border-radius: 20px; | |
| overflow: hidden; | |
| box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); | |
| } | |
| .tool-button { | |
| transition: all 0.2s ease; | |
| } | |
| .tool-button:hover { | |
| background: rgba(99, 102, 241, 0.2); | |
| } | |
| .tool-button.active { | |
| background: rgba(99, 102, 241, 0.3); | |
| border-left: 3px solid #6366f1; | |
| } | |
| .slider-container input[type="range"] { | |
| -webkit-appearance: none; | |
| width: 100%; | |
| height: 6px; | |
| border-radius: 3px; | |
| background: #334155; | |
| outline: none; | |
| } | |
| .slider-container input[type="range"]::-webkit-slider-thumb { | |
| -webkit-appearance: none; | |
| width: 18px; | |
| height: 18px; | |
| border-radius: 50%; | |
| background: #6366f1; | |
| cursor: pointer; | |
| } | |
| .color-picker { | |
| width: 30px; | |
| height: 30px; | |
| border-radius: 6px; | |
| cursor: pointer; | |
| border: 2px solid #334155; | |
| } | |
| .scrollbar-hidden::-webkit-scrollbar { | |
| display: none; | |
| } | |
| .scrollbar-hidden { | |
| -ms-overflow-style: none; | |
| scrollbar-width: none; | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen"> | |
| <!-- Header --> | |
| <header class="py-4 px-6 flex justify-between items-center bg-slate-900/50 backdrop-blur-md"> | |
| <div class="flex items-center space-x-4"> | |
| <a href="index.html" class="p-2 rounded-lg hover:bg-slate-800 transition-colors"> | |
| <i data-feather="arrow-left"></i> | |
| </a> | |
| <div> | |
| <h1 class="text-xl font-bold">Enchanted Forest</h1> | |
| <p class="text-sm text-slate-400">Editing Mode</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button class="px-4 py-2 rounded-lg bg-slate-800 hover:bg-slate-700 transition-colors"> | |
| <i data-feather="save" class="mr-2"></i>Save | |
| </button> | |
| <button class="px-4 py-2 rounded-lg bg-primary hover:bg-indigo-600 transition-colors"> | |
| <i data-feather="play" class="mr-2"></i>Publish | |
| </button> | |
| </div> | |
| </header> | |
| <!-- Main Editor Area --> | |
| <div class="flex h-[calc(100vh-73px)]"> | |
| <!-- Left Toolbar --> | |
| <div class="w-16 editor-toolbar m-4 flex flex-col items-center py-4 space-y-6"> | |
| <button class="tool-button p-3 rounded-lg active"> | |
| <i data-feather="move"></i> | |
| </button> | |
| <button class="tool-button p-3 rounded-lg"> | |
| <i data-feather="mountain"></i> | |
| </button> | |
| <button class="tool-button p-3 rounded-lg"> | |
| <i data-feather="box"></i> | |
| </button> | |
| <button class="tool-button p-3 rounded-lg"> | |
| <i data-feather="sun"></i> | |
| </button> | |
| <button class="tool-button p-3 rounded-lg"> | |
| <i data-feather="users"></i> | |
| </button> | |
| <div class="border-t border-slate-700 w-8 my-2"></div> | |
| <button class="tool-button p-3 rounded-lg"> | |
| <i data-feather="eye"></i> | |
| </button> | |
| <button class="tool-button p-3 rounded-lg"> | |
| <i data-feather="settings"></i> | |
| </button> | |
| </div> | |
| <!-- Canvas Area --> | |
| <div class="flex-1 flex flex-col m-4"> | |
| <div class="canvas-container flex-1 relative"> | |
| <!-- Simulated 3D Canvas --> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <div class="text-center"> | |
| <div class="w-64 h-64 mx-auto bg-gradient-to-br from-green-500 to-emerald-700 rounded-full mb-6 opacity-30"></div> | |
| <h2 class="text-2xl font-bold mb-2">3D World Canvas</h2> | |
| <p class="text-slate-400">Interactive world editing environment</p> | |
| </div> | |
| </div> | |
| <!-- Canvas Controls --> | |
| <div class="absolute bottom-6 left-6 flex space-x-3"> | |
| <button class="p-3 rounded-lg bg-slate-800/80 backdrop-blur-sm hover:bg-slate-700 transition-colors"> | |
| <i data-feather="zoom-in"></i> | |
| </button> | |
| <button class="p-3 rounded-lg bg-slate-800/80 backdrop-blur-sm hover:bg-slate-700 transition-colors"> | |
| <i data-feather="zoom-out"></i> | |
| </button> | |
| <button class="p-3 rounded-lg bg-slate-800/80 backdrop-blur-sm hover:bg-slate-700 transition-colors"> | |
| <i data-feather="rotate-cw"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Timeline/Bottom Panel --> | |
| <div class="editor-toolbar mt-4 p-4 flex items-center"> | |
| <div class="flex items-center space-x-4"> | |
| <button class="p-2 rounded-lg bg-slate-800 hover:bg-slate-700"> | |
| <i data-feather="skip-back"></i> | |
| </button> | |
| <button class="p-3 rounded-lg bg-primary hover:bg-indigo-600"> | |
| <i data-feather="play"></i> | |
| </button> | |
| <button class="p-2 rounded-lg bg-slate-800 hover:bg-slate-700"> | |
| <i data-feather="skip-forward"></i> | |
| </button> | |
| </div> | |
| <div class="flex-1 mx-6"> | |
| <div class="h-2 bg-slate-700 rounded-full overflow-hidden"> | |
| <div class="h-full bg-primary w-1/3"></div> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-2 text-sm"> | |
| <span>00:45</span> | |
| <span class="text-slate-500">/</span> | |
| <span class="text-slate-500">02:30</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right Property Panel --> | |
| <div class="w-80 property-panel m-4 p-6 overflow-y-auto scrollbar-hidden"> | |
| <h2 class="text-xl font-bold mb-6">Properties</h2> | |
| <!-- Object Properties --> | |
| <div class="mb-8"> | |
| <h3 class="font-semibold mb-4 flex items-center"> | |
| <i data-feather="box" class="mr-2 w-4 h-4"></i> | |
| Selected Object | |
| </h3> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-sm text-slate-400 mb-1">Name</label> | |
| <input type="text" value="Ancient Oak Tree" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 focus:outline-none focus:border-primary"> | |
| </div> | |
| <div> | |
| <label class="block text-sm text-slate-400 mb-1">Position</label> | |
| <div class="grid grid-cols-3 gap-2"> | |
| <div> | |
| <label class="text-xs text-slate-500">X</label> | |
| <input type="number" value="125.4" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-2 py-1 text-sm focus:outline-none focus:border-primary"> | |
| </div> | |
| <div> | |
| <label class="text-xs text-slate-500">Y</label> | |
| <input type="number" value="0" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-2 py-1 text-sm focus:outline-none focus:border-primary"> | |
| </div> | |
| <div> | |
| <label class="text-xs text-slate-500">Z</label> | |
| <input type="number" value="87.2" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-2 py-1 text-sm focus:outline-none focus:border-primary"> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm text-slate-400 mb-1">Scale</label> | |
| <div class="slider-container"> | |
| <input type="range" min="0" max="200" value="100" class="w-full"> | |
| </div> | |
| <div class="flex justify-between text-xs text-slate-500 mt-1"> | |
| <span>0%</span> | |
| <span>100%</span> | |
| <span>200%</span> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm text-slate-400 mb-1">Rotation</label> | |
| <div class="slider-container"> | |
| <input type="range" min="0" max="360" value="45" class="w-full"> | |
| </div> | |
| <div class="flex justify-between text-xs text-slate-500 mt-1"> | |
| <span>0°</span> | |
| <span>180°</span> | |
| <span>360°</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Material Properties --> | |
| <div class="mb-8"> | |
| <h3 class="font-semibold mb-4 flex items-center"> | |
| <i data-feather="layers" class="mr-2 w-4 h-4"></i> | |
| Material | |
| </h3> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-sm text-slate-400 mb-1">Color</label> | |
| <div class="flex space-x-2"> | |
| <div class="color-picker bg-gradient-to-br from-green-500 to-emerald-700"></div> | |
| <div class="color-picker bg-gradient-to-br from-blue-500 to-cyan-700"></div> | |
| <div class="color-picker bg-gradient-to-br from-red-500 to-orange-700"></div> | |
| <div class="color-picker bg-gradient-to-br from-purple-500 to-fuchsia-700"></div> | |
| <div class="color-picker bg-slate-700 flex items-center justify-center"> | |
| <i data-feather="plus" class="w-4 h-4"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm text-slate-400 mb-1">Roughness</label> | |
| <div class="slider-container"> | |
| <input type="range" min="0" max="100" value="30" class="w-full"> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm text-slate-400 mb-1">Metallic</label> | |
| <div class="slider-container"> | |
| <input type="range" min="0" max="100" value="10" class="w-full"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Lighting Properties --> | |
| <div> | |
| <h3 class="font-semibold mb-4 flex items-center"> | |
| <i data-feather="sun" class="mr-2 w-4 h-4"></i> | |
| Environment | |
| </h3> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-sm text-slate-400 mb-1">Ambient Light</label> | |
| <div class="slider-container"> | |
| <input type="range" min="0" max="100" value="50" class="w-full"> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm text-slate-400 mb-1">Time of Day</label> | |
| <div class="slider-container"> | |
| <input type="range" min="0" max="24" value="14" class="w-full"> | |
| </div> | |
| <div class="flex justify-between text-xs text-slate-500 mt-1"> | |
| <span>Midnight</span> | |
| <span>Noon</span> | |
| <span>Midnight</span> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm text-slate-400 mb-1">Weather</label> | |
| <select class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 focus:outline-none focus:border-primary"> | |
| <option>Sunny</option> | |
| <option>Cloudy</option> | |
| <option>Rainy</option> | |
| <option>Stormy</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Initialize Feather Icons | |
| feather.replace(); | |
| </script> | |
| </body> | |
| </html> | |