From feb7a342718f0d014678517bf45e0043846905a7 Mon Sep 17 00:00:00 2001
From: Sean <heavydragon99@outlook.com>
Date: Thu, 21 Mar 2024 09:30:20 +0100
Subject: Added fourth grid. Made grid 1 change depending on which item is
 selected

---
 ui/sections/lfv/barrier.html        | 10 ++++++++++
 ui/sections/lfv/lights.html         | 13 +++++++++++++
 ui/sections/lfv/traffic_lights.html | 10 ++++++++++
 3 files changed, 33 insertions(+)
 create mode 100644 ui/sections/lfv/barrier.html
 create mode 100644 ui/sections/lfv/lights.html
 create mode 100644 ui/sections/lfv/traffic_lights.html

(limited to 'ui/sections/lfv')

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>
-- 
cgit v1.2.3