diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts index 7e15a08..5a0bf56 100644 --- a/src/app/app.routes.ts +++ b/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) + } ] }, { diff --git a/src/app/pages/menu/menu-nav/menu-nav.component.css b/src/app/pages/menu/menu-nav/menu-nav.component.css index e69de29..5c46368 100644 --- a/src/app/pages/menu/menu-nav/menu-nav.component.css +++ b/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); +} \ No newline at end of file diff --git a/src/app/pages/menu/menu-param/menu-param.component.css b/src/app/pages/menu/menu-param/menu-param.component.css new file mode 100644 index 0000000..5c46368 --- /dev/null +++ b/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); +} \ No newline at end of file diff --git a/src/app/pages/menu/menu-param/menu-param.component.html b/src/app/pages/menu/menu-param/menu-param.component.html new file mode 100644 index 0000000..bb01d46 --- /dev/null +++ b/src/app/pages/menu/menu-param/menu-param.component.html @@ -0,0 +1,9 @@ + diff --git a/src/app/pages/menu/menu-param/menu-param.component.ts b/src/app/pages/menu/menu-param/menu-param.component.ts new file mode 100644 index 0000000..f90692b --- /dev/null +++ b/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']); + } +} diff --git a/src/app/pages/menu/menu/menu.component.css b/src/app/pages/menu/menu/menu.component.css index e69de29..fa4f0c3 100644 --- a/src/app/pages/menu/menu/menu.component.css +++ b/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; +} \ No newline at end of file diff --git a/src/app/pages/menu/menu/menu.component.html b/src/app/pages/menu/menu/menu.component.html index 1eb8760..f1a634e 100644 --- a/src/app/pages/menu/menu/menu.component.html +++ b/src/app/pages/menu/menu/menu.component.html @@ -1 +1,6 @@ - + \ No newline at end of file diff --git a/src/app/pages/menu/menu/menu.component.ts b/src/app/pages/menu/menu/menu.component.ts index 310166b..ab3dc87 100644 --- a/src/app/pages/menu/menu/menu.component.ts +++ b/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' diff --git a/src/app/pages/messages/messages-infouser/messages-infouser.component.css b/src/app/pages/messages/messages-infouser/messages-infouser.component.css index 2739be2..bf9091e 100644 --- a/src/app/pages/messages/messages-infouser/messages-infouser.component.css +++ b/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; - height: 48px; + width: 40px; + height: 40px; border-radius: 50%; background-color: #c07070; display: flex; diff --git a/src/app/pages/messages/messages-main/messages-main.component.css b/src/app/pages/messages/messages-main/messages-main.component.css index 4f74afd..7983543 100644 --- a/src/app/pages/messages/messages-main/messages-main.component.css +++ b/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 { diff --git a/src/app/pages/messages/messages-main/messages-main.component.html b/src/app/pages/messages/messages-main/messages-main.component.html index f12dfd8..0386d64 100644 --- a/src/app/pages/messages/messages-main/messages-main.component.html +++ b/src/app/pages/messages/messages-main/messages-main.component.html @@ -2,13 +2,19 @@
- +
+ +

Salut, comment tu vas ?

- 15:33, Aujd. + 15:33, Hier. +
+
+

ça va

+ 11:25, Aujd.
diff --git a/src/app/pages/messages/messages-menu/messages-menu.component.css b/src/app/pages/messages/messages-menu/messages-menu.component.css index 53ded45..5c46368 100644 --- a/src/app/pages/messages/messages-menu/messages-menu.component.css +++ b/src/app/pages/messages/messages-menu/messages-menu.component.css @@ -1,9 +1,9 @@ .hamburger-btn { - width: 60px; - height: 60px; + width: 50px; + 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%); diff --git a/src/app/pages/messages/messages-send/messages-send.component.html b/src/app/pages/messages/messages-send/messages-send.component.html index 13a2b9a..afe2540 100644 --- a/src/app/pages/messages/messages-send/messages-send.component.html +++ b/src/app/pages/messages/messages-send/messages-send.component.html @@ -7,7 +7,6 @@ \ No newline at end of file diff --git a/src/app/pages/parameters/parameters-exit/parameters-exit.component.css b/src/app/pages/parameters/parameters-exit/parameters-exit.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/pages/parameters/parameters-exit/parameters-exit.component.html b/src/app/pages/parameters/parameters-exit/parameters-exit.component.html new file mode 100644 index 0000000..5e4044a --- /dev/null +++ b/src/app/pages/parameters/parameters-exit/parameters-exit.component.html @@ -0,0 +1,10 @@ + diff --git a/src/app/pages/parameters/parameters-exit/parameters-exit.component.ts b/src/app/pages/parameters/parameters-exit/parameters-exit.component.ts new file mode 100644 index 0000000..18c8f3b --- /dev/null +++ b/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']); + } +} diff --git a/src/app/pages/parameters/parameters-main/parameters-main.component.css b/src/app/pages/parameters/parameters-main/parameters-main.component.css new file mode 100644 index 0000000..2563490 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/src/app/pages/parameters/parameters-main/parameters-main.component.html b/src/app/pages/parameters/parameters-main/parameters-main.component.html new file mode 100644 index 0000000..be36ab7 --- /dev/null +++ b/src/app/pages/parameters/parameters-main/parameters-main.component.html @@ -0,0 +1,5 @@ +
+ +

Paramètres !

+ +
\ No newline at end of file diff --git a/src/app/pages/parameters/parameters-main/parameters-main.component.ts b/src/app/pages/parameters/parameters-main/parameters-main.component.ts new file mode 100644 index 0000000..c7d4dd0 --- /dev/null +++ b/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 { + +}