diff options
| -rw-r--r-- | ui/css/style.css | 57 | ||||
| -rw-r--r-- | 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> |