+test

frontend/src/routes/+page.svelte

@@ -5,4 +5,6 @@
 <a href="setup">setup</a>
 <br>
 <a href="surfers">surfers</a>
+<br>
+<a href="pri">test</a>
 

frontend/src/routes/pri/+page.svelte

@@ -0,0 +1,82 @@
+<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">
+        <h2>00:00</h2>
+    </div>
+    <div class="button">
+        <button>START</button>
+    </div>
+</div>
+
+<div class="container">
+    <div class="line">
+        <div class="pri">
+            <h1>P</h1>
+        </div>
+        <div class="color">
+
+        </div>
+    </div>
+</div>
+
+<style>
+    .header {
+        display: grid;
+        grid-template-columns: repeat(5, 1fr);
+        grid-template-rows: 3rem;
+        align-items: center;
+    }
+
+    .select {
+        grid-column: 1/2;
+        justify-self: start;
+    }
+
+    .timer {
+        grid-column: 2/5;
+        justify-self: center;
+    }
+
+    .button {
+        grid-column: 5/6;
+        justify-self: end;
+    }
+
+    .container {
+        display: grid;
+        
+    }
+
+    .line {
+        display: grid;
+        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: yellow;
+        align-items: center;
+        justify-content: center;
+        justify-self: start;
+    }
+
+    .color {
+        grid-area: color;
+		width: 100%;
+        height: 100%;
+        background-color: blue;
+        justify-self: end;
+    }
+
+</style>