Upload 21 files

app.py

@@ -0,0 +1,327 @@
+from flask import Flask, render_template, request, redirect, url_for, abort, flash, session, send_from_directory
+from werkzeug.utils import secure_filename
+from werkzeug.security import check_password_hash, generate_password_hash
+from models import db, Board, Post, BannedIP, PostFile
+from forms import PostForm
+from datetime import datetime
+import os
+import uuid
+import re
+from markupsafe import Markup
+from functools import wraps
+
+app = Flask(__name__)
+app.config['SECRET_KEY'] = 'dev-secret-key' # Change in production
+os.makedirs(app.instance_path, exist_ok=True)
+app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///' + os.path.join(app.instance_path, 'ghostboard.db')
+app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
+app.config['UPLOAD_FOLDER'] = os.path.join(app.root_path, 'static/uploads')
+os.makedirs(app.config['UPLOAD_FOLDER'], exist_ok=True)
+app.config['MAX_CONTENT_LENGTH'] = 20 * 1024 * 1024 # 20 MB limit
+app.config['ALLOWED_EXTENSIONS'] = {'png', 'jpg', 'jpeg', 'gif', 'webp', 'mp4', 'webm'}
+app.config['ADMIN_PASSWORD_HASH'] = generate_password_hash('admin') # Default password: admin
+
+db.init_app(app)
+
+def init_db():
+    db.create_all()
+
+    # Seed default boards
+    boards = [
+        {'slug': 'g', 'name': 'Général', 'description': 'Discussion générale'},
+        {'slug': 'tech', 'name': 'Technologie', 'description': 'Ordinateurs, programmation, gadgets'},
+        {'slug': 'art', 'name': 'Création', 'description': 'Art, design, musique'},
+        {'slug': 'news', 'name': 'Actualités', 'description': 'Événements actuels'}
+    ]
+
+    for b_data in boards:
+        if not Board.query.filter_by(slug=b_data['slug']).first():
+            board = Board(slug=b_data['slug'], name=b_data['name'], description=b_data['description'])
+            db.session.add(board)
+
+    db.session.commit()
+
+# Auto-initialize database if it doesn't exist
+with app.app_context():
+    if not os.path.exists(os.path.join(app.instance_path, 'ghostboard.db')):
+        init_db()
+
+def allowed_file(filename):
+    return '.' in filename and \
+           filename.rsplit('.', 1)[1].lower() in app.config['ALLOWED_EXTENSIONS']
+
+def save_file(file):
+    if file and allowed_file(file.filename):
+        original_filename = secure_filename(file.filename)
+        extension = original_filename.rsplit('.', 1)[1].lower()
+        new_filename = f"{uuid.uuid4().hex}.{extension}"
+        file.save(os.path.join(app.config['UPLOAD_FOLDER'], new_filename))
+        return new_filename, original_filename
+    return None, None
+
+def delete_post_files(post):
+    for file in post.files:
+        path = os.path.join(app.config['UPLOAD_FOLDER'], file.filename)
+        if os.path.exists(path):
+            os.remove(path)
+        db.session.delete(file)
+
+def delete_thread_content(thread):
+    # Delete all replies
+    replies = Post.query.filter_by(thread_id=thread.id).all()
+    for reply in replies:
+        delete_post_files(reply)
+        db.session.delete(reply)
+    
+    delete_post_files(thread)
+    db.session.delete(thread)
+
+def prune_board(board_id):
+    # Limit to 100 threads
+    threads_query = Post.query.filter_by(board_id=board_id, thread_id=None).order_by(Post.updated_at.desc())
+    if threads_query.count() > 100:
+        threads_to_delete = threads_query.offset(100).all()
+        for thread in threads_to_delete:
+            delete_thread_content(thread)
+        db.session.commit()
+
+def admin_required(f):
+    @wraps(f)
+    def decorated_function(*args, **kwargs):
+        if not session.get('is_admin'):
+            return redirect(url_for('admin_login', next=request.url))
+        return f(*args, **kwargs)
+    return decorated_function
+
+def check_ban():
+    ip = request.remote_addr
+    ban = BannedIP.query.filter_by(ip_address=ip).first()
+    if ban:
+        abort(403, description=f"Vous êtes banni. Raison : {ban.reason}")
+
+@app.cli.command("init-db")
+def init_db_command():
+    """Create database tables and seed initial data."""
+    with app.app_context():
+        init_db()
+        print("Base de données initialisée.")
+
+@app.context_processor
+def inject_boards():
+    return dict(global_boards=Board.query.all())
+
+@app.template_filter('format_post')
+def format_post(content):
+    if not content:
+        return ""
+    
+    # Escape HTML first (safety)
+    content = str(Markup.escape(content))
+    
+    # Link to quotes >>12345
+    def replace_quote(match):
+        post_id = match.group(1)
+        return f'<a href="#post-{post_id}" class="text-blue-400 hover:underline" onclick="highlightPost({post_id})">&gt;&gt;{post_id}</a>'
+    
+    content = re.sub(r'&gt;&gt;(\d+)', replace_quote, content)
+    
+    # Greentext (lines starting with >)
+    content = re.sub(r'^(&gt;.*)$', r'<span class="text-green-400">\1</span>', content, flags=re.MULTILINE)
+    
+    # Convert newlines to <br>
+    content = content.replace('\n', '<br>')
+    
+    return Markup(content)
+
+@app.route('/manifest.json')
+def manifest():
+    return send_from_directory('static', 'manifest.json')
+
+@app.route('/sw.js')
+def service_worker():
+    return send_from_directory('static', 'sw.js')
+
+@app.route('/')
+def index():
+    boards = Board.query.all()
+    return render_template('index.html', boards=boards)
+
+@app.route('/<slug>/', methods=['GET', 'POST'])
+def board(slug):
+    board = Board.query.filter_by(slug=slug).first_or_404()
+    form = PostForm()
+    
+    if form.validate_on_submit():
+        check_ban()
+        
+        # Create new thread
+        post = Post(
+            board_id=board.id,
+            content=form.content.data,
+            nickname=form.nickname.data or 'Anonyme',
+            ip_address=request.remote_addr
+        )
+        db.session.add(post)
+        db.session.commit()
+
+        # Handle multiple files
+        if form.files.data:
+            for f in form.files.data:
+                filename, original_filename = save_file(f)
+                if filename:
+                    post_file = PostFile(
+                        post_id=post.id,
+                        filename=filename,
+                        original_filename=original_filename
+                    )
+                    db.session.add(post_file)
+            db.session.commit()
+        
+        # Prune board
+        prune_board(board.id)
+        
+        return redirect(url_for('board', slug=slug))
+
+    # Get threads (posts with no thread_id), sorted by updated_at (bumping)
+    threads = Post.query.filter_by(board_id=board.id, thread_id=None)\
+        .order_by(Post.updated_at.desc()).limit(50).all()
+    return render_template('board.html', board=board, threads=threads, form=form)
+
+@app.route('/thread/<int:thread_id>/', methods=['GET', 'POST'])
+def thread(thread_id):
+    thread_post = Post.query.get_or_404(thread_id)
+    if thread_post.thread_id is not None:
+        # If it's a reply, redirect to the main thread
+        return redirect(url_for('thread', thread_id=thread_post.thread_id))
+    
+    form = PostForm()
+    if form.validate_on_submit():
+        check_ban()
+
+        # Create reply
+        reply = Post(
+            board_id=thread_post.board_id,
+            thread_id=thread_post.id,
+            content=form.content.data,
+            nickname=form.nickname.data or 'Anonyme',
+            ip_address=request.remote_addr
+        )
+        db.session.add(reply)
+        
+        # Handle multiple files
+        if form.files.data:
+            for f in form.files.data:
+                filename, original_filename = save_file(f)
+                if filename:
+                    post_file = PostFile(
+                        post_id=reply.id,
+                        filename=filename,
+                        original_filename=original_filename
+                    )
+                    db.session.add(post_file)
+        
+        # Bump the thread
+        thread_post.updated_at = datetime.utcnow()
+        
+        db.session.commit()
+        return redirect(url_for('thread', thread_id=thread_post.id))
+    
+    replies = Post.query.filter_by(thread_id=thread_post.id).order_by(Post.created_at.asc()).all()
+    return render_template('thread.html', thread=thread_post, replies=replies, board=thread_post.board, form=form)
+
+# Admin Routes
+@app.route('/admin/login', methods=['GET', 'POST'])
+def admin_login():
+    if request.method == 'POST':
+        password = request.form.get('password')
+        if check_password_hash(app.config['ADMIN_PASSWORD_HASH'], password):
+            session['is_admin'] = True
+            return redirect(url_for('admin_dashboard'))
+        else:
+            flash('Mot de passe invalide')
+    return render_template('admin_login.html')
+
+@app.route('/admin/logout')
+def admin_logout():
+    session.pop('is_admin', None)
+    return redirect(url_for('index'))
+
+@app.route('/admin')
+@admin_required
+def admin_dashboard():
+    # Show recent posts (both threads and replies) for moderation
+    recent_posts = Post.query.order_by(Post.created_at.desc()).limit(100).all()
+    return render_template('admin.html', posts=recent_posts)
+
+@app.route('/admin/delete/<int:post_id>', methods=['POST'])
+@admin_required
+def delete_post(post_id):
+    post = Post.query.get_or_404(post_id)
+    
+    if post.thread_id is None:
+        # It's a thread starter, delete whole thread
+        delete_thread_content(post)
+    else:
+        # It's a reply
+        delete_post_file(post)
+        db.session.delete(post)
+    
+    db.session.commit()
+    flash('Post supprimé')
+    return redirect(request.referrer or url_for('admin_dashboard'))
+
+@app.route('/admin/ban/<int:post_id>', methods=['POST'])
+@admin_required
+def ban_ip(post_id):
+    post = Post.query.get_or_404(post_id)
+    if not BannedIP.query.filter_by(ip_address=post.ip_address).first():
+        ban = BannedIP(ip_address=post.ip_address, reason="Banni par l'administrateur")
+        db.session.add(ban)
+        db.session.commit()
+        flash(f'IP {post.ip_address} bannie')
+    else:
+        flash(f'L\'IP {post.ip_address} est déjà bannie')
+    
+    return redirect(request.referrer or url_for('admin_dashboard'))
+
+@app.route('/admin/boards')
+@admin_required
+def admin_boards():
+    boards = Board.query.all()
+    return render_template('admin_boards.html', boards=boards)
+
+@app.route('/admin/boards/add', methods=['POST'])
+@admin_required
+def admin_add_board():
+    slug = request.form.get('slug')
+    name = request.form.get('name')
+    description = request.form.get('description')
+    
+    if slug and name:
+        if not Board.query.filter_by(slug=slug).first():
+            board = Board(slug=slug, name=name, description=description)
+            db.session.add(board)
+            db.session.commit()
+            flash('Planche ajoutée')
+        else:
+            flash('Ce slug existe déjà')
+    else:
+        flash('Données manquantes')
+    return redirect(url_for('admin_boards'))
+
+@app.route('/admin/boards/delete/<int:board_id>', methods=['POST'])
+@admin_required
+def admin_delete_board(board_id):
+    board = Board.query.get_or_404(board_id)
+    # Delete all posts in board
+    posts = Post.query.filter_by(board_id=board.id, thread_id=None).all()
+    for post in posts:
+        delete_thread_content(post)
+    
+    db.session.delete(board)
+    db.session.commit()
+    flash('Planche supprimée')
+    return redirect(url_for('admin_boards'))
+
+if __name__ == '__main__':
+    app.run(debug=True)

forms.py

@@ -0,0 +1,35 @@
+from flask_wtf import FlaskForm
+from wtforms import TextAreaField, MultipleFileField, StringField, SubmitField
+from wtforms.validators import Optional, Length
+
+class PostForm(FlaskForm):
+    nickname = StringField('Pseudo', validators=[Optional(), Length(max=50)])
+    content = TextAreaField('Message', validators=[Optional(), Length(max=2000)])
+    files = MultipleFileField('Fichiers', validators=[Optional()])
+    honeypot = StringField('Site Web', validators=[Optional()]) # Anti-spam field
+    submit = SubmitField('Envoyer')
+
+    def validate(self, extra_validators=None):
+        initial_validation = super(PostForm, self).validate(extra_validators)
+        if not initial_validation:
+            return False
+        
+        # Custom validation: Must have either content or files
+        if not self.content.data and not self.files.data:
+            # Check if files list is empty or contains empty file
+            has_files = False
+            if self.files.data:
+                for f in self.files.data:
+                    if f.filename:
+                        has_files = True
+                        break
+            
+            if not has_files and not self.content.data:
+                self.content.errors.append('Vous devez fournir un message ou un fichier.')
+                return False
+        
+        # Honeypot check
+        if self.honeypot.data:
+            return False
+            
+        return True

models.py

@@ -0,0 +1,40 @@
+from flask_sqlalchemy import SQLAlchemy
+from datetime import datetime
+
+db = SQLAlchemy()
+
+class Board(db.Model):
+    id = db.Column(db.Integer, primary_key=True)
+    slug = db.Column(db.String(10), unique=True, nullable=False)
+    name = db.Column(db.String(50), nullable=False)
+    description = db.Column(db.String(200))
+    posts = db.relationship('Post', backref='board', lazy=True)
+
+class PostFile(db.Model):
+    id = db.Column(db.Integer, primary_key=True)
+    post_id = db.Column(db.Integer, db.ForeignKey('post.id'), nullable=False)
+    filename = db.Column(db.String(100), nullable=False)
+    original_filename = db.Column(db.String(100), nullable=False)
+
+class Post(db.Model):
+    id = db.Column(db.Integer, primary_key=True)
+    thread_id = db.Column(db.Integer, db.ForeignKey('post.id'), nullable=True) # If null, it's a thread starter
+    board_id = db.Column(db.Integer, db.ForeignKey('board.id'), nullable=False)
+    content = db.Column(db.Text, nullable=True)
+    nickname = db.Column(db.String(50), default='Anonyme')
+    created_at = db.Column(db.DateTime, default=datetime.utcnow)
+    updated_at = db.Column(db.DateTime, default=datetime.utcnow) # For bumping
+    ip_address = db.Column(db.String(50), nullable=True)
+
+    files = db.relationship('PostFile', backref='post', lazy=True)
+
+    # Relationship to access replies easily
+    replies = db.relationship('Post', 
+                             backref=db.backref('parent', remote_side=[id]),
+                             lazy=True)
+
+class BannedIP(db.Model):
+    id = db.Column(db.Integer, primary_key=True)
+    ip_address = db.Column(db.String(50), unique=True, nullable=False)
+    reason = db.Column(db.String(200))
+    created_at = db.Column(db.DateTime, default=datetime.utcnow)

requirements.txt

@@ -0,0 +1,5 @@
+Flask
+Flask-SQLAlchemy
+Flask-WTF
+email_validator
+Werkzeug

static/manifest.json

@@ -0,0 +1,27 @@
+{
+  "name": "GhostBoard",
+  "short_name": "GhostBoard",
+  "description": "Anonymous Imageboard",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#ffffff",
+  "theme_color": "#ffffff",
+  "icons": [
+    {
+      "src": "/static/images/icon.svg",
+      "sizes": "any",
+      "type": "image/svg+xml",
+      "purpose": "any maskable"
+    },
+    {
+        "src": "/static/images/icon.svg",
+        "sizes": "192x192",
+        "type": "image/svg+xml"
+    },
+    {
+        "src": "/static/images/icon.svg",
+        "sizes": "512x512",
+        "type": "image/svg+xml"
+    }
+  ]
+}

static/sw.js

@@ -0,0 +1,35 @@
+const CACHE_NAME = 'ghostboard-v1';
+const ASSETS = [
+  '/',
+  '/static/images/icon.svg',
+  '/static/manifest.json',
+  'https://cdn.tailwindcss.com',
+  'https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js'
+];
+
+self.addEventListener('install', (e) => {
+  e.waitUntil(
+    caches.open(CACHE_NAME).then((cache) => cache.addAll(ASSETS))
+  );
+});
+
+self.addEventListener('fetch', (e) => {
+  // Network first for HTML (navigation), Cache first for assets
+  if (e.request.mode === 'navigate') {
+    e.respondWith(
+      fetch(e.request).catch(() => {
+        return caches.match(e.request).then(response => {
+            if (response) return response;
+            // Fallback to offline page if I had one, or just root
+            return caches.match('/');
+        });
+      })
+    );
+  } else {
+    e.respondWith(
+      caches.match(e.request).then((response) => {
+        return response || fetch(e.request);
+      })
+    );
+  }
+});

templates/admin.html

@@ -0,0 +1,87 @@
+{% extends 'base.html' %}
+
+{% block title %}Tableau de bord Admin{% endblock %}
+
+{% block content %}
+<div class="mb-8 flex justify-between items-center px-4">
+    <h1 class="text-3xl font-bold text-gray-900">Tableau de bord Admin</h1>
+    <div class="space-x-2">
+        <a href="{{ url_for('admin_boards') }}" class="bg-blue-100 hover:bg-blue-200 text-blue-800 px-4 py-2 rounded-lg font-medium">Gérer les Planches</a>
+        <a href="{{ url_for('admin_logout') }}" class="bg-gray-200 hover:bg-gray-300 text-gray-700 px-4 py-2 rounded-lg font-medium">Déconnexion</a>
+    </div>
+</div>
+
+{% with messages = get_flashed_messages() %}
+    {% if messages %}
+        <div class="px-4 mb-4">
+        {% for message in messages %}
+            <div class="bg-green-50 text-green-700 border border-green-200 p-3 rounded-lg">{{ message }}</div>
+        {% endfor %}
+        </div>
+    {% endif %}
+{% endwith %}
+
+<div class="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden mx-4">
+    <div class="overflow-x-auto">
+        <table class="min-w-full divide-y divide-gray-200">
+            <thead class="bg-gray-50">
+                <tr>
+                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ID</th>
+                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th>
+                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Board</th>
+                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Contenu/Fichier</th>
+                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">IP</th>
+                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
+                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Action</th>
+                </tr>
+            </thead>
+            <tbody class="bg-white divide-y divide-gray-200 text-gray-700">
+                {% for post in posts %}
+                <tr class="hover:bg-gray-50">
+                    <td class="px-6 py-4 whitespace-nowrap">
+                        <a href="{{ url_for('thread', thread_id=post.thread_id if post.thread_id else post.id) }}#post-{{ post.id }}" target="_blank" class="text-blue-600 hover:underline font-medium">
+                            {{ post.id }}
+                        </a>
+                    </td>
+                    <td class="px-6 py-4 whitespace-nowrap">
+                        {% if post.thread_id %}
+                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">Réponse</span>
+                        {% else %}
+                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">Fil</span>
+                        {% endif %}
+                    </td>
+                    <td class="px-6 py-4 whitespace-nowrap">
+                        /{{ post.board.slug }}/
+                    </td>
+                    <td class="px-6 py-4">
+                        <div class="max-w-xs truncate text-xs">
+                            {{ post.content|default('', true) }}
+                            {% if post.filename %}
+                            <br>
+                            <span class="text-blue-500">[Fichier : {{ post.original_filename }}]</span>
+                            {% endif %}
+                        </div>
+                    </td>
+                    <td class="px-6 py-4 whitespace-nowrap text-xs">
+                        {{ post.ip_address }}
+                    </td>
+                    <td class="px-6 py-4 whitespace-nowrap text-xs">
+                        {{ post.created_at.strftime('%Y-%m-%d %H:%M') }}
+                    </td>
+                    <td class="px-6 py-4 whitespace-nowrap">
+                        <div class="flex space-x-2">
+                            <form action="{{ url_for('delete_post', post_id=post.id) }}" method="POST" onsubmit="return confirm('Êtes-vous sûr de vouloir supprimer ce post ?');">
+                                <button type="submit" class="text-red-600 hover:text-red-800 font-bold text-sm">Supprimer</button>
+                            </form>
+                            <form action="{{ url_for('ban_ip', post_id=post.id) }}" method="POST" onsubmit="return confirm('Êtes-vous sûr de vouloir BANNIR cette IP ?');">
+                                <button type="submit" class="text-orange-600 hover:text-orange-800 font-bold text-sm">Bannir IP</button>
+                            </form>
+                        </div>
+                    </td>
+                </tr>
+                {% endfor %}
+            </tbody>
+        </table>
+    </div>
+</div>
+{% endblock %}

templates/admin_boards.html

@@ -0,0 +1,68 @@
+{% extends 'base.html' %}
+
+{% block title %}Gestion des Planches{% endblock %}
+
+{% block content %}
+<div class="mb-8 flex justify-between items-center px-4">
+    <h1 class="text-3xl font-bold text-gray-900">Gestion des Planches</h1>
+    <a href="{{ url_for('admin_dashboard') }}" class="text-blue-600 hover:underline">Retour au Dashboard</a>
+</div>
+
+{% with messages = get_flashed_messages() %}
+    {% if messages %}
+        <div class="px-4 mb-4">
+        {% for message in messages %}
+            <div class="bg-green-50 text-green-700 border border-green-200 p-3 rounded-lg">{{ message }}</div>
+        {% endfor %}
+        </div>
+    {% endif %}
+{% endwith %}
+
+<div class="grid grid-cols-1 md:grid-cols-2 gap-8 px-4">
+    <!-- Add Board Form -->
+    <div class="bg-white p-6 rounded-xl border border-gray-100 shadow-sm h-fit">
+        <h2 class="text-xl font-bold text-gray-900 mb-4">Ajouter une planche</h2>
+        <form action="{{ url_for('admin_add_board') }}" method="POST" class="space-y-4">
+            <div>
+                <label class="block text-gray-700 text-sm font-semibold mb-2" for="slug">Slug (ex: tech)</label>
+                <input type="text" name="slug" id="slug" required class="w-full bg-gray-50 text-gray-900 border border-gray-200 rounded-lg py-2 px-3 focus:ring-2 focus:ring-blue-500 placeholder-gray-400" placeholder="tech">
+            </div>
+            <div>
+                <label class="block text-gray-700 text-sm font-semibold mb-2" for="name">Nom (ex: Technologie)</label>
+                <input type="text" name="name" id="name" required class="w-full bg-gray-50 text-gray-900 border border-gray-200 rounded-lg py-2 px-3 focus:ring-2 focus:ring-blue-500 placeholder-gray-400" placeholder="Technologie">
+            </div>
+            <div>
+                <label class="block text-gray-700 text-sm font-semibold mb-2" for="description">Description</label>
+                <input type="text" name="description" id="description" class="w-full bg-gray-50 text-gray-900 border border-gray-200 rounded-lg py-2 px-3 focus:ring-2 focus:ring-blue-500 placeholder-gray-400" placeholder="Description courte">
+            </div>
+            <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg transition-transform active:scale-95">Ajouter</button>
+        </form>
+    </div>
+
+    <!-- List Boards -->
+    <div class="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">
+        <table class="min-w-full divide-y divide-gray-200">
+            <thead class="bg-gray-50">
+                <tr>
+                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Slug</th>
+                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Nom</th>
+                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Action</th>
+                </tr>
+            </thead>
+            <tbody class="divide-y divide-gray-200 text-gray-700">
+                {% for board in boards %}
+                <tr class="hover:bg-gray-50">
+                    <td class="px-6 py-4 font-mono text-sm text-blue-600">/{{ board.slug }}/</td>
+                    <td class="px-6 py-4 font-medium">{{ board.name }}</td>
+                    <td class="px-6 py-4">
+                        <form action="{{ url_for('admin_delete_board', board_id=board.id) }}" method="POST" onsubmit="return confirm('Supprimer cette planche et TOUS ses posts ?');">
+                            <button type="submit" class="text-red-600 hover:text-red-800 font-bold text-sm">Supprimer</button>
+                        </form>
+                    </td>
+                </tr>
+                {% endfor %}
+            </tbody>
+        </table>
+    </div>
+</div>
+{% endblock %}

templates/admin_login.html

@@ -0,0 +1,29 @@
+{% extends 'base.html' %}
+
+{% block title %}Connexion Admin{% endblock %}
+
+{% block content %}
+<div class="max-w-md mx-auto bg-white p-8 rounded-xl border border-gray-100 shadow-lg mt-12">
+    <h1 class="text-2xl font-bold text-gray-900 mb-6 text-center">Connexion Admin</h1>
+    
+    {% with messages = get_flashed_messages() %}
+        {% if messages %}
+            {% for message in messages %}
+                <div class="bg-red-50 text-red-600 border border-red-200 p-3 rounded mb-4 text-center text-sm">{{ message }}</div>
+            {% endfor %}
+        {% endif %}
+    {% endwith %}
+
+    <form method="POST">
+        <div class="mb-6">
+            <label class="block text-gray-700 text-sm font-bold mb-2" for="password">Mot de passe</label>
+            <input class="w-full bg-gray-50 text-gray-900 border border-gray-300 rounded-lg py-3 px-4 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" type="password" name="password" id="password" required>
+        </div>
+        <div>
+            <button class="w-full bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-4 rounded-lg focus:outline-none focus:shadow-outline transition-transform active:scale-95" type="submit">
+                Connexion
+            </button>
+        </div>
+    </form>
+</div>
+{% endblock %}

templates/base.html

@@ -0,0 +1,321 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="manifest" href="/manifest.json">
+    <meta name="theme-color" content="#ffffff">
+    <link rel="apple-touch-icon" href="/static/images/icon.svg">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="default">
+    <title>{% block title %}GhostBoard{% endblock %}</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
+    <style>
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+            -webkit-font-smoothing: antialiased;
+        }
+    </style>
+</head>
+<body class="bg-gray-50 text-gray-900 min-h-screen pb-20"> <!-- pb-20 for FAB space -->
+    <nav class="bg-white border-b border-gray-200 sticky top-0 z-50 bg-opacity-90 backdrop-blur-sm">
+        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
+            <a href="{{ url_for('index') }}" class="text-xl font-bold text-gray-900 tracking-tight">GhostBoard</a>
+            <div class="flex space-x-3 text-sm font-medium overflow-x-auto no-scrollbar">
+                {% for board in global_boards %}
+                <a href="{{ url_for('board', slug=board.slug) }}" class="text-gray-600 hover:text-blue-600 whitespace-nowrap">/{{ board.slug }}/</a>
+                {% endfor %}
+            </div>
+        </div>
+    </nav>
+
+    <main class="container mx-auto p-4">
+        {% block content %}{% endblock %}
+    </main>
+
+    <!-- Share App Button -->
+    <div class="container mx-auto px-4 mt-8 mb-4">
+        <button onclick="shareAppOnWhatsApp()" class="w-full sm:w-auto mx-auto block bg-[#25D366] hover:bg-[#128C7E] text-white font-bold py-4 px-8 rounded-full shadow-lg transform transition hover:scale-105 flex items-center justify-center space-x-3">
+             <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="currentColor" viewBox="0 0 24 24">
+                <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.008-.57-.008-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 1.032 5.122 3.022 6.989 5.615.119 5.269 2.768 9.825 8.526 9.881-.14 0-.28 0-.42-.01l-.001-.001z"/>
+            </svg>
+            <span class="text-xl">Partager l'application</span>
+        </button>
+    </div>
+
+    <footer class="text-center text-gray-400 text-xs py-8 mt-8">
+        <p>GhostBoard &copy; 2025</p>
+    </footer>
+
+    <!-- Share Modal -->
+    <div id="share-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="closeShareModal()"></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-6">Partager ce post</h3>
+                <div class="space-y-3">
+                    <button onclick="copyCurrentLink()" class="w-full bg-gray-100 hover:bg-gray-200 text-gray-800 font-semibold py-3 px-4 rounded-xl flex items-center justify-center transition-colors">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
+                        </svg>
+                        Copier le lien
+                    </button>
+                    <button onclick="shareToWhatsApp()" class="w-full bg-[#25D366] hover:bg-[#128C7E] text-white font-semibold py-3 px-4 rounded-xl flex items-center justify-center transition-colors">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" viewBox="0 0 24 24" fill="currentColor">
+                            <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.008-.57-.008-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 1.032 5.122 3.022 6.989 5.615.119 5.269 2.768 9.825 8.526 9.881-.14 0-.28 0-.42-.01l-.001-.001z"/>
+                        </svg>
+                        Partager sur WhatsApp
+                    </button>
+                </div>
+                <button onclick="closeShareModal()" class="mt-6 text-gray-500 hover:text-gray-700 text-sm font-medium">Fermer</button>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        function shareAppOnWhatsApp() {
+            const url = window.location.origin;
+            const text = "Découvre GhostBoard, c'est génial ! " + url;
+            const whatsappUrl = `https://wa.me/?text=${encodeURIComponent(text)}`;
+            window.open(whatsappUrl, '_blank');
+        }
+
+        let currentShareId = null;
+        let currentShareUrl = null;
+
+        function replyTo(id) {
+            const textarea = document.getElementById('content');
+            const formContainer = document.getElementById('post-form-container');
+            
+            if (formContainer && formContainer.classList.contains('hidden')) {
+                togglePostForm();
+            }
+
+            if (textarea) {
+                const currentVal = textarea.value;
+                textarea.value = currentVal + (currentVal ? '\n' : '') + '>>' + id + '\n';
+                textarea.focus();
+                textarea.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        }
+
+        function togglePostForm() {
+            const container = document.getElementById('post-form-container');
+            const fab = document.getElementById('fab-button');
+            if (container.classList.contains('hidden')) {
+                container.classList.remove('hidden');
+                // Focus textarea
+                setTimeout(() => document.getElementById('content').focus(), 100);
+                if(fab) fab.classList.add('hidden');
+            } else {
+                container.classList.add('hidden');
+                if(fab) fab.classList.remove('hidden');
+            }
+        }
+
+        function highlightPost(id) {
+            const post = document.getElementById('post-' + id);
+            if (post) {
+                post.classList.add('bg-blue-50');
+                post.classList.add('ring-2');
+                post.classList.add('ring-blue-200');
+                setTimeout(() => {
+                    post.classList.remove('bg-blue-50');
+                    post.classList.remove('ring-2');
+                    post.classList.remove('ring-blue-200');
+                }, 2000);
+            }
+        }
+
+        function sharePost(id, url) {
+            currentShareId = id;
+            currentShareUrl = url;
+
+            const modal = document.getElementById('share-modal');
+            modal.classList.remove('hidden');
+        }
+
+        function closeShareModal() {
+            document.getElementById('share-modal').classList.add('hidden');
+            currentShareId = null;
+            currentShareUrl = null;
+        }
+
+        async function copyCurrentLink() {
+            if (!currentShareUrl) return;
+            try {
+                await navigator.clipboard.writeText(currentShareUrl);
+                alert('Lien copié dans le presse-papier !');
+                closeShareModal();
+            } catch (err) {
+                console.error('Failed to copy: ', err);
+                alert('Impossible de copier le lien');
+            }
+        }
+
+        async function shareToWhatsApp() {
+            if (!currentShareId || !currentShareUrl) return;
+
+            const id = currentShareId;
+            const url = currentShareUrl;
+
+            // Close modal immediately to avoid capturing it or blocking UI
+            closeShareModal();
+
+            // Notify user generating image
+            const toast = document.createElement('div');
+            toast.className = 'fixed bottom-4 left-1/2 transform -translate-x-1/2 bg-gray-800 text-white px-4 py-2 rounded-lg shadow-lg z-50';
+            toast.textContent = 'Génération de l\'image...';
+            document.body.appendChild(toast);
+
+            const originalPost = document.getElementById('post-' + id);
+            if (!originalPost) {
+                toast.remove();
+                return;
+            }
+
+            // Wrapper for style (NGL like background)
+            const wrapper = document.createElement('div');
+            wrapper.style.width = '600px';
+            wrapper.style.padding = '40px';
+            wrapper.style.background = 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)';
+            wrapper.style.display = 'flex';
+            wrapper.style.flexDirection = 'column';
+            wrapper.style.alignItems = 'center';
+            wrapper.style.justifyContent = 'center';
+            wrapper.style.position = 'absolute';
+            wrapper.style.top = '-9999px';
+            wrapper.style.left = '-9999px';
+            
+            // Clone the post
+            const clone = originalPost.cloneNode(true);
+            
+            // Remove actions/buttons from clone
+            const actions = clone.querySelectorAll('button, a[href^="#"], .no-capture');
+            actions.forEach(el => el.remove());
+
+            // Style clone card
+            clone.id = 'clone-capture';
+            clone.style.width = '100%';
+            clone.style.maxWidth = '100%';
+            clone.style.margin = '0';
+            clone.style.backgroundColor = 'rgba(255, 255, 255, 0.95)';
+            clone.style.borderRadius = '16px';
+            clone.style.boxShadow = '0 10px 25px rgba(0,0,0,0.2)';
+            clone.style.padding = '20px';
+            clone.style.position = 'relative';
+            clone.style.top = 'auto';
+            clone.style.left = 'auto';
+
+            // Add Branding
+            const branding = document.createElement('div');
+            branding.className = 'mt-4 pt-4 border-t border-gray-200 flex items-center justify-center text-gray-500 text-xs font-bold uppercase tracking-widest';
+            branding.innerHTML = 'GhostBoard';
+            
+            const contentDiv = clone.querySelector('.flex-grow') || clone;
+            contentDiv.appendChild(branding);
+
+            wrapper.appendChild(clone);
+            document.body.appendChild(wrapper);
+
+            try {
+                const canvas = await html2canvas(wrapper, {
+                    scale: 2,
+                    backgroundColor: null,
+                    useCORS: true,
+                    logging: false
+                });
+
+                document.body.removeChild(wrapper);
+                toast.remove();
+
+                canvas.toBlob(async (blob) => {
+                    if (!blob) return;
+                    
+                    const file = new File([blob], `ghostboard-${id}.png`, { type: 'image/png' });
+                    
+                    // Share data with text link
+                    const shareData = {
+                        files: [file],
+                        title: 'GhostBoard',
+                        text: url // Description text for WhatsApp
+                    };
+
+                    if (navigator.share && navigator.canShare && navigator.canShare({ files: [file] })) {
+                        try {
+                            await navigator.share(shareData);
+                        } catch (err) {
+                            console.log('Share dismissed or failed', err);
+                        }
+                    } else {
+                        // Fallback download if web share not available (e.g. desktop)
+                        const link = document.createElement('a');
+                        link.download = `ghostboard-${id}.png`;
+                        link.href = canvas.toDataURL();
+                        link.click();
+                        alert("Partage natif non supporté sur cet appareil. L'image a été téléchargée. Vous pouvez maintenant la partager sur WhatsApp manuellement avec le lien : " + url);
+                    }
+                });
+            } catch (err) {
+                console.error('Capture failed', err);
+                if (wrapper.parentNode) document.body.removeChild(wrapper);
+                toast.remove();
+                alert("Impossible de générer l'image. Veuillez réessayer.");
+            }
+        }
+        
+        // Image expansion logic
+        document.querySelectorAll('img.post-image').forEach(img => {
+            img.addEventListener('click', function(e) {
+                if (this.dataset.full) {
+                    e.preventDefault();
+                    if (this.src === this.dataset.thumb) {
+                        this.src = this.dataset.full;
+                        this.style.maxWidth = '100%';
+                        this.style.maxHeight = 'none';
+                    } else {
+                        this.src = this.dataset.thumb;
+                        this.style.maxWidth = ''; // Reset to class default
+                        this.style.maxHeight = '';
+                    }
+                }
+            });
+        });
+
+        // Register Service Worker
+        if ('serviceWorker' in navigator) {
+            window.addEventListener('load', () => {
+                navigator.serviceWorker.register('/sw.js')
+                    .then(reg => console.log('SW Registered'))
+                    .catch(err => console.log('SW Registration Failed', err));
+            });
+        }
+
+        function previewFiles(input, previewId) {
+            const preview = document.getElementById(previewId);
+            if (!preview) return;
+            preview.innerHTML = '';
+            if (input.files) {
+                Array.from(input.files).forEach(file => {
+                    const reader = new FileReader();
+                    reader.onload = function(e) {
+                        if (file.type.startsWith('image/')) {
+                            const img = document.createElement('img');
+                            img.src = e.target.result;
+                            img.className = 'w-20 h-20 object-cover rounded shadow-sm';
+                            preview.appendChild(img);
+                        } else if (file.type.startsWith('video/')) {
+                            const vid = document.createElement('video');
+                            vid.src = e.target.result;
+                            vid.className = 'w-20 h-20 object-cover rounded shadow-sm bg-black';
+                            preview.appendChild(vid);
+                        }
+                    }
+                    reader.readAsDataURL(file);
+                });
+            }
+        }
+    </script>
+</body>
+</html>

templates/board.html

@@ -0,0 +1,151 @@
+{% extends 'base.html' %}
+
+{% block title %}/{{ board.slug }}/ - {{ board.name }}{% endblock %}
+
+{% block content %}
+<div class="mb-6 px-4 pt-4">
+    <h1 class="text-2xl font-bold text-gray-900 tracking-tight">/{{ board.slug }}/ - {{ board.name }}</h1>
+    <p class="text-gray-500 text-sm mt-1">{{ board.description }}</p>
+</div>
+
+<!-- Threads List -->
+<div class="space-y-4 px-2 pb-24">
+    {% for thread in threads %}
+    <div class="bg-white p-4 rounded-xl border border-gray-100 shadow-sm" id="post-{{ thread.id }}">
+        <div class="flex gap-4">
+             <!-- Thumbnails -->
+            {% if thread.files %}
+            <div class="flex-shrink-0 flex flex-col gap-2">
+                {% for file in thread.files[:1] %} <!-- Show only first file as thumbnail -->
+                    {% if file.filename.endswith(('.mp4', '.webm')) %}
+                    <video controls class="w-24 h-24 sm:w-32 sm:h-32 object-cover rounded-lg bg-black">
+                        <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) }}" 
+                        data-thumb="{{ url_for('static', filename='uploads/' + file.filename) }}"
+                        data-full="{{ url_for('static', filename='uploads/' + file.filename) }}"
+                        alt="Post image" 
+                        class="post-image w-24 h-24 sm:w-32 sm:h-32 object-cover rounded-lg cursor-pointer hover:opacity-90 transition-opacity bg-gray-100"
+                    >
+                    {% endif %}
+                {% endfor %}
+                {% if thread.files|length > 1 %}
+                <span class="text-xs text-gray-500 text-center">+ {{ thread.files|length - 1 }} autres</span>
+                {% endif %}
+            </div>
+            {% endif %}
+            
+            <div class="flex-grow min-w-0"> <!-- min-w-0 for truncation -->
+                <div class="flex items-center text-xs text-gray-500 mb-2 space-x-2">
+                    <span class="font-bold text-gray-900">{{ thread.nickname }}</span>
+                    <span>{{ thread.created_at.strftime('%d/%m %H:%M') }}</span>
+                    <a href="{{ url_for('thread', thread_id=thread.id) }}" class="text-blue-500 hover:underline">N° {{ thread.id }}</a>
+                </div>
+                
+                <div class="text-gray-800 text-base leading-relaxed break-words line-clamp-4 mb-3">
+                    {{ thread.content|default('', true)|truncate(300)|format_post }}
+                </div>
+                
+                <div class="flex items-center justify-between">
+                    <a href="{{ url_for('thread', thread_id=thread.id) }}" class="text-sm font-medium text-blue-600 hover:text-blue-800 bg-blue-50 px-3 py-1 rounded-full">
+                        Voir le fil
+                        {% if thread.replies|length > 0 %}
+                        <span class="ml-1 text-blue-800">({{ thread.replies|length }})</span>
+                        {% endif %}
+                    </a>
+                    <button class="text-green-600 hover:text-green-800 p-2 rounded-full hover:bg-green-50" onclick="sharePost('{{ thread.id }}', '{{ url_for('thread', thread_id=thread.id, _external=True) }}')" title="Partager">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z" />
+                        </svg>
+                    </button>
+                </div>
+
+                <!-- Latest replies preview (Desktop only maybe? Or simplified) -->
+                {% set recent_replies = thread.replies[-2:] %}
+                {% if recent_replies %}
+                <div class="mt-4 space-y-2 border-l-2 border-gray-100 pl-3">
+                    {% for reply in recent_replies %}
+                    <div class="text-sm text-gray-600">
+                        <span class="text-xs text-gray-400">>> {{ reply.created_at.strftime('%H:%M') }}</span>
+                        <span class="line-clamp-1">{{ reply.content|truncate(100) }}</span>
+                    </div>
+                    {% endfor %}
+                </div>
+                {% endif %}
+            </div>
+        </div>
+    </div>
+    {% else %}
+    <div class="text-center text-gray-400 py-12 bg-white rounded-xl border border-gray-100 border-dashed">
+        <p>C'est calme ici. Lancez une conversation.</p>
+    </div>
+    {% endfor %}
+</div>
+
+<!-- Floating Action Button -->
+<button id="fab-button" onclick="togglePostForm()" class="fixed bottom-6 right-6 bg-blue-600 hover:bg-blue-700 text-white rounded-full p-4 shadow-lg transition-transform hover:scale-105 active:scale-95 z-40 flex items-center justify-center w-14 h-14">
+    <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
+    </svg>
+</button>
+
+<!-- Hidden Modal Form -->
+<div id="post-form-container" class="hidden fixed inset-0 z-50 flex items-end sm:items-center justify-center bg-gray-900 bg-opacity-40 backdrop-blur-sm p-0 sm:p-4">
+    <!-- Overlay click to close -->
+    <div class="absolute inset-0" onclick="togglePostForm()"></div>
+    
+    <div class="bg-white w-full max-w-lg rounded-t-2xl sm:rounded-2xl shadow-2xl transform transition-all relative z-10 flex flex-col max-h-[90vh]">
+        <div class="flex justify-between items-center p-4 border-b border-gray-100">
+            <h3 class="text-lg font-bold text-gray-900">Nouveau fil</h3>
+            <button onclick="togglePostForm()" class="text-gray-400 hover:text-gray-600 p-2 rounded-full hover:bg-gray-100">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+            </button>
+        </div>
+        
+        <div class="p-6 overflow-y-auto">
+             <form method="POST" enctype="multipart/form-data" class="space-y-5">
+                {{ form.hidden_tag() }}
+                <div class="hidden">
+                    {{ form.honeypot() }}
+                </div>
+                <div>
+                    <label class="block text-gray-700 text-sm font-semibold mb-2" for="nickname">Pseudo</label>
+                    {{ form.nickname(class="w-full bg-gray-50 text-gray-900 border border-gray-200 rounded-lg py-3 px-4 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent", placeholder="Pseudo (Optionnel)") }}
+                </div>
+                <div>
+                    <label class="block text-gray-700 text-sm font-semibold mb-2" for="content">Message</label>
+                    {{ form.content(class="w-full bg-gray-50 text-gray-900 border border-gray-200 rounded-lg py-3 px-4 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent h-40 resize-none text-base", placeholder="Écrivez quelque chose...") }}
+                    {% for error in form.content.errors %}
+                        <p class="text-red-500 text-xs mt-1">{{ error }}</p>
+                    {% endfor %}
+                </div>
+                <div>
+                    <label class="block text-gray-700 text-sm font-semibold mb-2" for="files">Images ou Vidéos</label>
+                    <div class="flex items-center justify-center w-full">
+                        <label for="files" class="flex flex-col items-center justify-center w-full h-32 border-2 border-gray-200 border-dashed rounded-lg cursor-pointer bg-gray-50 hover:bg-gray-100">
+                            <div class="flex flex-col items-center justify-center pt-5 pb-6">
+                                <svg class="w-8 h-8 mb-4 text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 16">
+                                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 13h3a3 3 0 0 0 0-6h-.025A5.56 5.56 0 0 0 16 6.5 5.5 0 0 0 5.207 5.021C5.137 5.017 5.071 5 5 5a4 4 0 0 0 0 8h2.167M10 15V6m0 0L8 8m2-2 2 2"/>
+                                </svg>
+                                <p class="text-sm text-gray-500"><span class="font-semibold">Cliquez pour uploader</span></p>
+                            </div>
+                            {{ form.files(class="hidden", multiple=True, accept="image/*,video/*", onchange="previewFiles(this, 'preview-board')") }}
+                        </label>
+                    </div> 
+                    <div id="preview-board" class="flex flex-wrap gap-2 mt-2"></div>
+                    {% for error in form.files.errors %}
+                        <p class="text-red-500 text-xs mt-1">{{ error }}</p>
+                    {% endfor %}
+                </div>
+                <div class="pt-2">
+                    {{ form.submit(class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-lg cursor-pointer shadow-md active:scale-95 transition-transform") }}
+                </div>
+             </form>
+        </div>
+    </div>
+</div>
+{% endblock %}

templates/index.html

@@ -0,0 +1,18 @@
+{% 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>
+{% endblock %}

templates/thread.html

@@ -0,0 +1,346 @@
+{% extends 'base.html' %}
+
+{% block title %}/{{ board.slug }}/ - Thread #{{ thread.id }}{% endblock %}
+
+{% block content %}
+<!-- Add padding bottom to account for fixed bottom bar -->
+<div class="max-w-4xl mx-auto pb-40 px-3 sm:px-6">
+    <div class="mb-6 pt-6">
+        <a href="{{ url_for('board', slug=board.slug) }}" 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 à /{{ board.slug }}/
+        </a>
+    </div>
+
+    <!-- Main Thread Post -->
+    <!-- "Think Harder": Make OP look distinct, like a primary content block, not just another box -->
+    <div class="bg-white rounded-2xl shadow-sm border border-slate-100 p-5 sm:p-6 mb-10 relative overflow-hidden" id="post-{{ thread.id }}">
+        <!-- Decorative subtle background gradient for OP -->
+        <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-blue-500 via-indigo-500 to-purple-500"></div>
+
+        <div class="flex flex-col gap-6">
+            <!-- Header: Author & Meta -->
+            <div class="flex items-center justify-between border-b border-slate-50 pb-4">
+                <div class="flex items-center gap-3">
+                     <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-lg shadow-md select-none">
+                        {{ thread.nickname[0] | upper }}
+                    </div>
+                    <div class="flex flex-col">
+                        <span class="font-bold text-slate-900 text-sm">{{ thread.nickname }}</span>
+                        <div class="flex items-center text-xs text-slate-400 gap-2">
+                             <span>{{ thread.created_at.strftime('%d %b %Y à %H:%M') }}</span>
+                             <span class="w-1 h-1 rounded-full bg-slate-300"></span>
+                             <a href="#post-{{ thread.id }}" class="hover:text-blue-500">N° {{ thread.id }}</a>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="flex gap-2">
+                     <button class="text-slate-400 hover:text-blue-600 p-2 hover:bg-slate-50 rounded-full transition-colors" onclick="scrollToReply('{{ thread.id }}')" title="Répondre">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6" />
+                        </svg>
+                    </button>
+                    <button class="text-slate-400 hover:text-green-600 p-2 hover:bg-green-50 rounded-full transition-colors" onclick="sharePost('{{ thread.id }}', '{{ url_for('thread', thread_id=thread.id, _external=True) }}')" title="Partager">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z" />
+                        </svg>
+                    </button>
+                </div>
+            </div>
+
+            <!-- Content Body -->
+            <div class="space-y-6">
+                <!-- Text -->
+                <div class="prose prose-slate max-w-none text-slate-800 text-lg leading-relaxed break-words">
+                    {{ thread.content|format_post }}
+                </div>
+
+                <!-- Media Grid -->
+                {% if thread.files %}
+                <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
+                    {% for file in thread.files %}
+                        <div class="relative group rounded-xl overflow-hidden bg-slate-100 border border-slate-200 shadow-sm">
+                            {% if file.filename.endswith(('.mp4', '.webm')) %}
+                            <video controls class="w-full h-full object-cover max-h-[500px]">
+                                <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) }}"
+                                data-thumb="{{ url_for('static', filename='uploads/' + file.filename) }}"
+                                data-full="{{ url_for('static', filename='uploads/' + file.filename) }}"
+                                alt="Post image"
+                                class="post-image w-full h-auto object-contain max-h-[500px] cursor-pointer"
+                            >
+                            {% endif %}
+                            <a href="{{ url_for('static', filename='uploads/' + file.filename) }}" target="_blank" class="absolute bottom-2 right-2 bg-black/50 text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity backdrop-blur-sm">
+                                Full Size
+                            </a>
+                        </div>
+                    {% endfor %}
+                </div>
+                {% endif %}
+            </div>
+        </div>
+    </div>
+
+    <!-- Replies List (Chat/Social Style) -->
+    <!-- "Think Harder": Use spacing and grouping to make it feel like a flowing conversation -->
+    <div class="space-y-6" id="comments-list">
+        {% for reply in replies %}
+        <div class="group flex gap-3 sm:gap-4 animate-fade-in" id="post-{{ reply.id }}">
+            <!-- Avatar -->
+            <div class="flex-shrink-0 pt-1">
+                <div class="w-9 h-9 rounded-full bg-slate-200 flex items-center justify-center text-slate-500 font-bold text-xs shadow-sm select-none border border-white">
+                    {{ reply.nickname[0] | upper }}
+                </div>
+            </div>
+
+            <div class="flex-grow min-w-0 max-w-full">
+                <div class="flex flex-col items-start">
+                    
+                    <!-- Bubble Container -->
+                    <div class="relative max-w-full sm:max-w-[85%]">
+                        <!-- Name (Facebook style: outside top left, or inside?)
+                             Let's do: Name slightly outside for clarity, bubble below.
+                        -->
+                        <span class="text-[13px] text-slate-900 font-bold ml-3 mb-1 block">
+                            {{ reply.nickname }}
+                            <!-- Optional: ID pill -->
+                            <span class="text-[10px] text-slate-400 font-normal ml-1">#{{ reply.id }}</span>
+                        </span>
+
+                        <div class="bg-slate-100 rounded-2xl rounded-tl-md px-4 py-3 text-slate-800 break-words shadow-sm border border-slate-200/50">
+                            <!-- Reply files -->
+                            {% if reply.files %}
+                            <div class="flex flex-wrap gap-2 mb-3">
+                                {% for file in reply.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-64">
+                                            <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) }}"
+                                            data-thumb="{{ url_for('static', filename='uploads/' + file.filename) }}"
+                                            data-full="{{ url_for('static', filename='uploads/' + file.filename) }}"
+                                            alt="Post image"
+                                            class="post-image max-w-full max-h-64 object-cover cursor-pointer hover:opacity-95 transition-opacity"
+                                        >
+                                        {% endif %}
+                                    </div>
+                                {% endfor %}
+                            </div>
+                            {% endif %}
+
+                            <div class="prose prose-sm max-w-none text-[15px] leading-snug text-slate-800">
+                                {{ reply.content|format_post }}
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Metadata / Actions Line -->
+                    <div class="flex items-center gap-4 mt-1.5 ml-3 text-xs text-slate-500 font-medium">
+                        <span>{{ reply.created_at.strftime('%H:%M') }}</span> <!-- Simplify time -->
+
+                        <button class="text-slate-600 hover:text-blue-600 font-bold cursor-pointer transition-colors" onclick="scrollToReply('{{ reply.id }}')">
+                            Répondre
+                        </button>
+
+                        <button class="hover:text-green-600 flex items-center gap-1 transition-colors" onclick="sharePost('{{ reply.id }}', '{{ url_for('thread', thread_id=thread.id, _external=True) }}#post-{{ reply.id }}')">
+                           Partager
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+        {% endfor %}
+    </div>
+</div>
+
+<!-- Sticky Bottom Input Bar -->
+<!-- "Think Harder": Floating Pill Design -->
+<div class="fixed bottom-0 left-0 right-0 z-50 pointer-events-none pb-safe">
+    <div class="bg-gradient-to-t from-white via-white/95 to-transparent pt-10 pb-2 px-2 sm:px-4 pointer-events-auto">
+        <div class="max-w-4xl mx-auto w-full">
+
+            <!-- Reply Context (Floating above bar) -->
+            <div id="reply-context" class="hidden mb-2 mx-2 bg-white/90 backdrop-blur border border-blue-100 shadow-lg rounded-xl px-4 py-2 flex justify-between items-center text-xs text-blue-600 animate-slide-up">
+                <span class="flex items-center gap-2">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6" />
+                    </svg>
+                    Réponse au post #<span id="reply-to-id" class="font-bold"></span>
+                </span>
+                <button onclick="clearReplyContext()" class="text-slate-400 hover:text-slate-600 p-1 rounded-full hover:bg-slate-100">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                    </svg>
+                </button>
+            </div>
+
+            <!-- File Previews (Floating above bar) -->
+            <div id="preview-reply" class="hidden mb-2 mx-2 flex gap-2 overflow-x-auto p-2 bg-white/90 backdrop-blur border border-slate-100 rounded-xl shadow-lg scrollbar-hide">
+                <!-- JS populates this -->
+            </div>
+
+            <form method="POST" enctype="multipart/form-data" class="bg-white shadow-[0_0_20px_rgba(0,0,0,0.1)] rounded-[2rem] p-1.5 flex items-end gap-2 border border-slate-100" id="sticky-form">
+                {{ form.hidden_tag() }}
+                <div class="hidden">
+                    {{ form.honeypot() }}
+                </div>
+
+                <!-- Nickname Toggle Button -->
+                <div class="relative shrink-0">
+                     <button type="button" onclick="document.getElementById('nickname-input').classList.toggle('hidden')" class="w-10 h-10 flex items-center justify-center text-slate-400 hover:text-blue-500 rounded-full hover:bg-slate-50 transition-colors" title="Identité">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
+                        </svg>
+                     </button>
+                     <!-- Popup Nickname Input -->
+                     <div id="nickname-input" class="hidden absolute bottom-full left-0 mb-4 ml-1 w-56 bg-white shadow-xl border border-slate-100 rounded-2xl p-3 animate-fade-in-up">
+                        <label class="block text-xs font-bold text-slate-500 mb-1">Votre Pseudo</label>
+                        {{ form.nickname(class="w-full text-sm bg-slate-50 border-transparent rounded-lg focus:ring-2 focus:ring-blue-500 focus:bg-white transition-all px-3 py-2", placeholder="Anonyme") }}
+                     </div>
+                </div>
+
+                <!-- File Upload Button -->
+                <label for="files" class="w-10 h-10 flex items-center justify-center text-slate-400 hover:text-blue-500 rounded-full hover:bg-slate-50 cursor-pointer transition-colors shrink-0" title="Ajouter médias">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
+                    </svg>
+                    {{ form.files(class="hidden", multiple=True, accept="image/*,video/*", onchange="previewFiles(this, 'preview-reply')") }}
+                </label>
+
+                <!-- Text Input -->
+                <div class="flex-grow py-2">
+                    {{ form.content(class="w-full bg-transparent border-none focus:ring-0 p-0 text-slate-800 placeholder-slate-400 resize-none max-h-32 min-h-[1.5rem] leading-relaxed", placeholder="Ajouter un commentaire...", rows="1", oninput="this.style.height = ''; this.style.height = this.scrollHeight + 'px'") }}
+                </div>
+
+                <!-- Submit Button -->
+                <button type="submit" class="w-10 h-10 flex items-center justify-center bg-blue-600 hover:bg-blue-700 text-white rounded-full transition-all shadow-md hover:shadow-lg active:scale-95 shrink-0">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-0.5" viewBox="0 0 20 20" fill="currentColor">
+                        <path d="M10.894 2.553a1 1 0 00-1.788 0l-7 14a1 1 0 001.169 1.409l5-1.429A1 1 0 009 15.571V11a1 1 0 112 0v4.571a1 1 0 00.725.962l5 1.428a1 1 0 001.17-1.408l-7-14z" />
+                    </svg>
+                </button>
+            </form>
+        </div>
+    </div>
+</div>
+
+<style>
+    /* Custom animations for smooth feel */
+    @keyframes fadeIn {
+        from { opacity: 0; }
+        to { opacity: 1; }
+    }
+    .animate-fade-in {
+        animation: fadeIn 0.3s ease-out forwards;
+    }
+    @keyframes fadeInUp {
+        from { opacity: 0; transform: translateY(10px); }
+        to { opacity: 1; transform: translateY(0); }
+    }
+    .animate-fade-in-up {
+        animation: fadeInUp 0.2s ease-out forwards;
+    }
+    @keyframes slideUp {
+        from { opacity: 0; transform: translateY(10px); }
+        to { opacity: 1; transform: translateY(0); }
+    }
+    .animate-slide-up {
+        animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+    }
+    .pb-safe {
+        padding-bottom: env(safe-area-inset-bottom);
+    }
+    .scrollbar-hide::-webkit-scrollbar {
+        display: none;
+    }
+    .scrollbar-hide {
+        -ms-overflow-style: none;
+        scrollbar-width: none;
+    }
+</style>
+
+<script>
+    // Custom file preview for the sticky bar
+    function previewFiles(input, previewId) {
+        const preview = document.getElementById(previewId);
+        const container = preview;
+
+        container.innerHTML = '';
+        container.classList.remove('hidden');
+
+        if (input.files) {
+            if (input.files.length === 0) {
+                container.classList.add('hidden');
+                return;
+            }
+
+            Array.from(input.files).forEach(file => {
+                const reader = new FileReader();
+                reader.onload = function(e) {
+                    const div = document.createElement('div');
+                    div.className = 'relative flex-shrink-0 w-16 h-16 group';
+
+                    let content;
+                    if (file.type.startsWith('video/')) {
+                        content = `<video src="${e.target.result}" class="w-full h-full object-cover rounded-lg bg-black"></video>`;
+                    } else {
+                        content = `<img src="${e.target.result}" class="w-full h-full object-cover rounded-lg border border-slate-200 shadow-sm">`;
+                    }
+
+                    // Add remove button overlay
+                    const removeBtn = document.createElement('div');
+                    removeBtn.innerHTML = `
+                        <div class="absolute inset-0 bg-black/40 flex items-center justify-center rounded-lg opacity-0 group-hover:opacity-100 transition-opacity">
+                            <svg class="w-6 h-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
+                        </div>
+                    `;
+
+                    div.innerHTML = content;
+                    div.appendChild(removeBtn); // Append the overlay
+
+                    // Note: Actual file removal from input requires DataTransfer API which is complex for this simple UI,
+                    // so we just visually show it. For now let's keep it simple.
+                    container.appendChild(div);
+                }
+                reader.readAsDataURL(file);
+            });
+        }
+    }
+
+    function scrollToReply(id) {
+        const textarea = document.querySelector('textarea[name="content"]');
+        textarea.focus();
+        textarea.value += '>>' + id + '\n';
+        // Trigger auto resize
+        textarea.style.height = 'auto';
+        textarea.style.height = textarea.scrollHeight + 'px';
+
+        // Update UI for "Replying to..."
+        const context = document.getElementById('reply-context');
+        const contextId = document.getElementById('reply-to-id');
+        context.classList.remove('hidden');
+        contextId.textContent = id;
+    }
+
+    function clearReplyContext() {
+        document.getElementById('reply-context').classList.add('hidden');
+    }
+
+    // Auto-resize textarea on page load if content exists (e.g. after error)
+    document.addEventListener('DOMContentLoaded', function() {
+        const textarea = document.querySelector('textarea[name="content"]');
+        if (textarea.value) {
+            textarea.style.height = textarea.scrollHeight + 'px';
+        }
+    });
+</script>
+
+{% endblock %}

verification/capture_before.py

@@ -0,0 +1,39 @@
+from playwright.sync_api import sync_playwright
+import time
+
+def run():
+    with sync_playwright() as p:
+        browser = p.chromium.launch(headless=True)
+        context = browser.new_context(viewport={'width': 414, 'height': 896}) # iPhone 11 Pro dimensions
+        page = context.new_page()
+
+        # Go to a board
+        page.goto('http://127.0.0.1:5000/g/')
+
+        # Click on the first thread to go to thread view
+        print("Navigating to thread...")
+        # Try finding the link by href or text
+        # The 'Voir le fil' button
+        link = page.locator("a", has_text="Voir le fil").first
+        if link.count() > 0:
+            link.click()
+            page.wait_for_load_state('networkidle')
+
+            # Add a reply if not present (optional, but good for visualization)
+            if page.locator("#comments-list > div").count() == 0:
+                 print("Adding a reply...")
+                 page.fill('textarea[name="content"]', "This is a test reply to check the UI.")
+                 page.click('button[type="submit"]')
+                 page.wait_for_load_state('networkidle')
+
+            # Take a screenshot of the thread view
+            print("Taking screenshot...")
+            page.screenshot(path='verification/before_changes.png', full_page=True)
+        else:
+            print("Could not find a thread link. Dumping page content.")
+            print(page.content())
+
+        browser.close()
+
+if __name__ == "__main__":
+    run()

verification/verify_comments.py

@@ -0,0 +1,52 @@
+from playwright.sync_api import sync_playwright
+
+def verify_comments_layout():
+    with sync_playwright() as p:
+        browser = p.chromium.launch(headless=True)
+        # Use a mobile viewport to check the sticky bar
+        context = browser.new_context(viewport={'width': 375, 'height': 812})
+        page = context.new_page()
+
+        # Go to the home page first to ensure DB is init
+        page.goto("http://127.0.0.1:5000/")
+
+        # Navigate to a board
+        page.click("text=Général")
+
+        # Create a thread so we have something to comment on
+        # Open the modal first
+        page.click("#fab-button")
+
+        page.fill("textarea[name='content']", "Hello World Thread")
+
+        # The submit button text comes from the WTF SubmitField('Envoyer')
+        page.click("input[value='Envoyer']")
+
+        # Now click the "Répondre" button on the thread in the board view to go to thread detail
+        # Or just click the "No X" link
+        # The page reloads, so we should see the new thread
+        page.click(".text-blue-500", strict=False) # Click the first link like "N° 1"
+
+        # Now we are in the thread view.
+        # 1. Check if the sticky bottom bar is visible
+        page.wait_for_selector("#sticky-form")
+
+        # 2. Add a comment
+        page.fill("#sticky-form textarea[name='content']", "First reply!")
+        # The thread view uses a custom icon button for submit, not the WTForms 'Envoyer' input
+        page.click("#sticky-form button[type='submit']")
+
+        # 3. Add another comment
+        page.fill("#sticky-form textarea[name='content']", "Second reply!")
+        page.click("#sticky-form button[type='submit']")
+
+        # 4. Check if comments are displayed in bubbles
+        page.wait_for_selector("#comments-list")
+
+        # Take a screenshot of the thread with comments and the sticky bar
+        page.screenshot(path="verification/thread_view.png", full_page=False)
+
+        browser.close()
+
+if __name__ == "__main__":
+    verify_comments_layout()