Modif
This commit is contained in:
parent
d56d17724a
commit
4d2d6608e7
4 changed files with 51 additions and 26 deletions
|
|
@ -17,8 +17,6 @@
|
|||
class="nav-link"
|
||||
routerLink="/matches"
|
||||
routerLinkActive="active-link"
|
||||
[routerLinkActiveOptions]="{ exact: isHomeActiveBool() }"
|
||||
[class.active-link]="isHomeActive()"
|
||||
>
|
||||
Matchs
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue