user add
This commit is contained in:
root
parent
a5b1ad3413
commit
92e6e8efbe
2 changed files with 258 additions and 3 deletions
|
|
@ -1,12 +1,16 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
|
||||
%sveltekit.head%
|
||||
</head>
|
||||
|
||||
<body data-sveltekit-preload-data="hover">
|
||||
<div style="display: contents">%sveltekit.body%</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,2 +1,253 @@
|
|||
<h1>Welcome to SvelteKit</h1>
|
||||
<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>
|
||||
<script>
|
||||
let surfers = [
|
||||
{ name: "John Doe", score: 100, colore: "red" },
|
||||
{ name: "Jane Smith", score: 80, colore: "blue" },
|
||||
{ name: "Mike Johnson", score: 90, colore: "green" },
|
||||
{ name: "Sarah Brown", score: 70, colore: "yellow" },
|
||||
];
|
||||
|
||||
let colors = ["red", "yellow", "green", "white", "blue", "black"];
|
||||
</script>
|
||||
|
||||
<div id="score-container">
|
||||
<div class="info-box">
|
||||
<div class="Time">
|
||||
<span id="time">12:45</span>
|
||||
</div>
|
||||
<div class="Cat">
|
||||
<small><span id="round">U16 man</span></small>
|
||||
</div>
|
||||
<div class="Round">
|
||||
<small><span id="round">Round 1</span></small>
|
||||
</div>
|
||||
<div class="Heat">
|
||||
<small><span id="heat">Heat 3</span></small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="score-box">
|
||||
<div class="color" style="background-color: red"></div>
|
||||
<div class="surfer">John Doe</div>
|
||||
<div class="score" id="score-1">8.5</div>
|
||||
</div>
|
||||
|
||||
<div class="score-box">
|
||||
<div class="color" style="background-color: blue"></div>
|
||||
<div class="surfer">Jane Smith</div>
|
||||
<div class="score" id="score-2">7.2</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Form -->
|
||||
<div class="form-box">
|
||||
<form>
|
||||
<div class="input-group mb-1">
|
||||
<span class="input-group-text">tempo</span>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control time"
|
||||
name="time"
|
||||
required
|
||||
pattern="^[0-9][0-9]$"
|
||||
maxlength="2"
|
||||
size="2" />
|
||||
<span class="input-group-text">category</span>
|
||||
<select class="form-select" name="category" aria-label="Category">
|
||||
<option value="u12m">U12 M</option>
|
||||
<option value="u12w">U12 W</option>
|
||||
<option value="u14m">U14 M</option>
|
||||
<option value="u14w">U14 W</option>
|
||||
<option value="u16m">U16 M</option>
|
||||
<option value="u16w">U16 W</option>
|
||||
<option value="u18m">U18 M</option>
|
||||
<option value="u18w">U18 W</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<span class="input-group-text">round</span>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
name="round"
|
||||
value="Round 1" />
|
||||
<span class="input-group-text">heat</span>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
name="heat"
|
||||
value="0"
|
||||
pattern="^[0-9][0-9]?$"
|
||||
maxlength="2"
|
||||
size="2" />
|
||||
|
||||
<button type="submit" class="btn btn-primary mt-1 mb-3 w-100"
|
||||
>Start</button>
|
||||
</div>
|
||||
|
||||
<div class="surfer">
|
||||
<ul>
|
||||
{#each surfers as id}
|
||||
<li>
|
||||
<div class="input-group">
|
||||
<!-- <span class="input-group-text">colore</span> -->
|
||||
<select
|
||||
class="form-select"
|
||||
name="color"
|
||||
aria-label="Color"
|
||||
size="1"
|
||||
style="background-color: bind:value;">
|
||||
{#each colors as col}
|
||||
<option
|
||||
value={col}
|
||||
class="color"
|
||||
style="background-color: {col}"
|
||||
>{col}</option>
|
||||
{/each}
|
||||
</select>
|
||||
<span class="input-group-text">nome</span>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
name="nome-{id}"
|
||||
value="T. Test" />
|
||||
|
||||
<span class="input-group-text">score</span>
|
||||
<input
|
||||
type="number"
|
||||
class="form-control"
|
||||
name="score-{id}"
|
||||
value="8.5" />
|
||||
</div>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
body {
|
||||
background-color: black;
|
||||
color: white;
|
||||
font-family: Arial, sans-serif;
|
||||
min-height: 1024px;
|
||||
min-width: 768px;
|
||||
}
|
||||
.info-box {
|
||||
display: grid;
|
||||
top: 6px;
|
||||
left: 6px;
|
||||
width: 220px;
|
||||
padding: 6px;
|
||||
background: rgba(50, 50, 50, 0.7);
|
||||
color: white;
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
|
||||
grid-template-rows: 1fr 1fr 1fr;
|
||||
gap: 1px 1px;
|
||||
grid-template-areas:
|
||||
"Time Time Time Cat Cat"
|
||||
"Time Time Time Round Round"
|
||||
"Time Time Time Heat Heat";
|
||||
margin: 2px;
|
||||
}
|
||||
.score-box {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 4fr 1fr;
|
||||
grid-template-areas: "color surfer score";
|
||||
width: 220px;
|
||||
padding-left: 6px;
|
||||
padding-right: 6px;
|
||||
padding-top: 2px;
|
||||
padding-bottom: 2px;
|
||||
background: rgba(50, 50, 50, 0.7);
|
||||
color: white;
|
||||
margin-left: 2px;
|
||||
}
|
||||
.Time {
|
||||
grid-area: Time;
|
||||
font-size: 48px;
|
||||
font-weight: bold;
|
||||
justify-self: start;
|
||||
align-self: center;
|
||||
}
|
||||
.Cat {
|
||||
grid-area: Cat;
|
||||
font-size: 14px;
|
||||
justify-self: center;
|
||||
align-self: center;
|
||||
margin-left: 30px;
|
||||
#font-weight: bold;
|
||||
}
|
||||
.Round {
|
||||
grid-area: Round;
|
||||
font-size: 16px;
|
||||
justify-self: center;
|
||||
align-self: center;
|
||||
margin-left: 30px;
|
||||
#font-weight: bold;
|
||||
}
|
||||
.Heat {
|
||||
grid-area: Heat;
|
||||
font-size: 16px;
|
||||
justify-self: center;
|
||||
align-self: center;
|
||||
margin-left: 30px;
|
||||
#font-weight: bold;
|
||||
}
|
||||
.surfer {
|
||||
grid-area: surfer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 6px;
|
||||
width: 100%;
|
||||
align-content: center;
|
||||
}
|
||||
.surfer ul {
|
||||
list-style-type: none;
|
||||
margin-left: 0px;
|
||||
padding-left: 0px;
|
||||
}
|
||||
.surfer select {
|
||||
-moz-appearance: none; /* Firefox */
|
||||
-webkit-appearance: none; /* Safari and Chrome */
|
||||
appearance: none;
|
||||
}
|
||||
.color {
|
||||
grid-area: color;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 2px;
|
||||
margin-right: 10px;
|
||||
margin-top: 4px;
|
||||
margin-left: 4px;
|
||||
}
|
||||
.score {
|
||||
grid-area: score;
|
||||
font-weight: bold;
|
||||
text-align: end;
|
||||
align-content: center;
|
||||
margin-right: 2px;
|
||||
}
|
||||
.form-box {
|
||||
position: grid;
|
||||
width: 400px;
|
||||
background: rgba(50, 50, 50, 0.7);
|
||||
color: white;
|
||||
margin-top: 150px;
|
||||
margin-left: 100px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.form-box .time {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
justify-self: start;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.form-box .surfer {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
justify-self: end;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue