avancement boutons pages

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

@@ -15,7 +15,7 @@ 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, IonItem, IonInput, IonContent,],
+  imports: [IonButton, CommonModule, ReactiveFormsModule, IonItem, IonInput, IonContent,],
 })
 export class LoginFormComponent {
 

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

@@ -1,29 +1,21 @@
 .hamburger-btn {
-    width: 50px;
+    align-self: flex-start;
-    height: 50px;
+    width: 44px;
+    height: 44px;
+    border-radius: 14px;
+    background: white;
     border: none;
-    cursor: pointer;
+    box-shadow: 0 2px 10px rgba(180, 80, 80, 0.12);
-    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;
+    color: rosybrown;
+    cursor: pointer;
+    margin-bottom: 28px;
+    transition: box-shadow 0.2s, transform 0.15s;
 
-    /* Transitions pour l'hover */
+    &:active {
-    transition: transform 0.15s ease, box-shadow 0.15s ease;
+        transform: scale(0.94);
-}
+        box-shadow: 0 1px 5px rgba(180, 80, 80, 0.1);
-
+    }
-.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

@@ -1,29 +1,21 @@
 .hamburger-btn {
-    width: 50px;
+    align-self: flex-start;
-    height: 50px;
+    width: 44px;
+    height: 44px;
+    border-radius: 14px;
+    background: white;
     border: none;
-    cursor: pointer;
+    box-shadow: 0 2px 10px rgba(180, 80, 80, 0.12);
-    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;
+    color: rosybrown;
+    cursor: pointer;
+    margin-bottom: 28px;
+    transition: box-shadow 0.2s, transform 0.15s;
 
-    /* Transitions pour l'hover */
+    &:active {
-    transition: transform 0.15s ease, box-shadow 0.15s ease;
+        transform: scale(0.94);
-}
+        box-shadow: 0 1px 5px rgba(180, 80, 80, 0.1);
-
+    }
-.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/menu.component.css

@@ -2,13 +2,34 @@
     min-height: 100vh;
     display: flex;
     flex-direction: column;
-    background: radial-gradient(ellipse at 50% 5%, #fff8f7 0%, #fde0db 45%, #dea09a 100%);
+    background: linear-gradient(
+            160deg,
+            #f9e8e8 0%,
+            #f2c4c4 35%,
+            #e89898 70%,
+            #d97070 100%
+    );
     padding: 26px;
-    gap: 12px;
+    gap: 30px;
 }
 
 .header {
     display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 16px;
+}
+
+@media (min-width: 480px) {
+    .header {
+        padding: 0 24px;
+    }
+}
+
+@media (min-width: 768px) {
+    .header {
+        padding: 0 40px;
+    }
 }
 
 .param {

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

@@ -2,15 +2,34 @@
     min-height: 100vh;
     display: flex;
     flex-direction: column;
-    background: radial-gradient(ellipse at 50% 5%, #fff8f7 0%, #fde0db 45%, #dea09a 100%);
+    background: linear-gradient(
+            160deg,
+            #f9e8e8 0%,
+            #f2c4c4 35%,
+            #e89898 70%,
+            #d97070 100%
+    );
     padding: 16px;
     gap: 12px;
 }
 
-.topbar {
+.header {
     display: flex;
+    justify-content: space-between;
     align-items: center;
-    gap: 30px;
+    padding: 0 16px;
+}
+
+@media (min-width: 480px) {
+    .header {
+        padding: 0 24px;
+    }
+}
+
+@media (min-width: 768px) {
+    .header {
+        padding: 0 40px;
+    }
 }
 
 .messages {

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

@@ -1,11 +1,9 @@
 <div class="page-mess">
 
-    <div class="topbar">
+    <div class="header">
         <app-messages-menu/>
-        <div class="param">
         <app-messages-infouser/>
     </div>
-    </div>
 
     <div class="messages">
         <div class="message received">

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

@@ -1,29 +1,21 @@
 .hamburger-btn {
-    width: 50px;
+    align-self: flex-start;
-    height: 50px;
+    width: 44px;
+    height: 44px;
+    border-radius: 14px;
+    background: white;
     border: none;
-    cursor: pointer;
+    box-shadow: 0 2px 10px rgba(180, 80, 80, 0.12);
-    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;
+    color: rosybrown;
+    cursor: pointer;
+    margin-bottom: 28px;
+    transition: box-shadow 0.2s, transform 0.15s;
 
-    /* Transitions pour l'hover */
+    &:active {
-    transition: transform 0.15s ease, box-shadow 0.15s ease;
+        transform: scale(0.94);
-}
+        box-shadow: 0 1px 5px rgba(180, 80, 80, 0.1);
-
+    }
-.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/parameters/parameters-coordinates/parameters-coordinates.component.css

@@ -3,42 +3,91 @@
     align-items: center;
     gap: 14px;
     padding: 7px 105px 7px 5px;
-    border: none;
+    border: 1.5px solid rgba(201, 112, 112, 0.25);
     cursor: pointer;
     border-radius: 50px;
-    background: radial-gradient(ellipse at 30% 40%, #fff 0%, #f9ece9 60%, #f3d4cc 100%);
+    background: #fce8e8;
-    box-shadow: 0 4px 24px rgba(200, 120, 100, 0.12);
+    box-shadow:
-    transition: transform 0.15s ease, box-shadow 0.15s ease;
+            0 8px 32px rgba(180, 80, 80, 0.12),
+            0 2px 8px rgba(180, 80, 80, 0.08);
+    transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
+    font-family: 'Nunito', 'Segoe UI', sans-serif;
 }
 
 .coordinates-btn:hover {
-    transform: scale(1.02);
+    background: #ffebeb;
-    box-shadow: 0 6px 28px rgba(200, 120, 100, 0.2);
+    box-shadow: 0 6px 28px rgba(180, 80, 80, 0.18);
+    transform: translateY(-1px);
 }
 
 .coordinates-btn:active {
-    transform: scale(0.98);
+    transform: translateY(0);
 }
 
 .coordinates-btn .icon-wrapper {
     width: 40px;
     height: 40px;
     border-radius: 50%;
-    background-color: #c07070;
+    background-color: #f4cece;
     display: flex;
     align-items: center;
     justify-content: center;
+    flex-shrink: 0;
+    box-shadow: 0 4px 12px rgba(180, 80, 80, 0.2);
 }
 
 .coordinates-btn .icon-wrapper img {
     width: 28px;
     height: 28px;
-    filter: brightness(0) invert(1); /* rend l'icône blanche */
+    filter: brightness(0) invert(1);
 }
 
 .coordinates-btn .username {
-    font-size: 18px;
+    font-size: 14.5px;
     font-weight: 500;
-    color: #c07070;
+    color: #7a3a3a;
     white-space: nowrap;
 }
+
+@media (min-width: 480px) {
+    .coordinates-btn {
+        padding: 8px 120px 8px 6px;
+        gap: 16px;
+    }
+
+    .coordinates-btn .icon-wrapper {
+        width: 44px;
+        height: 44px;
+    }
+
+    .coordinates-btn .icon-wrapper img {
+        width: 30px;
+        height: 30px;
+    }
+
+    .coordinates-btn .username {
+        font-size: 15px;
+    }
+}
+
+@media (min-width: 768px) {
+    .coordinates-btn {
+        padding: 9px 140px 9px 7px;
+        gap: 18px;
+        border-radius: 50px;
+    }
+
+    .coordinates-btn .icon-wrapper {
+        width: 50px;
+        height: 50px;
+    }
+
+    .coordinates-btn .icon-wrapper img {
+        width: 32px;
+        height: 32px;
+    }
+
+    .coordinates-btn .username {
+        font-size: 16px;
+    }
+}

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

@@ -2,7 +2,13 @@
     min-height: 100vh;
     display: flex;
     flex-direction: column;
-    background: radial-gradient(ellipse at 50% 5%, #fff8f7 0%, #fde0db 45%, #dea09a 100%);
+    background: linear-gradient(
+            160deg,
+            #f9e8e8 0%,
+            #f2c4c4 35%,
+            #e89898 70%,
+            #d97070 100%
+    );
     padding: 16px;
     gap: 12px;
 }

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

@@ -0,0 +1,250 @@
+.card-wrapper {
+    display: flex;
+    align-items: flex-start;
+    justify-content: center;
+    min-height: 100vh;
+    padding: 60px 16px 24px;
+    font-family: 'Nunito', 'Segoe UI', sans-serif;
+    box-sizing: border-box;
+
+    @media (min-width: 480px) {
+        padding: 60px 24px 24px;
+    }
+
+    @media (min-width: 768px) {
+        padding: 80px 32px 32px;
+    }
+}
+
+.card {
+   background: #fff8f8;
+   border-radius: 20px;
+   padding: 28px 21px 28px;
+   width: 100%;
+   max-width: 340px;
+   box-shadow:
+           0 8px 32px rgba(180, 80, 80, 0.12),
+           0 2px 8px rgba(180, 80, 80, 0.08),
+           inset 0 0 0 1.5px rgba(255, 255, 255, 0.7);
+   display: flex;
+   flex-direction: column;
+   gap: 16px;
+
+    @media (min-width: 480px) {
+        padding: 28px 24px;
+        gap: 16px;
+    }
+
+    @media (min-width: 768px) {
+        max-width: 400px;
+        padding: 32px 28px;
+        border-radius: 24px;
+        gap: 18px;
+    }
+}
+
+.avatar-row {
+   display: flex;
+   align-items: center;
+   gap: 18px;
+   margin-bottom: 4px;
+    @media (min-width: 480px) {
+        gap: 18px;
+        margin-bottom: 4px;
+        flex-wrap: nowrap;
+    }
+
+}
+
+.avatar {
+    width: 80px;
+    height: 80px;
+    border-radius: 50%;
+    background: #c97878;
+    flex-shrink: 0;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 4px 12px rgba(180, 80, 80, 0.2);
+
+    @media (min-width: 480px) {
+        width: 80px;
+        height: 80px;
+    }
+
+    @media (min-width: 768px) {
+        width: 90px;
+        height: 90px;
+    }
+
+    img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+
+    svg {
+        width: 100%;
+        height: 100%;
+    }
+}
+
+.photo-btn {
+   background: radial-gradient(ellipse at 30% 40%, #fff 0%, #f9ece9 60%, #f3d4cc 100%);
+   box-shadow: 0 4px 24px rgba(200, 120, 100, 0.12);
+   color: #c97070;
+   border: 1.5px solid rgba(201, 112, 112, 0.25);
+   border-radius: 50px;
+   padding: 9px 16px;
+   font-size: 13px;
+   font-weight: 600;
+   font-family: inherit;
+   cursor: pointer;
+   transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
+   white-space: nowrap;
+   line-height: 1.2;
+
+    @media (min-width: 480px) {
+        padding: 9px 16px;
+        font-size: 13px;
+    }
+
+    @media (min-width: 768px) {
+        padding: 10px 18px;
+        font-size: 14px;
+    }
+
+
+
+    &:hover {
+       background: #f8d8d8;
+       box-shadow: 0 2px 8px rgba(180, 80, 80, 0.15);
+       transform: translateY(-1px);
+   }
+
+   &:active {
+       transform: translateY(0);
+   }
+}
+
+.field {
+   background: #fdf4f4;
+   border: 1.5px solid rgba(201, 112, 112, 0.15);
+   border-radius: 14px;
+   padding: 12px 14px;
+   display: flex;
+   align-items: flex-start;
+   gap: 8px;
+   position: relative;
+   transition: border-color 0.2s, box-shadow 0.2s;
+
+    @media (min-width: 480px) {
+        border-radius: 14px;
+        padding: 12px 14px;
+    }
+
+    @media (min-width: 768px) {
+        padding: 14px 16px;
+    }
+
+    &:hover {
+       border-color: rgba(201, 112, 112, 0.3);
+       box-shadow: 0 2px 8px rgba(180, 80, 80, 0.07);
+   }
+}
+
+.bio-field {
+    min-height: 90px;
+    align-items: flex-start;
+
+    @media (min-width: 480px) {
+        min-height: 90px;
+    }
+
+    @media (min-width: 768px) {
+        min-height: 110px;
+    }
+}
+
+.field-value {
+    flex: 1;
+    color: #7a3a3a;
+    font-size: 14.5px;
+    font-weight: 500;
+    line-height: 1.5;
+
+    @media (min-width: 480px) {
+        font-size: 14.5px;
+    }
+
+    @media (min-width: 768px) {
+        font-size: 15px;
+    }
+}
+
+.bio-value {
+    align-self: flex-start;
+}
+
+   .field-input {
+       flex: 1;
+       border: none;
+       outline: none;
+       background: transparent;
+       color: #7a3a3a;
+       font-size: 14.5px;
+       font-weight: 500;
+       font-family: inherit;
+       line-height: 1.5;
+       resize: none;
+       width: 100%;
+
+       @media (min-width: 480px) {
+           font-size: 14.5px;
+       }
+
+       @media (min-width: 768px) {
+           font-size: 15px;
+       }
+   }
+
+.bio-textarea {
+    min-height: 60px;
+    resize: none;
+}
+
+
+.edit-btn {
+   background: none;
+   border: none;
+   cursor: pointer;
+   color: #c97070;
+   padding: 2px;
+   flex-shrink: 0;
+   display: flex;
+   align-items: center;
+   justify-content: center;
+   opacity: 0.7;
+   transition: opacity 0.2s, transform 0.15s;
+
+    @media (min-width: 480px) {
+        min-width: unset;
+        min-height: unset;
+    }
+
+    svg {
+       width: 16px;
+       height: 16px;
+   }
+
+    @media (min-width: 768px) {
+        width: 17px;
+        height: 17px;
+    }
+
+    &:hover {
+       opacity: 1;
+       transform: scale(1.15);
+   }
+}

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

@@ -1 +1,68 @@
-<p>parameters-profile works!</p>
+<div class="card-wrapper">
+    <div class="card">
+
+        <!-- Avatar + Photo button -->
+        <div class="avatar-row">
+            <div class="avatar">
+                <img *ngIf="profileImage()" [src]="profileImage()" alt="Photo de profil" />
+                <svg *ngIf="!profileImage()" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <circle cx="40" cy="30" r="16" fill="rgba(255,255,255,0.55)" />
+                    <ellipse cx="40" cy="68" rx="26" ry="18" fill="rgba(255,255,255,0.55)" />
+                </svg>
+            </div>
+
+            <button class="photo-btn" (click)="triggerFileInput()">
+                Modifier la photo de profil
+            </button>
+            <input id="photoInput" type="file" accept="image/*" hidden (change)="onPhotoChange($event)" />
+        </div>
+
+        <!-- Username field -->
+        <div class="field">
+            <ng-container *ngIf="!editingUsername(); else editUsernameBlock">
+                <span class="field-value">{{ username() }}</span>
+            </ng-container>
+            <ng-template #editUsernameBlock>
+                <input
+                        class="field-input"
+                        [(ngModel)]="username"
+                        [ngModel]="username()"
+                        (ngModelChange)="username.set($event)"
+                        (blur)="toggleEditUsername()"
+                        (keydown.enter)="toggleEditUsername()"
+                        autofocus
+                />
+            </ng-template>
+            <button class="edit-btn" (click)="toggleEditUsername()" title="Modifier">
+                <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M13.5 3.5L16.5 6.5L7 16H4V13L13.5 3.5Z" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/>
+                    <path d="M11.5 5.5L14.5 8.5" stroke="currentColor" stroke-width="1.6"/>
+                </svg>
+            </button>
+        </div>
+
+        <!-- Bio field -->
+        <div class="field bio-field">
+            <ng-container *ngIf="!editingBio(); else editBioBlock">
+                <span class="field-value bio-value">{{ bio() }}</span>
+            </ng-container>
+            <ng-template #editBioBlock>
+        <textarea
+                class="field-input bio-textarea"
+                [value]="bio()"
+                (input)="bio.set($any($event.target).value)"
+                (blur)="toggleEditBio()"
+                autofocus
+        ></textarea>
+            </ng-template>
+            <button class="edit-btn" (click)="toggleEditBio()" title="Modifier">
+                <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M13.5 3.5L16.5 6.5L7 16H4V13L13.5 3.5Z" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/>
+                    <path d="M11.5 5.5L14.5 8.5" stroke="currentColor" stroke-width="1.6"/>
+                </svg>
+            </button>
+        </div>
+
+    </div>
+</div>
+

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

@@ -1,11 +1,45 @@
-import { Component } from '@angular/core';
+import {Component, signal} from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
 
 @Component({
   selector: 'app-parameters-profile',
-  imports: [],
+  imports: [FormsModule, CommonModule],
   templateUrl: './parameters-profile.component.html',
   styleUrl: './parameters-profile.component.css'
 })
 export class ParametersProfileComponent {
+  username = signal('Doggeybag');
+  bio = signal('Joueur Valorant');
+
+  editingUsername = signal(false);
+  editingBio = signal(false);
+
+  profileImage = signal<string | null>(null);
+
+  onPhotoChange(event: Event): void {
+    const input = event.target as HTMLInputElement;
+    if (input.files && input.files[0]) {
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        this.profileImage.set(e.target?.result as string);
+      };
+      reader.readAsDataURL(input.files[0]);
+    }
+  }
+
+  triggerFileInput(): void {
+    const input = document.getElementById('photoInput') as HTMLInputElement;
+    input?.click();
+  }
+
+  toggleEditUsername(): void {
+    this.editingUsername.update((v) => !v);
+  }
+
+  toggleEditBio(): void {
+    this.editingBio.update((v) => !v);
+  }
 
 }

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

@@ -13,11 +13,6 @@ import {Router} from "@angular/router";
   selector: 'app-register-form',
     imports: [
         IonButton,
-        IonCard,
-        IonCardContent,
-        IonCardHeader,
-        IonCardTitle,
-        IonCardSubtitle,
         IonInput,
         IonContent,
         IonItem

src/styles.css

@@ -1 +1,16 @@
 /* You can add global styles to this file, and also import other style files */
+
+.header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 16px;
+
+    @media (min-width: 480px) {
+        padding: 0 24px;
+    }
+
+    @media (min-width: 768px) {
+        padding: 0 40px;
+    }
+}