+setup
This commit is contained in:
Linux User
parent
e82c27b2ba
commit
5a918b0350
11 changed files with 502 additions and 24 deletions
|
|
@ -84,7 +84,7 @@ func (app *App) RegisterApiRoutes() {
|
|||
api.GET("/sse", app.Stream.SseHeadersMiddleware(), app.Stream.Stream)
|
||||
// api.POST("/startheat", app.StartHeatTimer)
|
||||
// api.GET("/stopheat", app.StopHeatTimer)
|
||||
// api.POST("/saveheat", app.SaveHeat)
|
||||
api.POST("/saveheat", app.SaveHeat)
|
||||
// api.POST("/deleteheat", app.DeleteHeat)
|
||||
api.GET("/loadheats", app.LoadHeats)
|
||||
// api.GET("/runningheat", app.LoadRunning)
|
||||
|
|
|
|||
|
|
@ -10,17 +10,17 @@
|
|||
"format": "prettier --write ."
|
||||
},
|
||||
"devDependencies": {
|
||||
"@sveltejs/adapter-auto": "^3.0.0",
|
||||
"@sveltejs/adapter-auto": "^3.0.1",
|
||||
"@sveltejs/adapter-static": "^3.0.1",
|
||||
"@sveltejs/kit": "^2.0.0",
|
||||
"@sveltejs/vite-plugin-svelte": "^3.0.0",
|
||||
"eslint": "^8.28.0",
|
||||
"@sveltejs/kit": "^2.0.6",
|
||||
"@sveltejs/vite-plugin-svelte": "^3.0.1",
|
||||
"eslint": "^8.56.0",
|
||||
"eslint-config-prettier": "^9.1.0",
|
||||
"eslint-plugin-svelte": "^2.30.0",
|
||||
"eslint-plugin-svelte": "^2.35.1",
|
||||
"prettier": "^3.1.1",
|
||||
"prettier-plugin-svelte": "^3.1.2",
|
||||
"svelte": "^4.2.7",
|
||||
"vite": "^5.0.3"
|
||||
"svelte": "^4.2.8",
|
||||
"vite": "^5.0.10"
|
||||
},
|
||||
"type": "module"
|
||||
}
|
||||
|
|
|
|||
20
frontend/pnpm-lock.yaml
generated
20
frontend/pnpm-lock.yaml
generated
|
|
@ -6,25 +6,25 @@ settings:
|
|||
|
||||
devDependencies:
|
||||
'@sveltejs/adapter-auto':
|
||||
specifier: ^3.0.0
|
||||
specifier: ^3.0.1
|
||||
version: 3.0.1(@sveltejs/kit@2.0.6)
|
||||
'@sveltejs/adapter-static':
|
||||
specifier: ^3.0.1
|
||||
version: 3.0.1(@sveltejs/kit@2.0.6)
|
||||
'@sveltejs/kit':
|
||||
specifier: ^2.0.0
|
||||
specifier: ^2.0.6
|
||||
version: 2.0.6(@sveltejs/vite-plugin-svelte@3.0.1)(svelte@4.2.8)(vite@5.0.10)
|
||||
'@sveltejs/vite-plugin-svelte':
|
||||
specifier: ^3.0.0
|
||||
specifier: ^3.0.1
|
||||
version: 3.0.1(svelte@4.2.8)(vite@5.0.10)
|
||||
eslint:
|
||||
specifier: ^8.28.0
|
||||
specifier: ^8.56.0
|
||||
version: 8.56.0
|
||||
eslint-config-prettier:
|
||||
specifier: ^9.1.0
|
||||
version: 9.1.0(eslint@8.56.0)
|
||||
eslint-plugin-svelte:
|
||||
specifier: ^2.30.0
|
||||
specifier: ^2.35.1
|
||||
version: 2.35.1(eslint@8.56.0)(svelte@4.2.8)
|
||||
prettier:
|
||||
specifier: ^3.1.1
|
||||
|
|
@ -33,10 +33,10 @@ devDependencies:
|
|||
specifier: ^3.1.2
|
||||
version: 3.1.2(prettier@3.1.1)(svelte@4.2.8)
|
||||
svelte:
|
||||
specifier: ^4.2.7
|
||||
specifier: ^4.2.8
|
||||
version: 4.2.8
|
||||
vite:
|
||||
specifier: ^5.0.3
|
||||
specifier: ^5.0.10
|
||||
version: 5.0.10
|
||||
|
||||
packages:
|
||||
|
|
@ -807,7 +807,7 @@ packages:
|
|||
postcss: 8.4.32
|
||||
postcss-load-config: 3.1.4(postcss@8.4.32)
|
||||
postcss-safe-parser: 6.0.0(postcss@8.4.32)
|
||||
postcss-selector-parser: 6.0.13
|
||||
postcss-selector-parser: 6.0.14
|
||||
semver: 7.5.4
|
||||
svelte: 4.2.8
|
||||
svelte-eslint-parser: 0.33.1(svelte@4.2.8)
|
||||
|
|
@ -1290,8 +1290,8 @@ packages:
|
|||
postcss: 8.4.32
|
||||
dev: true
|
||||
|
||||
/postcss-selector-parser@6.0.13:
|
||||
resolution: {integrity: sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==}
|
||||
/postcss-selector-parser@6.0.14:
|
||||
resolution: {integrity: sha512-65xXYsT40i9GyWzlHQ5ShZoK7JZdySeOozi/tz2EezDo6c04q6+ckYMeoY7idaie1qp2dT5KoYQ2yky6JuoHnA==}
|
||||
engines: {node: '>=4'}
|
||||
dependencies:
|
||||
cssesc: 3.0.0
|
||||
|
|
|
|||
24
frontend/src/lib/icons/login.svelte
Normal file
24
frontend/src/lib/icons/login.svelte
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
<script>
|
||||
// import { Button, Tooltip } from 'flowbite-svelte';
|
||||
|
||||
export let pill = false;
|
||||
export let color = 'blue';
|
||||
export let size = 'sm';
|
||||
export let href = "/login";
|
||||
</script>
|
||||
|
||||
<button size={size} class="!p-2" {pill} color={color} href={href}>
|
||||
<svg
|
||||
class="w-6 h-6 text-gray-100 dark:text-white"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M10 0a10 10 0 1 0 10 10A10.011 10.011 0 0 0 10 0Zm0 5a3 3 0 1 1 0 6 3 3 0 0 1 0-6Zm0 13a8.949 8.949 0 0 1-4.951-1.488A3.987 3.987 0 0 1 9 13h2a3.987 3.987 0 0 1 3.951 3.512A8.949 8.949 0 0 1 10 18Z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<!-- <Tooltip id="type-auto" arrow={false} type="custom" defaultClass="" class="p-1 text-sm bg-blue-700 text-gray-100" >Login</Tooltip> -->
|
||||
43
frontend/src/lib/icons/priority.svelte
Normal file
43
frontend/src/lib/icons/priority.svelte
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
<script>
|
||||
// import { Button, Tooltip } from 'flowbite-svelte';
|
||||
|
||||
|
||||
export let pill = false;
|
||||
export let color = 'blue';
|
||||
export let size = 'sm';
|
||||
</script>
|
||||
|
||||
<button {size} class="!p-2" {pill} {color}>
|
||||
<svg class="w-6 h-6" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="m62.578 41.956 -28.444 21.333a3.556 3.556 0 0 1 -4.267 0l-28.444 -21.333a3.637 3.637 0 0 1 -1.244 -3.982A3.605 3.605 0 0 1 3.556 35.556h7.111V32a3.566 3.566 0 0 1 3.556 -3.556h35.556a3.566 3.566 0 0 1 3.556 3.556v3.556h7.111a3.552 3.552 0 0 1 2.133 6.4Z"
|
||||
/>
|
||||
<path
|
||||
fill="currentColor"
|
||||
x="3"
|
||||
y="4"
|
||||
width="12"
|
||||
height="2"
|
||||
rx="1"
|
||||
ry="1"
|
||||
d="M14.222 14.222H49.778A3.556 3.556 0 0 1 53.333 17.778V17.778A3.556 3.556 0 0 1 49.778 21.333H14.222A3.556 3.556 0 0 1 10.667 17.778V17.778A3.556 3.556 0 0 1 14.222 14.222z"
|
||||
/>
|
||||
<path
|
||||
fill="currentColor"
|
||||
x="3"
|
||||
width="12"
|
||||
height="2"
|
||||
rx="1"
|
||||
ry="1"
|
||||
d="M14.222 0H49.778A3.556 3.556 0 0 1 53.333 3.556V3.556A3.556 3.556 0 0 1 49.778 7.111H14.222A3.556 3.556 0 0 1 10.667 3.556V3.556A3.556 3.556 0 0 1 14.222 0z"
|
||||
/></svg
|
||||
>
|
||||
</button>
|
||||
<!-- <Tooltip
|
||||
id="type-auto"
|
||||
arrow={false}
|
||||
type="custom"
|
||||
defaultClass=""
|
||||
class="p-1 text-sm bg-blue-700 text-gray-100">Priority</Tooltip
|
||||
> -->
|
||||
32
frontend/src/lib/icons/score.svelte
Normal file
32
frontend/src/lib/icons/score.svelte
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
<script>
|
||||
// import { Button, Tooltip } from 'flowbite-svelte';
|
||||
|
||||
|
||||
export let pill = false;
|
||||
export let color = 'blue';
|
||||
export let size = 'sm';
|
||||
</script>
|
||||
|
||||
<button size={size} class="!p-2" {pill} color={color}>
|
||||
<svg
|
||||
class="w-6 h-6"
|
||||
version="1.1"
|
||||
id="Layer_1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
x="0px"
|
||||
y="0px"
|
||||
viewBox="0 0 455 455"
|
||||
style="enable-background:new 0 0 455 455;"
|
||||
xml:space="preserve"
|
||||
fill="currentColor"
|
||||
>
|
||||
<g>
|
||||
<rect x="162" y="323" width="293" height="132" />
|
||||
<rect x="162" y="161" width="293" height="132" />
|
||||
<rect width="455" height="131" />
|
||||
<rect y="161" width="132" height="294" />
|
||||
</g>
|
||||
</svg>
|
||||
</button>
|
||||
<!-- <Tooltip id="type-auto" arrow={false} type="custom" defaultClass="" class="p-1 text-sm bg-blue-700 text-gray-100" >Score</Tooltip> -->
|
||||
BIN
frontend/src/lib/img/topscorer_logo_alpha.png
Executable file
BIN
frontend/src/lib/img/topscorer_logo_alpha.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 9.6 KiB |
BIN
frontend/src/lib/img/topscorer_logo_icon.png
Normal file
BIN
frontend/src/lib/img/topscorer_logo_icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
BIN
frontend/src/lib/img/topscorer_logo_web.png
Executable file
BIN
frontend/src/lib/img/topscorer_logo_web.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
|
|
@ -262,8 +262,11 @@
|
|||
}
|
||||
|
||||
.header {
|
||||
/* padding: 15px; */
|
||||
height: 10vh;
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr auto;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
/* height: 10vh; */
|
||||
background-color: var(--backColor);
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
|
|
@ -273,9 +276,9 @@
|
|||
margin-bottom: 2px;
|
||||
width: calc(var(--maxWidth));
|
||||
color: var(--textColor);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
/* display: flex; */
|
||||
/* justify-content: space-between; */
|
||||
/* align-items: center; */
|
||||
}
|
||||
|
||||
.header .timer {
|
||||
|
|
@ -289,7 +292,7 @@
|
|||
}
|
||||
|
||||
.header .button {
|
||||
height: 60%;
|
||||
height: 40%;
|
||||
align-items: center;
|
||||
background-color: yellow;
|
||||
border-radius: 10%;
|
||||
|
|
|
|||
376
frontend/src/routes/setup/+page.svelte
Normal file
376
frontend/src/routes/setup/+page.svelte
Normal file
|
|
@ -0,0 +1,376 @@
|
|||
<script>
|
||||
import { onMount } from 'svelte';
|
||||
import Logo from "$lib/img/topscorer_logo_web.png"
|
||||
|
||||
let colors = [
|
||||
"black",
|
||||
"blue",
|
||||
"red",
|
||||
"green",
|
||||
"yellow",
|
||||
"pink",
|
||||
"white",
|
||||
];
|
||||
|
||||
let rounds = [
|
||||
"Qualifying",
|
||||
"Opening",
|
||||
"Elimination",
|
||||
"Round of 48",
|
||||
"Round of 32",
|
||||
"Round of 16",
|
||||
"Quarterfinal",
|
||||
"Semifinal",
|
||||
"Final",
|
||||
];
|
||||
|
||||
let categories = [
|
||||
"Under 12 Women",
|
||||
"Under 12 Men",
|
||||
"Under 14 Women",
|
||||
"Under 14 Men",
|
||||
"Under 16 Women",
|
||||
"Under 16 Men",
|
||||
"Under 18 Women",
|
||||
"Under 18 Men",
|
||||
];
|
||||
|
||||
$: surfers = 2;
|
||||
|
||||
$: heats = [];
|
||||
let surfer_list = [];
|
||||
$: heat = {};
|
||||
|
||||
resetHeat();
|
||||
loadHeats();
|
||||
|
||||
function resetHeat() {
|
||||
surfers = 2;
|
||||
surfer_list = new Array();
|
||||
surfer_list.push({
|
||||
name: '',
|
||||
color: '',
|
||||
score: '',
|
||||
priority: ''
|
||||
});
|
||||
surfer_list.push({
|
||||
name: '',
|
||||
color: '',
|
||||
score: '',
|
||||
priority: ''
|
||||
});
|
||||
|
||||
heat = {
|
||||
number: 1,
|
||||
name: '',
|
||||
category: '',
|
||||
timer: 20,
|
||||
surfers: surfer_list
|
||||
}
|
||||
}
|
||||
|
||||
async function loadHeats() {
|
||||
const res = await fetch(`/api/loadheats`);
|
||||
const data = await res.json();
|
||||
for (let i in data) {
|
||||
heats[i] = data[i];
|
||||
console.log(`${i} retval: ${JSON.stringify(data[i])}`);
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteHeat(id) {
|
||||
const res = await fetch(`/api/deleteheat`, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify(heats[id]),
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
});
|
||||
console.log(`retval: ${JSON.stringify(res)}`);
|
||||
|
||||
console.log(JSON.stringify(heats[id]));
|
||||
resetHeat();
|
||||
loadHeats();
|
||||
}
|
||||
|
||||
function setHeat(id) {
|
||||
resetHeat();
|
||||
console.log(`setHeat: ${id}`);
|
||||
console.log(heats[id]);
|
||||
heat.number = heats[id].number;
|
||||
heat.name = heats[id].name;
|
||||
heat.category = heats[id].category;
|
||||
heat.timer = heats[id].timer;
|
||||
surfer_list = heats[id].surfers;
|
||||
surfers = surfer_list.length;
|
||||
}
|
||||
|
||||
function addSurfers() {
|
||||
surfers++;
|
||||
surfer_list.push({
|
||||
name: '',
|
||||
color: '',
|
||||
score: '',
|
||||
priority: ''
|
||||
});
|
||||
}
|
||||
|
||||
function removeSurfers() {
|
||||
surfers--;
|
||||
if (surfers < 2) surfers = 2;
|
||||
surfer_list.pop();
|
||||
}
|
||||
|
||||
async function save() {
|
||||
if(hasDuplicateColors(surfer_list)) {
|
||||
alert('Colors must be unique');
|
||||
return;
|
||||
}
|
||||
|
||||
if(surfer_list.length < 2) {
|
||||
alert('Must have at least 2 surfers');
|
||||
return;
|
||||
}
|
||||
|
||||
if(heat.name === '') {
|
||||
alert('Must have a name');
|
||||
return;
|
||||
}
|
||||
|
||||
if(heat.category === '') {
|
||||
alert('Must have a category');
|
||||
return;
|
||||
}
|
||||
|
||||
if(heat.number === '') {
|
||||
alert('Must have a number');
|
||||
return;
|
||||
}
|
||||
|
||||
if(heat.timer === '') {
|
||||
alert('Must have a timer');
|
||||
return;
|
||||
}
|
||||
|
||||
heat.surfers = surfer_list;
|
||||
|
||||
const res = await fetch(`/api/saveheat`, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify(heat),
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
});
|
||||
console.log(`retval: ${JSON.stringify(res)}`);
|
||||
|
||||
console.log(JSON.stringify(heat));
|
||||
|
||||
resetHeat();
|
||||
loadHeats();
|
||||
}
|
||||
|
||||
function hasDuplicateColors(arr) {
|
||||
const colors = [];
|
||||
|
||||
console.log(JSON.stringify(arr));
|
||||
|
||||
for(let i = 0; i < arr.length; i++) {
|
||||
const color = arr[i].color;
|
||||
|
||||
if(colors.includes(color)) {
|
||||
console.log(`duplicate color: ${color}`);
|
||||
return true;
|
||||
}
|
||||
|
||||
colors.push(color);
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
function capitalize(element, elementName) {
|
||||
element[elementName] = element[elementName].charAt(0).toUpperCase() + element[elementName].slice(1);
|
||||
console.log(`element: ${element[elementName]}`);
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
resetHeat();
|
||||
loadHeats();
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<div class="header">
|
||||
<img class="img" src={Logo} alt="logo">
|
||||
<span class="title" style="color: aliceblue;">Heat setup</span>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="heat">
|
||||
<label class="label" for="heat">Heat</label>
|
||||
<select name="heat" id="heat" bind:value={heat.name}>
|
||||
{#each rounds as round}
|
||||
<option value={round}>{round}</option>
|
||||
{/each}
|
||||
</select>
|
||||
<!-- <input bind:value={heat.name} on:change={capitalize(heat, "name")} id="name" type="text"> -->
|
||||
<label class="label" for="number">Number</label>
|
||||
<input bind:value={heat.number} id="number" type="number" min="1" max="20">
|
||||
<label class="label" for="category">Category</label>
|
||||
<select name="category" id="category" bind:value={heat.category}>
|
||||
{#each categories as category}
|
||||
<option value={category}>{category}</option>
|
||||
{/each}
|
||||
</select>
|
||||
<!-- <input bind:value={heat.category} on:change={capitalize(heat, "category")} id="category" type="text"> -->
|
||||
<label class="label" for="timer">Duration</label>
|
||||
<input bind:value={heat.timer} id="timer" type="number" min="5" max="60" step="5"> <!-- on:keydown={(event) => {event.preventDefault()}} -->
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
<div class="controller">
|
||||
<button class="plus" on:click={() => {addSurfers();}}>+</button>
|
||||
<span class="surfers">{surfers}</span>
|
||||
<button class="plus" on:click={() => {removeSurfers();}}>-</button>
|
||||
</div>
|
||||
|
||||
|
||||
{#each Array(surfers) as _, surfer}
|
||||
<div class="surfer">
|
||||
<label class="label" for="name{surfer}">Name</label>
|
||||
<input bind:value={surfer_list[surfer].name} on:change={capitalize(surfer_list[surfer], "name")} id="name{surfer}" type="text">
|
||||
<label class="label" for="color{surfer}">Color</label>
|
||||
<select name="color" id="color{surfer}" bind:value={surfer_list[surfer].color} style="background-color: {surfer_list[surfer].color};">
|
||||
{#each colors as color}
|
||||
<option value={color} style="background-color: {color};">{color}</option>
|
||||
{/each}
|
||||
<!-- <option value="red" style="background-color: red;">Select color</option> -->
|
||||
<!-- <option value="red" style="background-color: red;">Red</option>
|
||||
<option value="blue" style="background-color: blue;">Blue</option>
|
||||
<option value="green" style="background-color: green;">Green</option>
|
||||
<option value="yellow" style="background-color: yellow;">Yellow</option>
|
||||
<option value="orange" style="background-color: orange;">Orange</option>
|
||||
<option value="violet" style="background-color: violet;">Violet</option> -->
|
||||
</select>
|
||||
<!-- <input bind:value={surfer_list[surfer].color} type="color" id="color{surfer}"> -->
|
||||
</div>
|
||||
{/each}
|
||||
|
||||
</div>
|
||||
|
||||
<button class="plus" on:click={() => {save();}}>SAVE</button>
|
||||
<button class="plus" on:click={() => {resetHeat();}}>RESET</button>
|
||||
<hr>
|
||||
{#each heats as h, id}
|
||||
<div class="surfer">
|
||||
<button on:click={() => {setHeat(id);}}>{h.name} {h.number} {h.category}</button>
|
||||
<button class="plus" on:click={() => {deleteHeat(id);}}>X</button>
|
||||
</div>
|
||||
{/each}
|
||||
|
||||
<!-- <hr> -->
|
||||
|
||||
<!-- <h2>{JSON.stringify(surfer_list)}</h2> -->
|
||||
|
||||
<style>
|
||||
|
||||
.header {
|
||||
background-color: black;
|
||||
display: grid;
|
||||
grid-template-columns: auto 2fr;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.header .img {
|
||||
height: 3rem;
|
||||
}
|
||||
|
||||
.header .title {
|
||||
font-size: 3rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: lightgrey;
|
||||
}
|
||||
|
||||
.heat {
|
||||
display:grid;
|
||||
grid-template-columns: auto 2fr auto 2fr;
|
||||
font-size: 1.3rem;
|
||||
margin-top: 8px;
|
||||
margin-bottom: 2px;
|
||||
width: 100%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.heat input {
|
||||
font-size: 1.2rem;
|
||||
border-radius: 6px;
|
||||
margin-left: 0.1rem;
|
||||
margin-right: 0.1rem;
|
||||
padding-top: 2px;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
|
||||
.heat select {
|
||||
font-size: 1.2rem;
|
||||
border-radius: 6px;
|
||||
margin-left: 0.1rem;
|
||||
margin-right: 0.1rem;
|
||||
padding-top: 2px;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
|
||||
.label {
|
||||
border: 2px solid #555;
|
||||
background-color: gray;
|
||||
border-radius: 8px;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
|
||||
.surfer {
|
||||
font-size: 1.3rem;
|
||||
margin-top: 2px;
|
||||
margin-bottom: 2px;
|
||||
/* color: lightcyan; */
|
||||
display: grid;
|
||||
grid-template-columns: auto auto auto auto;
|
||||
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;
|
||||
|
||||
}
|
||||
|
||||
.surfer select {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.plus {
|
||||
border-radius: 8px;
|
||||
margin-left: 0.2rem;
|
||||
margin-right: 0.2rem;
|
||||
margin-bottom: 8px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.surfers {
|
||||
border: 1px solid #111;
|
||||
background-color: yellow;
|
||||
border-radius: 8px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue