diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index c919fdb499de20ae235cc20421242334ace8e21b..85cf345fef5aaf9739cb6a4a8c9fcfbab689271f 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -9,6 +9,10 @@ import { CreateCustomQuizComponent } from './modules/profile/create-custom-quiz/
const routes: Routes = [
{
path: '',
+ redirectTo: 'home',
+ pathMatch: 'full', // Assurez-vous que pathMatch est défini sur 'full'
+ }, {
+ path: 'home',
component: HomePageComponent,
},
{
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 7ac1d11fcd9e8088ec62e20ed469466648e59d05..8dc304ce4b70e2939f0d3459744e5321e7616750 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -9,12 +9,18 @@ import { filter } from 'rxjs';
})
export class AppComponent implements OnInit {
playQuiz: boolean = false;
+ homePage: boolean = false;
+ communityPage: boolean = false;
+ profilePage: boolean = false;
- constructor(private router: Router, private route: ActivatedRoute) {}
+ constructor(private router: Router, private route: ActivatedRoute) { }
ngOnInit(): void {
this.router.events.pipe(filter((event) => event instanceof NavigationEnd)).subscribe(() => {
this.playQuiz = this.router.url.includes('play-quiz');
+ this.homePage = this.router.url.includes('home');
+ this.communityPage = this.router.url.includes('community');
+ this.profilePage = this.router.url.includes('profile');
});
}
}
diff --git a/src/app/modules/home/form-play-quiz/form-play-quiz.component.html b/src/app/modules/home/form-play-quiz/form-play-quiz.component.html
index bb52d576cd17da6da8512a3f5ee2baffa470e39b..f420c5b411a0aa96edd77e4291f9d83e9976c55e 100644
--- a/src/app/modules/home/form-play-quiz/form-play-quiz.component.html
+++ b/src/app/modules/home/form-play-quiz/form-play-quiz.component.html
@@ -1,4 +1,4 @@
-<main class="container">
+<div class="container">
<div class="button-header">
<button (click)="createQuiz()">Play a quiz</button>
<button (click)="startQuiz()">Join a quiz</button>
@@ -7,4 +7,4 @@
<app-form-start-quiz *ngIf="showStartQuiz"></app-form-start-quiz>
<app-form-create-quiz *ngIf="showCreateQuiz"></app-form-create-quiz>
</div>
-</main>
+</div>
\ No newline at end of file
diff --git a/src/app/modules/home/home-page/home-page.component.css b/src/app/modules/home/home-page/home-page.component.css
index 43c37cb216cd3502df4ac80d22f383d703bc816d..572925ecf757623863d37f5ae15561c6054eccc1 100644
--- a/src/app/modules/home/home-page/home-page.component.css
+++ b/src/app/modules/home/home-page/home-page.component.css
@@ -1,16 +1,8 @@
-@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
-
-.main {
+.question-marks {
display: flex;
height: 90vh;
width: 100vW;
margin: 0;
- padding: 10vh 0 0 0 ;
- background-image: url(../../../../../public/WEB-BACKGROUNDHOME3.png);
- background-size: cover;
- background-position: center;
- background-repeat: no-repeat;
- background-attachment: fixed;
}
button {
@@ -40,6 +32,6 @@ button:hover {
}
.logo {
- height: 20%;
- width: 65%;
+ height: 20vmin;
+ width: 65vmin;
}
\ No newline at end of file
diff --git a/src/app/modules/home/home-page/home-page.component.html b/src/app/modules/home/home-page/home-page.component.html
index 01d3cc1b08de3d0497aa4fea3e629d9d564c4e34..e9048efec4385054bea6a579735392d33239e838 100644
--- a/src/app/modules/home/home-page/home-page.component.html
+++ b/src/app/modules/home/home-page/home-page.component.html
@@ -1,6 +1,6 @@
-<main class="main">
+<div class="question-marks">
<div class="left-side">
- <img src="LogoApp.png" class="logo"/>
+ <img src="LogoApp.png" class="logo" />
<div class="navigation-button">
<button (click)="quickGame()">Quick game</button>
<button (click)="playQuiz()">Play a quiz</button>
@@ -10,5 +10,5 @@
<div class="right-side">
<app-form-play-quiz *ngIf="showPlayQuiz"></app-form-play-quiz>
<app-my-quiz *ngIf="showMyQuiz"></app-my-quiz>
- </div>
-</main>
+ </div>
+</div>
\ No newline at end of file
diff --git a/src/app/modules/home/home.module.ts b/src/app/modules/home/home.module.ts
index 375e09f0d195831d03f439b10b25e6d8a05b86bc..777ba3d2a4669e8691571af2e0e06a356a8b885b 100644
--- a/src/app/modules/home/home.module.ts
+++ b/src/app/modules/home/home.module.ts
@@ -10,6 +10,7 @@ import { HomePageComponent } from './home-page/home-page.component';
import { BrowserModule } from '@angular/platform-browser';
import { FormPlayQuizComponent } from './form-play-quiz/form-play-quiz.component';
import { MatIconModule } from '@angular/material/icon';
+import { SharedModule } from '../../shared/shared.module';
@NgModule({
declarations: [
@@ -22,6 +23,6 @@ import { MatIconModule } from '@angular/material/icon';
FormPlayQuizComponent,
],
exports: [MultipleChoiceComponent],
- imports: [CommonModule, ReactiveFormsModule, BrowserModule, MatIconModule],
+ imports: [CommonModule, ReactiveFormsModule, BrowserModule, MatIconModule, SharedModule],
})
-export class HomeModule {}
+export class HomeModule { }
diff --git a/src/app/modules/home/my-quiz/my-quiz.component.css b/src/app/modules/home/my-quiz/my-quiz.component.css
index 206c1731ea4f7d43e4cb554d9af42d9957a6f725..58c2d6da3eff049a1cb2fdab88c52fe7e4425573 100644
--- a/src/app/modules/home/my-quiz/my-quiz.component.css
+++ b/src/app/modules/home/my-quiz/my-quiz.component.css
@@ -18,7 +18,8 @@
.scrollable-list {
height: 45%;
width: 100%;
- overflow-y: auto; /* Ajoute une scrollbar verticale si nécessaire */
+ overflow-y: auto;
+ /* Ajoute une scrollbar verticale si nécessaire */
border: 4px solid #F3F3F3;
padding: 0;
border-radius: 10px;
@@ -26,31 +27,17 @@
}
-/* 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{
+.radio-label>h3 {
margin: 10px 5px 5px 5px;
}
-.radio-label > p{
+.radio-label>p {
margin: 5px 5px 5px 10px;
-}
+}
/* Style for the custom buttons */
.radio-label {
@@ -67,11 +54,11 @@ input[type="radio"] {
align-items: center;
}
-input[type="radio"] + .radio-label:hover {
+input[type="radio"]+.radio-label:hover {
background-color: #e0e0e0;
-}
+}
-input[type="radio"]:checked + .radio-label {
+input[type="radio"]:checked+.radio-label {
color: #2B73FE;
}
diff --git a/src/app/modules/home/my-quiz/my-quiz.component.html b/src/app/modules/home/my-quiz/my-quiz.component.html
index 82a39a1adf6bbe06986169b65e3c66e31c0091dd..8871ae44a30b6535625acdfd327a02093ff49bea 100644
--- a/src/app/modules/home/my-quiz/my-quiz.component.html
+++ b/src/app/modules/home/my-quiz/my-quiz.component.html
@@ -1,49 +1,8 @@
<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 class="scrollable-list">
+ <app-quiz-list [quizList]="quizList"></app-quiz-list>
+ </div>
+ <input type="submit" value="PLAY" class="blueButton">
</div>
\ No newline at end of file
diff --git a/src/app/modules/home/my-quiz/my-quiz.component.ts b/src/app/modules/home/my-quiz/my-quiz.component.ts
index 16d7ec7872dab082f93ce22d35f2ae47a23d1d1f..ccd58a1aca6901d01a36253c60c26a40bc8af424 100644
--- a/src/app/modules/home/my-quiz/my-quiz.component.ts
+++ b/src/app/modules/home/my-quiz/my-quiz.component.ts
@@ -1,4 +1,5 @@
import { Component } from '@angular/core';
+import { Router } from '@angular/router';
@Component({
selector: 'app-my-quiz',
@@ -6,5 +7,29 @@ import { Component } from '@angular/core';
styleUrls: ['./my-quiz.component.css', '../../../../styles.css'],
})
export class MyQuizComponent {
+ quizList: any[] = [];
+ constructor(
+ private router: Router
+ ) { }
+
+ ngOnInit(): void {
+ this.quizList = [
+ { title: 'Quiz 1', content: 'Quiz 1 Content' },
+ { title: 'Quiz 2', content: 'Quiz 2 Content' },
+ { title: 'Quiz 3', content: 'Quiz 3 Content' },
+ { title: 'Quiz 4', content: 'Quiz 4 Content' },
+ { title: 'Quiz 5', content: 'Quiz 5 Content' },
+ { title: 'Quiz 6', content: 'Quiz 6 Content' },
+ { title: 'Quiz 7', content: 'Quiz 7 Content' },
+ { title: 'Quiz 8', content: 'Quiz 8 Content' },
+ { title: 'Quiz 9', content: 'Quiz 9 Content' },
+ { title: 'Quiz 10', content: 'Quiz 10 Content' },
+ { title: 'Quiz 11', content: 'Quiz 11 Content' },
+ { title: 'Quiz 12', content: 'Quiz 12 Content' },
+ { title: 'Quiz 13', content: 'Quiz 13 Content' },
+ { title: 'Quiz 14', content: 'Quiz 14 Content' },
+ { title: 'Quiz 15', content: 'Quiz 15 Content' }
+ ];
+ }
}
diff --git a/src/app/modules/profile/create-custom-quiz/create-custom-quiz.component.css b/src/app/modules/profile/create-custom-quiz/create-custom-quiz.component.css
index ba34fb003d6edbaca0b8f5864289cd842833941c..b9c0926e1381349ddd72a9a927f57d233515e049 100644
--- a/src/app/modules/profile/create-custom-quiz/create-custom-quiz.component.css
+++ b/src/app/modules/profile/create-custom-quiz/create-custom-quiz.component.css
@@ -55,10 +55,6 @@
-webkit-box-sizing: border-box;
}
-/* form {
- height: 100%;
-} */
-
input {
height: 3vmin;
width: calc(90vw/2);
diff --git a/src/app/modules/profile/profile-info/profile-info.component.css b/src/app/modules/profile/profile-info/profile-info.component.css
index 661c6bd625f1b5d1e5d1c3bf388d759b72a00490..af925cf13dbedb9c5c58e9f09d01345126dd4800 100644
--- a/src/app/modules/profile/profile-info/profile-info.component.css
+++ b/src/app/modules/profile/profile-info/profile-info.component.css
@@ -3,13 +3,13 @@
display: grid;
grid-auto-flow: column;
grid-template-columns: 40% 40%;
- grid-template-rows: 10% 85%;
+ grid-template-rows: 5% 85%;
grid-gap: 0 7%;
justify-content: center;
align-items: center;
width: 100vw;
- height: 90vh;
+ height: 88%;
}
.grid {
@@ -41,7 +41,11 @@
border: 1vmin solid #F3F3F3;
}
-.list-wrapper {
+.grid .container {
+ height: 89%;
+}
+
+.scrollable-list {
/* max-height: 95%; */
overflow-y: auto;
overflow-x: hidden;
@@ -49,35 +53,30 @@
}
.form-group {
- display: grid;
- grid-template-columns: 2fr 1fr;
- grid-gap: 0 1%;
width: 100%;
+ height: 10%;
}
hr {
- width: 106%;
+ width: 100%;
height: 1vmin;
margin: 0;
- margin-left: -6%;
background-color: #F3F3F3;
border: none;
}
-button {
- background-color: #fff;
- /* height: 28vh; */
- /* padding: auto;
- margin: 2vh; */
- border-radius: 10px;
- box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
- display: flex;
- align-items: center;
- justify-content: center;
- /* font-size: 2rem; */
- font-family: sans-serif;
- border: 0;
- color: black;
+.blueButton {
+ vertical-align: middle;
+ height: 3vmin;
+ font-size: 2.5vmin;
+ margin-top: 0.5vmin;
+ margin-bottom: 0.5vmin;
+}
+
+input {
+ height: 3vmin;
+ margin-top: 0.5vmin;
+ margin-bottom: 0.5vmin;
}
.profile_info,
diff --git a/src/app/modules/profile/profile-info/profile-info.component.html b/src/app/modules/profile/profile-info/profile-info.component.html
index 9ff6a4e5848a8fe515ed9e4c79b03f11c852ee54..fb6f56f3e7d8b8f96a824ec07901bd85be1499ea 100644
--- a/src/app/modules/profile/profile-info/profile-info.component.html
+++ b/src/app/modules/profile/profile-info/profile-info.component.html
@@ -22,16 +22,16 @@
<!-- <form [formGroup]="form" (ngSubmit)="submitForm()"> -->
<form>
<div class="form-group">
- <input type="text" class="form-control" placeholder="Search a quiz..." formControlName="quizName" />
- <button class="btn btn-primary" type="submit">Search</button>
+ <input type="text" class="inputRecherche" placeholder="Search a quiz..."
+ formControlName="quizName" />
</div>
</form>
<div class="container">
- <div class="list-wrapper">
+ <div class="scrollable-list">
<app-quiz-list [quizList]="quizList"></app-quiz-list>
</div>
<div class="new-quiz">
- <button class="btn btn-primary" (click)="newQuiz()">Create a new quiz</button>
+ <button class="blueButton" (click)="newQuiz()">Create a new quiz</button>
</div>
</div>
</div>
diff --git a/src/app/shared/header/header.component.css b/src/app/shared/header/header.component.css
index e05c31037381d55e669f4030733c1ee0c3ff5046..132e6acb0afb439d150af882e0317046b578a8e6 100644
--- a/src/app/shared/header/header.component.css
+++ b/src/app/shared/header/header.component.css
@@ -7,6 +7,7 @@
background-color: #F3F3F3;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
position: absolute;
+ top: 0;
display: flex;
/* padding-inline: 1%; */
}
@@ -24,4 +25,8 @@ button {
button:hover {
color: #00B3F4;
+}
+
+.selected {
+ color: #00B3F4;
}
\ No newline at end of file
diff --git a/src/app/shared/header/header.component.html b/src/app/shared/header/header.component.html
index 0c2d044e2f527455fb912227fc3d6ddf73523840..44a0c3c51cc68c315637d71816cff8d7492d030d 100644
--- a/src/app/shared/header/header.component.html
+++ b/src/app/shared/header/header.component.html
@@ -1,5 +1,11 @@
<div class="header">
- <button [routerLink]="['/']">Home</button>
- <button [routerLink]="['/community']">Communauté</button>
- <button [routerLink]="['/profile']">Profile</button>
-</div>
+ <button (click)="navigate('/home')" [ngClass]="{'selected': homePage}">
+ Home
+ </button>
+ <button (click)="navigate('/community')" [ngClass]="{'selected': communityPage}">
+ Communauté
+ </button>
+ <button (click)="navigate('/profile')" [ngClass]="{'selected': profilePage}">
+ Profile
+ </button>
+</div>
\ No newline at end of file
diff --git a/src/app/shared/header/header.component.ts b/src/app/shared/header/header.component.ts
index d61ed7c798ee77ae1d094c9e8fc7cf663b99673b..55f74eb14dd443c1ddfdf05cbd2629c6af5b2ea2 100644
--- a/src/app/shared/header/header.component.ts
+++ b/src/app/shared/header/header.component.ts
@@ -1,8 +1,38 @@
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
+import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
+import { filter } from 'rxjs';
@Component({
selector: 'app-header',
templateUrl: './header.component.html',
styleUrl: './header.component.css',
})
-export class HeaderComponent {}
+export class HeaderComponent {
+ homePage: boolean = false;
+ communityPage: boolean = false;
+ profilePage: boolean = false;
+
+ constructor(private router: Router, private route: ActivatedRoute) { }
+
+ ngOnInit(): void {
+ this.changeSelect();
+ }
+
+ changeSelect(): void {
+ this.router.events.pipe(filter((event) => event instanceof NavigationEnd)).subscribe(() => {
+ this.homePage = this.router.url.includes('home');
+ this.communityPage = this.router.url.includes('community');
+ this.profilePage = this.router.url.includes('profile');
+ });
+ }
+
+ navigate(route: string): void {
+ this.changeSelect();
+ console.log({
+ 'homePage': this.homePage,
+ 'communityPage': this.communityPage,
+ 'profilePage': this.profilePage,
+ });
+ this.router.navigate([route]);
+ }
+}
diff --git a/src/styles.css b/src/styles.css
index 1512f9a739bd63678b5e70258ea0622c34eac7a7..34bf3655cee6d230909c7d21f3b9369ed1d26046 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
+
/* You can add global styles to this file, and also import other style files */
html,
body {
@@ -8,7 +10,7 @@ body {
}
main {
- padding-top: 10vh;
+ margin-top: 10vh;
/* header size */
height: 90vh;
}
@@ -56,6 +58,9 @@ h1 {
}
.blueButton {
+ display: flex;
+ justify-content: center;
+ align-items: center;
background: #2B73FE;
color: #FFFFFF;
font-weight: bold;
@@ -66,13 +71,18 @@ h1 {
border-style: solid;
height: 100px;
width: 100%;
+ transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.blueButton:hover {
- background: #00B3F4;
+ background: #FFFFFF;
+ color: #2B73FE;
}
.whiteButton {
+ display: flex;
+ justify-content: center;
+ align-items: center;
background: #FFFFFF;
color: #2B73FE;
font-weight: bold;
@@ -83,6 +93,7 @@ h1 {
border-style: solid;
height: 100px;
width: 100%;
+ transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.whiteButton:hover {
@@ -119,4 +130,22 @@ h1 {
/* margin: 2%; */
padding: 20px;
font-size: 2vmin;
+
+ box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+}
+
+/* scrollable lists */
+.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;
}
\ No newline at end of file