From 259640c94cc0d0c1c20e0b4406bfc1102e9483e5 Mon Sep 17 00:00:00 2001
From: Linux User <miki@svelte-dev.>
Date: Wed, 3 Jan 2024 16:38:04 +0000
Subject: [PATCH] +test

---
 frontend/src/routes/+page.svelte     |  2 +
 frontend/src/routes/pri/+page.svelte | 82 ++++++++++++++++++++++++++++
 2 files changed, 84 insertions(+)
 create mode 100644 frontend/src/routes/pri/+page.svelte

diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index 18bc6b1..1f4b6ca 100644
--- a/frontend/src/routes/+page.svelte
+++ b/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>
 
diff --git a/frontend/src/routes/pri/+page.svelte b/frontend/src/routes/pri/+page.svelte
new file mode 100644
index 0000000..8ab5ad7
--- /dev/null
+++ b/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>
\ No newline at end of file