Feature/onboarding+results

frontend/package.json

@@ -14,6 +14,7 @@
     "@vue/compat": "^3.1.0",
     "axios": "^0.21.4",
     "bootstrap": "^5.1.0",
+    "swiper": "^8.1.0",
     "vite": "^2.5.4",
     "vue": "^3.1.0",
     "vue-router": "^4.0.5",

frontend/src/components/HeaderNoMenu.vue

@@ -0,0 +1,28 @@
+<template>
+    <header role="banner" class="fr-header">
+        <div class="fr-header__body">
+            <div class="fr-container">
+                <div class="fr-header__body-row">
+                    <div class="fr-header__brand fr-enlarge-link">
+                        <div class="fr-header__brand-top">
+                            <div class="fr-header__logo">
+                                <a href="/" title="Accueil - [À MODIFIER | nom de l’entité (ministère , secrétariat d‘état, gouvernement)]">
+                                    <p class="fr-logo">
+                                        Ministère
+                                        <br>de l'Intérieur
+                                    </p>
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </header>
+</template>
+
+<script>
+    export default {
+        name: 'HeaderNoMenu'
+    }
+</script>

frontend/src/components/OnboardingSwiper.vue

@@ -0,0 +1,138 @@
+<template>
+  <div>
+  <HeaderNoMenu />
+  <swiper :navigation="true" :pagination="true" :modules="modules" class="mySwiper">
+    <swiper-slide>
+      <img src="../assets/basegun_green.png" alt="" class="swiper-logo">
+      <div class="swiper-content">
+        <ul class="swiper-ul fr-text--md">
+          <li class="swiper-li">Basegun est une application <span class="swiper-green-highlight">prototype</span>, en cours de développement par le Ministère de l’Intérieur.</li>
+          <li class="swiper-li">A ce jour, Basegun <span class="swiper-green-highlight">ne prend pas encore en compte</span> l'identification des <span class="swiper-green-highlight">armes non létales</span> (factices, à air comprimé, à blanc ou neutralisées).</li>
+        </ul>
+      </div>
+    </swiper-slide>
+    <swiper-slide>
+      <img src="../assets/basegun_red.png" alt="" class="swiper-logo">
+      <div class="swiper-content">
+        <ul class="swiper-ul fr-text--md">
+          <li class="swiper-li">Une arme doit toujours être <span class="swiper-red-highlight">considérée comme chargée</span>.</li>
+          <li class="swiper-li">Une arme ne doit <span class="swiper-red-highlight">jamais être dirigée</span> vers quelqu’un.</li>
+          <li class="swiper-li">Avant de manipuler une arme, toujours s’assurer qu’elle est <span class="swiper-red-highlight">mise en sécurité.</span></li>
+          <li class="swiper-li">Veiller à la préservation des <span class="swiper-red-highlight">traces et indices</span> éventuels lors des manipulations de sécurité.</li>          
+        </ul>
+        <button class="fr-btn fr-btn--sm" id="position-button" @click="redirectToStart">
+          J'ai compris
+        </button>
+      </div>
+    </swiper-slide>
+
+  </swiper>
+  </div>
+</template>
+
+<script>
+
+  // Import Swiper Vue.js components
+  import { Swiper, SwiperSlide } from "swiper/vue";
+
+  // Import Swiper styles
+  import "swiper/css";
+  import "swiper/css/navigation";
+  import "swiper/css/pagination";
+
+  // import Swiper required modules
+  import { Navigation, Pagination } from "swiper";
+
+  import HeaderNoMenu from '@/components/HeaderNoMenu.vue';
+
+  export default {
+    name: 'OnboardingSwiper',
+    components: {
+      Swiper,
+      SwiperSlide,
+      HeaderNoMenu
+    },
+    setup() {
+      return {
+        modules: [Navigation, Pagination],
+      };
+    },
+    methods: {
+      redirectToStart() {
+          window.location.replace("/accueil")
+      }
+    }
+  };
+</script>
+
+<style>
+
+  .swiper {
+    width: 100%;
+    height: 100%;
+    position: static;
+  }
+
+  .swiper-slide {
+    background: #fff;
+  }
+
+  .swiper-logo {
+    display: block;
+    margin: 0 auto;
+  }
+
+  .swiper-content {
+    width: 75%;
+    margin: 0 auto;
+    text-align: center;
+  }
+
+  .swiper-ul {
+    list-style-position: inside;
+    text-indent: -1em;
+    padding-left: 1em;
+    display: inline-block;
+    text-align: left;
+    max-width: 700px;
+    margin-bottom: 12px !important;
+  }
+
+  .swiper-li {
+    margin-bottom: 4px;
+  }
+
+  .swiper-button-prev,
+  .swiper-button-next {
+    color: #000091;
+  }
+
+  .swiper-button-prev::after,
+  .swiper-button-next::after {
+    font-size: 28px;
+  }
+
+  .swiper-button-disabled {
+    display: none;
+  }
+
+  .swiper-pagination-bullet-active {
+    background: #000091;
+  }
+
+  .swiper-red-highlight {
+    font-weight: bold;
+    color: #FF0000;
+  }
+
+  .swiper-green-highlight {
+    font-weight: bold;
+    color: #00C7C8;
+  }
+
+  #position-button {
+    display: block;
+    margin: 0 auto;
+  }
+
+</style>

frontend/src/components/ResultsComponent.vue

@@ -1,9 +1,7 @@
 <template>
     <div>
         <div class="result">
-            <div class="result-image">
-                <img class="img-fluid" :src="store.imgName" alt="Image téléversée">
-            </div>
+            <div class="result-image" :style="{backgroundImage:`url(${store.imgName})`}"></div>
             <div class="fr-callout custom-callout">
                 <div v-if="store.confidence < 40">
                     <div class="callout-head">
@@ -25,18 +23,20 @@
                     <p class="fr-callout__text">Type d'arme : {{ cleanLabel }}</p>
                 </div>
             </div>
+            <div v-if="store.confidence >= 40">
+                <p class="fr-text--sm warning-msg">Cet avis n'emporte qu'une simple valeur de renseignement. Pour faire référence dans une procédure, il doit impérativement et réglementairement être validé par le biais d'un examen scientifique ou technique prévu par le code de procédure pénale.</p>
+                <div class="feedback">
+                    <p class="feedback-text">Ce résultat a-t-il été utile ?</p>
+                    <img src="../assets/thumbs-up.png" alt="" class="thumbs-img">
+                    <img src="../assets/thumbs-down.png" alt="" class="thumbs-img">
+                </div>
+            </div>
             <div class="blank"></div>
             <div class="footer-background footer-actions">
                 <div class="action-group" @click="reloadPage">
                     <span class="fr-fi-refresh-line" aria-hidden="true"></span>
                     <p class="action-group-text">RECOMMENCER</p>
                 </div>
-                <a href="/informations" class="no-shadow">
-                    <div class="action-group">
-                        <span class="fr-fi-information-line" aria-hidden="true"></span>
-                        <p class="action-group-text">A PROPOS</p>
-                    </div>
-                </a>
             </div>
         </div>
     </div>
@@ -110,25 +110,30 @@
 </script>
 
 <style scoped>
+
     .result {
         margin: 0 auto;
         max-width: 1000px;
     }
     .result-image {
-        text-align: center;
-        margin: 0 auto
+        height: 30vh;
+        background-position: center;
+        background-size: cover;
+        margin: 0 auto;
     }
     @media (min-width: 768px) {
         .result-image {
             max-width: 600px;
         }
-        .custom-callout {
+        .custom-callout,
+        .warning-msg {
             max-width: 600px;
             margin: 12px auto
         }
     }
     @media (max-width: 768px) {
-        .custom-callout {
+        .custom-callout,
+        .warning-msg {
             margin: 12px
         }
     }
@@ -157,6 +162,27 @@
         display: flex;
         align-items: center;
     }
+    .warning-msg {
+        line-height: 1.3rem!important;
+    }
+
+    .feedback {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .feedback-text {
+        margin-bottom: 0;
+        margin-right: 4px;
+        font-weight: bold;
+    }
+
+    .thumbs-img {
+        height: 50px;
+        margin: 0 2px;
+    }
+
     .footer-actions {
         display: flex;
         justify-content: space-around;
@@ -176,9 +202,6 @@
         font-weight: bold;
         margin: 0
     }
-    .no-shadow {
-        box-shadow: none;
-    }
     .blank {
         height: 80px
     }