Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>IA Dashboard - Mise à jour du 12/04/2025</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#52beff', | |
| 'primary-light': '#8fd4ff', | |
| 'primary-dark': '#3a8fcc', | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .fade-in { | |
| animation: fadeIn 0.5s ease-in-out; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .document-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 20px rgba(0,0,0,0.1); | |
| } | |
| .sector-tab.active { | |
| border-bottom: 3px solid #52beff; | |
| color: #52beff; | |
| font-weight: 600; | |
| } | |
| .news-card img { | |
| height: 180px; | |
| object-fit: cover; | |
| width: 100%; | |
| } | |
| .news-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); | |
| gap: 1.5rem; | |
| } | |
| .last-updated { | |
| background-color: #f0f9ff; | |
| border-left: 4px solid #52beff; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 font-sans"> | |
| <!-- Navigation --> | |
| <nav class="bg-primary text-white shadow-lg"> | |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-robot text-2xl"></i> | |
| <span class="text-xl font-bold">IA Dashboard</span> | |
| </div> | |
| <div class="hidden md:flex space-x-6"> | |
| <a href="#news" class="hover:text-primary-light transition">Actualités</a> | |
| <a href="#top-ia" class="hover:text-primary-light transition">Top IA</a> | |
| <a href="#sectors" class="hover:text-primary-light transition">Secteurs</a> | |
| <a href="#documents" class="hover:text-primary-light transition">Documents</a> | |
| </div> | |
| <button class="md:hidden text-xl" id="menu-toggle"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div class="md:hidden hidden bg-primary-dark px-4 py-2" id="mobile-menu"> | |
| <a href="#news" class="block py-2 hover:text-primary-light transition">Actualités</a> | |
| <a href="#top-ia" class="block py-2 hover:text-primary-light transition">Top IA</a> | |
| <a href="#sectors" class="block py-2 hover:text-primary-light transition">Secteurs</a> | |
| <a href="#documents" class="block py-2 hover:text-primary-light transition">Documents</a> | |
| </div> | |
| </nav> | |
| <!-- Bannière de mise à jour --> | |
| <div class="last-updated p-3 text-center text-sm text-gray-700 flex items-center justify-center"> | |
| <i class="fas fa-sync-alt mr-2 text-primary"></i> | |
| <span>Dernière mise à jour: <span id="current-date">12/04/2025 à 15:42</span> - Actualisation automatique toutes les 24h</span> | |
| </div> | |
| <!-- Hero Section --> | |
| <header class="bg-gradient-to-r from-primary to-primary-dark text-white py-16"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-4">L'Intelligence Artificielle en 2025</h1> | |
| <p class="text-xl md:text-2xl mb-8">Découvrez les dernières tendances et outils en IA</p> | |
| <div class="flex justify-center space-x-4"> | |
| <a href="#news" class="bg-white text-primary px-6 py-3 rounded-lg font-semibold hover:bg-gray-100 transition"> | |
| Explorer les actualités | |
| </a> | |
| <a href="#newsletter" class="border-2 border-white px-6 py-3 rounded-lg font-semibold hover:bg-white hover:text-primary transition"> | |
| S'abonner | |
| </a> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="container mx-auto px-4 py-8"> | |
| <!-- Dernières actualités IA --> | |
| <section id="news" class="mb-16 fade-in"> | |
| <div class="flex justify-between items-center mb-8"> | |
| <h2 class="text-2xl md:text-3xl font-bold text-gray-800">Les 20 dernières actualités IA</h2> | |
| <div class="flex items-center"> | |
| <span class="text-sm text-gray-500 mr-3">Tri:</span> | |
| <select id="news-sort" class="border border-gray-300 rounded-lg px-3 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-primary"> | |
| <option value="date-desc">Plus récent</option> | |
| <option value="date-asc">Plus ancien</option> | |
| <option value="popular">Plus populaire</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="news-grid" id="news-container"> | |
| <!-- Actualité 1 --> | |
| <div class="news-card bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition"> | |
| <img src="https://source.unsplash.com/random/600x400/?ai,technology,1" alt="GPT-5.5"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <span class="text-sm font-semibold text-primary">TechNews</span> | |
| <span class="text-xs text-gray-500">12/04/2025</span> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-3">GPT-5.5 annoncé avec des capacités multimodales avancées</h3> | |
| <p class="text-gray-600 mb-4">OpenAI dévoile GPT-5.5 avec une intégration fluide texte, image et son, révolutionnant les interfaces utilisateurs.</p> | |
| <a href="https://openai.com/blog/gpt-5-5" target="_blank" class="text-primary font-medium hover:underline flex items-center"> | |
| Lire plus <i class="fas fa-arrow-right ml-2 text-sm"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Actualité 2 --> | |
| <div class="news-card bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition"> | |
| <img src="https://source.unsplash.com/random/600x400/?eu,regulation,1" alt="Régulation IA"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <span class="text-sm font-semibold text-primary">AIMag</span> | |
| <span class="text-xs text-gray-500">11/04/2025</span> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-3">Nouvelle législation européenne sur l'IA générative</h3> | |
| <p class="text-gray-600 mb-4">L'UE impose des règles strictes sur la transparence des modèles génératifs avec plus de 100M paramètres.</p> | |
| <a href="https://digital-strategy.ec.europa.eu/en/policies/ai-act-2025" target="_blank" class="text-primary font-medium hover:underline flex items-center"> | |
| Lire plus <i class="fas fa-arrow-right ml-2 text-sm"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Actualité 3 --> | |
| <div class="news-card bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition"> | |
| <img src="https://source.unsplash.com/random/600x400/?health,ai,1" alt="IA Santé"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <span class="text-sm font-semibold text-primary">HealthTech</span> | |
| <span class="text-xs text-gray-500">10/04/2025</span> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-3">L'IA détecte le cancer 2 ans avant les méthodes traditionnelles</h3> | |
| <p class="text-gray-600 mb-4">Un nouveau modèle développé par DeepMind Health montre une précision de 99% dans la détection précoce.</p> | |
| <a href="https://www.nature.com/articles/s41591-025-00044-6" target="_blank" class="text-primary font-medium hover:underline flex items-center"> | |
| Lire plus <i class="fas fa-arrow-right ml-2 text-sm"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Actualité 4 --> | |
| <div class="news-card bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition"> | |
| <img src="https://source.unsplash.com/random/600x400/?finance,ai" alt="Finance IA"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <span class="text-sm font-semibold text-primary">FinTech Weekly</span> | |
| <span class="text-xs text-gray-500">09/04/2025</span> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-3">Les banques adoptent massivement les assistants IA</h3> | |
| <p class="text-gray-600 mb-4">85% des grandes banques mondiales ont déployé des conseillers financiers IA pour leurs clients particuliers.</p> | |
| <a href="https://www.mckinsey.com/industries/financial-services/our-insights/ai-in-banking-2025" target="_blank" class="text-primary font-medium hover:underline flex items-center"> | |
| Lire plus <i class="fas fa-arrow-right ml-2 text-sm"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Actualité 5 --> | |
| <div class="news-card bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition"> | |
| <img src="https://source.unsplash.com/random/600x400/?education,ai" alt="Éducation IA"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <span class="text-sm font-semibold text-primary">EduTech</span> | |
| <span class="text-xs text-gray-500">08/04/2025</span> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-3">L'éducation personnalisée par IA devient la norme</h3> | |
| <p class="text-gray-600 mb-4">60% des écoles aux États-Unis utilisent désormais des tuteurs IA adaptatifs pour les élèves.</p> | |
| <a href="https://www.edweek.org/technology/how-ai-is-transforming-education-2025" target="_blank" class="text-primary font-medium hover:underline flex items-center"> | |
| Lire plus <i class="fas fa-arrow-right ml-2 text-sm"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Actualité 6 --> | |
| <div class="news-card bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition"> | |
| <img src="https://source.unsplash.com/random/600x400/?art,ai" alt="Art IA"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <span class="text-sm font-semibold text-primary">CreativeAI</span> | |
| <span class="text-xs text-gray-500">07/04/2025</span> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-3">Une œuvre générée par IA vendue 2,5M$ chez Christie's</h3> | |
| <p class="text-gray-600 mb-4">Le marché de l'art IA atteint des sommets avec cette vente record pour "Memories of a Mind" créé par NeuroArt.</p> | |
| <a href="https://www.christies.com/features/AI-art-sale-record-2025-12345.aspx" target="_blank" class="text-primary font-medium hover:underline flex items-center"> | |
| Lire plus <i class="fas fa-arrow-right ml-2 text-sm"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Actualité 7 --> | |
| <div class="news-card bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition"> | |
| <img src="https://source.unsplash.com/random/600x400/?climate,ai" alt="Climat IA"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <span class="text-sm font-semibold text-primary">EcoTech</span> | |
| <span class="text-xs text-gray-500">06/04/2025</span> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-3">L'IA aide à réduire de 15% les émissions des grandes villes</h3> | |
| <p class="text-gray-600 mb-4">Les systèmes d'optimisation énergétique basés sur l'AI montrent des résultats concrets dans 50 métropoles mondiales.</p> | |
| <a href="https://www.nature.com/articles/s41558-025-01234-5" target="_blank" class="text-primary font-medium hover:underline flex items-center"> | |
| Lire plus <i class="fas fa-arrow-right ml-2 text-sm"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Actualité 8 --> | |
| <div class="news-card bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition"> | |
| <img src="https://source.unsplash.com/random/600x400/?security,ai" alt="Sécurité IA"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <span class="text-sm font-semibold text-primary">CyberSec</span> | |
| <span class="text-xs text-gray-500">05/04/2025</span> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-3">Les cyberattaques IA deviennent plus sophistiquées</h3> | |
| <p class="text-gray-600 mb-4">Les experts en sécurité alertent sur une nouvelle vague d'attaques utilisant des modèles génératifs avancés.</p> | |
| <a href="https://www.wired.com/story/ai-cyberattacks-2025-threat-report" target="_blank" class="text-primary font-medium hover:underline flex items-center"> | |
| Lire plus <i class="fas fa-arrow-right ml-2 text-sm"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Actualité 9 --> | |
| <div class="news-card bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition"> | |
| <img src="https://source.unsplash.com/random/600x400/?transport,ai" alt="Transport IA"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <span class="text-sm font-semibold text-primary">AutoTech</span> | |
| <span class="text-xs text-gray-500">04/04/2025</span> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-3">Tesla atteint le niveau 5 d'autonomie avec son nouveau système</h3> | |
| <p class="text-gray-600 mb-4">Le Full Self-Driving v12 prouve qu'une conduite 100% autonome est possible dans toutes les conditions.</p> | |
| <a href="https://www.tesla.com/blog/full-self-driving-v12-level-5" target="_blank" class="text-primary font-medium hover:underline flex items-center"> | |
| Lire plus <i class="fas fa-arrow-right ml-2 text-sm"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Actualité 10 --> | |
| <div class="news-card bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition"> | |
| <img src="https://source.unsplash.com/random/600x400/?robot,ai" alt="Robotique IA"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <span class="text-sm font-semibold text-primary">RoboNews</span> | |
| <span class="text-xs text-gray-500">03/04/2025</span> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-3">Boston Dynamics dévoile son robot domestique grand public</h3> | |
| <p class="text-gray-600 mb-4">Atlas Home Assistant peut effectuer des tâches ménagères complexes avec une précision humaine.</p> | |
| <a href="https://www.bostondynamics.com/products/atlas-home" target="_blank" class="text-primary font-medium hover:underline flex items-center"> | |
| Lire plus <i class="fas fa-arrow-right ml-2 text-sm"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Actualité 11 --> | |
| <div class="news-card bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition"> | |
| <img src="https://source.unsplash.com/random/600x400/?agriculture,ai" alt="Agriculture IA"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <span class="text-sm font-semibold text-primary">AgriTech</span> | |
| <span class="text-xs text-gray-500">02/04/2025</span> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-3">L'IA booste les rendements agricoles de 30% en moyenne</h3> | |
| <p class="text-gray-600 mb-4">Les systèmes de gestion intelligente des cultures montrent des résultats impressionnants dans les fermes pilotes.</p> | |
| <a href="https://www.nature.com/articles/s43016-025-00123-6" target="_blank" class="text-primary font-medium hover:underline flex items-center"> | |
| Lire plus <i class="fas fa-arrow-right ml-2 text-sm"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Actualité 12 --> | |
| <div class="news-card bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition"> | |
| <img src="https://source.unsplash.com/random/600x400/?law,ai" alt="Droit IA"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <span class="text-sm font-semibold text-primary">LegalTech</span> | |
| <span class="text-xs text-gray-500">01/04/2025</span> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-3">Les avocats IA autorisés à plaider dans 5 états américains</h3> | |
| <p class="text-gray-600 mb-4">Une décision historique ouvre la voie à une automatisation partielle des procédures judiciaires.</p> | |
| <a href="https://www.americanbar.org/news/abanews/ai-legal-practice-2025" target="_blank" class="text-primary font-medium hover:underline flex items-center"> | |
| Lire plus <i class="fas fa-arrow-right ml-2 text-sm"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Actualité 13 --> | |
| <div class="news-card bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition"> | |
| <img src="https://source.unsplash.com/random/600x400/?music,ai" alt="Musique IA"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <span class="text-sm font-semibold text-primary">MusicAI</span> | |
| <span class="text-xs text-gray-500">31/03/2025</span> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-3">Un album généré par IA dans le top 10 du Billboard</h3> | |
| <p class="text-gray-600 mb-4">"Neural Beats" créé par SoundMind AI séduit les auditeurs et défie l'industrie musicale traditionnelle.</p> | |
| <a href="https://www.billboard.com/music/music-news/ai-album-top-10-2025" target="_blank" class="text-primary font-medium hover:underline flex items-center"> | |
| Lire plus <i class="fas fa-arrow-right ml-2 text-sm"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Actualité 14 --> | |
| <div class="news-card bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition"> | |
| <img src="https://source.unsplash.com/random/600x400/?retail,ai" alt="Commerce IA"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <span class="text-sm font-semibold text-primary">RetailTech</span> | |
| <span class="text-xs text-gray-500">30/03/2025</span> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-3">Amazon ouvre son premier magasin sans caissier avec technologie IA</h3> | |
| <p class="text-gray-600 mb-4">Le système Just Walk Out évolue pour gérer des magasins de 2000m² sans personnel de caisse.</p> | |
| <a href="https://www.aboutamazon.com/news/retail/amazon-just-walk-out-expansion-2025" target="_blank" class="text-primary font-medium hover:underline flex items-center"> | |
| Lire plus <i class="fas fa-arrow-right ml-2 text-sm"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Actualité 15 --> | |
| <div class="news-card bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition"> | |
| <img src="https://source.unsplash.com/random/600x400/?sport,ai" alt="Sport IA"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <span class="text-sm font-semibold text-primary">SportAI</span> | |
| <span class="text-xs text-gray-500">29/03/2025</span> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-3">Les entraîneurs IA révolutionnent la préparation des athlètes</h3> | |
| <p class="text-gray-600 mb-4">90% des équipes professionnelles utilisent désormais des systèmes d'analyse et de coaching basés sur l'IA.</p> | |
| <a href="https://www.espn.com/tech/story/_/id/35678925/ai-sports-training-2025" target="_blank" class="text-primary font-medium hover:underline flex items-center"> | |
| Lire plus <i class="fas fa-arrow-right ml-2 text-sm"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Actualité 16 --> | |
| <div class="news-card bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition"> | |
| <img src="https://source.unsplash.com/random/600x400/?space,ai" alt="Espace IA"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <span class="text-sm font-semibold text-primary">SpaceTech</span> | |
| <span class="text-xs text-gray-500">28/03/2025</span> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-3">La NASA utilise l'IA pour piloter ses rovers martiens en temps réel</h3> | |
| <p class="text-gray-600 mb-4">Une avancée majeure réduisant le temps de décision de 20 minutes à quelques secondes seulement.</p> | |
| <a href="https://www.nasa.gov/feature/ai-mars-rovers-2025" target="_blank" class="text-primary font-medium hover:underline flex items-center"> | |
| Lire plus <i class="fas fa-arrow-right ml-2 text-sm"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Actualité 17 --> | |
| <div class="news-card bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition"> | |
| <img src="https://source.unsplash.com/random/600x400/?fashion,ai" alt="Mode IA"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <span class="text-sm font-semibold text-primary">FashionAI</span> | |
| <span class="text-xs text-gray-500">27/03/2025</span> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-3">Les collections de mode générées par IA dominent les défilés</h3> | |
| <p class="text-gray-600 mb-4">Les grandes maisons adoptent massivement les designs créés par des intelligences artificielles.</p> | |
| <a href="https://www.voguebusiness.com/technology/ai-fashion-design-2025" target="_blank" class="text-primary font-medium hover:underline flex items-center"> | |
| Lire plus <i class="fas fa-arrow-right ml-2 text-sm"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Actualité 18 --> | |
| <div class="news-card bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition"> | |
| <img src="https://source.unsplash.com/random/600x400/?gaming,ai" alt="Jeux IA"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <span class="text-sm font-semibold text-primary">GameAI</span> | |
| <span class="text-xs text-gray-500">26/03/2025</span> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-3">Les PNJ générés par IA deviennent indiscernables des joueurs humains</h3> | |
| <p class="text-gray-600 mb-4">Une nouvelle génération de personnages de jeu avec une intelligence conversationnelle et comportementale ultra-réaliste.</p> | |
| <a href="https://www.theverge.com/gaming/2025/3/26/ai-npcs-indistinguishable-humans" target="_blank" class="text-primary font-medium hover:underline flex items-center"> | |
| Lire plus <i class="fas fa-arrow-right ml-2 text-sm"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Actualité 19 --> | |
| <div class="news-card bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition"> | |
| <img src="https://source.unsplash.com/random/600x400/?language,ai" alt="Langue IA"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <span class="text-sm font-semibold text-primary">LinguaAI</span> | |
| <span class="text-xs text-gray-500">25/03/2025</span> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-3">Traduction en temps réel parfaite pour 50 langues grâce à l'IA</h3> | |
| <p class="text-gray-600 mb-4">Le nouveau système de Meta comprend non seulement les mots mais aussi les nuances culturelles.</p> | |
| <a href="https://ai.meta.com/blog/universal-translator-2025" target="_blank" class="text-primary font-medium hover:underline flex items-center"> | |
| Lire plus <i class="fas fa-arrow-right ml-2 text-sm"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Actualité 20 --> | |
| <div class="news-card bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition"> | |
| <img src="https://source.unsplash.com/random/600x400/?quantum,ai" alt="Quantique IA"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <span class="text-sm font-semibold text-primary">QuantumAI</span> | |
| <span class="text-xs text-gray-500">24/03/2025</span> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-3">Première fusion entre l'IA et l'informatique quantique</h3> | |
| <p class="text-gray-600 mb-4">Google Quantum AI annonce une percée majeure dans l'apprentissage machine quantique.</p> | |
| <a href="https://ai.googleblog.com/2025/03/quantum-machine-learning-breakthrough.html" target="_blank" class="text-primary font-medium hover:underline flex items-center"> | |
| Lire plus <i class="fas fa-arrow-right ml-2 text-sm"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8 text-center"> | |
| <button id="load-more-news" class="bg-primary text-white px-6 py-3 rounded-lg font-semibold hover:bg-primary-dark transition"> | |
| Charger plus d'actualités | |
| </button> | |
| </div> | |
| </section> | |
| <!-- Top IA actuelles --> | |
| <section id="top-ia" class="mb-16 fade-in"> | |
| <h2 class="text-2xl md:text-3xl font-bold text-gray-800 mb-8">Top IA actuelles</h2> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden"> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Nom</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Domaine</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Note</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Lien</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Prix</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200"> | |
| <tr class="hover:bg-gray-50 transition"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10 bg-primary-light rounded-full flex items-center justify-center"> | |
| <i class="fas fa-brain text-primary-dark"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">ChatGPT-5.5</div> | |
| <div class="text-xs text-gray-500">OpenAI</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Traitement du langage</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex"> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> | |
| <a href="https://chat.openai.com" target="_blank" class="text-primary hover:text-primary-dark">Visiter</a> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$20/mois</td> | |
| </tr> | |
| <tr class="hover:bg-gray-50 transition"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10 bg-primary-light rounded-full flex items-center justify-center"> | |
| <i class="fas fa-eye text-primary-dark"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">Midjourney v6</div> | |
| <div class="text-xs text-gray-500">Midjourney Inc.</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Génération d'images</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex"> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star-half-alt text-yellow-400"></i> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> | |
| <a href="https://www.midjourney.com" target="_blank" class="text-primary hover:text-primary-dark">Visiter</a> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$30/mois</td> | |
| </tr> | |
| <tr class="hover:bg-gray-50 transition"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10 bg-primary-light rounded-full flex items-center justify-center"> | |
| <i class="fas fa-code text-primary-dark"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">GitHub Copilot X</div> | |
| <div class="text-xs text-gray-500">Microsoft</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Développement</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex"> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="far fa-star text-yellow-400"></i> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> | |
| <a href="https://github.com/features/copilot" target="_blank" class="text-primary hover:text-primary-dark">Visiter</a> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$19/mois</td> | |
| </tr> | |
| <tr class="hover:bg-gray-50 transition"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10 bg-primary-light rounded-full flex items-center justify-center"> | |
| <i class="fas fa-robot text-primary-dark"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">Claude 4</div> | |
| <div class="text-xs text-gray-500">Anthropic</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Assistant IA</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex"> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> | |
| <a href="https://claude.ai" target="_blank" class="text-primary hover:text-primary-dark">Visiter</a> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$25/mois</td> | |
| </tr> | |
| <tr class="hover:bg-gray-50 transition"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10 bg-primary-light rounded-full flex items-center justify-center"> | |
| <i class="fas fa-video text-primary-dark"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">Runway Gen-3</div> | |
| <div class="text-xs text-gray-500">Runway ML</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Génération vidéo</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex"> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="far fa-star text-yellow-400"></i> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> | |
| <a href="https://runwayml.com" target="_blank" class="text-primary hover:text-primary-dark">Visiter</a> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$35/mois</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- IA par secteur --> | |
| <section id="sectors" class="mb-16 fade-in"> | |
| <h2 class="text-2xl md:text-3xl font-bold text-gray-800 mb-8">IA par secteur</h2> | |
| <div class="mb-6 border-b border-gray-200"> | |
| <div class="flex space-x-8 overflow-x-auto pb-2"> | |
| <button class="sector-tab active" data-sector="all">Tous</button> | |
| <button class="sector-tab" data-sector="rh">RH</button> | |
| <button class="sector-tab" data-sector="marketing">Marketing</button> | |
| <button class="sector-tab" data-sector="btp">BTP</button> | |
| <button class="sector-tab" data-sector="education">Éducation</button> | |
| <button class="sector-tab" data-sector="sante">Santé</button> | |
| <button class="sector-tab" data-sector="immobilier">Immobilier</button> | |
| <button class="sector-tab" data-sector="finance">Finance</button> | |
| <button class="sector-tab" data-sector="juridique">Juridique</button> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" id="sectors-content"> | |
| <!-- Carte IA 1 --> | |
| <div class="ia-card bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition" data-sectors="rh,marketing"> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-primary-light p-3 rounded-lg mr-4"> | |
| <i class="fas fa-users text-primary-dark text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800">RecruitAI Pro</h3> | |
| </div> | |
| <p class="text-gray-600 mb-4">Plateforme de recrutement intelligente qui analyse les CV et prédit la compatibilité candidat-poste avec 95% de précision.</p> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="bg-primary-light text-primary-dark text-xs px-2 py-1 rounded">RH</span> | |
| <span class="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded">Marketing</span> | |
| </div> | |
| <a href="https://www.recruitai.pro" target="_blank" class="mt-4 inline-block text-primary font-medium hover:underline flex items-center"> | |
| En savoir plus <i class="fas fa-arrow-right ml-2 text-sm"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Carte IA 2 --> | |
| <div class="ia-card bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition" data-sectors="sante"> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-primary-light p-3 rounded-lg mr-4"> | |
| <i class="fas fa-heartbeat text-primary-dark text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800">MediScan Pro</h3> | |
| </div> | |
| <p class="text-gray-600 mb-4">Système d'analyse d'imagerie médicale qui détecte les anomalies avec une précision de 98%, validé par la FDA.</p> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="bg-red-100 text-red-800 text-xs px-2 py-1 rounded">Santé</span> | |
| </div> | |
| <a href="https://www.mediscan.pro" target="_blank" class="mt-4 inline-block text-primary font-medium hover:underline flex items-center"> | |
| En savoir plus <i class="fas fa-arrow-right ml-2 text-sm"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Carte IA 3 --> | |
| <div class="ia-card bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition" data-sectors="education"> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-primary-light p-3 rounded-lg mr-4"> | |
| <i class="fas fa-graduation-cap text-primary-dark text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800">EduBot 2025</h3> | |
| </div> | |
| <p class="text-gray-600 mb-4">Assistant pédagogique personnalisé qui adapte son enseignement au style d'apprentissage de chaque étudiant en temps réel.</p> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">Éducation</span> | |
| </div> | |
| <a href="https://www.edubot.ai" target="_blank" class="mt-4 inline-block text-primary font-medium hover:underline flex items-center"> | |
| En savoir plus <i class="fas fa-arrow-right ml-2 text-sm"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Carte IA 4 --> | |
| <div class="ia-card bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition" data-sectors="finance"> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-primary-light p-3 rounded-lg mr-4"> | |
| <i class="fas fa-chart-line text-primary-dark text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800">WealthAI</h3> | |
| </div> | |
| <p class="text-gray-600 mb-4">Conseiller financier IA qui optimise les portefeuilles d'investissement avec des algorithmes prédictifs avancés.</p> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">Finance</span> | |
| </div> | |
| <a href="https://www.wealthai.com" target="_blank" class="mt-4 inline-block text-primary font-medium hover:underline flex items-center"> | |
| En savoir plus <i class="fas fa-arrow-right ml-2 text-sm"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Carte IA 5 --> | |
| <div class="ia-card bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition" data-sectors="juridique"> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-primary-light p-3 rounded-lg mr-4"> | |
| <i class="fas fa-gavel text-primary-dark text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800">LegalMind AI</h3> | |
| </div> | |
| <p class="text-gray-600 mb-4">Assistant juridique capable d'analyser des contrats et de prédire les issues judiciaires avec 90% de précision.</p> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded">Juridique</span> | |
| </div> | |
| <a href="https://www.legalmind.ai" target="_blank" class="mt-4 inline-block text-primary font-medium hover:underline flex items-center"> | |
| En savoir plus <i class="fas fa-arrow-right ml-2 text-sm"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Carte IA 6 --> | |
| <div class="ia-card bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition" data-sectors="btp,immobilier"> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-primary-light p-3 rounded-lg mr-4"> | |
| <i class="fas fa-home text-primary-dark text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800">ConstructAI</h3> | |
| </div> | |
| <p class="text-gray-600 mb-4">Optimise les plans de construction et prédit les coûts avec une marge d'erreur de seulement 2%.</p> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="bg-orange-100 text-orange-800 text-xs px-2 py-1 rounded">BTP</span> | |
| <span class="bg-indigo-100 text-indigo-800 text-xs px-2 py-1 rounded">Immobilier</span> | |
| </div> | |
| <a href="https://www.constructai.com" target="_blank" class="mt-4 inline-block text-primary font-medium hover:underline flex items-center"> | |
| En savoir plus <i class="fas fa-arrow-right ml-2 text-sm"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Message vide pour certains secteurs --> | |
| <div id="empty-sector-message" class="hidden col-span-3 text-center py-10"> | |
| <i class="fas fa-info-circle text-primary text-4xl mb-4"></i> | |
| <h3 class="text-xl font-bold text-gray-800 mb-2">Aucune IA disponible pour ce secteur</h3> | |
| <p class="text-gray-600">Nous n'avons pas encore référencé d'IA spécialisée dans ce domaine. Revenez plus tard !</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Section Documents --> | |
| <section id="documents" class="mb-16 fade-in"> | |
| <div class="flex justify-between items-center mb-8"> | |
| <h2 class="text-2xl md:text-3xl font-bold text-gray-800">Documents IA</h2> | |
| <button id="add-document-btn" class="bg-primary text-white px-4 py-2 rounded-lg hover:bg-primary-dark transition flex items-center"> | |
| <i class="fas fa-plus mr-2"></i> Ajouter un document | |
| </button> | |
| </div> | |
| <!-- Formulaire d'ajout (caché par défaut) --> | |
| <div id="document-form" class="hidden bg-white p-6 rounded-lg shadow-md mb-8"> | |
| <h3 class="text-xl font-semibold mb-4">Ajouter un nouveau document</h3> | |
| <form id="upload-form"> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 mb-2" for="doc-title">Titre du document</label> | |
| <input type="text" id="doc-title" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary" required> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 mb-2" for="doc-category">Catégorie</label> | |
| <select id="doc-category" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary" required> | |
| <option value="">Sélectionnez une catégorie</option> | |
| <option value="recherche">Recherche</option> | |
| <option value="guide">Guide pratique</option> | |
| <option value="rapport">Rapport</option> | |
| <option value="presentation">Présentation</option> | |
| </select> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 mb-2" for="doc-description">Description</label> | |
| <textarea id="doc-description" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"></textarea> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 mb-2" for="doc-file">Fichier</label> | |
| <div class="border-2 border-dashed border-gray-300 rounded-lg p-4 text-center"> | |
| <input type="file" id="doc-file" class="hidden" required> | |
| <label for="doc-file" class="cursor-pointer"> | |
| <i class="fas fa-cloud-upload-alt text-4xl text-gray-400 mb-2"></i> | |
| <p class="text-gray-600">Glissez-déposez votre fichier ici ou cliquez pour sélectionner</p> | |
| <p class="text-sm text-gray-500 mt-1">Formats supportés: PDF, DOCX, PPTX (Max 10MB)</p> | |
| </label> | |
| </div> | |
| </div> | |
| <div class="flex justify-end space-x-3"> | |
| <button type="button" id="cancel-doc" class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-100 transition">Annuler</button> | |
| <button type="submit" class="bg-primary text-white px-4 py-2 rounded-lg hover:bg-primary-dark transition">Enregistrer</button> | |
| </div> | |
| </form> | |
| </div> | |
| <!-- Liste des documents --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" id="documents-list"> | |
| <!-- Document 1 --> | |
| <div class="document-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300"> | |
| <div class="p-6"> | |
| <div class="flex items-start mb-4"> | |
| <div class="bg-primary-light p-3 rounded-lg mr-4"> | |
| <i class="fas fa-file-pdf text-primary-dark text-xl"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold text-gray-800">Guide des bonnes pratiques en IA 2025</h3> | |
| <span class="text-xs text-primary-dark bg-primary-light px-2 py-1 rounded-full">Guide pratique</span> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 text-sm mb-4">Un guide complet pour implémenter des solutions d'IA éthiques et efficaces dans votre entreprise.</p> | |
| <div class="flex justify-between items-center text-sm text-gray-500"> | |
| <span>Ajouté le 10/04/2025</span> | |
| <div class="flex space-x-2"> | |
| <a href="https://arxiv.org/pdf/2504.00001" target="_blank" class="text-primary hover:text-primary-dark"> | |
| <i class="fas fa-download"></i> | |
| </a> | |
| <button class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-trash"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Document 2 --> | |
| <div class="document-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300"> | |
| <div class="p-6"> | |
| <div class="flex items-start mb-4"> | |
| <div class="bg-primary-light p-3 rounded-lg mr-4"> | |
| <i class="fas fa-file-powerpoint text-primary-dark text-xl"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold text-gray-800">Présentation GPT-5.5</h3> | |
| <span class="text-xs text-purple-600 bg-purple-50 px-2 py-1 rounded-full">Présentation</span> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 text-sm mb-4">Diaporama présentant les capacités et cas d'usage du modèle GPT-5.5 d'OpenAI.</p> | |
| <div class="flex justify-between items-center text-sm text-gray-500"> | |
| <span>Ajouté le 09/04/2025</span> | |
| <div class="flex space-x-2"> | |
| <a href="https://arxiv.org/pdf/2504.00002" target="_blank" class="text-primary hover:text-primary-dark"> | |
| <i class="fas fa-download"></i> | |
| </a> | |
| <button class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-trash"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Document 3 --> | |
| <div class="document-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300"> | |
| <div class="p-6"> | |
| <div class="flex items-start mb-4"> | |
| <div class="bg-primary-light p-3 rounded-lg mr-4"> | |
| <i class="fas fa-file-alt text-primary-dark text-xl"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold text-gray-800">Rapport sur l'IA en santé 2025</h3> | |
| <span class="text-xs text-red-600 bg-red-50 px-2 py-1 rounded-full">Rapport</span> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 text-sm mb-4">Analyse complète des tendances et innovations en IA appliquée au secteur de la santé.</p> | |
| <div class="flex justify-between items-center text-sm text-gray-500"> | |
| <span>Ajouté le 08/04/2025</span> | |
| <div class="flex space-x-2"> | |
| <a href="https://arxiv.org/pdf/2504.00003" target="_blank" class="text-primary hover:text-primary-dark"> | |
| <i class="fas fa-download"></i> | |
| </a> | |
| <button class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-trash"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Document 4 --> | |
| <div class="document-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300"> | |
| <div class="p-6"> | |
| <div class="flex items-start mb-4"> | |
| <div class="bg-primary-light p-3 rounded-lg mr-4"> | |
| <i class="fas fa-file-code text-primary-dark text-xl"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold text-gray-800">Guide d'implémentation IA</h3> | |
| <span class="text-xs text-blue-600 bg-blue-50 px-2 py-1 rounded-full">Guide pratique</span> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 text-sm mb-4">Guide technique pour intégrer des modèles d'IA dans vos applications.</p> | |
| <div class="flex justify-between items-center text-sm text-gray-500"> | |
| <span>Ajouté le 07/04/2025</span> | |
| <div class="flex space-x-2"> | |
| <a href="https://arxiv.org/pdf/2504.00004" target="_blank" class="text-primary hover:text-primary-dark"> | |
| <i class="fas fa-download"></i> | |
| </a> | |
| <button class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-trash"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Document 5 --> | |
| <div class="document-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300"> | |
| <div class="p-6"> | |
| <div class="flex items-start mb-4"> | |
| <div class="bg-primary-light p-3 rounded-lg mr-4"> | |
| <i class="fas fa-file-chart-line text-primary-dark text-xl"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold text-gray-800">Analyse marché IA 2025</h3> | |
| <span class="text-xs text-green-600 bg-green-50 px-2 py-1 rounded-full">Rapport</span> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 text-sm mb-4">Projections et analyses du marché mondial de l'intelligence artificielle.</p> | |
| <div class="flex justify-between items-center text-sm text-gray-500"> | |
| <span>Ajouté le 06/04/2025</span> | |
| <div class="flex space-x-2"> | |
| <a href="https://arxiv.org/pdf/2504.00005" target="_blank" class="text-primary hover:text-primary-dark"> | |
| <i class="fas fa-download"></i> | |
| </a> | |
| <button class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-trash"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Document 6 --> | |
| <div class="document-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300"> | |
| <div class="p-6"> | |
| <div class="flex items-start mb-4"> | |
| <div class="bg-primary-light p-3 rounded-lg mr-4"> | |
| <i class="fas fa-file-image text-primary-dark text-xl"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold text-gray-800">Génération d'images IA</h3> | |
| <span class="text-xs text-indigo-600 bg-indigo-50 px-2 py-1 rounded-full">Guide pratique</span> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 text-sm mb-4">Techniques avancées pour créer des images réalistes avec l'IA.</p> | |
| <div class="flex justify-between items-center text-sm text-gray-500"> | |
| <span>Ajouté le 05/04/2025</span> | |
| <div class="flex space-x-2"> | |
| <a href="https://arxiv.org/pdf/2504.00006" target="_blank" class="text-primary hover:text-primary-dark"> | |
| <i class="fas fa-download"></i> | |
| </a> | |
| <button class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-trash"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8 text-center"> | |
| <button id="load-more-docs" class="bg-primary text-white px-6 py-3 rounded-lg font-semibold hover:bg-primary-dark transition"> | |
| Charger plus de documents | |
| </button> | |
| </div> | |
| </section> | |
| <!-- Newsletter --> | |
| <section id="newsletter" class="mb-16 bg-gradient-to-r from-primary to-primary-dark rounded-xl p-8 text-white"> | |
| <div class="max-w-3xl mx-auto text-center"> | |
| <h2 class="text-2xl md:text-3xl font-bold mb-4">Restez informé</h2> | |
| <p class="mb-6">Recevez chaque matin les dernières actualités IA directement dans votre boîte mail.</p> | |
| <form class="flex flex-col sm:flex-row gap-3 max-w-lg mx-auto"> | |
| <input type="email" placeholder="Votre email" class="flex-grow px-4 py-3 rounded-lg text-gray-800 focus:outline-none focus:ring-2 focus:ring-white"> | |
| <button type="submit" class="bg-white text-primary px-6 py-3 rounded-lg font-semibold hover:bg-gray-100 transition"> | |
| S'abonner | |
| </button> | |
| </form> | |
| <p class="text-sm text-primary-light mt-3">Nous ne partagerons jamais votre email. Désabonnez-vous à tout moment.</p> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="bg-gray-800 text-white py-8"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-6 md:mb-0"> | |
| <div class="flex items-center space-x-2 mb-4"> | |
| <i class="fas fa-robot text-2xl"></i> | |
| <span class="text-xl font-bold">IA Dashboard</span> | |
| </div> | |
| <p class="text-gray-400">Votre source d'information sur l'intelligence artificielle.</p> | |
| </div> | |
| <div class="flex space-x-6"> | |
| <a href="https://twitter.com/ia_dashboard" target="_blank" class="text-gray-400 hover:text-white transition"> | |
| <i class="fab fa-twitter text-xl"></i> | |
| </a> | |
| <a href="https://www.linkedin.com/company/ia-dashboard" target="_blank" class="text-gray-400 hover:text-white transition"> | |
| <i class="fab fa-linkedin text-xl"></i> | |
| </a> | |
| <a href="https://github.com/ia-dashboard" target="_blank" class="text-gray-400 hover:text-white transition"> | |
| <i class="fab fa-github text-xl"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-700 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-400 text-sm mb-4 md:mb-0">© 2025 IA Dashboard. Tous droits réservés.</p> | |
| <div class="flex space-x-4"> | |
| <a href="/mentions-legales" class="text-gray-400 hover:text-white text-sm">Mentions légales</a> | |
| <a href="/confidentialite" class="text-gray-400 hover:text-white text-sm">Confidentialité</a> | |
| <a href="/contact" class="text-gray-400 hover:text-white text-sm">Contact</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Menu mobile | |
| document.getElementById('menu-toggle').addEventListener('click', function() { | |
| const menu = document.getElementById('mobile-menu'); | |
| menu.classList.toggle('hidden'); | |
| }); | |
| // Filtrage par secteur | |
| const sectorTabs = document.querySelectorAll('.sector-tab'); | |
| sectorTabs.forEach(tab => { | |
| tab.addEventListener('click', function() { | |
| const sector = this.getAttribute('data-sector'); | |
| // Mettre à jour l'onglet actif | |
| sectorTabs.forEach(t => t.classList.remove('active')); | |
| this.classList.add('active'); | |
| // Filtrer les cartes | |
| const iaCards = document.querySelectorAll('.ia-card'); | |
| let visibleCards = 0; | |
| iaCards.forEach(card => { | |
| if (sector === 'all' || card.getAttribute('data-sectors').includes(sector)) { | |
| card.style.display = 'block'; | |
| visibleCards++; | |
| } else { | |
| card.style.display = 'none'; | |
| } | |
| }); | |
| // Afficher le message si aucun résultat | |
| const emptyMsg = document.getElementById('empty-sector-message'); | |
| if (visibleCards === 0 && sector !== 'all') { | |
| emptyMsg.classList.remove('hidden'); | |
| } else { | |
| emptyMsg.classList.add('hidden'); | |
| } | |
| }); | |
| }); | |
| // Gestion des documents | |
| document.getElementById('add-document-btn').addEventListener('click', function() { | |
| document.getElementById('document-form').classList.remove('hidden'); | |
| }); | |
| document.getElementById('cancel-doc').addEventListener('click', function() { | |
| document.getElementById('document-form').classList.add('hidden'); | |
| document.getElementById('upload-form').reset(); | |
| }); | |
| document.getElementById('upload-form').addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| // Récupérer les valeurs du formulaire | |
| const title = document.getElementById('doc-title').value; | |
| const category = document.getElementById('doc-category').value; | |
| const description = document.getElementById('doc-description').value; | |
| const file = document.getElementById('doc-file').files[0]; | |
| // Créer un nouveau document | |
| const docCard = document.createElement('div'); | |
| docCard.className = 'document-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300 fade-in'; | |
| docCard.innerHTML = ` | |
| <div class="p-6"> | |
| <div class="flex items-start mb-4"> | |
| <div class="bg-primary-light p-3 rounded-lg mr-4"> | |
| <i class="fas fa-file text-primary-dark text-xl"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold text-gray-800">${title}</h3> | |
| <span class="text-xs ${getCategoryClass(category)}">${getCategoryLabel(category)}</span> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 text-sm mb-4">${description || 'Aucune description fournie.'}</p> | |
| <div class="flex justify-between items-center text-sm text-gray-500"> | |
| <span>Ajouté le ${new Date().toLocaleDateString('fr-FR')}</span> | |
| <div class="flex space-x-2"> | |
| <a href="#" class="text-primary hover:text-primary-dark"> | |
| <i class="fas fa-download"></i> | |
| </a> | |
| <button class="text-gray-500 hover:text-gray-700 delete-doc"> | |
| <i class="fas fa-trash"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| `; | |
| // Ajouter à la liste | |
| document.getElementById('documents-list').prepend(docCard); | |
| // Réinitialiser et masquer le formulaire | |
| document.getElementById('upload-form').reset(); | |
| document.getElementById('document-form').classList.add('hidden'); | |
| </html> |