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