parent
5c986142c5
commit
a3a0135cdc
@ -1,10 +0,0 @@
|
|||||||
body{
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
height: 100vh;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
main {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
@ -0,0 +1,15 @@
|
|||||||
|
body.light-theme {
|
||||||
|
background-color: #ffffff;
|
||||||
|
color: #000000;
|
||||||
|
/* Autres styles pour le thème clair */
|
||||||
|
}
|
||||||
|
|
||||||
|
body.dark-theme {
|
||||||
|
background-color: #333333;
|
||||||
|
color: #ffffff;
|
||||||
|
/* Autres styles pour le thème sombre */
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
flex: 1;
|
||||||
|
}
|
@ -1,10 +1,24 @@
|
|||||||
import { Component } from '@angular/core';
|
import { Component, OnInit } from '@angular/core';
|
||||||
import { TranslateService } from '@ngx-translate/core';
|
import { ThemeService } from './services/theme.service';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-root',
|
selector: 'app-root',
|
||||||
templateUrl: './app.component.html',
|
templateUrl: './app.component.html',
|
||||||
styleUrls: ['./app.component.css']
|
styleUrls: ['./app.component.scss']
|
||||||
})
|
})
|
||||||
export class AppComponent {
|
|
||||||
|
export class AppComponent implements OnInit {
|
||||||
|
themeClass = 'light-theme';
|
||||||
|
|
||||||
|
constructor(private themeService: ThemeService) {}
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
this.themeService.isDarkTheme.subscribe((isDark) => {
|
||||||
|
this.themeClass = isDark ? 'dark-theme' : 'light-theme';
|
||||||
|
console.log('Theme class updated:', this.themeClass);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
toggleTheme() {
|
||||||
|
this.themeService.toggleDarkTheme();
|
||||||
|
}
|
||||||
}
|
}
|
@ -1,12 +1,12 @@
|
|||||||
import { Component, OnInit } from '@angular/core';
|
import { Component, OnInit } from '@angular/core';
|
||||||
import {BreakpointObserver, Breakpoints} from '@angular/cdk/layout';
|
import {BreakpointObserver, Breakpoints} from '@angular/cdk/layout';
|
||||||
import {Router} from "@angular/router";
|
import {Router} from "@angular/router";
|
||||||
import { TranslationService } from '../service/translation.service';
|
import { TranslationService } from '../../services/translation.service';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-header',
|
selector: 'app-header',
|
||||||
templateUrl: './header.component.html',
|
templateUrl: './header.component.html',
|
||||||
styleUrls: ['./header.component.css']
|
styleUrls: ['./header.component.scss']
|
||||||
})
|
})
|
||||||
export class HeaderComponent implements OnInit {
|
export class HeaderComponent implements OnInit {
|
||||||
title!: string;
|
title!: string;
|
@ -0,0 +1,11 @@
|
|||||||
|
<div class="landing-block">
|
||||||
|
<div class="hero-container">
|
||||||
|
<h2 class="hero-title">{{ 'LandingPage.Welcome' | translate}}</h2>
|
||||||
|
<span class="hero-text">{{ 'LandingPage.Description' | translate}}</span>
|
||||||
|
</div>
|
||||||
|
<div class="landing-links">
|
||||||
|
<div class="button-container">
|
||||||
|
<a class="animated-button" (click)="onContinue()">{{ 'LandingPage.Try' | translate}}</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
@ -0,0 +1,16 @@
|
|||||||
|
import { Injectable } from '@angular/core';
|
||||||
|
import { HttpClient } from '@angular/common/http';
|
||||||
|
import { Observable } from 'rxjs';
|
||||||
|
|
||||||
|
@Injectable({
|
||||||
|
providedIn: 'root',
|
||||||
|
})
|
||||||
|
export class CodeExecutionService {
|
||||||
|
private apiUrl = 'http://localhost:3000'; // Url du serveur Node.js en local
|
||||||
|
|
||||||
|
constructor(private http: HttpClient) {}
|
||||||
|
|
||||||
|
executeCode(code: string): Observable<any> {
|
||||||
|
return this.http.post<any>(this.apiUrl, { code });
|
||||||
|
}
|
||||||
|
}
|
@ -0,0 +1,15 @@
|
|||||||
|
import { Injectable } from '@angular/core';
|
||||||
|
import { BehaviorSubject } from 'rxjs';
|
||||||
|
|
||||||
|
@Injectable({
|
||||||
|
providedIn: 'root',
|
||||||
|
})
|
||||||
|
export class ThemeService {
|
||||||
|
private _darkTheme = new BehaviorSubject<boolean>(false);
|
||||||
|
isDarkTheme = this._darkTheme.asObservable();
|
||||||
|
|
||||||
|
toggleDarkTheme() {
|
||||||
|
this._darkTheme.next(!this._darkTheme.value);
|
||||||
|
console.log('Theme toggled');
|
||||||
|
}
|
||||||
|
}
|
Before Width: | Height: | Size: 948 B |
Loading…
Reference in new issue