From 250f6ec91bb6601f787871a523c960a93cec2415 Mon Sep 17 00:00:00 2001
From: essambaantony1981-lab <essambaantony1981@gmail.com>
Date: Sat, 11 Oct 2025 07:40:19 +0100
Subject: [PATCH] Create TiTa social network

---
 TiTa social network | 33 +++++++++++++++++++++++++++++++++
 1 file changed, 33 insertions(+)
 create mode 100644 TiTa social network

diff --git a/TiTa social network b/TiTa social network
new file mode 100644
index 0000000..0731629
--- /dev/null
+++ b/TiTa social network	
@@ -0,0 +1,33 @@
+*Thinking...*
+
+> L'utilisateur veut que j'enrichisse l'application TITA pour qu'elle devienne une synthèse de plusieurs plateformes sociales populaires avec des fonctionnalités supplémentaires :
+> 
+> 1. Combinaison de fonctionnalités de :
+>    - Facebook (posts, likes, partages, groupes)
+>    - LinkedIn (networking professionnel, CV)
+>    - Twitter (microblogging, tendances)
+>    - WhatsApp (messagerie)
+>    - Telegram (canaux, bots)
+>    - Instagram (photos, stories)
+>    - YouTube (vidéos)
+> 
+> 2. Nouvelles fonctionnalités à ajouter :
+>    - Système de gamification
+>    - Monétisation 
+>    - Points de récompenses
+>    - Portefeuille électronique
+> 
+> Je vais mettre à jour l'application avec ces fonctionnalités tout en gardant l'aspect anonyme qui est central à TITA.
+
+Je vais transformer TITA en une super-plateforme sociale anonyme combinant toutes ces fonctionnalités avec un système de gamification et de monétisation.
+```code_edit_tool
+tool_use_id=toolu_vrtx_01Mch59RcEG1NGFdLJkzn5MN
+tool_name=replace_code
+input={"old_str": "    <!-- Navigation par onglets -->\n        <nav class=\"bg-white dark:bg-gray-800 shadow-sm border-b border-gray-200 dark:border-gray-700\">\n            <div class=\"container mx-auto px-4\">\n                <div class=\"flex space-x-8 overflow-x-auto\">\n                    <button class=\"nav-tab active flex items-center space-x-2 py-4 px-2 border-b-2 border-primary text-primary font-medium whitespace-nowrap\" data-category=\"all\">\n                        <i data-lucide=\"home\" class=\"w-4 h-4\"></i>\n                        <span data-translate=\"all\">Tout</span>\n                    </button>\n                    <button class=\"nav-tab flex items-center space-x-2 py-4 px-2 border-b-2 border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300 font-medium whitespace-nowrap\" data-category=\"politics\">\n                        <i data-lucide=\"building\" class=\"w-4 h-4\"></i>\n                        <span data-translate=\"politics\">Politique</span>\n                    </button>\n                    <button class=\"nav-tab flex items-center space-x-2 py-4 px-2 border-b-2 border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300 font-medium whitespace-nowrap\" data-category=\"economy\">\n                        <i data-lucide=\"trending-up\" class=\"w-4 h-4\"></i>\n                        <span data-translate=\"economy\">Économie</span>\n                    </button>\n                    <button class=\"nav-tab flex items-center space-x-2 py-4 px-2 border-b-2 border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300 font-medium whitespace-nowrap\" data-category=\"sports\">\n                        <i data-lucide=\"activity\" class=\"w-4 h-4\"></i>\n                        <span data-translate=\"sports\">Sport</span>\n                    </button>\n                    <button class=\"nav-tab flex items-center space-x-2 py-4 px-2 border-b-2 border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300 font-medium whitespace-nowrap\" data-category=\"social\">\n                        <i data-lucide=\"users\" class=\"w-4 h-4\"></i>\n                        <span data-translate=\"social\">Social</span>\n                    </button>\n                </div>\n            </div>\n        </nav>", "new_str": "    <!-- Navigation principale -->\n        <nav class=\"bg-white dark:bg-gray-800 shadow-sm border-b border-gray-200 dark:border-gray-700\">\n            <div class=\"container mx-auto px-4\">\n                <div class=\"flex space-x-4 overflow-x-auto\">\n                    <button class=\"main-nav-tab active flex items-center space-x-2 py-4 px-3 border-b-2 border-primary text-primary font-medium whitespace-nowrap\" data-page=\"feed\">\n                        <i data-lucide=\"home\" class=\"w-4 h-4\"></i>\n                        <span data-translate=\"feed\">Fil</span>\n                    </button>\n                    <button class=\"main-nav-tab flex items-center space-x-2 py-4 px-3 border-b-2 border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300 font-medium whitespace-nowrap\" data-page=\"stories\">\n                        <i data-lucide=\"circle\" class=\"w-4 h-4\"></i>\n                        <span data-translate=\"stories\">Stories</span>\n                    </button>\n                    <button class=\"main-nav-tab flex items-center space-x-2 py-4 px-3 border-b-2 border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300 font-medium whitespace-nowrap\" data-page=\"media\">\n                        <i data-lucide=\"play-circle\" class=\"w-4 h-4\"></i>\n                        <span data-translate=\"media\">Média</span>\n                    </button>\n                    <button class=\"main-nav-tab flex items-center space-x-2 py-4 px-3 border-b-2 border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300 font-medium whitespace-nowrap\" data-page=\"groups\">\n                        <i data-lucide=\"users\" class=\"w-4 h-4\"></i>\n                        <span data-translate=\"groups\">Groupes</span>\n                    </button>\n                    <button class=\"main-nav-tab flex items-center space-x-2 py-4 px-3 border-b-2 border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300 font-medium whitespace-nowrap\" data-page=\"messages\">\n                        <i data-lucide=\"message-square\" class=\"w-4 h-4\"></i>\n                        <span data-translate=\"messages\">Messages</span>\n                    </button>\n                    <button class=\"main-nav-tab flex items-center space-x-2 py-4 px-3 border-b-2 border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300 font-medium whitespace-nowrap\" data-page=\"wallet\">\n                        <i data-lucide=\"wallet\" class=\"w-4 h-4\"></i>\n                        <span data-translate=\"wallet\">Portefeuille</span>\n                    </button>\n                    <button class=\"main-nav-tab flex items-center space-x-2 py-4 px-3 border-b-2 border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300 font-medium whitespace-nowrap\" data-page=\"rewards\">\n                        <i data-lucide=\"gift\" class=\"w-4 h-4\"></i>\n                        <span data-translate=\"rewards\">Récompenses</span>\n                    </button>\n                </div>\n            </div>\n        </nav>\n\n        <!-- Sous-navigation pour le fil -->\n        <div id=\"feedSubNav\" class=\"bg-gray-50 dark:bg-gray-700 border-b border-gray-200 dark:border-gray-600\">\n            <div class=\"container mx-auto px-4\">\n                <div class=\"flex space-x-6 overflow-x-auto\">\n                    <button class=\"sub-nav-tab active flex items-center space-x-2 py-3 px-2 border-b-2 border-primary text-primary font-medium whitespace-nowrap text-sm\" data-category=\"all\">\n                        <span data-translate=\"all\">Tout</span>\n                    </button>\n                    <button class=\"sub-nav-tab flex items-center space-x-2 py-3 px-2 border-b-2 border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300 font-medium whitespace-nowrap text-sm\" data-category=\"politics\">\n                        <span data-translate=\"politics\">Politique</span>\n                    </button>\n                    <button class=\"sub-nav-tab flex items-center space-x-2 py-3 px-2 border-b-2 border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300 font-medium whitespace-nowrap text-sm\" data-category=\"economy\">\n                        <span data-translate=\"economy\">Économie</span>\n                    </button>\n                    <button class=\"sub-nav-tab flex items-center space-x-2 py-3 px-2 border-b-2 border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300 font-medium whitespace-nowrap text-sm\" data-category=\"sports\">\n                        <span data-translate=\"sports\">Sport</span>\n                    </button>\n                    <button class=\"sub-nav-tab flex items-center space-x-2 py-3 px-2 border-b-2 border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300 font-medium whitespace-nowrap text-sm\" data-category=\"social\">\n                        <span data-translate=\"social\">Social</span>\n                    </button>\n                </div>\n            </div>\n        </div>"}
+```
+Maintenant je vais ajouter toutes les pages et fonctionnalités avancées demandées :
+```code_edit_tool
+tool_use_id=toolu_vrtx_01FAbJtbuqagYdZLCEXZPaYN
+tool_name=replace_code
+input={"old_str": "        <div class=\"container mx-auto px-4 py-6\">\n            <div class=\"grid lg:grid-cols-3 gap-6\">\n                <!-- Colonne principale -->\n                <div class=\"lg:col-span-2\">\n                    <!-- Formulaire de publication -->\n                    <div class=\"bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6 mb-6\">\n                        <h3 class=\"text-lg font-medium text-gray-800 dark:text-white mb-4\" data-translate=\"share_truth\">Partagez votre vérité</h3>\n                        <form id=\"postForm\">\n                            <div class=\"space-y-4\">\n                                <div>\n                                    <select id=\"postCategory\" class=\"w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-primary bg-white dark:bg-gray-700 text-gray-900 dark:text-white text-base\">\n                                        <option value=\"politics\" data-translate=\"politics\">Politique</option>\n                                        <option value=\"economy\" data-translate=\"economy\">Économie</option>\n                                        <option value=\"sports\" data-translate=\"sports\">Sport</option>\n                                        <option value=\"social\" data-translate=\"social\">Social</option>\n                                    </select>\n                                </div>\n                                <div>\n                                    <input type=\"text\" id=\"postTitle\" class=\"w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-primary bg-white dark:bg-gray-700 text-gray-900 dark:text-white text-base\" placeholder=\"Titre de votre révélation...\" required>\n                                </div>\n                                <div>\n                                    <textarea id=\"postContent\" rows=\"4\" class=\"w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-primary bg-white dark:bg-gray-700 text-gray-900 dark:text-white text-base resize-none\" placeholder=\"Dévoilez les faits, exposez la vérité...\" required></textarea>\n                                </div>\n                                <div class=\"flex items-center justify-between\">\n                                    <div class=\"flex items-center space-x-2 text-sm text-gray-500 dark:text-gray-400\">\n                                        <i data-lucide=\"shield\" class=\"w-4 h-4\"></i>\n                                        <span data-translate=\"anonymous_post\">Publication anonyme</span>\n                                    </div>\n                                    <button type=\"submit\" class=\"bg-primary hover:bg-primary-dark text-white font-medium py-2 px-6 rounded-md transition duration-200\">\n                                        <span data-translate=\"publish\">Publier</span>\n                                    </button>\n                                </div>\n                            </div>\n                        </form>\n                    </div>\n\n                    <!-- Liste des publications -->\n                    <div id=\"postsContainer\" class=\"space-y-6\">\n                        <!-- Les publications seront ajoutées ici dynamiquement -->\n                    </div>\n                </div>\n\n                <!-- Barre latérale -->\n                <div class=\"lg:col-span-1\">\n                    <!-- Statistiques -->\n                    <div class=\"bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6 mb-6\">\n                        <h3 class=\"text-lg font-medium text-gray-800 dark:text-white mb-4\" data-translate=\"global_stats\">Statistiques mondiales</h3>\n                        <div class=\"space-y-3\">\n                            <div class=\"flex justify-between items-center\">\n                                <span class=\"text-sm text-gray-600 dark:text-gray-400\" data-translate=\"total_truths\">Vérités partagées</span>\n                                <span id=\"totalPosts\" class=\"font-medium text-gray-800 dark:text-white\">0</span>\n                            </div>\n                            <div class=\"flex justify-between items-center\">\n                                <span class=\"text-sm text-gray-600 dark:text-gray-400\" data-translate=\"active_users\">Utilisateurs actifs</span>\n                                <span class=\"font-medium text-gray-800 dark:text-white\">1,247</span>\n                            </div>\n                            <div class=\"flex justify-between items-center\">\n                                <span class=\"text-sm text-gray-600 dark:text-gray-400\" data-translate=\"regions_covered\">Régions couvertes</span>\n                                <span class=\"font-medium text-gray-800 dark:text-white\">6</span>\n                            </div>\n                        </div>\n                    </div>\n\n                    <!-- Régions actives -->\n                    <div class=\"bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6\">\n                        <h3 class=\"text-lg font-medium text-gray-800 dark:text-white mb-4\" data-translate=\"active_regions\">Régions actives</h3>\n                        <div class=\"space-y-2\">\n                            <div class=\"flex items-center justify-between text-sm\">\n                                <span class=\"text-gray-600 dark:text-gray-400\">🌍 Afrique</span>\n                                <span class=\"bg-green-100 text-green-800 px-2 py-1 rounded-full text-xs\">Actif</span>\n                            </div>\n                            <div class=\"flex items-center justify-between text-sm\">\n                                <span class=\"text-gray-600 dark:text-gray-400\">🇪🇺 Europe</span>\n                                <span class=\"bg-green-100 text-green-800 px-2 py-1 rounded-full text-xs\">Actif</span>\n                            </div>\n                            <div class=\"flex items-center justify-between text-sm\">\n                                <span class=\"text-gray-600 dark:text-gray-400\">🌏 Asie</span>\n                                <span class=\"bg-green-100 text-green-800 px-2 py-1 rounded-full text-xs\">Actif</span>\n                            </div>\n                            <div class=\"flex items-center justify-between text-sm\">\n                                <span class=\"text-gray-600 dark:text-gray-400\">🌎 Amériques</span>\n                                <span class=\"bg-green-100 text-green-800 px-2 py-1 rounded-full text-xs\">Actif</span>\n                            </div>\n                            <div class=\"flex items-center justify-between text-sm\">\n                                <span class=\"text-gray-600 dark:text-gray-400\">🏝️ Océanie</span>\n                                <span class=\"bg-yellow-100 text-yellow-800 px-2 py-1 rounded-full text-xs\">Modéré</span>\n                            </div>\n                            <div class=\"flex items-center justify-between text-sm\">\n                                <span class=\"text-gray-600 dark:text-gray-400\">🕌 Moyen-Orient</span>\n                                <span class=\"bg-green-100 text-green-800 px-2 py-1 rounded-full text-xs\">Actif</span>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>", "new_str": "        <!-- Contenu des pages -->\n        <div class=\"container mx-auto px-4 py-6\">\n            <!-- Page Fil d'actualité -->\n            <div id=\"feedPage\" class=\"page-content\">\n                <div class=\"grid lg:grid-cols-3 gap-6\">\n                    <!-- Colonne principale -->\n                    <div class=\"lg:col-span-2\">\n                        <!-- Barre de statut utilisateur -->\n                        <div class=\"bg-white dark:bg-gray-800 rounded-lg shadow-sm p-4 mb-6\">\n                            <div class=\"flex items-center justify-between\">\n                                <div class=\"flex items-center space-x-3\">\n                                    <div class=\"w-10 h-10 bg-primary rounded-full flex items-center justify-center\">\n                                        <span class=\"text-white font-medium\" id=\"userAvatar\">A</span>\n                                    </div>\n                                    <div>\n                                        <p class=\"font-medium text-gray-800 dark:text-white\" id=\"userLevel\">Niveau Vérificateur</p>\n                                        <div class=\"flex items-center space-x-2\">\n                                            <span class=\"text-sm text-gray-500\">Points: </span>\n                                            <span class=\"text-sm font-medium text-primary\" id=\"userPoints\">150</span>\n                                            <span class=\"text-xs text-gray-400\">|</span>\n                                            <span class=\"text-sm text-gray-500\">Rang: </span>\n                                            <span class=\"text-sm font-medium text-green-600\" id=\"userRank\">#247</span>\n                                        </div>\n                                    </div>\n                                </div>\n                                <div class=\"text-right\">\n                                    <p class=\"text-sm text-gray-500\">Portefeuille</p>\n                                    <p class=\"font-medium text-gray-800 dark:text-white\" id=\"walletBalance\">25.40 TITA</p>\n                                </div>\n                            </div>\n                        </div>\n\n                        <!-- Formulaire de publication enrichi -->\n                        <div class=\"bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6 mb-6\">\n                            <h3 class=\"text-lg font-medium text-gray-800 dark:text-white mb-4\" data-translate=\"share_truth\">Partagez votre vérité</h3>\n                            <form id=\"postForm\">\n                                <div class=\"space-y-4\">\n                                    <div class=\"flex space-x-3\">\n                                        <select id=\"postCategory\" class=\"flex-1 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-primary bg-white dark:bg-gray-700 text-gray-900 dark:text-white text-base\">\n                                            <option value=\"politics\">🏛️ Politique</option>\n                                            <option value=\"economy\">📈 Économie</option>\n                                            <option value=\"sports\">⚽ Sport</option>\n                                            <option value=\"social\">👥 Social</option>\n                                        </select>\n                                        <select id=\"postType\" class=\"px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-primary bg-white dark:bg-gray-700 text-gray-900 dark:text-white text-base\">\n                                            <option value=\"text\">📝 Texte</option>\n                                            <option value=\"photo\">📸 Photo</option>\n                                            <option value=\"video\">🎥 Vidéo</option>\n                                            <option value=\"poll\">📊 Sondage</option>\n                                        </select>\n                                    </div>\n                                    <div>\n                                        <input type=\"text\" id=\"postTitle\" class=\"w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-primary bg-white dark:bg-gray-700 text-gray-900 dark:text-white text-base\" placeholder=\"Titre de votre révélation...\" required>\n                                    </div>\n                                    <div>\n                                        <textarea id=\"postContent\" rows=\"4\" class=\"w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-primary bg-white dark:bg-gray-700 text-gray-900 dark:text-white text-base resize-none\" placeholder=\"Dévoilez les faits, exposez la vérité...\" required></textarea>\n                                    </div>\n                                    <div class=\"flex items-center justify-between\">\n                                        <div class=\"flex items-center space-x-4\">\n                                            <div class=\"flex items-center space-x-2 text-sm text-gray-500 dark:text-gray-400\">\n                                                <i data-lucide=\"shield\" class=\"w-4 h-4\"></i>\n                                                <span data-translate=\"anonymous_post\">Publication anonyme</span>\n                                            </div>\n                                            <div class=\"flex items-center space-x-2 text-sm text-green-600\">\n                                                <i data-lucide=\"coins\" class=\"w-4 h-4\"></i>\n                                                <span>+5 Points</span>\n                                            </div>\n                                        </div>\n                                        <button type=\"submit\" class=\"bg-primary hover:bg-primary-dark text-white font-medium py-2 px-6 rounded-md transition duration-200\">\n                                            <span data-translate=\"publish\">Publier</span>\n                                        </button>\n                                    </div>\n                                </div>\n                            </form>\n                        </div>\n\n                        <!-- Liste des publications -->\n                        <div id=\"postsContainer\" class=\"space-y-6\">\n                            <!-- Les publications seront ajoutées ici dynamiquement -->\n                        </div>\n                    </div>\n\n                    <!-- Barre latérale -->\n                    <div class=\"lg:col-span-1\">\n                        <!-- Profil utilisateur rapide -->\n                        <div class=\"bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6 mb-6\">\n                            <div class=\"text-center\">\n                                <div class=\"w-16 h-16 bg-gradient-to-r from-primary to-purple-600 rounded-full flex items-center justify-center mx-auto mb-3\">\n                                    <span class=\"text-white text-xl font-bold\" id=\"profileAvatar\">A</span>\n                                </div>\n                                <h3 class=\"font-medium text-gray-800 dark:text-white\" id=\"profileName\">Anonyme_123</h3>\n                                <p class=\"text-sm text-gray-500\" id=\"profileLevel\">Niveau Vérificateur</p>\n                                <div class=\"mt-4 grid grid-cols-2 gap-4 text-center\">\n                                    <div>\n                                        <p class=\"text-lg font-bold text-primary\" id=\"profilePoints\">150</p>\n                                        <p class=\"text-xs text-gray-500\">Points</p>\n                                    </div>\n                                    <div>\n                                        <p class=\"text-lg font-bold text-green-600\" id=\"profileRank\">#247</p>\n                                        <p class=\"text-xs text-gray-500\">Rang</p>\n                                    </div>\n                                </div>\n                                <div class=\"mt-4\">\n                                    <div class=\"bg-gray-200 dark:bg-gray-700 rounded-full h-2\">\n                                        <div class=\"bg-gradient-to-r from-primary to-purple-600 h-2 rounded-full\" style=\"width: 60%\"></div>\n                                    </div>\n                                    <p class=\"text-xs text-gray-500 mt-1\">60% vers le niveau suivant</p>\n                                </div>\n                            </div>\n                        </div>\n\n                        <!-- Statistiques globales -->\n                        <div class=\"bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6 mb-6\">\n                            <h3 class=\"text-lg font-medium text-gray-800 dark:text-white mb-4\" data-translate=\"global_stats\">Statistiques mondiales</h3>\n                            <div class=\"space-y-3\">\n                                <div class=\"flex justify-between items-center\">\n                                    <span class=\"text-sm text-gray-600 dark:text-gray-400\" data-translate=\"total_truths\">Vérités partagées</span>\n                                    <span id=\"totalPosts\" class=\"font-medium text-gray-800 dark:text-white\">0</span>\n                                </div>\n                                <div class=\"flex justify-between items-center\">\n                                    <span class=\"text-sm text-gray-600 dark:text-gray-400\" data-translate=\"active_users\">Utilisateurs actifs</span>\n                                    <span class=\"font-medium text-gray-800 dark:text-white\">1,247</span>\n                                </div>\n                                <div class=\"flex justify-between items-center\">\n                                    <span class=\"text-sm text-gray-600 dark:text-gray-400\">Récompenses distribuées</span>\n                                    <span class=\"font-medium text-gray-800 dark:text-white\">15,420 TITA</span>\n                                </div>\n                                <div class=\"flex justify-between items-center\">\n                                    <span class=\"text-sm text-gray-600 dark:text-gray-400\" data-translate=\"regions_covered\">Régions couvertes</span>\n                                    <span class=\"font-medium text-gray-800 dark:text-white\">6</span>\n                                </div>\n                            </div>\n                        </div>\n\n                        <!-- Tendances -->\n                        <div class=\"bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6\">\n                            <h3 class=\"text-lg font-medium text-gray-800 dark:text-white mb-4\">🔥 Tendances</h3>\n                            <div class=\"space-y-3\">\n                                <div class=\"p-3 bg-red-50 dark:bg-red-900/20 rounded-lg\">\n                                    <p class=\"text-sm font-medium text-red-800 dark:text-red-300\">#CorruptionAfrique</p>\n                                    <p class=\"text-xs text-red-600 dark:text-red-400\">247 publications</p>\n                                </div>\n                                <div class=\"p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg\">\n                                    <p class=\"text-sm font-medium text-blue-800 dark:text-blue-300\">#ÉconomieEurope</p>\n                                    <p class=\"text-xs text-blue-600 dark:text-blue-400\">156 publications</p>\n                                </div>\n                                <div class=\"p-3 bg-green-50 dark:bg-green-900/20 rounded-lg\">\n                                    <p class=\"text-sm font-medium text-green-800 dark:text-green-300\">#SportAsie</p>\n                                    <p class=\"text-xs text-green-600 dark:text-green-400\">89 publications</p>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n\n            <!-- Page Stories -->\n            <div id=\"storiesPage\" class=\"page-content hidden\">\n                <div class=\"max-w-4xl mx-auto\">\n                    <h2 class=\"text-2xl font-bold text-gray-800 dark:text-white mb-6\">📱 Stories Anonymes</h2>\n                    \n                    <!-- Créer une story -->\n                    <div class=\"bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6 mb-6\">\n                        <h3 class=\"text-lg font-medium text-gray-800 dark:text-white mb-4\">Créer une Story</h3>\n                        <div class=\"space-y-4\">\n                            <textarea placeholder=\"Partagez une vérité rapide (24h)...\" class=\"w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-primary bg-white dark:bg-gray-700 text-gray-900 dark:text-white text-base resize-none\" rows=\"3\"></textarea>\n                            <div class=\"flex justify-between items-center\">\n                                <span class=\"text-sm text-gray-500\">⏰ Expire dans 24h</span>\n                                <button class=\"bg-gradient-to-r from-pink-500 to-purple-600 text-white px-6 py-2 rounded-full font-medium\">Publier Story</button>\n                            </div>\n                        </div>\n                    </div>\n\n                    <!-- Stories existantes -->\n                    <div class=\"grid md:grid-cols-2 lg:grid-cols-3 gap-4\">\n                        <div class=\"bg-gradient-to-br from-pink-500 to-purple-600 rounded-lg p-6 text-white relative overflow-hidden\">\n                            <div class=\"absolute top-4 right-4 text-xs opacity-80\">2h</div>\n                            <p class=\"text-sm mb-3\">🌍 Afrique</p>\n                            <p class=\"font-medium\">Révélation choc sur les élections locales...</p>\n                            <div class=\"mt-4 flex items-center justify-between\">\n                                <span class=\"text-xs opacity-80\">👁️ 1.2k vues</span>\n                                <span class=\"text-xs opacity-80\">❤️ 89</span>\n                            </div>\n                        </div>\n                        <div class=\"bg-gradient-to-br from-blue-500 to-teal-600 rounded-lg p-6 text-white relative overflow-hidden\">\n                            <div class=\"absolute top-4 right-4 text-xs opacity-80\">5h</div>\n                            <p class=\"text-sm mb-3\">🇪🇺 Europe</p>\n                            <p class=\"font-medium\">Scandales dans l'industrie tech...</p>\n                            <div class=\"mt-4 flex items-center justify-between\">\n                                <span class=\"text-xs opacity-80\">👁️ 856 vues</span>\n                                <span class=\"text-xs opacity-80\">❤️ 67</span>\n                            </div>\n                        </div>\n                        <div class=\"bg-gradient-to-br from-green-500 to-emerald-600 rounded-lg p-6 text-white relative overflow-hidden\">\n                            <div class=\"absolute top-4 right-4 text-xs opacity-80\">8h</div>\n                            <p class=\"text-sm mb-3\">🌏 Asie</p>\n                            <p class=\"font-medium\">Manipulation des marchés financiers...</p>\n                            <div class=\"mt-4 flex items-center justify-between\">\n                                <span class=\"text-xs opacity-80\">👁️ 2.1k vues</span>\n                                <span class=\"text-xs opacity-80\">❤️ 156</span>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n\n            <!-- Page Média -->\n            <div id=\"mediaPage\" class=\"page-content hidden\">\n                <div class=\"max-w-6xl mx-auto\">\n                    <h2 class=\"text-2xl font-bold text-gray-800 dark:text-white mb-6\">🎥 Contenus Média</h2>\n                    \n                    <!-- Upload de média -->\n                    <div class=\"bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6 mb-6\">\n                        <h3 class=\"text-lg font-medium text-gray-800 dark:text-white mb-4\">Partager un Média</h3>\n                        <div class=\"border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-lg p-8 text-center\">\n                            <i data-lucide=\"upload\" class=\"w-12 h-12 text-gray-400 mx-auto mb-4\"></i>\n                            <p class=\"text-gray-600 dark:text-gray-400 mb-2\">Glissez vos fichiers ici ou cliquez pour sélectionner</p>\n                            <p class=\"text-sm text-gray-500\">Photos, vidéos, documents (max 100MB)</p>\n                            <button class=\"mt-4 bg-primary text-white px-6 py-2 rounded-lg\">Sélectionner fichiers</button>\n                        </div>\n                    </div>\n\n                    <!-- Galerie média -->\n                    <div class=\"grid md:grid-cols-2 lg:grid-cols-3 gap-6\">\n                        <div class=\"bg-white dark:bg-gray-800 rounded-lg shadow-sm overflow-hidden\">\n                            <div class=\"bg-gray-200 dark:bg-gray-700 h-48 flex items-center justify-center\">\n                                <i data-lucide=\"image\" class=\"w-12 h-12 text-gray-400\"></i>\n                            </div>\n                            <div class=\"p-4\">\n                                <h4 class=\"font-medium text-gray-800 dark:text-white mb-2\">Preuves de corruption</h4>\n                                <p class=\"text-sm text-gray-600 dark:text-gray-400\">🌍 Afrique • 2h ago</p>\n                                <div class=\"flex items-center justify-between mt-3\">\n                                    <span class=\"text-sm text-gray-500\">👁️ 1.2k vues</span>\n                                    <span class=\"text-sm text-green-600\">+10 Points</span>\n                                </div>\n                            </div>\n                        </div>\n                        <div class=\"bg-white dark:bg-gray-800 rounded-lg shadow-sm overflow-hidden\">\n                            <div class=\"bg-gray-200 dark:bg-gray-700 h-48 flex items-center justify-center\">\n                                <i data-lucide=\"play-circle\" class=\"w-12 h-12 text-gray-400\"></i>\n                            </div>\n                            <div class=\"p-4\">\n                                <h4 class=\"font-medium text-gray-800 dark:text-white mb-2\">Témoignage vidéo</h4>\n                                <p class=\"text-sm text-gray-600 dark:text-gray-400\">🇪🇺 Europe • 5h ago</p>\n                                <div class=\"flex items-center justify-between mt-3\">\n                                    <span class=\"text-sm text-gray-500\">👁️ 856 vues</span>\n                                    <span class=\"text-sm text-green-600\">+15 Points</span>\n                                </div>\n                            </div>\n                        </div>\n                        <div class=\"bg-white dark:bg-gray-800 rounded-lg shadow-sm overflow-hidden\">\n                            <div class=\"bg-gray-200 dark:bg-gray-700 h-48 flex items-center justify-center\">\n                                <i data-lucide=\"file-text\" class=\"w-12 h-12 text-gray-400\"></i>\n                            </div>\n                            <div class=\"p-4\">\n                                <h4 class=\"font-medium text-gray-800 dark:text-white mb-2\">Documents classifiés</h4>\n                                <p class=\"text-sm text-gray-600 dark:text-gray-400\">🌏 Asie • 1d ago</p>\n                                <div class=\"flex items-center justify-between mt-3\">\n                                    <span class=\"text-sm text-gray-500\">👁️ 3.2k vues</span>\n                                    <span class=\"text-sm text-green-600\">+25 Points</span>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n\n            <!-- Page Groupes -->\n            <div id=\"groupsPage\" class=\"page-content hidden\">\n                <div class=\"max-w-6xl mx-auto\">\n                    <div class=\"flex items-center justify-between mb-6\">\n                        <h2 class=\"text-2xl font-bold text-gray-800 dark:text-white\">👥 Groupes Anonymes</h2>\n                        <button class=\"bg-primary text-white px-6 py-2 rounded-lg flex items-center space-x-2\">\n                            <i data-lucide=\"plus\" class=\"w-4 h-4\"></i>\n                            <span>Créer un groupe</span>\n                        </button>\n                    </div>\n\n                    <!-- Mes groupes -->\n                    <div class=\"mb-8\">\n                        <h3 class=\"text-lg font-medium text-gray-800 dark:text-white mb-4\">Mes Groupes</h3>\n                        <div class=\"grid md:grid-cols-2 lg:grid-cols-3 gap-6\">\n                            <div class=\"bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6\">\n                                <div class=\"flex items-center space-x-3 mb-4\">\n                                    <div class=\"w-12 h-12 bg-red-500 rounded-full flex items-center justify-center\">\n                                        <span class=\"text-white font-bold\">🏛️</span>\n                                    </div>\n                                    <div>\n                                        <h4 class=\"font-medium text-gray-800 dark:text-white\">Vérités Politiques Afrique</h4>\n                                        <p class=\"text-sm text-gray-500\">2,847 membres</p>\n                                    </div>\n                                </div>\n                                <p class=\"text-sm text-gray-600 dark:text-gray-400 mb-3\">Exposer les scandales politiques en Afrique</p>\n                                <div class=\"flex items-center justify-between\">\n                                    <span class=\"text-xs text-green-600\">🟢 Très actif</span>\n                                    <span class=\"text-xs text-gray-500\">156 msg/jour</span>\n                                </div>\n                            </div>\n                            <div class=\"bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6\">\n                                <div class=\"flex items-center space-x-3 mb-4\">\n                                    <div class=\"w-12 h-12 bg-blue-500 rounded-full flex items-center justify-center\">\n                                        <span class=\"text-white font-bold\">📈</span>\n                                    </div>\n                                    <div>\n                                        <h4 class=\"font-medium text-gray-800 dark:text-white\">Économie Mondiale</h4>\n                                        <p class=\"text-sm text-gray-500\">1,523 membres</p>\n                                    </div>\n                                </div>\n                                <p class=\"text-sm text-gray-600 dark:text-gray-400 mb-3\">Révélations sur les manipulations économiques</p>\n                                <div class=\"flex items-center justify-between\">\n                                    <span class=\"text-xs text-yellow-600\">🟡 Modéré</span>\n                                    <span class=\"text-xs text-gray-500\">89 msg/jour</span>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n\n                    <!-- Groupes suggérés -->\n                    <div>\n                        <h3 class=\"text-lg font-medium text-gray-800 dark:text-white mb-4\">Groupes Suggérés</h3>\n                        <div class=\"grid md:grid-cols-2 lg:grid-cols-3 gap-6\">\n                            <div class=\"bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6\">\n                                <div class=\"flex items-center space-x-3 mb-4\">\n                                    <div class=\"w-12 h-12 bg-green-500 rounded-full flex items-center justify-center\">\n                                        <span class=\"text-white font-bold\">⚽</span>\n                                    </div>\n                                    <div>\n                                        <h4 class=\"font-medium text-gray-800 dark:text-white\">Scandales Sports</h4>\n                                        <p class=\"text-sm text-gray-500\">987 membres</p>\n                                    </div>\n                                </div>\n                                <p class=\"text-sm text-gray-600 dark:text-gray-400 mb-3\">Dopage, corruption dans le sport mondial</p>\n                                <button class=\"w-full bg-primary text-white py-2 rounded-lg text-sm\">Rejoindre</button>\n                            </div>\n                            <div class=\"bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6\">\n                                <div class=\"flex items-center space-x-3 mb-4\">\n                                    <div class=\"w-12 h-12 bg-purple-500 rounded-full flex items-center justify-center\">\n                                        <span class=\"text-white font-bold\">👥</span>\n                                    </div>\n                                    <div>\n                                        <h4 class=\"font-medium text-gray-800 dark:text-white\">Justice Sociale</h4>\n                                        <p class=\"text-sm text-gray-500\">1,765 membres</p>\n                                    </div>\n                                </div>\n                                <p class=\"text-sm text-gray-600 dark:text-gray-400 mb-3\">Inégalités et injustices sociales</p>\n                                <button class=\"w-full bg-primary text-white py-2 rounded-lg text-sm\">Rejoindre</button>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n\n            <!-- Page Messages -->\n            <div id=\"messagesPage\" class=\"page-content hidden\">\n                <div class=\"max-w-6xl mx-auto\">\n                    <h2 class=\"text-2xl font-bold text-gray-800 dark:text-white mb-6\">💬 Messages Anonymes</h2>\n                    \n                    <div class=\"grid lg:grid-cols-3 gap-6\">\n                        <!-- Liste des conversations -->\n                        <div class=\"lg:col-span-1\">\n                            <div class=\"bg-white dark:bg-gray-800 rounded-lg shadow-sm\">\n                                <div class=\"p-4 border-b border-gray-200 dark:border-gray-700\">\n                                    <h3 class=\"font-medium text-gray-800 dark:text-white\">Conversations</h3>\n                                </div>\n                                <div class=\"divide-y divide-gray-200 dark:divide-gray-700\">\n                                    <div class=\"p-4 hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer\">\n                                        <div class=\"flex items-center space-x-3\">\n                                            <div class=\"w-10 h-10 bg-red-500 rounded-full flex items-center justify-center\">\n                                                <span class=\"text-white text-sm font-medium\">W</span>\n                                            </div>\n                                            <div class=\"flex-1\">\n                                                <p class=\"font-medium text-gray-800 dark:text-white\">Whistleblower_256</p>\n                                                <p class=\"text-sm text-gray-500 truncate\">J'ai des preuves importantes...</p>\n                                            </div>\n                                            <span class=\"text-xs text-gray-400\">2m</span>\n                                        </div>\n                                    </div>\n                                    <div class=\"p-4 hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer\">\n                                        <div class=\"flex items-center space-x-3\">\n                                            <div class=\"w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center\">\n                                                <span class=\"text-white text-sm font-medium\">T</span>\n                                            </div>\n                                            <div class=\"flex-1\">\n                                                <p class=\"font-medium text-gray-800 dark:text-white\">Truth_Seeker</p>\n                                                <p class=\"text-sm text-gray-500 truncate\">Merci pour votre révélation...</p>\n                                            </div>\n                                            <span class=\"text-xs text-gray-400\">1h</span>\n                                        </div>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n\n                        <!-- Zone de chat -->\n                        <div class=\"lg:col-span-2\">\n                            <div class=\"bg-white dark:bg-gray-800 rounded-lg shadow-sm h-96 flex flex-col\">\n                                <div class=\"p-4 border-b border-gray-200 dark:border-gray-700\">\n                                    <div class=\"flex items-center space-x-3\">\n                                        <div class=\"w-8 h-8 bg-red-500 rounded-full flex items-center justify-center\">\n                                            <span class=\"text-white text-sm font-medium\">W</span>\n                                        </div>\n                                        <div>\n                                            <p class=\"font-medium text-gray-800 dark:text-white\">Whistleblower_256</p>\n                                            <p class=\"text-xs text-gray-500\">🟢 En ligne</p>\n                                        </div>\n                                    </div>\n                                </div>\n                                <div class=\"flex-1 p-4 overflow-y-auto space-y-4\">\n                                    <div class=\"flex items-start space-x-3\">\n                                        <div class=\"w-8 h-8 bg-red-500 rounded-full flex items-center justify-center\">\n                                            <span class=\"text-white text-xs\">W</span>\n                                        </div>\n                                        <div class=\"bg-gray-100 dark:bg-gray-700 rounded-lg p-3 max-w-xs\">\n                                            <p class=\"text-sm text-gray-800 dark:text-white\">J'ai des documents compromettants sur l'affaire dont vous parlez...</p>\n                                            <span class=\"text-xs text-gray-500\">14:32</span>\n                                        </div>\n                                    </div>\n                                    <div class=\"flex items-start space-x-3 justify-end\">\n                                        <div class=\"bg-primary rounded-lg p-3 max-w-xs\">\n                                            <p class=\"text-sm text-white\">Pouvez-vous me donner plus de détails ? Nous garantissons votre anonymat total.</p>\n                                            <span class=\"text-xs text-blue-200\">14:35</span>\n                                        </div>\n                                        <div class=\"w-8 h-8 bg-primary rounded-full flex items-center justify-center\">\n                                            <span class=\"text-white text-xs\">M</span>\n                                        </div>\n                                    </div>\n                                </div>\n                                <div class=\"p-4 border-t border-gray-200 dark:border-gray-700\">\n                                    <div class=\"flex space-x-2\">\n                                        <input type=\"text\" placeholder=\"Tapez votre message...\" class=\"flex-1 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary bg-white dark:bg-gray-700 text-gray-900 dark:text-white text-base\">\n                                        <button class=\"bg-primary text-white px-4 py-2 rounded-lg\">\n                                            <i data-lucide=\"send\" class=\"w-4 h-4\"></i>\n                                        </button>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n\n            <!-- Page Portefeuille -->\n            <div id=\"walletPage\" class=\"page-content hidden\">\n                <div class=\"max-w-4xl mx-auto\">\n                    <h2 class=\"text-2xl font-bold text-gray-800 dark:text-white mb-6\">💰 Portefeuille TITA</h2>\n                    \n                    <!-- Solde principal -->\n                    <div class=\"bg-gradient-to-r from-primary to-purple-600 rounded-lg p-6 text-white mb-6\">\n                        <div class=\"flex items-center justify-between\">\n                            <div>\n                                <p class=\"text-sm opacity-80\">Solde Total</p>\n                                <p class=\"text-3xl font-bold\">25.40 TITA</p>\n                                <p class=\"text-sm opacity-80\">≈ $127.00 USD</p>\n                            </div>\n                            <div class=\"text-right\">\n                                <p class=\"text-sm opacity-80\">Gains ce mois</p>\n                                <p class=\"text-lg font-bold\">+8.20 TITA</p>\n                                <p class=\"text-sm opacity-80 text-green-300\">+47.2%</p>\n                            </div>\n                        </div>\n                    </div>\n\n                    <!-- Actions rapides -->\n                    <div class=\"grid md:grid-cols-3 gap-6 mb-6\">\n                        <button class=\"bg-white dark:bg-gray-800 rounded-lg p-6 text-center shadow-sm hover:shadow-md transition-shadow\">\n                            <i data-lucide=\"send\" class=\"w-8 h-8 text-primary mx-auto mb-3\"></i>\n                            <h3 class=\"font-medium text-gray-800 dark:text-white\">Envoyer</h3>\n                            <p class=\"text-sm text-gray-500\">Transférer des TITA</p>\n                        </button>\n                        <button class=\"bg-white dark:bg-gray-800 rounded-lg p-6 text-center shadow-sm hover:shadow-md transition-shadow\">\n                            <i data-lucide=\"download\" class=\"w-8 h-8 text-green-600 mx-auto mb-3\"></i>\n                            <h3 class=\"font-medium text-gray-800 dark:text-white\">Recevoir</h3>\n                            <p class=\"text-sm text-gray-500\">Recevoir des TITA</p>\n                        </button>\n                        <button class=\"bg-white dark:bg-gray-800 rounded-lg p-6 text-center shadow-sm hover:shadow-md transition-shadow\">\n                            <i data-lucide=\"repeat\" class=\"w-8 h-8 text-blue-600 mx-auto mb-3\"></i>\n                            <h3 class=\"font-medium text-gray-800 dark:text-white\">Échanger</h3>\n                            <p class=\"text-sm text-gray-500\">Convertir en USD</p>\n                        </button>\n                    </div>\n\n                    <!-- Historique des transactions -->\n                    <div class=\"bg-white dark:bg-gray-800 rounded-lg shadow-sm\">\n                        <div class=\"p-6 border-b border-gray-200 dark:border-gray-700\">\n                            <h3 class=\"text-lg font-medium text-gray-800 dark:text-white\">Historique des Transactions</h3>\n                        </div>\n                        <div class=\"divide-y divide-gray-200 dark:divide-gray-700\">\n                            <div class=\"p-6 flex items-center justify-between\">\n                                <div class=\"flex items-center space-x-3\">\n                                    <div class=\"w-10 h-10 bg-green-100 rounded-full flex items-center justify-center\">\n                                        <i data-lucide=\"plus\" class=\"w-5 h-5 text-green-600\"></i>\n                                    </div>\n                                    <div>\n                                        <p class=\"font-medium text-gray-800 dark:text-white\">Récompense publication</p>\n                                        <p class=\"text-sm text-gray-500\">Il y a 2 heures</p>\n                                    </div>\n                                </div>\n                                <span class=\"text-green-600 font-medium\">+5.00 TITA</span>\n                            </div>\n                            <div class=\"p-6 flex items-center justify-between\">\n                                <div class=\"flex items-center space-x-3\">\n                                    <div class=\"w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center\">\n                                        <i data-lucide=\"award\" class=\"w-5 h-5 text-blue-600\"></i>\n                                    </div>\n                                    <div>\n                                        <p class=\"font-medium text-gray-800 dark:text-white\">Bonus vérification</p>\n                                        <p class=\"text-sm text-gray-500\">Hier</p>\n                                    </div>\n                                </div>\n                                <span class=\"text-green-600 font-medium\">+15.00 TITA</span>\n                            </div>\n                            <div class=\"p-6 flex items-center justify-between\">\n                                <div class=\"flex items-center space-x-3\">\n                                    <div class=\"w-10 h-10 bg-red-100 rounded-full flex items-center justify-center\">\n                                        <i data-lucide=\"minus\" class=\"w-5 h-5 text-red-600\"></i>\n                                    </div>\n                                    <div>\n                                        <p class=\"font-medium text-gray-800 dark:text-white\">Frais de transaction</p>\n                                        <p class=\"text-sm text-gray-500\">Il y a 3 jours</p>\n                                    </div>\n                                </div>\n                                <span class=\"text-red-600 font-medium\">-0.50 TITA</span>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n\n            <!-- Page Récompenses -->\n            <div id=\"rewardsPage\" class=\"page-content hidden\">\n                <div class=\"max-w-4xl mx-auto\">\n                    <h2 class=\"text-2xl font-bold text-gray-800 dark:text-white mb-6\">🎁 Système de Récompenses</h2>\n                    \n                    <!-- Progression du niveau -->\n                    <div class=\"bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6 mb-6\">\n                        <div class=\"flex items-center justify-between mb-4\">\n                            <div>\n                                <h3 class=\"text-lg font-medium text-gray-800 dark:text-white\">Niveau Actuel: Vérificateur</h3>\n                                <p class=\"text-sm text-gray-500\">150 / 250 points pour le niveau suivant</p>\n                            </div>\n                            <div class=\"text-right\">\n                                <span class=\"text-2xl\">🏆</span>\n                                <p class=\"text-sm text-gray-500\">Niveau 3</p>\n                            </div>\n                        </div>\n                        <div class=\"bg-gray-200 dark:bg-gray-700 rounded-full h-3 mb-2\">\n                            <div class=\"bg-gradient-to-r from-primary to-purple-600 h-3 rounded-full\" style=\"width: 60%\"></div>\n                        </div>\n                        <p class=\"text-sm text-gray-500\">Prochain niveau: Expert Investigateur (+100 points bonus)</p>\n                    </div>\n\n                    <!-- Défis quotidiens -->\n                    <div class=\"bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6 mb-6\">\n                        <h3 class=\"text-lg font-medium text-gray-800 dark:text-white mb-4\">🎯 Défis Quotidiens</h3>\n                        <div class=\"space-y-4\">\n                            <div class=\"flex items-center justify-between p-4 bg-green-50 dark:bg-green-900/20 rounded-lg\">\n                                <div class=\"flex items-center space-x-3\">\n                                    <div class=\"w-8 h-8 bg-green-500 rounded-full flex items-center justify-center\">\n                                        <i data-lucide=\"check\" class=\"w-4 h-4 text-white\"></i>\n                                    </div>\n                                    <div>\n                                        <p class=\"font-medium text-gray-800 dark:text-white\">Publier une vérité</p>\n                                        <p class=\"text-sm text-gray-500\">Complet</p>\n                                    </div>\n                                </div>\n                                <span class=\"text-green-600 font-medium\">+5 TITA</span>\n                            </div>\n                            <div class=\"flex items-center justify-between p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg\">\n                                <div class=\"flex items-center space-x-3\">\n                                    <div class=\"w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center\">\n                                        <span class=\"text-white text-xs font-bold\">2/3</span>\n                                    </div>\n                                    <div>\n                                        <p class=\"font-medium text-gray-800 dark:text-white\">Commenter 3 publications</p>\n                                        <p class=\"text-sm text-gray-500\">En cours (2/3)</p>\n                                    </div>\n                                </div>\n                                <span class=\"text-blue-600 font-medium\">+3 TITA</span>\n                            </div>\n                            <div class=\"flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-700 rounded-lg\">\n                                <div class=\"flex items-center space-x-3\">\n                                    <div class=\"w-8 h-8 bg-gray-400 rounded-full flex items-center justify-center\">\n                                        <span class=\"text-white text-xs font-bold\">0/1</span>\n                                    </div>\n                                    <div>\n                                        <p class=\"font-medium text-gray-800 dark:text-white\">Vérifier une information</p>\n                                        <p class=\"text-sm text-gray-500\">Pas commencé</p>\n                                    </div>\n                                </div>\n                                <span class=\"text-gray-600 font-medium\">+10 TITA</span>\n                            </div>\n                        </div>\n                    </div>\n\n                    <!-- Classement -->\n                    <div class=\"bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6\">\n                        <h3 class=\"text-lg font-medium text-gray-800 dark:text-white mb-4\">🏆 Classement Global</h3>\n                        <div class=\"space-y-3\">\n                            <div class=\"flex items-center justify-between p-3 bg-yellow-50 dark:bg-yellow-900/20 rounded-lg\">\n                                <div class=\"flex items-center space-x-3\">\n                                    <span class=\"text-lg\">🥇</span>\n                                    <div>\n                                        <p class=\"font-medium text-gray-800 dark:text-white\">TruthMaster_001</p>\n                                        <p class=\"text-sm text-gray-500\">Expert Investigateur</p>\n                                    </div>\n                                </div>\n                                <span class=\"font-bold text-yellow-600\">1,247 pts</span>\n                            </div>\n                            <div class=\"flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-700 rounded-lg\">\n                                <div class=\"flex items-center space-x-3\">\n                                    <span class=\"text-lg\">🥈</span>\n                                    <div>\n                                        <p class=\"font-medium text-gray-800 dark:text-white\">Whistleblower_Pro</p>\n                                        <p class=\"text-sm text-gray-500\">Expert Investigateur</p>\n                                    </div>\n                                </div>\n                                <span class=\"font-bold text-gray-600\">1,156 pts</span>\n                            </div>\n                            <div class=\"flex items-center justify-between p-3 bg-orange-50 dark:bg-orange-900/20 rounded-lg\">\n                                <div class=\"flex items-center space-x-3\">\n                                    <span class=\"text-lg\">🥉</span>\n                                    <div>\n                                        <p class=\"font-medium text-gray-800 dark:text-white\">Truth_Seeker_X</p>\n                                        <p class=\"text-sm text-gray-500\">Vérificateur Senior</p>\n                                    </div>\n                                </div>\n                                <span class=\"font-bold text-orange-600\">987 pts</span>\n                            </div>\n                            <div class=\"border-t border-gray-200 dark:border-gray-600 pt-3 mt-4\">\n                                <div class=\"flex items-center justify-between p-3 bg-primary/10 rounded-lg\">\n                                    <div class=\"flex items-center space-x-3\">\n                                        <span class=\"text-lg\">#247</span>\n                                        <div>\n                                            <p class=\"font-medium text-gray-800 dark:text-white\">Vous (Anonyme_123)</p>\n                                            <p class=\"text-sm text-gray-500\">Vérificateur</p>\n                                        </div>\n                                    </div>\n                                    <span class=\"font-bold text-primary\">150 pts</span>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>"}
+```