This commit is contained in:
ExostFlash 2025-06-02 16:57:44 +02:00
parent d56d17724a
commit 4d2d6608e7
4 changed files with 51 additions and 26 deletions

View file

@ -17,8 +17,6 @@
class="nav-link" class="nav-link"
routerLink="/matches" routerLink="/matches"
routerLinkActive="active-link" routerLinkActive="active-link"
[routerLinkActiveOptions]="{ exact: isHomeActiveBool() }"
[class.active-link]="isHomeActive()"
> >
Matchs Matchs
</a> </a>

View file

@ -12,11 +12,11 @@ export class HeaderComponent {
constructor(private router: Router, public authService: AuthService) {} constructor(private router: Router, public authService: AuthService) {}
isHomeActive(): boolean { isHomeActive(): boolean {
return this.router.url === '/' || this.router.url === '/list'; return this.router.url === '/' || this.router.url === '/home';
} }
isHomeActiveBool(): boolean { isHomeActiveBool(): boolean {
if (this.router.url != '/list') { if (this.router.url != '/home') {
return true; return true;
} else { } else {
return false; return false;

View file

@ -1,15 +1,8 @@
body {
margin: 0;
font-family: 'Segoe UI', sans-serif;
background: linear-gradient(to bottom, #235d4f, #63b48c);
color: #fff;
}
.login-container { .login-container {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
min-height: 100vh; min-height: 25vh;
padding: 2rem; padding: 2rem;
} }
@ -22,13 +15,43 @@ body {
color: #333; color: #333;
} }
.login-header-img {
position: absolute;
height: inherit;
width: 100%;
background-color: rgba(0, 0, 0, 0.25);
top: 0;
left: 0;
}
.login-header { .login-header {
background: url('https://www.lejdd.fr/lmnr/var/jdd/public/media/image/2022/07/19/12/escrime-comment-les-francais-apprivoisent-leurs-armes.jpg?VersionId=Mw31AogdDUwVLuCaVdxMozm9kito7TTP') no-repeat center/cover; background: url("https://www.lejdd.fr/lmnr/var/jdd/public/media/image/2022/07/19/12/escrime-comment-les-francais-apprivoisent-leurs-armes.jpg?VersionId=Mw31AogdDUwVLuCaVdxMozm9kito7TTP")
text-align: center; no-repeat center/cover;
padding: 2rem 1rem; position: relative;
padding: 4rem 1rem;
display: flex;
justify-content: center;
align-items: center;
min-height: 300px;
color: white; color: white;
} }
.login-header::before {
content: "";
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.3); /* voile sombre */
backdrop-filter: blur(2px); /* effet de flou */
z-index: 1;
border-radius: 0.5rem;
}
.login-header h1 {
position: relative;
z-index: 2;
padding: 2rem;
}
.login-header h2 { .login-header h2 {
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }

View file

@ -1,25 +1,29 @@
<div class="login-container"> <div class="login-container">
<div class="login-card"> <div class="login-card">
<div class="login-header"> <div class="login-header">
<h2>Bienvenue sur le site</h2> <h1>Connexion au compte</h1>
<p>Suivez les matchs d'escrime en direct, de n'importe où !</p>
</div> </div>
<form (ngSubmit)="onSubmit()" class="login-form"> <form (ngSubmit)="onSubmit()" class="login-form">
<h3>Connexion au compte</h3>
<div class="input-group"> <div class="input-group">
<span class="icon">👤</span> <span class="icon">👤</span>
<input type="email" name="email" [(ngModel)]="email" placeholder="Nom utilisateur" required /> <input
type="email"
name="email"
[(ngModel)]="email"
placeholder="Nom utilisateur"
required
/>
</div> </div>
<div class="input-group"> <div class="input-group">
<span class="icon">🔒</span> <span class="icon">🔒</span>
<input type="password" name="password" [(ngModel)]="password" placeholder="Mot de passe" required /> <input
</div> type="password"
name="password"
<div class="options"> [(ngModel)]="password"
<label><input type="checkbox" /> Se souvenir</label> placeholder="Mot de passe"
<a href="#">Mot de passe oublié ?</a> required
/>
</div> </div>
<button type="submit" class="login-btn">Connexion</button> <button type="submit" class="login-btn">Connexion</button>