From fd128da2e4a0eb3a033a345fcc0dab28a6af643f Mon Sep 17 00:00:00 2001
From: Fauvet Matthis <matthisf.etudes@gmail.com>
Date: Thu, 20 Jun 2024 16:46:54 +0200
Subject: [PATCH] Creating default page;

---
 index.html |  3 +--
 onzer.riot | 36 ++++++++++++++++++++++--------------
 style.css  |  3 +--
 3 files changed, 24 insertions(+), 18 deletions(-)
diff --git a/index.html b/index.html
index b3230f7..de64a60 100644
--- a/index.html
+++ b/index.html
@@ -3,8 +3,7 @@
 <head>
 	<meta charset="utf-8">
 	<title>Riot App</title>
-	<link href="style.css" rel="stylesheet">
-	<link href="https://cdn.tailwindcss.com" rel="stylesheet">
+	<script src="https://cdn.tailwindcss.com"></script>
 </head>
 	<body>
 
diff --git a/onzer.riot b/onzer.riot
index b656d2e..38eebb2 100644
--- a/onzer.riot
+++ b/onzer.riot
@@ -1,19 +1,17 @@
 <onzer>
-
-    <div class="flex-col justify-center">
-        <div class="flex-row justify-start margin-bottom-6">
-            <input type="button" 
-            onclick={ click } 
-            value="Albums" 
-            class="margin-top-8 margin-right-8 margin-bottom-8 wh light-green-bg border"/>
+    <div class="px-12">
+        <div class="flex-row">
+            <input type="button" onclick={ click } value="Albums" class="mr-2 border-solid bg-emerald-100 border rounded-lg border-emerald-300 mb-4 h-14 w-40 mt-2"/>
+            <input type="button" onclick={ click } value="Artists" class="mx-2 border-solid bg-emerald-100 border rounded-lg border-emerald-300 mb-4 h-14 w-40 mt-2"/>
+            <input type="button" onclick={ click } value="Songs" class="ml-2 border-solid bg-emerald-100 border rounded-lg border-emerald-300 mb-4 h-14 w-40 mt-2"/>
         </div>
-
-        <div class="flex-row justify-center">
-            <form onsubmit={ add }>
-                <input class="wh border text-align-left align-stretch light-green-bg font-size-24" 
+        <form onsubmit={ add }>
+            <div class="flex flex-row items-baseline">
+            <input class="flex-grow-1 border-solid border bg-emerald-100 w-half rounded-lg border-emerald-300 border h-14 pl-6 grow"
                 placeholder={ this.state.placeholder } onkeyup={ edit } />
-            </form>
-        </div>
+                <input type="button" value="Playlists" class="ml-2 border-solid bg-emerald-300 border rounded-lg border-emerald-600 mb-4 h-14 w-40 mt-2"/>
+            </div>
+        </form>
     </div>
 
     <script>
@@ -30,7 +28,17 @@
             },
             click(e) {
                 e.preventDefault();
-                console.log("Les gros cacas");
+                switch (e.target.attributes.value.value) {
+                    case 'Songs':
+                        this.state.placeholder = "Rechercher dans les songs";
+                        break;
+                    case 'Artists':
+                        this.state.placeholder = "Rechercher dans les artists";
+                        break;
+                    default:
+                        this.state.placeholder = "Rechercher dans les albums";
+                };
+                this.update();
             }
         }
     </script>
diff --git a/style.css b/style.css
index c88ac70..1a98af7 100644
--- a/style.css
+++ b/style.css
@@ -37,5 +37,4 @@
 .font-size-32 {font-size: 32;} .font-size-36 {font-size: 36;} .font-size-42 {font-size: 42;} .font-size-44 {font-size: 44;}
 .font-size-48 {font-size: 48;} .font-size-52 {font-size: 52;} .font-size-56 {font-size: 56;}
 .text-align-center {text-align: center;} .text-align-right {text-align: right;} .text-align-left {text-align: left;}
-.category {width: 140px;height: 48px;background-color: #D1FAE5;}
-.border {border: 1px solid #6EE7B7;border-radius: 8px;}
\ No newline at end of file
+.category {width: 140px;height: 48px;background-color: #D1FAE5;}
\ No newline at end of file
