feat: Ajout de la page d'accueil

src/assets/base.css

@@ -1,7 +1,10 @@
 /* color palette from <https://github.com/vuejs/theme> */
 :root {
+  /* #EDE0D4 */
   --color-white: #ffffff;
-  --color-black: #181818;
+  /*--color-black: #181818;*/
+  --color-black: #000000;
+  --color-green: rgb(118, 148, 67);
 
   --header-size-small: 64px;
   --header-size-big: 128px;
@@ -9,8 +12,9 @@
 
 /* semantic color variables for this project */
 :root {
-  --color-background: #EDE0D4;
+  --color-background: var(--color-black);
-  --color-text: var(--color-black);
+  --color-text: var(--color-white);
+  --color-highlight: var(--color-green);
   --header-size: var(--header-size-small);
 }
 

src/components/Score.vue

@@ -130,7 +130,7 @@ const result = computed(() =>
         </div>
       </template>
     </SplideSlide>
-    <SplideSlide>
+    <SplideSlide class="latest">
       <template v-if="displayScoreResult && result">
         <ul>
           <li>score : {{ scoreSum }}</li>
@@ -182,6 +182,9 @@ label
   width: 100%
   padding: .3rem
 
+.latest
+  background-color: var(--color-green)
+
 .gradient
   width: calc(100% - 2rem)
   padding: 0 1rem

src/components/ScoreHeader.vue

@@ -20,11 +20,11 @@ defineProps({
 header {
   height: var(--header-size);
   position: fixed;
-  background: #ede0d4;
+  background: var(--color-green);
   width: 100%;
   z-index: 1;
   top: 0;
-  border-bottom: 1px solid black;
+  border-bottom: 1px solid var(--color-white);
   display: flex;
   align-items: center;
   align-content: center;
@@ -39,14 +39,14 @@ a {
   align-items: center;
   text-align: center;
   align-content: center;
-  border-right: 1px solid black;
+  border-right: 1px solid var(--color-white);
   text-decoration: none;
 }
 
 p {
   margin: 0 auto;
   font-size: 2rem;
-  color: black;
+  color: var(--color-white);
 }
 
 h1 {

src/components/ScoresList.vue

@@ -21,25 +21,96 @@ function getTranslation(translations, key) {
 </script>
 
 <template>
-  <h1>Ceiba Scores App</h1>
+  <header>
-  <template v-if="scores">
+    <h1>Ceiba Scores App</h1>
-    <ul>
+  </header>
-      <li v-for="score in scores" :key="score.id">
+  <main>
-        <router-link :to="{ name: 'score', params: { id: score.id } }">{{
+    <template v-if="scores">
-          getTranslation(score.translations, "languages_id").title
+      <ul>
-        }}</router-link>
+        <li v-for="score in scores" :key="score.id" :id="`score_${score.id}`">
-      </li>
+          <router-link :to="{ name: 'score', params: { id: score.id } }">{{
-    </ul>
+            getTranslation(score.translations, "languages_id").title1
-  </template>
+          }}</router-link>
+        </li>
+      </ul>
+    </template>
+  </main>
 </template>
 
 <style lang="sass" scoped>
-h1
+header
-  background: var(--color-background)
+  height: var(--header-size)
-  text-align: center
+  overflow: hidden
-  margin: 1rem
+  display: flex
-  padding: 0
+  justify-content: center
+  align-items: center
+  border-bottom: 2px solid var(--color-white)
+  background: var(--color-green)
+
+  h1
+    text-align: center
+
+main
+  width: 100%
+  height: calc(100% - var(--header-size))
+  padding: 1rem
+  display: flex
+  justify-content: center
+  align-items: center
+  overflow: hidden
+  background-color: var(--color-highlight)
+
 ul
-  margin: 1rem
+  margin: 0
-  padding: 0 0 0 1rem
+  padding: 0
+  list-style: none
+
+  width: 100%
+  max-width: 100%
+  max-height: 100%
+
+  aspect-ratio: 181 / 284
+  background-image: url(/arbre.png)
+  background-size: 724px 1136px
+
+  background-position: center
+  background-repeat: no-repeat
+  background-size: contain
+
+  position: relative
+  // border: 2px solid var(--color-white)
+  border-radius: 10px
+
+  li
+    display: none
+
+    background: rgba(0, 0, 0, .5)
+    border-radius: 10px
+    position: absolute
+    border: 2px solid var(--color-white)
+
+    &#score_1
+      display: flex
+      top: 40%
+      bottom: 35%
+      left: 20%
+      right: 20%
+
+    &#score_6
+      display: flex
+      top: 72%
+      bottom: 5%
+      left: 6%
+      right: 6%
+
+  a
+    color: var(--color-white)
+    display: block
+    width: 100%
+    height: 100%
+    display: flex
+    align-items: center
+    justify-content: center
+    text-align: center
+
 </style>

src/views/HomeView.vue

@@ -3,7 +3,5 @@ import ScoresList from "@/components/ScoresList.vue";
 </script>
 
 <template>
-  <main>
+  <ScoresList />
-    <ScoresList />
-  </main>
 </template>