Merge pull request 'newCss' (#22) from newCss into master

Reviewed-on: WikiFantasy/WF-Website#22

images/loupe.svg

@@ -0,0 +1,5 @@
+<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="50" cy="50" r="50" fill="white"/>
+<circle cx="42.5" cy="40.5" r="19" stroke="black" stroke-width="7"/>
+<path d="M77.558 76.6783L71.2719 82.0967L50 57.4184L56.2861 52L77.558 76.6783Z" fill="black"/>
+</svg>

public/styles/style.css

@@ -1,36 +1,82 @@
-/* header.css */
+/* @import url('https://fonts.googleapis.com/css2?family=Lemon&display=swap'); */
+:root {
+    --main-dark-background-color: #120B1D;
+    --main-dark-text-color : #ffffff;
+    --main-dark-gradient : linear-gradient(45deg, #4a148c, #7b1fa2);
+    --main-dark-other-color : #000000;
 
-/* Styles généraux */
+    --main-light-background-color: #ffffff;
-* {
+    --main-light-text-color : #000000;
-  margin: 0;
+    --main-light-gradient : linear-gradient(-28deg, #f3e7e9 0%, #e3eeff 99%, #e3eeff 100%);
-  padding: 0;
+    --main-light-other-color : #d2d2d8;
-  box-sizing: border-box;
 }   
 
-body {
+/* Général */
-  background-color: #120b1d;
+
+body{
     font-family: "Lemon", serif;
-  margin-top: 200px;
+    margin : 0%;
+}
+
+/* Dark mode */
+
+body.dark-mode{
+    background-color: var(--main-dark-background-color);
+    color: var(--main-dark-text-color);
+}
+
+body.dark-mode .header{
+    background-color: var(--main-dark-other-color);
+}
+
+
+/* Light mode */
+
+body.light-mode{
+    background-color: var(--main-light-background-color);
+    color: var(--main-light-text-color);
+}
+
+body.light-mode .header{
+    background-color: var(--main-light-other-color);
+}
+
+body.light-mode .header img{
+    filter: invert(100%);
+}
+
+
+/* écran par défaut */
+
+body{
+    margin-top: 15vh;
 }
 
-/* Header */
 .header {
+    z-index: 100;
     display: flex;
     position: fixed;
-  background-color: #000000;
-  right: 0;
     top: 0;
-  width: 100%;
+    width: 100vw;
     text-align: center;
-  padding: 20px;
+    padding: 1%;
+    height: 10vh;
+}
+
+#theme-icon{
+    height : 5vh
+}
+
+.header img{
+    height : 7vh;
 }
 
 .nav {
     display: flex;
     align-items: center;
     vertical-align: center;
-  gap: 30px;
+    gap: 2vw;
-  width: 40%;
+    width: 39%;
 }
 
 .logo {
@@ -40,69 +86,48 @@ body {
     width: 20%;
 }
 
+.logo img{
+    height : 10vh;
+}
+
 .user {
     display: flex;
     flex-direction: row;
     justify-content: flex-end;
     align-items: center;
     vertical-align: center;
-  gap: 30px;
+    gap: 2vw;
-  width: 40%;
+    width: 39%;
 }
 
-.search {
+.user img{
-  display: flex;
+    height : 7vh;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  vertical-align: center;
-  margin: 10px;
-  width: 70px;
-  height: 70px;
-  border-radius: 50%;
 }
 
+/* écran tablette*/
 
-/* Mode sombre */
+@media (max-width: 834px) or (max-aspect-ratio : 1/1){
-body.dark-mode {
-  background-color: #120B1D;
-  color: #ffffff;
-}
     
-body.dark-mode .header {
+    .nav img{
-  background-color: #000;
+        height: 4vh;
-}
+    }
 
-body.dark-mode .header img {
+    #theme-icon{
-  filter: invert(0%);
+        height : 3vh
-}
+    }
-
-body.dark-mode .nav img:hover {
-  filter: invert(59%) sepia(96%) saturate(6733%) hue-rotate(275deg) brightness(112%) contrast(122%);
-}
 
-body.dark-mode .search {
+    .user img{
-  background: white;
+        height: 5vh;
-}
+    }
 
-/* Mode clair */
+    .logo img{
-body.light-mode {
+        height : 7vh;
-  background-color: #ffffff;
+    }
-  color: #000000;
 }
 
-body.light-mode .header {
-  background-color: #F4F1DE;
-}
 
-body.light-mode .header img {
+/* écran téléphone */
-  filter: invert(100%);
-}
 
-body.light-mode .nav img:hover {
+@media (max-width: 480px){
-  filter: invert(22%) sepia(6%) saturate(2269%) hue-rotate(193deg) brightness(98%) contrast(106%);
-}
 
-body.light-mode .search {
-  background: black;
 }

public/styles/styleAccueil.css

@@ -1,39 +1,26 @@
 @import url(./style.css); /* Import de style.css */
 @import url(./styleQuoteLittle.css);
 
-h2 {
-    text-align: center;
-    font-size: 2em;
-    margin: 20px 0;
-}
 
-/* Conteneur général pour les citations */
+/* Citation du jour */
-.citations-section {
+
-    display: flex;
+.citation-du-jour {
-    flex-direction: column;
+    width: 97.5vw;  
-    gap: 20px;
-    padding: 20px 0;
-    align-items: center;
-    width: 100%;
-    margin: 0 auto;
-}
-/* Citation du jour - toujours en pleine largeur */
-body.dark-mode .citation-du-jour {
-    width: 97.5%; /* Prend toute la largeur */
-    background: linear-gradient(45deg, #4a148c, #7b1fa2);  
     padding: 0;
-    margin-left: 1.25%;
+    margin-left: 1.25vw;
     overflow: hidden;
     margin-bottom: 20px;
     height: 150px;
 }
 
+/* dark-mode */
+
+body.dark-mode .citation-du-jour {
+    background: var(--main-dark-gradient);  
+}
+
+/* light-mode */
+
 body.light-mode .citation-du-jour {
-    width: 97.5%; 
+    background: var(--main-light-gradient); 
-    background-image: linear-gradient(-28deg, #f3e7e9 0%, #e3eeff 99%, #e3eeff 100%); 
-    padding: 0;
-    margin-left: 1.25%;
-    overflow: hidden;
-    margin-bottom: 20px;
-    height: 150px;
 }

public/styles/styleEndQuiz.css

@@ -0,0 +1,64 @@
+@import url(./style.css);
+
+/* ====== DARK MODE ====== */
+
+body.dark-mode h1, body.dark-mode h2, body.dark-mode p {
+    color: var(--main-dark-text-color);
+}
+
+body.dark-mode .resultat {
+    background-color: var(--main-dark-other-color);
+}
+
+/* ====== LIGHT MODE ====== */
+
+body.light-mode h1, body.light-mode h2, body.light-mode p {
+    color: var(--main-light-text-color);
+}
+
+body.light-mode .resultat {
+    background-color: var(--main-light-other-color);
+}
+
+body.light-mode .suiv img{
+    filter: invert(100%);
+}
+
+/* ====== ECRAN DEFAUT ====== */
+
+h1 {
+    font-family: "Lemon", serif;
+    text-align: center;
+}
+
+.resultat {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    height: 60vh;
+    width: 60vw;
+    margin: auto;
+    padding: 2%;
+    border-radius: 25px;
+}
+
+.suiv {
+    align-items: self-end;
+    width: 1vh;
+}
+
+.suiv img {
+    width: 1vh;
+}
+
+/* ====== ECRAN TABLETTE ====== */
+
+@media (max-width: 834px) or (max-aspect-ratio : 1/1){
+    
+}
+
+/* ====== ECRAN TELEPHONE ====== */
+
+@media (max-width: 480px){
+
+}

public/styles/styleLogin.css

@@ -1,130 +1,138 @@
 @import url(./style.css);
 
 /* ====== DARK MODE ====== */
+
 body.dark-mode h1{
-	color : white;
+	color : var(--main-dark-text-color);
-	font-family: "Lemon", serif;
-	text-align: center;
-	font-size: 32px;
-	margin-top: 10%;
 }
 
 body.dark-mode p{
-	margin-top: 6%;
+	color : var(--main-dark-text-color);
-	margin-bottom: 2%;
-	color : white;
-	font-size: 20px;
-	font-family: "Lemon", serif;
 }
 
 body.dark-mode .login{
-	background-color: black;
+	background: var(--main-dark-other-color);
-	width: 30%;
-	margin-left: 35%;
-	margin-top: 3%;
-	border-radius: 25px;
-	border: 2px solid transparent;
-	padding: 2%;
 }
 
 body.dark-mode .createAccount{
-	margin-top: 5%;
+	color : var(--main-dark-text-color);
-	margin-bottom: 5%;
-	font-size: 13px;
-	text-align: center;
-	padding-top: 1%;
-	color: white;
-	border: 1px solid transparent;
-	font-family: "Lemon", serif;
 }
 
-body.dark-mode .buttonSudmite{
+body.dark-mode a{
-	background: linear-gradient(90deg, #6100ff 0%, #1b0048 100%);
+	color: var(--main-dark-text-color);
-	font-family: "Lemon", serif;
-	border: none;
-	color: white;
-	padding: 2%;
-	border-radius: 25px;
-	width: 75%;
-	font-size: 20px;
 }
 
-
+body.dark-mode .buttonSudmite{
-body.dark-mode .connexion{
+	background: var(--main-dark-gradient); 
-	width:90%;
+	color: var(--main-dark-text-color);
-	height: 40px;
-	padding-left: 3%;
-	margin-left: 1%;
-	margin-top: -1%;
-	border-radius: 25px;
-	border: none;
-	font-size: 15px;
 }
 
 /* ====== LIGHT MODE ====== */
 body.light-mode h1{
-	color : black;
+	color : var(--main-light-text-color);
+}
+
+body.light-mode p{
+	color : var(--main-light-text-color);
+}
+
+body.light-mode .login{
+	background: var(--main-light-other-color);
+}
+
+body.light-mode .createAccount{
+	background: var(--main-light-other-color);
+}
+
+body.light-mode .buttonSubmit{
+	background: var(--main-light-gradirent); 
+	color: var(--main-light-text-color);
+}
+
+body.light-mode a{
+	color: var(--main-light-text-color);
+}
+
+
+/* ====== ECRAN DEFAULT ====== */
+
+.buttonSubmitDiv{
+	text-align: center;
+}
+
+h1{
 	font-family: "Lemon", serif;
 	text-align: center;
 	font-size: 32px;
 	margin-top: 10%;
 }
 
-body.light-mode p{
+p{
 	margin-top: 6%;
 	margin-bottom: 2%;
-	color : black;
 	font-size: 20px;
 	font-family: "Lemon", serif;
 }
 
-body.light-mode .login{
+.login{
-	background-color: white;
+	width: 35vw;
-	width: 30%;
+	margin-left: 30.5vw;
-	margin-left: 35%;
+	margin-top: 3vh;
-	margin-top: 3%;
 	border-radius: 25px;
-	border: 2px solid black;
+	padding: 2vw;
-	padding: 2%;
 }
 
-body.light-mode .createAccount{
+.createAccount{
 	margin-top: 5%;
 	margin-bottom: 5%;
-	font-size: 13px;
+	font-size: 1em;
 	text-align: center;
 	padding-top: 1%;
-	color: black;
 	font-family: "Lemon", serif;
 }
 
-body.light-mode .buttonSubmit{
+.buttonSudmite{
-	background: linear-gradient(180deg, rgba(187,211,249,1) 0%, rgba(199,246,196,1) 100%); 
 	font-family: "Lemon", serif;
 	border: none;
-	color: black;
 	padding: 2%;
 	border-radius: 25px;
-	width: 75%;
+	width: 50%;
-	font-size: 20px;
+	font-size: 1.25em;
 }
 
-body.light-mode .connexion{
+.connexion{
-	width:90%;
+	width:94%;
 	height: 40px;
 	padding-left: 3%;
 	margin-left: 1%;
 	margin-top: -1%;
 	border-radius: 25px;
-	border: 1px solid black;
+	border: none;
-	background-color: #fff1f1;
 	font-size: 15px;
 }
 
+/* ====== ECRAN TABLETTE ====== */
 
-/* ====== DEFAULT ====== */
+@media (max-width: 834px){
-.buttonSubmitDiv{
+    .login{
-	text-align: center;
+		width: 50vw;
+		margin-left: 22vw;
+		margin-top: 9vh;
+		padding: 3vh;
+		padding-bottom: 5vh;
+	}
+
+	.createAccount{
+		font-size: 13px;
+	}
+
+	.buttonSudmite{
+		width: 60%;
+	}
 }
 
+/* ====== ECRAN TELEPHONE====== */
 
+@media (max-width: 480px){
+
+}

public/styles/styleProfil.css

@@ -2,180 +2,147 @@
 
 /* ====== DARK MODE ====== */
 body.dark-mode h1{
-	color : white;
+	color : var(--main-dark-text-color);
-	font-family: "Lemon", serif;
-	text-align: center;
-	font-size: 35px;
-	margin-top: 10%;
 }
 
 body.dark-mode p{
-	margin-top: 6%;
+	color : var(--main-dark-text-color);
-	margin-bottom: 2%;
-	color : white;
-	font-size: 20px;
-	font-family: "Lemon", serif;
 }
 
 
 body.dark-mode .buttonSudmite{
-	background: linear-gradient(90deg, #6100ff 0%, #1b0048 100%);
+	background: var(--main-dark-gradient); 
-	font-family: "Lemon", serif;
+	color: var(--main-dark-text-color);
-	border: none;
-	color: white;
-	padding: 5%;
-	border-radius: 25px;
-	width: 75%;
-	font-size: 20px;
 }
 
 body.dark-mode .createQuote{
-	margin-top: 5%;
+	color : var(--main-dark-text-color);
-	margin-bottom: 5%;
-	font-size: 15px;
-	text-align: center;
-	padding-top: 1%;
-	color: white;
-	font-family: "Lemon", serif;
 }
 
 body.dark-mode .login{
-	background-color: black;
+	background: var(--main-dark-other-color);
-	width: 30%;
-	margin-left: 35%;
-	margin-top: 9%;
-	border-radius: 25px;
-	padding-top: 1px;
-	padding-bottom: 1%;
-	border: 2px solid transparent;
 }
 
 body.dark-mode .imgModify{
-	width: 3%;
-	margin-left: 5%;
-	margin-top: 5%;
 	filter: invert(100%) brightness(1000%) contrast(1000%);
 }
 
 
-body.dark-mode .infoProfil > input {
+body.light-mode .inputPasswd{
-	width:90%;
-	height: 40px;
-	padding-left: 3%;
-	margin-left: 1%;
-	margin-top: -1%;
-	border-radius: 25px;
-	border: none;
-	font-size: 15px;
 	font-family: "Lemon", serif;
+	margin-top: 2%;
+	color: black;
+}
+
+body.dark-mode .saveButtonPasswd {
+	background: var(--main-dark-gradient); 
+	color : var(--main-dark-text-color);
+}
+
+
+
+/* ====== LIGHT MODE ====== */
+body.light-mode h1{
+	color : var(--main-light-text-color);
+}
+
+body.light-mode p{
+	color : var(--main-light-text-color);
+}
+
 
+body.light-mode .buttonSubmit{
+	background: var(--main-light-gradirent); 
+	color: var(--main-light-text-color);
 }
 
 
-body.dark-mode .inputPasswd{
+
+body.light-mode .createQuote{
+	color : var(--main-light-text-color);
+}
+
+body.light-mode .login{
+	background: var(--main-light-other-color);
+}
+
+
+body.light-mode .inputPasswd{
 	font-family: "Lemon", serif;
-	margin-top: 40%;
+	margin-top: 2%;
 	color: black;
 }
 
-body.dark-mode .saveButtonPasswd {
+body.light-mode .saveButtonPasswd {
-	background: linear-gradient(90deg, #6100ff 0%, #1b0048 100%);
+	background: var(--main-light-gradient); 
-	font-family: "Lemon", serif;
+	color : var(--main-light-text-color);
-	border: none;
-	color: white;
-	padding: 1%;
-	border-radius: 25px;
-	width: 55%;
-	font-size: 15px;
-	margin-top: 5%;
 }
 
 
+/* ====== ECRAN DEFAUT ====== */
 
-/* ====== LIGHT MODE ====== */
+h1{
-body.light-mode h1{
-	color : black;
 	font-family: "Lemon", serif;
 	text-align: center;
 	font-size: 35px;
-	margin-top: 10%;
 }
-body.light-mode p{
+
-	margin-top: 6%;
+p{
+	margin-top: 4%;
 	margin-bottom: 2%;
-	color : black;
 	font-size: 20px;
 	font-family: "Lemon", serif;
 }
 
 
-body.light-mode .buttonSudmite{
+.buttonSudmite{
-	background: linear-gradient(180deg, rgba(187,211,249,1) 0%, rgba(199,246,196,1) 100%); 
 	font-family: "Lemon", serif;
 	border: none;
-	color: black;
+	padding: 2%;
-	padding: 5%;
 	border-radius: 25px;
-	width: 75%;
+	width: 50%;
 	font-size: 20px;
 }
 
-
+.createQuote{
-
-body.light-mode .createQuote{
 	margin-top: 5%;
 	margin-bottom: 5%;
 	font-size: 15px;
 	text-align: center;
 	padding-top: 1%;
-	color: black;
 	font-family: "Lemon", serif;
 }
 
-body.light-mode .login{
+.login{
-	background-color: white;
+	width: 30vw;
-	width: 30%;
+	height: 77vh;
-	margin-left: 35%;
+	margin: auto;
-	margin-top: 9%;
+	margin-top: 17vh;
 	border-radius: 25px;
 	padding-top: 1px;
 	padding-bottom: 1%;
-	border: 2px solid black;
 }
 
-body.light-mode .imgModify{
+.imgModify{
 	width: 3%;
 	margin-left: 5%;
 	margin-top: 5%;
 }
 
-
+.infoProfil > input {
-body.light-mode .infoProfil > input {
+	width:70%;
-	width:90%;
 	height: 40px;
-	padding-left: 3%;
-	margin-left: 1%;
 	margin-top: -1%;
 	border-radius: 25px;
-	border: 1px solid black;
+	border: none;
-	background-color: #fff1f1;
 	font-size: 15px;
 	font-family: "Lemon", serif;
-	color :  black;
-}
-
 	
-body.light-mode .inputPasswd{
-	font-family: "Lemon", serif;
-	margin-top: 40%;
-	color: black;
 }
 
-body.light-mode .saveButtonPasswd {
+.saveButtonPasswd {
-	background: linear-gradient(180deg, rgba(187,211,249,1) 0%, rgba(199,246,196,1) 100%); 
 	font-family: "Lemon", serif;
 	border: none;
-	color: black;
 	padding: 1%;
 	border-radius: 25px;
 	width: 55%;
@@ -183,8 +150,6 @@ body.light-mode .saveButtonPasswd {
 	margin-top: 5%;
 }
 
-
-/* ====== OTHER ====== */
 .buttonSudmiteDiv{
 	text-align: center;
 }
@@ -193,34 +158,75 @@ body.light-mode .saveButtonPasswd {
 	color: red;
 }
 
-
 .imageProfil{
-	width: 25%;
+	width: 10vw;
+	height: 20vh;
+	object-fit: cover;
+	overflow: hidden;
 	border-radius: 25px;
 	display:block;
-	margin-left: 38%;
+	margin: auto;
 	margin-top: 5%;
 }
 
 .infoProfil{
-	margin-left: 10%;
+	margin-left: 9%;
 	text-align: center;
 	font-size: 120%;
 }
 
 
 .languageDiv{
-	margin-left: 25%;
+	margin: auto;
+	width: 10vw;
 }
+
 .languageTitle{
-	text-align: left;
+	text-align: center;
 	font-size: 100%;
+	margin-top: 5vh;
 }
+
 .languageImage{
-	width: 300px;
+	width: 15vw;
 	height: 40px;
-	margin-left: 25%;
+	margin: auto;
 	display:block;
 }
 
 
+/* ====== ECRAN TABLETTE ====== */
+
+@media (max-width: 834px) or (max-aspect-ratio : 1/1){
+    .login{
+		width: 70vw;
+		height: 77vh;
+		min-height: 789px;
+	}
+
+	.languageImage{
+		width: 30vw;
+	}
+
+	.languageDiv{
+		width: 30vw;
+	}
+
+	.imageProfil{
+		width: 25vw;
+		height: 20vh;
+		min-height: 205px;
+		object-fit: cover;
+		overflow: hidden;
+		border-radius: 25px;
+		display:block;
+		margin: auto;
+		margin-top: 5%;
+	}
+}
+
+/* ====== ECRAN TELEPHONE====== */
+
+@media (max-width: 480px){
+	
+}

public/styles/styleQuiz.css

@@ -1,51 +1,21 @@
 @import url(./style.css);
 
-@import url('https://fonts.googleapis.com/css2?family=Lemon&display=swap');
-
-body, html {
-    height: 100%;
-    overflow: hidden;
-}
-
 /* ====== DARK MODE ====== */
 body.dark-mode h1, body.dark-mode h2, body.dark-mode p {
-    color: white;
+    color: var(--main-dark-text-color);
-    font-family: "Lemon", serif;
-    text-align: center;
 }
 
 body.dark-mode .quiz {
-    background-color: black;
+    background-color: var(--main-dark-other-color);
-    height: 60%;
-    width: 80%;
-    margin: 3% auto;
-    padding: 2%;
-    border-radius: 25px;
-    border: 2px solid transparent;
-}
-
-body.dark-mode .answers {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-evenly;
-   
-    row-gap: 80px;
 }
 
 body.dark-mode .answer {
-    background-color: #1b0048;
+    background: var(--main-dark-gradient);
-    color: white;
+    color: var(--main-dark-text-color);
-    border: none;
-    border-radius: 25px;
-    width: 35%;
-    padding: 35px;
-    font-size: 30px;
-    text-align: center;
-    cursor: pointer;
 }
 
 body.dark-mode .answer:hover {
-    background-color: #6100ff;
+    background: #1b0048;
 }
 
 body.dark-mode .submit-button {
@@ -66,89 +36,85 @@ body.dark-mode .buttonSudmite {
 }
 
 /* ====== LIGHT MODE ====== */
+
 body.light-mode h1, body.light-mode h2, body.light-mode p {
-    color: black;
+    color: var(--main-light-text-color);
-    font-family: "Lemon", serif;
-    text-align: center;
 }
 
 body.light-mode .quiz {
-    background-color: white;
+    background-color: var(--main-light-other-color);
-    width: 50%;
-    height: 90%;
-    margin: 3% auto;
-    padding: 2%;
-    border-radius: 25px;
-    border: 2px solid black;
 }
 
-body.light-mode .answers {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-around;
-    gap: 1000px;
-    height: 90%;
-}
 
 body.light-mode .answer {
-    background-color: #fff1f1;
+    background: var(--main-light-gradient);
-    color: black;
+    color: var(--main-light-text-color);
-    border: 1px solid black;
-    border-radius: 25px;
-    width: 45%;
-    padding: 10px;
-    font-size: 18px;
-    text-align: center;
-    cursor: pointer;
 }
 
 body.light-mode .answer:hover {
-    background-color: #c7f6c4;
+    background: #7c7c7c;
 }
 
-body.light-mode .submit-button {
+/* ====== ECRAN DEFAUT ====== */
+
+h1, h2, p {
+    font-family: "Lemon", serif;
     text-align: center;
-    margin-top: 20px;
 }
 
-body.light-mode .buttonSudmite {
+.quiz {
-    background: linear-gradient(180deg, rgba(187,211,249,1) 0%, rgba(199,246,196,1) 100%);
+    height: 60vh;
-    font-family: "Lemon", serif;
+    width: 60vw;
-    border: none;
+    margin: auto;
-    color: black;
+    padding: 2%;
-    padding: 10px 20px;
     border-radius: 25px;
-    font-size: 20px;
-    cursor: pointer;
 }
 
-/* ====== OTHER ====== */
+.answers {
-.container {
-    width: 100%;
-    height: 100px;
-    background-color: transparent;
     display: flex;
-    justify-content: space-between;
+    flex-wrap: wrap;
-    align-items: center;
+    justify-content: space-evenly;
-    margin-bottom: 50px;
+    margin: auto;
+    width : 50vw;
+    row-gap: 7vh;
+    column-gap: 7vh;
 }
 
-.header {
+.answer {
-    display: flex;
+    border: none;
-    width: 100%;
+    border-radius: 25px;
-    justify-content: space-between;
+    width: 35vh;
-    align-items: center;
+    padding: 2vw;
+    font-size: 25px;
+    text-align: center;
+    cursor: pointer;
 }
 
-.nav img {
+#timer{
-    margin-right: 10px;
+    width: 20vw;
+    display: block;
+    margin: auto;
+    text-align: center;
+    margin-bottom: 5vh;
 }
 
-.logo img {
+h2{
-    display: block;
+    margin-bottom: 7vh;
-    margin: 0 auto;
+    word-wrap: break-word;
+    word-break: break-word;
+}
+
+/* ====== ECRAN TABLETTE ====== */
+
+@media (max-width: 834px) or (max-aspect-ratio : 1/1){
+    .quiz {
+        height: 72vh;
+        width: 60vw;
+    }
 }
 
-.user img {
+/* ====== ECRAN TELEPHONE ====== */
-    margin-left: 10px;
+
+@media (max-width: 480px){
+
 }

public/styles/styleQuote.css

@@ -1,81 +1,72 @@
 @import url(./style.css);
 
 /* ====== DARK MODE ====== */
+
 body.dark-mode .card {
-    /* position: relative; */
+    background-color: var(--main-dark-other-color);
-    background-color: black;
-    border: 2px solid transparent;
 }
 
 
 body.dark-mode .card-content {
-    color: white;
+    color: var(--main-dark-text-color);
-    margin-left: 20px;
-    flex: 1;
 }
 
 
 body.dark-mode .likes {
     font-size: 20px;
-    color: #fff;
+    color: var(--main-dark-text-color);
 }
 
 body.dark-mode .like-icon {
-    color: #fff;
+    color: var(--main-dark-text-color);
     cursor: pointer;
 }
 
 body.dark-mode .share-icon {
-    color: #fff;
+    color: var(--main-dark-text-color);
     cursor: pointer;
 }
 
 body.dark-mode .commentaire{
-    background-color: black;
+    background-color:  var(--main-dark-other-color);
-    border: 2px solid transparent;
 }
 
 body.dark-mode .likeLien{
-    color:white;
+    color: var(--main-dark-text-color);
 }
 
 /* ====== LIGHT MODE ====== */
 
 body.light-mode .card {
-    /* position: relative; */
+    background-color: var(--main-light-other-color);
-    background-color: white;
-    border: 2px solid black;
 }
 
 body.light-mode .card-content {
-    color: black;
+    color: var(--main-light-text-color);
-    margin-left: 20px;
-    flex: 1;
 }
 
 
 body.light-mode .likes {
     font-size: 20px;
-    color: black;
+    color: var(--main-light-text-color);
 }
 
 body.light-mode .like-icon {
-    color: black;
+    color: var(--main-light-text-color);
     cursor: pointer;
 }
 
 body.light-mode .share-icon {
-    color: black;
+    color: var(--main-light-text-color);
     cursor: pointer;
 }
 
 body.light-mode .commentaire{
-    background-color: #fff;
+    background-color: var(--main-light-other-color);
-    border: 2px solid black;
 }
 
 body.light-mode .likeLien{
-    color:black;
+    color: var(--main-light-text-color);
 }
 
 /* ====== DEFAULT ====== */
@@ -98,11 +89,11 @@ body.light-mode .likeLien{
     margin-top: 5vh;
     border-radius: 15px;
     width: 25vw;
-    height: 70vh;
+    height: 68vh;
     display: flex;
-    padding: 1%;
+    padding: 1vh;
     flex-direction: column;
-    flex-wrap: wrap;
+    flex-wrap: nowrap;
 }
 
 .infoQuote {
@@ -137,7 +128,7 @@ body.light-mode .likeLien{
     height : 4vh;
     padding-left: 1vh;
     border: none;
-    border-radius: 20px;
+    border-radius: 50px;
     text-align: center;
     background-image: url(../images/icons8-envoyer-24.png);
     background-repeat: no-repeat;
@@ -161,6 +152,7 @@ body.light-mode .likeLien{
     background-color: #fff;
     color: black;
     display: flex;
+    font-family: "Lemon", sans-serif;
     flex-direction: column;
     margin-top: 1vh;
     margin-bottom: 1vh;
@@ -224,3 +216,85 @@ body.light-mode .likeLien{
 .likeLien{
     text-decoration: none;
 }
+
+.card-content{
+    margin-left: 20px;
+    flex: 1;
+}
+
+@media (max-width: 834px) or (max-aspect-ratio : 1/1){
+    .central_container{
+        flex-direction: column;
+    }
+
+    .card {
+        margin : auto;
+        margin-bottom: 1vh;
+        width: 85vw;
+        height: 50vh;
+    }
+
+    .commentaire{
+        margin-top: 1vh;
+        margin: auto;
+        width: 83vw;
+        height: 30vh;
+    }
+
+    .infoQuote {
+        list-style: none;
+        font-size: 20px;
+        line-height: 30px;
+    }
+
+    .card-image {
+        width: 20vw;
+        height: 20vh;
+    }
+
+    .quote {
+        font-size: 25px;
+    }
+
+    .btn{
+        width : 5vw;
+        height : 5vw;
+    }
+    
+    .com{
+        display: flex;
+        flex-direction: column;
+        margin-top: 0.5vh;
+        margin-bottom: 0.5vh;
+        padding : 2vh;
+    }
+    
+    .icons{
+        margin: 2vh;
+    }
+    
+    .like-icon{
+        font-size: 35px;
+        margin-bottom: 2vh;
+    }
+    
+    .share-icon{
+        font-size: 35px;
+    }
+
+    .likes{
+        align-self: self-end;
+        padding: 2vh;
+    }
+    
+    .infoQuote{
+        margin: 2vh;
+        height: 21vh;
+    }
+
+    #content{
+        width: 75vw;
+        height: 5vw;
+    }
+    
+}

public/styles/styleQuoteLittle.css

@@ -1,4 +1,30 @@
-/* Conteneur pour les suggestions en deux colonnes */
+@import url(./style.css);
+
+/* Dark mode */
+
+body.dark-mode a.link-citation{
+    color: var(--main-dark-text-color);
+}
+
+body.dark-mode .citation-container{
+    background: var(--main-dark-gradient);
+    color: var(--main-dark-text-color);
+}
+
+/* Light mode */
+
+body.light-mode a.link-citation{
+    color: var(--main-light-text-color);
+}
+
+
+body.light-mode .citation-container{
+    background: var(--main-light-gradient);
+    color: var(--main-light-text-color);
+}
+
+/* écran par défaut */
+
 .suggestions-container {
     display: flex;
     flex-wrap: wrap;
@@ -9,16 +35,12 @@
 
 a.link-citation {
     text-decoration: none;
-    color: white;
     width: 47.5%;
     height: 100%;
-  }
+}
 
-/* Citations */
 .citation-container {
-    background: linear-gradient(to right, #4a148c, #7b1fa2);
     border-radius: 12px;
-    color: white;
     display: flex;
     width: 100%;
     align-items: flex-start;
@@ -31,7 +53,6 @@ a.link-citation {
     word-break: break-word;
 }
 
-/* Fixe la taille pour s'assurer que toutes les citations restent cohérentes */
 .citation-container .text-content {
     flex-grow: 1;
     display: flex;
@@ -69,50 +90,34 @@ a.link-citation {
     font-style: italic;
 }
 
-
-
 .citation .movie, .character, .year {
     margin-bottom: 5px;
+    font-size: 1em;
 }
 
-/* Mode sombre */
+h2 {
-body.dark-mode .quote {
+    text-align: center;
-    background: linear-gradient(45deg, #4a148c, #7b1fa2);
+    font-size: 2em;
-    color:white;
+    margin: 20px 0;
 }
 
-/* Mode clair */
+/* écran tablette*/
-body.light-mode .quote {
-    background-image: linear-gradient(-28deg, #f3e7e9 0%, #e3eeff 99%, #e3eeff 100%); 
-    color:black; /* Changer le texte en noir pour le mode clair */
-}
 
-body.light-mode .citation, 
+@media (max-width: 1638px){
-body.light-mode .movie, 
-body.light-mode .character, 
-body.light-mode .year {
-    color: black; /* Forcer le texte en noir pour le mode clair */
-}
-
-/* Responsive design */
-@media (max-width: 768px) {
     .suggestions-container {
         flex-direction: column;
         width: 100%;
     }
 
-    .citation-container {
+    a.link-citation {
-        width: 100%; /* Chaque citation prend toute la largeur sur mobile */
+        width: 96vw;
-        max-width: 100%;
+        margin-left: 2vw;
-        height: 100px; /* Supprimer la hauteur fixe sur mobile */
+        margin-right: 2vw;
     }
+}
 
-    .citation-image {
+/* écran téléphone */
-        width: 100px;
+
-        height: 100px;
+@media (max-width: 480px){
-    }
 
-    .quote {
-        font-size: 1em;
-    }
 }

public/styles/styleQuoteLittleV1.css

@@ -0,0 +1,120 @@
+/* Conteneur pour les suggestions en deux colonnes */
+.suggestions-container {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+    width: 100%;
+    margin: 0 auto;
+}
+
+
+
+a.link-citation {
+    text-decoration: none;
+    color: white;
+    width: 47.5%;
+    height: 100%;
+}
+
+/* Citations */
+.citation-container {
+    background: linear-gradient(to right, #4a148c, #7b1fa2);
+    border-radius: 12px;
+    color: white;
+    display: flex;
+    width: 100%;
+    align-items: flex-start;
+    box-sizing: border-box;
+    padding: 0;
+    height: 150px;
+    overflow: hidden;
+    margin-bottom: 20px;
+    word-wrap: break-word; /* Permet de couper les mots trop longs */
+    word-break: break-word;
+}
+
+/* Fixe la taille pour s'assurer que toutes les citations restent cohérentes */
+.citation-container .text-content {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    height: 150px;
+}
+
+.quote {
+    padding: 0;
+    overflow: hidden;
+}
+
+.citation-image {
+    width: 150px;
+    height: 100%;
+    object-fit: cover;
+    margin: 0;
+    border-radius: 0;
+}
+
+.text-content {
+    flex: 1;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center; /* Centre verticalement le texte */
+    word-wrap: break-word; /* Permet de couper les mots trop longs */
+    word-break: break-word;
+}
+
+.quoteContent {
+    font-size: 1.2em;
+    margin-bottom: 10px;
+    font-style: italic;
+}
+
+
+
+.citation .movie, .character, .year {
+    margin-bottom: 5px;
+}
+
+/* Mode sombre */
+body.dark-mode .quote {
+    background: linear-gradient(45deg, #4a148c, #7b1fa2);
+    color:white;
+}
+
+/* Mode clair */
+body.light-mode .quote {
+    background-image: linear-gradient(-28deg, #f3e7e9 0%, #e3eeff 99%, #e3eeff 100%); 
+    color:black; /* Changer le texte en noir pour le mode clair */
+}
+
+body.light-mode .citation, 
+body.light-mode .movie, 
+body.light-mode .character, 
+body.light-mode .year {
+    color: black; /* Forcer le texte en noir pour le mode clair */
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+    .suggestions-container {
+        flex-direction: column;
+        width: 100%;
+    }
+
+    .citation-container {
+        width: 100%; /* Chaque citation prend toute la largeur sur mobile */
+        max-width: 100%;
+        height: 100px; /* Supprimer la hauteur fixe sur mobile */
+    }
+
+    .citation-image {
+        width: 100px;
+        height: 100px;
+    }
+
+    .quote {
+        font-size: 1em;
+    }
+}

public/styles/styleSearch.css

@@ -25,7 +25,8 @@
 
 .search-container input[type="search"]:focus {
     outline: none; /* Supprime la bordure bleue */
-    box-shadow: none; /* Supprime également toute ombre ajoutée */
+    box-shadow: none;
+    z-index: 5; /* Supprime également toute ombre ajoutée */
 }
 
 
@@ -83,17 +84,17 @@
 /* ====== DARK MODE ====== */
 /*body.dark-mode */
 body.dark-mode .search-container {
-    background: #fff;
+    background-color: #fff;
 }
 body.dark-mode .search-container input[type="search"] {
     color: #000;
 }
 body.dark-mode .search-container .searchButton {
-    background: linear-gradient(to right, #4a148c, #7b1fa2);
+    background: var(--main-dark-gradient);
 }
 
 body.dark-mode .filtre input[type="radio"]:checked + label {
-    background: linear-gradient(180deg, #7b1fa2, #4a148c);
+    background: var(--main-dark-gradient);
     border-color: #4a148c;
     transform: scale(1.1);
 }
@@ -120,12 +121,12 @@ body.light-mode .search-container input[type="search"] {
     color: #000;
 }
 body.light-mode .search-container .searchButton {
-    background: linear-gradient(180deg, rgba(187,211,249,1) 0%, rgba(199,246,196,1) 100%);
+    background:  var(--main-light-gradient);
 }
 
 body.light-mode .filtre input[type="radio"]:checked + label {
-    background: linear-gradient(180deg, rgba(187,211,249,1) 0%, rgba(199,246,196,1) 100%);
+    background:  var(--main-light-gradient);
-    border-color: rgba(199,246,196,1);
+    border-color: #e3eeff;
     transform: scale(1.1);
 }
 
@@ -134,7 +135,7 @@ body.light-mode .filtre label {
     align-items: center;
     justify-content: center;
     padding: 8px 20px;
-    border: 2px solid rgba(187,211,249,1); 
+    border: 2px solid #e3eeff; 
     border-radius: 25px;
     font-size: 16px;
     color: #000000;

public/styles/styleSignin.css

@@ -1,142 +1,140 @@
 @import url(./style.css);
 
-h1{
+
-    margin-top: 10%;
+/* ====== DARK MODE ====== */
-    text-align: center;
+
+body.dark-mode .signin{
+    background: var(--main-dark-other-color);
 }
 
-.signin{
+body.dark-mode .h1{
-    border-radius: 25px;
+    color : var(--main-dark-text-color);
-    display: grid;
-    grid-template-columns: 2fr 1fr;
-    grid-template-rows: repeat(5, 1fr);
-    width : 30%;
-    margin-left: 35%;
-    margin-top: 3%;
-    padding : 2%;
 }
 
-p{
+body.dark-mode .p{
-    font-size: 20px;
+    color : var(--main-dark-text-color);
-    margin-top: 7%;
-    margin-bottom: 2%;
-    font-weight: bold;
 }
 
-.DivId{
+body.dark-mode .btn{
-    grid-area: 1 / 1 / 2 / 2;
+    background: var(--main-dark-gradient); 
+    color : var(--main-dark-text-color);
 }
 
-.DivEmail{
+body.dark-mode a{
-    grid-area: 2 / 1 / 3 / 2;
+	color: var(--main-dark-text-color);
 }
 
-.mdp{
+/* ====== LIGHT MODE ====== */
-    grid-area: 3 / 1 / 4 / 3;
+
+body.light-mode .signin{
+    background: var(--main-light-other-color);
 }
 
-.confmdp{
+body.light-mode .h1{
-    grid-area: 4 / 1 / 5 / 3;
+    color : var(--main-light-text-color);
 }
 
-.imgprof{
+body.light-mode .p{
-    grid-area: 1 / 2 / 3 / 3;
+    color : var(--main-light-text-color);
 }
 
-.confirmer{
+body.light-mode .btn{
-    grid-area: 5 / 1 / 6 / 3;
+    background: var(--main-light-gradient); 
-    align-self: center;
+    color : var(--main-light-text-color);
+}
+
+body.light-mode a{
+	color: var(--main-light-text-color);
+}
+
+/* ====== ECRAN DEFAULT ====== */
+
+h1{
+	font-family: "Lemon", serif;
 	text-align: center;
+	font-size: 32px;
+	margin-top: 10%;
 }
 
-.champ{
+.signin{
-    width: 90%;
+	width: 35vw;
-    height : 35%;
+	margin-left: 30.5vw;
+	margin-top: 3vh;
 	border-radius: 25px;
-    margin-left: 1%;
+	padding: 2vw;
-    padding-left: 3%;
-    margin-top: -1%;
-    font-size: 15px;
 }
 
-.btn{
+p{
-    margin-top: 10%;
+	margin-top: 4%;
-    width:75%;
+	margin-bottom: 2%;
 	font-size: 20px;
-    padding: 2%;
-    border-radius: 25px;
-    border: none;
 	font-family: "Lemon", serif;
 }
 
-/*Dark mode*/
+.confirmer{
-
+	text-align: center;
-body.dark-mode .signin{
-    background-color: #000000;
-    border: 2px solid transparent;
 }
 
-body.dark-mode .h1{
+.champ{
-    color : white;
+	width:94%;
+	height: 40px;
+	padding-left: 3%;
+	margin-left: 1%;
+	margin-top: -1%;
+	border-radius: 25px;
+	border: none;
+	font-size: 15px;
 }
 
-body.dark-mode .p{
+.btn{
-    color : white;
+	font-family: "Lemon", serif;
+	border: none;
+	padding: 2%;
+	border-radius: 25px;
+	width: 50%;
+	font-size: 1.25em;
 }
 
-body.dark-mode .btn{
+.connectAccount{
-    background: linear-gradient(90deg, #6100ff 0%, #1b0048 100%);
+	margin-top: 5%;
-    color : white;
+	margin-bottom: 5%;
+	font-size: 1em;
+	text-align: center;
+	padding-top: 1%;
+	font-family: "Lemon", serif;
 }
 
-body.dark-mode .champ{
+.createAccount{
-    background-color: #ffffff;
+    font-size: 1em;
-    border: 2px solid #ffffff;
 }
 
-/*Light*/
+/* ====== ECRAN TABLETTE ====== */
 
-body.light-mode .signin{
+@media (max-width: 834px){
-    background-color: #ffffff;
+    .signin{
-    border: 2px solid #000000;
+		width: 50vw;
-}
+		margin-left: 22vw;
+		margin-top: 9vh;
+		padding: 3vh;
+		padding-bottom: 5vh;
+	}
 
-body.light-mode .h1{
+    .btn{
-    color : #000000;
+		width: 60%;
-}
+	}
 
-body.light-mode .p{
+    .createAccount{
-    color : #000000;
+        font-size: 13px;
-}
+    }
 
-body.light-mode .btn{
+    .connectAccount{
-    background: linear-gradient(90deg, #caffde 0%, #b7c8ff 100%);
+		font-size: 13px;
-    color : #000000;
+	}
-}
 
-body.light-mode .champ{
-    background-color: #fff1f1;
-    border: 1px solid #000000;
 }
 
+/* ====== ECRAN TELEPHONE====== */
 
-body.dark-mode .connectAccount{
+@media (max-width: 480px){
-    margin-top: 5%;
-    margin-bottom: 5%;
-    font-size: 13px;
-    text-align: center;
-    padding-top: 1%;
-    color: white;
-    border: 1px solid transparent;
-    font-family: "Lemon", serif;
-}
 
-body.light-mode .connectAccount{
-    margin-top: 5%;
-    margin-bottom: 5%;
-    font-size: 13px;
-    text-align: center;
-    padding-top: 1%;
-    color: black;
-    font-family: "Lemon", serif;
 }

public/styles/styleV1.css

@@ -0,0 +1,108 @@
+/* header.css */
+
+/* Styles généraux */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  background-color: #120b1d;
+  font-family: "Lemon", serif;
+  margin-top: 200px;
+}
+
+/* Header */
+.header {
+  display: flex;
+  position: fixed;
+  background-color: #000000;
+  right: 0;
+  top: 0;
+  width: 100%;
+  text-align: center;
+  padding: 20px;
+}
+
+.nav {
+  display: flex;
+  align-items: center;
+  vertical-align: center;
+  gap: 30px;
+  width: 40%;
+}
+
+.logo {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20%;
+}
+
+.user {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  align-items: center;
+  vertical-align: center;
+  gap: 30px;
+  width: 40%;
+}
+
+.search {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  vertical-align: center;
+  margin: 10px;
+  width: 70px;
+  height: 70px;
+  border-radius: 50%;
+}
+
+
+/* Mode sombre */
+body.dark-mode {
+  background-color: #120B1D;
+  color: #ffffff;
+}
+
+body.dark-mode .header {
+  background-color: #000;
+}
+
+body.dark-mode .header img {
+  filter: invert(0%);
+}
+
+body.dark-mode .nav img:hover {
+  filter: invert(59%) sepia(96%) saturate(6733%) hue-rotate(275deg) brightness(112%) contrast(122%);
+}
+
+body.dark-mode .search {
+  background: white;
+}
+
+/* Mode clair */
+body.light-mode {
+  background-color: #ffffff;
+  color: #000000;
+}
+
+body.light-mode .header {
+  background-color: #F4F1DE;
+}
+
+body.light-mode .header img {
+  filter: invert(100%);
+}
+
+body.light-mode .nav img:hover {
+  filter: invert(22%) sepia(6%) saturate(2269%) hue-rotate(193deg) brightness(98%) contrast(106%);
+}
+
+body.light-mode .search {
+  background: black;
+}

src/Model/QuoteModel.php

@@ -20,6 +20,7 @@
             $tabQ=[];
 
             foreach($res as $q ){
+                $q["content"] = (strlen($q["content"]) > 153) ? substr($q["content"],0,150).'...' : $q["content"];
                 $tabQ[]= new Quote($q["id_quote"],$q["content"],$q["caracter"],$q["imgpath"],$q["title"],$q["dates"],$q["likes"],$q["langue"]) ;
             }
             return $tabQ;
@@ -30,6 +31,7 @@
             if( count($res) == 0)
                 return new Quote(-1,"NULL","NULL","NULL","NULL","NULL",0,"Default");
             else 
+                $res["content"] = (strlen($res["content"]) > 153) ? substr($res["content"],0,150).'...' : $res["content"];
                 return new Quote($res["id_quote"],$res["content"],$res["caracter"],$res["imgpath"],$res["title"],$res["dates"],$res["likes"],$res["langue"]) ;
         }
 
@@ -38,6 +40,7 @@
             $tabQ=[];
 
             foreach($res as $q ){
+                $q["content"] = (strlen($q["content"]) > 153) ? substr($q["content"],0,150).'...' : $q["content"];
                 $tabQ[]= new Quote($q["id_quote"],$q["content"],$q["caracter"],$q["imgpath"],$q["title"],$q["dates"],$q["likes"],$q["langue"]) ;
             }
             return $tabQ;

src/Model/SearchModel.php

@@ -13,6 +13,7 @@
             $tabQ=[];
 
             foreach($res as $q ){
+                $q["content"] = (strlen($q["content"]) > 153) ? substr($q["content"],0,150).'...' : $q["content"];
                 $tabQ[]= new Quote($q["id_quote"],$q["content"],$q["caracter"],$q["imgpath"],$q["title"],$q["dates"],$q["likes"],$q["langue"]) ;
             }
             return $tabQ;

vue/endQuiz.php

@@ -4,8 +4,8 @@ global $twig;
 
 echo $twig->render('head.html.twig', [
     'title' => "Quiz",
-    'style' => "public/styles/styleQuiz.css",
+    'style' => "../public/styles/styleEndQuiz.css",
-    'scripts' => array("public/script/theme-toggle.js")
+    'scripts' => array("../public/script/theme-toggle-double-param.js")
 ]);
 
 

vue/templates/bandeau.html.twig

@@ -1,20 +1,16 @@
 <div class="header">
     <div class="nav">
-        <a href="{{ racine }}/favorite"><img src="{{ racine }}/images/coeur.svg" alt="coeur" width="67px" height="67px" onmousedown="return false"></a>
+        <a href="{{ racine }}/favorite"><img src="{{ racine }}/images/coeur.svg" alt="coeur" onmousedown="return false"></a>
-        <img id="theme-icon" src="{{ racine }}/images/dark.svg" alt="toggle theme" width="72px" height="37px" onmousedown="return false" onclick="toggleTheme()">
+        <img id="theme-icon" src="{{ racine }}/images/dark.svg" alt="toggle theme" onmousedown="return false" onclick="toggleTheme()">
-        <a href="{{ racine }}/quiz/1"><img src="{{ racine }}/images/quizz.svg" alt="quizz" width="51px" height="82px" onmousedown="return false"></a>
+        <a href="{{ racine }}/quiz/1"><img src="{{ racine }}/images/quizz.svg" alt="quizz" onmousedown="return false"></a>
  
     </div>
     <div class="logo">
-        <a href="{{ racine }}/"><img src="{{ racine }}/images/WIKIFANTASY.png" alt="Logo" width="227px" height="106px" onmousedown="return false"></a>
+        <a href="{{ racine }}/"><img src="{{ racine }}/images/WIKIFANTASY.png" alt="Logo" onmousedown="return false"></a>
     </div>
 
     <div class="user">
-        
+        <a href="{{ racine }}/search"><img src="{{ racine }}/images/loupe.svg" alt="search"  onmousedown="return false"></a>
-
+        <a href="{{ racine }}/profil"><img src="{{ racine }}/images/user_dark.png" alt="user"  onmousedown="return false"></a>
-        <div class="search">
-            <a href="{{ racine }}/search"><img src="{{ racine }}/images/search.png" alt="search" width="50px" height="50px" onmousedown="return false"></a>
-        </div>
-    <a href="{{ racine }}/profil"><img src="{{ racine }}/images/user_dark.png" alt="user" width="70px" height="70px" onmousedown="return false"></a>
     </div>
 </div>

vue/templates/endQuiz.html.twig

@@ -1,6 +1,10 @@
-<body>
+    <h1>Résultat</h1>
-<h1 style="color: #b7c8ff"> {{ score }} </h1>
+    <div class="resultat">
-<h1> {{ nextquiz }} </h1>
+        <p> nombre de réponse juste : {{ score }}</p>
-
+        <p> nombre de réponse fausse : {{ 10 - score }}</p>
+        <a class="suiv" href="{{racine}}/quiz/{{ nextquiz }}" alt="quiz suivant">
+            <img src="../images/suivant.png" />
+        </a>
+    </div>
 </body>
 </html>

vue/templates/login.html.twig

@@ -1,6 +1,7 @@
     <h1>▶ Connexion ◀</h1>
 
-    <form class="login" method="post" action="{{ racine }}/validlogin">
+    <div class="login">
+        <form method="post" action="{{ racine }}/validlogin">
             <p> <strong>Identifiant *</strong></p>
             <input type="text" class="connexion" name="pseudo" id="pseudo" placeholder="Entrez votre pseudo" required />
 
@@ -21,5 +22,6 @@
             </div>
             
         </form>
+    </div>
 </body>
 </html>

vue/templates/quiz.html.twig

@@ -1,4 +1,4 @@
-    <h1>▶ Quiz ◀</h1>
+    <h1>Quiz</h1>
     <div class="quiz">
         <h2> {{ question.question }} </h2>
         <a id="timer"> 10 seconds left .. </a>

vue/templates/quoteLittle.html.twig

@@ -6,7 +6,7 @@
         <div class="citation-container quote">
                 <img src="{{ quote.imgPath }}" alt="{{ quote.carac }}" class="citation-image">
                 <div class="text-content">
-                    <p class="citation">"{{ quote.content }}"</p>
+                    <p class="citation" >"{{ quote.content }}"</p>
                     <p class="movie">- {{ quote.titleSrc }}</p>
                     <p class="character">Personnage : {{ quote.carac }}</p>
                     <p class="year">Année : {{ quote.dateSrc }}</p>

vue/templates/signin.html.twig

@@ -2,7 +2,7 @@
     <form method="post" action="{{ racine }}/validsignin">
     <div class="signin">
         <div class="DivId">
-            <p>Identifiant *</p>
+            <p><strong>Identifiant *</strong></p>
             <input type="text" class="champ" id="pseudo" name="pseudo" placeholder="Entrez votre pseudo" required/>
             {% if error[0] is defined and error[0] is not empty %}
                 <p style="color: red">{{ error[0] }}</p>
@@ -10,7 +10,7 @@
         </div>
 
         <div class="DivEmail">
-            <p>Email *</p>
+            <p><strong>Email *</strong></p>
             <input type="email" class="champ" id="email" name="email" placeholder="Entrez votre email" required/>
             {% if error[1] is defined and error[1] is not empty %}
                 <p style="color: red">{{ error[1] }}</p>
@@ -18,22 +18,17 @@
         </div>
 
         <div class="mdp">
-            <p>Mot de passe *</p>
+            <p><strong>Mot de passe *</strong></p>
             <input type="password" class="champ" id="mdp" name="mdp" required placeholder="Entrez votre mdp"/>
         </div>
 
         <div class="confmdp">
-            <p>Confirmer mot de passe *</p>
+            <p><strong>Confirmer mot de passe *</strong></p>
             <input type="password" class="champ" id="cmdp" name="cmdp" placeholder="Confirmez votre mdp" required/>
             {% if error[2] is defined and error[2] is not empty %}
                 <p style="color: red">{{ error[2] }}</p>
             {% endif %}
         </div>
-
-        <div class="imgprof">
-            <p>Image *</p>
-        </div>
-
         <div class="connectAccount">
             <p class="createAccount">Vous avez un compte?</p>
             <a href="{{ racine }}/login" class="connectAccount">Se connecter</a>