infopanel und bilder hinzugefügt

main.js

@@ -285,6 +285,54 @@ map.once('load', () => {
     if (selectBox && selectBox.value) {
         loadPointCloud(getPointCloudFiles()[selectBox.value]);
     }
+
+    const pointCloudInfo = {
+    first: {
+        title: "1. Fläche unten",
+        text: "Dies ist die 1. Fläche (unten). Hier können Sie Informationen zur Scanfläche, dem Aufnahmedatum oder besonderen Merkmalen des Obernkirchener Sandsteins eintragen."
+    },
+    second: {
+        title: "2. Felswand",
+        text: "Dies ist die 2. Felswand. Hier können Sie Informationen zur Scanfläche, dem Aufnahmedatum oder besonderen Merkmalen des Obernkirchener Sandsteins eintragen."
+    },
+    third: {
+        title: "3. Fläche oben mit Spuren",
+        text: "Dies ist die 3. Fläche (oben) mit Spuren. Hier können Sie Informationen zur Scanfläche, dem Aufnahmedatum oder besonderen Merkmalen des Obernkirchener Sandsteins eintragen."
+    },
+};
+
+const infoPanel = document.getElementById("info-panel");
+const infoPanelTitle = document.getElementById("info-panel-title");
+const infoPanelText = document.getElementById("info-panel-text");
+const openInfoPanel = document.getElementById("openInfoPanel");
+const closeInfoPanel = document.getElementById("closeInfoPanel");
+
+function updateInfoPanel() {
+    const key = document.querySelector('select[name="pointcloud"]').value;
+    const info = pointCloudInfo[key];
+    if (info) {
+        infoPanelTitle.textContent = info.title;
+        infoPanelText.textContent = info.text;
+    } else {
+        infoPanelTitle.textContent = "Info";
+        infoPanelText.textContent = "Bitte wählen Sie eine Punktwolke aus.";
+    }
+}
+
+openInfoPanel.addEventListener("click", () => {
+    infoPanel.classList.add("open");
+    openInfoPanel.style.display = "none";
+});
+
+closeInfoPanel.addEventListener("click", () => {
+    infoPanel.classList.remove("open");
+    openInfoPanel.style.display = "flex";
+});
+
+// Panel aktualisieren wenn Punktwolke gewechselt wird
+document.querySelector('select[name="pointcloud"]').addEventListener("change", () => {
+    updateInfoPanel();
+});
 });