Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>PixelForge Studio</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| </head> | |
| <body class="bg-gray-900 text-white overflow-hidden"> | |
| <div class="flex flex-col h-screen"> | |
| <header class="bg-gray-800 border-b border-gray-700"> | |
| <div class="flex items-center justify-between px-2 py-1"> | |
| <div class="flex items-center space-x-4"> | |
| <div class="relative menu-dropdown"> | |
| <button class="px-3 py-1 text-sm hover:bg-gray-700 rounded flex items-center space-x-1"> | |
| <span>File</span> | |
| <i data-feather="chevron-down" class="w-3 h-3"></i> | |
| </button> | |
| <div class="absolute top-full left-0 bg-gray-800 border border-gray-700 rounded shadow-lg hidden mt-1 z-50 min-w-[200px]"> | |
| <a href="#" class="block px-4 py-2 hover:bg-gray-700 text-sm">New</a> | |
| <a href="#" class="block px-4 py-2 hover:bg-gray-700 text-sm">Open</a> | |
| <a href="#" class="block px-4 py-2 hover:bg-gray-700 text-sm">Save</a> | |
| <a href="#" class="block px-4 py-2 hover:bg-gray-700 text-sm">Save As</a> | |
| <div class="border-t border-gray-700"></div> | |
| <a href="#" class="block px-4 py-2 hover:bg-gray-700 text-sm">Export</a> | |
| </div> | |
| </div> | |
| <div class="relative menu-dropdown"> | |
| <button class="px-3 py-1 text-sm hover:bg-gray-700 rounded flex items-center space-x-1"> | |
| <span>Edit</span> | |
| <i data-feather="chevron-down" class="w-3 h-3"></i> | |
| </button> | |
| <div class="absolute top-full left-0 bg-gray-800 border border-gray-700 rounded shadow-lg hidden mt-1 z-50 min-w-[200px]"> | |
| <a href="#" class="block px-4 py-2 hover:bg-gray-700 text-sm">Undo</a> | |
| <a href="#" class="block px-4 py-2 hover:bg-gray-700 text-sm">Redo</a> | |
| <div class="border-t border-gray-700"></div> | |
| <a href="#" class="block px-4 py-2 hover:bg-gray-700 text-sm">Cut</a> | |
| <a href="#" class="block px-4 py-2 hover:bg-gray-700 text-sm">Copy</a> | |
| <a href="#" class="block px-4 py-2 hover:bg-gray-700 text-sm">Paste</a> | |
| </div> | |
| </div> | |
| <div class="relative menu-dropdown"> | |
| <button class="px-3 py-1 text-sm hover:bg-gray-700 rounded flex items-center space-x-1"> | |
| <span>Image</span> | |
| <i data-feather="chevron-down" class="w-3 h-3"></i> | |
| </button> | |
| <div class="absolute top-full left-0 bg-gray-800 border border-gray-700 rounded shadow-lg hidden mt-1 z-50 min-w-[200px]"> | |
| <a href="#" class="block px-4 py-2 hover:bg-gray-700 text-sm">Adjustments</a> | |
| <a href="#" class="block px-4 py-2 hover:bg-gray-700 text-sm">Image Size</a> | |
| <a href="#" class="block px-4 py-2 hover:bg-gray-700 text-sm">Canvas Size</a> | |
| <a href="#" class="block px-4 py-2 hover:bg-gray-700 text-sm">Rotate</a> | |
| </div> | |
| </div> | |
| <div class="relative menu-dropdown"> | |
| <button class="px-3 py-1 text-sm hover:bg-gray-700 rounded flex items-center space-x-1"> | |
| <span>Layer</span> | |
| <i data-feather="chevron-down" class="w-3 h-3"></i> | |
| </button> | |
| <div class="absolute top-full left-0 bg-gray-800 border border-gray-700 rounded shadow-lg hidden mt-1 z-50 min-w-[200px]"> | |
| <a href="#" class="block px-4 py-2 hover:bg-gray-700 text-sm">New Layer</a> | |
| <a href="#" class="block px-4 py-2 hover:bg-gray-700 text-sm">Duplicate Layer</a> | |
| <a href="#" class="block px-4 py-2 hover:bg-gray-700 text-sm">Delete Layer</a> | |
| <div class="border-t border-gray-700"></div> | |
| <a href="#" class="block px-4 py-2 hover:bg-gray-700 text-sm">Merge Down</a> | |
| <a href="#" class="block px-4 py-2 hover:bg-gray-700 text-sm">Flatten Image</a> | |
| </div> | |
| </div> | |
| <div class="relative menu-dropdown"> | |
| <button class="px-3 py-1 text-sm hover:bg-gray-700 rounded flex items-center space-x-1"> | |
| <span>Filter</span> | |
| <i data-feather="chevron-down" class="w-3 h-3"></i> | |
| </button> | |
| <div class="absolute top-full left-0 bg-gray-800 border border-gray-700 rounded shadow-lg hidden mt-1 z-50 min-w-[200px]"> | |
| <a href="#" class="block px-4 py-2 hover:bg-gray-700 text-sm">Blur</a> | |
| <a href="#" class="block px-4 py-2 hover:bg-gray-700 text-sm">Sharpen</a> | |
| <a href="#" class="block px-4 py-2 hover:bg-gray-700 text-sm">Noise</a> | |
| <div class="border-t border-gray-700"></div> | |
| <a href="#" class="block px-4 py-2 hover:bg-gray-700 text-sm">Pixelate</a> | |
| <a href="#" class="block px-4 py-2 hover:bg-gray-700 text-sm">Distort</a> | |
| </div> | |
| </div> | |
| <div class="relative menu-dropdown"> | |
| <button class="px-3 py-1 text-sm hover:bg-gray-700 rounded flex items-center space-x-1"> | |
| <span>View</span> | |
| <i data-feather="chevron-down" class="w-3 h-3"></i> | |
| </button> | |
| <div class="absolute top-full left-0 bg-gray-800 border border-gray-700 rounded shadow-lg hidden mt-1 z-50 min-w-[200px]"> | |
| <a href="#" class="block px-4 py-2 hover:bg-gray-700 text-sm">Zoom In</a> | |
| <a href="#" class="block px-4 py-2 hover:bg-gray-700 text-sm">Zoom Out</a> | |
| <a href="#" class="block px-4 py-2 hover:bg-gray-700 text-sm">Fit to Screen</a> | |
| <a href="#" class="block px-4 py-2 hover:bg-gray-700 text-sm">Actual Size</a> | |
| </div> | |
| </div> | |
| <div class="relative menu-dropdown"> | |
| <button class="px-3 py-1 text-sm hover:bg-gray-700 rounded flex items-center space-x-1"> | |
| <span>Window</span> | |
| <i data-feather="chevron-down" class="w-3 h-3"></i> | |
| </button> | |
| <div class="absolute top-full left-0 bg-gray-800 border border-gray-700 rounded shadow-lg hidden mt-1 z-50 min-w-[200px]"> | |
| <a href="#" class="block px-4 py-2 hover:bg-gray-700 text-sm">Layers</a> | |
| <a href="#" class="block px-4 py-2 hover:bg-gray-700 text-sm">History</a> | |
| <a href="#" class="block px-4 py-2 hover:bg-gray-700 text-sm">Properties</a> | |
| <a href="#" class="block px-4 py-2 hover:bg-gray-700 text-sm">Tools</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <span class="text-sm text-gray-400">Untitled-1.psd @ 100%</span> | |
| <div class="flex items-center space-x-2"> | |
| <button class="p-1 hover:bg-gray-700 rounded"> | |
| <i data-feather="minimize-2" class="w-4 h-4"></i> | |
| </button> | |
| <button class="p-1 hover:bg-gray-700 rounded"> | |
| <i data-feather="square" class="w-4 h-4"></i> | |
| </button> | |
| <button class="p-1 hover:bg-gray-700 rounded"> | |
| <i data-feather="x" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Editor Area --> | |
| <div class="flex flex-1 overflow-hidden"> | |
| <!-- Left Toolbar --> | |
| <aside class="w-16 bg-gray-800 border-r border-gray-700 flex flex-col items-center py-2 space-y-1"> | |
| <button class="tool-btn p-3 hover:bg-gray-700 rounded" data-tool="move" title="Move Tool"> | |
| <i data-feather="move" class="w-5 h-5"></i> | |
| </button> | |
| <button class="tool-btn p-3 hover:bg-gray-700 rounded" data-tool="select" title="Marquee Select"> | |
| <i data-feather="square" class="w-5 h-5"></i> | |
| </button> | |
| <button class="tool-btn p-3 hover:bg-gray-700 rounded" data-tool="lasso" title="Lasso Tool"> | |
| <i data-feather="edit-3" class="w-5 h-5"></i> | |
| </button> | |
| <button class="tool-btn p-3 hover:bg-gray-700 rounded" data-tool="wand" title="Magic Wand"> | |
| <i data-feather="zap" class="w-5 h-5"></i> | |
| </button> | |
| <button class="tool-btn p-3 hover:bg-gray-700 rounded" data-tool="crop" title="Crop Tool"> | |
| <i data-feather="crop" class="w-5 h-5"></i> | |
| </button> | |
| <button class="tool-btn p-3 hover:bg-gray-700 rounded" data-tool="eyedropper" title="Eyedropper"> | |
| <i data-feather="eye" class="w-5 h-5"></i> | |
| </button> | |
| <button class="tool-btn p-3 hover:bg-gray-700 rounded" data-tool="brush" title="Brush Tool"> | |
| <i data-feather="edit-2" class="w-5 h-5"></i> | |
| </button> | |
| <button class="tool-btn p-3 hover:bg-gray-700 rounded" data-tool="eraser" title="Eraser"> | |
| <i data-feather="delete" class="w-5 h-5"></i> | |
| </button> | |
| <button class="tool-btn p-3 hover:bg-gray-700 rounded" data-tool="gradient" title="Gradient"> | |
| <i data-feather="trending-up" class="w-5 h-5"></i> | |
| </button> | |
| <button class="tool-btn p-3 hover:bg-gray-700 rounded" data-tool="text" title="Text Tool"> | |
| <i data-feather="type" class="w-5 h-5"></i> | |
| </button> | |
| <button class="tool-btn p-3 hover:bg-gray-700 rounded" data-tool="shape" title="Shape Tool"> | |
| <i data-feather="triangle" class="w-5 h-5"></i> | |
| </button> | |
| <button class="tool-btn p-3 hover:bg-gray-700 rounded" data-tool="hand" title="Hand Tool"> | |
| <i data-feather="move" class="w-5 h-5"></i> | |
| </button> | |
| <button class="tool-btn p-3 hover:bg-gray-700 rounded" data-tool="zoom" title="Zoom Tool"> | |
| <i data-feather="search" class="w-5 h-5"></i> | |
| </button> | |
| </aside> | |
| <main class="flex-1 bg-gray-600 relative overflow-hidden" id="canvas-container"> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <div class="bg-white shadow-2xl" id="main-canvas" style="width: 800px; height: 600px;"> | |
| <canvas id="photo-canvas" width="800" height="600" class="block"></canvas> | |
| </div> | |
| </div> | |
| <div class="absolute bottom-4 right-4 bg-gray-800 rounded-lg px-3 py-2 flex items-center space-x-2"> | |
| <button class="p-1 hover:bg-gray-700 rounded" id="zoom-out"> | |
| <i data-feather="minus" class="w-4 h-4"></i> | |
| </button> | |
| <span class="text-sm w-12 text-center" id="zoom-level">100%</span> | |
| <button class="p-1 hover:bg-gray-700 rounded" id="zoom-in"> | |
| <i data-feather="plus" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </main> | |
| <!-- Right Panels --> | |
| <div class="w-80 bg-gray-800 border-l border-gray-700 flex flex-col"> | |
| <div class="p-4 border-b border-gray-700"> | |
| <h3 class="text-sm font-semibold mb-3">Color</h3> | |
| <div class="flex space-x-2"> | |
| <div class="relative"> | |
| <div class="w-16 h-16 bg-black rounded cursor-pointer border-2 border-gray-600" id="fg-color"></div> | |
| <div class="absolute -bottom-1 -right-1 w-8 h-8 bg-white rounded border-2 border-gray-600 cursor-pointer" id="bg-color"></div> | |
| </div> | |
| <div class="flex-1 space-y-2"> | |
| <div class="flex items-center space-x-2"> | |
| <span class="text-xs text-gray-400 w-12">R:</span> | |
| <input type="range" min="0" max="255" class="flex-1" id="color-r"> | |
| <span class="text-xs w-8 text-right" id="r-val">0</span> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <span class="text-xs text-gray-400 w-12">G:</span> | |
| <input type="range" min="0" max="255" class="flex-1" id="color-g"> | |
| <span class="text-xs w-8 text-right" id="g-val">0</span> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <span class="text-xs text-gray-400 w-12">B:</span> | |
| <input type="range" min="0" max="255" class="flex-1" id="color-b"> | |
| <span class="text-xs w-8 text-right" id="b-val">0</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex-1 flex flex-col overflow-hidden"> | |
| <div class="p-4 border-b border-gray-700 flex items-center justify-between"> | |
| <h3 class="text-sm font-semibold">Layers</h3> | |
| <div class="flex space-x-1"> | |
| <button class="p-1 hover:bg-gray-700 rounded" title="New Layer"> | |
| <i data-feather="plus" class="w-4 h-4"></i> | |
| </button> | |
| <button class="p-1 hover:bg-gray-700 rounded" title="Delete Layer"> | |
| <i data-feather="trash-2" class="w-4 h-4"></i> | |
| </button> | |
| <button class="p-1 hover:bg-gray-700 rounded" title="Duplicate Layer"> | |
| <i data-feather="copy" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="flex-1 overflow-y-auto p-2" id="layers-list"> | |
| <div class="layer-item bg-gray-700 rounded p-2 mb-2 flex items-center space-x-2 cursor-pointer"> | |
| <i data-feather="eye" class="w-4 h-4"></i> | |
| <i data-feather="lock" class="w-4 h-4"></i> | |
| <div class="w-8 h-8 bg-white rounded"></div> | |
| <span class="flex-1 text-sm">Background</span> | |
| <span class="text-xs text-gray-400">100%</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4 border-t border-gray-700 max-h-64 overflow-y-auto"> | |
| <h3 class="text-sm font-semibold mb-3">Properties</h3> | |
| <div class="space-y-3"> | |
| <div> | |
| <label class="text-xs text-gray-400">Opacity</label> | |
| <div class="flex items-center space-x-2"> | |
| <input type="range" min="0" max="100" value="100" class="flex-1" id="opacity"> | |
| <span class="text-xs w-10 text-right" id="opacity-val">100%</span> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="text-xs text-gray-400">Fill</label> | |
| <div class="flex items-center space-x-2"> | |
| <input type="range" min="0" max="100" value="100" class="flex-1" id="fill"> | |
| <span class="text-xs w-10 text-right" id="fill-val">100%</span> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="text-xs text-gray-400">Blend Mode</label> | |
| <select class="w-full bg-gray-700 rounded px-2 py-1 text-sm"> | |
| <option>Normal</option> | |
| <option>Multiply</option> | |
| <option>Screen</option> | |
| <option>Overlay</option> | |
| <option>Soft Light</option> | |
| <option>Hard Light</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <footer class="bg-gray-800 border-t border-gray-700 px-4 py-1 flex items-center justify-between text-xs text-gray-400"> | |
| <div class="flex items-center space-x-4"> | |
| <span>800px × 600px</span> | |
| <span>RGB/8</span> | |
| <span id="cursor-position">X: 400, Y: 300</span> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <button class="px-2 py-1 hover:bg-gray-700 rounded">8-bit</button> | |
| <button class="px-2 py-1 hover:bg-gray-700 rounded">Proof Colors</button> | |
| <button class="px-2 py-1 hover:bg-gray-700 rounded">Pixel Aspect Ratio</button> | |
| </div> | |
| </footer> | |
| </div> | |
| <!-- Modal for new document --> | |
| <div id="new-doc-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50"> | |
| <div class="bg-gray-800 rounded-lg p-6 w-96"> | |
| <h2 class="text-xl font-semibold mb-4">New Document</h2> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="text-sm text-gray-400">Name</label> | |
| <input type="text" class="w-full bg-gray-700 rounded px-3 py-2" value="Untitled-1"> | |
| </div> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div> | |
| <label class="text-sm text-gray-400">Width</label> | |
| <input type="number" class="w-full bg-gray-700 rounded px-3 py-2" value="800"> | |
| </div> | |
| <div> | |
| <label class="text-sm text-gray-400">Height</label> | |
| <input type="number" class="w-full bg-gray-700 rounded px-3 py-2" value="600"> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="text-sm text-gray-400">Resolution</label> | |
| <input type="number" class="w-full bg-gray-700 rounded px-3 py-2" value="72"> | |
| </div> | |
| <div> | |
| <label class="text-sm text-gray-400">Color Mode</label> | |
| <select class="w-full bg-gray-700 rounded px-3 py-2"> | |
| <option>RGB Color</option> | |
| <option>CMYK Color</option> | |
| <option>Grayscale</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="flex justify-end space-x-2 mt-6"> | |
| <button class="px-4 py-2 bg-gray-700 rounded hover:bg-gray-600" onclick="closeModal()">Cancel</button> | |
| <button class="px-4 py-2 bg-blue-600 rounded hover:bg-blue-500">Create</button> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="script.js"></script> | |
| <script>feather.replace();</script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> | |