Update public/assets/icons/left-arrow.png, public/assets/icons/up-arrow.png,...

Update public/assets/icons/left-arrow.png, public/assets/icons/up-arrow.png, public/assets/icons/down-arrow.png, public/assets/icons/right-arrow.png, public/ar_main.js, public/style.css

public/ar_main.js

@@ -356,20 +356,32 @@ function openMoveMenu() {
     const dynamicMenu = document.getElementById("dynamic-menu");
     dynamicMenu.style.display = "flex";
     dynamicMenu.innerHTML = `
-        <h3>Position anpassen</h3>
-        <label>Verschiebungsgröße: <span id="move-delta-display">${moveDelta.toFixed(2)}</span>
-        <input type="range" min="0.01" max="1.0" step="0.01" value="${moveDelta}" onchange="updateMoveDelta(this.value)"></label>
-        <div id="button-controls">
-            <button class="control-button" id="up" onclick="moveModelDynamic('z', -moveDelta)">↑</button>
-            <div class="middle-row">
-                <button class="control-button" id="left" onclick="moveModelDynamic('x', -moveDelta)">←</button>
-                <div class="spacer"></div>
-                <button class="control-button" id="right" onclick="moveModelDynamic('x', moveDelta)">→</button>
+        <div id="move-menu">
+            <h3>Position anpassen</h3>
+            <label>
+                Verschiebungsgröße: <span id="move-delta-display">${moveDelta.toFixed(2)}</span>
+                <input type="range" min="0.01" max="1.0" step="0.01" value="${moveDelta}" onchange="updateMoveDelta(this.value)">
+            </label>
+            <div id="button-controls">
+                <button class="control-button" id="up" onclick="moveModelDynamic('z', -moveDelta)">
+                    <img src="assets/icons/up-arrow.png" alt="Up" />
+                </button>
+                <div class="middle-row">
+                    <button class="control-button" id="left" onclick="moveModelDynamic('x', -moveDelta)">
+                        <img src="assets/icons/left-arrow.png" alt="Left" />
+                    </button>
+                    <div class="spacer"></div>
+                    <button class="control-button" id="right" onclick="moveModelDynamic('x', moveDelta)">
+                        <img src="assets/icons/right-arrow.png" alt="Right" />
+                    </button>
+                </div>
+                <button class="control-button" id="down" onclick="moveModelDynamic('z', moveDelta)">
+                    <img src="assets/icons/down-arrow.png" alt="Down" />
+                </button>
             </div>
-            <button class="control-button" id="down" onclick="moveModelDynamic('z', moveDelta)">↓</button>
+            <button onclick="closeDynamicMenu()">Zurück</button>
         </div>
-        <button onclick="closeDynamicMenu()">Zurück</button>
-      `;
+    `;
 }
 
 function updateMoveDelta(value) {

public/style.css

@@ -240,6 +240,14 @@ button:active {
 
 
 /* Style für Move Menu */
+#move-menu {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+}
+
 #button-controls {
   display: flex;
   flex-direction: column;
@@ -261,12 +269,16 @@ button:active {
   border: none;
   border-radius: 5px;
   background-color: #007BFF;
-  color: white;
-  font-size: 18px;
   cursor: pointer;
   transition: background-color 0.3s, transform 0.2s;
 }
 
+#button-controls .control-button img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
 #button-controls .control-button:active {
   background-color: #0056b3;
   transform: scale(0.95);