Spaces:

Yukkkop
/

pixelforge-studio

Running

App Files Files Community

Yukkkop commited on Oct 30

Commit

a413231

verified ·

1 Parent(s): 1dacea4

Refine

Browse files

Files changed (5) hide show

README.md +8 -5
components/navbar.js +64 -0
index.html +324 -18
script.js +489 -0
style.css +253 -18

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Pixelforge Studio
-emoji: 🔥
-colorFrom: blue
-colorTo: yellow
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: PixelForge Studio 🎨
+colorFrom: purple
+colorTo: blue
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/navbar.js ADDED Viewed

	@@ -0,0 +1,64 @@

+// Navigation Bar Component
+class CustomNavbar extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        .navbar {
+          background: #1f2937;
+          padding: 1rem 2rem;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          border-bottom: 1px solid #374151;
+        }
+        .navbar-brand {
+          font-size: 1.5rem;
+          font-weight: bold;
+          color: #fff;
+          text-decoration: none;
+          display: flex;
+          align-items: center;
+          gap: 0.5rem;
+        }
+        .navbar-menu {
+          display: flex;
+          gap: 1rem;
+          list-style: none;
+          margin: 0;
+          padding: 0;
+        }
+        .navbar-menu a {
+          color: #9ca3af;
+          text-decoration: none;
+          padding: 0.5rem 1rem;
+          border-radius: 0.375rem;
+          transition: all 0.2s;
+        }
+        .navbar-menu a:hover {
+          background: #374151;
+          color: #fff;
+        }
+      </style>
+      <nav class="navbar">
+        <a href="#" class="navbar-brand">
+          🎨 PixelForge Studio
+        </a>
+        <ul class="navbar-menu">
+          <li><a href="#file">File</a></li>
+          <li><a href="#edit">Edit</a></li>
+          <li><a href="#image">Image</a></li>
+          <li><a href="#layer">Layer</a></li>
+          <li><a href="#filter">Filter</a></li>
+          <li><a href="#view">View</a></li>
+        </ul>
+      </nav>
+    `;
+  }
+}
+customElements.define('custom-navbar', CustomNavbar);

index.html CHANGED Viewed

@@ -1,19 +1,325 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
+<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>

script.js ADDED Viewed

	@@ -0,0 +1,489 @@

+// PixelForge Studio - Main JavaScript
+// Canvas and context
+let canvas = document.getElementById('photo-canvas');
+let ctx = canvas.getContext('2d');
+let isDrawing = false;
+let currentTool = 'brush';
+let currentColor = '#000000';
+let brushSize = 5;
+let zoomLevel = 1;
+let history = [];
+let historyStep = -1;
+let layers = [];
+let activeLayer = 0;
+// Initialize canvas with white background
+function initCanvas() {
+    ctx.fillStyle = 'white';
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+    saveHistory();
+}
+// Tool selection
+document.querySelectorAll('.tool-btn').forEach(btn => {
+    btn.addEventListener('click', function() {
+        document.querySelectorAll('.tool-btn').forEach(b => b.classList.remove('active'));
+        this.classList.add('active');
+        currentTool = this.dataset.tool;
+        updateCursor();
+    });
+});
+// Update cursor based on tool
+function updateCursor() {
+    switch(currentTool) {
+        case 'brush':
+        case 'eraser':
+            canvas.style.cursor = 'crosshair';
+            break;
+        case 'move':
+            canvas.style.cursor = 'move';
+            break;
+        case 'eyedropper':
+            canvas.style.cursor = 'copy';
+            break;
+        case 'text':
+            canvas.style.cursor = 'text';
+            break;
+        case 'zoom':
+            canvas.style.cursor = 'zoom-in';
+            break;
+        default:
+            canvas.style.cursor = 'default';
+    }
+}
+// Drawing functions
+canvas.addEventListener('mousedown', startDrawing);
+canvas.addEventListener('mousemove', draw);
+canvas.addEventListener('mouseup', stopDrawing);
+canvas.addEventListener('mouseout', stopDrawing);
+function startDrawing(e) {
+    if (currentTool === 'brush' || currentTool === 'eraser') {
+        isDrawing = true;
+        const rect = canvas.getBoundingClientRect();
+        const x = e.clientX - rect.left;
+        const y = e.clientY - rect.top;
+        ctx.beginPath();
+        ctx.moveTo(x, y);
+    }
+}
+function draw(e) {
+    if (!isDrawing) return;
+    const rect = canvas.getBoundingClientRect();
+    const x = e.clientX - rect.left;
+    const y = e.clientY - rect.top;
+    if (currentTool === 'brush') {
+        ctx.globalCompositeOperation = 'source-over';
+        ctx.strokeStyle = currentColor;
+        ctx.lineWidth = brushSize;
+        ctx.lineCap = 'round';
+        ctx.lineJoin = 'round';
+        ctx.lineTo(x, y);
+        ctx.stroke();
+        ctx.beginPath();
+        ctx.moveTo(x, y);
+    } else if (currentTool === 'eraser') {
+        ctx.globalCompositeOperation = 'destination-out';
+        ctx.lineWidth = brushSize * 2;
+        ctx.lineCap = 'round';
+        ctx.lineJoin = 'round';
+        ctx.lineTo(x, y);
+        ctx.stroke();
+        ctx.beginPath();
+        ctx.moveTo(x, y);
+    }
+    updateCursorPosition(e);
+}
+function stopDrawing() {
+    if (isDrawing) {
+        isDrawing = false;
+        ctx.beginPath();
+        saveHistory();
+    }
+}
+// Color picker functionality
+let rSlider = document.getElementById('color-r');
+let gSlider = document.getElementById('color-g');
+let bSlider = document.getElementById('color-b');
+let rVal = document.getElementById('r-val');
+let gVal = document.getElementById('g-val');
+let bVal = document.getElementById('b-val');
+let fgColor = document.getElementById('fg-color');
+function updateColor() {
+    const r = rSlider.value;
+    const g = gSlider.value;
+    const b = bSlider.value;
+    currentColor = `rgb(${r}, ${g}, ${b})`;
+    fgColor.style.backgroundColor = currentColor;
+    rVal.textContent = r;
+    gVal.textContent = g;
+    bVal.textContent = b;
+}
+rSlider.addEventListener('input', updateColor);
+gSlider.addEventListener('input', updateColor);
+bSlider.addEventListener('input', updateColor);
+// Opacity control
+let opacitySlider = document.getElementById('opacity');
+let opacityVal = document.getElementById('opacity-val');
+opacitySlider.addEventListener('input', function() {
+    ctx.globalAlpha = this.value / 100;
+    opacityVal.textContent = this.value + '%';
+});
+// Zoom controls
+document.getElementById('zoom-in').addEventListener('click', function() {
+    if (zoomLevel < 3) {
+        zoomLevel += 0.25;
+        updateZoom();
+    }
+});
+document.getElementById('zoom-out').addEventListener('click', function() {
+    if (zoomLevel > 0.25) {
+        zoomLevel -= 0.25;
+        updateZoom();
+    }
+});
+function updateZoom() {
+    let mainCanvas = document.getElementById('main-canvas');
+    mainCanvas.style.transform = `scale(${zoomLevel})`;
+    document.getElementById('zoom-level').textContent = Math.round(zoomLevel * 100) + '%';
+}
+// History management
+function saveHistory() {
+    historyStep++;
+    if (historyStep < history.length) {
+        history.length = historyStep;
+    }
+    history.push(canvas.toDataURL());
+}
+function undo() {
+    if (historyStep > 0) {
+        historyStep--;
+        restoreCanvas();
+    }
+}
+function redo() {
+    if (historyStep < history.length - 1) {
+        historyStep++;
+        restoreCanvas();
+    }
+}
+function restoreCanvas() {
+    let img = new Image();
+    img.src = history[historyStep];
+    img.onload = function() {
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        ctx.drawImage(img, 0, 0);
+    };
+}
+// Keyboard shortcuts
+document.addEventListener('keydown', function(e) {
+    if (e.ctrlKey || e.metaKey) {
+        switch(e.key) {
+            case 'z':
+                e.preventDefault();
+                undo();
+                break;
+            case 'y':
+                e.preventDefault();
+                redo();
+                break;
+            case 's':
+                e.preventDefault();
+                saveImage();
+                break;
+            case 'o':
+                e.preventDefault();
+                openImage();
+                break;
+            case 'n':
+                e.preventDefault();
+                document.getElementById('new-doc-modal').classList.remove('hidden');
+                break;
+        }
+    }
+    // Tool shortcuts
+    switch(e.key) {
+        case 'b':
+            document.querySelector('[data-tool="brush"]').click();
+            break;
+        case 'e':
+            document.querySelector('[data-tool="eraser"]').click();
+            break;
+        case 'm':
+            document.querySelector('[data-tool="move"]').click();
+            break;
+        case 't':
+            document.querySelector('[data-tool="text"]').click();
+            break;
+        case 'c':
+            document.querySelector('[data-tool="crop"]').click();
+            break;
+        case 'i':
+            document.querySelector('[data-tool="eyedropper"]').click();
+            break;
+        case 'w':
+            document.querySelector('[data-tool="wand"]').click();
+            break;
+        case 'g':
+            document.querySelector('[data-tool="gradient"]').click();
+            break;
+        case 'z':
+            if (!e.ctrlKey && !e.metaKey) {
+                document.querySelector('[data-tool="zoom"]').click();
+            }
+            break;
+    }
+});
+// Image save and load
+function saveImage() {
+    const link = document.createElement('a');
+    link.download = 'pixelforge-image.png';
+    link.href = canvas.toDataURL();
+    link.click();
+}
+function openImage() {
+    const input = document.createElement('input');
+    input.type = 'file';
+    input.accept = 'image/*';
+    input.onchange = function(e) {
+        const file = e.target.files[0];
+        const reader = new FileReader();
+        reader.onload = function(event) {
+            const img = new Image();
+            img.onload = function() {
+                canvas.width = img.width;
+                canvas.height = img.height;
+                ctx.drawImage(img, 0, 0);
+                saveHistory();
+            };
+            img.src = event.target.result;
+        };
+        reader.readAsDataURL(file);
+    };
+    input.click();
+}
+// Update cursor position
+function updateCursorPosition(e) {
+    const rect = canvas.getBoundingClientRect();
+    const x = Math.round(e.clientX - rect.left);
+    const y = Math.round(e.clientY - rect.top);
+    document.getElementById('cursor-position').textContent = `X: ${x}, Y: ${y}`;
+}
+canvas.addEventListener('mousemove', updateCursorPosition);
+// Layer management
+function addLayer() {
+    const layersList = document.getElementById('layers-list');
+    const layerCount = layersList.children.length;
+    const layerItem = document.createElement('div');
+    layerItem.className = 'layer-item bg-gray-700 rounded p-2 mb-2 flex items-center space-x-2 cursor-pointer';
+    layerItem.innerHTML = `
+        <i data-feather="eye" class="w-4 h-4"></i>
+        <i data-feather="unlock" class="w-4 h-4"></i>
+        <div class="w-8 h-8 bg-gray-600 rounded"></div>
+        <span class="flex-1 text-sm">Layer ${layerCount}</span>
+        <span class="text-xs text-gray-400">100%</span>
+    `;
+    layersList.insertBefore(layerItem, layersList.firstChild);
+    feather.replace();
+    // Add click handler for layer selection
+    layerItem.addEventListener('click', function() {
+        document.querySelectorAll('.layer-item').forEach(item => {
+            item.classList.remove('active');
+        });
+        this.classList.add('active');
+        activeLayer = layerCount;
+    });
+}
+// Modal functions
+function closeModal() {
+    document.getElementById('new-doc-modal').classList.add('hidden');
+}
+// Fill slider
+document.getElementById('fill').addEventListener('input', function() {
+    document.getElementById('fill-val').textContent = this.value + '%';
+});
+// Eyedropper tool
+canvas.addEventListener('click', function(e) {
+    if (currentTool === 'eyedropper') {
+        const rect = canvas.getBoundingClientRect();
+        const x = e.clientX - rect.left;
+        const y = e.clientY - rect.top;
+        const pixel = ctx.getImageData(x, y, 1, 1).data;
+        rSlider.value = pixel[0];
+        gSlider.value = pixel[1];
+        bSlider.value = pixel[2];
+        updateColor();
+    }
+});
+// Text tool
+canvas.addEventListener('click', function(e) {
+    if (currentTool === 'text') {
+        const rect = canvas.getBoundingClientRect();
+        const x = e.clientX - rect.left;
+        const y = e.clientY - rect.top;
+        const text = prompt('Enter text:');
+        if (text) {
+            ctx.font = '20px Arial';
+            ctx.fillStyle = currentColor;
+            ctx.fillText(text, x, y);
+            saveHistory();
+        }
+    }
+});
+// Initialize
+initCanvas();
+document.querySelector('[data-tool="brush"]').classList.add('active');
+// Add initial layer
+layers.push({ name: 'Background', visible: true, opacity: 1 });
+// Drag and drop support
+document.body.addEventListener('dragover', function(e) {
+    e.preventDefault();
+    document.body.classList.add('dragover');
+});
+document.body.addEventListener('dragleave', function() {
+    document.body.classList.remove('dragover');
+});
+document.body.addEventListener('drop', function(e) {
+    e.preventDefault();
+    document.body.classList.remove('dragover');
+    const file = e.dataTransfer.files[0];
+    if (file && file.type.startsWith('image/')) {
+        const reader = new FileReader();
+        reader.onload = function(event) {
+            const img = new Image();
+            img.onload = function() {
+                canvas.width = img.width;
+                canvas.height = img.height;
+                ctx.drawImage(img, 0, 0);
+                saveHistory();
+            };
+            img.src = event.target.result;
+        };
+        reader.readAsDataURL(file);
+    }
+});
+// Filter functions
+function applyBlur() {
+    ctx.filter = 'blur(5px)';
+    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+    ctx.putImageData(imageData, 0, 0);
+    ctx.filter = 'none';
+    saveHistory();
+}
+function applyGrayscale() {
+    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+    const data = imageData.data;
+    for (let i = 0; i < data.length; i += 4) {
+        const gray = data[i] * 0.299 + data[i + 1] * 0.587 + data[i + 2] * 0.114;
+        data[i] = gray;
+        data[i + 1] = gray;
+        data[i + 2] = gray;
+    }
+    ctx.putImageData(imageData, 0, 0);
+    saveHistory();
+}
+function applyInvert() {
+    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+    const data = imageData.data;
+    for (let i = 0; i < data.length; i += 4) {
+        data[i] = 255 - data[i];
+        data[i + 1] = 255 - data[i + 1];
+        data[i + 2] = 255 - data[i + 2];
+    }
+    ctx.putImageData(imageData, 0, 0);
+    saveHistory();
+}
+// Brush size control (mouse wheel)
+canvas.addEventListener('wheel', function(e) {
+    if (e.ctrlKey) {
+        e.preventDefault();
+        if (e.deltaY < 0) {
+            brushSize = Math.min(brushSize + 1, 50);
+        } else {
+            brushSize = Math.max(brushSize - 1, 1);
+        }
+        console.log('Brush size:', brushSize);
+    }
+});
+// Touch support for mobile devices
+let touchDrawing = false;
+canvas.addEventListener('touchstart', function(e) {
+    if (e.touches.length === 1) {
+        const touch = e.touches[0];
+        const mouseEvent = new MouseEvent('mousedown', {
+            clientX: touch.clientX,
+            clientY: touch.clientY
+        });
+        canvas.dispatchEvent(mouseEvent);
+        touchDrawing = true;
+    }
+});
+canvas.addEventListener('touchmove', function(e) {
+    if (touchDrawing && e.touches.length === 1) {
+        e.preventDefault();
+        const touch = e.touches[0];
+        const mouseEvent = new MouseEvent('mousemove', {
+            clientX: touch.clientX,
+            clientY: touch.clientY
+        });
+        canvas.dispatchEvent(mouseEvent);
+    }
+});
+canvas.addEventListener('touchend', function(e) {
+    const mouseEvent = new MouseEvent('mouseup', {});
+    canvas.dispatchEvent(mouseEvent);
+    touchDrawing = false;
+});

style.css CHANGED Viewed

@@ -1,28 +1,263 @@
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
-h1 {
-	font-size: 16px;
-	margin-top: 0;
 }
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
 }
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
 }
-.card p:last-child {
-	margin-bottom: 0;
 }

+/* Custom styles for PixelForge Studio */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
 body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+    user-select: none;
+}
+/* Dropdown menu styles */
+.menu-dropdown:hover .absolute {
+    display: block !important;
+}
+/* Canvas styles */
+#photo-canvas {
+    cursor: crosshair;
+}
+#main-canvas {
+    transform-origin: center center;
+    transition: transform 0.3s ease;
+}
+/* Tool button active state */
+.tool-btn.active {
+    background-color: #3b82f6;
+    color: white;
+}
+/* Layer item styles */
+.layer-item.active {
+    background-color: #3b82f6;
+}
+.layer-item:hover {
+    background-color: #374151;
+}
+/* Custom scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+::-webkit-scrollbar-track {
+    background: #1f2937;
+}
+::-webkit-scrollbar-thumb {
+    background: #4b5563;
+    border-radius: 4px;
+}
+::-webkit-scrollbar-thumb:hover {
+    background: #6b7280;
+}
+/* Color picker styles */
+#fg-color {
+    position: relative;
+    z-index: 2;
+}
+#bg-color {
+    position: absolute;
+    bottom: -8px;
+    right: -8px;
+    z-index: 1;
+}
+/* Panel transitions */
+.panel {
+    transition: all 0.3s ease;
+}
+/* Tooltips */
+[title] {
+    position: relative;
+}
+[title]:hover::after {
+    content: attr(title);
+    position: absolute;
+    bottom: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    background-color: #1f2937;
+    color: white;
+    padding: 4px 8px;
+    border-radius: 4px;
+    font-size: 12px;
+    white-space: nowrap;
+    z-index: 1000;
+    pointer-events: none;
+    margin-bottom: 4px;
+}
+/* Zoom controls */
+#zoom-controls button {
+    transition: all 0.2s ease;
+}
+#zoom-controls button:hover {
+    transform: scale(1.1);
 }
+/* Canvas grid */
+.canvas-grid {
+    background-image:
+        linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px);
+    background-size: 20px 20px;
+    background-position: -1px -1px;
 }
+/* Loading spinner */
+.loading-spinner {
+    border: 3px solid #1f2937;
+    border-top: 3px solid #3b82f6;
+    border-radius: 50%;
+    width: 40px;
+    height: 40px;
+    animation: spin 1s linear infinite;
 }
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
 }
+/* Modal backdrop */
+.modal-backdrop {
+    backdrop-filter: blur(4px);
 }
+/* Layer thumbnail */
+.layer-thumbnail {
+    image-rendering: pixelated;
+    image-rendering: -moz-crisp-edges;
+    image-rendering: crisp-edges;
+}
+/* Selection box */
+.selection-box {
+    border: 1px dashed #3b82f6;
+    background-color: rgba(59, 130, 246, 0.1);
+    position: absolute;
+    pointer-events: none;
+}
+/* Transform handles */
+.transform-handle {
+    width: 8px;
+    height: 8px;
+    background-color: white;
+    border: 1px solid #3b82f6;
+    position: absolute;
+}
+/* Responsive adjustments */
+@media (max-width: 1024px) {
+    .w-80 {
+        width: 16rem;
+    }
+}
+@media (max-width: 768px) {
+    .w-80 {
+        display: none;
+    }
+}
+/* File upload area */
+.file-upload-area {
+    border: 2px dashed #4b5563;
+    border-radius: 8px;
+    padding: 2rem;
+    text-align: center;
+    transition: all 0.3s ease;
+}
+.file-upload-area.dragover {
+    border-color: #3b82f6;
+    background-color: rgba(59, 130, 246, 0.1);
+}
+/* History panel */
+.history-item {
+    padding: 0.5rem;
+    cursor: pointer;
+    border-radius: 4px;
+    transition: background-color 0.2s ease;
+}
+.history-item:hover {
+    background-color: #374151;
+}
+.history-item.active {
+    background-color: #3b82f6;
+}
+/* Filter preview */
+.filter-preview {
+    width: 60px;
+    height: 60px;
+    border-radius: 4px;
+    overflow: hidden;
+    cursor: pointer;
+    transition: transform 0.2s ease;
+}
+.filter-preview:hover {
+    transform: scale(1.1);
+}
+/* Tool options panel */
+.tool-options {
+    background-color: #1f2937;
+    border-radius: 4px;
+    padding: 1rem;
+    margin-top: 1rem;
+}
+/* Brush preview */
+.brush-preview {
+    width: 40px;
+    height: 40px;
+    border: 1px solid #4b5563;
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.brush-preview-circle {
+    border-radius: 50%;
+    background-color: currentColor;
+}
+/* Animation classes */
+.fade-in {
+    animation: fadeIn 0.3s ease-in;
+}
+@keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+.slide-in {
+    animation: slideIn 0.3s ease-out;
+}
+@keyframes slideIn {
+    from { transform: translateY(-10px); opacity: 0; }
+    to { transform: translateY(0); opacity: 1; }
+}