fauvet/SAE_RIOT_2024
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Creating default page;

Browse Source
This commit is contained in:
Matthis FAUVET 2024-06-20 16:46:54 +02:00
parent f2bd1cb1e0
commit fd128da2e4
3 changed files with 24 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
index.html
View File

@ -3,8 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Riot App</title> <title>Riot App</title>
<link href="style.css" rel="stylesheet"> <script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.tailwindcss.com" rel="stylesheet">
</head> </head>
<body> <body>

36
onzer.riot
View File

@ -1,19 +1,17 @@
<onzer> <onzer>
<div class="px-12">
<div class="flex-col justify-center"> <div class="flex-row">
<div class="flex-row justify-start margin-bottom-6"> <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" <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"/>
onclick={ click } <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"/>
value="Albums"
class="margin-top-8 margin-right-8 margin-bottom-8 wh light-green-bg border"/>
</div> </div>
<form onsubmit={ add }>
<div class="flex-row justify-center"> <div class="flex flex-row items-baseline">
<form onsubmit={ add }> <input class="flex-grow-1 border-solid border bg-emerald-100 w-half rounded-lg border-emerald-300 border h-14 pl-6 grow"
<input class="wh border text-align-left align-stretch light-green-bg font-size-24"
placeholder={ this.state.placeholder } onkeyup={ edit } /> placeholder={ this.state.placeholder } onkeyup={ edit } />
</form> <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> </div>
</form>
</div> </div>
<script> <script>
@ -30,7 +28,17 @@
}, },
click(e) { click(e) {
e.preventDefault(); 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> </script>

3
style.css
View File

@ -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-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;} .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;} .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;} .category {width: 140px;height: 48px;background-color: #D1FAE5;}
.border {border: 1px solid #6EE7B7;border-radius: 8px;}