buttons für farbdarstellung hinzugefügt

index.html

@@ -55,11 +55,16 @@
       </div>
       <button id="disable">Punktwolke ausblenden</button>
       <p class="sideBarText">Qualität der Punktwolke</p>
-      <div id="buttonRow">
+      <div class="buttonRow">
         <button class="qualityButtons">niedrig</button>
         <button class="qualityButtons active">mittel</button>
         <button class="qualityButtons">hoch</button>
       </div>
+      <p class="sideBarText">Farbdarstellung</p>
+      <div class="buttonRow">
+        <button class="colorButtons active">RGB</button>
+        <button class="colorButtons">höhencodiert</button>
+      </div>
       <p class="sideBarText" id="pointSliderValue"></p>
       <input id="pointSlider" type="range" min="1000000" max="9000000" value="3000000">
       <p class="sideBarText" id="pointSizeSliderValue"></p>

main.js

@@ -383,3 +383,21 @@ qualityButtons.forEach(button => {
     });
 
 });
+
+
+// Farbbuttons aktivieren/deaktivieren
+const colorButtons = document.querySelectorAll('.colorButtons');
+
+colorButtons.forEach(button => {
+
+    button.addEventListener('click', () => {
+
+        colorButtons.forEach(btn => {
+            btn.classList.remove('active');
+        });
+
+        button.classList.add('active');
+
+    });
+
+});

style.css

@@ -43,7 +43,7 @@ body{
 }
 
 .logos{
-  margin-top:30px;
+  margin-top:25px;
   margin-left: 12px;
   opacity:0.8;
 }
@@ -94,7 +94,7 @@ body{
 
 #sidebar {
   position: absolute;
-  top: 50%;
+  top: 48%;
   transform:translateY(-50%);
   left: 20px;
   width: 200px;
@@ -107,7 +107,7 @@ body{
   z-index: 20;
   display: flex;          
   flex-direction: column;
-  gap:10px;
+  gap:8px;
 }
 
 #main {
@@ -139,11 +139,11 @@ select{
   -webkit-appearance:none;
   -moz-appearance:none;
   width:100%;
-  padding:14px 16px;
+  padding:10px 16px;
   border:none;
   border-radius:14px;
   background:rgba(255,255,255,0.92);
-  font-size:15px;
+  font-size:14px;
   font-weight:500;
   color:#0f172a;
   box-shadow: 0 5px 10px rgba(0, 0, 0, 0.278);
@@ -172,7 +172,7 @@ select{
   -webkit-appearance:none;
   -moz-appearance:none;
   width:100%;
-  padding:14px 16px;
+  padding:10px 16px;
   border:none;
   border-radius:14px;
    background:
@@ -183,14 +183,14 @@ select{
       rgba(6, 45, 135, 0.92) 100%
     ),
     rgba(6, 45, 135, 0.92);
-  font-size:15px;
+  font-size:14px;
   font-weight:500;
   color:#ffffff;
   box-shadow: 0 5px 10px rgba(0, 0, 0, 0.278);
   cursor:pointer;
   transition:0.2s;
   margin-top: 8px;
-  margin-bottom: 12px;
+  margin-bottom: 10px;
 }
 
 select:hover{
@@ -326,17 +326,17 @@ position: absolute;
   padding:5px 15px;
 }
 
-#buttonRow{
+.buttonRow{
   display: flex;
   width: 100%;
   border: none;
-  border-radius: 14px;
+  border-radius: 10px;
   overflow:hidden;
   box-shadow: 0 5px 10px rgba(0, 0, 0, 0.278);
-  margin-bottom: 12px;
+  margin-bottom: 10px;
   }
 
-.qualityButtons{
+.qualityButtons, .colorButtons{
   flex: 1;
   margin: 0;
   appearance:none;
@@ -352,7 +352,7 @@ position: absolute;
   transition:0.2s;
 }
 
-.qualityButtons.active{
+.qualityButtons.active, .colorButtons.active{
     background:
     linear-gradient(
       135deg,