Files
pingu-concerts/app/templates/following.html
T
kai b2af866cf0 Add bilingual UI and improve event actions layout
Add persistent German/English switching, translated UI messages and English 12-hour times. Align desktop event actions while preserving mobile layouts and record bilingual project guidance.

Include pending diary deletion exclusions. Validate both languages with nine tests.
2026-09-14 15:31:56 +02:00

11 lines
3.1 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html><html lang="{{ language() }}"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>{{ _('Gefolgt · MetalCircle') }}</title><link rel="stylesheet" href="/static/css/style.css"><style>
.follow-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}.follow-card{padding:18px;background:var(--surface);border:1px solid var(--border);border-radius:12px}.follow-list{display:flex;flex-wrap:wrap;gap:8px;padding:0;list-style:none}.follow-list li{display:flex;align-items:center;gap:6px;padding:7px 10px;background:#171212;border:1px solid var(--border);border-radius:999px}.follow-list form{margin:0}.follow-remove{padding:0;color:#fca5a5;background:none;border:0;cursor:pointer;font-size:1rem}.follow-events{display:grid;gap:10px}.follow-event{display:block;padding:14px;background:#0b0b0b;border:1px solid var(--border);border-radius:10px}.follow-event:hover{border-color:#ef4444}.follow-reason{color:var(--muted);font-size:.82rem}
</style><link rel="stylesheet" href="/static/css/language.css">
</head><body><header><div class="header-inner"><a href="/" class="logo"><img class="brand-logo" src="/static/images/metalcircle-full.png" alt="MetalCircle"></a>{% include '_user_menu.html' %}</div> {% include '_language_switch.html' %}
</header><main>
<div class="page-title"><h1>{{ _('⭐ Gefolgt') }}</h1><p>{{ _('Bands, Locations und passende kommende Veranstaltungen.') }}</p></div>
<div class="follow-grid"><section class="follow-card"><h2>Bands</h2><ul class="follow-list">{% for band in followed_bands %}<li>{{ band.name }}<form method="post" action="/following/bands/remove"><input type="hidden" name="band_key" value="{{ band.key }}"><button class="follow-remove" type="submit" title="{{ _('Nicht mehr folgen') }}" aria-label="{{ band.name }} {{ _('nicht mehr folgen') }}">×</button></form></li>{% else %}<li>{{ _('Noch keine Band gefolgt.') }}</li>{% endfor %}</ul></section>
<section class="follow-card"><h2>{{ _('Locations') }}</h2><ul class="follow-list">{% for venue in followed_venues %}<li>{{ venue.name }}{% if venue.city %}, {{ venue.city }}{% endif %}<form method="post" action="/following/venues/remove"><input type="hidden" name="venue_id" value="{{ venue.id }}"><button class="follow-remove" type="submit" title="{{ _('Nicht mehr folgen') }}" aria-label="{{ venue.name }} {{ _('nicht mehr folgen') }}">×</button></form></li>{% else %}<li>{{ _('Noch keiner Location gefolgt.') }}</li>{% endfor %}</ul></section></div>
<section class="follow-card" style="margin-top:18px"><h2>{{ _('Kommende Treffer') }}</h2><div class="follow-events">{% for event in events %}<a class="follow-event" href="/concerts/{{ event.id }}"><strong>{{ event.artist }}</strong><br>{{ event.date }} · {{ event.time }}{% if event.venue %} · {{ event.venue }}{% endif %}<div class="follow-reason">{% if event.matched_band %}Band{% endif %}{% if event.matched_band and event.matched_venue %} {{ _('und') }} {% endif %}{% if event.matched_venue %}{{ _('Location') }}{% endif %} {{ _('gefolgt') }}</div></a>{% else %}<p>{{ _('Momentan gibt es keine kommenden Treffer.') }}</p>{% endfor %}</div></section>
</main></body></html>