clean up some code

1 files changed, 92 insertions, 0 deletions

diff --git a/ui/css/style.css b/ui/css/style.css
new file mode 100644
index 0000000..e16181c
--- /dev/null
+++ b/ui/css/style.css
@@ -0,0 +1,92 @@
+/* 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;
+	height: 100vh;
+}
+
+.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;
+	width: 100%;
+	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;
+	border-radius: 999px;
+	margin-right: 10px;
+}
+.dot.on { background-color: green; }
+.dot.off { background-color: red; }
+
+.buttons {
+	margin-left: auto;
+}
+.dropdown {
+	margin-left: 10px;
+}
+