diff --git a/public/index.html b/public/index.html index 5e644b21973819776f80e10ac8a49ecdc79be320..acbfc84518902299c4fd2887c99e985439fb2052 100644 --- a/public/index.html +++ b/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>