Загрузка...
Шаблон дашборда для генератора AI-изображений. Полностраничный макет с Tailwind CSS, включает навигацию, настройки, ввод промпта и сетку изображений. Адаптивный дизайн.
<div class="flex xl:py-40 w-screen h-1000 pt-40 pb-40 items-center justify-center" data-element-locator="html > body:nth-of-type(1) > div:nth-of-type(2)">
<div class="flex flex-col overflow-hidden xl:bg-neutral-900/20 bg-neutral-900 w-full h-[700px] max-w-6xl max-h-[95vh] border-neutral-800 border rounded-xl shadow-2xl backdrop-blur-xl">
<!-- Mac Title Bar -->
<div class="flex border-neutral-700/50 border-b pt-3 pr-4 pb-3 pl-4 backdrop-blur items-center justify-between" style="background: rgba(40, 40, 40, 0.5);">
<div class="flex items-center gap-2">
<div class="flex items-center gap-2">
<div class="w-3 h-3 rounded-full" style="background: #505050;"></div>
<div class="w-3 h-3 rounded-full" style="background: #606060;"></div>
<div class="w-3 h-3 rounded-full" style="background: #707070;"></div>
</div>
</div>
<div class="flex items-center gap-2">
<button class="p-1 rounded hover:bg-neutral-700/50">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 text-neutral-400"><circle cx="12" cy="12" r="1" class=""></circle><circle cx="19" cy="12" r="1" class=""></circle><circle cx="5" cy="12" r="1" class=""></circle></svg>
</button>
</div>
</div>
<!-- App Content -->
<div class="flex-1 flex overflow-hidden">
<!-- Sidebar -->
<aside class="w-64 border-r border-neutral-800/50 flex flex-col" style="background: rgba(30, 30, 30, 0.8);">
<!-- Logo -->
<div class="p-4 border-b border-neutral-800/50">
<a href="#" class="inline-flex items-center justify-center bg-center w-[120px] h-[30px] bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/d3473923-ebc4-44bd-a2b8-bcf5197f648b_800w.png)] bg-cover rounded"></a>
<div class="text-xs text-neutral-500 mt-0.5 pl-4">AI Image Generator</div>
</div>
<!-- Navigation -->
<nav class="flex-1 overflow-y-auto">
<div class="px-3 pt-3">
<a class="flex items-center gap-2 rounded-md px-2 py-1.5 text-sm text-white" style="background: rgba(60, 60, 60, 0.7);">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4"><path d="M12 3v18" class=""></path><rect width="18" height="18" x="3" y="3" rx="2" class=""></rect><path d="M3 9h18" class=""></path><path d="M9 21V9" class=""></path></svg>
Generate
</a>
<a class="flex items-center gap-2 rounded-md px-2 py-1.5 text-sm text-neutral-300 hover:bg-neutral-800/50">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4"><rect width="18" height="18" x="3" y="3" rx="2" ry="2" class=""></rect><circle cx="9" cy="9" r="2" class=""></circle><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" class=""></path></svg>
Gallery
</a>
<a class="flex items-center gap-2 rounded-md px-2 py-1.5 text-sm text-neutral-300 hover:bg-neutral-800/50">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" class=""></path><circle cx="12" cy="7" r="4" class=""></circle></svg>
Community
</a>
<a class="flex items-center gap-2 rounded-md px-2 py-1.5 text-sm text-neutral-300 hover:bg-neutral-800/50">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4"><path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z" class=""></path></svg>
Explore
</a>
</div>
<div class="px-3 pt-4">
<div class="text-[11px] uppercase tracking-wide text-neutral-500 mb-2 px-2">Recent Projects</div>
<a class="flex items-center gap-2 rounded-md px-2 py-1.5 text-sm text-neutral-300 hover:bg-neutral-800/50">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" class=""></path><path d="M14 2v4a2 2 0 0 0 2 2h4" class=""></path></svg>
Cyberpunk City
</a>
<a class="flex items-center gap-2 rounded-md px-2 py-1.5 text-sm text-neutral-300 hover:bg-neutral-800/50">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" class=""></path><path d="M14 2v4a2 2 0 0 0 2 2h4" class=""></path></svg>
Fantasy Landscapes
</a>
<a class="flex items-center gap-2 rounded-md px-2 py-1.5 text-sm text-neutral-300 hover:bg-neutral-800/50">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" class=""></path><path d="M14 2v4a2 2 0 0 0 2 2h4" class=""></path></svg>
Portrait Studies
</a>
<a class="flex items-center gap-2 rounded-md px-2 py-1.5 text-sm text-neutral-300 hover:bg-neutral-800/50">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" class=""></path><path d="M14 2v4a2 2 0 0 0 2 2h4" class=""></path></svg>
Abstract Art
</a>
</div>
<div class="px-3 pt-4 pb-3">
<div class="text-[11px] uppercase tracking-wide text-neutral-500 mb-2 px-2">Resources</div>
<a class="flex items-center gap-2 rounded-md px-2 py-1.5 text-sm text-neutral-300 hover:bg-neutral-800/50">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z" class=""></path><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z" class=""></path></svg>
Documentation
</a>
<a class="flex items-center gap-2 rounded-md px-2 py-1.5 text-sm text-neutral-300 hover:bg-neutral-800/50">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z" class=""></path><circle cx="12" cy="12" r="3" class=""></circle></svg>
Settings
</a>
</div>
</nav>
<!-- Credits -->
<div class="border-t border-neutral-800/50 p-3">
<div class="flex items-center justify-between mb-2">
<span class="text-xs text-neutral-400">Credits</span>
<span class="text-xs font-medium text-white">250 / 500</span>
</div>
<div class="w-full h-1.5 bg-neutral-800 rounded-full overflow-hidden">
<div class="h-full bg-gradient-to-r from-indigo-500 to-purple-500" style="width: 50%;"></div>
</div>
<button class="mt-2 w-full rounded-md px-3 py-1.5 text-sm font-medium text-white hover:bg-neutral-700/70" style="background: #606060;">
Get More Credits
</button>
</div>
</aside>
<!-- Main Content -->
<main class="flex-1 flex flex-col xl:bg-neutral-950/80">
<!-- Header -->
<div class="flex items-center justify-between border-b border-neutral-800/50 px-5 py-3" style="background: rgba(30, 30, 30, 0.5);">
<div class="flex items-center gap-3">
<h1 class="text-lg font-semibold tracking-tight">Generate</h1>
</div>
<div class="flex items-center gap-2">
<button class="flex items-center gap-2 px-3 py-1.5 rounded-md text-sm text-neutral-300 hover:bg-neutral-800/50">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4"><polyline points="21 8 21 21 3 21 3 8" class=""></polyline><rect width="18" height="5" x="3" y="3" rx="2" class=""></rect><line x1="10" x2="10" y1="12" y2="17" class=""></line><line x1="14" x2="14" y1="12" y2="17" class=""></line></svg>
History
</button>
<button class="p-2 rounded-md hover:bg-neutral-800/50">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-5 w-5 text-neutral-300"><circle cx="12" cy="12" r="1" class=""></circle><circle cx="19" cy="12" r="1" class=""></circle><circle cx="5" cy="12" r="1" class=""></circle></svg>
</button>
</div>
</div>
<!-- Generated Images Grid -->
<div class="flex-1 overflow-y-auto p-5">
<div class="grid grid-cols-2 gap-4 mb-5">
<!-- Image Card -->
<div class="group relative aspect-square rounded-lg overflow-hidden border border-neutral-800/50 hover:border-neutral-700">
<img alt="Generated image 1" class="w-full h-full object-cover" src="https://images.unsplash.com/photo-1620641788421-7a1c342ea42e?q=80&w=800&h=800&auto=format&fit=crop" style="filter: grayscale(100%);">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/0 to-black/0 opacity-0 group-hover:opacity-100 transition-opacity">
<div class="absolute bottom-0 left-0 right-0 p-4">
<div class="flex items-center gap-2">
<button class="flex-1 rounded-md px-3 py-2 text-sm font-medium text-white hover:bg-white/20" style="background: rgba(255,255,255,0.1);">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 inline mr-1"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" class=""></path><polyline points="7 10 12 15 17 10" class=""></polyline><line x1="12" x2="12" y1="15" y2="3" class=""></line></svg>
Download
</button>
<button class="rounded-md px-3 py-2 text-sm font-medium text-white hover:bg-white/20" style="background: rgba(255,255,255,0.1);">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4"><path d="M7 10v12" class=""></path><path d="M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88Z" class=""></path></svg>
</button>
</div>
</div>
</div>
<div class="absolute top-2 right-2">
<span class="text-xs rounded-full border border-neutral-700 bg-black/60 backdrop-blur px-2 py-0.5 text-neutral-300">1/4</span>
</div>
</div>
<!-- Image Card -->
<div class="group relative aspect-square rounded-lg overflow-hidden border border-neutral-800/50 hover:border-neutral-700">
<img alt="Generated image 2" class="w-full h-full object-cover" src="https://images.unsplash.com/photo-1634017839464-5c339ebe3cb4?q=80&w=800&h=800&auto=format&fit=crop" style="filter: grayscale(100%);">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/0 to-black/0 opacity-0 group-hover:opacity-100 transition-opacity">
<div class="absolute bottom-0 left-0 right-0 p-4">
<div class="flex items-center gap-2">
<button class="flex-1 rounded-md px-3 py-2 text-sm font-medium text-white hover:bg-white/20" style="background: rgba(255,255,255,0.1);">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 inline mr-1"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" class=""></path><polyline points="7 10 12 15 17 10" class=""></polyline><line x1="12" x2="12" y1="15" y2="3" class=""></line></svg>
Download
</button>
<button class="rounded-md px-3 py-2 text-sm font-medium text-white hover:bg-white/20" style="background: rgba(255,255,255,0.1);">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4"><path d="M7 10v12" class=""></path><path d="M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88Z" class=""></path></svg>
</button>
</div>
</div>
</div>
<div class="absolute top-2 right-2">
<span class="text-xs rounded-full border border-neutral-700 bg-black/60 backdrop-blur px-2 py-0.5 text-neutral-300">2/4</span>
</div>
</div>
<!-- Image Card -->
<div class="group relative aspect-square rounded-lg overflow-hidden border border-neutral-800/50 hover:border-neutral-700">
<img alt="Generated image 3" class="w-full h-full object-cover" src="https://images.unsplash.com/photo-1635322966219-b75ed372eb01?q=80&w=800&h=800&auto=format&fit=crop" style="filter: grayscale(100%);">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/0 to-black/0 opacity-0 group-hover:opacity-100 transition-opacity">
<div class="absolute bottom-0 left-0 right-0 p-4">
<div class="flex items-center gap-2">
<button class="flex-1 rounded-md px-3 py-2 text-sm font-medium text-white hover:bg-white/20" style="background: rgba(255,255,255,0.1);">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 inline mr-1"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" class=""></path><polyline points="7 10 12 15 17 10" class=""></polyline><line x1="12" x2="12" y1="15" y2="3" class=""></line></svg>
Download
</button>
<button class="rounded-md px-3 py-2 text-sm font-medium text-white hover:bg-white/20" style="background: rgba(255,255,255,0.1);">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4"><path d="M7 10v12" class=""></path><path d="M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88Z" class=""></path></svg>
</button>
</div>
</div>
</div>
<div class="absolute top-2 right-2">
<span class="text-xs rounded-full border border-neutral-700 bg-black/60 backdrop-blur px-2 py-0.5 text-neutral-300">3/4</span>
</div>
</div>
<!-- Image Card -->
<div class="group relative aspect-square rounded-lg overflow-hidden border border-neutral-800/50 hover:border-neutral-700">
<img alt="Generated image 4" class="w-full h-full object-cover" src="https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=800&h=800&auto=format&fit=crop" style="filter: grayscale(100%);">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/0 to-black/0 opacity-0 group-hover:opacity-100 transition-opacity">
<div class="absolute bottom-0 left-0 right-0 p-4">
<div class="flex items-center gap-2">
<button class="flex-1 rounded-md px-3 py-2 text-sm font-medium text-white hover:bg-white/20" style="background: rgba(255,255,255,0.1);">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 inline mr-1"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" class=""></path><polyline points="7 10 12 15 17 10" class=""></polyline><line x1="12" x2="12" y1="15" y2="3" class=""></line></svg>
Download
</button>
<button class="rounded-md px-3 py-2 text-sm font-medium text-white hover:bg-white/20" style="background: rgba(255,255,255,0.1);">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4"><path d="M7 10v12" class=""></path><path d="M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88Z" class=""></path></svg>
</button>
</div>
</div>
</div>
<div class="absolute top-2 right-2">
<span class="text-xs rounded-full border border-neutral-700 bg-black/60 backdrop-blur px-2 py-0.5 text-neutral-300">4/4</span>
</div>
</div>
</div>
<!-- Prompt Used -->
<div class="rounded-lg border border-neutral-800/50 p-4" style="background: rgba(30, 30, 30, 0.5);">
<div class="flex items-start justify-between mb-2">
<div class="text-sm font-medium text-neutral-300">Prompt Used</div>
<button class="p-1 rounded hover:bg-neutral-800/50">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 text-neutral-400"><rect width="14" height="14" x="8" y="8" rx="2" ry="2" class=""></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" class=""></path></svg>
</button>
</div>
<p class="text-sm text-neutral-400 leading-relaxed">
Futuristic cyberpunk cityscape at night, neon lights reflecting on wet streets, holographic advertisements, flying cars, detailed architecture, cinematic lighting, 8k, highly detailed
</p>
<div class="flex flex-wrap gap-2 mt-3">
<span class="text-xs rounded-full border border-neutral-700 bg-neutral-800/40 px-2 py-1 text-neutral-300">Aspect: 1:1</span>
<span class="text-xs rounded-full border border-neutral-700 bg-neutral-800/40 px-2 py-1 text-neutral-300">Quality: High</span>
<span class="text-xs rounded-full border border-neutral-700 bg-neutral-800/40 px-2 py-1 text-neutral-300">Style: Photorealistic</span>
</div>
</div>
</div>
<!-- Prompt Input -->
<div class="border-t border-neutral-800/50 p-4" style="background: rgba(30, 30, 30, 0.5);">
<div class="rounded-lg border border-neutral-700 bg-neutral-800/40 focus-within:ring-2 focus-within:ring-indigo-500/40">
<div class="px-4 py-3">
<textarea class="w-full bg-transparent text-sm placeholder-neutral-500 focus:outline-none resize-none" rows="3" placeholder="Describe the image you want to generate..."></textarea>
</div>
<div class="flex items-center justify-between border-t border-neutral-700/50 px-4 py-3">
<div class="flex items-center gap-2">
<button class="flex items-center gap-1.5 px-2.5 py-1.5 rounded-md text-xs text-neutral-300 hover:bg-neutral-700/50 border border-neutral-700">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-3.5 w-3.5"><rect width="18" height="18" x="3" y="3" rx="2" ry="2" class=""></rect><circle cx="9" cy="9" r="2" class=""></circle><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" class=""></path></svg>
Upload Image
</button>
<button class="flex items-center gap-1.5 px-2.5 py-1.5 rounded-md text-xs text-neutral-300 hover:bg-neutral-700/50 border border-neutral-700">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-3.5 w-3.5"><path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z" class=""></path></svg>
Random Prompt
</button>
</div>
<button class="flex items-center gap-2 rounded-md px-4 py-2 text-sm font-medium text-white" style="background: #606060;">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" class=""></path><path d="M12 9v4" class=""></path><path d="M12 17h.01" class=""></path></svg>
Generate (4 credits)
</button>
</div>
</div>
</div>
</main>
<!-- Settings Panel -->
<aside class="w-80 border-l border-neutral-800/50 flex flex-col" style="background: rgba(30, 30, 30, 0.8);">
<div class="px-4 py-3 border-b border-neutral-800/50">
<div class="text-sm font-semibold tracking-tight">Settings</div>
</div>
<div class="flex-1 overflow-y-auto p-4 space-y-5">
<!-- Model -->
<div class="">
<label class="text-xs text-neutral-400 mb-2 block">Model</label>
<div class="space-y-2">
<button class="w-full text-left px-3 py-2 rounded-md text-sm text-white" style="background: rgba(60, 60, 60, 0.7);">
<div class="font-medium">AuraGen v5</div>
<div class="text-xs text-neutral-400 mt-0.5">Latest model, best quality</div>
</button>
<button class="w-full text-left px-3 py-2 rounded-md text-sm text-neutral-300 hover:bg-neutral-800/50 border border-neutral-800/50">
<div class="font-medium">AuraGen v4</div>
<div class="text-xs text-neutral-400 mt-0.5">Fast generation</div>
</button>
</div>
</div>
<!-- Aspect Ratio -->
<div class="">
<label class="text-xs text-neutral-400 mb-2 block">Aspect Ratio</label>
<div class="grid grid-cols-3 gap-2">
<button class="px-3 py-2 rounded-md text-sm text-white border border-neutral-600" style="background: rgba(60, 60, 60, 0.7);">1:1</button>
<button class="px-3 py-2 rounded-md text-sm text-neutral-300 hover:bg-neutral-800/50 border border-neutral-800/50">16:9</button>
<button class="px-3 py-2 rounded-md text-sm text-neutral-300 hover:bg-neutral-800/50 border border-neutral-800/50">9:16</button>
<button class="px-3 py-2 rounded-md text-sm text-neutral-300 hover:bg-neutral-800/50 border border-neutral-800/50">4:3</button>
<button class="px-3 py-2 rounded-md text-sm text-neutral-300 hover:bg-neutral-800/50 border border-neutral-800/50">3:4</button>
<button class="px-3 py-2 rounded-md text-sm text-neutral-300 hover:bg-neutral-800/50 border border-neutral-800/50">21:9</button>
</div>
</div>
<!-- Quality -->
<div class="">
<label class="text-xs text-neutral-400 mb-2 block">Quality</label>
<div class="space-y-2">
<button class="w-full text-left px-3 py-2 rounded-md text-sm text-neutral-300 hover:bg-neutral-800/50 border border-neutral-800/50">
<div class="flex items-center justify-between">
<span>Standard</span>
<span class="text-xs text-neutral-500">2 credits</span>
</div>
</button>
<button class="w-full text-left px-3 py-2 rounded-md text-sm text-white border border-neutral-600" style="background: rgba(60, 60, 60, 0.7);">
<div class="flex items-center justify-between">
<span>High</span>
<span class="text-xs text-neutral-500">4 credits</span>
</div>
</button>
<button class="w-full text-left px-3 py-2 rounded-md text-sm text-neutral-300 hover:bg-neutral-800/50 border border-neutral-800/50">
<div class="flex items-center justify-between">
<span>Ultra</span>
<span class="text-xs text-neutral-500">8 credits</span>
</div>
</button>
</div>
</div>
<!-- Style Preset -->
<div class="">
<label class="text-xs text-neutral-400 mb-2 block">Style Preset</label>
<div class="space-y-2">
<button class="w-full text-left px-3 py-2 rounded-md text-sm text-white border border-neutral-600" style="background: rgba(60, 60, 60, 0.7);">Photorealistic</button>
<button class="w-full text-left px-3 py-2 rounded-md text-sm text-neutral-300 hover:bg-neutral-800/50 border border-neutral-800/50">Artistic</button>
<button class="w-full text-left px-3 py-2 rounded-md text-sm text-neutral-300 hover:bg-neutral-800/50 border border-neutral-800/50">Anime</button>
<button class="w-full text-left px-3 py-2 rounded-md text-sm text-neutral-300 hover:bg-neutral-800/50 border border-neutral-800/50">Digital Art</button>
<button class="w-full text-left px-3 py-2 rounded-md text-sm text-neutral-300 hover:bg-neutral-800/50 border border-neutral-800/50">3D Render</button>
</div>
</div>
<!-- Number of Images -->
<div>
<label class="text-xs text-neutral-400 mb-2 block">Number of Images</label>
<div class="grid grid-cols-4 gap-2">
<button class="px-3 py-2 rounded-md text-sm text-neutral-300 hover:bg-neutral-800/50 border border-neutral-800/50">1</button>
<button class="px-3 py-2 rounded-md text-sm text-neutral-300 hover:bg-neutral-800/50 border border-neutral-800/50">2</button>
<button class="px-3 py-2 rounded-md text-sm text-white border border-neutral-600" style="background: rgba(60, 60, 60, 0.7);">4</button>
<button class="px-3 py-2 rounded-md text-sm text-neutral-300 hover:bg-neutral-800/50 border border-neutral-800/50">8</button>
</div>
</div>
<!-- Advanced -->
<div class="pt-2 border-t border-neutral-800/50">
<button class="flex items-center gap-2 text-sm text-neutral-300 hover:text-white">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4"><path d="m9 18 6-6-6-6" class=""></path></svg>
Advanced Settings
</button>
</div>
</div>
</aside>
</div>
</div>
</div>