page d'accueil

src/app/components/meteo/meteo.component.html

@@ -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>

src/app/components/signin/signin.component.html

@@ -1,45 +1,31 @@
-
 <div class="signin-form text-center">
-    <main class="form-signin">
+  <main class="form-signin">
-        <form (ngSubmit)="onSubmit(signinForm)" #signinForm="ngForm">
+    <form (ngSubmit)="onSubmit(signinForm)" #signinForm="ngForm">
-            <div class="form-floating">
+      <div class="connexion">
-                <input type="email"
+      <div class="form-floating">
-                        class="form-control"
+        <input type="email" class="form-control" id="floatingInput" placeholder="" name="email" ngModel required
-                        id="floatingInput"
+          [ngClass]="{'is-valid': signinForm.form.touched && signinForm.form.value['email'] != '' ,
-                        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>
+        <label for="floatingInput">Adresse email</label>
-            </div>
+      </div>
-            <div class="form-floating">
+      <div class="form-floating">
-                <input type="password"
+        <input type="password" class="form-control" id="floatingPassword" placeholder="" name="password" ngModel
-                        class="form-control"
+          required [ngClass]="{'is-valid': signinForm.form.touched && signinForm.form.value['password'] != '' ,
-                        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>
+        <label for="floatingPassword">Mot de passe</label>
-            </div>
+      </div>
 
-            <button class="w-100 btn btn-lg btn-outline-success"
+      <button class="w-100 btn btn-lg btn-outline-success" type="submit" [disabled]="signinForm.invalid">Se
-                    type="submit"
+        connecter</button>
-                    [disabled]="signinForm.invalid">Se connecter</button>
+</div>
-
+
-
+      <button class="w-100 btn btn-lg btn-outline-success" routerLink="../creation-compte"
-            <button class="w-100 btn btn-lg btn-outline-success"
+        routerLinkActive="active-custom">S'inscrire</button>
-            routerLink="../creation-compte" routerLinkActive="active-custom"
+
-            >S'inscrire</button>
+    </form>
-
+
-        </form>
+    <div *ngIf="errorForm">
-
+      <p class="text-danger">Il manque des informations dans le formulaire...</p>
-        <div *ngIf="errorForm">
+    </div>
-            <p class="text-danger">Il manque des informations dans le formulaire...</p>
+  </main>
-        </div>
-    </main>
 </div>

src/app/components/signin/signin.component.scss

@@ -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;
+  background-color: #ffff;
-  border-color: #ef5da8;
+  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;
+  color: #5d5fef !important;
-  border-color: #ef5da8 !important;
+  border-color: #5d5fef !important;
 }

src/app/pages/page-accueil/page-accueil.component.html

@@ -1,2 +1,22 @@
 <app-header></app-header>
-<app-signin></app-signin>
+<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>

src/app/pages/page-accueil/page-accueil.component.scss

@@ -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;
+}

src/app/pages/page-dashboard/page-dashboard.component.html

@@ -1,2 +1,4 @@
 <app-header></app-header>
-<app-side-bar></app-side-bar>
+<app-side-bar></app-side-bar>
+<app-meteo></app-meteo>
+

src/app/pages/page-not-found/page-not-found.component.scss

@@ -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 { 
+div {
-    text-align: center;
+  text-align: center;
-    font-weight: bold;
+  font-weight: bold;
 
-// si on préfère une image en fond
+  // si on préfère une image en fond
-// background-image: url("../../../assets/images/404.jpg");
+  // background-image: url("../../../assets/images/404.jpg");
-// background-size: cover;
+  // background-size: cover;
-
-background-image: linear-gradient(to left top, #051937, #004d7a, #008793, #e2ebe7, #f8faf5);
 
+  background-image: linear-gradient(
+    to left top,
+    #051937,
+    #004d7a,
+    #008793,
+    #e2ebe7,
+    #f8faf5
+  );
 }
-