fic/server
Archived
1
0
Fork 0
Code Issues Pull requests 10 Releases Wiki Activity

ui: Almost all interface done with Svelte

Browse source
This commit is contained in:
nemunaire 2021-08-30 12:46:18 +02:00
commit 7e13cf28bd
54 changed files with 2809 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

108
frontend/ui/src/components/HeaderClock.svelte Normal file
View file

@ -0,0 +1,108 @@
<script>
import {
ButtonGroup,
Icon,
} from 'sveltestrap';
import { settings, time } from '../stores/settings.js';
</script>
{#if $settings}
{#if $settings.end - $settings.start > 0}
<div
class="clock display-2"
class:expired={$time.expired}
class:end={$time.end}
class:wait={$time.startIn}
>
{#if $time.seconds}
<span id="hours">
{$time.hours}
</span>
<span class="point">
:
</span>
<span id="minutes">
{$time.minutes}
</span>
<span class="point">
:
</span>
<span id="seconds">
{$time.seconds}
</span>
{:else}
Chargement
{/if}
</div>
{:else}
<div class="d-flex h-100 justify-content-center align-items-center">
<ButtonGroup size="lg">
<a
href="/"
class="btn btn-light"
>
<Icon name="ui-checks-grid" />
Accueil
</a>
<a
href="/rank"
class="btn btn-light"
>
<Icon name="sort-down" />
Classement
</a>
<a
href="{$settings.videoslink}"
class="btn btn-light"
class:disabled={$settings.videoslink === ''}
>
<Icon name="laptop-fill" />
Vidéos
</a>
</ButtonGroup>
</div>
{/if}
{:else}
<div class="d-flex h-100 justify-content-center align-items-center">
<h1 class="display-3 m-0">
Challenge forensic
</h1>
</div>
{/if}
<style>
.clock:not(.expired):not(.wait) .point, .clock.expired {
transition: color text-shadow 1s;
position: relative;
animation: clockanim 1s ease infinite;
-moz-animation: clockanim 1s ease infinite;
-webkit-animation: clockanim 1s ease infinite;
}
.clock.wait .point {
transition: color text-shadow 1s;
position: relative;
animation: clockwait 1s ease infinite;
-moz-animation: clockwait 1s ease infinite;
-webkit-animation: clockwait 1s ease infinite;
}
.end {
color: #e64143;
}
.point {
text-shadow: 0 0 20px #4eaee6;
}
.end .point {
text-shadow: 0 0 20px #e64143;
}
@keyframes clockanim {
0% { opacity: 1.0; }
50% { opacity: 0; }
100% { opacity: 1.0; }
}
@keyframes clockwait {
0% { text-shadow: 0 0 20px #A6D6F2; }
50% { text-shadow: 0 0 2px #A6D6F2; }
100% { text-shadow: 0 0 20px #A6D6F2; }
}
</style>