Bug beim Laden entfernt + Info Button links im Menü platziert

index.html

@@ -73,6 +73,7 @@
         <span>Groß</span>
       </div>
       <input id="pointSizeSlider" type="range" min="0" max="1000" value="0" step="1">
+      <button id="openInfoPanel" title="Informationen zur Punktwolke"><img id="location" title="Standort zurücksetzen" src="info.png" />Informationen</button>
       <div class="logos">
         <a href="http://www.jade-hs.de">
           <img id="logoJadeHs" src="logoJadeHs.png" />
@@ -107,7 +108,7 @@
 </div>
 </div>
 <div id="info-button-outer">
-    <button id="openInfoPanel" title="Informationen zur Punktwolke">&#x24D8; Info</button>
+    
 </div>
     </main>
 

main.js

@@ -54,6 +54,9 @@ let currentPointCloud = null;
 let isVisible = true;
 
 function loadPointCloud(path) {
+    viewer.scene.view.yaw = 0;
+viewer.scene.view.pitch = 0;
+
     if (currentPointCloud) {
         const index = viewer.scene.pointclouds.indexOf(currentPointCloud);
         if (index !== -1) viewer.scene.pointclouds.splice(index, 1);
@@ -94,6 +97,8 @@ function loadPointCloud(path) {
 let isSyncing = false;
 
 function syncCamera() {
+
+
     if (!currentPointCloud || isSyncing) return;
     isSyncing = true;
 
@@ -127,6 +132,7 @@ function syncCamera() {
     // 3. Potree-Kamera absolut starr setzen
     viewer.scene.view.position.copy(cameraPosition);
     viewer.scene.view.lookAt(target);
+    
     viewer.setFOV(transform.fov);
 
     // 4. Potree rendern
@@ -193,7 +199,16 @@ function changeBaseMap(newMap) {
 document.querySelector('#disable').addEventListener('click', function() {
     isVisible = !isVisible;
     if (currentPointCloud) currentPointCloud.visible = isVisible;
-    this.textContent = isVisible ? "Punktwolke ausblenden" : "Punktwolke anzeigen";
+    if(isVisible){
+        this.textContent = "Punktwolke ausblenden";
+        this.classList.add("active-state");
+        this.classList.remove("inactive-state");
+    } else{
+        this.textContent = "Punktwolke anzeigen";
+        this.classList.add("inactive-state");
+        this.classList.remove("active-state");
+    }
+    
 });
 
 document.querySelector('select[name="basemap"]').addEventListener('change', (e) => changeBaseMap(e.target.value));
@@ -362,7 +377,7 @@ document.getElementById("info-img-next").addEventListener("click", () => {
 
 openInfoPanel.addEventListener("click", () => {
     infoPanel.classList.add("open");
-    openInfoPanel.style.display = "none";
+    //openInfoPanel.style.display = "none";
 });
 
 closeInfoPanel.addEventListener("click", () => {

style.css

@@ -177,6 +177,8 @@ select{
   padding:10px 16px;
   border:none;
   border-radius:14px;
+  font-size:14px;
+  font-weight:500;
    background:
     linear-gradient(
       135deg,
@@ -185,9 +187,7 @@ select{
       rgba(6, 45, 135, 0.92) 100%
     ),
     rgba(6, 45, 135, 0.92);
-  font-size:14px;
+    color: white;
-  font-weight:500;
-  color:#ffffff;
   box-shadow: 0 5px 10px rgba(0, 0, 0, 0.278);
   cursor:pointer;
   transition:0.2s;
@@ -195,6 +195,24 @@ select{
   margin-bottom: 10px;
 }
 
+
+#disable.active-state {
+    background:
+    linear-gradient(
+      135deg,
+      rgba(18, 77, 216, 0.92) 10%,
+      rgba(13, 61, 175, 0.92) 60%,
+      rgba(6, 45, 135, 0.92) 100%
+    ),
+    rgba(6, 45, 135, 0.92);
+    color: white;
+}
+
+#disable.inactive-state {
+   background: rgba(255,255,255,0.92);
+    color: #0f172a;
+}
+
 select:hover{
   transform:translateY(-1px);
   box-shadow: 0 6px 18px rgba(0,0,0,0.12);
@@ -389,11 +407,11 @@ position: absolute;
 }
 
 #openInfoPanel {
+    margin-top: 12px;
     border: none;
     border-radius: 14px;
     width: auto;
-    height: 48px;
+    padding: 10px 16px;
-    padding: 0 20px;
     font-size: 17px;
     font-weight: 500;
     cursor: pointer;