Added fourth grid. Made grid 1 change depending on which item is selected

3 files changed, 33 insertions, 0 deletions

diff --git a/ui/sections/lfv/barrier.html b/ui/sections/lfv/barrier.html
new file mode 100644
index 0000000..64705b0
--- /dev/null
+++ b/ui/sections/lfv/barrier.html
@@ -0,0 +1,10 @@
+<h2>Barrier Control</h2>
+<button onclick="setStatus('Open')">Open</button>
+<button onclick="setStatus('Close')">Close</button>
+<div id="statusDisplay">Status: </div>
+
+<script>
+    function setStatus(status) {
+        document.getElementById('statusDisplay').innerText = `Status: ${status}`;
+    }
+</script>
diff --git a/ui/sections/lfv/lights.html b/ui/sections/lfv/lights.html
new file mode 100644
index 0000000..bb37603
--- /dev/null
+++ b/ui/sections/lfv/lights.html
@@ -0,0 +1,13 @@
+<h2>Lights Control</h2>
+<ul>
+    <li><button onclick="setPercentage(0)">0%</button></li>
+    <li><button onclick="setPercentage(10)">10%</button></li>
+    <li><button onclick="setPercentage(20)">20%</button></li>
+</ul>
+<div id="percentageDisplay">Percentage: 0%</div>
+
+<script>
+    function setPercentage(percentage) {
+        document.getElementById('percentageDisplay').innerText = `Percentage: ${percentage}%`;
+    }
+</script>
diff --git a/ui/sections/lfv/traffic_lights.html b/ui/sections/lfv/traffic_lights.html
new file mode 100644
index 0000000..8fa3eb4
--- /dev/null
+++ b/ui/sections/lfv/traffic_lights.html
@@ -0,0 +1,10 @@
+<h2>Traffic Lights Control</h2>
+<button onclick="setStatus('Red')">Red</button>
+<button onclick="setStatus('Off')">Off</button>
+<div id="statusDisplay">Status: </div>
+
+<script>
+    function setStatus(status) {
+        document.getElementById('statusDisplay').innerText = `Status: ${status}`;
+    }
+</script>