Made the box look good

web/new website/style.css

@@ -1,88 +1,125 @@
 * {
-    margin: 0;
-    padding: 0;
     box-sizing: border-box;
 }
 
-
-.speedometer-scale {
-    width: 8px;
-    height: 280px;
-    background-color: black;
-}
-
-/* CSS */
-.gaugeContainer {
-    width: 30vw;
-    height: 300pxx;
-    border: 3px solid black;
-    fill: grey;
-    margin: 50px auto;
-    position: relative;
-    overflow: hidden; /* Hide the first half of the gauge */
-}
-
-.gaugeValue {
-    width: 10px;
-    height: 150px;
-    position: absolute;
-    bottom: 50%;
-    left: 50%;
-    transform-origin: bottom;
-    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: 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 */
+body {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    margin: 0;
+    background-color: #f0f0f0;
 }
 
 .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 */
+    width: 70vw;
+    height: 20vh;
+    display: flex;
+    flex-direction: column; /* Keep as column */
+    justify-content: flex-start;
+    background-color: #333;
+    color: #fff;
+    padding: 10px;
+    border-radius: 50px;
+    border: 2px solid #333;
+}
+.groupTitle {
+    width: 100%;
+    text-align: center;
+    font-size: 24px;
 }
 
-.groupTitle {
-    text-align: center; /* Center the title */
-    margin-bottom: 20px; /* Some margin below the title */
+.Node {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+}
+
+.Sensorvalues {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-around;
+    flex-wrap: wrap;
+    width: 20%;
+    height: 100%;
+    background-color: #ddd;
+    color: #333;
+    padding: 10px;
+    margin: 5px;
+    border-radius: 10px;
+    text-align: center;
+    position: relative;
+    padding-bottom: 50px; /* Increase bottom padding */
+
+}
+
+.gaugeContainer {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 80%; /* Increase the height from 70% to 80% */
+    position: relative;
+    overflow: visible;
+}
+
+.gaugeImage {
+    width: 100%;
+    height: auto;
+    max-height: 100%;
+    object-fit: contain;
+    position: absolute; /* Make the image position absolute */
+    top: 0;
+    left: 0;
+    z-index: 1; /* Make the image display below the needle */
+}
+
+.gaugeValue, .gaugeText {
+    width: 100%;
+    text-align: center;
+    font-size: 24px;
+    z-index: 2;
+}
+
+.gaugeText {
+    width: 100%;
+    text-align: center;
+    font-size: 24px;
+    z-index: 2;
+    position: absolute;
+    bottom: -30px; /* Adjust this value to move the text further down */
+
+}
+
+
+.valueContainer {
+    display: flex;
+    justify-content: center;
+    margin-top: 10px;
+}
+
+#valueText {
+    font-size: 20px;
+}
+
+.needle {
+    position: absolute;
+    margin-bottom: 2%; /* Lower the needle to the bottom */
+    left: 50%;
+    width: 2px;
+    height: 70%;
+    background-color: black;
+    transform-origin: bottom;
+    z-index: 3; /* Make the needle display above the image */
+}
+
+.contentContainer {
+    display: flex;
+    flex-direction: row; /* Layout children side by side */
+    width: 100%;
+    height: 100%;
 }