avancement boutons pages

2026-05-05 12:00:31 +02:00
parent 90f49b2d81
commit 49135e764d
14 changed files with 526 additions and 96 deletions
@@ -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>
+