diff --git a/web/new website/gauge.js b/web/new website/gauge.js new file mode 100644 index 0000000..6040164 --- /dev/null +++ b/web/new website/gauge.js @@ -0,0 +1,20 @@ +// JavaScript +function updateGauge(value) { + const gaugeValue = document.getElementById('gaugeValue'); + const maxGaugeValue = 100; // Maximum value the gauge can display + const rotationDegree = ((value / maxGaugeValue) * 180) - 90; // Convert value to degree (-90 to 90) + + gaugeValue.style.transform = `rotate(${rotationDegree}deg)`; + + // Change color based on value + if (value <= 40) { + gaugeValue.style.backgroundColor = 'green'; + } else if (value <= 80) { + gaugeValue.style.backgroundColor = 'orange'; + } else { + gaugeValue.style.backgroundColor = 'red'; + } +} + +// Example usage: +updateGauge(50); // Rotates the gauge to 0 degrees (50 out of 100) and changes color to orange \ No newline at end of file diff --git a/web/new website/gauge.png b/web/new website/gauge.png new file mode 100644 index 0000000..bc36a2b Binary files /dev/null and b/web/new website/gauge.png differ diff --git a/web/new website/index.html b/web/new website/index.html new file mode 100644 index 0000000..240352b --- /dev/null +++ b/web/new website/index.html @@ -0,0 +1,32 @@ + + + + + + bruh + + + + +
+
+
+ + +
+ +
+
+
+
+ + + + + + + + + + \ No newline at end of file diff --git a/web/new website/style.css b/web/new website/style.css new file mode 100644 index 0000000..b17f43c --- /dev/null +++ b/web/new website/style.css @@ -0,0 +1,59 @@ +* { + margin: 0; + padding: 0; + 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; + height: 280px; + background-color: black; +} + +/* CSS */ +/* CSS */ +.gaugeContainer { + width: 300px; + height: 300px; + border: 3px solid black; + border-radius: 50%; + margin: 50px auto; + position: relative; + display: block; +} + +.gaugeValue { + width: 10px; + height: 150px; + position: absolute; + bottom: 50%; + left: 50%; + transform-origin: bottom; + transition: transform 0.3s ease, background-color 0.3s ease; /* Smooth transition for rotation and color change */ +} + +.gaugeImage { + display: block; + margin-left: auto; + margin-right: auto; + width: 100%; +} \ No newline at end of file