File size: 12,108 Bytes
91073d4 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 |
<!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>
<!-- CSRF Token Meta -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<!-- PWA Meta -->
<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') }}">
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Custom CSS -->
<link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
<!-- Feather Icons -->
<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 -->
<header class="bg-white shadow">
<div class="container mx-auto px-4 py-4">
<div class="flex flex-wrap items-center justify-between">
<!-- Logo -->
<div class="flex items-center">
<a href="{{ url_for('forum.index') }}" class="text-xl font-bold text-blue-600">
Forum Communautaire
</a>
</div>
<!-- Search Form -->
<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>
<!-- Navigation -->
<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>
<!-- Mobile Menu Toggle -->
<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>
<!-- Mobile Navigation (hidden by default) -->
<nav id="mobile-menu" class="md:hidden mt-4 hidden">
<div class="flex flex-col space-y-2">
<!-- Mobile Search -->
<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>
<!-- Breadcrumb -->
<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>
<!-- Bouton d'installation PWA -->
<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>
<!-- Flash Messages -->
{% 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 Content -->
<main class="flex-grow container mx-auto px-4 py-6">
{% block content %}{% endblock %}
</main>
<!-- Footer -->
<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>
<!-- JavaScript -->
<script src="{{ url_for('static', filename='js/forum.js') }}"></script>
{% block extra_js %}{% endblock %}
<!-- PWA Scripts -->
<script src="{{ url_for('static', filename='js/pwa-installer.js') }}"></script>
<script>
// Service Worker Registration
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);
});
});
}
// Initialize Feather icons
feather.replace();
// Mobile menu toggle
document.getElementById('mobile-menu-toggle').addEventListener('click', function() {
const menu = document.getElementById('mobile-menu');
menu.classList.toggle('hidden');
});
</script>
</body>
</html>
|