|
|
{% extends 'base.html' %} |
|
|
|
|
|
{% block content %} |
|
|
<div class="text-center py-8"> |
|
|
<h1 class="text-4xl font-extrabold mb-2 text-gray-900 tracking-tight">GhostBoard</h1> |
|
|
<p class="text-lg text-gray-500">Anonyme & Sans Friction.</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 max-w-5xl mx-auto px-4"> |
|
|
{% for board in boards %} |
|
|
<a href="{{ url_for('board', slug=board.slug) }}" class="block p-5 bg-white rounded-xl border border-gray-100 shadow-sm hover:shadow-md hover:border-blue-200 transition-all duration-200 active:scale-95"> |
|
|
<h2 class="text-xl font-bold text-blue-600 mb-1">/{{ board.slug }}/</h2> |
|
|
<h3 class="text-lg text-gray-900 font-semibold">{{ board.name }}</h3> |
|
|
<p class="text-gray-500 text-sm mt-1">{{ board.description }}</p> |
|
|
</a> |
|
|
{% endfor %} |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="nickname-modal" class="hidden fixed inset-0 z-50 flex items-center justify-center bg-gray-900 bg-opacity-40 backdrop-blur-sm p-4"> |
|
|
<div class="absolute inset-0" onclick="closeNicknameModal()"></div> |
|
|
<div class="bg-white w-full max-w-sm rounded-2xl shadow-2xl transform transition-all relative z-10 overflow-hidden"> |
|
|
<div class="p-6 text-center"> |
|
|
<h3 class="text-xl font-bold text-gray-900 mb-4">Comment voulez-vous être appelé ?</h3> |
|
|
<p class="text-sm text-gray-600 mb-6">Choisissez un pseudo pour vos posts. Il sera enregistré et réutilisé automatiquement.</p> |
|
|
|
|
|
<form onsubmit="setNickname(event)" class="space-y-4"> |
|
|
<div> |
|
|
<input |
|
|
type="text" |
|
|
id="nickname-input" |
|
|
placeholder="Votre pseudo..." |
|
|
maxlength="50" |
|
|
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-center text-lg" |
|
|
required |
|
|
> |
|
|
</div> |
|
|
<button |
|
|
type="submit" |
|
|
class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-lg transition-colors" |
|
|
> |
|
|
Commencer |
|
|
</button> |
|
|
</form> |
|
|
|
|
|
<p class="text-xs text-gray-500 mt-4"> |
|
|
Vous pourrez changer votre pseudo plus tard. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
{% endblock %} |
|
|
|
