Merge remote-tracking branch 'origin/develop' into develop

src/app/app.routes.ts

@@ -24,10 +24,10 @@ export const routes: Routes = [
                 loadComponent: () => import('./pages/menu/menu/menu.component').then(x => x.Menu)
             },
 
-            /*{
+            {
                 path:'parameters',
-                loadComponent: () => import('./pages/parameters/parameters.component').then(x => x.Parameters)
+                loadComponent: () => import('./pages/parameters/parameters-main/parameters-main.component').then(x => x.ParametersMain)
-            }*/
+            }
         ]
     },
     {

src/app/pages/login-form/login-form.component.css

@@ -1,3 +1,85 @@
-ion-card{
+.bg {
+    --background: linear-gradient(180deg, #e6dede, #e58a8a);
+}
+
+.container {
+    text-align: center;
+    padding-top: 60px;
+}
+
+.logo-box {
+    width: 90px;
+    height: 90px;
+    margin: 0 auto 10px;
+    border-radius: 20px;
+    background: #f2eaea;
+    display: flex;
+    align-items: center;
     justify-content: center;
+
+    box-shadow: 8px 8px 15px #d1bcbc,
+    -8px -8px 15px #ffffff;
+
+    img {
+        width: 50px;
+    }
+}
+
+h1 {
+    color: #b86b6b;
+    margin-bottom: 30px;
+}
+
+.card {
+    width: 85%;
+    max-width: 320px;
+    margin: auto;
+    padding: 25px;
+    border-radius: 20px;
+    background: #f2eaea;
+
+    box-shadow: 10px 10px 20px #cfaeae,
+    -10px -10px 20px #ffffff;
+
+    h3 {
+        color: #c27a7a;
+        margin-bottom: 20px;
+        font-weight: normal;
+    }
+}
+
+.input {
+    margin: 10px 0;
+    border-radius: 20px;
+
+    --background: #f2eaea;
+    --padding-start: 15px;
+
+    box-shadow: inset 5px 5px 10px #d1bcbc,
+    inset -5px -5px 10px #ffffff;
+
+    ion-input {
+        color: #a35c5c;
+    }
+}
+
+.btn {
+    margin-top: 15px;
+    --background: #b86b6b;
+    --border-radius: 20px;
+
+    box-shadow: 5px 5px 10px #a45f5f,
+    -5px -5px 10px #ff9c9c;
+}
+
+.signup {
+    margin-top: 20px;
+    color: white;
+    font-size: 14px;
+
+    a {
+        color: white;
+        font-weight: bold;
+        text-decoration: underline;
+    }
 }

src/app/pages/login-form/login-form.component.html

@@ -1,17 +1,36 @@
-<ion-card>
+<ion-content [fullscreen]="true" class="bg">
-    <ion-card-header>
-        <ion-card-title>Connectez-vous à Knots !</ion-card-title><br><br>
-    </ion-card-header>
 
-    <ion-card-content>
+    <div class="container">
-        Login
-        <br>
-        <input type="text">
-        <br>
-        Mot de Passe
-        <br>
-        <input type="password">
-    </ion-card-content><br>
 
-    <ion-button fill="clear">Se connecter</ion-button>
+        <div class="logo-box">
-</ion-card>
+            <img src="assets/icon/logo.png" alt="logo">
+        </div>
+
+        <h1>Knots</h1>
+
+        <div class="card">
+
+            <h3>Connectez-vous à Knots !</h3>
+
+            <ion-item lines="none" class="input">
+                <ion-input placeholder="Login..."></ion-input>
+            </ion-item>
+
+            <ion-item lines="none" class="input">
+                <ion-input type="password" placeholder="Password..."></ion-input>
+            </ion-item>
+
+            <ion-button expand="block" class="btn">
+                Se connecter
+            </ion-button>
+
+        </div>
+
+        <div class="signup">
+            Vous êtes nouveau ?<br>
+            <a href="#">Créez vous un compte ici</a>
+        </div>
+
+    </div>
+
+</ion-content>

src/app/pages/login-form/login-form.component.ts

@@ -4,7 +4,7 @@ import {
   IonCard,
   IonCardContent,
   IonCardHeader,
-  IonCardTitle,
+  IonCardTitle, IonContent, IonInput, IonItem, NavController,
 } from '@ionic/angular/standalone';
 import {CommonModule} from "@angular/common";
 import {FormBuilder, ReactiveFormsModule, Validators} from "@angular/forms";
@@ -15,13 +15,14 @@ import {LoginService} from "../../login.service";
   selector: 'login-form',
   templateUrl: 'login-form.component.html',
   styleUrls: ['login-form.component.css'],
-  imports: [IonButton, IonCard, IonCardContent, IonCardHeader, IonCardTitle, CommonModule, ReactiveFormsModule,],
+  imports: [IonButton, IonCard, IonCardContent, IonCardHeader, IonCardTitle, CommonModule, ReactiveFormsModule, IonItem, IonInput, IonContent,],
 })
 export class LoginFormComponent {
 
   private fb = inject(FormBuilder);
   private loginService = inject(LoginService);
   private router = inject(Router);
+  private navCtrl = inject(NavController);
 
   isLoading = false;
 
@@ -30,8 +31,11 @@ export class LoginFormComponent {
     password: ['', [Validators.required]]
   });
 
-  submitForm(): void {
+  async submitForm(): Promise<void> {
     if (this.loginForm.valid) {
+
+      await this.navCtrl.navigateRoot(['main/messages']);
+
       this.isLoading = true;
 
       const request = {

src/app/pages/menu/menu-nav/menu-nav.component.css

@@ -0,0 +1,29 @@
+.hamburger-btn {
+    width: 50px;
+    height: 50px;
+    border: none;
+    cursor: pointer;
+    border-radius: 17px;
+
+    /* Dégradé radial depuis le coin supérieur gauche pour l'effet "glow" */
+    background: radial-gradient(ellipse at 30% 30%, #fff 0%, #f9ece9 60%, #f3d4cc 100%);
+
+    /* Légère ombre rosée */
+    box-shadow: 0 4px 24px rgba(200, 120, 100, 0.13);
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    /* Transitions pour l'hover */
+    transition: transform 0.15s ease, box-shadow 0.15s ease;
+}
+
+.hamburger-btn:hover {
+    transform: scale(1.04);
+    box-shadow: 0 6px 28px rgba(200, 120, 100, 0.2);
+}
+
+.hamburger-btn:active {
+    transform: scale(0.97);
+}

src/app/pages/menu/menu-param/menu-param.component.css

@@ -0,0 +1,29 @@
+.hamburger-btn {
+    width: 50px;
+    height: 50px;
+    border: none;
+    cursor: pointer;
+    border-radius: 17px;
+
+    /* Dégradé radial depuis le coin supérieur gauche pour l'effet "glow" */
+    background: radial-gradient(ellipse at 30% 30%, #fff 0%, #f9ece9 60%, #f3d4cc 100%);
+
+    /* Légère ombre rosée */
+    box-shadow: 0 4px 24px rgba(200, 120, 100, 0.13);
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    /* Transitions pour l'hover */
+    transition: transform 0.15s ease, box-shadow 0.15s ease;
+}
+
+.hamburger-btn:hover {
+    transform: scale(1.04);
+    box-shadow: 0 6px 28px rgba(200, 120, 100, 0.2);
+}
+
+.hamburger-btn:active {
+    transform: scale(0.97);
+}

src/app/pages/menu/menu-param/menu-param.component.html

@@ -0,0 +1,9 @@
+<button class="hamburger-btn" (click)="openParam()">
+    <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="35" height="35" viewBox="0,0,256,256">
+        <g fill-opacity="0.81176" fill="#bd5a5a" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal">
+            <g transform="scale(5.12,5.12)">
+                <path d="M47.16,21.221l-5.91,-0.966c-0.346,-1.186 -0.819,-2.326 -1.411,-3.405l3.45,-4.917c0.279,-0.397 0.231,-0.938 -0.112,-1.282l-3.889,-3.887c-0.347,-0.346 -0.893,-0.391 -1.291,-0.104l-4.843,3.481c-1.089,-0.602 -2.239,-1.08 -3.432,-1.427l-1.031,-5.886c-0.084,-0.478 -0.499,-0.828 -0.985,-0.828h-5.5c-0.49,0 -0.908,0.355 -0.987,0.839l-0.956,5.854c-1.2,0.345 -2.352,0.818 -3.437,1.412l-4.83,-3.45c-0.399,-0.285 -0.942,-0.239 -1.289,0.106l-3.887,3.887c-0.343,0.343 -0.391,0.883 -0.112,1.28l3.399,4.863c-0.605,1.095 -1.087,2.254 -1.438,3.46l-5.831,0.971c-0.482,0.08 -0.836,0.498 -0.836,0.986v5.5c0,0.485 0.348,0.9 0.825,0.985l5.831,1.034c0.349,1.203 0.831,2.362 1.438,3.46l-3.441,4.813c-0.284,0.397 -0.239,0.942 0.106,1.289l3.888,3.891c0.343,0.343 0.884,0.391 1.281,0.112l4.87,-3.411c1.093,0.601 2.248,1.078 3.445,1.424l0.976,5.861c0.079,0.481 0.496,0.834 0.985,0.834h5.5c0.485,0 0.9,-0.348 0.984,-0.825l1.045,-5.89c1.199,-0.353 2.348,-0.833 3.43,-1.435l4.905,3.441c0.398,0.281 0.938,0.232 1.282,-0.111l3.888,-3.891c0.346,-0.347 0.391,-0.894 0.104,-1.292l-3.498,-4.857c0.593,-1.08 1.064,-2.222 1.407,-3.408l5.918,-1.039c0.479,-0.084 0.827,-0.5 0.827,-0.985v-5.5c0.001,-0.49 -0.354,-0.908 -0.838,-0.987zM25,32c-3.866,0 -7,-3.134 -7,-7c0,-3.866 3.134,-7 7,-7c3.866,0 7,3.134 7,7c0,3.866 -3.134,7 -7,7z"></path>
+            </g>
+        </g>
+    </svg>
+</button>

src/app/pages/menu/menu-param/menu-param.component.ts

@@ -0,0 +1,17 @@
+import {Component, inject} from '@angular/core';
+import {Router} from "@angular/router";
+
+@Component({
+  selector: 'app-menu-param',
+  imports: [],
+  templateUrl: './menu-param.component.html',
+  styleUrl: './menu-param.component.css'
+})
+export class MenuParamComponent {
+
+  private router = inject(Router)
+
+  openParam() {
+    this.router.navigate(['/main/parameters']);
+  }
+}

src/app/pages/menu/menu/menu.component.css

@@ -0,0 +1,16 @@
+.page-menu {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    background: radial-gradient(ellipse at 50% 5%, #fff8f7 0%, #fde0db 45%, #dea09a 100%);
+    padding: 26px;
+    gap: 12px;
+}
+
+.header {
+    display: flex;
+}
+
+.param {
+    align-items: flex-end;
+}

src/app/pages/menu/menu/menu.component.html

@@ -1 +1,6 @@
-<app-menu-nav/>
+<div class="page-menu">
+    <div class="header">
+        <app-menu-nav/>
+        <app-menu-param/>
+    </div>
+</div>

src/app/pages/menu/menu/menu.component.ts

@@ -1,10 +1,12 @@
 import { Component } from '@angular/core';
 import {MenuNav} from "../menu-nav/menu-nav.component";
+import {MenuParamComponent} from "../menu-param/menu-param.component";
 
 @Component({
   selector: 'app-menu',
   imports: [
-    MenuNav
+    MenuNav,
+    MenuParamComponent
   ],
   templateUrl: './menu.component.html',
   styleUrl: './menu.component.css'

src/app/pages/messages/messages-infouser/messages-infouser.component.css

@@ -2,7 +2,7 @@
     display: flex;
     align-items: center;
     gap: 14px;
-    padding: 10px 24px 10px 10px;
+    padding: 7px 130px 7px 5px;
     border: none;
     cursor: pointer;
     border-radius: 50px;
@@ -21,8 +21,8 @@
 }
 
 .profile-btn .icon-wrapper {
-    width: 48px;
+    width: 40px;
-    height: 48px;
+    height: 40px;
     border-radius: 50%;
     background-color: #c07070;
     display: flex;

src/app/pages/messages/messages-main/messages-main.component.css

@@ -10,7 +10,7 @@
 .topbar {
     display: flex;
     align-items: center;
-    gap: 10px;
+    gap: 30px;
 }
 
 .messages {
@@ -52,8 +52,12 @@
     align-self: flex-end;
 }
 
+.message.sent {
+    align-self: flex-end;
+}
+
 .message.sent p {
-    background: radial-gradient(ellipse at 70% 30%, #fff 0%, #f9ece9 80%);
+    background: radial-gradient(ellipse at 30% 40%, #fff 0%, #f9ece9 60%, #f3d4cc 100%);
 }
 
 .bottombar {

src/app/pages/messages/messages-main/messages-main.component.html

@@ -2,13 +2,19 @@
 
     <div class="topbar">
         <app-messages-menu/>
-        <app-messages-infouser/>
+        <div class="param">
+            <app-messages-infouser/>
+        </div>
     </div>
 
     <div class="messages">
         <div class="message received">
             <p>Salut, comment tu vas ?</p>
-            <span class="timestamp">15:33, Aujd.</span>
+            <span class="timestamp">15:33, Hier.</span>
+        </div>
+        <div class="message sent">
+            <p>ça va</p>
+            <span class="timestamp">11:25, Aujd.</span>
         </div>
     </div>
 

src/app/pages/messages/messages-menu/messages-menu.component.css

@@ -1,9 +1,9 @@
 .hamburger-btn {
-    width: 60px;
+    width: 50px;
-    height: 60px;
+    height: 50px;
     border: none;
     cursor: pointer;
-    border-radius: 22px;
+    border-radius: 17px;
 
     /* Dégradé radial depuis le coin supérieur gauche pour l'effet "glow" */
     background: radial-gradient(ellipse at 30% 30%, #fff 0%, #f9ece9 60%, #f3d4cc 100%);

src/app/pages/messages/messages-send/messages-send.component.html

@@ -7,7 +7,6 @@
     <button type="submit" class="send-btn">
         <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
             <path d="M5 12L3 3L21 12L3 21L5 12Z" fill="#b05050"/>
-            <path d="M5 12H21" stroke="#b05050" stroke-width="2" stroke-linecap="round"/>
         </svg>
     </button>
 </form>

src/app/pages/parameters/parameters-exit/parameters-exit.component.html

@@ -0,0 +1,10 @@
+<button class="hamburger-btn" (click)="exitParam()">
+    <svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+         width="64.000000pt" height="64.000000pt" viewBox="0 0 64.000000 64.000000"
+         preserveAspectRatio="xMidYMid meet">
+
+        <g transform="translate(0.000000,64.000000) scale(0.100000,-0.100000)"
+           fill="#000000" stroke="none">
+        </g>
+    </svg>
+</button>

src/app/pages/parameters/parameters-exit/parameters-exit.component.ts

@@ -0,0 +1,17 @@
+import {Component, inject} from '@angular/core';
+import {Router} from "@angular/router";
+
+@Component({
+  selector: 'app-parameters-exit',
+  imports: [],
+  templateUrl: './parameters-exit.component.html',
+  styleUrl: './parameters-exit.component.css'
+})
+export class ParametersExit {
+
+  private router = inject(Router)
+
+  exitParam() {
+    this.router.navigate(['/main/menu']);
+  }
+}

src/app/pages/parameters/parameters-main/parameters-main.component.css

@@ -0,0 +1,8 @@
+.page-param {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    background: radial-gradient(ellipse at 50% 5%, #fff8f7 0%, #fde0db 45%, #dea09a 100%);
+    padding: 16px;
+    gap: 12px;
+}

src/app/pages/parameters/parameters-main/parameters-main.component.html

@@ -0,0 +1,5 @@
+<div class="page-param" >
+    <app-parameters-exit/>
+    <p>Paramètres !</p>
+
+</div>

src/app/pages/parameters/parameters-main/parameters-main.component.ts

@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+import {ParametersExit} from "../parameters-exit/parameters-exit.component";
+
+@Component({
+  selector: 'app-parameters-main',
+  imports: [
+    ParametersExit
+  ],
+  templateUrl: './parameters-main.component.html',
+  styleUrl: './parameters-main.component.css'
+})
+export class ParametersMain {
+
+}