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>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
|
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
<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%
|
%sveltekit.head%
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body data-sveltekit-preload-data="hover">
|
<body data-sveltekit-preload-data="hover">
|
||||||
<div style="display: contents">%sveltekit.body%</div>
|
<div style="display: contents">%sveltekit.body%</div>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|
@ -1,2 +1,253 @@
|
||||||
<h1>Welcome to SvelteKit</h1>
|
<script>
|
||||||
<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>
|
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