shosho996
ff75c8ce2f
User Profile info, no game before login/register, menu bar --------- Co-authored-by: Lala, Shahd <Shahd.Lala@sybit.de> Co-authored-by: shahdlala66 <shahd.lala66@gmail.com> Reviewed-on: #2
98 lines
3.6 KiB
HTML
98 lines
3.6 KiB
HTML
<div class="cityscape-shell" [class.sunset]="isSunsetMode">
|
|
|
|
<div class="scene">
|
|
<div class="sky">
|
|
<div class="stars-layer">
|
|
<div class="star" *ngFor="let star of stars" [ngStyle]="star.style"></div>
|
|
</div>
|
|
<div class="sun"></div>
|
|
<div class="cloud-wrap">
|
|
<div class="cloud cloud-a"></div>
|
|
<div class="cloud cloud-b"></div>
|
|
<div class="cloud cloud-c"></div>
|
|
<div class="cloud cloud-d"></div>
|
|
<div class="cloud cloud-e"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-layer">
|
|
<div class="bg-bldg" *ngFor="let building of bgBuildings" [ngStyle]="building.style"></div>
|
|
</div>
|
|
|
|
<div class="main-layer">
|
|
<div class="profile-building-container">
|
|
@if (currentUser; as user) {
|
|
<!-- Player Building with Info Inside -->
|
|
<div class="building-wrapper">
|
|
<div class="building-structure">
|
|
<!-- Building top -->
|
|
<div class="building-top"></div>
|
|
|
|
<!-- Building main section with user inside -->
|
|
<div class="building-main">
|
|
<!-- Left side windows -->
|
|
<div class="building-side left-side">
|
|
<div class="window"></div>
|
|
<div class="window"></div>
|
|
<div class="window"></div>
|
|
<div class="window"></div>
|
|
</div>
|
|
|
|
<!-- Center section - User Info -->
|
|
<div class="building-center">
|
|
<div class="player-display-window">
|
|
<div class="player-avatar">👤</div>
|
|
<div class="player-name" (click)="copyUsername(user.username)" [class.copied]="usernameCopied" title="Click to copy">{{ user.username }}</div>
|
|
<div class="player-id-label">PLAYER ID</div>
|
|
<div class="player-id-value" (click)="copyPlayerId(user.id)" [class.copied]="idCopied" title="Click to copy">{{ user.id }}</div>
|
|
@if (idCopied) {
|
|
<div class="copy-notification">✓ COPIED</div>
|
|
}
|
|
@if (usernameCopied) {
|
|
<div class="copy-notification">✓ COPIED</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right side windows -->
|
|
<div class="building-side right-side">
|
|
<div class="window"></div>
|
|
<div class="window"></div>
|
|
<div class="window"></div>
|
|
<div class="window"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Building base with stats -->
|
|
<div class="building-base">
|
|
<div class="stat-panel">
|
|
<div class="stat">
|
|
<span class="stat-label">RATING</span>
|
|
<span class="stat-value">{{ user.rating }}</span>
|
|
</div>
|
|
<div class="stat-divider"></div>
|
|
<div class="stat">
|
|
<span class="stat-label">MEMBER SINCE</span>
|
|
<span class="stat-value">{{ user.createdAt | date: 'MMM dd, yyyy' }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Building door -->
|
|
<div class="building-door">
|
|
<div class="door-handle"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Back button -->
|
|
<button type="button" class="back-btn" (click)="goBack()">← BACK</button>
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="haze"></div>
|
|
<div class="ground"></div>
|
|
</div>
|
|
</div>
|