WIP

src/components/Question.vue

@@ -108,7 +108,7 @@ legend
   text-align: center
   font-size: 1.4rem
   line-height: 2rem
-  margin: 1rem
+  margin: 0 1rem
 
 .choices
   list-style-type: none
@@ -140,10 +140,12 @@ legend
       left: 3px
       width: calc(1rem - 6px)
       height: calc(1rem - 6px)
+    &:checked + label
+      font-weight: bold
     &:checked + label::before
-      background-color: white
-    &:checked + label::after
       background-color: var(--color-green)
+    &:checked + label::after
+      background-color: white
 
 .main
   height: 100%

src/components/Score.vue

@@ -9,6 +9,7 @@ import { Splide, SplideSlide } from "@splidejs/vue-splide";
 import Question from "./Question.vue";
 import "@splidejs/splide/dist/css/splide.min.css";
 import ScoreHeader from "./ScoreHeader.vue";
+import html2canvas from "html2canvas";
 
 const props = defineProps({
   id: {
@@ -110,6 +111,16 @@ function nextQuestion() {
     console.log(slides);
   }, 100);
 }
+
+async function share() {
+  console.log(document.querySelector(".latest"));
+  const canvas = await html2canvas(document.querySelector("body"));
+  let anchor = document.createElement("a");
+  anchor.download = "download.png";
+  anchor.href = canvas.toDataURL("image/png");
+  anchor.click();
+  anchor.remove();
+}
 </script>
 
 <template>
@@ -135,7 +146,7 @@ function nextQuestion() {
         @nextQuestion="nextQuestion"
       />
     </SplideSlide>
-    <SplideSlide class="latest" id="details">
+    <SplideSlide class="latest">
       <template v-if="displayScoreResult && result">
         <div>
           <h2 class="center">Probabilité d'échec</h2>
@@ -162,7 +173,7 @@ function nextQuestion() {
               </li>
             </ul>
           </div>
-          <button>Partager</button>
+          <button @click="() => share()">Partager</button>
         </div>
       </template>
       <template v-else>
@@ -258,9 +269,9 @@ label
 
   .details
     text-align: left
-    font-size: 1.1rem
+    font-size: .9rem
     border: 1px solid var(--color-highlight-text)
-    background: var(--color-text)
+    background: var(--color-highlight-background)
     margin: 1rem
     padding: 1rem
 

src/components/ScoresList.vue

@@ -123,6 +123,7 @@ function getTranslation(translations, key) {
     </ul>
   </header>
   <main>
+    <img src="/homepage.webp" class="homeImage" />
     <div class="container" v-if="scores">
       <ul>
         <template v-for="(score, index) in scores" :key="score.id">
@@ -177,14 +178,24 @@ header
 main
   width: 100%
   height: calc(100% - var(--header-size))
-  padding: 1rem
+  background-color: var(--color-background)
+  flex-direction: column
+  overflow: auto
+
+  .homeImage
+    height: 30vh
+    width: calc(100% + 2rem)
+    padding: 0
+    object-fit: contain
+    margin-left: -1rem
+
+.container
   display: flex
   justify-content: center
   align-items: center
   overflow: hidden
-  background-color: var(--color-background)
+  padding: 1rem
 
-.container
   ul
     margin: 0
     padding: 0
@@ -193,6 +204,7 @@ main
     flex-wrap: wrap
     justify-content: center
     max-width: 404px
+    border: 1px solid var(--color-green)
 
     li
       height: 202px
@@ -206,6 +218,7 @@ main
 
     a
       font-size: 2rem
+      line-height: 2rem
       color: var(--color-green)
       display: block
       width: 100%
@@ -215,4 +228,5 @@ main
       justify-content: center
       text-align: center
       padding: 1rem
+      text-decoration: none
 </style>