streaming/Priority
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

=setup layout

Browse source
This commit is contained in:
Miki 2023-12-12 15:51:26 +00:00
parent f979da1096
commit b0c64d01e9
1 changed files with 90 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

107
frontend/src/routes/setup/+page.svelte
View file

@ -2,43 +2,52 @@
import Logo from "$lib/img/topscorer_logo_web.png" import Logo from "$lib/img/topscorer_logo_web.png"
</script> </script>
<div class="container"> <div class="header">
<div class="header"> <img class="img" src={Logo} alt="logo">
<img class="img" src={Logo} alt="logo"> <span class="title" >Heat setup</span>
<span class="title">title</span> </div>
</div>
<div class="container">
<div class="heat"> <div class="heat">
<form action="" method="post"> <label class="label" for="name">Name</label>
<label for="name">Name</label>
<input id="name" type="text"> <input id="name" type="text">
<label for="category">Category</label> <label class="label" for="category">Category</label>
<input id="category" type="text"> <input id="category" type="text">
</form>
</div> </div>
<div class="surfer"> <div class="surfer">
<form action="" method="post"> <label class="label" for="firstname">Firstname</label>
<label for="firstname">Firstname</label>
<input id="firstname" type="text"> <input id="firstname" type="text">
<label for="lastname">Lastname</label> <label class="label" for="lastname">Lastname</label>
<input id="lastname" type="text"> <input id="lastname" type="text">
<label for="color">Color</label> <label class="label" for="color">Color</label>
<input id="color" type="text"> <select id="color">
</form> <option value="white" style="background-color: white;">White</option>
<button>+</button> <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>
</div> </div>
<style> <style>
.container {
.container {
display: block; display: block;
} }
.header { .header {
background-color: black; background-color: black;
color: aliceblue; color: aliceblue;
display: inline-block; display: flex;
width: 100%;
justify-content: space-between;
text-align: center;
align-items: center;
} }
.header .img { .header .img {
@ -47,22 +56,80 @@
.header .title { .header .title {
font-size: 3rem; font-size: 3rem;
margin: 0 auto;
}
.label {
border: 2px solid #111;
background-color: #111;
border-radius: 8px;
} }
.heat { .heat {
font-size: 1.3rem;
margin-top: 2px; margin-top: 2px;
margin-bottom: 2px; margin-bottom: 2px;
background-color: #111; width: 100%;
margin-left: auto;
margin-right: auto;
color: lightcyan; 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 { .surfer {
font-size: 1.3rem;
margin-top: 2px; margin-top: 2px;
margin-bottom: 2px; margin-bottom: 2px;
background-color: #111;
color: lightcyan; color: lightcyan;
display: inline-flex; 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> </style>