Most of the interface done

ui/src/components/CardRoutine.svelte

@@ -0,0 +1,59 @@
+<script>
+ import {
+     Button,
+     Card,
+     CardHeader,
+     Col,
+     Container,
+     ListGroup,
+     ListGroupItem,
+     Row,
+     Icon,
+ } from 'sveltestrap';
+
+ export let routine = {
+     title: "Classique",
+     steps: [
+         {
+             id: 1,
+             name: "Salutation & heure",
+             start: 0,
+         },
+         {
+             id: 2,
+             name: "7 min workout",
+             start: 60,
+         },
+         {
+             id: 3,
+             name: "RATP traffic",
+             start: 540,
+         },
+     ],
+ };
+</script>
+
+<Card>
+    <CardHeader>
+        <Button
+            color="outline-danger"
+            size="sm"
+            class="float-end ms-1"
+        >
+            <Icon name="trash" />
+        </Button>
+        <Button
+            color="outline-info"
+            size="sm"
+            class="float-end ms-1"
+        >
+            <Icon name="pencil" />
+        </Button>
+        {routine.title}
+    </CardHeader>
+    <ListGroup>
+        {#each routine.steps as step (step.id)}
+            <ListGroupItem action>{step.name}</ListGroupItem>
+        {/each}
+    </ListGroup>
+</Card>