1 files changed, 46 insertions, 20 deletions

diff --git a/js/pixel-art/pixel/index.html b/js/pixel-art/pixel/index.html
index d4b690d..7e3df56 100644
--- a/js/pixel-art/pixel/index.html
+++ b/js/pixel-art/pixel/index.html
@@ -12,23 +12,39 @@
             overflow: hidden;
             background-color: teal;
         }
+
         button {
             padding: 0.5rem 0.75rem;
             font-size: 1rem;
             cursor: pointer;
             min-height: 2.75rem;
         }
+        
+        button.reset-btn {
+            cursor: pointer;
+            margin: 0;
+            padding: 0.25rem 0.5rem;
+            border: none;
+            background-color: tomato;
+            color: #fafafa;
+            min-height: 2rem;
+            font-size: 0.875rem;
+            border-radius: 0.25rem;
+            margin-top: 0.5rem;
+        }
+        
         #canvas {
             display: block;
         }
+        
         #palette {
             position: fixed;
             top: 0.625rem;
             right: 0.625rem;
             background-color: beige;
-            padding: 0.625rem;
+            padding: 0.5rem;
             border: 1px solid #ccc;
-            border-radius: 0.3125rem;
+            border-radius: 0.25rem;
             width: 10.625rem;
             transition: transform 0.3s ease-out;
             max-height: 90vh;
@@ -44,11 +60,11 @@
 
         #palette-toggle {
             position: fixed;
-            top: 0.625rem;
-            right: 0.625rem;
+            top: 1.025rem;
+            right: 0.025rem;
             background-color: beige;
             border: 1px solid #ccc;
-            border-radius: 0.3125rem 0 0 0.3125rem;
+            border-radius: 0.25rem 0 0 0.25rem;
             padding: 0.75rem;
             cursor: pointer;
             z-index: 1000;
@@ -65,7 +81,6 @@
             transform: translateX(-11.25rem);
         }
 
-        #palette label,
         #palette input,
         #palette button {
             display: block;
@@ -92,13 +107,20 @@
             display: flex;
             gap: 0.3125rem;
             margin-top: 0.625rem;
+            justify-content: space-between;
+            width: 100%;
         }
 
         .zoom-controls button {
             flex: 1;
-            padding: 0.5rem;
-            min-height: 2.75rem;
-            font-size: 1.125rem;
+            padding: 0.25rem;
+            height: 2rem;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 1rem;
+            min-height: unset;
+            width: unset;
         }
 
         .pan-controls {
@@ -116,20 +138,21 @@
         }
 
         .pan-controls button {
-            padding: 0.5rem;
-            width: 2.75rem;
-            height: 2.75rem;
+            padding: 0.25rem;
+            width: 2rem;
+            height: 2rem;
             display: flex;
             align-items: center;
             justify-content: center;
-            font-size: 1.125rem;
+            font-size: 1rem;
+            min-height: unset;
         }
 
         #centerViewBtn {
             margin-top: 0.625rem;
         }
 
-        @media (max-width: 48rem) {  /* 768px */
+        @media (max-width: 48rem) {
             #palette {
                 width: 12.5rem;
                 top: auto;
@@ -138,6 +161,7 @@
 
             #palette-toggle {
                 top: auto;
+                right: 0.625rem;
                 bottom: 0.625rem;
             }
 
@@ -153,15 +177,14 @@
     <div id="palette">
         <div style="display: flex; gap: 5px; margin-bottom: 10px;">
             <div style="flex: 1;">
-                <label for="gridWidth">W:</label>
-                <input type="number" id="gridWidth" value="16" min="1" style="width: 90%;">
+                <label for="gridWidth">Width:</label>
+                <input type="number" id="gridWidth" value="16" min="1" max="100" style="width: 90%;">
             </div>
             <div style="flex: 1;">
-                <label for="gridHeight">H:</label>
-                <input type="number" id="gridHeight" value="16" min="1" style="width: 90%;">
+                <label for="gridHeight">Height:</label>
+                <input type="number" id="gridHeight" value="16" min="1" max="100" style="width: 90%;">
             </div>
         </div>
-        <br>
         <label for="colorPicker">Select Color:</label>
         <input type="color" id="colorPicker" value="#000000">
         <div id="colorHistory" class="color-history"></div>
@@ -178,9 +201,12 @@
             <button id="panDownBtn">⬇️</button>
         </div>
         <button id="centerViewBtn">🎯 Center View</button>
+        <button id="newCanvasBtn">➕ New Canvas</button>
         <hr>
         <button id="exportBtn">Export as PNG</button>
-        <button id="resetBtn">Reset</button>
+        <button id="saveProjectBtn">Save Project</button>
+        <button id="loadProjectBtn">Load Project</button>
+        <button id="resetBtn" class="reset-btn">Reset</button>
     </div>
     <script src="app.js"></script>
 </body>