| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>PixelCraft Studio | AI Art Generator</title> |
| <link rel="stylesheet" href="style.css"> |
| <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="components/navbar.js"></script> |
| <script src="components/tab-manager.js"></script> |
| <script src="components/canvas-controls.js"></script> |
| </head> |
| <body class="bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100"> |
| <custom-navbar></custom-navbar> |
| |
| <main class="container mx-auto px-4 py-8"> |
| <div class="flex flex-col lg:flex-row gap-6"> |
| <!-- Tab Manager --> |
| <custom-tab-manager></custom-tab-manager> |
| |
| <!-- Main Canvas Area --> |
| <div class="flex-1"> |
| <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-4"> |
| <div class="flex justify-between items-center mb-4"> |
| <h2 class="text-xl font-bold">AI Art Canvas</h2> |
| <custom-canvas-controls></custom-canvas-controls> |
| </div> |
| |
| <div id="canvas-container" class="relative bg-gray-200 dark:bg-gray-700 rounded-lg overflow-hidden"> |
| <div id="shared-canvas" class="w-full h-96 flex items-center justify-center"> |
| <p class="text-gray-500 dark:text-gray-400">Your generated art will appear here</p> |
| </div> |
| </div> |
| |
| <div class="mt-4 grid grid-cols-1 md:grid-cols-2 gap-4"> |
| <div class="bg-gray-50 dark:bg-gray-700 p-4 rounded-lg"> |
| <h3 class="font-semibold mb-2">Prompt</h3> |
| <textarea |
| id="prompt-input" |
| class="w-full p-2 border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-800" |
| placeholder="Describe what you want to generate..." |
| rows="3" |
| ></textarea> |
| </div> |
| <div class="bg-gray-50 dark:bg-gray-700 p-4 rounded-lg"> |
| <h3 class="font-semibold mb-2">Settings</h3> |
| <div class="space-y-2"> |
| <div> |
| <label class="block text-sm">Style</label> |
| <select class="w-full p-2 border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-800"> |
| <option>Realistic</option> |
| <option>Digital Art</option> |
| <option>Painting</option> |
| <option>3D Render</option> |
| </select> |
| </div> |
| <div> |
| <label class="block text-sm">Resolution</label> |
| <select class="w-full p-2 border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-800"> |
| <option>512x512</option> |
| <option>768x768</option> |
| <option>1024x1024</option> |
| </select> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="mt-4 flex justify-end"> |
| <button id="generate-btn" class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-2 rounded-lg flex items-center gap-2"> |
| <i data-feather="zap"></i> |
| Generate Art |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </main> |
|
|
| <script src="script.js"></script> |
| <script> |
| feather.replace(); |
| </script> |
| </body> |
| </html> |
