diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 0c5a793..2cc7859 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -7,4 +7,6 @@ import { Component } from '@angular/core'; }) export class AppComponent { title = 'frontend'; + + themeIsLight = true; } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 973dbd9..42884d3 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -14,7 +14,7 @@ import {HttpClientModule} from "@angular/common/http"; import { PopupConfirmationComponent } from './pourLes3Roles/register/popup-confirmation/popup-confirmation.component'; import {MatDialogModule} from '@angular/material/dialog'; import {MatButtonModule} from "@angular/material/button"; -import { PubComponent } from './utils/components/pub/pub.component'; +import { AdvertComponent } from './utils/components/advert/advert.component'; import { VideoCellComponent } from './user/search/video-cell/video-cell.component'; import { VideoGridComponent } from './user/search/video-grid/video-grid.component'; import {MatIconModule} from "@angular/material/icon"; @@ -24,7 +24,8 @@ import {MatDividerModule} from "@angular/material/divider"; import {MatCheckboxModule} from "@angular/material/checkbox"; import {MatFormFieldModule} from "@angular/material/form-field"; import {MatSnackBarModule} from "@angular/material/snack-bar"; -import { IframeTrackerDirective } from './utils/directive/iframe-tracker/iframe-tracker.directive'; +import { IframeTrackerDirective } from './utils/directives/iframe-tracker/iframe-tracker.directive'; +import {MatGridListModule} from "@angular/material/grid-list"; @NgModule({ @@ -35,7 +36,7 @@ import { IframeTrackerDirective } from './utils/directive/iframe-tracker/iframe- NavBarComponent, PageSearchComponent, PopupConfirmationComponent, - PubComponent, + AdvertComponent, VideoCellComponent, VideoGridComponent, PopupAddVideoToPlaylistsComponent, @@ -55,7 +56,8 @@ import { IframeTrackerDirective } from './utils/directive/iframe-tracker/iframe- MatDividerModule, MatCheckboxModule, MatFormFieldModule, - MatSnackBarModule + MatSnackBarModule, + MatGridListModule ], providers: [], bootstrap: [AppComponent] diff --git a/src/app/pourLes3Roles/page-connexion/page-connexion.component.html b/src/app/pourLes3Roles/page-connexion/page-connexion.component.html index 6966d79..90cd12c 100644 --- a/src/app/pourLes3Roles/page-connexion/page-connexion.component.html +++ b/src/app/pourLes3Roles/page-connexion/page-connexion.component.html @@ -1,39 +1,41 @@ -
+
+
- + -
-

Connexion

+
+

Connexion

- -
-
Email:  
-
- + +
+
Email:  
+
+ +
-
- -
-
Mot de passe:  
-
- + +
+
Mot de passe:  
+
+ +
-
- -
-
- + +
+
+ +
+
+ +
-
- -
-
- -
diff --git a/src/app/pourLes3Roles/page-connexion/page-connexion.component.scss b/src/app/pourLes3Roles/page-connexion/page-connexion.component.scss index d0d6de0..ce68eec 100644 --- a/src/app/pourLes3Roles/page-connexion/page-connexion.component.scss +++ b/src/app/pourLes3Roles/page-connexion/page-connexion.component.scss @@ -1,3 +1,10 @@ +.myContainer { + max-width: 100vw; + height: 100vh; + overflow-x: hidden; + font-size: x-large; +} + h1 { text-align: center; margin-bottom: 30px; @@ -6,17 +13,25 @@ h1 { .boite { margin-left: auto; margin-right: auto; - width: 450px; + width: 30%; margin-top: 50vh; transform: translateY(-100%); - border: solid 3px black; + border: solid 3px; border-radius: 10px; padding: 20px 40px 20px 20px; background-color: #dcdcdc; } +.lightTheme .boite { + border-color: black; +} +.darkTheme .boite { + border-color: white; +} + + .row { - margin: 15px 0px 15px 0px + margin: 25px 0px 25px 0px } .label { @@ -27,7 +42,7 @@ h1 { .champ { margin: 0px; - padding: 0px + padding: 0px; } input { diff --git a/src/app/pourLes3Roles/page-connexion/page-connexion.component.ts b/src/app/pourLes3Roles/page-connexion/page-connexion.component.ts index abf9d28..6784a98 100644 --- a/src/app/pourLes3Roles/page-connexion/page-connexion.component.ts +++ b/src/app/pourLes3Roles/page-connexion/page-connexion.component.ts @@ -1,6 +1,7 @@ import { Component, OnInit } from '@angular/core'; import {MessageService} from "../../utils/services/message/message.service"; import {Router} from "@angular/router"; +import {ThemeService} from "../../utils/services/theme/theme.service"; @Component({ @@ -14,7 +15,8 @@ export class PageConnexionComponent implements OnInit password: string = "" constructor( private messageService: MessageService, - private router: Router) { } + private router: Router, + public themeService: ThemeService ) { } ngOnInit(): void {} diff --git a/src/app/pourLes3Roles/register/page-register/page-register.component.html b/src/app/pourLes3Roles/register/page-register/page-register.component.html index 364a1e4..92b795b 100644 --- a/src/app/pourLes3Roles/register/page-register/page-register.component.html +++ b/src/app/pourLes3Roles/register/page-register/page-register.component.html @@ -1,50 +1,53 @@ -
+
+
- + -
-

Inscription

+
+

Inscription

- -
-
Pseudo:  
-
- + +
+
Pseudo:  
+
+ +
+
+ + +
+
Email:  
+
+ +
+
+ + +
+
Mot de passe:  
+
+ +
+
+ + +
+
Confirmer le mot de passe:  
+
+ +
+
+ + +
+ +
+ + +
+ {{errorMessage}}
- -
-
Email:  
-
- -
-
- - -
-
Mot de passe:  
-
- -
-
- - -
-
Confirmer le mot de passe:  
-
- -
-
- - -
- -
- - -
- {{errorMessage}} -
diff --git a/src/app/pourLes3Roles/register/page-register/page-register.component.scss b/src/app/pourLes3Roles/register/page-register/page-register.component.scss index 4efbdf0..ff2b7f2 100644 --- a/src/app/pourLes3Roles/register/page-register/page-register.component.scss +++ b/src/app/pourLes3Roles/register/page-register/page-register.component.scss @@ -1,19 +1,35 @@ +.myContainer { + max-width: 100vw; + height: 100vh; + overflow-x: hidden; + font-size: x-large; +} + + h1 { text-align: center; margin-bottom: 30px; } + .boite { margin-left: auto; margin-right: auto; - width: 550px; + width: 35%; margin-top: 50vh; transform: translateY(-100%); - border: solid 3px black; + border: solid 3px; border-radius: 10px; padding: 20px 40px 20px 40px; background-color: #dcdcdc; } +.lightTheme .boite { + border-color: black; +} +.darkTheme .boite { + border-color: white; +} + input { width: 100%; diff --git a/src/app/pourLes3Roles/register/page-register/page-register.component.ts b/src/app/pourLes3Roles/register/page-register/page-register.component.ts index fb7f049..228ca02 100644 --- a/src/app/pourLes3Roles/register/page-register/page-register.component.ts +++ b/src/app/pourLes3Roles/register/page-register/page-register.component.ts @@ -3,6 +3,7 @@ import {MessageService} from "../../../utils/services/message/message.service"; import {Router} from "@angular/router"; import {MatDialog} from "@angular/material/dialog"; import {PopupConfirmationComponent} from "../popup-confirmation/popup-confirmation.component"; +import {ThemeService} from "../../../utils/services/theme/theme.service"; @Component({ selector: 'app-page-register', @@ -21,7 +22,8 @@ export class PageRegisterComponent implements OnInit constructor( private messageService: MessageService, private router: Router, - public dialog: MatDialog ) { } + public dialog: MatDialog, + public themeService: ThemeService ) { } ngOnInit(): void {} diff --git a/src/app/user/search/page-search/page-search.component.html b/src/app/user/search/page-search/page-search.component.html index f72da7c..82bde0f 100644 --- a/src/app/user/search/page-search/page-search.component.html +++ b/src/app/user/search/page-search/page-search.component.html @@ -1,77 +1,75 @@ -
+
+
- -
- -
- - - - -
- - -
-
- -
+ +
+
- - -
+ - -
-
-   - + + +
+
+
+ + +
+
+   + +
-
- -
-
- -   - - image - -   - + +
+
+ +   + + image + +   + +
-
- -
-
- +
- - -
-
- -
-
+ + + + + + + + + +
+ +
+ + + + +
+ +
+ + + + +
+ +
+ + +
- - - - -
-
-
-
- -
-
-
-
-
diff --git a/src/app/user/search/page-search/page-search.component.scss b/src/app/user/search/page-search/page-search.component.scss index d21e578..dca18d5 100644 --- a/src/app/user/search/page-search/page-search.component.scss +++ b/src/app/user/search/page-search/page-search.component.scss @@ -1,41 +1,69 @@ -.conteneur { - text-align: center; - max-width: 100%; - max-height: 100vh; - overflow-x: hidden; - overflow-y: hidden; +.lightTheme { + color: black; + border-color: black; +} +.darkTheme { + color: white; + border-color: white; } -.blocMilieu1 { - height: 70vh; - margin-bottom: 70px +.conteneur { + text-align: center; + max-width: 100vw; + height: 100vh; + overflow-x: hidden; } + .inputSearchBar { width: 50%; + font-size: x-large; } - .btnRechercher { border: solid black 1px; border-radius: 5px; + font-size: x-large; } -.conteneurPubGauche { - border: solid black 2px; + +.celluleGrilleVideo { + border: solid 4px; + border-radius: 5px; + width: 100%; +} +.lightTheme .celluleGrilleVideo{ + border-color: black; + background-color: #f0f0f0; +} +.darkTheme .celluleGrilleVideo{ + border-color: white; + background-color: #646464; +} + + +.conteneurVideosGrid { height: 75vh; - margin-left: 20px; + width: 100%; } -.conteneurPubDroite { - border: solid black 2px; +.cellulePub { + padding: 0px 10px 0px 10px; + width: 100%; + text-align: center; + justify-content: center; +} + +.conteneurPub { height: 75vh; - margin-right: 20px; -} - -.conteneurPubBas { - //width: 80%; - //margin-left: auto; - //margin-right: auto; - height: 100%; - border: solid black 2px; + text-align: center; + justify-content: center; + vertical-align: middle; + display: block; + width: 75%; + margin-left: auto; + margin-right: auto; + position: absolute; + top: 50%; + -ms-transform: translateY(-50%); + transform: translateY(-50%); } diff --git a/src/app/user/search/page-search/page-search.component.ts b/src/app/user/search/page-search/page-search.component.ts index 51dbe6b..c38b7de 100644 --- a/src/app/user/search/page-search/page-search.component.ts +++ b/src/app/user/search/page-search/page-search.component.ts @@ -3,6 +3,8 @@ import {MessageService} from "../../../utils/services/message/message.service"; import {FictitiousDatasService} from "../../../utils/services/fictitiousDatas/fictitious-datas.service"; import {AddVideoToPlaylistsService} from "../../../utils/services/addVideoToPlaylists/add-video-to-playlists.service"; import {Video} from "../../../utils/interfaces/video"; +import {Advert} from "../../../utils/interfaces/advert"; +import {ThemeService} from "../../../utils/services/theme/theme.service"; @@ -23,17 +25,21 @@ export class PageSearchComponent implements OnInit tabPlateform = TAB_PLATEFORM; tabVideo: Video[] = []; search: string = ""; + ad1: Advert; + ad2: Advert; constructor( private messageService: MessageService, - private fictitiousDatasService: FictitiousDatasService) { } + private fictitiousDatasService: FictitiousDatasService, + public themeService: ThemeService ) { } ngOnInit(): void { // --- FAUX CODE --- - this.tabVideo = this.fictitiousDatasService.getTabVideo(7); - + this.tabVideo = this.fictitiousDatasService.getTabVideo(11); + this.ad1 = this.fictitiousDatasService.getAdvert(); + this.ad2 = this.fictitiousDatasService.getAdvert(); // --- VRAI CODE --- /* @@ -42,9 +48,13 @@ export class PageSearchComponent implements OnInit let data = { search: "", plaateforms: tabPlateformName }; this.messageService .sendMessage("user/searchVideo", data) - .subscribe(retour => { + .subscribe( retour => { if(retour.status === "error") console.log(retour.data); - else this.tabVideo = retour.data; + else { + this.tabVideo = retour.data.videos; + this.ad1 = retour.data.ad1; + this.ad2 = retour.data.ad2; + } }); */ } @@ -53,9 +63,7 @@ export class PageSearchComponent implements OnInit onSearch() { // --- FAUX CODE --- - this.tabVideo = []; - //this.fictitiousDatasService.getTabVideo(4); - + this.tabVideo = this.fictitiousDatasService.getTabVideo(4); // --- VRAI CODE --- /* @@ -69,9 +77,20 @@ export class PageSearchComponent implements OnInit .sendMessage("user/searchVideo", data) .subscribe(retour => { if(retour.status === "error") console.log(retour.data); - else this.tabVideo = retour.data; + else { + this.tabVideo = retour.data.videos; + this.ad1 = retour.data.ad1; + this.ad2 = retour.data.ad2; + } }); */ } + + tiles = [ + {text: 'One', cols: 2, rows: 1, color: 'lightblue'}, + {text: 'Two', cols: 7, rows: 1, color: 'lightgreen'}, + {text: 'Three', cols: 2, rows: 1, color: 'lightpink'}, + ]; + } diff --git a/src/app/user/search/video-cell/video-cell.component.html b/src/app/user/search/video-cell/video-cell.component.html index 74540ab..1b2deab 100644 --- a/src/app/user/search/video-cell/video-cell.component.html +++ b/src/app/user/search/video-cell/video-cell.component.html @@ -1,8 +1,11 @@ -
-
- {{video.title}} - + +
+
+
+ {{video.title}} + +
diff --git a/src/app/user/search/video-cell/video-cell.component.scss b/src/app/user/search/video-cell/video-cell.component.scss index d8a9ec7..7d9013d 100644 --- a/src/app/user/search/video-cell/video-cell.component.scss +++ b/src/app/user/search/video-cell/video-cell.component.scss @@ -1,7 +1,18 @@ .conteneur { text-align: center; - border: solid black 2px; + border: solid 2px; border-radius: 5px; padding-top: 15px; - background-color: #f0f0f0; +} + +.lightTheme .conteneur { + background-color: #ffffff; + border-color: black; + font-color: black; +} + +.darkTheme .conteneur { + background-color: #c8c8c8; + border-color: #ffffff; + font-color: white; } diff --git a/src/app/user/search/video-cell/video-cell.component.ts b/src/app/user/search/video-cell/video-cell.component.ts index c68d484..832a611 100644 --- a/src/app/user/search/video-cell/video-cell.component.ts +++ b/src/app/user/search/video-cell/video-cell.component.ts @@ -6,6 +6,7 @@ import { import {VideoUrlService} from "../../../utils/services/videoUrl/video-url.service"; import {AddVideoToPlaylistsService} from "../../../utils/services/addVideoToPlaylists/add-video-to-playlists.service"; import {Video} from "../../../utils/interfaces/video"; +import {ThemeService} from "../../../utils/services/theme/theme.service"; @Component({ selector: 'app-video-cell', @@ -18,7 +19,8 @@ export class VideoCellComponent implements OnInit safeUrl; constructor( private videoUrlService: VideoUrlService, - private addVideoToPlaylistsService: AddVideoToPlaylistsService ) {} + private addVideoToPlaylistsService: AddVideoToPlaylistsService, + public themeService: ThemeService) {} ngOnInit(): void { diff --git a/src/app/user/search/video-grid/video-grid.component.scss b/src/app/user/search/video-grid/video-grid.component.scss index 3d2de80..8d2c9c1 100644 --- a/src/app/user/search/video-grid/video-grid.component.scss +++ b/src/app/user/search/video-grid/video-grid.component.scss @@ -1,11 +1,12 @@ .conteneur { - border: solid black 2px; + height: 100%; } nav ul { overflow: hidden; overflow-y: scroll; - height: 66vh; + height: 75vh; + padding: 30px; } .ligne { diff --git a/src/app/utils/components/advert/advert.component.html b/src/app/utils/components/advert/advert.component.html new file mode 100644 index 0000000..65e9e36 --- /dev/null +++ b/src/app/utils/components/advert/advert.component.html @@ -0,0 +1,6 @@ +
+
+ + +
+
diff --git a/src/app/utils/components/advert/advert.component.scss b/src/app/utils/components/advert/advert.component.scss new file mode 100644 index 0000000..73a6e3b --- /dev/null +++ b/src/app/utils/components/advert/advert.component.scss @@ -0,0 +1,28 @@ +.myContainer { + margin: 0; + position: absolute; + top: 50%; + -ms-transform: translateY(-50%); + transform: translateY(-50%); +} + + +img { + max-width: 100%; + max-height: 100%; + border: solid 3px; + vertical-align: middle; +} +.lightTheme img { + border-color: black; +} +.darkTheme img { + border-color: white; +} + + +.helper { + display: inline-block; + height: 100%; + vertical-align: middle; +} diff --git a/src/app/utils/components/pub/pub.component.spec.ts b/src/app/utils/components/advert/advert.component.spec.ts similarity index 62% rename from src/app/utils/components/pub/pub.component.spec.ts rename to src/app/utils/components/advert/advert.component.spec.ts index f9328bc..08b7e86 100644 --- a/src/app/utils/components/pub/pub.component.spec.ts +++ b/src/app/utils/components/advert/advert.component.spec.ts @@ -1,20 +1,20 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { PubComponent } from './pub.component'; +import { AdvertComponent } from './advert.component'; describe('PubComponent', () => { - let component: PubComponent; - let fixture: ComponentFixture; + let component: AdvertComponent; + let fixture: ComponentFixture; beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [ PubComponent ] + declarations: [ AdvertComponent ] }) .compileComponents(); }); beforeEach(() => { - fixture = TestBed.createComponent(PubComponent); + fixture = TestBed.createComponent(AdvertComponent); component = fixture.componentInstance; fixture.detectChanges(); }); diff --git a/src/app/utils/components/advert/advert.component.ts b/src/app/utils/components/advert/advert.component.ts new file mode 100644 index 0000000..fcde30f --- /dev/null +++ b/src/app/utils/components/advert/advert.component.ts @@ -0,0 +1,27 @@ +import {Component, Input, OnInit} from '@angular/core'; +import {Advert} from "../../interfaces/advert"; +import {ThemeService} from "../../services/theme/theme.service"; + + + +@Component({ + selector: 'app-advert', + templateUrl: './advert.component.html', + styleUrls: ['./advert.component.scss'] +}) +export class AdvertComponent implements OnInit +{ + @Input() ad: Advert; + idxImage: number = 0; + + + constructor(public themeService: ThemeService) { } + + + ngOnInit(): void + { + const nbImages = this.ad.images.length; + this.idxImage = Math.floor(Math.random() * nbImages); + } + +} diff --git a/src/app/utils/components/nav-bar/nav-bar.component.html b/src/app/utils/components/nav-bar/nav-bar.component.html index 583da41..e8e9c0a 100644 --- a/src/app/utils/components/nav-bar/nav-bar.component.html +++ b/src/app/utils/components/nav-bar/nav-bar.component.html @@ -1,38 +1,41 @@ - -
- -
+
+ +
+ +
+ + + - - diff --git a/src/app/utils/components/nav-bar/nav-bar.component.scss b/src/app/utils/components/nav-bar/nav-bar.component.scss index e1a6e80..48bd2a4 100644 --- a/src/app/utils/components/nav-bar/nav-bar.component.scss +++ b/src/app/utils/components/nav-bar/nav-bar.component.scss @@ -24,6 +24,7 @@ ul { background-color: black; height: 70px; color: white; + border-bottom: solid 2px white; } @@ -52,11 +53,11 @@ li a { ::ng-deep .mat-slide-toggle-thumb { - background-color: #ffffff; + background-color: #c8c8c8; } ::ng-deep .mat-slide-toggle-bar { - background-color: #c8c8c8; + background-color: #ffffff; } ::ng-deep .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb { diff --git a/src/app/utils/components/nav-bar/nav-bar.component.ts b/src/app/utils/components/nav-bar/nav-bar.component.ts index c1ba65b..8a83013 100644 --- a/src/app/utils/components/nav-bar/nav-bar.component.ts +++ b/src/app/utils/components/nav-bar/nav-bar.component.ts @@ -1,17 +1,19 @@ import {Component, Input, OnInit} from '@angular/core'; +import {ThemeService} from "../../services/theme/theme.service"; @Component({ selector: 'app-nav-bar', templateUrl: './nav-bar.component.html', styleUrls: ['./nav-bar.component.scss'] }) -export class NavBarComponent implements OnInit +export class NavBarComponent { @Input() pour = "3roles"; - constructor() { } + constructor(public themeService: ThemeService) { } - ngOnInit(): void { + onClick(): void { + this.themeService.isLightTheme = !this.themeService.isLightTheme } } diff --git a/src/app/utils/components/pub/pub.component.html b/src/app/utils/components/pub/pub.component.html deleted file mode 100644 index d70cde8..0000000 --- a/src/app/utils/components/pub/pub.component.html +++ /dev/null @@ -1,6 +0,0 @@ -
- debut - image Youtube logo - image Youtube - fin -
diff --git a/src/app/utils/components/pub/pub.component.scss b/src/app/utils/components/pub/pub.component.scss deleted file mode 100644 index e69de29..0000000 diff --git a/src/app/utils/components/pub/pub.component.ts b/src/app/utils/components/pub/pub.component.ts deleted file mode 100644 index d23b635..0000000 --- a/src/app/utils/components/pub/pub.component.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { Component, OnInit } from '@angular/core'; - - - -@Component({ - selector: 'app-pub', - templateUrl: './pub.component.html', - styleUrls: ['./pub.component.scss'] -}) -export class PubComponent implements OnInit -{ - - constructor() { } - - - ngOnInit(): void { - } - -} diff --git a/src/app/utils/directive/iframe-tracker/iframe-tracker.directive.spec.ts b/src/app/utils/directives/iframe-tracker/iframe-tracker.directive.spec.ts similarity index 100% rename from src/app/utils/directive/iframe-tracker/iframe-tracker.directive.spec.ts rename to src/app/utils/directives/iframe-tracker/iframe-tracker.directive.spec.ts diff --git a/src/app/utils/directive/iframe-tracker/iframe-tracker.directive.ts b/src/app/utils/directives/iframe-tracker/iframe-tracker.directive.ts similarity index 100% rename from src/app/utils/directive/iframe-tracker/iframe-tracker.directive.ts rename to src/app/utils/directives/iframe-tracker/iframe-tracker.directive.ts diff --git a/src/app/utils/interfaces/advert.ts b/src/app/utils/interfaces/advert.ts new file mode 100644 index 0000000..9d30000 --- /dev/null +++ b/src/app/utils/interfaces/advert.ts @@ -0,0 +1,13 @@ +export interface Advert +{ + _id: string, + advertiser: string, + images: { + url: string, + description: string, + }[] + text: string, + subjectTarget: any[] + seen: number, + date: Date, +} diff --git a/src/app/utils/services/fictitiousDatas/fictitious-datas.service.ts b/src/app/utils/services/fictitiousDatas/fictitious-datas.service.ts index 253e1ea..7ff256e 100644 --- a/src/app/utils/services/fictitiousDatas/fictitious-datas.service.ts +++ b/src/app/utils/services/fictitiousDatas/fictitious-datas.service.ts @@ -1,6 +1,7 @@ import { Injectable } from '@angular/core'; import {Video} from "../../interfaces/video"; import {Playlist} from "../../interfaces/playlist"; +import {Advert} from "../../interfaces/advert"; @Injectable({ providedIn: 'root' @@ -53,4 +54,22 @@ export class FictitiousDatasService return tabTabPlaylist } + + getAdvert(): Advert + { + return { + _id: "monId", + advertiser: "nutella", + images: [ + { url: "nutella_v_1.jpeg", description: "image nutella 1" }, + { url: "nutella_v_2.png", description: "image nutella 2" }, + { url: "nutella_v_3.jpg", description: "image nutella 3" } + ], + text: "Voici du bon nutella", + subjectTarget: [], + seen: 4, + date: new Date(), + } + } + } diff --git a/src/app/utils/services/theme/theme.service.spec.ts b/src/app/utils/services/theme/theme.service.spec.ts new file mode 100644 index 0000000..1c2957b --- /dev/null +++ b/src/app/utils/services/theme/theme.service.spec.ts @@ -0,0 +1,16 @@ +import { TestBed } from '@angular/core/testing'; + +import { ThemeService } from './theme.service'; + +describe('ThemeService', () => { + let service: ThemeService; + + beforeEach(() => { + TestBed.configureTestingModule({}); + service = TestBed.inject(ThemeService); + }); + + it('should be created', () => { + expect(service).toBeTruthy(); + }); +}); diff --git a/src/app/utils/services/theme/theme.service.ts b/src/app/utils/services/theme/theme.service.ts new file mode 100644 index 0000000..bc69016 --- /dev/null +++ b/src/app/utils/services/theme/theme.service.ts @@ -0,0 +1,15 @@ +import { Injectable } from '@angular/core'; + +@Injectable({ + providedIn: 'root' +}) +export class ThemeService +{ + isLightTheme = true; + + getClassTheme(): string + { + if(this.isLightTheme) return "lightTheme" ; + else return "darkTheme" + } +} diff --git a/src/assets/pub/nutella.png b/src/assets/pub/nutella.png deleted file mode 100644 index 88cc9ef..0000000 Binary files a/src/assets/pub/nutella.png and /dev/null differ diff --git a/src/assets/pub/nutella_v_1.jpeg b/src/assets/pub/nutella_v_1.jpeg new file mode 100644 index 0000000..05b7ebe Binary files /dev/null and b/src/assets/pub/nutella_v_1.jpeg differ diff --git a/src/assets/pub/nutella_v_2.png b/src/assets/pub/nutella_v_2.png new file mode 100644 index 0000000..c733397 Binary files /dev/null and b/src/assets/pub/nutella_v_2.png differ diff --git a/src/assets/pub/nutella_v_3.jpg b/src/assets/pub/nutella_v_3.jpg new file mode 100644 index 0000000..30f767a Binary files /dev/null and b/src/assets/pub/nutella_v_3.jpg differ diff --git a/src/assets/svg.txt b/src/assets/svg.txt new file mode 100644 index 0000000..14f70fb --- /dev/null +++ b/src/assets/svg.txt @@ -0,0 +1,79 @@ +
+ + +
+ +
+ + + + +
+ + +
+
+ +
+
+ + + + +
+ + +
+
+   + +
+
+ + +
+
+ +   + + image + +   + +
+
+ + +
+ +
+ +
+ + + + +
+
+ +
+
+ +
+ + + + + +
+ diff --git a/src/styles.scss b/src/styles.scss index 0bc8fb0..10814a8 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -1,8 +1,19 @@ @import "~@angular/material/prebuilt-themes/indigo-pink.css"; --root { - --main-color: #939; + --dark-color: #f0f0f0; } - html, body { height: 100%; } body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; } + +.lightTheme { + background-color: white; + font-color: black; + border-color: black; +} + +.darkTheme { + background-color: #323232; + font-color: white; + border-color: white; +}