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

+test vert

Browse source
This commit is contained in:
Linux User 2024-01-03 17:27:48 +00:00
parent 9c5781f926
commit 053efa3b1b
3 changed files with 111 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
frontend/src/routes/+page.svelte
View file

@ -6,5 +6,7 @@
<br>
<a href="surfers">surfers</a>
<br>
<a href="pri">test</a>
<a href="pri">horizontal</a>
<br>
<a href="vert">vertical</a>

7
frontend/src/routes/pri/+page.svelte
View file

@ -11,7 +11,7 @@
</select>
</div>
<div class="timer">
00:00
<a href="/">00:00</a>
</div>
<div class="button">
<button>START</button>
@ -30,6 +30,11 @@
</div>
<style>
a:link, a:hover, a:visited, a:active {
text-decoration: none;
color:bisque;
}
.container {
display: grid;
grid-gap: 5px;

102
frontend/src/routes/vert/+page.svelte Normal file
View file

@ -0,0 +1,102 @@
<script>
const lines = 5;
</script>
<div class="container">
<div class="header">
<div class="select">
<select name="heats" id="heats">
<option value="uno">Uno</option>
<option value="due">Due</option>
</select>
</div>
<div class="timer">
<a href="/">00:00</a>
</div>
<div class="button">
<button>START</button>
</div>
</div>
{#each Array(lines) as _}
<div class="line">
<div class="pri">
<h1>P</h1>
</div>
<div class="color">
</div>
</div>
{/each}
</div>
<style>
a:link, a:hover, a:visited, a:active {
text-decoration: none;
color:bisque;
}
.container {
display: grid;
grid-gap: 5px;
grid-auto-flow: row;
}
.header {
display: grid;
grid-template-columns: 1fr 3fr 1fr;
grid-template-areas:
"select timer button";
grid-template-rows: 4rem;
align-items: center;
background-color: darkblue;
}
.select {
grid-area: select;
justify-self: start;
margin-left: 5px;
}
.timer {
grid-area: timer;
text-align: center;
color: beige;
font-size: 3.5rem;
}
.button {
grid-area: button;
justify-self: end;
margin-right: 5px;
}
.line {
display: grid;
grid-gap: 4px;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: 4rem;
grid-template-areas:
"pri color color color color color";
align-items: center;
}
.pri {
grid-area: pri;
width: 100%;
height: 100%;
background-color: red;
text-justify: center;
text-align: center;
font-size: 1.5rem;
border-radius: 10px;
}
.color {
grid-area: color;
width: 100%;
height: 100%;
background-color: blue;
justify-self: end;
}
</style>