merge Feature/19 composant recent quizz

Merge branch 'feature/19-composant-recent-quizz' into 'develop'

src/app/modules/home/my-quiz/my-quiz.component.css

+.container {
+    background-color: #2EC7FF;
+    height: 90vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-around;
+    padding-inline: 10%;
+}
+
+.title {
+    font-size: 5vmax;
+    font-weight: bold;
+    margin: 0px;
+}
+
+/* Liste  */
+.scrollable-list {
+    height: 45%;
+    width: 100%;
+    overflow-y: auto; /* Ajoute une scrollbar verticale si nécessaire */
+    border: 4px solid #F3F3F3;
+    padding: 0;
+    border-radius: 10px;
+    background-color: #FFFFFF;
+
+}
+
+/* Optionnel: Personnalisation de la scrollbar */
+.scrollable-list::-webkit-scrollbar {
+    width: 10px;
+}
+
+.scrollable-list::-webkit-scrollbar-thumb {
+    background-color: #888;
+    border-radius: 5px;
+}
+
+.scrollable-list::-webkit-scrollbar-thumb:hover {
+    background-color: #555;
+}
+
+input[type="radio"] {
+    display: none;
+}
+
+.radio-label > h3{
+    margin: 10px 5px 5px 5px;
+}
+
+.radio-label > p{
+    margin: 5px 5px 5px 10px;
+} 
+
+/* Style for the custom buttons */
+.radio-label {
+    display: flex;
+    width: 99%;
+    border: 2px solid #ccc;
+    cursor: pointer;
+    background-color: #f0f0f0;
+    transition: background-color 0.3s, border-color 0.3s;
+    background-color: #F3F3F3;
+    border-radius: 10px;
+    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
+    flex-direction: column;
+    align-items: center;
+}
+
+input[type="radio"] + .radio-label:hover {
+    background-color: #e0e0e0;
+} 
+
+input[type="radio"]:checked + .radio-label {
+    color: #2B73FE;
+}
+
+.listeItem {
+    width: 99%;
+    padding-block: 1%;
+}
\ No newline at end of file

src/app/modules/home/my-quiz/my-quiz.component.html

-<p>my-quiz works!</p>
+<div class="container">
+    <p class="title">My recent quiz</p>
+    <input type="search" class="inputRecherche">
+    <ul class="scrollable-list">
+        <li class="listeItem">
+            <input type="radio" id="option1" name="options" value="1">
+            <label for="option1" class="radio-label">
+                <h3>Video games</h3>
+                <p>12/20 Questions | Medium</p>
+            </label>
+        </li>
+        <li class="listeItem">
+            <input type="radio" id="option2" name="options" value="2">
+            <label for="option2" class="radio-label">
+                <h3>Video games</h3>
+                <p>12/20 Questions | Medium</p>
+            </label>
+        </li>
+        <li class="listeItem">
+            <input type="radio" id="option3" name="options" value="3">
+            <label for="option3" class="radio-label">
+                <h3>Video games</h3>
+                <p>12/20 Questions | Medium</p>
+            </label>
+        </li>
+        <li class="listeItem">
+            <input type="radio" id="option4" name="options" value="4">
+            <label for="option4" class="radio-label">
+                <h3>Video games</h3>
+                <p>12/20 Questions | Medium</p>
+            </label>
+        </li>
+        <li class="listeItem">
+            <input type="radio" id="option5" name="options" value="5">
+            <label for="option5" class="radio-label">
+                <h3>Video games</h3>
+                <p>12/20 Questions | Medium</p>
+            </label>
+        </li>
+        <li class="listeItem">
+            <input type="radio" id="option6" name="options" value="6">
+            <label for="option6" class="radio-label">
+                <h3>Video games</h3>
+                <p>12/20 Questions | Medium</p>
+            </label>
+        </li>
+    </ul>
+    <input type="submit" value="PLAY" class="blueButton"> 
+</div>
\ No newline at end of file

src/app/modules/home/my-quiz/my-quiz.component.ts

@@ -3,7 +3,7 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-my-quiz',
   templateUrl: './my-quiz.component.html',
-  styleUrl: './my-quiz.component.css'
+  styleUrls: ['./my-quiz.component.css', '../../../../styles.css'],
 })
 export class MyQuizComponent {
 

src/styles.css

@@ -29,7 +29,6 @@ body {
     border-style: solid;
     height: 100px;
     width: 100%;
-    margin: 2%;
 }
 
 .blueButton:hover {
@@ -47,7 +46,6 @@ body {
     border-style: solid;
     height: 100px;
     width: 100%;
-    margin: 2%;
 }
 
 .whiteButton:hover {
@@ -64,7 +62,7 @@ body {
     background-image: url("../public/magnificentGlass.png");
     background-repeat: no-repeat;
     background-position: calc(100% - 20px) center;
-    margin: 2%;
+    /* margin: 2%; */
     padding: 20px;
     font-size: 2vmin;
   }
\ No newline at end of file