diff --git a/web/newWebsite/graphs.html b/web/newWebsite/graphs.html
index 9fbb8a0..975f041 100644
--- a/web/newWebsite/graphs.html
+++ b/web/newWebsite/graphs.html
@@ -4,7 +4,7 @@
-
+
Graphs
diff --git a/web/newWebsite/index.html b/web/newWebsite/index.html
index 7f48e90..2519ffb 100644
--- a/web/newWebsite/index.html
+++ b/web/newWebsite/index.html
@@ -4,7 +4,7 @@
-
+
Gauges
diff --git a/web/newWebsite/settings.html b/web/newWebsite/settings.html
index e69de29..6c33bd2 100644
--- a/web/newWebsite/settings.html
+++ b/web/newWebsite/settings.html
@@ -0,0 +1,33 @@
+
+
+
+
+
+
+
+ Gauges
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/web/newWebsite/styles/graph-styles.css b/web/newWebsite/styles/graph-styles.css
index e69de29..8ad355d 100644
--- a/web/newWebsite/styles/graph-styles.css
+++ b/web/newWebsite/styles/graph-styles.css
@@ -0,0 +1,168 @@
+* {
+ box-sizing: border-box;
+ font-family: "Roboto", sans-serif;
+}
+
+body {
+ padding-top: 5vw;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100vh;
+ margin: 0;
+ background-color: #f0f0f0;
+ flex-direction: column;
+ background-color: #afafaf;
+
+}
+
+.gaugeGroup {
+ width: 98vw;
+ 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;
+ clear: both;
+ margin-bottom: 10px;
+ position: relative;
+ float: top;
+}
+.groupTitle {
+ width: 100%;
+ text-align: center;
+ font-size: 24px;
+}
+
+.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: 15%;
+ height: 110%;
+ background-color: #ddd;
+ color: #333;
+ padding: 10px;
+ margin: 10px;
+ border-radius: 10px;
+ text-align: center;
+ position: relative;
+ padding-bottom: 6vh; /* 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: 200%;
+ object-fit: contain;
+ position: absolute; /* Make the image position absolute */
+ top: 0;
+ left: 0;
+ z-index: 1; /* Make the image display below the needle */
+ bottom: 0;
+ margin-bottom: 10px;
+}
+
+.gaugeValue, .gaugeText {
+ width: 100%;
+ text-align: center;
+ font-size: 24px;
+ z-index: 2;
+}
+
+.gaugeText {
+ width: 100%;
+ text-align: center;
+ font-size: 1.4vw;
+ z-index: 2;
+ position: absolute;
+ bottom: -3.2vw; /* 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;
+ bottom: -40%; /* Lower the needle to the bottom */
+ left: 50%;
+ width: 2px;
+ height: 110%;
+ 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%;
+}
+
+.navbar {
+ background-color: #333;
+ height: 60px;
+ display: flex;
+ align-items: center;
+ padding: 0 20px;
+ position: fixed; /* Fix the navbar at the top of the page */
+ top: 0; /* Position it at the very top */
+ width: 100%; /* Make it span the full width of the page */
+ z-index: 1000; /* Make sure it's above all other elements */
+}
+
+.navbar-nav {
+ list-style: none;
+ display: flex;
+ align-items: center;
+ justify-content: center; /* Center the links horizontally */
+ height: 100%;
+ width: 100%; /* Make it span the full width of the navbar */
+}
+
+.nav-item {
+ margin-right: 20px;
+}
+
+.nav-link {
+ color: #fff;
+ text-decoration: none;
+ font-size: 18px;
+}
\ No newline at end of file