Initial commit for the web interface

ui/src/routes/+layout.js

@@ -0,0 +1,2 @@
+export const ssr = false;
+export const prerender = true;

ui/src/routes/+layout.svelte

@@ -0,0 +1,34 @@
+<script>
+ import '../reveil.scss'
+ import "bootstrap-icons/font/bootstrap-icons.css";
+
+ import {
+     //Styles,
+ } from 'sveltestrap';
+
+ import Header from '../components/Header.svelte';
+ import Toaster from '../components/Toaster.svelte';
+</script>
+
+<svelte:head>
+    <title>Réveil</title>
+</svelte:head>
+
+<!--Styles /-->
+
+<Header
+    class="d-none d-lg-flex py-2"
+/>
+<div class="flex-fill pb-4 pb-lg-2">
+    <slot></slot>
+</div>
+<Toaster />
+<Header
+    class="d-flex d-lg-none py-1 fixed-bottom"
+/>
+
+<style>
+ :global(a.badge) {
+     text-decoration: none;
+ }
+</style>

ui/src/routes/+page.svelte

@@ -0,0 +1,48 @@
+<script>
+ import {
+     Container,
+     Icon,
+ } from 'sveltestrap';
+</script>
+
+<Container class="mh-100 h-100 d-flex flex-column justify-content-center text-center">
+    <figure>
+        <blockquote class="blockquote text-muted">
+            <p class="display-6">A well-known quote, contained in a blockquote element.</p>
+        </blockquote>
+        <figcaption class="blockquote-footer">
+            Someone famous in <cite title="Source Title">Source Title</cite>
+        </figcaption>
+    </figure>
+    <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>