ui: Almost all interface done with Svelte

frontend/ui/src/routes/index.svelte

@@ -1,2 +1,62 @@
-<h1>Welcome to SvelteKit</h1>
-<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
+<script>
+ import {
+     Alert,
+     Container,
+     Card,
+     CardBody,
+     CardTitle,
+     Col,
+     Icon,
+     Row,
+ } from 'sveltestrap';
+
+ import { goto } from '$app/navigation';
+
+ import CardTheme from '../components/CardTheme.svelte';
+
+ import { my } from '../stores/my.js';
+ import { teams } from '../stores/teams.js';
+ import { themes } from '../stores/themes.js';
+ import { myThemes } from '../stores/mythemes.js';
+ import { settings } from '../stores/settings.js';
+</script>
+
+<Container class="mt-3">
+    {#if !$my}
+        {#if $settings.allowRegistration}
+            <Alert color="warning" class="text-justify" fade={false}>
+                <strong>Votre équipe n'est pas encore enregistrée.</strong> Rendez-vous sur <a href="/register">cette page</a> pour procéder à votre inscription.
+            </Alert>
+        {:else}
+            <Alert color="danger" class="text-justify" fade={false}>
+                <strong>Il semblerait qu'il y ait eu un problème lors de l'attribution de votre certificat.</strong> Veuillez vous signaler auprès de notre équipe afin de corriger ce problème.
+            </Alert>
+        {/if}
+    {:else if !($my.team_id)}
+        <Alert color="danger" fade={false}>
+            <strong>Attention&nbsp;:</strong> puisqu'il s'agit de captures effectuées dans le but de découvrir si des actes malveillants ont été commis sur différents systèmes d'information, les contenus qui sont téléchargeables <em>peuvent</em> contenir du contenu malveillant&nbsp;!
+        </Alert>
+    {:else}
+        <Alert color="info" class="text-justify" fade={false}>
+            <strong>Félicitations {#each $my.members as member, index (member.id)}{#if member.id !== $my.members[0].id}{#if member.id === $my.members[$my.members.length - 1].id}&nbsp;et {:else}, {/if}{/if}{member.firstname} {member.lastname}{/each}&nbsp;!</strong> vous êtes maintenant connecté à l'espace de votre équipe <em>{$teams[$my.team_id].name}</em>. Vous pouvez changer ce nom dès maintenant en vous rendant sur la page de <a href="edit">votre équipe</a>.
+        </Alert>
+
+        {#if ($my.team_id && !$my.members.length)}
+            <Alert color="warning" class="text-justify" fade={false}>
+                <strong>Les membres de votre équipe ne sont pas encore enregistrés.</strong> Passez voir l'équipe serveur pour corriger cela.
+            </Alert>
+        {/if}
+    {/if}
+
+    <Row cols="3">
+        {#each Object.keys($themes) as th, index}
+            <Col class="mb-3">
+            <CardTheme
+                class="{$my && $my.team_id && $myThemes[th].exercice_solved > 0?'border-success ':''}{$themes[th].exercice_coeff_max > 1?'border-warning ':''}"
+                theme={$themes[th]}
+                       on:click={goto(`/${$themes[th].urlid}`)}
+            />
+            </Col>
+        {/each}
+    </Row>
+</Container>