created row of gauges

web/new website/style.css

@@ -4,24 +4,6 @@
     box-sizing: border-box;
 }
 
-.gaugeContainer {
-    width: 300px;
-    height: 300px;
-    border: 3px solid black;
-    border-radius: 50%;
-    margin: 50px auto;
-    position: relative;
-}
-
-.center-point {
-    width: 20px;
-    height: 20px;
-    background-color: black;
-    border-radius: 50%;
-    position: absolute;
-    top: 137px;
-    left: 137px;
-}
 
 .speedometer-scale {
     width: 8px;
@@ -29,16 +11,15 @@
     background-color: black;
 }
 
-/* CSS */
 /* CSS */
 .gaugeContainer {
-    width: 300px;
-    height: 300px;
+    width: 30vw;
+    height: 300pxx;
     border: 3px solid black;
-    border-radius: 50%;
+    fill: grey;
     margin: 50px auto;
     position: relative;
-    display: block;
+    overflow: hidden; /* Hide the first half of the gauge */
 }
 
 .gaugeValue {
@@ -48,12 +29,60 @@
     bottom: 50%;
     left: 50%;
     transform-origin: bottom;
-    transition: transform 0.3s ease, background-color 0.3s ease; /* Smooth transition for rotation and color change */
+    transition: transform 0.3s ease, background-color 0.3s ease;
+}
+
+.gaugeText {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-size: 24px;
+    text-align: center;
+    z-index: 2; /* Bring the value to the front */
 }
 
 .gaugeImage {
     display: block;
     margin-left: auto;
     margin-right: auto;
-    width: 100%;
+    width: auto;
+    z-index: 2; /* Bring the value to the front */
+}
+
+.gaugeContainer {
+    width: 80%; /* Adjust this value as necessary */
+    height: 80%; /* Adjust this value as necessary */
+    border: 3px solid black;
+    fill: grey;
+    margin: 10% auto;
+    position: relative;
+    overflow: hidden;
+}
+
+.Node {
+    display: flex; /* Use Flexbox */
+    justify-content: space-between; /* Distribute the items evenly along the horizontal line */
+    flex-wrap: wrap; /* Allow the items to wrap onto multiple lines if necessary */
+}
+
+.Sensorvalues {
+    flex: 1 0 20%; /* Allow the items to grow and shrink as necessary, and set the base width to 20% */
+    margin: 10px; /* Add some margin around the items */
+    background-color: #333; /* Dark background color */
+    color: #fff; /* Light text color */
+    padding: 20px; /* Some padding around the gauges */
+    border-radius: 10px; /* Round borders */
+}
+
+.gaugeGroup {
+    background-color: #333; /* Dark background color */
+    color: #fff; /* Light text color */
+    padding: 20px; /* Some padding around the gauges */
+    margin-bottom: 20px; /* Some margin below the group */
+}
+
+.groupTitle {
+    text-align: center; /* Center the title */
+    margin-bottom: 20px; /* Some margin below the title */
 }