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

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

@ -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>