From 8c77921791842bbda80f3eb254092e6e7c0ad648 Mon Sep 17 00:00:00 2001
From: Jaro <jwm.rutjes@student.avans.nl>
Date: Wed, 20 Mar 2024 16:18:38 +0100
Subject: Merge Jaro's code

---
 ui/css/style.css | 57 ++++++++++++++++++++++++++++++++++++++++++++++++++++++--
 ui/index.html    | 30 ++++++++++++++++++++++++++++-
 2 files changed, 84 insertions(+), 3 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%;
+}
diff --git a/ui/index.html b/ui/index.html
index 8971d64..1d0eb37 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -70,7 +70,35 @@
 				</table>
 			</div>
 		</div>
-		<div class="section map">This is a map</div>
+		<div class="section bottom-right">
+			<p>Start</p>
+			<div class="canvas-square" id="myCanvas1">
+				<div class="inner-content">
+					<div class="traffic-light"></div>
+					<div class="barrier"></div>
+					<span class="square-text-first-row">Light <span id="light-one">1</span></span>
+					<span class="square-text-second-row">Amount <span id="amount-one">1</span></span>
+					<span class="square-text-third-row"><span id="speed-one">1</span>km/h</span>
+				</div>
+			</div>
+			<div class="canvas-square" id="myCanvas2">
+				<div class="inner-content">
+					<span class="square-text-first-row">Light <span id="light-two">1</span></span>
+				</div>
+			</div>
+			<div class="canvas-square" id="myCanvas3">
+				<div class="inner-content">
+					<span class="square-text-first-row">Light <span id="light-three">1</span></span>
+					<span class="square-text-second-row">Amount <span id="amount-two">1</span></span>
+				</div>
+			</div>
+			<div class="canvas-square" id="myCanvas4">
+				<div class="inner-content">
+					<span class="square-text-first-row">Light <span id="light-four">1</span></span>
+				</div>
+			</div>
+			<p>End</p>	 
+		</div>
 	</div>
 </body>
 </html>
-- 
cgit v1.2.3