2 files changed, 23 insertions, 14 deletions

diff --git a/js/pixel-art/pixel/app.js b/js/pixel-art/pixel/app.js
index 97c3a1c..d2eddee 100644
--- a/js/pixel-art/pixel/app.js
+++ b/js/pixel-art/pixel/app.js
@@ -5,7 +5,16 @@ const defaultGridHeight = 16;
 let gridWidth = defaultGridWidth;
 let gridHeight = defaultGridHeight;
 let cellSize = 16;
-let colorHistory = [];
+let colorHistory = [
+    '#000000',
+    '#ae8ce2',
+    '#2d5d9e',
+    '#43bef2',
+    '#99b213',
+    '#e5b42e',
+    '#c00f68',
+    '#ffffff'
+];
 let currentColor = '#000000';
 let grid = Array(gridWidth).fill().map(() => Array(gridHeight).fill(null));
 let offsetX = 0;
@@ -37,8 +46,8 @@ document.getElementById('resetBtn').addEventListener('click', handleReset);
 document.getElementById('exportBtn').addEventListener('click', exportToPNG);
 window.addEventListener('keydown', handlePan);
 paletteToggle.addEventListener('click', togglePalette);
-document.getElementById('zoomInBtn').addEventListener('click', () => handleZoom(1.5));
-document.getElementById('zoomOutBtn').addEventListener('click', () => handleZoom(0.666));
+document.getElementById('zoomInBtn').addEventListener('click', () => handleZoom(1.25));
+document.getElementById('zoomOutBtn').addEventListener('click', () => handleZoom(0.75));
 document.getElementById('panUpBtn').addEventListener('click', () => handlePanButton('up'));
 document.getElementById('panDownBtn').addEventListener('click', () => handlePanButton('down'));
 document.getElementById('panLeftBtn').addEventListener('click', () => handlePanButton('left'));
@@ -49,6 +58,7 @@ document.getElementById('newCanvasBtn').addEventListener('click', addNewCanvas);
 
 resizeCanvas();
 loadFromLocalStorage();
+renderColorHistory();
 
 
 function addNewCanvas() {
@@ -165,17 +175,14 @@ function handleReset() {
         colorHistory = [];
         renderColorHistory();
         
-        // Clear canvases and add a fresh one
         canvases = [];
         addNewCanvas();
         
-        // Enable inputs for the fresh canvas
         document.getElementById('gridWidth').disabled = false;
         document.getElementById('gridHeight').disabled = false;
         document.getElementById('gridWidth').value = gridWidth;
         document.getElementById('gridHeight').value = gridHeight;
         
-        // Clear localStorage
         localStorage.removeItem('pixelArtConfig');
         
         alert("Reset complete. You can now adjust the grid size until you place your first pixel.");
@@ -198,7 +205,7 @@ function updateGridSize() {
     const newHeight = parseInt(document.getElementById('gridHeight').value);
     
     // Validate input
-    if (newWidth <= 0 || newHeight <= 0) return;
+    if (newWidth <= 0 || newHeight <= 0 || newWidth > 100 || newHeight > 100) return;
     
     gridWidth = newWidth;
     gridHeight = newHeight;
@@ -282,6 +289,7 @@ function loadFromLocalStorage() {
     
     centerGrid();
     drawGrid();
+    renderColorHistory();
 }
 
 function exportToPNG() {
diff --git a/js/pixel-art/pixel/index.html b/js/pixel-art/pixel/index.html
index 74c0216..eea03b1 100644
--- a/js/pixel-art/pixel/index.html
+++ b/js/pixel-art/pixel/index.html
@@ -26,9 +26,9 @@
             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 +44,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;
@@ -138,6 +138,7 @@
 
             #palette-toggle {
                 top: auto;
+                right: 0.625rem;
                 bottom: 0.625rem;
             }
 
@@ -154,11 +155,11 @@
         <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%;">
+                <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%;">
+                <input type="number" id="gridHeight" value="16" min="1" max="100" style="width: 90%;">
             </div>
         </div>
         <br>