Skip to content
Snippets Groups Projects
Commit 6ff6560d authored by HUSS THEOPHILE's avatar HUSS THEOPHILE
Browse files

Merge branch 'develop' into 'feature/42-add-user-login-signup'

# Conflicts:
#   src/app/modules/profile/profile-info/profile-info.component.html
#   src/app/modules/profile/profile-info/profile-info.component.ts
parents 76b95152 7384b2e4
Branches
1 merge request!44Feature/42 add user login signup
Pipeline #303304 passed with stages
in 45 seconds
Showing
with 477 additions and 230 deletions
......@@ -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,
},
{
......
<app-header *ngIf="!playQuiz"></app-header>
<router-outlet></router-outlet>
\ No newline at end of file
<main>
<router-outlet></router-outlet>
</main>
\ No newline at end of file
......@@ -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');
});
}
}
<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
@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
<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
......@@ -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 { }
......@@ -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;
}
......
<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
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' }
];
}
}
.question-table {
.header {
display: flex;
flex-direction: row;
align-items: center;
align-items: center;
justify-content: space-between;
width: 100%;
height: 10vh;
}
.w-fit {
width: fit-content !important;
.header mat-icon {
width: auto;
height: auto;
margin: 0;
font-size: 8vmin;
padding-right: 5vw;
/* Your profile */
font-style: normal;
font-weight: 500;
color: #00B3F4;
}
.question-table tbody td:nth-child(2) {
flex: 0 0 auto;
justify-content: center;
.header h1 {
width: auto;
height: auto;
margin: 0;
font-size: 8vmin;
padding-left: 5vw;
/* Your profile */
font-style: normal;
font-weight: 500;
color: #00B3F4;
}
.question-table tbody td:nth-child(3),
.question-table tbody td:nth-child(4) {
flex: 1;
.header mat-icon:hover {
cursor: pointer;
color: #2B73FE;
}
.m-10 {
margin: 10px;
.container {
display: flex;
flex-direction: column;
width: 90vw;
margin-left: 5%;
height: 70vh;
background-color: #F3F3F3;
border-radius: 10px;
border: 0.5vmin solid #DBDBDB;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.cell {
border: 1px solid #ccc;
input {
height: 3vmin;
width: calc(90vw/2);
margin-top: 0.5vmin;
margin-bottom: 0.5vmin;
/*padding-left: 1vmin;
padding-right: 1vmin; */
border-radius: 5px;
border: 0.25vmin solid #DBDBDB;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.row {
max-width: 100%;
select {
height: 3vmin;
width: auto;
margin-top: 0.5vmin;
margin-bottom: 0.5vmin;
/*padding-left: 1vmin;
padding-right: 1vmin; */
border-radius: 5px;
border: 0.25vmin solid #DBDBDB;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.add-cell {
max-width: 100%;
.quiz-info-wrapper {
display: flex;
justify-content: center;
border: 2px solid black;
flex-wrap: nowrap;
flex-direction: row;
justify-content: left;
align-items: center;
width: 100%;
/*margin-top: 1vmin;*/
}
.add-cell-question {
.label-wrapper {
width: 30%;
text-align: right;
font-size: 3vmin;
margin: 0;
margin-right: 5%;
flex-shrink: 0;
}
.quiz-info {
display: flex;
flex-direction: column;
width: 100%;
display: table-row;
text-align: center;
border: 2px solid rgba(0, 0, 0, 0.808);
height: 8vh;
}
.bigger-icon {
transform: scale(1.2);
.quiz-info-wrapper select {
width: 30%;
}
hr {
width: 100%;
height: 0.5vmin;
background-color: #DBDBDB;
border: none;
}
/*****************************************/
/* questions Info */
/*****************************************/
.question-info {
height: 58vh;
overflow: auto;
}
/* .question-table {
height: 100%;
overflow: scroll;
} */
.question-cell {
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
margin-top: 1vmin;
}
.answers-cell {
display: flex;
flex-direction: row;
padding-top: 2vmin;
}
.answers-list {
display: flex;
flex-direction: column;
width: 100%;
}
.answer-wrapper {
width: 70%;
}
.answer-cell {
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
}
mat-icon {
height: 100%;
}
.answer-cell input {
width: calc(45vw - 2.5vmin);
}
span {
flex-shrink: 0;
}
.add-cell {
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
/* margin-top: 1vmin; */
}
.add-cell p {
margin: 0;
margin-left: 1%;
font-size: 1.5vmin;
color: #C9C9C9;
}
.btn-group {
display: flex;
flex-direction: row;
justify-content: space-evenly;
width: 96%;
margin-left: 2%;
margin-top: 0.5%;
}
\ No newline at end of file
<div class="col-md-12">
<div class="card">
<div class="row">
<div class="col-md-12">
<form class="m-10" (ngSubmit)="createQuiz()" [formGroup]="quizForm">
<label class="m-10">Quiz title : </label>
<input class="m-10" type="text" formControlName="title" />
<label class="m-10">Difficulty : </label>
<div class="question-marks">
<div class="header">
<h1>Create your own quiz</h1>
<mat-icon (click)="createQuiz()">save</mat-icon>
</div>
<div class="container">
<form [formGroup]="quizForm">
<div class="quiz-info">
<div class="quiz-info-wrapper">
<div class="label-wrapper">
<label for="title">QUIZ TITLE </label>
</div>
<input type="text" formControlName="title" placeholder="Write the quiz title..." />
</div>
<div class="quiz-info-wrapper">
<div class="label-wrapper">
<label for="difficulty">QUIZ DIFFICULTY </label>
</div>
<select formControlName="difficulty">
<option value="easy">Easy</option>
<option value="medium">Medium</option>
<option value="hard">Hard</option>
</select>
<table class="question-table">
<thead>
<tr>
<th class="photo-cell">Question</th>
<th class="task-type-cell">Answers</th>
</tr>
</thead>
<tbody formArrayName="questions">
<tr *ngFor="let question of questions.controls; let i = index" [formGroupName]="i">
<td class="cell question-cell">
<label>Question : </label>
<input type="text" formControlName="question" />
</td>
<td class="cell answers-cell" formArrayName="answers">
<table class="answers-table">
<tr
*ngFor="let answer of getAnswers(i).controls; let j = index"
[formGroupName]="j"
>
<td>
<input type="text" formControlName="answer" />
</td>
<td>
<input type="checkbox" [formControlName]="'right_answer'" />
</td>
<td (click)="removeAnswer(i, j)">
<mat-icon style="color: red">delete</mat-icon>
</td>
</tr>
<span *ngIf="getAnswers(i).errors?.['duplicateAnswer']" style="color: red"
>All answers need to be unique.</span
>
<tr class="add-cell" (click)="addAnswer(i)">
<td>
<mat-icon style="color: brown">add</mat-icon>
</td>
</tr>
</table>
</td>
<td (click)="removeQuestion(i)">
<mat-icon style="color: red">delete</mat-icon>
</td>
</tr>
<tr class="add-cell-question" (click)="addQuestion()">
<td colspan="5">
<mat-icon [style.color]="'brown'">add</mat-icon>
</td>
</tr>
</tbody>
</table>
</form>
<div class="center-button">
<button (click)="createQuiz()" class="btn btn-secondary btn-success" [disabled]="quizForm.invalid">
Add
</button>
</div>
</div>
</div>
<hr>
<div class="question-info">
<div class="question-table">
<div formArrayName="questions">
<div class="question-row" *ngFor="let question of questions.controls; let i = index"
[formGroupName]="i">
<div class="cell question-cell">
<div class="label-wrapper">
<label>QUESTION {{i + 1}} </label>
</div>
<input type="text" formControlName="question" placeholder="Write a question..." />
<!-- the button bellow is temporary -->
<mat-icon style="color: red" (click)="removeQuestion(i)">delete</mat-icon>
</div>
<div class="cell answers-cell" formArrayName="answers">
<div class="label-wrapper">
<label>ANSWERS </label>
</div>
<div class="answer-wrapper">
<div class="answers-list"
*ngFor="let answer of getAnswers(i).controls; let j = index"
[formGroupName]="j">
<div class="answer-cell">
<!-- answer index 0 is always the correct anwser -->
<div *ngIf="j == 0" class="answer-cell">
<mat-icon style="color: green">check</mat-icon>
<input type="text" formControlName="answer"
placeholder="Write true answer..." />
</div>
<div *ngIf="j>0" class="answer-cell">
<mat-icon style="color: red">clear</mat-icon>
<input type="text" formControlName="answer"
placeholder="Write wrong answer..." />
<mat-icon *ngIf="j > 1" (click)="removeAnswer(i, j)"
style="color: red">delete</mat-icon>
</div>
</div>
</div>
<span *ngIf="getAnswers(i).errors?.['duplicateAnswer']" style="color: red">All
answers need to be unique.
</span>
<div class="add-cell" (click)="addAnswer(i)" *ngIf="getAnswers(i).length<4">
<!-- <mat-icon style="color: brown">add</mat-icon> -->
<button class="questionsButton">+ ADD AN ANSWER</button>
<p>up to 4</p>
</div>
</div>
</div>
<hr>
</div>
<div class="btn-group">
<button (click)="addQuestion()" class="questionsButton">+ ADD A QUESTION</button>
<button class="questionsButton">ADD FROM DATABASE</button>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
\ No newline at end of file
import { Component, OnInit } from '@angular/core';
import { AbstractControl, FormArray, FormBuilder, FormGroup, ValidationErrors, Validators } from '@angular/forms';
import { Router } from '@angular/router';
import Swal from 'sweetalert2';
@Component({
templateUrl: './create-custom-quiz.component.html',
......@@ -7,14 +9,18 @@ import { AbstractControl, FormArray, FormBuilder, FormGroup, ValidationErrors, V
})
export class CreateCustomQuizComponent implements OnInit {
quizForm: FormGroup;
constructor(private fb: FormBuilder) {
router: any;
constructor(
private fb: FormBuilder,
router: Router
) {
this.quizForm = this.fb.group({
title: this.fb.control('', [Validators.required, Validators.maxLength(255)]),
difficulty: this.fb.control('', [Validators.required]),
difficulty: this.fb.control('medium', [Validators.required]),
questions: this.fb.array([this.createQuestion()], [Validators.required]),
});
}
ngOnInit(): void {}
ngOnInit(): void { }
get questions(): FormArray {
return this.quizForm.get('questions') as FormArray;
......@@ -37,7 +43,7 @@ export class CreateCustomQuizComponent implements OnInit {
createAnswer() {
return this.fb.group({
answer: this.fb.control('', [Validators.required, Validators.maxLength(255)]),
right_answer: this.fb.control(false, [Validators.required]),
right_answer: this.fb.control(true, [Validators.required]),
});
}
addAnswer(i: number) {
......@@ -53,14 +59,41 @@ export class CreateCustomQuizComponent implements OnInit {
}
removeQuestion(i: number) {
this.questions.removeAt(i);
Swal.fire({
title: "Are you sure you want to delete this question?",
text: "You won't be able to revert this!",
icon: "warning",
showCancelButton: true,
confirmButtonColor: "#3085d6",
cancelButtonColor: "#d33",
confirmButtonText: "Yes, delete it!"
}).then((result) => {
if (result.isConfirmed) {
this.questions.removeAt(i);
}
});
}
answersValidators(formArray: AbstractControl): ValidationErrors | null {
const names = formArray.value.map((answer: any) => answer.answer.toLowerCase());
const hasDuplicates = names.some((name: string, index: number) => names.indexOf(name.toLowerCase()) !== index);
return hasDuplicates ? { duplicateAnswer: true } : null;
const answersValues = formArray.value.map((answer: any) => answer.answer.toLowerCase()).filter((answer: string) => answer.trim() !== '');
// check if the text already exist in another answer
const hasDuplicates = answersValues.some((name: string, index: number) => answersValues.indexOf(name.toLowerCase()) !== index);
// check if the text is empty
const hasEmpty = answersValues.some((name: string) => name.trim() === '');
return { duplicateAnswer: hasDuplicates, emptyAnswer: hasEmpty };
}
createQuiz() {}
createQuiz() {
if (this.quizForm.valid) {
console.log(this.quizForm.value);
this.router.navigate(['profile/']);
} else {
Swal.fire({
icon: 'error',
title: 'Oops...',
text: 'Please fill all the required fields!',
});
console.log(this.quizForm.value);
}
}
}
......@@ -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,
......
......@@ -24,23 +24,19 @@
<div *ngIf="isLogged">
<h3>Your quizzes</h3>
<div class="grid">
<!-- <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>
......
......@@ -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
<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
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]);
}
}
@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;
}
......@@ -18,6 +20,7 @@ h1,
h2,
h3,
h4,
label,
p {
font-family: 'Roboto';
}
......@@ -29,7 +32,7 @@ p {
h1 {
height: 10vh;
margin: 0;
margin-left: 7vw;
margin-left: 5vw;
font-size: 8vmin;
/* Your profile */
font-style: normal;
......@@ -55,6 +58,9 @@ h1 {
}
.blueButton {
display: flex;
justify-content: center;
align-items: center;
background: #2B73FE;
color: #FFFFFF;
font-weight: bold;
......@@ -65,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;
......@@ -82,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 {
......@@ -89,11 +101,12 @@ h1 {
}
.questionsButton {
width: 11vw;
width: 20vw;
height: 2.5vh;
font-size: 1.25vmin;
background-color: #FEFEFE;
border-radius: 5px;
border-radius: 20px;
border: 0.25vmin solid #DBDBDB;
box-sizing: border-box;
-moz-box-sizing: border-box;
......@@ -117,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
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment