|
<!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> |
|
|
