From 053efa3b1b9077850642cc36402bba8946496106 Mon Sep 17 00:00:00 2001
From: Linux User <miki@svelte-dev.>
Date: Wed, 3 Jan 2024 17:27:48 +0000
Subject: [PATCH] +test vert

---
 frontend/src/routes/+page.svelte      |   4 +-
 frontend/src/routes/pri/+page.svelte  |   7 +-
 frontend/src/routes/vert/+page.svelte | 102 ++++++++++++++++++++++++++
 3 files changed, 111 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/routes/vert/+page.svelte

diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index 1f4b6ca..31dd965 100644
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -6,5 +6,7 @@
 <br>
 <a href="surfers">surfers</a>
 <br>
-<a href="pri">test</a>
+<a href="pri">horizontal</a>
+<br>
+<a href="vert">vertical</a>
 
diff --git a/frontend/src/routes/pri/+page.svelte b/frontend/src/routes/pri/+page.svelte
index c462114..dea32c2 100644
--- a/frontend/src/routes/pri/+page.svelte
+++ b/frontend/src/routes/pri/+page.svelte
@@ -11,7 +11,7 @@
             </select>
         </div>
         <div class="timer">
-            00:00
+            <a href="/">00:00</a>
         </div>
         <div class="button">
             <button>START</button>
@@ -30,6 +30,11 @@
 </div>
 
 <style>
+    a:link, a:hover, a:visited, a:active {
+        text-decoration: none;
+        color:bisque;
+    }
+
     .container {
         display: grid;
         grid-gap: 5px;
diff --git a/frontend/src/routes/vert/+page.svelte b/frontend/src/routes/vert/+page.svelte
new file mode 100644
index 0000000..dea32c2
--- /dev/null
+++ b/frontend/src/routes/vert/+page.svelte
@@ -0,0 +1,102 @@
+<script>
+    const lines = 5;
+</script>
+
+<div class="container">
+    <div class="header">
+        <div class="select">
+            <select name="heats" id="heats">
+                <option value="uno">Uno</option>
+                <option value="due">Due</option>
+            </select>
+        </div>
+        <div class="timer">
+            <a href="/">00:00</a>
+        </div>
+        <div class="button">
+            <button>START</button>
+        </div>
+    </div>
+    {#each Array(lines) as _}
+        <div class="line">
+            <div class="pri">
+                <h1>P</h1>
+            </div>
+            <div class="color">
+
+            </div>
+        </div>
+    {/each}
+</div>
+
+<style>
+    a:link, a:hover, a:visited, a:active {
+        text-decoration: none;
+        color:bisque;
+    }
+
+    .container {
+        display: grid;
+        grid-gap: 5px;
+        grid-auto-flow: row;
+    }
+
+    .header {
+        display: grid;
+        grid-template-columns: 1fr 3fr 1fr;
+        grid-template-areas: 
+            "select timer button";
+        grid-template-rows: 4rem;
+        align-items: center;
+        background-color: darkblue;
+    }
+
+    .select {
+        grid-area: select;
+        justify-self: start;
+        margin-left: 5px;
+    }
+
+    .timer {
+        grid-area: timer;
+        text-align: center;
+        color: beige;
+        font-size: 3.5rem;
+    }
+
+    .button {
+        grid-area: button;
+        justify-self: end;
+        margin-right: 5px;
+    }
+
+    .line {
+        display: grid;
+        grid-gap: 4px;
+        grid-template-columns: repeat(6, 1fr);
+        grid-template-rows: 4rem;
+        grid-template-areas: 
+            "pri color color color color color";
+        align-items: center;
+    }
+
+    .pri {
+        grid-area: pri;
+        width: 100%;
+        height: 100%;
+        background-color: red;
+        text-justify: center;
+        text-align: center;
+        font-size: 1.5rem;
+        border-radius: 10px;
+    }
+
+    .color {
+        grid-area: color;
+		width: 100%;
+        height: 100%;
+        background-color: blue;
+        justify-self: end;
+    }
+
+</style>
\ No newline at end of file