| <!DOCTYPE html> |
| <html lang="fr"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>{% block title %}Forum Communautaire{% endblock %}</title> |
| |
| |
| <meta name="csrf-token" content="{{ csrf_token() }}"> |
| |
| |
| <meta name="theme-color" content="#2563eb"> |
| <meta name="description" content="Plateforme de discussion communautaire moderne et conviviale"> |
| <link rel="manifest" href="{{ url_for('static', filename='manifest.json') }}"> |
| <link rel="icon" href="{{ url_for('static', filename='icons/icon-192x192.png') }}"> |
| <link rel="apple-touch-icon" href="{{ url_for('static', filename='icons/icon-192x192.png') }}"> |
| |
| |
| <script src="https://cdn.tailwindcss.com"></script> |
| |
| |
| <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}"> |
| |
| |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| |
| {% block extra_css %}{% endblock %} |
| </head> |
| <body class="bg-gray-50 text-gray-800 min-h-screen flex flex-col {% if current_user.is_authenticated %}logged-in{% endif %}"> |
| |
| <header class="bg-white shadow"> |
| <div class="container mx-auto px-4 py-4"> |
| <div class="flex flex-wrap items-center justify-between"> |
| |
| <div class="flex items-center"> |
| <a href="{{ url_for('forum.index') }}" class="text-xl font-bold text-blue-600"> |
| Forum Communautaire |
| </a> |
| </div> |
| |
| |
| <div class="hidden md:block w-full md:w-auto my-2 md:my-0 md:mx-4 lg:mx-8 flex-grow max-w-md"> |
| <form id="search-form" action="{{ url_for('forum.search') }}" method="get" class="flex"> |
| <input |
| type="search" |
| id="search-input" |
| name="q" |
| placeholder="Rechercher des sujets..." |
| class="w-full px-4 py-2 border border-gray-300 rounded-l-lg focus-ring" |
| > |
| <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded-r-lg hover:bg-blue-700 focus:outline-none focus:ring"> |
| <span class="sr-only">Rechercher</span> |
| <i data-feather="search" class="w-5 h-5"></i> |
| </button> |
| </form> |
| </div> |
| |
| |
| <nav class="hidden md:flex items-center"> |
| {% if current_user.is_authenticated %} |
| <div class="relative group"> |
| <button class="flex items-center px-4 py-2 text-gray-700 hover:text-blue-600 focus:outline-none focus:ring"> |
| <img |
| src="{{ url_for('static', filename='uploads/avatars/' + current_user.avatar) if current_user.avatar else url_for('static', filename='uploads/avatars/default.png') }}" |
| alt="{{ current_user.username }}" |
| class="w-8 h-8 rounded-full mr-2 object-cover" |
| > |
| <span>{{ current_user.username }}</span> |
| <i data-feather="chevron-down" class="w-4 h-4 ml-1"></i> |
| </button> |
| <div class="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 hidden group-hover:block z-10"> |
| <a href="{{ url_for('user.profile', username=current_user.username) }}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Profil</a> |
| <a href="{{ url_for('user.edit_profile') }}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Modifier Profil</a> |
| <a href="{{ url_for('user.user_posts') }}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Mes Publications</a> |
| {% if current_user.is_moderator() %} |
| <a href="{{ url_for('admin.dashboard') }}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Panneau d'Administration</a> |
| {% endif %} |
| <div class="border-t border-gray-100 my-1"></div> |
| <a href="{{ url_for('auth.logout') }}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Déconnexion</a> |
| </div> |
| </div> |
| {% else %} |
| <a href="{{ url_for('auth.login') }}" class="px-4 py-2 text-gray-700 hover:text-blue-600">Connexion</a> |
| <a href="{{ url_for('auth.register') }}" class="ml-2 px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring">Inscription</a> |
| {% endif %} |
| </nav> |
| |
| |
| <button id="mobile-menu-toggle" class="md:hidden p-2 rounded-md text-gray-700 hover:text-blue-600 hover:bg-gray-100 focus:outline-none focus:ring"> |
| <i data-feather="menu" class="w-6 h-6"></i> |
| </button> |
| </div> |
| |
| |
| <nav id="mobile-menu" class="md:hidden mt-4 hidden"> |
| <div class="flex flex-col space-y-2"> |
| |
| <form action="{{ url_for('forum.search') }}" method="get" class="mb-2"> |
| <div class="flex"> |
| <input |
| type="search" |
| name="q" |
| placeholder="Rechercher des sujets..." |
| class="w-full px-4 py-2 border border-gray-300 rounded-l focus-ring" |
| > |
| <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded-r hover:bg-blue-700 focus:outline-none focus:ring"> |
| <i data-feather="search" class="w-5 h-5"></i> |
| </button> |
| </div> |
| </form> |
| |
| {% if current_user.is_authenticated %} |
| <a href="{{ url_for('user.profile', username=current_user.username) }}" class="px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-md">Profil</a> |
| <a href="{{ url_for('user.edit_profile') }}" class="px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-md">Modifier Profil</a> |
| <a href="{{ url_for('user.user_posts') }}" class="px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-md">Mes Publications</a> |
| {% if current_user.is_moderator() %} |
| <a href="{{ url_for('admin.dashboard') }}" class="px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-md">Panneau d'Administration</a> |
| {% endif %} |
| <a href="{{ url_for('auth.logout') }}" class="px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-md">Déconnexion</a> |
| {% else %} |
| <a href="{{ url_for('auth.login') }}" class="px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-md">Connexion</a> |
| <a href="{{ url_for('auth.register') }}" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700">Inscription</a> |
| {% endif %} |
| </div> |
| </nav> |
| </div> |
| </header> |
| |
| |
| <div class="bg-white border-b border-gray-200"> |
| <div class="container mx-auto px-4 py-2"> |
| <div class="flex justify-between items-center"> |
| <nav class="text-sm text-gray-500" aria-label="Fil d'Ariane"> |
| {% block breadcrumb %} |
| <a href="{{ url_for('forum.index') }}" class="hover:text-blue-600">Accueil</a> |
| {% endblock %} |
| </nav> |
| |
| |
| <div id="install-container" class="hidden"> |
| <button id="install-button" class="flex items-center px-3 py-1 bg-blue-600 text-white text-sm rounded-md hover:bg-blue-700 focus:outline-none focus:ring transition-colors"> |
| <i data-feather="download" class="w-4 h-4 mr-1"></i> |
| Installer l'application |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| {% with messages = get_flashed_messages(with_categories=true) %} |
| {% if messages %} |
| <div class="container mx-auto px-4 pt-4"> |
| {% for category, message in messages %} |
| <div class="flash-message px-4 py-3 rounded-md mb-4 {% if category == 'success' %}bg-green-100 text-green-800{% elif category == 'danger' %}bg-red-100 text-red-800{% elif category == 'warning' %}bg-yellow-100 text-yellow-800{% else %}bg-blue-100 text-blue-800{% endif %}"> |
| {{ message }} |
| <button class="float-right focus:outline-none" onclick="this.parentElement.style.display='none'"> |
| <i data-feather="x" class="w-4 h-4"></i> |
| </button> |
| </div> |
| {% endfor %} |
| </div> |
| {% endif %} |
| {% endwith %} |
| |
| |
| <main class="flex-grow container mx-auto px-4 py-6"> |
| {% block content %}{% endblock %} |
| </main> |
| |
| |
| <footer class="bg-white border-t border-gray-200 mt-auto"> |
| <div class="container mx-auto px-4 py-6"> |
| <div class="flex flex-col md:flex-row justify-between items-center"> |
| <div class="mb-4 md:mb-0"> |
| <p class="text-gray-600 text-sm"> |
| © {{ now().year }} Forum Communautaire - Tous droits réservés |
| </p> |
| </div> |
| <div class="flex space-x-4"> |
| <a href="#" class="text-gray-500 hover:text-blue-600">À propos</a> |
| <a href="#" class="text-gray-500 hover:text-blue-600">Conditions</a> |
| <a href="#" class="text-gray-500 hover:text-blue-600">Confidentialité</a> |
| <a href="#" class="text-gray-500 hover:text-blue-600">Contact</a> |
| </div> |
| </div> |
| </div> |
| </footer> |
| |
| |
| <script src="{{ url_for('static', filename='js/forum.js') }}"></script> |
| {% block extra_js %}{% endblock %} |
| |
| |
| <script src="{{ url_for('static', filename='js/pwa-installer.js') }}"></script> |
| <script> |
| |
| if ('serviceWorker' in navigator) { |
| window.addEventListener('load', () => { |
| navigator.serviceWorker.register('{{ url_for("static", filename="js/service-worker.js") }}') |
| .then(registration => { |
| console.log('Service Worker enregistré avec succès:', registration); |
| }).catch(error => { |
| console.log('Erreur lors de l\'enregistrement du Service Worker:', error); |
| }); |
| }); |
| } |
| |
| |
| feather.replace(); |
| |
| |
| document.getElementById('mobile-menu-toggle').addEventListener('click', function() { |
| const menu = document.getElementById('mobile-menu'); |
| menu.classList.toggle('hidden'); |
| }); |
| </script> |
| </body> |
| </html> |
|
|
