page d'accueil
This commit is contained in:
Blandine Bajard
parent
52ff29ca30
commit
0633d6ae6d
File diff suppressed because it is too large
Load Diff
|
|
@ -1 +1,7 @@
|
|||
<p>meteo works!</p>
|
||||
<div class="meteo">
|
||||
<input type="text" id="ville">
|
||||
<label for="ville">Entrez votre code postal</label>
|
||||
<button id="meteo-button">Ok !</button>
|
||||
<iframe id="widget_autocomplete_preview" width="150" height="300" frameborder="0"
|
||||
src="https://meteofrance.com/widget/prevision/751010"> </iframe>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,45 +1,31 @@
|
|||
|
||||
<div class="signin-form text-center">
|
||||
<main class="form-signin">
|
||||
<form (ngSubmit)="onSubmit(signinForm)" #signinForm="ngForm">
|
||||
<div class="form-floating">
|
||||
<input type="email"
|
||||
class="form-control"
|
||||
id="floatingInput"
|
||||
placeholder=""
|
||||
name="email"
|
||||
ngModel
|
||||
required
|
||||
[ngClass]="{'is-valid': signinForm.form.touched && signinForm.form.value['email'] != '' ,
|
||||
<main class="form-signin">
|
||||
<form (ngSubmit)="onSubmit(signinForm)" #signinForm="ngForm">
|
||||
<div class="connexion">
|
||||
<div class="form-floating">
|
||||
<input type="email" class="form-control" id="floatingInput" placeholder="" name="email" ngModel required
|
||||
[ngClass]="{'is-valid': signinForm.form.touched && signinForm.form.value['email'] != '' ,
|
||||
'is-invalid': signinForm.form.touched && signinForm.form.value['email'] == ''}">
|
||||
<label for="floatingInput">Adresse email</label>
|
||||
</div>
|
||||
<div class="form-floating">
|
||||
<input type="password"
|
||||
class="form-control"
|
||||
id="floatingPassword"
|
||||
placeholder=""
|
||||
name="password"
|
||||
ngModel
|
||||
required
|
||||
[ngClass]="{'is-valid': signinForm.form.touched && signinForm.form.value['password'] != '' ,
|
||||
<label for="floatingInput">Adresse email</label>
|
||||
</div>
|
||||
<div class="form-floating">
|
||||
<input type="password" class="form-control" id="floatingPassword" placeholder="" name="password" ngModel
|
||||
required [ngClass]="{'is-valid': signinForm.form.touched && signinForm.form.value['password'] != '' ,
|
||||
'is-invalid': signinForm.form.touched && signinForm.form.value['password'] == ''}">
|
||||
<label for="floatingPassword">Mot de passe</label>
|
||||
</div>
|
||||
<label for="floatingPassword">Mot de passe</label>
|
||||
</div>
|
||||
|
||||
<button class="w-100 btn btn-lg btn-outline-success"
|
||||
type="submit"
|
||||
[disabled]="signinForm.invalid">Se connecter</button>
|
||||
|
||||
|
||||
<button class="w-100 btn btn-lg btn-outline-success"
|
||||
routerLink="../creation-compte" routerLinkActive="active-custom"
|
||||
>S'inscrire</button>
|
||||
|
||||
</form>
|
||||
|
||||
<div *ngIf="errorForm">
|
||||
<p class="text-danger">Il manque des informations dans le formulaire...</p>
|
||||
</div>
|
||||
</main>
|
||||
<button class="w-100 btn btn-lg btn-outline-success" type="submit" [disabled]="signinForm.invalid">Se
|
||||
connecter</button>
|
||||
</div>
|
||||
|
||||
<button class="w-100 btn btn-lg btn-outline-success" routerLink="../creation-compte"
|
||||
routerLinkActive="active-custom">S'inscrire</button>
|
||||
|
||||
</form>
|
||||
|
||||
<div *ngIf="errorForm">
|
||||
<p class="text-danger">Il manque des informations dans le formulaire...</p>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
.signin-form {
|
||||
height: 100vh;
|
||||
padding-top: 40px;
|
||||
background-color: #f5f5f5;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.form-signin {
|
||||
|
|
@ -10,10 +10,13 @@
|
|||
margin-top: 50px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
border: solid 1px;
|
||||
}
|
||||
|
||||
.connexion {
|
||||
border: solid 4px;
|
||||
border-radius: 10px;
|
||||
background-color: #fcddec;
|
||||
border-color: #ef5da8;
|
||||
background-color: #ffff;
|
||||
border-color: #5d5fef;
|
||||
}
|
||||
|
||||
.form-floating:focus-within {
|
||||
|
|
@ -22,11 +25,14 @@
|
|||
|
||||
input[type="email"] {
|
||||
margin-bottom: -1px;
|
||||
margin-right: 50px;
|
||||
padding-right: 10px;
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
input[type="password"] {
|
||||
padding-right: 10px;
|
||||
margin-bottom: 10px;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
|
|
@ -35,6 +41,6 @@ input[type="password"] {
|
|||
margin-top: 10px;
|
||||
margin-bottom: 5px;
|
||||
background-color: #ffff;
|
||||
color: #ef5da8 !important;
|
||||
border-color: #ef5da8 !important;
|
||||
color: #5d5fef !important;
|
||||
border-color: #5d5fef !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,2 +1,22 @@
|
|||
<app-header></app-header>
|
||||
<body>
|
||||
<div class="bienvenue">
|
||||
<h2 class="titre">BIENVENUE</h2>
|
||||
<p>
|
||||
Notre service vous offre des outils et des fonctionnalités pour vous aider à gérer la charge mentale de votre foyer.
|
||||
<p>Réunis à un seul endroit pour toute la famille, vous pourrez faire des suggestions de menus, gérer un répertoire de
|
||||
contacts utiles et établir des to-dot-list communes.</p>
|
||||
<p>Plus de conflit, plus d’excuse de pas avoir su ou de ne pas avoir
|
||||
lu, nous sommes là pour vous aider !</p>
|
||||
|
||||
</div>
|
||||
<div class="connexion">
|
||||
<app-signin></app-signin>
|
||||
</div>
|
||||
<div class="pub">
|
||||
<img src="../../../assets/images/menu.png" />
|
||||
<img src="../../../assets/images/repertoire.png" />
|
||||
<img src="../../../assets/images/todo.png" />
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,39 @@
|
|||
.bienvenue {
|
||||
float: left;
|
||||
display: inline;
|
||||
border: 4px solid #5d5fef;
|
||||
border-radius: 10px;
|
||||
margin-top: 50px;
|
||||
margin-left: 200px;
|
||||
padding-right: 10px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.titre {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1em;
|
||||
line-height: 2em;
|
||||
}
|
||||
.connexion {
|
||||
float: right;
|
||||
display: inline;
|
||||
margin-top: -40px;
|
||||
margin-right: 200px;
|
||||
}
|
||||
|
||||
.pub {
|
||||
padding-top: 100px;
|
||||
padding-right: 100px;
|
||||
padding-left: 200px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
img {
|
||||
border: 1px solid #d3d3d3;
|
||||
border-radius: 10px;
|
||||
box-shadow: 6px 6px #d3d3d3;
|
||||
}
|
||||
|
|
@ -1,2 +1,4 @@
|
|||
<app-header></app-header>
|
||||
<app-side-bar></app-side-bar>
|
||||
<app-meteo></app-meteo>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,22 +1,25 @@
|
|||
|
||||
|
||||
a.hover {
|
||||
color :rgb(219, 200, 28)
|
||||
color: rgb(219, 200, 28);
|
||||
}
|
||||
|
||||
a {
|
||||
color: rgb(32, 114, 45);
|
||||
color: rgb(32, 114, 45);
|
||||
}
|
||||
|
||||
div {
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
|
||||
// si on préfère une image en fond
|
||||
// background-image: url("../../../assets/images/404.jpg");
|
||||
// background-size: cover;
|
||||
|
||||
background-image: linear-gradient(to left top, #051937, #004d7a, #008793, #e2ebe7, #f8faf5);
|
||||
// si on préfère une image en fond
|
||||
// background-image: url("../../../assets/images/404.jpg");
|
||||
// background-size: cover;
|
||||
|
||||
background-image: linear-gradient(
|
||||
to left top,
|
||||
#051937,
|
||||
#004d7a,
|
||||
#008793,
|
||||
#e2ebe7,
|
||||
#f8faf5
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
Loading…
Reference in New Issue