Menü verbessert: Button zur Qualitätsauswahl, Pfeilchen im DropDown

index.html

@@ -32,6 +32,7 @@
     <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">OpenFreeMap hell</option>
@@ -41,16 +42,27 @@
         <option value="terrain">Terrain</option>
         <option value="satellite_terrain">Terrain mit Satellitenbild</option>
       </select>
+      <span class="selectArrow">&#9207</span>
+      </div>
+      <div class="selectWrapper">
       <select name="pointcloud" id="pointcloud">
         <option value="" disabled selected>Punktwolke auswählen</option>
         <option value="first">1. Fläche unten</option>
         <option value="second">2. Felswand</option>
         <option value="third">3. Fläche oben mit Spuren</option>
       </select>
+      <span class="selectArrow">&#9207</span>
+      </div>
       <button id="disable">Punktwolke ausblenden</button>
-      <p id="pointSliderValue"></p>
+      <p class="sideBarText">Qualität der Punktwolke</p>
+      <div id="buttonRow">
+        <button class="qualityButtons">niedrig</button>
+        <button class="qualityButtons active">mittel</button>
+        <button class="qualityButtons">hoch</button>
+      </div>
+      <p class="sideBarText" id="pointSliderValue"></p>
       <input id="pointSlider" type="range" min="1000000" max="9000000" value="3000000">
-      <p id="pointSizeSliderValue"></p>
+      <p class="sideBarText" id="pointSizeSliderValue"></p>
       <input id="pointSizeSlider" type="range" min="0.1" max="5" value="1" step="0.1">
       <div class="logos">
         <a href="http://www.jade-hs.de">

main.js

@@ -366,3 +366,19 @@ if (closeButton) {
     });
 }
 
+// Qualitätsbuttons aktivieren/deaktivieren
+const qualityButtons = document.querySelectorAll('.qualityButtons');
+
+qualityButtons.forEach(button => {
+
+    button.addEventListener('click', () => {
+
+        qualityButtons.forEach(btn => {
+            btn.classList.remove('active');
+        });
+
+        button.classList.add('active');
+
+    });
+
+});

style.css

@@ -43,7 +43,7 @@ body{
 }
 
 .logos{
-  margin-top:50px;
+  margin-top:30px;
   margin-left: 12px;
   opacity:0.8;
 }
@@ -152,6 +152,21 @@ select{
   
 }
 
+.selectWrapper{
+  position:relative;
+  width:100%;
+}
+
+.selectArrow{
+  position:absolute;
+  right:14px;
+  top:48%;
+  transform:translateY(-50%);
+  pointer-events:none;
+  font-size:14px;
+  color:#000000;
+}
+
 #disable{
   appearance:none;
   -webkit-appearance:none;
@@ -175,7 +190,7 @@ select{
   cursor:pointer;
   transition:0.2s;
   margin-top: 8px;
-  margin-bottom: 6px;
+  margin-bottom: 12px;
 }
 
 select:hover{
@@ -210,7 +225,7 @@ footer{
   font-size: small;
 }
 
-#pointSliderValue, #pointSizeSliderValue{
+.sideBarText{
 font-size:80%;
 margin:0;
 }
@@ -310,3 +325,41 @@ position: absolute;
   left: 5px;
   padding:5px 15px;
 }
+
+#buttonRow{
+  display: flex;
+  width: 100%;
+  border: none;
+  border-radius: 14px;
+  overflow:hidden;
+  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.278);
+  margin-bottom: 12px;
+  }
+
+.qualityButtons{
+  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{
+    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%
+    ),
+    rgba(6, 45, 135, 0.92);
+    color: #ffffff;
+}