diff options
Diffstat (limited to 'ui/index.html')
| -rw-r--r-- | ui/index.html | 77 |
1 files changed, 77 insertions, 0 deletions
diff --git a/ui/index.html b/ui/index.html new file mode 100644 index 0000000..8971d64 --- /dev/null +++ b/ui/index.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <title>Four Sections Layout</title> + <link rel="stylesheet" href="css/style.css"> + <script type="module" src="js/main.js"></script> +</head> +<body> + <div class="container"> + <div class="section overview_control"> + <ul> + <li class="list-item"> + <span class="dot"></span> Fotocellen + <div class="buttons"> + <button onclick="onOffButton(this)" value="1">On</button> + <button onclick="onOffButton(this)" value="0">Off</button> + </div> + </li> + <li class="list-item"> + <span class="dot"></span> CCTV + <div class="buttons"> + <button onclick="onOffButton(this)" value="1">On</button> + <button onclick="onOffButton(this)" value="0">Off</button> + </div> + </li> + <li class="list-item"> + <span class="dot"></span> Verlichting + <div class="buttons"> + <button onclick="onOffButton(this)" value="1">On</button> + <button onclick="onOffButton(this)" value="0">Off</button> + </div> + </li> + <li class="list-item"> + <span class="dot"></span> Verkeerslicht + <div class="buttons"> + <button onclick="onOffButton(this)" value="1">On</button> + <button onclick="onOffButton(this)" value="0">Off</button> + </div> + </li> + <li class="list-item"> + <span class="dot"></span> Slagboom + <div class="buttons"> + <button onclick="onOffButton(this)" value="1">On</button> + <button onclick="onOffButton(this)" value="0">Off</button> + </div> + </li> + <li class="list-item"> + <span class="dot"></span> Matrixbord + <div class="buttons"> + <select class="dropdown"> + <option value="wegafsluiting">Wegafsluiting</option> + <option value="werkzaamheden">Werkzaamheden</option> + <option value="uitschakelen">Uitschakelen</option> + </select> + </div> + </li> + </ul> + </div> + <div class="section notifications" id="sectionNotifications"> + <div class="button-wrapper"> + <button id="addRowBtn">Add Row</button> + </div> + <div class="table-wrapper"> + <table id="myTable"> + <tr> + <th>Column 1</th> + </tr> + </table> + </div> + </div> + <div class="section map">This is a map</div> + </div> +</body> +</html> + |