ar2350/Projekt-Visualisierung
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Kommentiert

Browse Source
This commit is contained in:
ar2350
2026-07-02 22:02:57 +02:00
parent 267952ef71
commit da29cbeb7e
3 changed files with 860 additions and 813 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+74 -86
View File
@@ -3,22 +3,12 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>LiDAR App</title> <title>LiDAR App</title>
<link <link href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css" rel="stylesheet"/>
href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css"
rel="stylesheet"
/>
<link rel="stylesheet" type="text/css" href="./libs/potree/potree.css" /> <link rel="stylesheet" type="text/css" href="./libs/potree/potree.css" />
<link <link rel="stylesheet" type="text/css" href="./libs/jquery-ui/jquery-ui.min.css"/>
rel="stylesheet"
type="text/css"
href="./libs/jquery-ui/jquery-ui.min.css"
/>
<link rel="stylesheet" type="text/css" href="style.css" /> <link rel="stylesheet" type="text/css" href="style.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.googleapis.com" />
<link <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet"/>
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap"
rel="stylesheet"
/>
</head> </head>
<body> <body>
<header id="header"> <header id="header">
@@ -26,90 +16,88 @@
</header> </header>
<h1 id="title">- Obernkirchener Sandstein -</h1> <h1 id="title">- Obernkirchener Sandstein -</h1>
<div id="coordinates" title="Koordinaten an Mausposition"></div> <div id="coordinates" title="Koordinaten an Mausposition"></div>
<div id="openButtonOuter"> <div id="openButtonOuter"></div>
</div>
<div id="sideBarOuter"> <div id="sideBarOuter">
<aside id="sidebar"> <aside id="sidebar">
<button class="sideBarButtons" id="closeSideBarButton" title="Menü einklappen"><<</button> <button class="sideBarButtons" id="closeSideBarButton" title="Menü einklappen"><<</button>
<div class="selectWrapper"> <div class="selectWrapper">
<select name="basemap" id="basemap"> <select name="basemap" id="basemap">
<option value="" disabled selected>Hintergrundkarte </option> <option value="" disabled selected>Hintergrundkarte </option>
<option value="openfree_bright">Hell</option> <option value="openfree_bright">Hell</option>
<option value="openfree_dark">Dunkel</option> <option value="openfree_dark">Dunkel</option>
<option value="openfree_liberty">Klassisch + Gebäude</option> <option value="openfree_liberty">Klassisch + Gebäude</option>
<option value="satellite">Satellit</option> <option value="satellite">Satellit</option>
<option value="terrain">Terrain</option> <option value="terrain">Terrain</option>
<option value="satellite_terrain">Terrain + Satellit</option> <option value="satellite_terrain">Terrain + Satellit</option>
</select> </select>
<span class="selectArrow">&#9207</span> <span class="selectArrow">&#9207</span>
</div> </div>
<div class="selectWrapper"> <div class="selectWrapper">
<select name="pointcloud" id="pointcloud"> <select name="pointcloud" id="pointcloud">
<option value="" disabled selected>Punktwolke auswählen</option> <option value="" disabled selected>Punktwolke auswählen</option>
<option value="first">Fläche im unteren Bereich</option> <option value="first">Fläche im unteren Bereich</option>
<option value="second">Abbauwand</option> <option value="second">Abbauwand</option>
<option value="third">Dinosaurier-Spuren</option> <option value="third">Dinosaurier-Spuren</option>
</select> </select>
<span class="selectArrow">&#9207</span> <span class="selectArrow">&#9207</span>
</div> </div>
<button id="disable">Punktwolke ausblenden</button> <button id="disable">Punktwolke ausblenden</button>
<p class="sideBarText">Qualität der Punktwolke</p> <p class="sideBarText">Qualität der Punktwolke</p>
<div class="buttonRow"> <div class="buttonRow">
<button class="qualityButtons" id="low">niedrigste</button> <button class="qualityButtons" id="low">niedrigste</button>
<button class="qualityButtons active" id="medium">mittel</button> <button class="qualityButtons active" id="medium">mittel</button>
<button class="qualityButtons" id="high">höchste</button> <button class="qualityButtons" id="high">höchste</button>
</div> </div>
<p class="sideBarText">Farbdarstellung</p> <p class="sideBarText">Farbdarstellung</p>
<div class="buttonRow"> <div class="buttonRow">
<button class="colorButtons active" id="rgb">RGB</button> <button class="colorButtons active" id="rgb">RGB</button>
<button class="colorButtons" id="height">höhencodiert</button> <button class="colorButtons" id="height">höhencodiert</button>
</div> </div>
<p class="sideBarText" id="pointSizeSliderValue">Punktgröße</p> <p class="sideBarText" id="pointSizeSliderValue">Punktgröße</p>
<div class="slider-labels"> <div class="slider-labels">
<span>Klein</span> <span>Klein</span>
<span>Groß</span> <span>Groß</span>
</div> </div>
<input id="pointSizeSlider" type="range" min="1" max="10" value="2" step="1"> <input id="pointSizeSlider" type="range" min="1" max="10" value="2" step="1"/>
<p class="sideBarText">Renderer</p> <p class="sideBarText">Renderer</p>
<button id="rendererToggle" data-active="deckgl" title="Renderer wechseln"> <button id="rendererToggle" data-active="deckgl" title="Renderer wechseln">
<span id="rendererLabel">Renderer: Deck.gl</span> <span id="rendererLabel">Renderer: Deck.gl</span>
<span id="rendererIcon">⇄</span> <span id="rendererIcon">⇄</span>
</button> </button>
<button id="openInfoPanel" title="Informationen zur Punktwolke"><img src="info.png"/>Informationen</button> <button id="openInfoPanel" title="Informationen zur Punktwolke">
<div class="logos"> <img src="info.png" />Informationen
<a href="http://www.jade-hs.de"> </button>
<img id="logoJadeHs" src="logoJadeHs.png" /> <div class="logos">
</a> <a href="http://www.jade-hs.de">
<a href="https://www.lbeg.niedersachsen.de/startseite/"> <img id="logoJadeHs" src="logoJadeHs.png" />
<img id="logoLbeg" src="logoLbeg.svg" /> </a>
</a> <a href="https://www.lbeg.niedersachsen.de/startseite/">
</div> <img id="logoLbeg" src="logoLbeg.svg" />
</aside> </a>
</div> </div>
</aside>
</div>
<main id="main"> <main id="main">
<div id="location-button"> <div id="location-button">
<img id="location" title="Standort zurücksetzen" src="standort.png" /> <img id="location" title="Standort zurücksetzen" src="standort.png" />
</div> </div>
<div id="map"></div> <div id="map"></div>
<div id="potree_render_area"></div> <div id="potree_render_area"></div>
<footer> <footer>&#169 Arne Zitting u. Hauke Kahrs</footer>
&#169 Arne Zitting u. Hauke Kahrs
</footer>
<div id="info-panel"> <div id="info-panel">
<div id="info-panel-inner"> <div id="info-panel-inner">
<button class="sideBarButtons" id="closeInfoPanel" title="Info einklappen">>></button> <button class="sideBarButtons" id="closeInfoPanel" title="Info einklappen">>></button>
<h3 id="info-panel-title">Info</h3> <h3 id="info-panel-title">Info</h3>
<img id="info-panel-image" src="" alt="Standortbild" style="display:none;" /> <img id="info-panel-image" src="" alt="Standortbild" style="display: none"/>
<div id="info-image-nav" style="display:none;"> <div id="info-image-nav" style="display: none">
<button id="info-img-prev">&#8592;</button> <button id="info-img-prev">&#8592;</button>
<span id="info-image-counter"></span> <span id="info-image-counter"></span>
<button id="info-img-next">&#8594;</button> <button id="info-img-next">&#8594;</button>
</div> </div>
<p id="info-panel-text">Bitte wählen Sie eine Punktwolke aus.</p> <p id="info-panel-text">Bitte wählen Sie eine Punktwolke aus.</p>
</div> </div>
</div> </div>
<div id="info-button-outer"> <div id="info-button-outer"></div>
</div>
</main> </main>
<script src="./libs/jquery/jquery-3.1.1.min.js"></script> <script src="./libs/jquery/jquery-3.1.1.min.js"></script>
<script src="./libs/other/BinaryHeap.js"></script> <script src="./libs/other/BinaryHeap.js"></script>
main.js
+495 -445
View File
File diff suppressed because it is too large Load Diff
style.css
+291 -282
View File
@@ -1,59 +1,60 @@
html, body { html,
body {
height: 100%; height: 100%;
margin: 0; margin: 0;
} }
body{ body {
margin:0; margin: 0;
overflow:hidden; overflow: hidden;
font-family: 'Inter', sans-serif; font-family: "Inter", sans-serif;
background: var(--bg); background: var(--bg);
color: var(--text); color: var(--text);
} }
#main{ #main {
width:100vw; width: 100vw;
height:100vh; height: 100vh;
position:relative; position: relative;
} }
#header{ #header {
position:absolute; position: absolute;
top:20px; top: 20px;
left:50%; left: 50%;
transform:translateX(-50%); transform: translateX(-50%);
z-index:30; z-index: 30;
padding:14px 28px; padding: 14px 28px;
border-radius: 20px; border-radius: 20px;
background: background:
linear-gradient( linear-gradient(
135deg, 135deg,
rgba(200, 200, 200, 0.221) 10%, rgba(200, 200, 200, 0.221) 10%,
rgba(79, 79, 79, 0.756) 60%, rgba(79, 79, 79, 0.756) 60%,
rgba(47, 47, 47, 0.864) 100% rgba(47, 47, 47, 0.864) 100%
), ),
rgba(24,24,27,0.78); rgba(24, 24, 27, 0.78);
backdrop-filter: blur(16px); backdrop-filter: blur(16px);
color:white; color: white;
font-size:24px; font-size: 24px;
font-weight:600; font-weight: 600;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.536); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.536);
} }
.logos{ .logos {
margin-top:20px; margin-top: 20px;
margin-left: 12px; margin-left: 12px;
opacity:0.8; opacity: 0.8;
} }
.logos img{ .logos img {
width:80px; width: 80px;
margin-right: 10px; margin-right: 10px;
} }
.logos img:hover{ .logos img:hover {
transform:translateY(-1px); transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(0,0,0,0.12); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
} }
#location-button { #location-button {
@@ -67,9 +68,11 @@ body{
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background-color: #f8f9fa; background-color: #f8f9fa;
border: none !important; border: none !important;
border-radius: 4px; border-radius: 4px;
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05); box-shadow:
0 0 0 2px rgba(0, 0, 0, 0.1),
0 4px 6px rgba(0, 0, 0, 0.05);
cursor: pointer; cursor: pointer;
box-sizing: border-box; box-sizing: border-box;
} }
@@ -78,28 +81,28 @@ body{
background-color: #f4f4f4; background-color: #f4f4f4;
} }
#location{ #location {
width:20px; width: 20px;
height:20px; height: 20px;
object-fit:contain; object-fit: contain;
margin-left: 1px; margin-left: 1px;
margin-top: 1px; margin-top: 1px;
cursor: pointer; cursor: pointer;
} }
#location:hover{ #location:hover {
transform:scale(1.05); transform: scale(1.05);
background:rgb(233, 232, 232); background: rgb(233, 232, 232);
} }
#location-button:hover{ #location-button:hover {
background:rgb(233, 232, 232); background: rgb(233, 232, 232);
} }
#sidebar { #sidebar {
position: absolute; position: absolute;
top: 48%; top: 48%;
transform:translateY(-50%); transform: translateY(-50%);
left: 20px; left: 20px;
width: 210px; width: 210px;
padding: 22px; padding: 22px;
@@ -107,13 +110,13 @@ body{
padding-top: 10px; padding-top: 10px;
background: rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(18px); backdrop-filter: blur(18px);
border: 1px solid rgba(255,255,255,0.3); border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 24px; border-radius: 24px;
box-shadow: 0 10px 30px rgba(0,0,0,0.15); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
z-index: 20; z-index: 20;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap:8px; gap: 8px;
} }
#main { #main {
@@ -126,9 +129,9 @@ body{
height: 100%; height: 100%;
} }
#potree_render_area{ #potree_render_area {
position:absolute; position: absolute;
top:0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
@@ -140,50 +143,49 @@ body{
background: transparent !important; background: transparent !important;
} }
select{ select {
appearance:none; appearance: none;
-webkit-appearance:none; -webkit-appearance: none;
-moz-appearance:none; -moz-appearance: none;
width:100%; width: 100%;
padding:10px 16px; padding: 10px 16px;
border:none; border: none;
border-radius:14px; border-radius: 14px;
background:rgba(255,255,255,0.92); background: rgba(255, 255, 255, 0.92);
font-size:14px; font-size: 14px;
font-weight:500; font-weight: 500;
color:#0f172a; color: #0f172a;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.278); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.278);
cursor:pointer; cursor: pointer;
transition:0.2s; transition: 0.2s;
} }
.selectWrapper{ .selectWrapper {
position:relative; position: relative;
width:100%; width: 100%;
} }
.selectArrow{ .selectArrow {
position:absolute; position: absolute;
right:14px; right: 14px;
top:48%; top: 48%;
transform:translateY(-50%); transform: translateY(-50%);
pointer-events:none; pointer-events: none;
font-size:14px; font-size: 14px;
color:#000000; color: #000000;
} }
#disable{ #disable {
appearance:none; appearance: none;
-webkit-appearance:none; -webkit-appearance: none;
-moz-appearance:none; -moz-appearance: none;
width:100%; width: 100%;
padding:10px 16px; padding: 10px 16px;
border:none; border: none;
border-radius:14px; border-radius: 14px;
font-size:14px; font-size: 14px;
font-weight:500; font-weight: 500;
background: background:
linear-gradient( linear-gradient(
135deg, 135deg,
rgba(18, 77, 216, 0.92) 10%, rgba(18, 77, 216, 0.92) 10%,
@@ -191,16 +193,16 @@ select{
rgba(6, 45, 135, 0.92) 100% rgba(6, 45, 135, 0.92) 100%
), ),
rgba(6, 45, 135, 0.92); rgba(6, 45, 135, 0.92);
color: white; color: white;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.278); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.278);
cursor:pointer; cursor: pointer;
transition:0.2s; transition: 0.2s;
margin-top: 8px; margin-top: 8px;
margin-bottom: 10px; margin-bottom: 10px;
} }
#disable.active-state { #disable.active-state {
background: background:
linear-gradient( linear-gradient(
135deg, 135deg,
rgba(18, 77, 216, 0.92) 10%, rgba(18, 77, 216, 0.92) 10%,
@@ -208,37 +210,39 @@ select{
rgba(6, 45, 135, 0.92) 100% rgba(6, 45, 135, 0.92) 100%
), ),
rgba(6, 45, 135, 0.92); rgba(6, 45, 135, 0.92);
color: white; color: white;
} }
#disable.inactive-state { #disable.inactive-state {
background: rgba(255,255,255,0.92); background: rgba(255, 255, 255, 0.92);
color: #0f172a; color: #0f172a;
} }
select:hover{ select:hover {
transform:translateY(-1px); transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(0,0,0,0.12); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
} }
select:focus{ select:focus {
outline:none; outline: none;
box-shadow:0 0 0 4px rgba(37,99,235,0.15), 0 8px 24px rgba(0,0,0,0.12); box-shadow:
0 0 0 4px rgba(37, 99, 235, 0.15),
0 8px 24px rgba(0, 0, 0, 0.12);
} }
#disable:hover{ #disable:hover {
transform:translateY(-1px); transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(0,0,0,0.12); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
} }
*{ * {
transition: transition:
background 0.2s, background 0.2s,
transform 0.01s, transform 0.01s,
opacity 0.2s; opacity 0.2s;
} }
footer{ footer {
z-index: 30; z-index: 30;
position: absolute; position: absolute;
bottom: 8px; bottom: 8px;
@@ -246,13 +250,13 @@ footer{
font-size: small; font-size: small;
} }
.sideBarText{ .sideBarText {
font-size:80%; font-size: 80%;
margin:0; margin: 0;
margin-bottom: -2px; margin-bottom: -2px;
} }
#pointSizeSlider{ #pointSizeSlider {
width: 100%; width: 100%;
margin: 0; margin: 0;
padding: 0; padding: 0;
@@ -260,7 +264,7 @@ margin-bottom: -2px;
margin-bottom: 8px; margin-bottom: 8px;
} }
input[type="range"]{ input[type="range"] {
-webkit-appearance: none; -webkit-appearance: none;
appearance: none; appearance: none;
width: 100%; width: 100%;
@@ -272,12 +276,12 @@ input[type="range"]{
outline: none; outline: none;
} }
input[type="range"]::-webkit-slider-thumb{ input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none; -webkit-appearance: none;
width:16px; width: 16px;
height:16px; height: 16px;
border-radius:50%; border-radius: 50%;
background: background:
linear-gradient( linear-gradient(
135deg, 135deg,
rgba(18, 77, 216, 0.92) 10%, rgba(18, 77, 216, 0.92) 10%,
@@ -285,106 +289,108 @@ input[type="range"]::-webkit-slider-thumb{
rgba(6, 45, 135, 0.92) 100% rgba(6, 45, 135, 0.92) 100%
), ),
rgba(6, 45, 135, 0.92); rgba(6, 45, 135, 0.92);
cursor:pointer; cursor: pointer;
} }
.slider-labels{ .slider-labels {
display:flex; display: flex;
justify-content:space-between; justify-content: space-between;
font-size:0.5rem; font-size: 0.5rem;
color:#868686; color: #868686;
margin-bottom:0px; margin-bottom: 0px;
margin-top: -5px; margin-top: -5px;
} }
#title{ #title {
z-index: 30; z-index: 30;
position: absolute; position: absolute;
top: 75px; top: 75px;
left: 50%; left: 50%;
transform:translateX(-50%); transform: translateX(-50%);
font-size: small; font-size: small;
color: #ffffff; color: #ffffff;
text-shadow: 1px 1.5px #00000059; text-shadow: 1px 1.5px #00000059;
} }
#coordinates{ #coordinates {
z-index: 30; z-index: 30;
position: absolute; position: absolute;
bottom: 20px; bottom: 20px;
left: 50%; left: 50%;
transform:translateX(-50%); transform: translateX(-50%);
font-size: smaller; font-size: smaller;
color: #000000cf; color: #000000cf;
border: none; border: none;
border-radius: 14px; border-radius: 14px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.278); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.278);
padding:8px; padding: 8px;
border-radius: 15px; border-radius: 15px;
background-color: rgba(255, 255, 255, 0.751); background-color: rgba(255, 255, 255, 0.751);
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
} }
.sideBarButtons{ .sideBarButtons {
font-family:monospace; font-family: monospace;
border:none; border: none;
border-radius:10px; border-radius: 10px;
background: background:
linear-gradient( linear-gradient(
135deg, 135deg,
rgba(200, 200, 200, 0.221) 10%, rgba(200, 200, 200, 0.221) 10%,
rgba(79, 79, 79, 0.756) 60%, rgba(79, 79, 79, 0.756) 60%,
rgba(47, 47, 47, 0.864) 100% rgba(47, 47, 47, 0.864) 100%
), ),
rgba(24,24,27,0.78); rgba(24, 24, 27, 0.78);
font-size:15px; font-size: 15px;
color:#ffffff; color: #ffffff;
box-shadow: 0 2px 10px rgba(0,0,0,0.08); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
cursor:pointer; cursor: pointer;
transition:0.2s; transition: 0.2s;
z-index: 30; z-index: 30;
} }
#closeSideBarButton{ #closeSideBarButton {
align-self: flex-end; align-self: flex-end;
right: 0%; right: 0%;
padding:5px 15px; padding: 5px 15px;
}
#openSideBarButton{
position: absolute;
left: 5px;
padding:5px 15px;
} }
.buttonRow{ #openSideBarButton {
position: absolute;
left: 5px;
padding: 5px 15px;
}
.buttonRow {
display: flex; display: flex;
width: 100%; width: 100%;
border: none; border: none;
border-radius: 10px; border-radius: 10px;
overflow:hidden; overflow: hidden;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.278); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.278);
margin-bottom: 10px; margin-bottom: 10px;
}
.qualityButtons, .colorButtons{
flex: 1;
margin: 0;
appearance:none;
-webkit-appearance:none;
-moz-appearance:none;
border:none;
background:rgba(255,255,255,0.92);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.278);
font-size:12px;
color:#0f172a;
padding:5px;
cursor:pointer;
transition:0.2s;
} }
.qualityButtons.active, .colorButtons.active{ .qualityButtons,
background: .colorButtons {
flex: 1;
margin: 0;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
border: none;
background: rgba(255, 255, 255, 0.92);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.278);
font-size: 12px;
color: #0f172a;
padding: 5px;
cursor: pointer;
transition: 0.2s;
}
.qualityButtons.active,
.colorButtons.active {
background:
linear-gradient( linear-gradient(
135deg, 135deg,
rgba(18, 77, 216, 0.92) 10%, rgba(18, 77, 216, 0.92) 10%,
@@ -392,182 +398,185 @@ position: absolute;
rgba(6, 45, 135, 0.92) 100% rgba(6, 45, 135, 0.92) 100%
), ),
rgba(6, 45, 135, 0.92); rgba(6, 45, 135, 0.92);
color: #ffffff; color: #ffffff;
} }
#potree_render_area { #potree_render_area {
pointer-events: none; pointer-events: none;
} }
#info-button-outer { #info-button-outer {
position: absolute; position: absolute;
top: 50%; top: 50%;
right: 20px; right: 20px;
transform: translateY(-50%); transform: translateY(-50%);
z-index: 30; z-index: 30;
} }
#rendererToggle { #rendererToggle {
width: 100%; width: 100%;
padding: 10px 16px; padding: 10px 16px;
border: none; border: none;
border-radius: 14px; border-radius: 14px;
font-size: 13px; font-size: 13px;
font-weight: 500; font-weight: 500;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
box-shadow: 0 5px 10px rgba(0,0,0,0.278); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.278);
transition: 0.2s; transition: 0.2s;
} }
#rendererToggle[data-active="deckgl"] { #rendererToggle[data-active="deckgl"] {
background: linear-gradient( background: linear-gradient(
135deg, 135deg,
rgba(18,77,216,0.92) 10%, rgba(18, 77, 216, 0.92) 10%,
rgba(13,61,175,0.92) 60%, rgba(13, 61, 175, 0.92) 60%,
rgba(6,45,135,0.92) 100%); rgba(6, 45, 135, 0.92) 100%
color: #ffffff; );
color: #ffffff;
} }
#rendererToggle[data-active="potree"] { #rendererToggle[data-active="potree"] {
background: linear-gradient( background: linear-gradient(
135deg, 135deg,
rgba(22,163,74,0.92) 10%, rgba(22, 163, 74, 0.92) 10%,
rgba(15,118,54,0.92) 60%, rgba(15, 118, 54, 0.92) 60%,
rgba(6,78,32,0.92) 100%); rgba(6, 78, 32, 0.92) 100%
color: #ffffff; );
color: #ffffff;
} }
#rendererToggle:hover { #rendererToggle:hover {
transform: translateY(-1px); transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(0,0,0,0.12); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
} }
#rendererIcon { #rendererIcon {
font-size: 16px; font-size: 16px;
} }
#openInfoPanel { #openInfoPanel {
margin-top: 12px; margin-top: 12px;
border: none; border: none;
border-radius: 14px; border-radius: 14px;
width: 100%; width: 100%;
padding: 10px 16px; padding: 10px 16px;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
cursor: pointer; cursor: pointer;
background: rgba(255,255,255,0.9); background: rgba(255, 255, 255, 0.9);
box-shadow: 0 5px 10px rgba(0,0,0,0.278); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.278);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 8px; gap: 8px;
color: #1e293b; color: #1e293b;
} }
#openInfoPanel:hover { #openInfoPanel:hover {
background: rgb(233,232,232); background: rgb(233, 232, 232);
transform: translateY(-1px); transform: translateY(-1px);
} }
#openInfoPanel img { #openInfoPanel img {
width: 16px; width: 16px;
height: 16px; height: 16px;
object-fit: contain; object-fit: contain;
} }
#info-panel { #info-panel {
display: none; display: none;
position: absolute; position: absolute;
top: 48%; top: 48%;
right: 20px; right: 20px;
transform: translateY(-50%); transform: translateY(-50%);
width: 340px; width: 340px;
padding: 18px 22px; padding: 18px 22px;
background: rgba(255,255,255,0.9); background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(18px); backdrop-filter: blur(18px);
border: 1px solid rgba(255,255,255,0.3); border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 24px; border-radius: 24px;
box-shadow: 0 10px 30px rgba(0,0,0,0.15); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
z-index: 20; z-index: 20;
display: none; display: none;
flex-direction: column; flex-direction: column;
gap: 0; gap: 0;
} }
#info-panel.open { #info-panel.open {
display: flex; display: flex;
} }
#closeInfoPanel { #closeInfoPanel {
align-self: flex-start; align-self: flex-start;
padding: 5px 15px; padding: 5px 15px;
margin-bottom: 14px; margin-bottom: 14px;
} }
#info-panel-title { #info-panel-title {
margin: 0 0 14px 0; margin: 0 0 14px 0;
font-size: 14px; font-size: 14px;
font-weight: 600; font-weight: 600;
color: #0f172a; color: #0f172a;
} }
#info-panel-image { #info-panel-image {
width: 100%; width: 100%;
border-radius: 12px; border-radius: 12px;
object-fit: cover; object-fit: cover;
max-height: 220px; max-height: 220px;
margin-bottom: 14px; margin-bottom: 14px;
} }
#info-image-nav { #info-image-nav {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
width: 100%; width: 100%;
margin-bottom: 14px; margin-bottom: 14px;
} }
#info-panel-text { #info-panel-text {
margin: 0; margin: 0;
font-size: 13px; font-size: 13px;
line-height: 1.6; line-height: 1.6;
color: #1e293b; color: #1e293b;
} }
#info-img-prev, #info-img-next { #info-img-prev,
border: none; #info-img-next {
background: rgba(255,255,255,0.9); border: none;
border-radius: 8px; background: rgba(255, 255, 255, 0.9);
padding: 4px 10px; border-radius: 8px;
cursor: pointer; padding: 4px 10px;
font-size: 16px; cursor: pointer;
box-shadow: 0 2px 6px rgba(0,0,0,0.15); font-size: 16px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
} }
#info-img-prev:hover, #info-img-next:hover { #info-img-prev:hover,
background: rgb(233,232,232); #info-img-next:hover {
background: rgb(233, 232, 232);
} }
#info-image-counter { #info-image-counter {
font-size: 12px; font-size: 12px;
color: #555; color: #555;
} }
.lidar-control-icon { .lidar-control-icon {
display: none !important; display: none !important;
} }
.maplibregl-ctrl:has(.lidar-control-icon), .maplibregl-ctrl:has(.lidar-control-icon),
.maplibregl-ctrl-group:has(.lidar-control-icon), .maplibregl-ctrl-group:has(.lidar-control-icon),
button:has(.lidar-control-icon) { button:has(.lidar-control-icon) {
display: none !important; display: none !important;
visibility: hidden !important; visibility: hidden !important;
width: 0px !important; width: 0px !important;
height: 0px !important; height: 0px !important;
margin: 0 !important; margin: 0 !important;
padding: 0 !important; padding: 0 !important;
border: none !important; border: none !important;
} }