61 lines
4.7 KiB
HTML
61 lines
4.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Nachrichten · Pingu Concerts</title>
|
|
<link rel="stylesheet" href="/static/css/style.css">
|
|
<style>
|
|
.conversation-list { display: grid; gap: 10px; }
|
|
.conversation-card { display: flex; align-items: center; gap: 12px; padding: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 13px; }
|
|
.conversation-card:hover { border-color: var(--accent); }
|
|
.chat-avatar { width: 48px; height: 48px; flex: 0 0 48px; border-radius: 50%; object-fit: cover; background: #292524; display: grid; place-items: center; font-weight: 800; }
|
|
.conversation-copy { min-width: 0; flex: 1; }
|
|
.conversation-copy strong, .conversation-copy span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.conversation-copy span { margin-top: 3px; color: var(--muted); font-size: .9rem; }
|
|
.unread-badge { min-width: 26px; padding: 3px 7px; color: #fff; background: #b91c1c; border-radius: 999px; text-align: center; font-weight: 800; }
|
|
.chat-header { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
|
|
.chat-header h1 { margin: 0; }
|
|
.chat-log { display: flex; flex-direction: column; gap: 9px; min-height: 260px; padding: 18px; background: #090909; border: 1px solid var(--border); border-radius: 15px; }
|
|
.chat-bubble { align-self: flex-start; max-width: min(76%, 650px); padding: 10px 13px; background: #262020; border-radius: 4px 13px 13px 13px; white-space: pre-wrap; overflow-wrap: anywhere; }
|
|
.chat-bubble.mine { align-self: flex-end; background: #5f1515; border-radius: 13px 4px 13px 13px; }
|
|
.chat-time { display: block; margin-top: 5px; color: #a8a29e; font-size: .72rem; }
|
|
.chat-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; margin-top: 12px; max-width: none; }
|
|
.chat-form textarea { min-height: 76px; margin: 0; resize: vertical; }
|
|
.empty-chat { color: var(--muted); text-align: center; margin: auto; }
|
|
@media (max-width: 600px) { .chat-form { grid-template-columns: 1fr; } .chat-bubble { max-width: 90%; } }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header><div class="header-inner"><a href="/" class="logo">🎸 Pingu <span>Concerts</span></a>{% include '_user_menu.html' %}</div></header>
|
|
<main>
|
|
{% if partner %}
|
|
<div class="chat-header">
|
|
{% if partner.avatar_path %}<img class="chat-avatar" src="{{ partner.avatar_path }}" alt="">{% else %}<span class="chat-avatar">{{ partner.display_name[:1] }}</span>{% endif %}
|
|
<div><h1>{{ partner.display_name }}</h1><a href="/users/{{ partner.username }}">@{{ partner.username }}</a></div>
|
|
</div>
|
|
<div class="chat-log">
|
|
{% for message in messages %}<div class="chat-bubble{% if message.from_me %} mine{% endif %}"{% if loop.last %} id="latest"{% endif %}>{{ message.body }}<span class="chat-time">{{ message.created_at }}</span></div>
|
|
{% else %}<p class="empty-chat">Noch keine Nachrichten. Schreib die erste!</p>{% endfor %}
|
|
</div>
|
|
<form class="chat-form" method="post" action="/messages/{{ partner.username }}">
|
|
<textarea name="body" maxlength="2000" required placeholder="Nachricht schreiben …" aria-label="Nachricht"></textarea>
|
|
<button class="button" type="submit">Senden</button>
|
|
</form>
|
|
<p><a class="button button-secondary" href="/messages">← Alle Nachrichten</a></p>
|
|
{% else %}
|
|
<div class="page-title"><h1>🤘 Nachrichten</h1><p>Private Chats mit deinen Freunden.</p></div>
|
|
<div class="conversation-list">
|
|
{% for conversation in conversations %}
|
|
<a class="conversation-card" href="/messages/{{ conversation.username }}">
|
|
{% if conversation.avatar_path %}<img class="chat-avatar" src="{{ conversation.avatar_path }}" alt="">{% else %}<span class="chat-avatar">{{ conversation.display_name[:1] }}</span>{% endif %}
|
|
<span class="conversation-copy"><strong>{{ conversation.display_name }}</strong><span>{% if conversation.last_message %}{% if conversation.last_from_me %}Du: {% endif %}{{ conversation.last_message }} · {{ conversation.last_at }}{% else %}Chat beginnen{% endif %}</span></span>
|
|
{% if conversation.unread_count %}<span class="unread-badge">{{ conversation.unread_count }}</span>{% endif %}
|
|
</a>
|
|
{% else %}<div class="empty"><h2>Noch keine Chats</h2><p>Chats sind mit bestätigten Freunden und mit Admins verfügbar.</p></div>{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
</main>
|
|
</body>
|
|
</html>
|