about summary refs log tree commit diff stats
path: root/js/pixel-art/pixel/index.html
diff options
context:
space:
mode:
Diffstat (limited to 'js/pixel-art/pixel/index.html')
-rw-r--r--js/pixel-art/pixel/index.html35
1 files changed, 35 insertions, 0 deletions
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>