infopanel und bilder hinzugefügt

index.html

@@ -92,6 +92,17 @@
       <footer>
         &#169 Arne Zitting u. Hauke Kahrs
       </footer>
+
+      <div id="info-panel">
+    <div id="info-panel-inner">
+        <button class="sideBarButtons" id="closeInfoPanel" title="Info einklappen">>></button>
+        <h3 id="info-panel-title">Info</h3>
+        <p id="info-panel-text">Bitte wählen Sie eine Punktwolke aus.</p>
+    </div>
+</div>
+<div id="info-button-outer">
+    <button id="openInfoPanel" title="Informationen zur Punktwolke">&#x24D8; Info</button>
+</div>
     </main>
 
     <script src="./libs/jquery/jquery-3.1.1.min.js"></script>

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();
+});
 });
 
 

style.css

@@ -378,4 +378,78 @@ position: absolute;
 
  #potree_render_area {
   pointer-events: none;
- }
+ }
+
+ #info-button-outer {
+    position: absolute;
+    top: 50%;
+    right: 20px;
+    transform: translateY(-50%);
+    z-index: 30;
+}
+
+#openInfoPanel {
+    border: none;
+    border-radius: 14px;
+    width: auto;
+    height: 48px;
+    padding: 0 20px;
+    font-size: 17px;
+    font-weight: 500;
+    cursor: pointer;
+    background: rgba(255,255,255,0.9);
+    box-shadow: 0 5px 10px rgba(0,0,0,0.278);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    color: #1e293b;
+}
+
+#openInfoPanel:hover {
+    background: rgb(233,232,232);
+    transform: translateY(-1px);
+}
+
+#info-panel {
+    display: none;
+    position: absolute;
+    top: 48%;
+    right: 20px;
+    transform: translateY(-50%);
+    width: 210px;
+    padding: 22px;
+    padding-bottom: 10px;
+    padding-top: 10px;
+    background: rgba(255,255,255,0.9);
+    backdrop-filter: blur(18px);
+    border: 1px solid rgba(255,255,255,0.3);
+    border-radius: 24px;
+    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
+    z-index: 20;
+    flex-direction: column;
+    gap: 8px;
+}
+
+#info-panel.open {
+    display: flex;
+}
+
+#closeInfoPanel {
+    align-self: flex-start;
+    padding: 5px 15px;
+}
+
+#info-panel-title {
+    margin: 0;
+    font-size: 14px;
+    font-weight: 600;
+    color: #0f172a;
+}
+
+#info-panel-text {
+    margin: 0;
+    font-size: 13px;
+    line-height: 1.6;
+    color: #1e293b;
+}