From ccbf5f66f88f66e98bfa2d566524cd5636b5d8ee Mon Sep 17 00:00:00 2001 From: SiemV Date: Tue, 19 Mar 2024 21:26:23 +0100 Subject: Add files from Siem --- ui/file.html | 100 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ ui/script.js | 15 +++++++++ ui/style.css | 89 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 204 insertions(+) create mode 100644 ui/file.html create mode 100644 ui/script.js create mode 100644 ui/style.css (limited to 'ui') diff --git a/ui/file.html b/ui/file.html new file mode 100644 index 0000000..19c356a --- /dev/null +++ b/ui/file.html @@ -0,0 +1,100 @@ + + + + + +Four Sections Layout + + + + + +
+
+
    +
  • + Fotocellen +
    + + +
    +
    • +
  • + CCTV +
    + + +
    +
    • +
  • + Verlichting +
    + + +
    +
    • +
  • + Verkeerslicht +
    + + +
    +
    • +
  • + Slagboom +
    + + +
    +
    • +
  • + Matrixbord +
    + +
    +
    • +
+ + +
+
+
+ +
+
+ + + + +
Column 1
+
+
+
This is a map
+
+ + + + diff --git a/ui/script.js b/ui/script.js new file mode 100644 index 0000000..6a5e457 --- /dev/null +++ b/ui/script.js @@ -0,0 +1,15 @@ +// Initialize a counter to keep track of the row number +var rowCount = 1; + +// JavaScript for adding a row dynamically at the top +document.getElementById("addRowBtn").addEventListener("click", function() { + var table = document.getElementById("myTable"); + var row = table.insertRow(1); // Insert row at the top of the table + var cell = row.insertCell(0); // Insert cell into the row + cell.innerHTML = "Hallo siem ik ben dit aan het testen. er blijven maar 10 statussen in deze tabel " + rowCount++; // Add content to the cell with incremented counter + var size = table.rows.length; + var lastRowIndex = table.rows.length - 1; // Index of the last row + if (size > 11) { // Check if there is more than one row (excluding the header row) + table.deleteRow(lastRowIndex); // Delete the last row + } +}); diff --git a/ui/style.css b/ui/style.css new file mode 100644 index 0000000..6cb4598 --- /dev/null +++ b/ui/style.css @@ -0,0 +1,89 @@ +/* CSS for styling */ +body, html { + margin: 0; + padding: 0; + height: 100%; + display: flex; + justify-content: center; + align-items: center; +} + +.container { + display: grid; + grid-template-columns: 1fr 2fr; + grid-template-rows: 1fr 2fr; + gap: 10px; + width: 100vw; /* Set width to 100% of viewport width */ + height: 100vh; /* Set height to 100% of viewport height */ +} + +.section { + background-color: #f0f0f0; + border: 1px solid #ccc; + display: flex; + flex-direction: column; /* Ensure content within sections stacks vertically */ + justify-content: center; + align-items: center; + font-size: 24px; + overflow-y: auto; /* Add vertical scrolling */ +} + +.section.overview_control { + grid-row: 1 / span 2; /* Span the top left section across both rows */ +} + + +.table-wrapper { + flex-grow: 1; /* Table wrapper takes remaining space */ + display: flex; + justify-content: flex-start; /* Align content to the left */ + align-items: flex-start; /* Align content to the top */ + flex-direction: column; /* Content arranged in a column */ + overflow: auto; /* Enable scrolling within the table wrapper */ +} + +#myTable { + background-color: #fff; /* Set background color for the table */ + width: 100%; /* Ensure table takes full width of its container */ + border-collapse: collapse; /* Collapse table borders */ +} + +#myTable th { + position: sticky; + top: 0; /* Stick the table header to the top */ + background-color: #f0f0f0; /* Set background color for the sticky header */ + z-index: 1; /* Ensure it stays above other content */ + width: 100%; /* Ensure table header takes full width */ +} +.button-wrapper { + position: sticky; + top: 0; /* Stick the button wrapper to the top */ + background-color: #f0f0f0; /* Set background color for the sticky wrapper */ + padding: 10px; /* Add padding for spacing */ + left: 10px; +} + +ul { + list-style-type: none; + padding: 0; +} +.list-item { + margin-bottom: 10px; + display: flex; + align-items: center; +} +.dot { + height: 10px; + width: 10px; + background-color: red; + border-radius: 50%; + margin-right: 10px; +} +.buttons { + margin-left: auto; +} +.dropdown { + margin-left: 10px; +} + +/* Additional styles as needed */ -- cgit v1.2.3