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"
routerLink="/matches"
routerLinkActive="active-link"
[routerLinkActiveOptions]="{ exact: isHomeActiveBool() }"
[class.active-link]="isHomeActive()"
>
Matchs
</a>

View file

@ -12,11 +12,11 @@ export class HeaderComponent {
constructor(private router: Router, public authService: AuthService) {}
isHomeActive(): boolean {
return this.router.url === '/' || this.router.url === '/list';
return this.router.url === '/' || this.router.url === '/home';
}
isHomeActiveBool(): boolean {
if (this.router.url != '/list') {
if (this.router.url != '/home') {
return true;
} else {
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 {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
min-height: 25vh;
padding: 2rem;
}
@ -22,13 +15,43 @@ body {
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 {
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;
text-align: center;
padding: 2rem 1rem;
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;
position: relative;
padding: 4rem 1rem;
display: flex;
justify-content: center;
align-items: center;
min-height: 300px;
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 {
margin-bottom: 0.5rem;
}

View file

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