Update public/index.html

public/index.html

@@ -158,6 +158,41 @@
       background-color: #3498db;
       color: white;
     }
+
+    #dynamic-menu {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: 20px;
+      padding: 20px;
+      background: #f5f5f5;
+      box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.2);
+      width: 100%;
+    }
+
+    #dynamic-menu label {
+      font-size: 16px;
+      color: #333;
+    }
+
+    #dynamic-menu input[type="range"] {
+      width: 80%;
+    }
+
+    #dynamic-menu button {
+      padding: 10px 20px;
+      font-size: 16px;
+      color: white;
+      background-color: #007bff;
+      border: none;
+      border-radius: 5px;
+      cursor: pointer;
+    }
+
+    #dynamic-menu button:hover {
+      background-color: #0056b3;
+    }
   </style>
   <script src="https://unpkg.com/three@0.126.0/build/three.js"></script>
   <script src="https://unpkg.com/three@0.126.0/examples/js/loaders/GLTFLoader.js"></script>
@@ -362,7 +397,7 @@
       }
 
       const dynamicMenu = document.getElementById("dynamic-menu");
-      dynamicMenu.style.display = "block";
+      dynamicMenu.style.display = "flex";
       dynamicMenu.innerHTML = `
         <h3>Rotation anpassen</h3>
         <label>Y-Achse: <input type="range" min="0" max="360" step="10" onchange="updateRotation('y', this.value)"></label>
@@ -384,7 +419,7 @@
       }
 
       const dynamicMenu = document.getElementById("dynamic-menu");
-      dynamicMenu.style.display = "block";
+      dynamicMenu.style.display = "flex";
       dynamicMenu.innerHTML = `
         <h3>Skalierung anpassen</h3>
         <label>Größe: <input type="range" min="0.1" max="3" step="0.1" onchange="updateScale(this.value)"></label>