Compare commits
2 Commits
d6a98a4f05
..
main
| Author | SHA1 | Date | |
|---|---|---|---|
 ar2350
|
da29cbeb7e | ||
|
ar2350
|
267952ef71 |
Vendored
+3
-3
@@ -2,16 +2,16 @@
|
||||
"first": {
|
||||
"title": "Fläche im unteren Bereich",
|
||||
"text": "Dieser Bereich des Steinbruchs zeigt eine natürliche Oberfläche aus Obernkirchener Sandstein. Zwischen einzelnen Sandsteinblöcken haben sich Sträucher und andere Pflanzen angesiedelt. Der Sandstein entstand vor etwa 140 Millionen Jahren in einer küstennahen Landschaft der Unterkreide.",
|
||||
"images": ["stand1_1.jpeg", "stand1_2.jpeg"]
|
||||
"images": ["/stand1_1.jpeg", "/stand1_2.jpeg"]
|
||||
},
|
||||
"second": {
|
||||
"title": "Abbauwand",
|
||||
"text": "An dieser Felswand wird der Obernkirchener Sandstein abgebaut. Das Gestein ist für seine hohe Festigkeit und Witterungsbeständigkeit bekannt und wird seit Jahrhunderten als Bau- und Werkstein genutzt. Es findet sich unter anderem an zahlreichen historischen Gebäuden in Deutschland.",
|
||||
"images": ["stand2_1.jpeg"]
|
||||
"images": ["/stand2_1.jpeg"]
|
||||
},
|
||||
"third": {
|
||||
"title": "Dinosaurier-Spuren",
|
||||
"text": "Auf dieser öffentlich zugänglichen Fläche sind fossile Fußspuren von Dinosauriern erhalten geblieben. Die Spuren entstanden vor rund 140 Millionen Jahren in feuchtem Sand und wurden später durch weitere Sedimentschichten konserviert. Sie gehören zu den bekanntesten Fossilienfunden im Obernkirchener Sandstein.",
|
||||
"images": ["stand3_1.jpeg", "stand3_2.jpeg"]
|
||||
"images": ["/stand3_1.jpeg", "/stand3_2.jpeg"]
|
||||
}
|
||||
}
|
||||
+74
-86
@@ -3,22 +3,12 @@
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>LiDAR App</title>
|
||||
<link
|
||||
href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link 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/jquery-ui/jquery-ui.min.css"
|
||||
/>
|
||||
<link rel="stylesheet" type="text/css" href="./libs/jquery-ui/jquery-ui.min.css"/>
|
||||
<link rel="stylesheet" type="text/css" href="style.css" />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet"/>
|
||||
</head>
|
||||
<body>
|
||||
<header id="header">
|
||||
@@ -26,90 +16,88 @@
|
||||
</header>
|
||||
<h1 id="title">- Obernkirchener Sandstein -</h1>
|
||||
<div id="coordinates" title="Koordinaten an Mausposition"></div>
|
||||
<div id="openButtonOuter">
|
||||
</div>
|
||||
<div id="openButtonOuter"></div>
|
||||
<div id="sideBarOuter">
|
||||
<aside id="sidebar">
|
||||
<button class="sideBarButtons" id="closeSideBarButton" title="Menü einklappen"><<</button>
|
||||
<div class="selectWrapper">
|
||||
<select name="basemap" id="basemap">
|
||||
<option value="" disabled selected>Hintergrundkarte </option>
|
||||
<option value="openfree_bright">Hell</option>
|
||||
<option value="openfree_dark">Dunkel</option>
|
||||
<option value="openfree_liberty">Klassisch + Gebäude</option>
|
||||
<option value="satellite">Satellit</option>
|
||||
<option value="terrain">Terrain</option>
|
||||
<option value="satellite_terrain">Terrain + Satellit</option>
|
||||
</select>
|
||||
<span class="selectArrow">⏷</span>
|
||||
</div>
|
||||
<div class="selectWrapper">
|
||||
<select name="pointcloud" id="pointcloud">
|
||||
<option value="" disabled selected>Punktwolke auswählen</option>
|
||||
<option value="first">Fläche im unteren Bereich</option>
|
||||
<option value="second">Abbauwand</option>
|
||||
<option value="third">Dinosaurier-Spuren</option>
|
||||
</select>
|
||||
<span class="selectArrow">⏷</span>
|
||||
</div>
|
||||
<button id="disable">Punktwolke ausblenden</button>
|
||||
<p class="sideBarText">Qualität der Punktwolke</p>
|
||||
<div class="buttonRow">
|
||||
<button class="qualityButtons" id="low">niedrigste</button>
|
||||
<button class="qualityButtons active" id="medium">mittel</button>
|
||||
<button class="qualityButtons" id="high">höchste</button>
|
||||
</div>
|
||||
<p class="sideBarText">Farbdarstellung</p>
|
||||
<div class="buttonRow">
|
||||
<button class="colorButtons active" id="rgb">RGB</button>
|
||||
<button class="colorButtons" id="height">höhencodiert</button>
|
||||
</div>
|
||||
<p class="sideBarText" id="pointSizeSliderValue">Punktgröße</p>
|
||||
<div class="slider-labels">
|
||||
<span>Klein</span>
|
||||
<span>Groß</span>
|
||||
</div>
|
||||
<input id="pointSizeSlider" type="range" min="1" max="10" value="2" step="1">
|
||||
<p class="sideBarText">Renderer</p>
|
||||
<button id="rendererToggle" data-active="deckgl" title="Renderer wechseln">
|
||||
<button class="sideBarButtons" id="closeSideBarButton" title="Menü einklappen"><<</button>
|
||||
<div class="selectWrapper">
|
||||
<select name="basemap" id="basemap">
|
||||
<option value="" disabled selected>Hintergrundkarte </option>
|
||||
<option value="openfree_bright">Hell</option>
|
||||
<option value="openfree_dark">Dunkel</option>
|
||||
<option value="openfree_liberty">Klassisch + Gebäude</option>
|
||||
<option value="satellite">Satellit</option>
|
||||
<option value="terrain">Terrain</option>
|
||||
<option value="satellite_terrain">Terrain + Satellit</option>
|
||||
</select>
|
||||
<span class="selectArrow">⏷</span>
|
||||
</div>
|
||||
<div class="selectWrapper">
|
||||
<select name="pointcloud" id="pointcloud">
|
||||
<option value="" disabled selected>Punktwolke auswählen</option>
|
||||
<option value="first">Fläche im unteren Bereich</option>
|
||||
<option value="second">Abbauwand</option>
|
||||
<option value="third">Dinosaurier-Spuren</option>
|
||||
</select>
|
||||
<span class="selectArrow">⏷</span>
|
||||
</div>
|
||||
<button id="disable">Punktwolke ausblenden</button>
|
||||
<p class="sideBarText">Qualität der Punktwolke</p>
|
||||
<div class="buttonRow">
|
||||
<button class="qualityButtons" id="low">niedrigste</button>
|
||||
<button class="qualityButtons active" id="medium">mittel</button>
|
||||
<button class="qualityButtons" id="high">höchste</button>
|
||||
</div>
|
||||
<p class="sideBarText">Farbdarstellung</p>
|
||||
<div class="buttonRow">
|
||||
<button class="colorButtons active" id="rgb">RGB</button>
|
||||
<button class="colorButtons" id="height">höhencodiert</button>
|
||||
</div>
|
||||
<p class="sideBarText" id="pointSizeSliderValue">Punktgröße</p>
|
||||
<div class="slider-labels">
|
||||
<span>Klein</span>
|
||||
<span>Groß</span>
|
||||
</div>
|
||||
<input id="pointSizeSlider" type="range" min="1" max="10" value="2" step="1"/>
|
||||
<p class="sideBarText">Renderer</p>
|
||||
<button id="rendererToggle" data-active="deckgl" title="Renderer wechseln">
|
||||
<span id="rendererLabel">Renderer: Deck.gl</span>
|
||||
<span id="rendererIcon">⇄</span>
|
||||
</button>
|
||||
<button id="openInfoPanel" title="Informationen zur Punktwolke"><img src="info.png"/>Informationen</button>
|
||||
<div class="logos">
|
||||
<a href="http://www.jade-hs.de">
|
||||
<img id="logoJadeHs" src="logoJadeHs.png" />
|
||||
</a>
|
||||
<a href="https://www.lbeg.niedersachsen.de/startseite/">
|
||||
<img id="logoLbeg" src="logoLbeg.svg" />
|
||||
</a>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</button>
|
||||
<button id="openInfoPanel" title="Informationen zur Punktwolke">
|
||||
<img src="info.png" />Informationen
|
||||
</button>
|
||||
<div class="logos">
|
||||
<a href="http://www.jade-hs.de">
|
||||
<img id="logoJadeHs" src="logoJadeHs.png" />
|
||||
</a>
|
||||
<a href="https://www.lbeg.niedersachsen.de/startseite/">
|
||||
<img id="logoLbeg" src="logoLbeg.svg" />
|
||||
</a>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
<main id="main">
|
||||
<div id="location-button">
|
||||
<img id="location" title="Standort zurücksetzen" src="standort.png" />
|
||||
</div>
|
||||
<div id="map"></div>
|
||||
<div id="potree_render_area"></div>
|
||||
<footer>
|
||||
© Arne Zitting u. Hauke Kahrs
|
||||
</footer>
|
||||
<footer>© 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>
|
||||
<img id="info-panel-image" src="" alt="Standortbild" style="display:none;" />
|
||||
<div id="info-image-nav" style="display:none;">
|
||||
<button id="info-img-prev">←</button>
|
||||
<span id="info-image-counter"></span>
|
||||
<button id="info-img-next">→</button>
|
||||
</div>
|
||||
<p id="info-panel-text">Bitte wählen Sie eine Punktwolke aus.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="info-button-outer">
|
||||
</div>
|
||||
<div id="info-panel-inner">
|
||||
<button class="sideBarButtons" id="closeInfoPanel" title="Info einklappen">>></button>
|
||||
<h3 id="info-panel-title">Info</h3>
|
||||
<img id="info-panel-image" src="" alt="Standortbild" style="display: none"/>
|
||||
<div id="info-image-nav" style="display: none">
|
||||
<button id="info-img-prev">←</button>
|
||||
<span id="info-image-counter"></span>
|
||||
<button id="info-img-next">→</button>
|
||||
</div>
|
||||
<p id="info-panel-text">Bitte wählen Sie eine Punktwolke aus.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="info-button-outer"></div>
|
||||
</main>
|
||||
<script src="./libs/jquery/jquery-3.1.1.min.js"></script>
|
||||
<script src="./libs/other/BinaryHeap.js"></script>
|
||||
|
||||
+3
-3
@@ -2,16 +2,16 @@
|
||||
"first": {
|
||||
"title": "Fläche im unteren Bereich",
|
||||
"text": "Dieser Bereich des Steinbruchs zeigt eine natürliche Oberfläche aus Obernkirchener Sandstein. Zwischen einzelnen Sandsteinblöcken haben sich Sträucher und andere Pflanzen angesiedelt. Der Sandstein entstand vor etwa 140 Millionen Jahren in einer küstennahen Landschaft der Unterkreide.",
|
||||
"images": ["stand1_1.jpeg", "stand1_2.jpeg"]
|
||||
"images": ["/stand1_1.jpeg", "/stand1_2.jpeg"]
|
||||
},
|
||||
"second": {
|
||||
"title": "Abbauwand",
|
||||
"text": "An dieser Felswand wird der Obernkirchener Sandstein abgebaut. Das Gestein ist für seine hohe Festigkeit und Witterungsbeständigkeit bekannt und wird seit Jahrhunderten als Bau- und Werkstein genutzt. Es findet sich unter anderem an zahlreichen historischen Gebäuden in Deutschland.",
|
||||
"images": ["stand2_1.jpeg"]
|
||||
"images": ["/stand2_1.jpeg"]
|
||||
},
|
||||
"third": {
|
||||
"title": "Dinosaurier-Spuren",
|
||||
"text": "Auf dieser öffentlich zugänglichen Fläche sind fossile Fußspuren von Dinosauriern erhalten geblieben. Die Spuren entstanden vor rund 140 Millionen Jahren in feuchtem Sand und wurden später durch weitere Sedimentschichten konserviert. Sie gehören zu den bekanntesten Fossilienfunden im Obernkirchener Sandstein.",
|
||||
"images": ["stand3_1.jpeg", "stand3_2.jpeg"]
|
||||
"images": ["/stand3_1.jpeg", "/stand3_2.jpeg"]
|
||||
}
|
||||
}
|
||||
@@ -1,59 +1,60 @@
|
||||
html, body {
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body{
|
||||
margin:0;
|
||||
overflow:hidden;
|
||||
font-family: 'Inter', sans-serif;
|
||||
body {
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
font-family: "Inter", sans-serif;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
#main{
|
||||
width:100vw;
|
||||
height:100vh;
|
||||
position:relative;
|
||||
#main {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#header{
|
||||
position:absolute;
|
||||
top:20px;
|
||||
left:50%;
|
||||
transform:translateX(-50%);
|
||||
z-index:30;
|
||||
padding:14px 28px;
|
||||
#header {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 30;
|
||||
padding: 14px 28px;
|
||||
border-radius: 20px;
|
||||
background:
|
||||
background:
|
||||
linear-gradient(
|
||||
135deg,
|
||||
rgba(200, 200, 200, 0.221) 10%,
|
||||
rgba(79, 79, 79, 0.756) 60%,
|
||||
rgba(47, 47, 47, 0.864) 100%
|
||||
),
|
||||
rgba(24,24,27,0.78);
|
||||
rgba(24, 24, 27, 0.78);
|
||||
backdrop-filter: blur(16px);
|
||||
color:white;
|
||||
font-size:24px;
|
||||
font-weight:600;
|
||||
color: white;
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.536);
|
||||
}
|
||||
|
||||
.logos{
|
||||
margin-top:20px;
|
||||
.logos {
|
||||
margin-top: 20px;
|
||||
margin-left: 12px;
|
||||
opacity:0.8;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.logos img{
|
||||
width:80px;
|
||||
.logos img {
|
||||
width: 80px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.logos img:hover{
|
||||
transform:translateY(-1px);
|
||||
box-shadow: 0 6px 18px rgba(0,0,0,0.12);
|
||||
.logos img:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
#location-button {
|
||||
@@ -67,9 +68,11 @@ body{
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #f8f9fa;
|
||||
border: none !important;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
|
||||
border: none !important;
|
||||
border-radius: 4px;
|
||||
box-shadow:
|
||||
0 0 0 2px rgba(0, 0, 0, 0.1),
|
||||
0 4px 6px rgba(0, 0, 0, 0.05);
|
||||
cursor: pointer;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
@@ -78,28 +81,28 @@ body{
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
|
||||
#location{
|
||||
width:20px;
|
||||
height:20px;
|
||||
object-fit:contain;
|
||||
#location {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
object-fit: contain;
|
||||
margin-left: 1px;
|
||||
margin-top: 1px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#location:hover{
|
||||
transform:scale(1.05);
|
||||
background:rgb(233, 232, 232);
|
||||
#location:hover {
|
||||
transform: scale(1.05);
|
||||
background: rgb(233, 232, 232);
|
||||
}
|
||||
|
||||
#location-button:hover{
|
||||
background:rgb(233, 232, 232);
|
||||
#location-button:hover {
|
||||
background: rgb(233, 232, 232);
|
||||
}
|
||||
|
||||
#sidebar {
|
||||
position: absolute;
|
||||
top: 48%;
|
||||
transform:translateY(-50%);
|
||||
transform: translateY(-50%);
|
||||
left: 20px;
|
||||
width: 210px;
|
||||
padding: 22px;
|
||||
@@ -107,13 +110,13 @@ body{
|
||||
padding-top: 10px;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
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;
|
||||
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;
|
||||
display: flex;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap:8px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
#main {
|
||||
@@ -126,9 +129,9 @@ body{
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#potree_render_area{
|
||||
position:absolute;
|
||||
top:0;
|
||||
#potree_render_area {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@@ -140,50 +143,49 @@ body{
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
select{
|
||||
appearance:none;
|
||||
-webkit-appearance:none;
|
||||
-moz-appearance:none;
|
||||
width:100%;
|
||||
padding:10px 16px;
|
||||
border:none;
|
||||
border-radius:14px;
|
||||
background:rgba(255,255,255,0.92);
|
||||
font-size:14px;
|
||||
font-weight:500;
|
||||
color:#0f172a;
|
||||
select {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
width: 100%;
|
||||
padding: 10px 16px;
|
||||
border: none;
|
||||
border-radius: 14px;
|
||||
background: rgba(255, 255, 255, 0.92);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #0f172a;
|
||||
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.278);
|
||||
cursor:pointer;
|
||||
transition:0.2s;
|
||||
|
||||
cursor: pointer;
|
||||
transition: 0.2s;
|
||||
}
|
||||
|
||||
.selectWrapper{
|
||||
position:relative;
|
||||
width:100%;
|
||||
.selectWrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.selectArrow{
|
||||
position:absolute;
|
||||
right:14px;
|
||||
top:48%;
|
||||
transform:translateY(-50%);
|
||||
pointer-events:none;
|
||||
font-size:14px;
|
||||
color:#000000;
|
||||
.selectArrow {
|
||||
position: absolute;
|
||||
right: 14px;
|
||||
top: 48%;
|
||||
transform: translateY(-50%);
|
||||
pointer-events: none;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
#disable{
|
||||
appearance:none;
|
||||
-webkit-appearance:none;
|
||||
-moz-appearance:none;
|
||||
width:100%;
|
||||
padding:10px 16px;
|
||||
border:none;
|
||||
border-radius:14px;
|
||||
font-size:14px;
|
||||
font-weight:500;
|
||||
background:
|
||||
#disable {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
width: 100%;
|
||||
padding: 10px 16px;
|
||||
border: none;
|
||||
border-radius: 14px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
background:
|
||||
linear-gradient(
|
||||
135deg,
|
||||
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);
|
||||
color: white;
|
||||
color: white;
|
||||
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.278);
|
||||
cursor:pointer;
|
||||
transition:0.2s;
|
||||
cursor: pointer;
|
||||
transition: 0.2s;
|
||||
margin-top: 8px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
#disable.active-state {
|
||||
background:
|
||||
background:
|
||||
linear-gradient(
|
||||
135deg,
|
||||
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);
|
||||
color: white;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#disable.inactive-state {
|
||||
background: rgba(255,255,255,0.92);
|
||||
color: #0f172a;
|
||||
background: rgba(255, 255, 255, 0.92);
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
select:hover{
|
||||
transform:translateY(-1px);
|
||||
box-shadow: 0 6px 18px rgba(0,0,0,0.12);
|
||||
select:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
select:focus{
|
||||
outline:none;
|
||||
box-shadow:0 0 0 4px rgba(37,99,235,0.15), 0 8px 24px rgba(0,0,0,0.12);
|
||||
select:focus {
|
||||
outline: none;
|
||||
box-shadow:
|
||||
0 0 0 4px rgba(37, 99, 235, 0.15),
|
||||
0 8px 24px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
#disable:hover{
|
||||
transform:translateY(-1px);
|
||||
box-shadow: 0 6px 18px rgba(0,0,0,0.12);
|
||||
#disable:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
*{
|
||||
* {
|
||||
transition:
|
||||
background 0.2s,
|
||||
transform 0.01s,
|
||||
opacity 0.2s;
|
||||
}
|
||||
|
||||
footer{
|
||||
footer {
|
||||
z-index: 30;
|
||||
position: absolute;
|
||||
bottom: 8px;
|
||||
@@ -246,13 +250,13 @@ footer{
|
||||
font-size: small;
|
||||
}
|
||||
|
||||
.sideBarText{
|
||||
font-size:80%;
|
||||
margin:0;
|
||||
margin-bottom: -2px;
|
||||
.sideBarText {
|
||||
font-size: 80%;
|
||||
margin: 0;
|
||||
margin-bottom: -2px;
|
||||
}
|
||||
|
||||
#pointSizeSlider{
|
||||
#pointSizeSlider {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
@@ -260,7 +264,7 @@ margin-bottom: -2px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
input[type="range"]{
|
||||
input[type="range"] {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: 100%;
|
||||
@@ -272,12 +276,12 @@ input[type="range"]{
|
||||
outline: none;
|
||||
}
|
||||
|
||||
input[type="range"]::-webkit-slider-thumb{
|
||||
input[type="range"]::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
width:16px;
|
||||
height:16px;
|
||||
border-radius:50%;
|
||||
background:
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 50%;
|
||||
background:
|
||||
linear-gradient(
|
||||
135deg,
|
||||
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);
|
||||
cursor:pointer;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.slider-labels{
|
||||
display:flex;
|
||||
justify-content:space-between;
|
||||
font-size:0.5rem;
|
||||
color:#868686;
|
||||
margin-bottom:0px;
|
||||
margin-top: -5px;
|
||||
.slider-labels {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 0.5rem;
|
||||
color: #868686;
|
||||
margin-bottom: 0px;
|
||||
margin-top: -5px;
|
||||
}
|
||||
|
||||
#title{
|
||||
#title {
|
||||
z-index: 30;
|
||||
position: absolute;
|
||||
top: 75px;
|
||||
left: 50%;
|
||||
transform:translateX(-50%);
|
||||
transform: translateX(-50%);
|
||||
font-size: small;
|
||||
color: #ffffff;
|
||||
text-shadow: 1px 1.5px #00000059;
|
||||
}
|
||||
|
||||
#coordinates{
|
||||
#coordinates {
|
||||
z-index: 30;
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
left: 50%;
|
||||
transform:translateX(-50%);
|
||||
transform: translateX(-50%);
|
||||
font-size: smaller;
|
||||
color: #000000cf;
|
||||
border: none;
|
||||
border-radius: 14px;
|
||||
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.278);
|
||||
padding:8px;
|
||||
padding: 8px;
|
||||
border-radius: 15px;
|
||||
background-color: rgba(255, 255, 255, 0.751);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.sideBarButtons{
|
||||
font-family:monospace;
|
||||
border:none;
|
||||
border-radius:10px;
|
||||
background:
|
||||
.sideBarButtons {
|
||||
font-family: monospace;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
background:
|
||||
linear-gradient(
|
||||
135deg,
|
||||
rgba(200, 200, 200, 0.221) 10%,
|
||||
rgba(79, 79, 79, 0.756) 60%,
|
||||
rgba(47, 47, 47, 0.864) 100%
|
||||
),
|
||||
rgba(24,24,27,0.78);
|
||||
font-size:15px;
|
||||
color:#ffffff;
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.08);
|
||||
cursor:pointer;
|
||||
transition:0.2s;
|
||||
rgba(24, 24, 27, 0.78);
|
||||
font-size: 15px;
|
||||
color: #ffffff;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
|
||||
cursor: pointer;
|
||||
transition: 0.2s;
|
||||
z-index: 30;
|
||||
}
|
||||
|
||||
#closeSideBarButton{
|
||||
align-self: flex-end;
|
||||
#closeSideBarButton {
|
||||
align-self: flex-end;
|
||||
right: 0%;
|
||||
padding:5px 15px;
|
||||
}
|
||||
|
||||
#openSideBarButton{
|
||||
position: absolute;
|
||||
left: 5px;
|
||||
padding:5px 15px;
|
||||
padding: 5px 15px;
|
||||
}
|
||||
|
||||
.buttonRow{
|
||||
#openSideBarButton {
|
||||
position: absolute;
|
||||
left: 5px;
|
||||
padding: 5px 15px;
|
||||
}
|
||||
|
||||
.buttonRow {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
overflow:hidden;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.278);
|
||||
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{
|
||||
background:
|
||||
.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 {
|
||||
background:
|
||||
linear-gradient(
|
||||
135deg,
|
||||
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);
|
||||
color: #ffffff;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
#potree_render_area {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
#info-button-outer {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 20px;
|
||||
transform: translateY(-50%);
|
||||
z-index: 30;
|
||||
#info-button-outer {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 20px;
|
||||
transform: translateY(-50%);
|
||||
z-index: 30;
|
||||
}
|
||||
#rendererToggle {
|
||||
width: 100%;
|
||||
padding: 10px 16px;
|
||||
border: none;
|
||||
border-radius: 14px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-shadow: 0 5px 10px rgba(0,0,0,0.278);
|
||||
transition: 0.2s;
|
||||
width: 100%;
|
||||
padding: 10px 16px;
|
||||
border: none;
|
||||
border-radius: 14px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.278);
|
||||
transition: 0.2s;
|
||||
}
|
||||
|
||||
#rendererToggle[data-active="deckgl"] {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(18,77,216,0.92) 10%,
|
||||
rgba(13,61,175,0.92) 60%,
|
||||
rgba(6,45,135,0.92) 100%);
|
||||
color: #ffffff;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(18, 77, 216, 0.92) 10%,
|
||||
rgba(13, 61, 175, 0.92) 60%,
|
||||
rgba(6, 45, 135, 0.92) 100%
|
||||
);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
#rendererToggle[data-active="potree"] {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(22,163,74,0.92) 10%,
|
||||
rgba(15,118,54,0.92) 60%,
|
||||
rgba(6,78,32,0.92) 100%);
|
||||
color: #ffffff;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(22, 163, 74, 0.92) 10%,
|
||||
rgba(15, 118, 54, 0.92) 60%,
|
||||
rgba(6, 78, 32, 0.92) 100%
|
||||
);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
#rendererToggle:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 6px 18px rgba(0,0,0,0.12);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
#rendererIcon {
|
||||
font-size: 16px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
#openInfoPanel {
|
||||
margin-top: 12px;
|
||||
border: none;
|
||||
border-radius: 14px;
|
||||
width: 100%;
|
||||
padding: 10px 16px;
|
||||
font-size: 14px;
|
||||
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;
|
||||
margin-top: 12px;
|
||||
border: none;
|
||||
border-radius: 14px;
|
||||
width: 100%;
|
||||
padding: 10px 16px;
|
||||
font-size: 14px;
|
||||
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);
|
||||
background: rgb(233, 232, 232);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
#openInfoPanel img {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
object-fit: contain;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
#info-panel {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 48%;
|
||||
right: 20px;
|
||||
transform: translateY(-50%);
|
||||
width: 340px;
|
||||
padding: 18px 22px;
|
||||
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;
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 48%;
|
||||
right: 20px;
|
||||
transform: translateY(-50%);
|
||||
width: 340px;
|
||||
padding: 18px 22px;
|
||||
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;
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
#info-panel.open {
|
||||
display: flex;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#closeInfoPanel {
|
||||
align-self: flex-start;
|
||||
padding: 5px 15px;
|
||||
margin-bottom: 14px;
|
||||
align-self: flex-start;
|
||||
padding: 5px 15px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
#info-panel-title {
|
||||
margin: 0 0 14px 0;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #0f172a;
|
||||
margin: 0 0 14px 0;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
#info-panel-image {
|
||||
width: 100%;
|
||||
border-radius: 12px;
|
||||
object-fit: cover;
|
||||
max-height: 220px;
|
||||
margin-bottom: 14px;
|
||||
width: 100%;
|
||||
border-radius: 12px;
|
||||
object-fit: cover;
|
||||
max-height: 220px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
#info-image-nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
margin-bottom: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
#info-panel-text {
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
color: #1e293b;
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
color: #1e293b;
|
||||
}
|
||||
|
||||
#info-img-prev, #info-img-next {
|
||||
border: none;
|
||||
background: rgba(255,255,255,0.9);
|
||||
border-radius: 8px;
|
||||
padding: 4px 10px;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
box-shadow: 0 2px 6px rgba(0,0,0,0.15);
|
||||
#info-img-prev,
|
||||
#info-img-next {
|
||||
border: none;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
border-radius: 8px;
|
||||
padding: 4px 10px;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
#info-img-prev:hover, #info-img-next:hover {
|
||||
background: rgb(233,232,232);
|
||||
#info-img-prev:hover,
|
||||
#info-img-next:hover {
|
||||
background: rgb(233, 232, 232);
|
||||
}
|
||||
|
||||
#info-image-counter {
|
||||
font-size: 12px;
|
||||
color: #555;
|
||||
font-size: 12px;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.lidar-control-icon {
|
||||
display: none !important;
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.maplibregl-ctrl:has(.lidar-control-icon),
|
||||
.maplibregl-ctrl-group:has(.lidar-control-icon),
|
||||
button:has(.lidar-control-icon) {
|
||||
display: none !important;
|
||||
visibility: hidden !important;
|
||||
width: 0px !important;
|
||||
height: 0px !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
border: none !important;
|
||||
display: none !important;
|
||||
visibility: hidden !important;
|
||||
width: 0px !important;
|
||||
height: 0px !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user