diff --git a/index.html b/index.html
index a937031..26e4036 100644
--- a/index.html
+++ b/index.html
@@ -92,6 +92,17 @@
+
+
+
+
+
Info
+
Bitte wählen Sie eine Punktwolke aus.
+
+
+
+
+
diff --git a/main.js b/main.js
index 3de9cce..11a2f36 100644
--- a/main.js
+++ b/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();
+});
});
diff --git a/stand1_1.jpeg b/stand1_1.jpeg
new file mode 100644
index 0000000..83cb126
Binary files /dev/null and b/stand1_1.jpeg differ
diff --git a/stand1_2.jpeg b/stand1_2.jpeg
new file mode 100644
index 0000000..99e64ba
Binary files /dev/null and b/stand1_2.jpeg differ
diff --git a/stand2_1.jpeg b/stand2_1.jpeg
new file mode 100644
index 0000000..4f0e0d1
Binary files /dev/null and b/stand2_1.jpeg differ
diff --git a/stand3_1.jpeg b/stand3_1.jpeg
new file mode 100644
index 0000000..fafe3ef
Binary files /dev/null and b/stand3_1.jpeg differ
diff --git a/stand3_2.jpeg b/stand3_2.jpeg
new file mode 100644
index 0000000..9a95225
Binary files /dev/null and b/stand3_2.jpeg differ
diff --git a/style.css b/style.css
index c3dd994..eaca620 100644
--- a/style.css
+++ b/style.css
@@ -378,4 +378,78 @@ position: absolute;
#potree_render_area {
pointer-events: none;
- }
\ No newline at end of file
+ }
+
+ #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;
+}
\ No newline at end of file