Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>VisionAI Pro - Plateforme Complète de Vision par Ordinateur</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| /* Animation */ | |
| @keyframes float { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-10px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| .floating { | |
| animation: float 3s ease-in-out infinite; | |
| } | |
| .glow { | |
| animation: glow 2s ease-in-out infinite alternate; | |
| } | |
| @keyframes glow { | |
| from { | |
| box-shadow: 0 0 5px rgba(59, 130, 246, 0.5); | |
| } | |
| to { | |
| box-shadow: 0 0 20px rgba(59, 130, 246, 0.8); | |
| } | |
| } | |
| .progress-ring__circle { | |
| transition: stroke-dashoffset 0.35s; | |
| transform: rotate(-90deg); | |
| transform-origin: 50% 50%; | |
| } | |
| .object-enter { | |
| animation: objectEnter 0.5s ease-out forwards; | |
| } | |
| @keyframes objectEnter { | |
| from { | |
| transform: translateY(20px); | |
| opacity: 0; | |
| } | |
| to { | |
| transform: translateY(0); | |
| opacity: 1; | |
| } | |
| } | |
| .fade-in { | |
| animation: fadeIn 0.3s ease-in forwards; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| .blink { | |
| animation: blink 1.5s infinite; | |
| } | |
| @keyframes blink { | |
| 0% { opacity: 1; } | |
| 50% { opacity: 0.5; } | |
| 100% { opacity: 1; } | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #f0f4ff 0%, #e6f0ff 100%); | |
| } | |
| .heat-map { | |
| background: linear-gradient(to right, #3b82f6, #10b981, #f59e0b, #ef4444); | |
| } | |
| .scrollbar-hide::-webkit-scrollbar { | |
| display: none; | |
| } | |
| .scrollbar-hide { | |
| -ms-overflow-style: none; | |
| scrollbar-width: none; | |
| } | |
| .grid-stack { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); | |
| gap: 1rem; | |
| } | |
| .dark-mode { | |
| background-color: #1a202c; | |
| color: #f7fafc; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 font-sans"> | |
| <!-- Navigation --> | |
| <div class="flex h-screen overflow-hidden"> | |
| <!-- Sidebar --> | |
| <div class="hidden md:flex md:flex-shrink-0"> | |
| <div class="flex flex-col w-64 border-r border-gray-200 bg-white"> | |
| <div class="h-16 flex items-center px-6 border-b border-gray-200"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-eye text-blue-600 text-2xl mr-2"></i> | |
| <span class="text-xl font-semibold">VisionAI Pro</span> | |
| </div> | |
| </div> | |
| <div class="flex flex-col flex-grow overflow-y-auto"> | |
| <nav class="flex-1 px-4 py-4 space-y-2"> | |
| <a href="#" class="flex items-center px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg"> | |
| <i class="fas fa-tachometer-alt mr-3"></i> | |
| Tableau de bord | |
| </a> | |
| <a href="#" class="flex items-center px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 rounded-lg"> | |
| <i class="fas fa-video mr-3"></i> | |
| Flux vidéo | |
| </a> | |
| <a href="#" class="flex items-center px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 rounded-lg"> | |
| <i class="fas fa-bell mr-3"></i> | |
| Alertes | |
| </a> | |
| <a href="#" class="flex items-center px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 rounded-lg"> | |
| <i class="fas fa-chart-bar mr-3"></i> | |
| Analyses | |
| </a> | |
| <a href="#" class="flex items-center px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 rounded-lg"> | |
| <i class="fas fa-cog mr-3"></i> | |
| Paramètres | |
| </a> | |
| <a href="#" class="flex items-center px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 rounded-lg"> | |
| <i class="fas fa-users mr-3"></i> | |
| Utilisateurs | |
| </a> | |
| <a href="#" class="flex items-center px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 rounded-lg"> | |
| <i class="fas fa-file-alt mr-3"></i> | |
| Rapports | |
| </a> | |
| </nav> | |
| <div class="px-4 py-4 border-t border-gray-200"> | |
| <div class="flex items-center"> | |
| <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium text-gray-700">Jean Dupont</p> | |
| <p class="text-xs font-medium text-gray-500">Administrateur</p> | |
| </div> | |
| </div> | |
| <button class="mt-4 w-full flex items-center justify-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 rounded-lg"> | |
| <i class="fas fa-sign-out-alt mr-2"></i> | |
| Déconnexion | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="flex-1 flex flex-col overflow-hidden"> | |
| <!-- Top Navigation --> | |
| <header class="bg-white shadow-sm"> | |
| <div class="px-6 py-3 flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <button class="md:hidden mr-4 text-gray-500 focus:outline-none"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| <h1 class="text-xl font-semibold text-gray-800">Tableau de bord</h1> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="relative"> | |
| <button class="p-1 text-gray-500 hover:text-gray-700 focus:outline-none"> | |
| <i class="fas fa-search"></i> | |
| </button> | |
| </div> | |
| <div class="relative"> | |
| <button class="p-1 text-gray-500 hover:text-gray-700 focus:outline-none"> | |
| <i class="fas fa-bell"></i> | |
| <span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span> | |
| </button> | |
| </div> | |
| <div class="relative"> | |
| <button id="theme-toggle" class="p-1 text-gray-500 hover:text-gray-700 focus:outline-none"> | |
| <i class="fas fa-moon"></i> | |
| </button> | |
| </div> | |
| <div class="flex items-center"> | |
| <img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""> | |
| <span class="ml-2 text-sm font-medium text-gray-700 hidden md:inline">Jean Dupont</span> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content Area --> | |
| <main class="flex-1 overflow-y-auto p-6 bg-gray-50"> | |
| <!-- Welcome Banner --> | |
| <div class="gradient-bg rounded-xl p-6 mb-6 flex flex-col md:flex-row items-center justify-between"> | |
| <div> | |
| <h2 class="text-2xl font-bold text-gray-800 mb-2">Bonjour, Jean Dupont 👋</h2> | |
| <p class="text-gray-600">Voici un aperçu de votre système de vision par ordinateur. 8 alertes nécessitent votre attention aujourd'hui.</p> | |
| </div> | |
| <button class="mt-4 md:mt-0 px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 flex items-center"> | |
| <i class="fas fa-plus mr-2"></i> Nouvelle analyse | |
| </button> | |
| </div> | |
| <!-- Dashboard Overview --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6"> | |
| <div class="bg-white rounded-xl shadow-sm p-6 flex items-center glow"> | |
| <div class="mr-4 p-3 bg-blue-100 rounded-full"> | |
| <i class="fas fa-eye text-blue-600 text-xl"></i> | |
| </div> | |
| <div> | |
| <div class="text-gray-500 text-sm">Caméras Actives</div> | |
| <div class="text-2xl font-bold">4/8</div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-sm p-6 flex items-center"> | |
| <div class="mr-4 p-3 bg-green-100 rounded-full"> | |
| <i class="fas fa-check-circle text-green-600 text-xl"></i> | |
| </div> | |
| <div> | |
| <div class="text-gray-500 text-sm">Détections/Min</div> | |
| <div class="text-2xl font-bold">142</div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-sm p-6 flex items-center"> | |
| <div class="mr-4 p-3 bg-yellow-100 rounded-full"> | |
| <i class="fas fa-exclamation-triangle text-yellow-600 text-xl"></i> | |
| </div> | |
| <div> | |
| <div class="text-gray-500 text-sm">Alertes Aujourd'hui</div> | |
| <div class="text-2xl font-bold">8</div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-sm p-6 flex items-center"> | |
| <div class="mr-4 p-3 bg-purple-100 rounded-full"> | |
| <i class="fas fa-chart-line text-purple-600 text-xl"></i> | |
| </div> | |
| <div> | |
| <div class="text-gray-500 text-sm">Performance</div> | |
| <div class="flex items-center"> | |
| <div class="w-16 h-16 mr-2"> | |
| <svg class="progress-ring" width="64" height="64"> | |
| <circle class="progress-ring__circle" stroke="#E5E7EB" stroke-width="6" fill="transparent" r="25" cx="32" cy="32"/> | |
| <circle class="progress-ring__circle" stroke="#8B5CF6" stroke-width="6" fill="transparent" r="25" cx="32" cy="32" stroke-dasharray="157" stroke-dashoffset="31.4"/> | |
| </svg> | |
| </div> | |
| <span class="text-2xl font-bold">80%</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Live Feed and Analytics --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6"> | |
| <!-- Live Video Feed --> | |
| <div class="lg:col-span-2 bg-white rounded-xl shadow-sm overflow-hidden"> | |
| <div class="p-4 border-b border-gray-200 flex justify-between items-center"> | |
| <h3 class="font-semibold text-gray-800">Flux vidéo en direct</h3> | |
| <div class="flex items-center space-x-2"> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800"> | |
| <span class="w-2 h-2 mr-1 rounded-full bg-red-500"></span> | |
| En Direct | |
| </span> | |
| <select class="px-2 py-1 bg-gray-100 rounded text-sm"> | |
| <option>Caméra 1 - Entrée principale</option> | |
| <option>Caméra 2 - Parking</option> | |
| <option>Caméra 3 - Réception</option> | |
| <option>Caméra 4 - Couloir Ouest</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="relative bg-black"> | |
| <div class="aspect-w-16 aspect-h-9"> | |
| <div class="w-full h-64 md:h-96 bg-gray-800 flex items-center justify-center"> | |
| <i class="fas fa-video text-gray-600 text-4xl"></i> | |
| </div> | |
| </div> | |
| <div class="absolute bottom-4 left-4 right-4 flex justify-between"> | |
| <button class="p-2 bg-gray-800 bg-opacity-70 text-white rounded-full hover:bg-opacity-100"> | |
| <i class="fas fa-expand"></i> | |
| </button> | |
| <div class="flex space-x-2"> | |
| <button class="p-2 bg-gray-800 bg-opacity-70 text-white rounded-full hover:bg-opacity-100"> | |
| <i class="fas fa-camera"></i> | |
| </button> | |
| <button class="p-2 bg-gray-800 bg-opacity-70 text-white rounded-full hover:bg-opacity-100"> | |
| <i class="fas fa-microphone"></i> | |
| </button> | |
| <button class="p-2 bg-red-600 text-white rounded-full"> | |
| <i class="fas fa-record-vinyl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4 border-t border-gray-200 flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <button class="px-3 py-1 bg-blue-600 text-white rounded hover:bg-blue-700 text-sm"> | |
| <i class="fas fa-play mr-1"></i> Démarrer | |
| </button> | |
| <button class="px-3 py-1 bg-gray-200 text-gray-700 rounded hover:bg-gray-300 text-sm"> | |
| <i class="fas fa-pause mr-1"></i> Pause | |
| </button> | |
| </div> | |
| <div class="text-sm text-gray-500"> | |
| <i class="fas fa-circle text-green-500 mr-1"></i> Connecté • 1280x720 • 30 FPS | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Real-time Alerts --> | |
| <div class="bg-white rounded-xl shadow-sm"> | |
| <div class="p-4 border-b border-gray-200 flex justify-between items-center"> | |
| <h3 class="font-semibold text-gray-800">Alertes en Temps Réel</h3> | |
| <div class="flex items-center space-x-2"> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800"> | |
| <span class="w-2 h-2 mr-1 rounded-full bg-red-500"></span> | |
| En Direct | |
| </span> | |
| <button class="text-blue-500 text-sm">Voir tout</button> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="space-y-3 max-h-96 overflow-y-auto scrollbar-hide"> | |
| <div class="p-3 border border-red-200 bg-red-50 rounded-lg flex items-start object-enter"> | |
| <div class="mr-3 mt-1 text-red-500"> | |
| <i class="fas fa-exclamation-triangle"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="font-medium">Arme détectée</div> | |
| <div class="text-sm text-gray-600">Zone: Entrée principale - Confiance: 92%</div> | |
| <div class="text-xs text-gray-500 mt-1">Il y a 2 minutes</div> | |
| </div> | |
| <button class="ml-2 text-gray-400 hover:text-gray-600"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| <div class="p-3 border border-yellow-200 bg-yellow-50 rounded-lg flex items-start object-enter"> | |
| <div class="mr-3 mt-1 text-yellow-500"> | |
| <i class="fas fa-user-slash"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="font-medium">Intrusion zone restreinte</div> | |
| <div class="text-sm text-gray-600">Zone: Bureau administratif - ID: Per-382</div> | |
| <div class="text-xs text-gray-500 mt-1">Il y a 5 minutes</div> | |
| </div> | |
| </div> | |
| <div class="p-3 border border-orange-200 bg-orange-50 rounded-lg flex items-start object-enter"> | |
| <div class="mr-3 mt-1 text-orange-500"> | |
| <i class="fas fa-temperature-high"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="font-medium">Température élevée</div> | |
| <div class="text-sm text-gray-600">38.2°C détecté - Zone: Réception</div> | |
| <div class="text-xs text-gray-500 mt-1">Il y a 12 minutes</div> | |
| </div> | |
| </div> | |
| <div class="p-3 border border-purple-200 bg-purple-50 rounded-lg flex items-start object-enter"> | |
| <div class="mr-3 mt-1 text-purple-500"> | |
| <i class="fas fa-users"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="font-medium">Foule détectée</div> | |
| <div class="text-sm text-gray-600">15 personnes - Zone: Hall d'entrée</div> | |
| <div class="text-xs text-gray-500 mt-1">Il y a 18 minutes</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Advanced Analytics --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6"> | |
| <!-- Object Detection Heatmap --> | |
| <div class="lg:col-span-2 bg-white rounded-xl shadow-sm overflow-hidden"> | |
| <div class="p-4 border-b border-gray-200 flex justify-between items-center"> | |
| <h3 class="font-semibold text-gray-800">Carte thermique des détections</h3> | |
| <select class="px-3 py-1 bg-gray-100 rounded text-sm"> | |
| <option>Dernières 24 heures</option> | |
| <option>Dernière semaine</option> | |
| <option>Dernier mois</option> | |
| </select> | |
| </div> | |
| <div class="p-4"> | |
| <div class="heat-map h-64 rounded-lg mb-4 flex items-center justify-center"> | |
| <i class="fas fa-map-marked-alt text-white text-4xl"></i> | |
| </div> | |
| <div class="flex justify-between text-xs text-gray-500"> | |
| <span>Faible activité</span> | |
| <span>Activité moyenne</span> | |
| <span>Forte activité</span> | |
| </div> | |
| <div class="mt-4 grid grid-cols-2 md:grid-cols-4 gap-4"> | |
| <div class="p-3 border border-gray-200 rounded-lg"> | |
| <div class="text-sm font-medium text-gray-700">Personnes</div> | |
| <div class="text-2xl font-bold mt-1">1,248</div> | |
| <div class="text-xs text-green-500 mt-1"> | |
| <i class="fas fa-arrow-up mr-1"></i> 12% depuis hier | |
| </div> | |
| </div> | |
| <div class="p-3 border border-gray-200 rounded-lg"> | |
| <div class="text-sm font-medium text-gray-700">Véhicules</div> | |
| <div class="text-2xl font-bold mt-1">387</div> | |
| <div class="text-xs text-red-500 mt-1"> | |
| <i class="fas fa-arrow-down mr-1"></i> 5% depuis hier | |
| </div> | |
| </div> | |
| <div class="p-3 border border-gray-200 rounded-lg"> | |
| <div class="text-sm font-medium text-gray-700">Objets</div> | |
| <div class="text-2xl font-bold mt-1">2,156</div> | |
| <div class="text-xs text-green-500 mt-1"> | |
| <i class="fas fa-arrow-up mr-1"></i> 24% depuis hier | |
| </div> | |
| </div> | |
| <div class="p-3 border border-gray-200 rounded-lg"> | |
| <div class="text-sm font-medium text-gray-700">Visages</div> | |
| <div class="text-2xl font-bold mt-1">843</div> | |
| <div class="text-xs text-green-500 mt-1"> | |
| <i class="fas fa-arrow-up mr-1"></i> 8% depuis hier | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right Sidebar --> | |
| <div class="space-y-6"> | |
| <!-- Recommended Models --> | |
| <div class="bg-white rounded-xl shadow-sm overflow-hidden"> | |
| <div class="p-4 border-b border-gray-200"> | |
| <h3 class="font-semibold text-gray-800">Modèles Recommandés</h3> | |
| </div> | |
| <div class="p-4 space-y-3"> | |
| <div class="p-3 border border-gray-200 rounded-lg hover:border-blue-300 transition cursor-pointer"> | |
| <div class="flex items-center"> | |
| <div class="mr-3 p-2 bg-blue-100 rounded-lg"> | |
| <i class="fas fa-robot text-blue-600"></i> | |
| </div> | |
| <div> | |
| <div class="font-medium">YOLOv8x</div> | |
| <div class="text-sm text-gray-600">Détection d'objets</div> | |
| </div> | |
| </div> | |
| <div class="mt-2 flex justify-between text-xs text-gray-500"> | |
| <span>Précision: 92%</span> | |
| <span>Vitesse: 45ms</span> | |
| </div> | |
| </div> | |
| <div class="p-3 border border-gray-200 rounded-lg hover:border-purple-300 transition cursor-pointer"> | |
| <div class="flex items-center"> | |
| <div class="mr-3 p-2 bg-purple-100 rounded-lg"> | |
| <i class="fas fa-project-diagram text-purple-600"></i> | |
| </div> | |
| <div> | |
| <div class="font-medium">SAM</div> | |
| <div class="text-sm text-gray-600">Segmentation</div> | |
| </div> | |
| </div> | |
| <div class="mt-2 flex justify-between text-xs text-gray-500"> | |
| <span>Précision: 89%</span> | |
| <span>Vitesse: 120ms</span> | |
| </div> | |
| </div> | |
| <div class="p-3 border border-gray-200 rounded-lg hover:border-green-300 transition cursor-pointer"> | |
| <div class="flex items-center"> | |
| <div class="mr-3 p-2 bg-green-100 rounded-lg"> | |
| <i class="fas fa-running text-green-600"></i> | |
| </div> | |
| <div> | |
| <div class="font-medium">YOLOv8-Pose</div> | |
| <div class="text-sm text-gray-600">Estimation de pose</div> | |
| </div> | |
| </div> | |
| <div class="mt-2 flex justify-between text-xs text-gray-500"> | |
| <span>Précision: 85%</span> | |
| <span>Vitesse: 65ms</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- System Performance --> | |
| <div class="bg-white rounded-xl shadow-sm overflow-hidden"> | |
| <div class="p-4 border-b border-gray-200"> | |
| <h3 class="font-semibold text-gray-800">Performance du Système</h3> | |
| </div> | |
| <div class="p-4 space-y-4"> | |
| <div> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>CPU</span> | |
| <span>62%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-yellow-500 h-2 rounded-full" style="width: 62%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>GPU</span> | |
| <span>78%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-purple-500 h-2 rounded-full" style="width: 78%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>Mémoire</span> | |
| <span>5.2/16GB</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-blue-500 h-2 rounded-full" style="width: 32.5%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-sm mb-1"> | |
| <span>Stockage</span> | |
| <span>128/512GB</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-green-500 h-2 rounded-full" style="width: 25%"></div> | |
| </div> | |
| </div> | |
| <div class="pt-2 border-t border-gray-100 text-center"> | |
| <button class="text-blue-500 text-sm hover:text-blue-700 flex items-center justify-center w-full"> | |
| <i class="fas fa-chart-bar mr-1"></i> Détails des performances | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- AI Assistant and Reports --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> | |
| <!-- AI Assistant --> | |
| <div class="bg-white rounded-xl shadow-sm overflow-hidden border border-blue-100"> | |
| <div class="p-4 border-b border-gray-200 bg-blue-50"> | |
| <h3 class="font-semibold text-gray-800 flex items-center"> | |
| <i class="fas fa-robot text-blue-600 mr-2"></i> | |
| Assistant IA | |
| </h3> | |
| </div> | |
| <div class="p-4"> | |
| <div class="bg-blue-50 rounded-lg p-3 mb-3"> | |
| <div class="text-sm text-gray-700">Comment puis-je vous aider aujourd'hui ? Posez-moi des questions sur votre système de vision par ordinateur.</div> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <input type="text" placeholder="Posez votre question..." class="flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500"> | |
| <button class="px-3 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| <div class="mt-2 text-xs text-gray-500"> | |
| Exemple: "Comment améliorer la détection des petites objets ?" | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Automated Reports --> | |
| <div class="lg:col-span-2 bg-white rounded-xl shadow-sm"> | |
| <div class="p-4 border-b border-gray-200 flex justify-between items-center"> | |
| <h3 class="font-semibold text-gray-800">Rapports Automatisés</h3> | |
| <div class="flex space-x-2"> | |
| <select class="px-3 py-1 bg-gray-100 rounded text-sm"> | |
| <option>Dernières 24h</option> | |
| <option>Dernière semaine</option> | |
| <option>Dernier mois</option> | |
| </select> | |
| <button class="px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600 text-sm"> | |
| <i class="fas fa-download mr-1"></i> Exporter | |
| </button> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> | |
| <div class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition cursor-pointer"> | |
| <div class="flex items-center mb-2"> | |
| <div class="p-2 bg-red-100 rounded-full mr-3"> | |
| <i class="fas fa-exclamation-triangle text-red-500"></i> | |
| </div> | |
| <div> | |
| <div class="font-medium">Rapport d'Alertes</div> | |
| <div class="text-xs text-gray-500">8 alertes aujourd'hui</div> | |
| </div> | |
| </div> | |
| <div class="text-sm text-gray-600 mt-2">Détails des alertes de sécurité détectées dans les dernières 24 heures.</div> | |
| </div> | |
| <div class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition cursor-pointer"> | |
| <div class="flex items-center mb-2"> | |
| <div class="p-2 bg-green-100 rounded-full mr-3"> | |
| <i class="fas fa-users text-green-500"></i> | |
| </div> | |
| <div> | |
| <div class="font-medium">Analyse de Trafic</div> | |
| <div class="text-xs text-gray-500">142 personnes détectées</div> | |
| </div> | |
| </div> | |
| <div class="text-sm text-gray-600 mt-2">Statistiques de fréquentation et modèles de mouvement.</div> | |
| </div> | |
| <div class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition cursor-pointer"> | |
| <div class="flex items-center mb-2"> | |
| <div class="p-2 bg-blue-100 rounded-full mr-3"> | |
| <i class="fas fa-chart-line text-blue-500"></i> | |
| </div> | |
| <div> | |
| <div class="font-medium">Performance du Système</div> | |
| <div class="text-xs text-gray-500">78% d'efficacité</div> | |
| </div> | |
| </div> | |
| <div class="text-sm text-gray-600 mt-2">Métriques de performance et suggestions d'optimisation.</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Camera Grid --> | |
| <div class="mt-6 bg-white rounded-xl shadow-sm"> | |
| <div class="p-4 border-b border-gray-200 flex justify-between items-center"> | |
| <h3 class="font-semibold text-gray-800">Vue multi-caméras</h3> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 bg-gray-200 text-gray-700 rounded hover:bg-gray-300 text-sm"> | |
| <i class="fas fa-th mr-1"></i> Grille | |
| </button> | |
| <button class="px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600 text-sm"> | |
| <i class="fas fa-plus mr-1"></i> Ajouter caméra | |
| </button> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="grid-stack"> | |
| <div class="bg-gray-800 rounded-lg aspect-video flex items-center justify-center"> | |
| <div class="text-center"> | |
| <i class="fas fa-video text-gray-600 text-3xl mb-2"></i> | |
| <p class="text-white text-sm">Caméra 1</p> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800 rounded-lg aspect-video flex items-center justify-center"> | |
| <div class="text-center"> | |
| <i class="fas fa-video text-gray-600 text-3xl mb-2"></i> | |
| <p class="text-white text-sm">Caméra 2</p> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800 rounded-lg aspect-video flex items-center justify-center"> | |
| <div class="text-center"> | |
| <i class="fas fa-video text-gray-600 text-3xl mb-2"></i> | |
| <p class="text-white text-sm">Caméra 3</p> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800 rounded-lg aspect-video flex items-center justify-center"> | |
| <div class="text-center"> | |
| <i class="fas fa-video text-gray-600 text-3xl mb-2"></i> | |
| <p class="text-white text-sm">Caméra 4</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| </div> | |
| <script> | |
| // Dark Mode Toggle | |
| const themeToggle = document.getElementById('theme-toggle'); | |
| themeToggle.addEventListener('click', () => { | |
| document.body.classList | |
| </html> |