kai/pingu-concerts
1
0
Fork 0
Code Issues 10 Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add travel and concert streak patches

Browse Source
This commit is contained in:
kai
2026-08-28 13:58:41 +02:00
parent 2080c5c971
commit f05bae9ab1
2 changed files with 107 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/templates/profile.html
+21 -12
View File
@@ -26,6 +26,10 @@
.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-categories { display:grid; gap:10px; }
.patch-category { padding:10px 12px; background:rgba(5,5,5,.55); border:1px solid #44403c; border-radius:10px; }
.patch-category > summary { color:#fca5a5; cursor:pointer; font-weight:700; }
.patch-category .patch-grid { margin-top:14px; }
.patch-grid { display: flex; flex-wrap: wrap; gap: 14px; justify-content: flex-start; align-items: flex-start; }
.patch { padding: 5px; display: grid; place-items: center; text-align: center; background: #242424; border: 2px dashed #78716c; border-radius: 9px; color: #f8fafc; }
.patch-image-frame { width: fit-content; height: fit-content; }
@@ -122,22 +126,27 @@
</section>
<section class="badges-card">
<h2>🥋 Virtuelle Kutte</h2>
<p>Deine freigeschalteten Patches. Besuchs-Patches werden jeweils durch die höchste Stufe ersetzt.</p>
<p>Deine freigeschalteten Patches nach Kategorien. 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 {% if badge.image_path %}patch-image-frame{% else %}patch-icon-frame{% endif %}" title="{{ badge.name }} – {{ badge.description }}" aria-label="{{ badge.name }}: {{ 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 %}
<div class="patch-categories">
{% for group in badge_groups %}
<details class="patch-category">
<summary>{{ group.label }} · {{ group.badges|length }}</summary>
<div class="patch-grid">
{% for badge in group.badges %}
<div class="patch earned {% if badge.image_path %}patch-image-frame{% else %}patch-icon-frame{% endif %}" title="{{ badge.name }} – {{ badge.description }}" aria-label="{{ badge.name }}: {{ 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 %}
</div>
{% endfor %}
</div>
{% endif %}
</details>
{% endfor %}
{% if not profile.earned_codes %}
{% if not badge_groups %}
<p>Noch keine Patches – dein erstes Konzert wartet!</p>
{% endif %}
</div>