Merge Jaro's code

1 files changed, 55 insertions, 2 deletions

diff --git a/ui/css/style.css b/ui/css/style.css
index e16181c..3d92840 100644
--- a/ui/css/style.css
+++ b/ui/css/style.css
@@ -2,7 +2,6 @@
 body, html {
 	margin: 0;
 	padding: 0;
-	height: 100%;
 	display: flex;
 	justify-content: center;
 	align-items: center;
@@ -32,7 +31,6 @@ body, html {
 	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;
@@ -90,3 +88,58 @@ ul {
 	margin-left: 10px;
 }
 
+.bottom-right {
+	position: relative;
+	display: flex;
+	flex-direction: row;
+	align-items: center; /* Align squares to the center horizontally */
+}
+.canvas-square {
+	border: 5px solid black;
+	width: calc(20% - 5px);
+	height: calc(40% - 5px);
+	background-color: gray;
+}
+.traffic-light {
+	width: 20px;
+	height: 20px;
+	background-color: red;
+	position: absolute;
+	bottom: 5px;
+	right: 5px;
+}
+.barrier {
+	width: 20px;
+	height: 20px;
+	background-color: red;
+	position: absolute;
+	bottom: 5px;
+	left: 5px;
+}
+
+/* Styles for the text inside the squares */
+.square-text-first-row {
+	position: absolute;
+	top: 5px;
+	left: 5px;
+}
+
+.square-text-second-row{
+	position: absolute;
+	top: 30px;
+	left: 5px;
+}
+
+.square-text-third-row{
+	position: absolute;
+	top: 55px;
+	left: 5px;
+}
+
+
+/* Styles for the inner content of the squares */
+.inner-content {
+	position: relative;
+	width: 100%;
+	height: 100%;
+}