110 lines
2.9 KiB
Svelte
110 lines
2.9 KiB
Svelte
<script>
|
|
import {
|
|
ButtonGroup,
|
|
Icon,
|
|
} from 'sveltestrap';
|
|
|
|
import { challengeInfo } from '../stores/challengeinfo.js';
|
|
import { settings, time } from '../stores/settings.js';
|
|
</script>
|
|
|
|
{#if $settings}
|
|
{#if $settings.end - $settings.start > 0}
|
|
<div
|
|
class="clock display-2 text-end text-md-center"
|
|
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="{$challengeInfo.videoslink}"
|
|
class="btn btn-light"
|
|
class:disabled={$challengeInfo.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>
|