Sol0Tech/tracemaster-pro-reporting-wizard
0
1<!DOCTYPE html>2<html lang="fr">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>TraceMaster Pro - Reporting Detector</title>7 <link rel="icon" type="image/x-icon" href="data:image/x-icon;,">8 <script src="https://cdn.tailwindcss.com"></script>9 <script>10 tailwind.config = {11 theme: {12 extend: {13 colors: {14 primary: '#3B82F6',15 secondary: '#10B981',16 dark: '#1E293B',17 light: '#F8FAFC'18 }19 }20 }21 }22 </script>23 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">24 <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>25 <script src="https://cdn.jsdelivr.net/npm/xlsx@0.18.5/dist/xlsx.full.min.js"></script>26 <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js"></script>27 <style>28 @keyframes pulse {29 0%, 100% { opacity: 1; }30 50% { opacity: 0.5; }31 }32 @keyframes slideIn {33 from { transform: translateY(20px); opacity: 0; }34 to { transform: translateY(0); opacity: 1; }35 }36 .animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }37 .animate-slide-in { animation: slideIn 0.5s ease-out forwards; }38 .card-hover:hover {39 transform: translateY(-5px);40 box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);41 }42 .tab-active {43 border-bottom: 3px solid;44 border-color: #3B82F6;45 font-weight: 600;46 }47 .upload-area {48 border: 2px dashed #CBD5E1;49 transition: all 0.3s ease;50 }51 .upload-area:hover {52 border-color: #3B82F6;53 background-color: #F0F9FF;54 }55 .modal {56 transition: opacity 0.3s ease, visibility 0.3s ease;57 }58 .modal-content {59 transform: scale(0.9);60 transition: transform 0.3s ease;61 }62 .modal.active {63 opacity: 1;64 visibility: visible;65 }66 .modal.active .modal-content {67 transform: scale(1);68 }69 .delay-100 { animation-delay: 100ms; }70 .delay-200 { animation-delay: 200ms; }71 .delay-300 { animation-delay: 300ms; }72 </style>73</head>74<body class="font-['Inter'] bg-gray-50 text-dark min-h-screen">75 <!-- Navigation -->76 <nav class="fixed top-0 left-0 right-0 bg-white shadow-md z-50">77 <div class="container mx-auto px-4 py-3">78 <div class="flex justify-between items-center">79 <div class="flex items-center space-x-2">80 <i class="fas fa-chart-line text-primary text-2xl"></i>81 <span class="text-xl font-bold">TraceMaster Pro</span>82 </div>83 84 <div class="hidden md:flex space-x-8">85 <a href="#accueil" class="py-2 px-1 tab-active text-primary">ACCUEIL</a>86 <a href="#rapportage" class="py-2 px-1 hover:text-primary transition">RAPPORTAGE</a>87 <a href="#donnees" class="py-2 px-1 hover:text-primary transition">DONNÉES</a>88 <a href="#aide" class="py-2 px-1 hover:text-primary transition">AIDE</a>89 </div>90 91 <button class="md:hidden text-dark" id="mobile-menu-button">92 <i class="fas fa-bars text-xl"></i>93 </button>94 </div>95 96 <!-- Mobile menu -->97 <div class="md:hidden hidden bg-white py-2" id="mobile-menu">98 <a href="#accueil" class="block py-2 px-4 hover:bg-gray-100">ACCUEIL</a>99 <a href="#rapportage" class="block py-2 px-4 hover:bg-gray-100">RAPPORTAGE</a>100 <a href="#donnees" class="block py-2 px-4 hover:bg-gray-100">DONNÉES</a>101 <a href="#aide" class="block py-2 px-4 hover:bg-gray-100">AIDE</a>102 </div>103 </div>104 </nav>105 106 <!-- Main Content -->107 <main class="pt-20 pb-10 container mx-auto px-4">108 <!-- Accueil Section -->109 <section id="accueil" class="py-10">110 <h1 class="text-3xl font-bold mb-8">Tableau de bord</h1>111 112 <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-10">113 <!-- Card 1 -->114 <div class="bg-white rounded-xl shadow-md p-6 card-hover transition-all duration-300 animate-slide-in">115 <div class="flex justify-between items-start">116 <div>117 <p class="text-gray-500">Produits traceurs</p>118 <h2 class="text-3xl font-bold mt-2" id="product-counter">0</h2>119 </div>120 <div class="bg-primary bg-opacity-10 p-3 rounded-full">121 <i class="fas fa-boxes text-primary text-xl"></i>122 </div>123 </div>124 <div class="mt-4 h-2 bg-gray-200 rounded-full">125 <div class="h-2 bg-primary rounded-full" style="width: 75%"></div>126 </div>127 </div>128 129 <!-- Card 2 -->130 <div class="bg-white rounded-xl shadow-md p-6 card-hover transition-all duration-300 animate-slide-in delay-100">131 <div class="flex justify-between items-start">132 <div>133 <p class="text-gray-500">Catégories</p>134 <h2 class="text-3xl font-bold mt-2" id="category-counter">0</h2>135 </div>136 <div class="bg-secondary bg-opacity-10 p-3 rounded-full">137 <i class="fas fa-tags text-secondary text-xl"></i>138 </div>139 </div>140 <div class="mt-4 h-2 bg-gray-200 rounded-full">141 <div class="h-2 bg-secondary rounded-full" style="width: 60%"></div>142 </div>143 </div>144 145 <!-- Card 3 -->146 <div class="bg-white rounded-xl shadow-md p-6 card-hover transition-all duration-300 animate-slide-in delay-200">147 <div class="flex justify-between items-start">148 <div>149 <p class="text-gray-500">Sites</p>150 <h2 class="text-3xl font-bold mt-2" id="site-counter">0</h2>151 </div>152 <div class="bg-yellow-500 bg-opacity-10 p-3 rounded-full">153 <i class="fas fa-store text-yellow-500 text-xl"></i>154 </div>155 </div>156 <div class="mt-4 h-2 bg-gray-200 rounded-full">157 <div class="h-2 bg-yellow-500 rounded-full" style="width: 45%"></div>158 </div>159 </div>160 </div>161 162 <!-- Charts Section -->163 <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">164 <div class="bg-white rounded-xl shadow-md p-6">165 <h3 class="text-lg font-semibold mb-4">Répartition par catégorie</h3>166 <canvas id="categoryChart" height="300"></canvas>167 </div>168 <div class="bg-white rounded-xl shadow-md p-6">169 <h3 class="text-lg font-semibold mb-4">Évolution mensuelle</h3>170 <canvas id="monthlyChart" height="300"></canvas>171 </div>172 </div>173 </section>174 175 <!-- Rapportage Section -->176 <section id="rapportage" class="py-10">177 <h1 class="text-3xl font-bold mb-8">Génération de rapports</h1>178 179 <div class="bg-white rounded-xl shadow-md p-6 mb-6">180 <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-6">181 <div class="mb-4 md:mb-0">182 <h3 class="text-lg font-semibold">Recherche avancée</h3>183 <p class="text-gray-500">Filtrez les données selon vos besoins</p>184 </div>185 <button class="bg-primary text-white px-4 py-2 rounded-lg hover:bg-primary-dark transition">186 <i class="fas fa-download mr-2"></i> Exporter le rapport187 </button>188 </div>189 190 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">191 <div>192 <label class="block text-sm font-medium text-gray-700 mb-1">Période</label>193 <select class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">194 <option>7 derniers jours</option>195 <option>30 derniers jours</option>196 <option>3 derniers mois</option>197 <option>Personnalisé</option>198 </select>199 </div>200 <div>201 <label class="block text-sm font-medium text-gray-700 mb-1">Catégorie</label>202 <select class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">203 <option>Toutes</option>204 <option>Électronique</option>205 <option>Alimentaire</option>206 <option>Textile</option>207 <option>Médical</option>208 </select>209 </div>210 <div>211 <label class="block text-sm font-medium text-gray-700 mb-1">Site</label>212 <select class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">213 <option>Tous</option>214 <option>Paris</option>215 <option>Lyon</option>216 <option>Marseille</option>217 <option>Bordeaux</option>218 </select>219 </div>220 <div>221 <label class="block text-sm font-medium text-gray-700 mb-1">Statut</label>222 <select class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">223 <option>Tous</option>224 <option>Actif</option>225 <option>Inactif</option>226 <option>En attente</option>227 </select>228 </div>229 </div>230 231 <div class="overflow-x-auto">232 <table class="min-w-full divide-y divide-gray-200">233 <thead class="bg-gray-50">234 <tr>235 <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ID</th>236 <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Produit</th>237 <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Catégorie</th>238 <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Site</th>239 <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Statut</th>240 <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>241 </tr>242 </thead>243 <tbody class="bg-white divide-y divide-gray-200">244 <tr>245 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">PRD-001</td>246 <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Smartphone X</td>247 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Électronique</td>248 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Paris</td>249 <td class="px-6 py-4 whitespace-nowrap">250 <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Actif</span>251 </td>252 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">253 <button class="text-primary hover:text-primary-dark mr-3">254 <i class="fas fa-eye"></i>255 </button>256 <button class="text-secondary hover:text-secondary-dark">257 <i class="fas fa-download"></i>258 </button>259 </td>260 </tr>261 <!-- More rows... -->262 </tbody>263 </table>264 </div>265 </div>266 </section>267 268 <!-- Données Section -->269 <section id="donnees" class="py-10">270 <h1 class="text-3xl font-bold mb-8">Importation des données</h1>271 272 <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">273 <!-- Upload 1 -->274 <div class="upload-area rounded-xl p-6 text-center cursor-pointer transition-colors duration-300">275 <div class="bg-primary bg-opacity-10 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">276 <i class="fas fa-file-excel text-primary text-2xl"></i>277 </div>278 <h3 class="text-lg font-semibold mb-2">État de stock</h3>279 <p class="text-gray-500 text-sm mb-4">Format XLSX ou CSV</p>280 <input type="file" id="stock-file" class="hidden" accept=".xlsx,.csv">281 <label for="stock-file" class="bg-primary text-white px-4 py-2 rounded-lg hover:bg-primary-dark transition cursor-pointer inline-block">282 <i class="fas fa-upload mr-2"></i> Importer283 </label>284 </div>285 286 <!-- Upload 2 -->287 <div class="upload-area rounded-xl p-6 text-center cursor-pointer transition-colors duration-300">288 <div class="bg-secondary bg-opacity-10 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">289 <i class="fas fa-file-excel text-secondary text-2xl"></i>290 </div>291 <h3 class="text-lg font-semibold mb-2">Liste des sites</h3>292 <p class="text-gray-500 text-sm mb-4">Format XLSX ou CSV</p>293 <input type="file" id="sites-file" class="hidden" accept=".xlsx,.csv">294 <label for="sites-file" class="bg-secondary text-white px-4 py-2 rounded-lg hover:bg-secondary-dark transition cursor-pointer inline-block">295 <i class="fas fa-upload mr-2"></i> Importer296 </label>297 </div>298 299 <!-- Upload 3 -->300 <div class="upload-area rounded-xl p-6 text-center cursor-pointer transition-colors duration-300">301 <div class="bg-yellow-500 bg-opacity-10 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">302 <i class="fas fa-file-excel text-yellow-500 text-2xl"></i>303 </div>304 <h3 class="text-lg font-semibold mb-2">Produits traceurs</h3>305 <p class="text-gray-500 text-sm mb-4">Format XLSX ou CSV</p>306 <input type="file" id="products-file" class="hidden" accept=".xlsx,.csv">307 <label for="products-file" class="bg-yellow-500 text-white px-4 py-2 rounded-lg hover:bg-yellow-600 transition cursor-pointer inline-block">308 <i class="fas fa-upload mr-2"></i> Importer309 </label>310 </div>311 </div>312 313 <div class="text-center">314 <button id="analyze-btn" class="bg-primary text-white px-6 py-3 rounded-lg hover:bg-primary-dark transition font-semibold text-lg shadow-lg">315 <i class="fas fa-chart-bar mr-2"></i316</body>317</html>