feat: Ajout d'un lien vers une documentation
continuous-integration/drone/push Build is passing Details

This commit is contained in:
Simon 2024-04-20 00:38:12 +02:00
parent 1f67ee9810
commit 61bc2541f7
4 changed files with 63 additions and 81 deletions

View File

@ -46,7 +46,7 @@ body.theme-dark {
} }
} }
@media (min-height: 800px) { @media (min-height: 1000px) {
:root { :root {
--header-size: var(--header-size-big); --header-size: var(--header-size-big);
} }
@ -115,3 +115,11 @@ body.print {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
header svg.color-text [stroke] {
stroke: var(--color-header-text);
}
header svg.color-text [fill]:not([fill=none]) {
fill: var(--color-header-text)
}

View File

@ -63,6 +63,7 @@ function getTranslation(translations, key) {
} }
const trad = getTranslation(score.translations, "languages_id"); const trad = getTranslation(score.translations, "languages_id");
const title = score ? trad.title : ""; const title = score ? trad.title : "";
const link = score ? trad.link : "";
const questions = ref(formatScore(score)); const questions = ref(formatScore(score));
const scoreSum = computed(() => { const scoreSum = computed(() => {
@ -164,7 +165,7 @@ async function share() {
</script> </script>
<template> <template>
<ScoreHeader v-if="title" :title="title" /> <ScoreHeader v-if="title" :title="title" :link="link" />
<Splide <Splide
ref="slides" ref="slides"
class="questions" class="questions"

View File

@ -4,48 +4,33 @@ defineProps({
type: String, type: String,
required: true, required: true,
}, },
link: {
type: String,
},
}); });
</script> </script>
<template> <template>
<header> <header>
<router-link :to="{ name: 'home' }"> <router-link :to="{ name: 'home' }">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"> <svg class="color-text" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path <path d="M22 22L2 22" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
fill="#5C913B" <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"/>
d="M36 33.5c0 .828-.672 1.5-1.5 1.5h-33C.672 35 0 34.328 0 33.5S.672 32 1.5 32h33c.828 0 1.5.672 1.5 1.5z" <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 <path d="M20 22V9.5" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
fill="#A0041E" <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"/>
d="M12.344 14.702h-2c-.276 0-.5-.224-.5-.5v-7c0-.276.224-.5.5-.5h2c.276 0 .5.224.5.5v7c0 .276-.224.5-.5.5z" <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"/>
/>
<path
fill="#FFCC4D"
d="M5.942 32c-.137-4.657-.506-8-.942-8-.435 0-.804 3.343-.941 8h1.883z"
/>
<path
fill="#77B255"
d="M10 18.731C10 24.306 7.762 26 5 26c-2.761 0-5-1.694-5-7.269C0 13.154 4 5 5 5s5 8.154 5 13.731z"
/>
<path fill="#FFE8B6" d="M8 16L21 3l13 13v16H8z" />
<path fill="#FFCC4D" d="M21 16h1v16h-1z" />
<path
fill="#66757F"
d="M34 17c-.256 0-.512-.098-.707-.293L21 4.414 8.707 16.707c-.391.391-1.023.391-1.414 0s-.391-1.023 0-1.414l13-13c.391-.391 1.023-.391 1.414 0l13 13c.391.391.391 1.023 0 1.414-.195.195-.451.293-.707.293z"
/>
<path
fill="#66757F"
d="M21 17c-.256 0-.512-.098-.707-.293-.391-.391-.391-1.023 0-1.414l6.5-6.5c.391-.391 1.023-.391 1.414 0s.391 1.023 0 1.414l-6.5 6.5c-.195.195-.451.293-.707.293z"
/>
<path fill="#C1694F" d="M13 26h4v6h-4z" />
<path fill="#55ACEE" d="M13 17h4v4h-4zm12.5 0h4v4h-4zm0 9h4v4h-4z" />
<path
fill="#77B255"
d="M10.625 29.991c0 1.613-.858 2.103-1.917 2.103-1.058 0-1.917-.49-1.917-2.103 0-1.613 1.533-3.973 1.917-3.973s1.917 2.359 1.917 3.973zm25.25 0c0 1.613-.858 2.103-1.917 2.103-1.058 0-1.917-.49-1.917-2.103 0-1.613 1.533-3.973 1.917-3.973.384 0 1.917 2.359 1.917 3.973z"
/>
</svg> </svg>
</router-link> </router-link>
<h1>{{ title }}</h1> <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">
<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> </header>
</template> </template>
@ -63,6 +48,14 @@ header
align-items: center align-items: center
align-content: center align-content: center
a:first-child
border-right: 1px solid var(--color-header-text)
a:last-child
border-left: 1px solid var(--color-header-text)
a:hover svg, a:focus svg, a:active svg
transform: scale(1.1)
a a
height: 100% height: 100%
width: var(--header-size) width: var(--header-size)
@ -72,7 +65,6 @@ a
align-items: center align-items: center
text-align: center text-align: center
align-content: center align-content: center
border-right: 1px solid var(--color-header-text)
text-decoration: none text-decoration: none
p p
@ -86,12 +78,13 @@ h1
flex: 1 flex: 1
font-size: 1.2rem font-size: 1.2rem
font-weight: bold font-weight: bold
text-align: center
svg svg
width: 2rem width: 2rem
margin: 0 auto margin: 0 auto
@media (min-height: 800px) @media (min-height: 1000px)
p p
font-size: 4rem font-size: 4rem

View File

@ -27,24 +27,14 @@ function getTranslation(translations, key) {
@click="store.switchTheme" @click="store.switchTheme"
title="Thème de votre système" title="Thème de votre système"
> >
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"> <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">
<path <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"/>
fill="#FFD983" <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"/>
d="M18 0v36c9.941 0 18-8.059 18-18S27.941 0 18 0z" <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"/>
<path <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"/>
fill="#66757F" <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
d="M0 18c0 9.941 8.059 18 18 18V0C8.059 0 0 8.059 0 18z" 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"/>
/>
<circle fill="#FFCC4D" cx="25.5" cy="8.5" r="3.5" />
<circle fill="#5B6876" cx="12" cy="16" r="3" />
<circle fill="#5B6876" cx="13.5" cy="27.5" r="3.5" />
<circle fill="#5B6876" cx="15" cy="6" r="2" />
<circle fill="#FFCC4D" cx="33" cy="18" r="1" />
<circle fill="#5B6876" cx="6" cy="9" r="1" />
<circle fill="#FFCC4D" cx="21" cy="31" r="1" />
<circle fill="#5B6876" cx="4" cy="19" r="2" />
<circle fill="#FFCC4D" cx="26" cy="23" r="2" />
</svg> </svg>
</li> </li>
<li <li
@ -52,19 +42,9 @@ function getTranslation(translations, key) {
@click="store.switchTheme" @click="store.switchTheme"
title="Thème sombre" title="Thème sombre"
> >
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
<circle fill="#66757F" cx="18" cy="18" r="18" /> <svg class="color-text" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g fill="#5B6876"> <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"/>
<circle cx="10.5" cy="8.5" r="3.5" />
<circle cx="20" cy="16" r="3" />
<circle cx="21.5" cy="27.5" r="3.5" />
<circle cx="21" cy="6" r="2" />
<circle cx="3" cy="18" r="1" />
<circle cx="30" cy="9" r="1" />
<circle cx="15" cy="31" r="1" />
<circle cx="32" cy="19" r="2" />
<circle cx="10" cy="23" r="2" />
</g>
</svg> </svg>
</li> </li>
<li <li
@ -72,19 +52,16 @@ function getTranslation(translations, key) {
@click="store.switchTheme" @click="store.switchTheme"
title="Thème clair" title="Thème clair"
> >
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"> <svg class="color-text" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle fill="#FFD983" cx="18" cy="18" r="18" /> <circle cx="12" cy="12" r="5" stroke="#1C274C" stroke-width="1.5"/>
<g fill="#FFCC4D"> <path d="M12 2V4" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
<circle cx="10.5" cy="8.5" r="3.5" /> <path d="M12 20V22" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
<circle cx="20" cy="17" r="3" /> <path d="M4 12L2 12" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
<circle cx="24.5" cy="28.5" r="3.5" /> <path d="M22 12L20 12" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
<circle cx="22" cy="5" r="2" /> <path d="M19.7778 4.22266L17.5558 6.25424" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
<circle cx="3" cy="18" r="1" /> <path d="M4.22217 4.22266L6.44418 6.25424" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
<circle cx="30" cy="9" r="1" /> <path d="M6.44434 17.5557L4.22211 19.7779" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
<circle cx="15" cy="31" r="1" /> <path d="M19.7778 19.7773L17.5558 17.5551" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
<circle cx="32" cy="19" r="2" />
<circle cx="10" cy="23" r="2" />
</g>
</svg> </svg>
</li> </li>
</ul> </ul>
@ -201,6 +178,9 @@ header
.hidden .hidden
display: none display: none
svg
height: 32px
width: 32px
main main
width: 100% width: 100%