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,40 +1,26 @@
-
 <div class="signin-form text-center">
   <main class="form-signin">
     <form (ngSubmit)="onSubmit(signinForm)" #signinForm="ngForm">
+      <div class="connexion">
       <div class="form-floating">
-                <input type="email"
+        <input type="email" class="form-control" id="floatingInput" placeholder="" name="email" ngModel required
-                        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"
+        <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>
       </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>
 

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>
+<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-meteo></app-meteo>
+

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

@@ -1,7 +1,5 @@
-
-
 a.hover {
-    color :rgb(219, 200, 28)
+  color: rgb(219, 200, 28);
 }
 
 a {
@@ -16,7 +14,12 @@ div {
   // background-image: url("../../../assets/images/404.jpg");
   // 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
+  );
 }
-