From b0c64d01e9a25d3f6f862967e0204e4ebdae9964 Mon Sep 17 00:00:00 2001
From: Miki <mikif70@gmail.com>
Date: Tue, 12 Dec 2023 15:51:26 +0000
Subject: [PATCH] =setup layout

---
 frontend/src/routes/setup/+page.svelte | 113 ++++++++++++++++++++-----
 1 file changed, 90 insertions(+), 23 deletions(-)

diff --git a/frontend/src/routes/setup/+page.svelte b/frontend/src/routes/setup/+page.svelte
index 2f19318..dc4b73b 100644
--- a/frontend/src/routes/setup/+page.svelte
+++ b/frontend/src/routes/setup/+page.svelte
@@ -2,43 +2,52 @@
     import Logo from "$lib/img/topscorer_logo_web.png"
 </script>
 
-<div class="container">
-    <div class="header">
-        <img class="img" src={Logo} alt="logo">
-        <span class="title">title</span>
-    </div>
-    
+<div class="header">
+    <img class="img" src={Logo} alt="logo">
+    <span class="title" >Heat setup</span>
+</div>
+
+<div class="container">    
     <div class="heat">
-        <form action="" method="post">
-            <label for="name">Name</label>
+            <label class="label" for="name">Name</label>
             <input id="name" type="text">
-            <label for="category">Category</label>
+            <label class="label" for="category">Category</label>
             <input id="category" type="text">
-        </form>
     </div>
     
     <div class="surfer">
-        <form action="" method="post">
-            <label for="firstname">Firstname</label>
+            <label class="label" for="firstname">Firstname</label>
             <input id="firstname" type="text">
-            <label for="lastname">Lastname</label>
+            <label class="label" for="lastname">Lastname</label>
             <input id="lastname" type="text">
-            <label for="color">Color</label>
-            <input id="color" type="text">
-        </form>
-        <button>+</button>
+            <label class="label" for="color">Color</label>
+            <select id="color">
+                <option value="white" style="background-color: white;">White</option>
+                <option value="black" style="background-color: black;">Black</option>
+                <option value="red" style="background-color: red;">Red</option>
+                <option value="green" style="background-color: green;">Green</option>
+                <option value="blue" style="background-color: blue;">Blue</option>
+                <option value="yellow" style="background-color: yellow;">Yellow</option>
+                <option value="purple" style="background-color: purple;">Purple</option>
+            </select>
+        <button class="plus">+</button>
     </div>    
 </div>
 
 <style>
-    .container {
+
+   .container {
         display: block;
     }
 
     .header {
         background-color: black;
         color: aliceblue;
-        display: inline-block;
+        display: flex;        
+        width: 100%;
+        justify-content: space-between;
+        text-align: center;
+        align-items: center;
     }
 
     .header .img {
@@ -46,23 +55,81 @@
     }
 
     .header .title {
-        font-size: 3rem;
+        font-size: 3rem;        
+        margin: 0 auto;
+    }
+
+    .label {
+        border: 2px solid #111;
+        background-color: #111;
+        border-radius: 8px;
     }
 
     .heat {
+        font-size: 1.3rem;
         margin-top: 2px;
         margin-bottom: 2px;
-        background-color: #111;
+        width: 100%;
+        margin-left: auto;
+        margin-right: auto;
         color: lightcyan;
-        display: inline-block;
+        display: inline-block;        
+    }
+
+    .heat input {
+        font-size: 1.2rem;
+        border-radius: 6px;
+        margin-left: 0.1rem;
+        margin-right: 0.1rem;
+        padding-top: 2px;
+        padding-bottom: 2px;
     }
 
     .surfer {
+        font-size: 1.3rem;
         margin-top: 2px;
         margin-bottom: 2px;
-        background-color: #111;
         color: lightcyan;
         display: inline-flex;
+        width: 100%;
+        margin-left: auto;
+        margin-right: auto;
+        border-radius: 8px;
+    }
+
+    .surfer input {
+        font-size: 1.2rem;
+        border-radius: 6px;
+        margin-left: 0.1rem;
+        margin-right: 0.1rem;
+        padding-top: 2px;
+        padding-bottom: 2px;
+
+    }
+
+    select {
+        font-size: 1.2rem;
+        border-radius: 6px;
+        margin-left: 0.1rem;
+        margin-right: 0.1rem;
+        padding-top: 2px;
+        padding-bottom: 2px;
+        width: 5rem;
+    }
+
+    option {
+        width: 1rem;
+        padding-left: 25px; /* Spazio per la riga colorata */
+        background-size: 1.2rem 100%; /* Dimensioni della riga colorata */
+        background-repeat: no-repeat;
+        background-position: 0px 0px;
+        transition: border 0.3s
+    }
+
+    .plus {
+        border-radius: 8px;
+        margin-left: 0.2rem;
+        margin-right: 0.2rem;
     }
 
 </style>
\ No newline at end of file