100 lines
5.6 KiB
HTML
100 lines
5.6 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>{{ profile.display_name }} · Pingu Concerts</title>
|
||
<link rel="stylesheet" href="/static/css/style.css">
|
||
<style>
|
||
.profile-layout { display: grid; grid-template-columns: minmax(240px, .8fr) minmax(0, 1.4fr); gap: 24px; align-items: start; }
|
||
.profile-card, .badges-card, .profile-edit { padding: 24px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; }
|
||
.profile-card { text-align: center; }
|
||
.avatar, .avatar-fallback { width: 132px; height: 132px; margin: 0 auto 16px; border-radius: 50%; border: 3px solid var(--accent); object-fit: cover; }
|
||
.avatar-fallback { display: grid; place-items: center; background: #283048; font-size: 3rem; font-weight: 800; }
|
||
.profile-name { margin: 0; font-size: 1.7rem; }
|
||
.profile-handle, .profile-since { color: var(--muted); margin: 6px 0 0; }
|
||
.stat { margin-top: 22px; padding: 16px; background: #0f1420; border-radius: 12px; }
|
||
.stat strong { display: block; color: #c4b5fd; font-size: 2.2rem; }
|
||
.kutte { position: relative; min-height: 320px; padding: 58px 36px 28px; background: linear-gradient(90deg, #151515 0 46%, #222 46% 54%, #151515 54%); border: 4px solid #353535; border-radius: 28px 28px 14px 14px; box-shadow: inset 0 0 0 2px #090909; }
|
||
.kutte::before, .kutte::after { content: ""; position: absolute; top: 0; width: 30%; height: 62px; background: #111; border-bottom: 3px solid #404040; }
|
||
.kutte::before { left: 0; border-radius: 24px 0 45% 0; }
|
||
.kutte::after { right: 0; border-radius: 0 24px 0 45%; }
|
||
.patch-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(105px, 1fr)); gap: 14px; }
|
||
.patch { min-height: 94px; padding: 10px 7px; display: grid; place-items: center; align-content: center; gap: 4px; text-align: center; background: #242424; border: 2px dashed #78716c; border-radius: 9px; color: #f8fafc; }
|
||
.patch-icon { font-size: 1.6rem; }
|
||
.patch-image { width: 58px; height: 58px; object-fit: contain; }
|
||
.patch small { color: #d1d5db; }
|
||
.patch.locked { opacity: .38; filter: grayscale(1); }
|
||
.patch.earned { border-style: solid; border-color: #a78bfa; box-shadow: 0 0 12px rgba(167, 139, 250, .35); }
|
||
.profile-edit { margin-top: 24px; }
|
||
.profile-edit form { margin: 0; max-width: none; }
|
||
.profile-edit input { margin-bottom: 14px; }
|
||
@media (max-width: 720px) { .profile-layout { grid-template-columns: 1fr; } .kutte { padding-left: 20px; padding-right: 20px; } }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<header>
|
||
<div class="header-inner">
|
||
<a href="/" class="logo">🎸 Pingu <span>Concerts</span></a>
|
||
<a href="/profile">Mein Profil</a>
|
||
</div>
|
||
</header>
|
||
<main>
|
||
<div class="page-title">
|
||
<h1>Profil</h1>
|
||
<p>Deine Konzertgeschichte und deine Kutte.</p>
|
||
</div>
|
||
<div class="profile-layout">
|
||
<section class="profile-card">
|
||
{% if profile.avatar_path %}
|
||
<img class="avatar" src="{{ profile.avatar_path }}" alt="Profilbild von {{ profile.display_name }}">
|
||
{% else %}
|
||
<div class="avatar-fallback" aria-label="Kein Profilbild">{{ profile.display_name[:1] }}</div>
|
||
{% endif %}
|
||
<h2 class="profile-name">{{ profile.display_name }}</h2>
|
||
<p class="profile-handle">@{{ profile.username }}</p>
|
||
<p class="profile-since">Dabei seit {{ profile.created_at }}</p>
|
||
<div class="stat"><strong>{{ attended_count }}</strong>besuchte Konzerte</div>
|
||
</section>
|
||
<section class="badges-card">
|
||
<h2>🥋 Virtuelle Kutte</h2>
|
||
<p>Deine freigeschalteten Patches. Besuchs-Patches werden jeweils durch die höchste Stufe ersetzt.</p>
|
||
<div class="kutte">
|
||
<div class="patch-grid">
|
||
{% for badge in badges %}
|
||
{% if badge.earned %}
|
||
<div class="patch earned" title="{{ badge.description }}">
|
||
{% if badge.image_path %}
|
||
<img class="patch-image" src="{{ badge.image_path }}" alt="Patch {{ badge.name }}">
|
||
{% else %}
|
||
<span class="patch-icon">{{ badge.icon }}</span>
|
||
{% endif %}
|
||
<strong>{{ badge.name }}</strong>
|
||
<small>Freigeschaltet</small>
|
||
</div>
|
||
{% endif %}
|
||
{% endfor %}
|
||
|
||
{% if not profile.earned_codes %}
|
||
<p>Noch keine Patches – dein erstes Konzert wartet!</p>
|
||
{% endif %}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
{% if is_own_profile %}
|
||
<section class="profile-edit">
|
||
<h2>Profil bearbeiten</h2>
|
||
<form method="post" action="/profile" enctype="multipart/form-data">
|
||
<label for="display-name">Anzeigename</label>
|
||
<input id="display-name" name="display_name" type="text" value="{{ profile.display_name }}" maxlength="100">
|
||
<label for="avatar">Profilbild</label>
|
||
<input id="avatar" name="avatar" type="file" accept="image/jpeg,image/png,image/webp">
|
||
<button class="button" type="submit">Profil speichern</button>
|
||
</form>
|
||
</section>
|
||
{% endif %}
|
||
</main>
|
||
</body>
|
||
</html>
|