File size: 4,537 Bytes
75ba54e |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 |
{% extends 'base.html' %}
{% block title %}Profil de {{ user.nickname }}{% endblock %}
{% block content %}
<div class="max-w-4xl mx-auto px-3 sm:px-6">
<div class="mb-6 pt-6">
<a href="{{ url_for('index') }}" class="inline-flex items-center text-slate-500 hover:text-blue-600 transition-colors font-medium text-sm">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1.5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z" clip-rule="evenodd" />
</svg>
Retour à l'accueil
</a>
</div>
<!-- User Header -->
<div class="bg-white rounded-2xl shadow-sm border border-slate-100 p-6 mb-6">
<div class="flex items-center gap-4">
<div class="w-16 h-16 rounded-full bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center text-white font-bold text-2xl shadow-md">
{{ user.nickname[0]|upper }}
</div>
<div class="flex-1">
<h1 class="text-2xl font-bold text-slate-900">{{ user.nickname }}</h1>
<p class="text-slate-600">Membre depuis {{ user.created_at.strftime('%d %B %Y') }}</p>
<p class="text-sm text-slate-500">{{ posts|length }} posts publiés</p>
</div>
</div>
</div>
<!-- Posts List -->
<div class="space-y-4">
<h2 class="text-xl font-semibold text-slate-900 mb-4">Posts récents</h2>
{% for post in posts %}
<div class="bg-white p-6 rounded-xl border border-slate-100 shadow-sm">
<div class="flex items-start gap-4">
<!-- Avatar -->
<div class="w-10 h-10 rounded-full bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center text-white font-bold text-sm shadow-sm flex-shrink-0">
{{ user.nickname[0]|upper }}
</div>
<!-- Content -->
<div class="flex-1 min-w-0">
<div class="flex items-center gap-2 mb-2">
<span class="font-semibold text-slate-900">{{ user.nickname }}</span>
<span class="text-slate-500">•</span>
<span class="text-sm text-slate-500">{{ post.created_at.strftime('%d/%m/%Y %H:%M') }}</span>
<span class="text-slate-500">•</span>
<a href="{{ url_for('board', slug=post.board.slug) }}" class="text-blue-600 hover:underline">/{{ post.board.slug }}/</a>
</div>
<div class="text-slate-800 mb-3 break-words">
{{ post.content|format_post }}
</div>
<!-- Media -->
{% if post.files %}
<div class="flex flex-wrap gap-2 mb-3">
{% for file in post.files %}
<div class="rounded-lg overflow-hidden border border-slate-200">
{% if file.filename.endswith(('.mp4', '.webm')) %}
<video controls class="max-w-full max-h-48">
<source src="{{ url_for('static', filename='uploads/' + file.filename) }}" type="video/{{ file.filename.split('.')[-1] }}">
</video>
{% else %}
<img src="{{ url_for('static', filename='uploads/' + file.filename) }}" alt="Image" class="max-w-full max-h-48 object-cover">
{% endif %}
</div>
{% endfor %}
</div>
{% endif %}
<!-- Thread link if it's a reply -->
{% if post.thread_id %}
<a href="{{ url_for('thread', thread_id=post.thread_id) }}" class="text-sm text-blue-600 hover:underline">
Voir le fil complet
</a>
{% endif %}
</div>
</div>
</div>
{% endfor %}
{% if posts|length == 0 %}
<div class="text-center text-slate-400 py-12 bg-white rounded-xl border border-slate-100 border-dashed">
<p>Aucun post trouvé.</p>
</div>
{% endfor %}
</div>
</div>
{% endblock %} |