reveil/ui/src/routes/+page.svelte

<script>
 import {
     Container,
     Icon,
 } from 'sveltestrap';

 import { quotes } from '../stores/quotes';
</script>

<Container class="flex-fill d-flex flex-column justify-content-center text-center">
    {#if $quotes.quoteOfTheDay}
        <figure>
            <blockquote class="blockquote text-muted">
                <p class="display-6">{$quotes.quoteOfTheDay.content}</p>
            </blockquote>
            <figcaption class="blockquote-footer">
                {$quotes.quoteOfTheDay.author}
            </figcaption>
        </figure>
    {:else}
        {#await quotes.refreshQOTD()}
            <div class="spinner-border" role="status">
                <span class="visually-hidden">Loading...</span>
            </div>
        {/await}
    {/if}
    <div class="display-5 mb-4">
        Prochain réveil&nbsp;: demain matin à 7h10 (dans 5 cycles)
    </div>
    <div class="d-flex gap-3 justify-content-center">
        <button class="btn btn-primary">
            <Icon name="node-plus" />
            Programmer un nouveau réveil
        </button>
        <button class="btn btn-info">
            <Icon name="node-plus" />
            5 cycles
        </button>
        <button class="btn btn-info">
            <Icon name="node-plus" />
            6 cycles
        </button>
    </div>
    <div class="d-flex gap-3 mt-3 justify-content-center">
        <button class="btn btn-outline-info">
            <Icon name="skip-end-fill" />
            Chanson suivante
        </button>
        <button class="btn btn-danger">
            <Icon name="stop-circle" />
            Éteindre le réveil
        </button>
        <button class="btn btn-outline-info">
            <Icon name="fast-forward-fill" />
            Passer cette étape de la routine
        </button>
    </div>
</Container>