2 files changed, 58 insertions, 0 deletions
diff --git a/js/pixel-art/pixel/app.js b/js/pixel-art/pixel/app.js
index 9dc9cd8..1fab676 100644
--- a/js/pixel-art/pixel/app.js
+++ b/js/pixel-art/pixel/app.js
@@ -36,6 +36,10 @@ 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('panUpBtn').addEventListener('click', () => handlePanButton('up'));
+document.getElementById('panDownBtn').addEventListener('click', () => handlePanButton('down'));
+document.getElementById('panLeftBtn').addEventListener('click', () => handlePanButton('left'));
+document.getElementById('panRightBtn').addEventListener('click', () => handlePanButton('right'));
 
 // Initialization
 resizeCanvas();
@@ -293,4 +297,23 @@ function handleZoom(factor) {
     
     drawGrid();
     saveToLocalStorage();
+}
+
+function handlePanButton(direction) {
+    const step = cellSize;
+    switch(direction) {
+        case 'up':
+            offsetY += step;
+            break;
+        case 'down':
+            offsetY -= step;
+            break;
+        case 'left':
+            offsetX += step;
+            break;
+        case 'right':
+            offsetX -= step;
+            break;
+    }
+    drawGrid();
 }
\ No newline at end of file
diff --git a/js/pixel-art/pixel/index.html b/js/pixel-art/pixel/index.html
index c864a98..cc04595 100644
--- a/js/pixel-art/pixel/index.html
+++ b/js/pixel-art/pixel/index.html
@@ -120,6 +120,33 @@
             flex: 1;
             padding: 4px;
         }
+
+        .pan-controls {
+            display: flex;
+            flex-direction: column;
+            gap: 5px;
+            margin-top: 10px;
+            align-items: center;
+        }
+
+        .pan-middle {
+            display: flex;
+            gap: 5px;
+            width: 100%;
+        }
+
+        .pan-controls button {
+            padding: 8px;
+            width: 40px;
+            height: 40px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .pan-middle button {
+            flex: 1;
+        }
     </style>
 </head>
 <body>
@@ -139,6 +166,14 @@
             <button id="zoomInBtn">🔍+</button>
             <button id="zoomOutBtn">🔍-</button>
         </div>
+        <div class="pan-controls">
+            <button id="panUpBtn">⬆️</button>
+            <div class="pan-middle">
+                <button id="panLeftBtn">⬅️</button>
+                <button id="panRightBtn">➡️</button>
+            </div>
+            <button id="panDownBtn">⬇️</button>
+        </div>
         <button id="resetBtn">Reset</button>
     </div>
     <script src="app.js"></script>