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"
|
class="nav-link"
|
||||||
routerLink="/matches"
|
routerLink="/matches"
|
||||||
routerLinkActive="active-link"
|
routerLinkActive="active-link"
|
||||||
[routerLinkActiveOptions]="{ exact: isHomeActiveBool() }"
|
|
||||||
[class.active-link]="isHomeActive()"
|
|
||||||
>
|
>
|
||||||
Matchs
|
Matchs
|
||||||
</a>
|
</a>
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue