diff --git a/src/app/pages/login-form/login-form.component.ts b/src/app/pages/login-form/login-form.component.ts index 299922c..9ccb887 100644 --- a/src/app/pages/login-form/login-form.component.ts +++ b/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 { 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 5c46368..4e29ce0 100644 --- a/src/app/pages/menu/menu-nav/menu-nav.component.css +++ b/src/app/pages/menu/menu-nav/menu-nav.component.css @@ -1,29 +1,21 @@ .hamburger-btn { - width: 50px; - height: 50px; + align-self: flex-start; + width: 44px; + height: 44px; + border-radius: 14px; + background: white; 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); - + box-shadow: 0 2px 10px rgba(180, 80, 80, 0.12); 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 */ - 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); + &:active { + transform: scale(0.94); + box-shadow: 0 1px 5px rgba(180, 80, 80, 0.1); + } } \ 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 index 5c46368..4e29ce0 100644 --- a/src/app/pages/menu/menu-param/menu-param.component.css +++ b/src/app/pages/menu/menu-param/menu-param.component.css @@ -1,29 +1,21 @@ .hamburger-btn { - width: 50px; - height: 50px; + align-self: flex-start; + width: 44px; + height: 44px; + border-radius: 14px; + background: white; 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); - + box-shadow: 0 2px 10px rgba(180, 80, 80, 0.12); 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 */ - 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); + &:active { + transform: scale(0.94); + box-shadow: 0 1px 5px rgba(180, 80, 80, 0.1); + } } \ No newline at end of file diff --git a/src/app/pages/menu/menu/menu.component.css b/src/app/pages/menu/menu/menu.component.css index fa4f0c3..6d8b420 100644 --- a/src/app/pages/menu/menu/menu.component.css +++ b/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 { 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 7983543..c627fcc 100644 --- a/src/app/pages/messages/messages-main/messages-main.component.css +++ b/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 { 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 0386d64..a93f441 100644 --- a/src/app/pages/messages/messages-main/messages-main.component.html +++ b/src/app/pages/messages/messages-main/messages-main.component.html @@ -1,10 +1,8 @@
-
+
-
- -
+
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 5c46368..4e29ce0 100644 --- a/src/app/pages/messages/messages-menu/messages-menu.component.css +++ b/src/app/pages/messages/messages-menu/messages-menu.component.css @@ -1,29 +1,21 @@ .hamburger-btn { - width: 50px; - height: 50px; + align-self: flex-start; + width: 44px; + height: 44px; + border-radius: 14px; + background: white; 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); - + box-shadow: 0 2px 10px rgba(180, 80, 80, 0.12); 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 */ - 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); + &:active { + transform: scale(0.94); + box-shadow: 0 1px 5px rgba(180, 80, 80, 0.1); + } } \ No newline at end of file diff --git a/src/app/pages/parameters/parameters-coordinates/parameters-coordinates.component.css b/src/app/pages/parameters/parameters-coordinates/parameters-coordinates.component.css index 33c1651..5fcd403 100644 --- a/src/app/pages/parameters/parameters-coordinates/parameters-coordinates.component.css +++ b/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%); - box-shadow: 0 4px 24px rgba(200, 120, 100, 0.12); - transition: transform 0.15s ease, box-shadow 0.15s ease; + background: #fce8e8; + box-shadow: + 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); - box-shadow: 0 6px 28px rgba(200, 120, 100, 0.2); + background: #ffebeb; + 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; + } } \ No newline at end of file diff --git a/src/app/pages/parameters/parameters-main/parameters-main.component.css b/src/app/pages/parameters/parameters-main/parameters-main.component.css index 2563490..43363be 100644 --- a/src/app/pages/parameters/parameters-main/parameters-main.component.css +++ b/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; } \ No newline at end of file diff --git a/src/app/pages/parameters/parameters-profile/parameters-profile.component.css b/src/app/pages/parameters/parameters-profile/parameters-profile.component.css index e69de29..88660c5 100644 --- a/src/app/pages/parameters/parameters-profile/parameters-profile.component.css +++ b/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); + } +} \ No newline at end of file diff --git a/src/app/pages/parameters/parameters-profile/parameters-profile.component.html b/src/app/pages/parameters/parameters-profile/parameters-profile.component.html index a193c3f..61d6c09 100644 --- a/src/app/pages/parameters/parameters-profile/parameters-profile.component.html +++ b/src/app/pages/parameters/parameters-profile/parameters-profile.component.html @@ -1 +1,68 @@ -

parameters-profile works!

+
+
+ + +
+
+ Photo de profil + + + + +
+ + + +
+ + +
+ + {{ username() }} + + + + + +
+ + +
+ + {{ bio() }} + + + + + +
+ +
+
+ diff --git a/src/app/pages/parameters/parameters-profile/parameters-profile.component.ts b/src/app/pages/parameters/parameters-profile/parameters-profile.component.ts index 81f0f22..1b46cc9 100644 --- a/src/app/pages/parameters/parameters-profile/parameters-profile.component.ts +++ b/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(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); + } } diff --git a/src/app/pages/register-form/register-form.component.ts b/src/app/pages/register-form/register-form.component.ts index 352db4f..c569a74 100644 --- a/src/app/pages/register-form/register-form.component.ts +++ b/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 diff --git a/src/styles.css b/src/styles.css index 90d4ee0..a734224 100644 --- a/src/styles.css +++ b/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; + } +}