feat: Modification du design des checkbox

.drone.yml

@@ -58,6 +58,18 @@ kind: secret
 name: DMH_AWS_SECRET_ACCESS_KEY
 data: sLiY4plTjS73Dzw0qHaAuSR4PiHGIhb6H2i1KyP2GpjvIDyaxbR2gjsjzn3E8e0gAtCiIM10nbvvAMvGmPoh1dLuYlmHj2YdOQA8wbjkA9jSqe9owbfxfrcEuDA=
 
+---
+# drone encrypt Weko/ceiba-scores $AWS_ACCESS_KEY_ID
+kind: secret
+name: FOURCHE_AWS_ACCESS_KEY_ID
+data: GgpM5vSzE4N4ldcs+Db+sjG/siXmO+sYvw9DJYr0puAIv3jejlzwa3zJGcwGb2fmwCqyxied
+
+---
+# drone encrypt Weko/ceiba-scores $AWS_SECRET_ACCESS_KEY
+kind: secret
+name: FOURCHE_AWS_SECRET_ACCESS_KEY
+data: rEE5ttbao6dla92YOw1vh1VE1sBWAjen+jfP/ZdUSDnFlkZKY56ms+V0jOReGulhwbVRxQijp1fTS43TW/vJbq3XSeTVUwDGTHLZFQ+yGObvr+4DKOVIRqp/rJE=
+
 ---
 kind: pipeline
 type: docker
@@ -65,14 +77,14 @@ name: prod
 
 steps:
 - name: install npm
-  image: node:current-alpine
+  image: node:20.12.2-alpine
   volumes:
   - name: node_modules
     path: /drone/src/node_modules
   commands:
   - npm i --include dev
   - npm run fetchData
-  - npm run lint
+  #- npm run lint
   - npm run build
   environment:
     NODE_ENV: 'production'
@@ -111,14 +123,14 @@ name: staging
 
 steps:
 - name: install npm
-  image: node:current-alpine
+  image: node:20.12.2-alpine
   volumes:
   - name: node_modules
     path: /drone/src/node_modules
   commands:
   - npm i
   - npm run fetchData
-  - npm run lint
+  #- npm run lint
   - npm run build
   environment:
     NODE_ENV: 'staging'
@@ -157,14 +169,14 @@ name: test
 
 steps:
 - name: install npm
-  image: node:current-alpine
+  image: node:20.12.2-alpine
   volumes:
   - name: node_modules
     path: /drone/src/node_modules
   commands:
   - npm i
   - npm run fetchData
-  - npm run lint
+  #- npm run lint
   - npm run build
   environment:
     NODE_ENV: 'test'
@@ -203,14 +215,14 @@ name: DMH
 
 steps:
 - name: install npm
-  image: node:current-alpine
+  image: node:20.12.2-alpine
   volumes:
   - name: node_modules
     path: /drone/src/node_modules
   commands:
   - npm i
   - npm run fetchData
-  - npm run lint
+  #- npm run lint
   - apk add --no-cache jq
   - echo $(cat src/data.json | jq -c '[.[4]]') > src/data.json
   - npm run build
@@ -241,3 +253,49 @@ volumes:
 - name: node_modules
   host:
     path: /tmp/drone/cache/weko/dmh.ceiba-conseil.com/node_modules
+
+---
+kind: pipeline
+type: docker
+name: FOURCHE
+
+steps:
+- name: install npm
+  image: node:20.12.2-alpine
+  volumes:
+  - name: node_modules
+    path: /drone/src/node_modules
+  commands:
+  - npm i
+  - npm run fetchData
+  #- npm run lint
+  - apk add --no-cache jq
+  - echo $(jq '[.[] | select(.id == 7 or .id == 11)]' src/data.json) > src/data.json
+  - npm run build
+
+- name: deploy on s3
+  image: minio/mc
+  environment:
+    AWS_ACCESS_KEY_ID:
+      from_secret: FOURCHE_AWS_ACCESS_KEY_ID
+    AWS_SECRET_ACCESS_KEY:
+      from_secret: FOURCHE_AWS_SECRET_ACCESS_KEY
+  commands:
+  - mc alias set garage https://s3.garage.resilien.cloud $AWS_ACCESS_KEY_ID $AWS_SECRET_ACCESS_KEY --api S3v4
+  - mc mirror --overwrite /drone/src/dist garage/fourche.ceiba-conseil.com
+
+- name: notify
+  image: plugins/matrix@sha256:f1affb31b0c86963c97c6f976fa0dcb3cc84272057fd8558d609d28b3064bd7f
+  settings:
+    homeserver: https://converser.eu
+    roomid: "QwOITmkKxRJJyCSDOZ:converser.eu"
+    userid: "resilien:converser.eu"
+    accesstoken:
+      from_secret: MATRIX_ACCESSTOKEN
+  when:
+    status: [ failure ]
+
+volumes:
+- name: node_modules
+  host:
+    path: /tmp/drone/cache/weko/fourche.ceiba-conseil.com/node_modules

.gitignore

@@ -28,7 +28,7 @@ coverage
 *.sw?
 
 # app
-src/data.json
+src/*.json
 public/answers
 public/homepage.webp
 public/logo.png

README.md

@@ -38,3 +38,5 @@ Voici les différentes briques utilisé autour du projet :
 - _[Directus](https://directus.io/)_ pour l'administration
 - _[Drone](https://drone.io)_ pour la compilation automatique du projet
 - _[Matrix](https://fr.wikipedia.org/wiki/Matrix_(protocole))_ est un protocole ouvert pour de la communication en temps réel
+
+Icon : https://www.svgrepo.com/collection/solar-linear-icons/

index.html

@@ -15,11 +15,16 @@
     <link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png">
     <link rel="icon" type="image/png" sizes="96x96" href="/favicon/favicon-96x96.png">
     <link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png">
-    <link rel="manifest" href="/favicon/manifest.json">
     <meta name="msapplication-TileColor" content="#ffffff">
     <meta name="msapplication-TileImage" content="/favicon/ms-icon-144x144.png">
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Scores Ceiba</title>
+    <meta name="description" content="L'application Scores de Ceiba">
+    <link rel="mask-icon" href="/mask-icon.svg" color="#FFFFFF">
+    <meta name="theme-color" content="#ffffff">
+
+    <link rel="icon" href="/favicon.ico">
+    <link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">
   </head>
   <body>
     <div id="app"></div>

package.json

@@ -10,23 +10,24 @@
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore"
   },
   "dependencies": {
-    "@splidejs/vue-splide": "^0.5.18",
+    "@splidejs/vue-splide": "^0.6.12",
     "html-to-image": "^1.11.11",
-    "pinia": "^2.0.11",
+    "pinia": "^2.1.7",
     "pinia-plugin-persist": "^1.0.0",
-    "sass": "^1.49.9",
+    "sass": "^1.75.0",
-    "sass-loader": "^12.6.0",
+    "sass-loader": "^14.2.1",
-    "sharp": "^0.30.3",
+    "sharp": "^0.33.3",
-    "vue": "^3.2.31",
+    "vite-plugin-pwa": "^0.19.8",
-    "vue-router": "^4.0.12"
+    "vue": "^3.4.26",
+    "vue-router": "^4.3.2"
   },
   "devDependencies": {
-    "@rushstack/eslint-patch": "^1.1.0",
+    "@rushstack/eslint-patch": "^1.10.2",
-    "@vitejs/plugin-vue": "^2.2.2",
+    "@vitejs/plugin-vue": "^5.0.4",
-    "@vue/eslint-config-prettier": "^7.0.0",
+    "@vue/eslint-config-prettier": "^9.0.0",
     "eslint": "^8.5.0",
     "eslint-plugin-vue": "^8.2.0",
-    "prettier": "^2.5.1",
+    "prettier": "^3.2.5",
-    "vite": "^2.8.4"
+    "vite": "^5.2.10"
   }
 }

scripts/fetchData.js

@@ -30,6 +30,32 @@ async function fetchAsset(uuid) {
   return fetch(url);
 }
 
+async function fetchCertitudesData() {
+  const fields = ["*", "translations.*"];
+  const url = `/items/certitudes?${fields
+    .map((item) => `fields[]=${item}`)
+    .join("&")}`;
+  let certitudes = (await fetchJSONApi(url)).data;
+  await fs.writeFile(
+    "./src/certitudes.json",
+    JSON.stringify(certitudes),
+    "utf8",
+  );
+}
+
+async function fetchCertitudesResultsData() {
+  const fields = ["*", "translations.*"];
+  const url = `/items/certitudes_results?${fields
+    .map((item) => `fields[]=${item}`)
+    .join("&")}`;
+  let certitudes = (await fetchJSONApi(url)).data;
+  await fs.writeFile(
+    "./src/certitudesResults.json",
+    JSON.stringify(certitudes),
+    "utf8",
+  );
+}
+
 async function fetchScoresData() {
   const fields = [
     "*",
@@ -69,7 +95,7 @@ async function fetchScoresData() {
         await streamPipeline(
           response.body,
           thumbnail,
-          createWriteStream(`${folder}/${uuid_score}.webp`)
+          createWriteStream(`${folder}/${uuid_score}.webp`),
         );
       } catch (err) {
         console.log(err);
@@ -312,6 +338,8 @@ async function fetchHomepageData() {
 
 async function fetchData() {
   await fetchHomepageData();
+  await fetchCertitudesData();
+  await fetchCertitudesResultsData();
   await fetchScoresData();
 }
 

src/assets/base.css

@@ -6,11 +6,16 @@
   --color-black: #000000;
   --color-green: rgb(118, 148, 67);
 
-  --header-size-small: 64px;
+  --header-size-small: 48px;
   --header-size-big: 128px;
   --header-size: var(--header-size-small);
 
-  --footer-size: 64px;
+  --footer-size: 48px;
+
+  --color-red: #c82606;
+  --color-orange: #df6a0f;
+  --color-light-green: #70bf41;
+  --color-dark-green: #00882b;
 }
 
 /* semantic color variables for this project */
@@ -123,3 +128,12 @@ header svg.color-text [stroke] {
 header svg.color-text [fill]:not([fill=none]) {
   fill: var(--color-header-text)
 }
+
+strong {
+  font-weight: bold;
+}
+
+.bg-red { background: var(--color-red); }
+.bg-orange { background: var(--color-orange); }
+.bg-light-green { background: var(--color-light-green); }
+.bg-dark-green { background: var(--color-dark-green); }

src/components/Certitude.vue

@@ -0,0 +1,191 @@
+<script setup>
+import { ref, computed, watchEffect } from "vue";
+import { useStore } from "@/stores"; // adapte le chemin si besoin
+
+const store = useStore();
+
+const props = defineProps({
+  certitude: {
+    type: Object,
+    required: true,
+  },
+});
+
+const emits = defineEmits(["answerSelected", "nextQuestion"]);
+
+const selectedWeight = ref(null);
+
+// Utilise la langue du store
+const language = computed(() => store.language || "fr-FR");
+
+// Recherche la bonne traduction selon la langue courante
+const translation = computed(() => {
+  return (
+    props.certitude.translations.find(
+      (t) => t.languages_code === language.value,
+    ) ||
+    // Fallback en français
+    props.certitude.translations.find((t) => t.languages_code === "fr-FR") ||
+    // Fallback générique
+    props.certitude.translations[0]
+  );
+});
+
+// Regroupe les réponses avec leurs poids
+const answers = computed(() => {
+  return [1, 2, 3].map((i) => ({
+    id: i,
+    title: translation.value[`answer${i}`],
+    weight: props.certitude[`weight${i}`],
+  }));
+});
+
+function selectAnswer(answer) {
+  selectedWeight.value = answer.weight;
+  emits("answerSelected", props.certitude, selectedWeight.value);
+}
+
+watchEffect(() => {
+  if (answers.value.length && selectedWeight.value === null) {
+    selectAnswer(answers.value[0]);
+  }
+});
+</script>
+
+<template>
+  <div class="main">
+    <div class="center">
+      <legend>{{ translation.title }}</legend>
+      <div class="description" v-html="translation.description"></div>
+
+      <ul class="choices">
+        <li class="choice" v-for="answer in answers" :key="answer.id">
+          <input
+            type="radio"
+            :id="`certitude_${certitude.id}_answer_${answer.id}`"
+            :name="`certitude_${certitude.id}`"
+            :value="answer.weight"
+            v-model="selectedWeight"
+            @change="selectAnswer(answer)"
+            @click="$emit('nextQuestion')"
+          />
+          <label :for="`certitude_${certitude.id}_answer_${answer.id}`">
+            <div>{{ answer.title }}</div>
+          </label>
+        </li>
+      </ul>
+    </div>
+  </div>
+
+  <div class="btns">
+    <button class="btn next" @click="$emit('nextQuestion')">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 40 40"
+        width="40"
+        height="40"
+      >
+        <path
+          d="m15.5 0.932-4.3 4.38 14.5 14.6-14.5 14.5 4.3 4.4 14.6-14.6 4.4-4.3-4.4-4.4-14.6-14.6z"
+        ></path>
+      </svg>
+    </button>
+  </div>
+</template>
+
+<style scoped lang="sass">
+legend
+  text-align: center
+  font-size: 1.4rem
+  line-height: 2rem
+  font-weight: bold
+  width: 100%
+
+.description
+  text-align: center
+  padding: 1rem
+  font-size: 1rem
+
+.choices
+  list-style-type: none
+  text-align: left
+  display: inline-block
+  padding-left: 0
+
+  label
+    cursor: pointer
+    display: block
+
+  input[type=radio]
+    display: none
+
+    & + label > div
+      position: relative
+      padding: .2rem .2rem .2rem 2rem
+
+    & + label > div::before,
+    & + label > div::after
+      display: block
+      position: absolute
+      box-sizing: border-box
+      content:''
+      border-radius: 1rem
+
+    & + label > div::before
+      top: .5rem
+      left: 0
+      background-color: var(--color-green)
+      width: 1rem
+      height: 1rem
+
+    & + label > div::after
+      top: calc(3px + .5rem)
+      left: 3px
+      width: calc(1rem - 6px)
+      height: calc(1rem - 6px)
+
+    &:checked + label > div
+      text-shadow: -0.06ex 0 0 currentColor, 0.06ex 0 0 currentColor
+
+    &:not(:checked) + label > div::before
+      background-color: var(--color-green)
+
+    &:not(:checked) + label > div::after
+      background-color: white
+
+.main
+  height: 100%
+  max-width: 100%
+  display: flex
+  flex-direction: column
+  justify-content: space-around
+  align-items: center
+
+  .center
+    width: 100%
+    text-align: center
+
+.btns
+  width: 400px
+  max-width: 100%
+  min-width: 280px
+  position: relative
+  margin: 0 auto
+
+.next
+  background: var(--color-highlight-background)
+  bottom: 1rem
+  right: 1rem
+  width: 3rem
+  height: 3rem
+  opacity: .8
+
+  &:hover
+    opacity: 1
+
+  svg
+    width: 80%
+    height: 80%
+    transform: rotate(90deg)
+    fill: var(--color-highlight-text)
+</style>

src/components/Question.vue

@@ -17,7 +17,7 @@ const answerWeight = ref(props.question.weight);
 
 function selectAnswer(answer) {
   const answerIndex = props.question.answers.findIndex(
-    (a) => a.id === answer.id
+    (a) => a.id === answer.id,
   );
   slides.value.splide.go(answerIndex);
 }
@@ -48,8 +48,10 @@ function validatePopup() {
     }
   });
   const answer = document.querySelector(
-    "input[id=" + `question_${props.question.id}_answer_${answerIndex.id}` + "]"
+    "input[id=" +
-  )
+      `question_${props.question.id}_answer_${answerIndex.id}` +
+      "]",
+  );
   answer.checked = true;
   answer.dispatchEvent(new Event("change"));
   showHidePopup();

src/components/Score.vue

@@ -1,15 +1,18 @@
 <script setup>
 import data from "@/data.json";
+import certitudes from "@/certitudes.json";
+import certitudesResults from "@/certitudesResults.json";
 
-import { ref, computed } from "vue";
+import { ref, computed, watch } from "vue";
 
 import { useStore } from "@/stores";
 
 import { Splide, SplideSlide } from "@splidejs/vue-splide";
 import Question from "./Question.vue";
+import Certitude from "./Certitude.vue";
 import "@splidejs/splide/dist/css/splide.min.css";
 import ScoreHeader from "./ScoreHeader.vue";
-import { toPng } from "html-to-image";
+// import { toPng } from "html-to-image";
 
 const props = defineProps({
   id: {
@@ -29,7 +32,7 @@ function formatAnswers(answers) {
     .map((answer) => answer.answers_id)
     .map((answer) => {
       const translation = answer.translations.filter(
-        (item) => item.languages_code == language
+        (item) => item.languages_code == language,
       );
       return {
         id: answer.id,
@@ -45,7 +48,7 @@ function formatScore(score) {
     .map((question) => question.questions_id)
     .map((question) => {
       const translation = question.translations.filter(
-        (item) => item.languages_code == language
+        (item) => item.languages_code == language,
       );
       const answers = formatAnswers(question.answers);
       return {
@@ -72,14 +75,14 @@ const scoreSum = computed(() => {
     .reduce((value, currentValue) => value + currentValue, 0);
 });
 const displayScoreResult = computed(
-  () => !questions.value.filter((q) => q.weight == null).length
+  () => !questions.value.filter((q) => q.weight == null).length,
 );
 function getResultsFromScore(score) {
   return score.results
     .map((result) => result.results_id)
     .map((result) => {
       const translation = result.translations.filter(
-        (item) => item.languages_code == language
+        (item) => item.languages_code == language,
       );
       return {
         id: result.id,
@@ -100,12 +103,12 @@ const result = computed(() =>
     ? results.value
         .filter((r) => !r.min || r.min <= scoreSum.value)
         .filter((r) => !r.max || r.max >= scoreSum.value)[0]
-    : null
+    : null,
 );
 function goQuestionSlide(question) {
   console.log(slides.value);
   slides.value.go(
-    questions.value.findIndex((element) => element.id === question.id)
+    questions.value.findIndex((element) => element.id === question.id),
   );
 }
 function answerSelected(question, answerWeight) {
@@ -115,53 +118,82 @@ function answerSelected(question, answerWeight) {
 function nextQuestion() {
   setTimeout(() => {
     slides.value.go(">");
-    console.log(slides);
+    // console.log(slides);
   }, 100);
 }
 
-const saveAs = (blob, fileName) => {
+// const saveAs = (blob, fileName) => {
-  var elem = window.document.createElement("a");
+//   var elem = window.document.createElement("a");
-  elem.href = blob;
+//   elem.href = blob;
-  elem.download = fileName;
+//   elem.download = fileName;
-  elem.style = "display:none;";
+//   elem.style = "display:none;";
-  (document.body || document.documentElement).appendChild(elem);
+//   (document.body || document.documentElement).appendChild(elem);
-  if (typeof elem.click === "function") {
+//   if (typeof elem.click === "function") {
-    elem.click();
+//     elem.click();
-  } else {
+//   } else {
-    elem.target = "_blank";
+//     elem.target = "_blank";
-    elem.dispatchEvent(
+//     elem.dispatchEvent(
-      new MouseEvent("click", {
+//       new MouseEvent("click", {
-        view: window,
+//         view: window,
-        bubbles: true,
+//         bubbles: true,
-        cancelable: true,
+//         cancelable: true,
-      })
+//       }),
-    );
+//     );
-  }
+//   }
-  URL.revokeObjectURL(elem.href);
+//   URL.revokeObjectURL(elem.href);
-  elem.remove();
+//   elem.remove();
-};
+// };
 
-const sharing = ref(false);
+// const sharing = ref(false);
-async function share() {
+// async function share() {
-  sharing.value = true;
+//   sharing.value = true;
-  const filter = (node) => {
+//   const filter = (node) => {
-    const exclusionClasses = ["btn"];
+//     const exclusionClasses = ["btn"];
-    return !exclusionClasses.some((classname) =>
+//     return !exclusionClasses.some((classname) =>
-      node.classList?.contains(classname)
+//       node.classList?.contains(classname),
+//     );
+//   };
+//   const body = document.querySelector("body");
+//   body.classList.add("print");
+//   const dataUrl = await toPng(body, { filter: filter });
+//   body.classList.remove("print");
+//   const fileName = new Date()
+//     .toISOString()
+//     .replace(/T/, "_")
+//     .replace(/\..+/, "")
+//     .replaceAll(":", "-");
+//   saveAs(dataUrl, `Ceiba-score-${fileName}.png`);
+//   sharing.value = false;
+// }
+
+const displayCertitude = ref(false);
+const weightCertitudes = ref(new Array(certitudes.length).fill(0));
+const weightAllCertitudes = ref(0);
+const certitudeResult = ref(selectCertitudeResult());
+function selectCertitudeResult() {
+  const certitude = certitudesResults.find(
+    (result) =>
+      result.weight_min <= weightAllCertitudes.value &&
+      result.weight_max >= weightAllCertitudes.value,
   );
-  };
+  const certitudeTrad = certitude?.translations.find(
-  const body = document.querySelector("body");
+    (translation) => translation.languages_code == language,
-  body.classList.add("print");
+  );
-  const dataUrl = await toPng(body, { filter: filter });
+  return { ...certitudeTrad, color: certitude.color };
-  body.classList.remove("print");
-  const fileName = new Date()
-    .toISOString()
-    .replace(/T/, "_")
-    .replace(/\..+/, "")
-    .replaceAll(":", "-");
-  saveAs(dataUrl, `Ceiba-score-${fileName}.png`);
-  sharing.value = false;
 }
+function displayCertitudeQuestions() {
+  displayCertitude.value = !displayCertitude.value;
+}
+function answerSelectedCertitude(question, answerWeight) {
+  weightCertitudes.value[question.sort - 1] = answerWeight;
+  weightAllCertitudes.value = weightCertitudes.value.reduce(
+    (accumulator, curr) => accumulator + curr,
+    0,
+  );
+}
+watch(weightAllCertitudes, () => {
+  certitudeResult.value = selectCertitudeResult();
+});
 </script>
 
 <template>
@@ -187,6 +219,15 @@ async function share() {
         @nextQuestion="nextQuestion"
       />
     </SplideSlide>
+    <template v-if="displayCertitude">
+      <SplideSlide v-for="certitude in certitudes" :key="certitude.id">
+        <Certitude
+          :certitude="certitude"
+          @answerSelected="answerSelectedCertitude"
+          @nextQuestion="nextQuestion"
+        />
+      </SplideSlide>
+    </template>
     <SplideSlide class="latest">
       <template v-if="displayScoreResult && result">
         <div>
@@ -210,13 +251,22 @@ async function share() {
                 {{ question.title }} :
                 {{
                   question.answers.find(
-                    (answer) => answer.weight === question.weight
+                    (answer) => answer.weight === question.weight,
                   ).title
                 }}
               </li>
             </ul>
           </div>
-          <button class="btn download" @click="() => share()" v-if="!sharing">
+          <div class="certitude_result">
+            Niveau de certitude
+            <button
+              @click="displayCertitudeQuestions"
+              :class="'bg-' + certitudeResult.color"
+            >
+              <span>{{ certitudeResult?.niveau }} </span>
+            </button>
+          </div>
+          <!--button class="btn download" @click="() => share()" v-if="!sharing">
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
               <path
                 fill="#D99E82"
@@ -235,10 +285,10 @@ async function share() {
                 d="M26.716 8h-4.783V2c0-1.105-.896-2-2-2h-4.001c-1.104 0-1.999.896-1.999 2v6H9.148c-1.223 0-1.516.623-.651 1.489l7.863 7.863c.865.865 2.28.865 3.146 0l7.863-7.863C28.232 8.623 27.94 8 26.716 8z"
               />
             </svg>
-          </button>
+          </button-->
-          <button class="btn spin" v-if="sharing">
+          <!-- <button class="btn spin" v-if="sharing">
             <img src="/spin.svg" />
-          </button>
+          </button> -->
         </div>
       </template>
       <template v-else>
@@ -271,6 +321,27 @@ async function share() {
 </template>
 
 <style lang="sass" scoped>
+.certitude_result
+  padding-top: 1rem
+  font-size: 1.1rem
+  text-align: center
+  color: var(--color-highlight-text)
+  & *
+    font-weight: 800
+  button
+    display: flex
+    width: 100%
+    color: var(--color-highlight-text)
+    justify-content: center
+    flex-direction: row
+    align-items: center
+    margin: .2rem auto 0
+    border-radius: 0
+    border: none
+    font-weight: 900 !important
+    font-size: 1.1rem
+    padding: .3rem
+
 .spin
   bottom: 1.5rem
   right: 1.5rem
@@ -352,7 +423,7 @@ label
   justify-content: center
 
   h2
-    font-size: 2rem
+    font-size: 1.5rem
     font-weight: bold
     line-height: 2.4rem
     & + h2
@@ -383,10 +454,10 @@ label
 
 .gradient
   padding: 0 1rem
-  height: 3rem
+  height: 2.5rem
   background-image: linear-gradient(to right, red, red, rgb(255, 255, 0), rgb(255, 255, 0), green, green)
   display: flex
-  margin: 2.5rem auto
+  margin: 1.5rem auto
   align-items: center
   border-radius: 3px
   max-width: 30rem
@@ -416,8 +487,8 @@ label
       content: ""
       border: 1px solid var(--color-highlight-text)
       border-radius: 3px
-      top: -2.8rem
+      top: -1rem
-      bottom: -1.5rem
+      bottom: -1rem
       position: absolute
       width: 100%
       font-weight: bold
@@ -426,7 +497,7 @@ label
       justify-content: center
 
     &::after
-      content: attr(data-title)
+      content: ""
       position: absolute
       font-size: 1rem
       top: -2rem

src/components/ScoreHeader.vue

@@ -13,22 +13,80 @@ defineProps({
 <template>
   <header>
     <router-link :to="{ name: 'home' }">
-      <svg class="color-text" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <svg
-        <path d="M22 22L2 22" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
+        class="color-text"
-        <path d="M2 11L10.1259 4.49931C11.2216 3.62279 12.7784 3.62279 13.8741 4.49931L22 11" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
+        viewBox="0 0 24 24"
-        <path d="M15.5 5.5V3.5C15.5 3.22386 15.7239 3 16 3H18.5C18.7761 3 19 3.22386 19 3.5V8.5" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
+        fill="none"
-        <path d="M4 22V9.5" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
+        xmlns="http://www.w3.org/2000/svg"
-        <path d="M20 22V9.5" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
+      >
-        <path d="M15 22V17C15 15.5858 15 14.8787 14.5607 14.4393C14.1213 14 13.4142 14 12 14C10.5858 14 9.87868 14 9.43934 14.4393C9 14.8787 9 15.5858 9 17V22" stroke="white" stroke-width="1.5"/>
+        <path
-        <path d="M14 9.5C14 10.6046 13.1046 11.5 12 11.5C10.8954 11.5 10 10.6046 10 9.5C10 8.39543 10.8954 7.5 12 7.5C13.1046 7.5 14 8.39543 14 9.5Z" stroke="white" stroke-width="1.5"/>
+          d="M22 22L2 22"
+          stroke="white"
+          stroke-width="1.5"
+          stroke-linecap="round"
+        />
+        <path
+          d="M2 11L10.1259 4.49931C11.2216 3.62279 12.7784 3.62279 13.8741 4.49931L22 11"
+          stroke="white"
+          stroke-width="1.5"
+          stroke-linecap="round"
+        />
+        <path
+          d="M15.5 5.5V3.5C15.5 3.22386 15.7239 3 16 3H18.5C18.7761 3 19 3.22386 19 3.5V8.5"
+          stroke="white"
+          stroke-width="1.5"
+          stroke-linecap="round"
+        />
+        <path
+          d="M4 22V9.5"
+          stroke="white"
+          stroke-width="1.5"
+          stroke-linecap="round"
+        />
+        <path
+          d="M20 22V9.5"
+          stroke="white"
+          stroke-width="1.5"
+          stroke-linecap="round"
+        />
+        <path
+          d="M15 22V17C15 15.5858 15 14.8787 14.5607 14.4393C14.1213 14 13.4142 14 12 14C10.5858 14 9.87868 14 9.43934 14.4393C9 14.8787 9 15.5858 9 17V22"
+          stroke="white"
+          stroke-width="1.5"
+        />
+        <path
+          d="M14 9.5C14 10.6046 13.1046 11.5 12 11.5C10.8954 11.5 10 10.6046 10 9.5C10 8.39543 10.8954 7.5 12 7.5C13.1046 7.5 14 8.39543 14 9.5Z"
+          stroke="white"
+          stroke-width="1.5"
+        />
       </svg>
     </router-link>
     <h1>{{ title }}</h1>
     <a v-if="link" :href="link">
-      <svg class="color-text" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <svg
-        <path d="M12 17V11" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
+        class="color-text"
-        <circle cx="1" cy="1" r="1" transform="matrix(1 0 0 -1 11 9)" fill="white"/>
+        viewBox="0 0 24 24"
-        <path stroke="white" stroke-width="1.5" d="M2 12C2 7.28595 2 4.92893 3.46447 3.46447C4.92893 2 7.28595 2 12 2C16.714 2 19.0711 2 20.5355 3.46447C22 4.92893 22 7.28595 22 12C22 16.714 22 19.0711 20.5355 20.5355C19.0711 22 16.714 22 12 22C7.28595 22 4.92893 22 3.46447 20.5355C2 19.0711 2 16.714 2 12Z"/>
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M12 17V11"
+          stroke="white"
+          stroke-width="1.5"
+          stroke-linecap="round"
+        />
+        <circle
+          cx="1"
+          cy="1"
+          r="1"
+          transform="matrix(1 0 0 -1 11 9)"
+          fill="white"
+        />
+        <path
+          stroke="white"
+          stroke-width="1.5"
+          d="M2 12C2 7.28595 2 4.92893 3.46447 3.46447C4.92893 2 7.28595 2 12 2C16.714 2 19.0711 2 20.5355 3.46447C22 4.92893 22 7.28595 22 12C22 16.714 22 19.0711 20.5355 20.5355C19.0711 22 16.714 22 12 22C7.28595 22 4.92893 22 3.46447 20.5355C2 19.0711 2 16.714 2 12Z"
+        />
       </svg>
     </a>
   </header>

src/components/ScoresList.vue

@@ -8,7 +8,7 @@ const translationKey = "languages_id";
 const scores = data.filter((score) => {
   return (
     !!score.translations.find(
-      (translation) => translation[translationKey] == store.language
+      (translation) => translation[translationKey] == store.language,
     ) &&
     score.results.length &&
     score.questions.length
@@ -27,14 +27,82 @@ function getTranslation(translations, key) {
         @click="store.switchTheme"
         title="Thème de votre système"
       >
-        <svg class="color-text" version="1.1" id="Icons" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" xml:space="preserve">
+        <svg
-          <line fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="16" y1="3" x2="16" y2="29"/>
+          class="color-text"
-          <path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M16,23c-3.87,0-7-3.13-7-7s3.13-7,7-7"/>
+          version="1.1"
-          <line fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="6.81" y1="6.81" x2="8.93" y2="8.93"/>
+          id="Icons"
-          <line fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="3" y1="16" x2="6" y2="16"/>
+          xmlns="http://www.w3.org/2000/svg"
-          <line fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="6.81" y1="25.19" x2="8.93" y2="23.07"/>
+          xmlns:xlink="http://www.w3.org/1999/xlink"
-          <path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M16,12.55C17.2,10.43,19.48,9,22.09,9c0.16,0,0.31,0.01,0.47,0.02c-1.67,0.88-2.8,2.63-2.8,4.64
+          viewBox="0 0 32 32"
-            c0,2.9,2.35,5.25,5.25,5.25c1.6,0,3.03-0.72,3.99-1.85C28.48,20.43,25.59,23,22.09,23c-2.61,0-4.89-1.43-6.09-3.55"/>
+          xml:space="preserve"
+        >
+          <line
+            fill="none"
+            stroke="#000000"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-miterlimit="10"
+            x1="16"
+            y1="3"
+            x2="16"
+            y2="29"
+          />
+          <path
+            fill="none"
+            stroke="#000000"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-miterlimit="10"
+            d="M16,23c-3.87,0-7-3.13-7-7s3.13-7,7-7"
+          />
+          <line
+            fill="none"
+            stroke="#000000"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-miterlimit="10"
+            x1="6.81"
+            y1="6.81"
+            x2="8.93"
+            y2="8.93"
+          />
+          <line
+            fill="none"
+            stroke="#000000"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-miterlimit="10"
+            x1="3"
+            y1="16"
+            x2="6"
+            y2="16"
+          />
+          <line
+            fill="none"
+            stroke="#000000"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-miterlimit="10"
+            x1="6.81"
+            y1="25.19"
+            x2="8.93"
+            y2="23.07"
+          />
+          <path
+            fill="none"
+            stroke="#000000"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-miterlimit="10"
+            d="M16,12.55C17.2,10.43,19.48,9,22.09,9c0.16,0,0.31,0.01,0.47,0.02c-1.67,0.88-2.8,2.63-2.8,4.64
+            c0,2.9,2.35,5.25,5.25,5.25c1.6,0,3.03-0.72,3.99-1.85C28.48,20.43,25.59,23,22.09,23c-2.61,0-4.89-1.43-6.09-3.55"
+          />
         </svg>
       </li>
       <li
@@ -42,9 +110,16 @@ function getTranslation(translations, key) {
         @click="store.switchTheme"
         title="Thème sombre"
       >
-
+        <svg
-      <svg class="color-text" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          class="color-text"
-        <path fill="white" d="M21.0672 11.8568L20.4253 11.469L21.0672 11.8568ZM12.1432 2.93276L11.7553 2.29085V2.29085L12.1432 2.93276ZM21.25 12C21.25 17.1086 17.1086 21.25 12 21.25V22.75C17.9371 22.75 22.75 17.9371 22.75 12H21.25ZM12 21.25C6.89137 21.25 2.75 17.1086 2.75 12H1.25C1.25 17.9371 6.06294 22.75 12 22.75V21.25ZM2.75 12C2.75 6.89137 6.89137 2.75 12 2.75V1.25C6.06294 1.25 1.25 6.06294 1.25 12H2.75ZM15.5 14.25C12.3244 14.25 9.75 11.6756 9.75 8.5H8.25C8.25 12.5041 11.4959 15.75 15.5 15.75V14.25ZM20.4253 11.469C19.4172 13.1373 17.5882 14.25 15.5 14.25V15.75C18.1349 15.75 20.4407 14.3439 21.7092 12.2447L20.4253 11.469ZM9.75 8.5C9.75 6.41182 10.8627 4.5828 12.531 3.57467L11.7553 2.29085C9.65609 3.5593 8.25 5.86509 8.25 8.5H9.75ZM12 2.75C11.9115 2.75 11.8077 2.71008 11.7324 2.63168C11.6686 2.56527 11.6538 2.50244 11.6503 2.47703C11.6461 2.44587 11.6482 2.35557 11.7553 2.29085L12.531 3.57467C13.0342 3.27065 13.196 2.71398 13.1368 2.27627C13.0754 1.82126 12.7166 1.25 12 1.25V2.75ZM21.7092 12.2447C21.6444 12.3518 21.5541 12.3539 21.523 12.3497C21.4976 12.3462 21.4347 12.3314 21.3683 12.2676C21.2899 12.1923 21.25 12.0885 21.25 12H22.75C22.75 11.2834 22.1787 10.9246 21.7237 10.8632C21.286 10.804 20.7293 10.9658 20.4253 11.469L21.7092 12.2447Z"/>
+          viewBox="0 0 24 24"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            fill="white"
+            d="M21.0672 11.8568L20.4253 11.469L21.0672 11.8568ZM12.1432 2.93276L11.7553 2.29085V2.29085L12.1432 2.93276ZM21.25 12C21.25 17.1086 17.1086 21.25 12 21.25V22.75C17.9371 22.75 22.75 17.9371 22.75 12H21.25ZM12 21.25C6.89137 21.25 2.75 17.1086 2.75 12H1.25C1.25 17.9371 6.06294 22.75 12 22.75V21.25ZM2.75 12C2.75 6.89137 6.89137 2.75 12 2.75V1.25C6.06294 1.25 1.25 6.06294 1.25 12H2.75ZM15.5 14.25C12.3244 14.25 9.75 11.6756 9.75 8.5H8.25C8.25 12.5041 11.4959 15.75 15.5 15.75V14.25ZM20.4253 11.469C19.4172 13.1373 17.5882 14.25 15.5 14.25V15.75C18.1349 15.75 20.4407 14.3439 21.7092 12.2447L20.4253 11.469ZM9.75 8.5C9.75 6.41182 10.8627 4.5828 12.531 3.57467L11.7553 2.29085C9.65609 3.5593 8.25 5.86509 8.25 8.5H9.75ZM12 2.75C11.9115 2.75 11.8077 2.71008 11.7324 2.63168C11.6686 2.56527 11.6538 2.50244 11.6503 2.47703C11.6461 2.44587 11.6482 2.35557 11.7553 2.29085L12.531 3.57467C13.0342 3.27065 13.196 2.71398 13.1368 2.27627C13.0754 1.82126 12.7166 1.25 12 1.25V2.75ZM21.7092 12.2447C21.6444 12.3518 21.5541 12.3539 21.523 12.3497C21.4976 12.3462 21.4347 12.3314 21.3683 12.2676C21.2899 12.1923 21.25 12.0885 21.25 12H22.75C22.75 11.2834 22.1787 10.9246 21.7237 10.8632C21.286 10.804 20.7293 10.9658 20.4253 11.469L21.7092 12.2447Z"
+          />
         </svg>
       </li>
       <li
@@ -52,16 +127,61 @@ function getTranslation(translations, key) {
         @click="store.switchTheme"
         title="Thème clair"
       >
-        <svg class="color-text" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <svg
-          <circle cx="12" cy="12" r="5" stroke="#1C274C" stroke-width="1.5"/>
+          class="color-text"
-          <path d="M12 2V4" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
+          viewBox="0 0 24 24"
-          <path d="M12 20V22" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
+          fill="none"
-          <path d="M4 12L2 12" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
+          xmlns="http://www.w3.org/2000/svg"
-          <path d="M22 12L20 12" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
+        >
-          <path d="M19.7778 4.22266L17.5558 6.25424" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
+          <circle cx="12" cy="12" r="5" stroke="#1C274C" stroke-width="1.5" />
-          <path d="M4.22217 4.22266L6.44418 6.25424" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
+          <path
-          <path d="M6.44434 17.5557L4.22211 19.7779" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
+            d="M12 2V4"
-          <path d="M19.7778 19.7773L17.5558 17.5551" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
+            stroke="#1C274C"
+            stroke-width="1.5"
+            stroke-linecap="round"
+          />
+          <path
+            d="M12 20V22"
+            stroke="#1C274C"
+            stroke-width="1.5"
+            stroke-linecap="round"
+          />
+          <path
+            d="M4 12L2 12"
+            stroke="#1C274C"
+            stroke-width="1.5"
+            stroke-linecap="round"
+          />
+          <path
+            d="M22 12L20 12"
+            stroke="#1C274C"
+            stroke-width="1.5"
+            stroke-linecap="round"
+          />
+          <path
+            d="M19.7778 4.22266L17.5558 6.25424"
+            stroke="#1C274C"
+            stroke-width="1.5"
+            stroke-linecap="round"
+          />
+          <path
+            d="M4.22217 4.22266L6.44418 6.25424"
+            stroke="#1C274C"
+            stroke-width="1.5"
+            stroke-linecap="round"
+          />
+          <path
+            d="M6.44434 17.5557L4.22211 19.7779"
+            stroke="#1C274C"
+            stroke-width="1.5"
+            stroke-linecap="round"
+          />
+          <path
+            d="M19.7778 19.7773L17.5558 17.5551"
+            stroke="#1C274C"
+            stroke-width="1.5"
+            stroke-linecap="round"
+          />
         </svg>
       </li>
     </ul>

src/main.js

@@ -1,10 +1,16 @@
 import { createApp } from "vue";
 import { createPinia } from "pinia";
 import piniaPersist from "pinia-plugin-persist";
+import { registerSW } from "virtual:pwa-register";
 
 import App from "@/App.vue";
 import router from "@/router";
 
+if ("serviceWorker" in navigator) {
+  // && !/localhost/.test(window.location)) {
+  registerSW();
+}
+
 const app = createApp(App);
 const pinia = createPinia();
 pinia.use(piniaPersist);

vite.config.js

@@ -1,11 +1,55 @@
 import { fileURLToPath, URL } from "url";
+import { VitePWA } from "vite-plugin-pwa";
 
 import { defineConfig } from "vite";
 import vue from "@vitejs/plugin-vue";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue()],
+  // publicDir: 'public',
+  // includeAssets: ['public/answers/*.web'],
+  plugins: [
+    vue(),
+    VitePWA({
+      name: "My First Progressive Web app",
+      short_name: "First PWA",
+      theme_color: "#eb5252",
+      background_color: "#000000",
+      registerType: "autoUpdate",
+      injectRegister: "auto",
+      // add this to cache all the imports
+      workbox: {
+        globPatterns: ["**/*"],
+      },
+      // add this to cache all the
+      // static assets in the public folder
+      includeAssets: ["**/*"],
+      useCredentials: true,
+      manifest: {
+        theme_color: "#eb5252",
+        orientation: "portrait",
+        display: "fullscreen",
+        scope: "/",
+        icons: [
+          {
+            src: "/images/pwa-icon-256.png",
+            sizes: "192x192",
+            type: "image/png",
+            purpose: "any maskable",
+          },
+          {
+            src: "/images/pwa-icon-512.png",
+            sizes: "512x512",
+            type: "image/png",
+            purpose: "any maskable",
+          },
+        ],
+      },
+      devOptions: {
+        enabled: true,
+      },
+    }),
+  ],
   resolve: {
     alias: {
       "@": fileURLToPath(new URL("./src", import.meta.url)),