Kutten Test

app/templates/profile.html

@@ -22,6 +22,7 @@
         .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); }
@@ -57,16 +58,26 @@
         </section>
         <section class="badges-card">
             <h2>🥋 Virtuelle Kutte</h2>
-            <p>Für besuchte Konzerte schaltest du neue Patches frei.</p>
+            <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 %}
-                        <div class="patch {% if badge.earned %}earned{% else %}locked{% endif %}" title="{{ badge.description }}">
-                            <span class="patch-icon">{{ badge.icon }}</span>
-                            <strong>{{ badge.name }}</strong>
-                            <small>{% if badge.earned %}Freigeschaltet{% else %}ab {{ badge.threshold }} Konzerten{% endif %}</small>
-                        </div>
+                        {% 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>