Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>MedSynapse - Plateforme IA pour Professionnels de Santé</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"> | |
| <script> | |
| tailwind.config = { | |
| darkMode: 'class', | |
| theme: { | |
| extend: { | |
| colors: { | |
| medical: { | |
| dark: '#0f172a', | |
| primary: '#3b82f6', | |
| secondary: '#10b981', | |
| accent: '#8b5cf6', | |
| text: '#e2e8f0', | |
| light: '#1e293b', | |
| danger: '#ef4444', | |
| warning: '#f59e0b' | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| .custom-scrollbar::-webkit-scrollbar { | |
| width: 6px; | |
| } | |
| .custom-scrollbar::-webkit-scrollbar-track { | |
| background: #1e293b; | |
| } | |
| .custom-scrollbar::-webkit-scrollbar-thumb { | |
| background-color: #3b82f6; | |
| border-radius: 20px; | |
| } | |
| .dicom-viewer { | |
| background: linear-gradient(135deg, #1e293b 25%, transparent 25%) -10px 0, | |
| linear-gradient(225deg, #1e293b 25%, transparent 25%) -10px 0, | |
| linear-gradient(315deg, #1e293b 25%, transparent 25%), | |
| linear-gradient(45deg, #1e293b 25%, transparent 25%); | |
| background-size: 20px 20px; | |
| } | |
| .waveform { | |
| background: repeating-linear-gradient(90deg, #3b82f6, #3b82f6 2px, transparent 2px, transparent 4px); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-medical-dark text-medical-text min-h-screen font-sans"> | |
| <!-- Onboarding Tutorial Overlay --> | |
| <div id="onboarding-overlay" class="fixed inset-0 bg-black bg-opacity-80 z-50 flex items-center justify-center hidden"> | |
| <div class="bg-medical-light rounded-lg max-w-2xl w-full mx-4 p-6 relative"> | |
| <div id="onboarding-step-1" class="onboarding-step"> | |
| <h2 class="text-2xl font-bold mb-4">Bienvenue dans MedSynapse</h2> | |
| <p class="mb-6">L'IA médicale multimodale pour les professionnels de santé. Cliquez sur Suivant pour découvrir ses capacités.</p> | |
| <div class="flex justify-between"> | |
| <div></div> | |
| <button onclick="nextOnboardingStep()" class="bg-medical-primary hover:bg-blue-600 text-white px-6 py-2 rounded-lg"> | |
| Suivant <i class="fas fa-arrow-right ml-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Other steps will be shown here dynamically --> | |
| </div> | |
| </div> | |
| <!-- Navigation --> | |
| <nav class="bg-medical-dark border-b border-medical-light sticky top-0 z-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex items-center justify-between h-16"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 flex items-center"> | |
| <i class="fas fa-brain text-medical-secondary text-2xl mr-2"></i> | |
| <span class="text-xl font-bold text-white">Med<span class="text-medical-primary">Synapse</span></span> | |
| </div> | |
| <div class="hidden md:block"> | |
| <div class="ml-10 flex items-baseline space-x-4"> | |
| <a href="#" class="text-medical-primary px-3 py-2 rounded-md text-sm font-medium">Tableau de bord</a> | |
| <a href="#" class="text-medical-text hover:text-medical-primary px-3 py-2 rounded-md text-sm font-medium">Assistant Clinique</a> | |
| <a href="#" class="text-medical-text hover:text-medical-primary px-3 py-2 rounded-md text-sm font-medium">Imagerie Médicale</a> | |
| <a href="#" class="text-medical-text hover:text-medical-primary px-3 py-2 rounded-md text-sm font-medium">Triage</a> | |
| <a href="#" class="text-medical-text hover:text-medical-primary px-3 py-2 rounded-md text-sm font-medium">Formation</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="hidden md:block"> | |
| <div class="ml-4 flex items-center md:ml-6"> | |
| <button class="p-1 rounded-full text-medical-text hover:text-white focus:outline-none"> | |
| <i class="fas fa-bell"></i> | |
| </button> | |
| <div class="ml-3 relative"> | |
| <div> | |
| <button id="user-menu" class="max-w-xs flex items-center text-sm rounded-full focus:outline-none"> | |
| <span class="sr-only">Ouvrir le menu utilisateur</span> | |
| <img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1559839734-2b71ea197ec2?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="-mr-2 flex md:hidden"> | |
| <button id="mobile-menu-button" class="inline-flex items-center justify-center p-2 rounded-md text-medical-text hover:text-white hover:bg-medical-light focus:outline-none"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div id="mobile-menu" class="hidden md:hidden"> | |
| <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3"> | |
| <a href="#" class="text-medical-primary block px-3 py-2 rounded-md text-base font-medium">Tableau de bord</a> | |
| <a href="#" class="text-medical-text hover:text-medical-primary block px-3 py-2 rounded-md text-base font-medium">Assistant Clinique</a> | |
| <a href="#" class="text-medical-text hover:text-medical-primary block px-3 py-2 rounded-md text-base font-medium">Imagerie Médicale</a> | |
| <a href="#" class="text-medical-text hover:text-medical-primary block px-3 py-2 rounded-md text-base font-medium">Triage</a> | |
| <a href="#" class="text-medical-text hover:text-medical-primary block px-3 py-2 rounded-md text-base font-medium">Formation</a> | |
| </div> | |
| <div class="pt-4 pb-3 border-t border-medical-light"> | |
| <div class="flex items-center px-5"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1559839734-2b71ea197ec2?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""> | |
| </div> | |
| <div class="ml-3"> | |
| <div class="text-base font-medium text-white">Dr. Jean Dupont</div> | |
| <div class="text-sm font-medium text-medical-text">jean.dupont@hopital.fr</div> | |
| </div> | |
| </div> | |
| <div class="mt-3 px-2 space-y-1"> | |
| <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-medical-text hover:text-white hover:bg-medical-light">Votre profil</a> | |
| <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-medical-text hover:text-white hover:bg-medical-light">Paramètres</a> | |
| <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-medical-text hover:text-white hover:bg-medical-light">Déconnexion</a> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Main Content --> | |
| <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"> | |
| <div class="flex flex-col md:flex-row gap-6"> | |
| <!-- Sidebar --> | |
| <div class="w-full md:w-64 flex-shrink-0"> | |
| <div class="bg-medical-light rounded-lg p-4 sticky top-24"> | |
| <h3 class="text-lg font-semibold mb-4">Fonctionnalités</h3> | |
| <ul class="space-y-2"> | |
| <li> | |
| <a href="#assistant" class="flex items-center p-2 rounded hover:bg-medical-dark"> | |
| <i class="fas fa-comment-medical text-medical-primary mr-3"></i> | |
| <span>Assistant Clinique</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#compte-rendu" class="flex items-center p-2 rounded hover:bg-medical-dark"> | |
| <i class="fas fa-file-medical text-medical-secondary mr-3"></i> | |
| <span>Comptes Rendus</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#imagerie" class="flex items-center p-2 rounded hover:bg-medical-dark"> | |
| <i class="fas fa-x-ray text-medical-accent mr-3"></i> | |
| <span>Analyse d'Imagerie</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#recherche" class="flex items-center p-2 rounded hover:bg-medical-dark"> | |
| <i class="fas fa-search text-medical-warning mr-3"></i> | |
| <span>Recherche Médicale</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#triage" class="flex items-center p-2 rounded hover:bg-medical-dark"> | |
| <i class="fas fa-procedures text-medical-danger mr-3"></i> | |
| <span>Triage Patient</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#formation" class="flex items-center p-2 rounded hover:bg-medical-dark"> | |
| <i class="fas fa-graduation-cap text-medical-primary mr-3"></i> | |
| <span>Formation</span> | |
| </a> | |
| </li> | |
| </ul> | |
| <div class="mt-6 pt-4 border-t border-medical-dark"> | |
| <h3 class="text-lg font-semibold mb-3">Derniers Dossiers</h3> | |
| <ul class="space-y-2 text-sm"> | |
| <li class="flex items-center"> | |
| <div class="w-2 h-2 rounded-full bg-medical-secondary mr-2"></div> | |
| <span>PAT-2023-0456</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <div class="w-2 h-2 rounded-full bg-medical-warning mr-2"></div> | |
| <span>PAT-2023-0789</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <div class="w-2 h-2 rounded-full bg-medical-primary mr-2"></div> | |
| <span>PAT-2023-0123</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content Area --> | |
| <div class="flex-1"> | |
| <!-- Welcome Banner --> | |
| <div class="bg-gradient-to-r from-medical-dark to-medical-light rounded-lg p-6 mb-6 border border-medical-light"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="flex-1"> | |
| <h1 class="text-2xl md:text-3xl font-bold mb-2">Bienvenue, Dr. Dupont</h1> | |
| <p class="text-medical-text opacity-90">Comment pouvons-nous vous aider aujourd'hui ? MedSynapse est prêt à vous assister dans vos tâches cliniques.</p> | |
| </div> | |
| <div class="mt-4 md:mt-0"> | |
| <button class="bg-medical-primary hover:bg-blue-600 text-white px-6 py-2 rounded-lg flex items-center"> | |
| <i class="fas fa-plus mr-2"></i> Nouveau Dossier | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Assistant Clinique Section --> | |
| <section id="assistant" class="mb-8"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h2 class="text-xl font-semibold flex items-center"> | |
| <i class="fas fa-comment-medical text-medical-primary mr-2"></i> | |
| Assistant Clinique | |
| </h2> | |
| <div class="flex space-x-2"> | |
| <button class="bg-medical-light hover:bg-medical-dark text-medical-text px-3 py-1 rounded text-sm"> | |
| <i class="fas fa-microphone mr-1"></i> Dictée | |
| </button> | |
| <button class="bg-medical-light hover:bg-medical-dark text-medical-text px-3 py-1 rounded text-sm"> | |
| <i class="fas fa-file-import mr-1"></i> Importer | |
| </button> | |
| </div> | |
| </div> | |
| <div class="bg-medical-light rounded-lg overflow-hidden"> | |
| <div class="p-4 border-b border-medical-dark"> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-3 h-3 rounded-full bg-red-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-yellow-500"></div> | |
| <div class="w-3 h-3 rounded-full bg-green-500"></div> | |
| <span class="text-sm ml-2 text-medical-text opacity-70">MedGemma 27B - Mode Texte</span> | |
| </div> | |
| </div> | |
| <div class="p-4 h-64 overflow-y-auto custom-scrollbar"> | |
| <div class="flex mb-4"> | |
| <div class="flex-shrink-0 mr-3"> | |
| <img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1559839734-2b71ea197ec2?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""> | |
| </div> | |
| <div class="bg-medical-dark rounded-lg p-3 max-w-3/4"> | |
| <p class="text-sm">Patient de 45 ans, antécédents d'HTA et diabète type 2, présente une douleur thoracique depuis 2 heures avec irradiation au bras gauche. TA 160/95, FC 98/min, SpO2 96%. ECG : sus-décalage ST en V2-V4. Quel est votre diagnostic et prise en charge ?</p> | |
| </div> | |
| </div> | |
| <div class="flex mb-4 justify-end"> | |
| <div class="bg-medical-primary rounded-lg p-3 max-w-3/4"> | |
| <p class="text-sm text-white">Diagnostic probable : syndrome coronarien aigu avec élévation du ST (STEMI) antérieur. Prise en charge urgente : appel du cath lab, aspirine 250-300 mg IV, ticagrelor 180 mg per os, héparine IV selon protocole local, analgésie par morphine si nécessaire, monitorisation stricte. À confirmer par angiographie coronaire en urgence.</p> | |
| <div class="mt-2 flex justify-end text-xs text-blue-200"> | |
| <span>Confiance : 92%</span> | |
| </div> | |
| </div> | |
| <div class="flex-shrink-0 ml-3"> | |
| <i class="fas fa-robot text-medical-primary text-2xl"></i> | |
| </div> | |
| </div> | |
| <div class="flex mb-4"> | |
| <div class="flex-shrink-0 mr-3"> | |
| <img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1559839734-2b71ea197ec2?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""> | |
| </div> | |
| <div class="bg-medical-dark rounded-lg p-3 max-w-3/4"> | |
| <p class="text-sm">Merci. Pouvez-vous générer un compte-rendu d'admission standardisé pour ce cas ?</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4 border-t border-medical-dark"> | |
| <div class="flex"> | |
| <input type="text" placeholder="Poser une question ou décrire un cas clinique..." class="flex-1 bg-medical-dark border border-medical-light rounded-l-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-medical-primary"> | |
| <button class="bg-medical-primary hover:bg-blue-600 text-white px-4 py-2 rounded-r-lg"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Compte Rendu Section --> | |
| <section id="compte-rendu" class="mb-8"> | |
| <h2 class="text-xl font-semibold mb-4 flex items-center"> | |
| <i class="fas fa-file-medical text-medical-secondary mr-2"></i> | |
| Rédaction Automatique de Comptes Rendus | |
| </h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div class="bg-medical-light rounded-lg p-4"> | |
| <div class="flex items-center justify-between mb-3"> | |
| <h3 class="font-medium">À partir de notes</h3> | |
| <button class="text-medical-primary text-sm flex items-center"> | |
| <i class="fas fa-history mr-1"></i> Historique | |
| </button> | |
| </div> | |
| <textarea class="w-full bg-medical-dark rounded-lg p-3 h-40 mb-3 focus:outline-none focus:ring-2 focus:ring-medical-secondary" placeholder="Coller vos notes brutes ici..."></textarea> | |
| <button class="w-full bg-medical-secondary hover:bg-emerald-600 text-white py-2 rounded-lg flex items-center justify-center"> | |
| <i class="fas fa-magic mr-2"></i> Générer le Compte-Rendu | |
| </button> | |
| </div> | |
| <div class="bg-medical-light rounded-lg p-4"> | |
| <div class="flex items-center justify-between mb-3"> | |
| <h3 class="font-medium">À partir de dictée</h3> | |
| <span class="text-xs text-medical-text opacity-70">Français, Anglais, Chinois</span> | |
| </div> | |
| <div class="bg-medical-dark rounded-lg p-4 mb-3 h-40 flex flex-col items-center justify-center"> | |
| <button class="mb-2 p-4 rounded-full bg-medical-secondary bg-opacity-20 border-2 border-medical-secondary"> | |
| <i class="fas fa-microphone text-medical-secondary text-2xl"></i> | |
| </button> | |
| <p class="text-sm text-center text-medical-text opacity-70">Cliquez pour commencer l'enregistrement</p> | |
| <div class="mt-2 waveform w-full h-8"></div> | |
| </div> | |
| <button class="w-full bg-medical-secondary hover:bg-emerald-600 text-white py-2 rounded-lg flex items-center justify-center"> | |
| <i class="fas fa-file-audio mr-2"></i> Transcrire et Analyser | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mt-6 bg-medical-light rounded-lg p-4"> | |
| <h3 class="font-medium mb-3 flex items-center"> | |
| <i class="fas fa-user-injured mr-2"></i> | |
| Résumé de Dossier Patient | |
| </h3> | |
| <div class="flex flex-col md:flex-row gap-4"> | |
| <div class="flex-1"> | |
| <label class="block text-sm mb-1">ID Patient</label> | |
| <input type="text" class="w-full bg-medical-dark rounded-lg p-2 mb-3 focus:outline-none focus:ring-2 focus:ring-medical-secondary" placeholder="PAT-XXXX-XXXX"> | |
| </div> | |
| <div class="flex-1"> | |
| <label class="block text-sm mb-1">Sources à inclure</label> | |
| <div class="flex flex-wrap gap-2"> | |
| <label class="inline-flex items-center"> | |
| <input type="checkbox" class="form-checkbox text-medical-secondary rounded" checked> | |
| <span class="ml-2 text-sm">Notes d'hospitalisation</span> | |
| </label> | |
| <label class="inline-flex items-center"> | |
| <input type="checkbox" class="form-checkbox text-medical-secondary rounded" checked> | |
| <span class="ml-2 text-sm">Prescriptions</span> | |
| </label> | |
| <label class="inline-flex items-center"> | |
| <input type="checkbox" class="form-checkbox text-medical-secondary rounded"> | |
| <span class="ml-2 text-sm">Imagerie</span> | |
| </label> | |
| <label class="inline-flex items-center"> | |
| <input type="checkbox" class="form-checkbox text-medical-secondary rounded" checked> | |
| <span class="ml-2 text-sm">Antécédents</span> | |
| </label> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="mt-3 bg-medical-secondary hover:bg-emerald-600 text-white py-2 px-4 rounded-lg flex items-center"> | |
| <i class="fas fa-file-contract mr-2"></i> Générer le Résumé | |
| </button> | |
| </div> | |
| </section> | |
| <!-- Imagerie Médicale Section --> | |
| <section id="imagerie" class="mb-8"> | |
| <h2 class="text-xl font-semibold mb-4 flex items-center"> | |
| <i class="fas fa-x-ray text-medical-accent mr-2"></i> | |
| Analyse d'Imagerie Médicale | |
| </h2> | |
| <div class="bg-medical-light rounded-lg overflow-hidden"> | |
| <div class="p-4 border-b border-medical-dark flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <div class="w-3 h-3 rounded-full bg-red-500 mr-2"></div> | |
| <div class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></div> | |
| <div class="w-3 h-3 rounded-full bg-green-500 mr-2"></div> | |
| <span class="text-sm ml-2">MedGemma 27B - Mode Multimodal</span> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="text-xs bg-medical-dark hover:bg-medical-primary hover:text-white px-2 py-1 rounded"> | |
| Radiographie | |
| </button> | |
| <button class="text-xs bg-medical-dark hover:bg-medical-primary hover:text-white px-2 py-1 rounded"> | |
| IRM | |
| </button> | |
| <button class="text-xs bg-medical-dark hover:bg-medical-primary hover:text-white px-2 py-1 rounded"> | |
| Scanner | |
| </button> | |
| <button class="text-xs bg-medical-dark hover:bg-medical-primary hover:text-white px-2 py-1 rounded"> | |
| Dermatologie | |
| </button> | |
| </div> | |
| </div> | |
| <div class="p-4 grid grid-cols-1 lg:grid-cols-3 gap-6"> | |
| <div class="lg:col-span-2"> | |
| <div class="dicom-viewer rounded-lg border-2 border-dashed border-medical-dark h-96 flex items-center justify-center"> | |
| <div class="text-center"> | |
| <i class="fas fa-cloud-upload-alt text-4xl text-medical-text opacity-50 mb-2"></i> | |
| <p class="text-medical-text opacity-70">Glissez-déposez une image médicale ou</p> | |
| <button class="mt-2 bg-medical-accent hover:bg-purple-600 text-white py-2 px-4 rounded-lg"> | |
| <i class="fas fa-folder-open mr-2"></i> Parcourir | |
| </button> | |
| <p class="text-xs mt-2 text-medical-text opacity-50">DICOM, JPG, PNG (max 20MB)</p> | |
| </div> | |
| </div> | |
| <div class="mt-4 bg-medical-dark rounded-lg p-3"> | |
| <label class="block text-sm mb-2">Contexte clinique (optionnel)</label> | |
| <textarea class="w-full bg-medical-light rounded-lg p-3 h-20 focus:outline-none focus:ring-2 focus:ring-medical-accent" placeholder="Décrire les symptômes, antécédents pertinents..."></textarea> | |
| </div> | |
| </div> | |
| <div class="lg:col-span-1"> | |
| <div class="bg-medical-dark rounded-lg p-4 h-full"> | |
| <h3 class="font-medium mb-3">Résultats d'Analyse</h3> | |
| <div class="text-center py-8 text-medical-text opacity-50"> | |
| <i class="fas fa-microscope text-3xl mb-2"></i> | |
| <p>Aucune image analysée</p> | |
| </div> | |
| <div class="mt-auto"> | |
| <button class="w-full bg-medical-accent hover:bg-purple-600 text-white py-2 rounded-lg flex items-center justify-center"> | |
| <i class="fas fa-diagnoses mr-2"></i> Analyser l'Image | |
| </button> | |
| <button class="w-full mt-2 bg-medical-dark border border-medical-accent text-medical-accent py-2 rounded-lg flex items-center justify-center"> | |
| <i class="fas fa-search mr-2"></i> Recherche Similaire | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6 grid grid-cols-1 md:grid-cols-3 gap-4"> | |
| <div class="bg-medical-light rounded-lg p-4"> | |
| <div class="flex items-center mb-2"> | |
| <i class="fas fa-lungs text-medical-accent mr-2"></i> | |
| <h3 class="font-medium">Radiographie Pulmonaire</h3> | |
| </div> | |
| <p class="text-sm text-medical-text opacity-80 mb-3">Détection d'opacités, épanchements, pneumothorax, etc.</p> | |
| <div class="text-xs bg-medical-dark rounded-full px-3 py-1 inline-block">Précision: 94%</div> | |
| </div> | |
| <div class="bg-medical-light rounded-lg p-4"> | |
| <div class="flex items-center mb-2"> | |
| <i class="fas fa-brain text-medical-accent mr-2"></i> | |
| <h3 class="font-medium">IRM Cérébrale</h3> | |
| </div> | |
| <p class="text-sm text-medical-text opacity-80 mb-3">Détection d'AVC, tumeurs, sclérose en plaques, etc.</p> | |
| <div class="text-xs bg-medical-dark rounded-full px-3 py-1 inline-block">Précision: 91%</div> | |
| </div> | |
| <div class="bg-medical-light rounded-lg p-4"> | |
| <div class="flex items-center mb-2"> | |
| <i class="fas fa-allergies text-medical-accent mr-2"></i> | |
| <h3 class="font-medium">Dermatologie</h3> | |
| </div> | |
| <p class="text-sm text-medical-text opacity-80 mb-3">Détection de mélanomes, psoriasis, eczéma, etc.</p> | |
| <div class="text-xs bg-medical-dark rounded-full px-3 py-1 inline-block">Précision: 89%</div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Recherche Médicale Section --> | |
| <section id="recherche" class="mb-8"> | |
| <h2 class="text-xl font-semibold mb-4 flex items-center"> | |
| <i class="fas fa-search text-medical-warning mr-2"></i> | |
| Moteur de Recherche Médicale | |
| </h2> | |
| <div class="bg-medical-light rounded-lg p-4"> | |
| <div class="flex flex-col md:flex-row gap-4 mb-4"> | |
| <div class="flex-1"> | |
| <label class="block text-sm mb-1">Recherche par texte</label> | |
| <div class="relative"> | |
| <input type="text" class="w-full bg-medical-dark rounded-lg p-2 pl-10 focus:outline-none focus:ring-2 focus:ring-medical-warning" placeholder="Ex: fracture radius distal enfant"> | |
| <i class="fas fa-search absolute left-3 top-3 text-medical-text opacity-50"></i> | |
| </div> | |
| </div> | |
| <div class="flex-1"> | |
| <label class="block text-sm mb-1">Recherche par image</label> | |
| <div class="flex"> | |
| <div class="flex-1 bg-medical-dark rounded-l-lg p-2 flex items-center justify-center"> | |
| <span class="text-sm text-medical-text opacity-70">Glissez une image ici</span> | |
| </div> | |
| <button class="bg-medical-warning text-white px-3 rounded-r-lg"> | |
| <i class="fas fa-upload"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex space-x-2"> | |
| <button class="text-xs bg-medical-warning bg-opacity-20 text-medical-warning px-2 py-1 rounded"> | |
| Tous | |
| </button> | |
| <button class="text-xs bg-medical-dark hover:bg-medical-warning hover:text-white px-2 py-1 rounded"> | |
| Radiographies | |
| </button> | |
| <button class="text-xs bg-medical-dark hover:bg-medical-warning hover:text-white px-2 py-1 rounded"> | |
| IRM | |
| </button> | |
| <button class="text-xs bg-medical-dark hover:bg-medical-warning hover:text-white px-2 py-1 rounded"> | |
| Scanner | |
| </button> | |
| <button class="text-xs bg-medical-dark hover:bg-medical-warning hover:text-white px-2 py-1 rounded"> | |
| Échographie | |
| </button> | |
| </div> | |
| <button class="text-sm bg-medical-warning hover:bg-amber-600 text-white px-4 py-1 rounded-lg"> | |
| <i class="fas fa-search mr-1"></i> Rechercher | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mt-4 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-3"> | |
| <div class="bg-medical-dark rounded-lg overflow-hidden border border-medical-light"> | |
| <div class="h-32 bg-gray-800 flex items-center justify-center"> | |
| <i class="fas fa-image text-3xl text-medical-text opacity-30"></i> | |
| </div> | |
| <div class="p-2"> | |
| <p class="text-sm truncate">RX thorax pneumonie</p> | |
| <p class="text-xs text-medical-text opacity-50">92% similarité</p> | |
| </div> | |
| </div> | |
| <div class="bg-medical-dark rounded-lg overflow-hidden border border-medical-light"> | |
| <div class="h-32 bg-gray-800 flex items-center justify-center"> | |
| <i class="fas fa-image text-3xl text-medical-text opacity-30"></i> | |
| </div> | |
| <div class="p-2"> | |
| <p class="text-sm truncate">IRM cerveau tumeur</p> | |
| <p class="text-xs text-medical-text opacity-50">87% similarité</p> | |
| </div> | |
| </div> | |
| <div class="bg-medical-dark rounded-lg overflow-hidden border border-medical-light"> | |
| <div class="h-32 bg-gray-800 flex items-center justify-center"> | |
| <i class="fas fa-image text-3xl text-medical-text opacity-30"></i> | |
| </div> | |
| <div class="p-2"> | |
| <p class="text-sm truncate">Scanner abdome appendicite</p> | |
| <p class="text-xs text-medical-text opacity-50">85% similarité</p> | |
| </div> | |
| </div> | |
| <div class="bg-medical-dark rounded-lg overflow-hidden border border-medical-light"> | |
| <div class="h-32 bg-gray-800 flex items-center justify-center"> | |
| <i class="fas fa-image text-3xl text-medical-text opacity-30"></i> | |
| </div> | |
| <div class="p-2"> | |
| <p class="text-sm truncate">Echo cardiaque FEVG basse</p> | |
| <p class="text-xs text-medical-text opacity-50">79% similarité</p> | |
| </div> | |
| </div> | |
| <div class="bg-medical-dark rounded-lg overflow-hidden border border-medical-light"> | |
| <div class="h-32 bg-gray-800 flex items-center justify-center"> | |
| <i class="fas fa-image text-3xl text-medical-text opacity-30"></i> | |
| </div> | |
| <div class="p-2"> | |
| <p class="text-sm truncate">Dermatologie mélanome</p> | |
| <p class="text-xs text-medical-text opacity-50">76% similarité</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Triage Patient Section --> | |
| <section id="triage" class="mb-8"> | |
| <h2 class="text-xl font-semibold mb-4 flex items-center"> | |
| <i class="fas fa-procedures text-medical-danger mr-2"></i> | |
| Assistant de Triage Patient | |
| </h2> | |
| <div class="bg-medical-light rounded-lg overflow-hidden"> | |
| <div class="p-4 border-b border-medical-dark flex items-center"> | |
| <div class="w-3 h-3 rounded-full bg-red-500 mr-2"></div> | |
| <div class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></div> | |
| <div class="w-3 h-3 rounded-full bg-green-500 mr-2"></div> | |
| <span class="text-sm ml-2">Mode Multimodal - Texte + Image</span> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-3"> | |
| <div class="lg:col-span-2 p-4"> | |
| <div class="flex mb-4"> | |
| <div class="flex-shrink-0 mr-3"> | |
| <img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1559839734-2b71ea197ec2?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""> | |
| </div> | |
| <div class="bg-medical-dark rounded-lg p-3 max-w-3/4"> | |
| <p class="text-sm">Patient de 32 ans, fièvre à 39.5°C depuis 3 jours, toux productive avec expectorations verdâtres, dyspnée modérée. Pas d'antécédents particuliers. Voici une photo de la radiographie thoracique :</p> | |
| </div> | |
| </div> | |
| <div class="bg-medical-dark rounded-lg p-4 mb-4"> | |
| <div class="dicom-viewer rounded-lg h-48 flex items-center justify-center"> | |
| <i class="fas fa-x-ray text-4xl text-medical-text opacity-50"></i> | |
| </div> | |
| </div> | |
| <div class="flex justify-end mb-4"> | |
| <div class="bg-medical-primary rounded-lg p-3 max-w-3/4"> | |
| <p class="text-sm text-white">Diagnostic probable : pneumonie communautaire. Critères de gravité : CURB-65 score 1 (1 point pour confusion). Examens complémentaires recommandés : gaz du sang, PCR, hémocultures. Prise en charge : antibiothérapie probabiliste (amoxicilline-acide clavulanique), surveillance ambulatoire possible mais évaluation clinique dans les 48h nécessaire.</p> | |
| <div class="mt-2 flex justify-between text-xs text-blue-200"> | |
| <span>Confiance : 88%</span> | |
| <span>Urgence : <span class="font-bold">Niveau 3</span> (à voir dans les 12h)</span> | |
| </div> | |
| </div> | |
| <div class="flex-shrink-0 ml-3"> | |
| <i class="fas fa-robot text-medical-primary text-2xl"></i> | |
| </div> | |
| </div> | |
| <div class="flex"> | |
| <div class="flex-shrink-0 mr-3"> | |
| <img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1559839734-2b71ea197ec2?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""> | |
| </div> | |
| <div class="bg-medical-dark rounded-lg p-3 max-w-3/4"> | |
| <p class="text-sm">Quels sont les diagnostics différentiels à considérer ?</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="lg:col-span-1 bg-medical-dark p-4"> | |
| <h3 class="font-medium mb-3">Diagnostics Différentiels</h3> | |
| <div class="space-y-3"> | |
| <div class="bg-medical-light rounded-lg p-3"> | |
| <div class="flex justify-between items-start"> | |
| <span class="font-medium">Pneumonie bactérienne</span> | |
| <span class="text-xs bg-green-900 text-green-300 px-2 py-1 rounded-full">85%</span> | |
| </div> | |
| <p class="text-xs mt-1 text-medical-text opacity-80">Opacité alvéolaire lobaire inférieure droite sur la RX</p> | |
| </div> | |
| <div class="bg-medical-light rounded-lg p-3"> | |
| <div class="flex justify-between items-start"> | |
| <span class="font-medium">Bronchite aiguë</span> | |
| <span class="text-xs bg-yellow-900 text-yellow-300 px-2 py-1 rounded-full">45%</span> | |
| </div> | |
| <p class="text-xs mt-1 text-medical-text opacity-80">Moins probable avec fièvre élevée et image radiologique</p> | |
| </div> | |
| <div class="bg-medical-light rounded-lg p-3"> | |
| <div class="flex justify-between items-start"> | |
| <span class="font-medium">COVID-19</span> | |
| <span class="text-xs bg-yellow-900 text-yellow-300 px-2 py-1 rounded-full">35%</span> | |
| </div> | |
| <p class="text-xs mt-1 text-medical-text opacity-80">Test PCR recommandé malgré tableau typique bactérien</p> | |
| </div> | |
| <div class="bg-medical-light rounded-lg p-3"> | |
| <div class="flex justify-between items-start"> | |
| <span class="font-medium">Embolie pulmonaire</span> | |
| <span class="text-xs bg-red-900 text-red-300 px-2 py-1 rounded-full">15%</span> | |
| </div> | |
| <p class="text-xs mt-1 text-medical-text opacity-80">À évoquer si absence d'amélioration sous antibiotiques</p> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <h3 class="font-medium mb-2">Niveau d'Urgence</h3> | |
| <div class="bg-medical-light rounded-lg p-3"> | |
| <div class="flex items-center mb-1"> | |
| <div class="w-3 h-3 rounded-full bg-red-500 mr-2"></div> | |
| <span class="text-sm font-medium">Niveau 1</span> | |
| <span class="text-xs ml-auto">Urgence vitale immédiate</span> | |
| </div> | |
| <div class="flex items-center mb-1"> | |
| <div class="w-3 h-3 rounded-full bg-orange-500 mr-2"></div> | |
| <span class="text-sm font-medium">Niveau 2</span> | |
| <span class="text-xs ml-auto">Urgence potentiellement grave</span> | |
| </div> | |
| <div class="flex items-center mb-1"> | |
| <div class="w-3 h-3 rounded-full bg-yellow-500 mr-2 bg-medical-warning"></div> | |
| <span class="text-sm font-medium">Niveau 3</span> | |
| <span class="text-xs ml-auto">Urgence relative</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-3 h-3 rounded-full bg-green-500 mr-2"></div> | |
| <span class="text-sm font-medium">Niveau 4</span> | |
| <span class="text-xs ml-auto">Non urgent</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4 border-t border-medical-dark"> | |
| <div class="flex"> | |
| <input type="text" placeholder="Décrire les symptômes du patient..." class="flex-1 bg-medical-dark border border-medical-light rounded-l-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-medical-danger"> | |
| <button class="bg-medical-danger hover:bg-red-600 text-white px-4 py-2 rounded-r-lg"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| <div class="mt-2 flex items-center justify-between"> | |
| <div class="flex space-x-2"> | |
| <button class="text-xs bg-medical-dark hover:bg-medical-danger hover:text-white px-2 py-1 rounded flex items-center"> | |
| <i class="fas fa-camera mr-1"></i> Ajouter Image | |
| </button> | |
| <button class="text-xs bg-medical-dark hover:bg-medical-danger hover:text-white px-2 py-1 rounded flex items-center"> | |
| <i class="fas fa-microphone mr-1"></i> Dictée | |
| </button> | |
| </div> | |
| <span class="text-xs text-medical-text opacity-50">MedSynapse Triage v2.1</span> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Formation Section --> | |
| <section id="formation" class="mb-8"> | |
| <h2 class="text-xl font-semibold mb-4 flex items-center"> | |
| <i class="fas fa-graduation-cap text-medical-primary mr-2"></i> | |
| Outils de Formation Médicale | |
| </h2> | |
| <div class="bg-medical-light rounded-lg p-6"> | |
| <h3 class="text-lg font-medium mb-4">Générateur de Cas Cliniques</h3> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6"> | |
| <div> | |
| <div class="mb-4"> | |
| <label class="block text-sm mb-2">Spécialité</label> | |
| <select class="w-full bg-medical-dark rounded-lg p-2 focus:outline-none focus:ring-2 focus:ring-medical-primary"> | |
| <option>Cardiologie</option> | |
| <option selected>Pneumologie</option> | |
| <option>Neurologie</option> | |
| <option>Gastro-entérologie</option> | |
| <option>Dermatologie</option> | |
| </select> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-sm mb-2">Niveau de difficulté</label> | |
| <div class="flex space-x-2"> | |
| <button class="flex-1 bg-medical-primary text-white py-1 rounded text-sm">Débutant</button> | |
| <button class="flex-1 bg-medical-primary bg-opacity-50 text-white py-1 rounded text-sm">Intermédiaire</button> | |
| <button class="flex-1 bg-medical-dark hover:bg-medical-primary py-1 rounded text-sm">Avancé</button> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-sm mb-2">Inclure des images</label> | |
| <div class="flex space-x-2"> | |
| <button class="flex-1 bg-medical-primary text-white py-1 rounded text-sm">Oui</button> | |
| <button class="flex-1 bg-medical-dark hover:bg-medical-primary py-1 rounded text-sm">Non</button> | |
| </div> | |
| </div> | |
| <button class="w-full bg-medical-primary hover:bg-blue-600 text-white py-2 rounded-lg flex items-center justify-center"> | |
| <i class="fas fa-brain mr-2"></i> Générer un Cas Clinique | |
| </button> | |
| </div> | |
| <div class="bg-medical-dark rounded-lg p-4"> | |
| <h4 class="font-medium mb-3">Cas Clinique #PNE-045</h4> | |
| <div class="dicom-viewer rounded-lg h-40 mb-3 flex items-center justify-center"> | |
| <i class="fas fa-x-ray text-3xl text-medical-text opacity-50"></i> | |
| </div> | |
| <p class="text-sm mb-4">Patient de 68 ans, fumeur à 30 PA, présente une toux chronique avec hémoptysies récidivantes depuis 3 mois. Amaigrissement de 6 kg dans le même temps. Pas de fièvre. Examen clinique : matité à la percussion base droite, râles bronchiques localisés.</p> | |
| <div class="space-y-2"> | |
| <label class="flex items-center space-x-3"> | |
| <input type="radio" name="diagnostic" class="form-radio text-medical-primary"> | |
| <span class="text-sm">Cancer bronchique</span> | |
| </label> | |
| <label class="flex items-center space-x-3"> | |
| <input type="radio" name="diagnostic" class="form-radio text-medical-primary"> | |
| <span class="text-sm">Tuberculose pulmonaire</span> | |
| </label> | |
| <label class="flex items-center space-x-3"> | |
| <input type="radio" name="diagnostic" class="form-radio text-medical-primary"> | |
| <span class="text-sm">Pneumopathie infectieuse</span> | |
| </label> | |
| <label class="flex items-center space-x-3"> | |
| <input type="radio" name="diagnostic" class="form-radio text-medical-primary"> | |
| <span class="text-sm">Bronchectasies</span> | |
| </label> | |
| </div> | |
| <button class="mt-3 w-full bg-medical-primary hover:bg-blue-600 text-white py-1 rounded text-sm"> | |
| Valider et Voir la Correction | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4"> | |
| <div class="bg-medical-light rounded-lg p-4 hover:bg-medical-dark transition cursor-pointer"> | |
| <div class="flex items-center mb-2"> | |
| <div class="w-10 h-10 rounded-full bg-medical-primary bg-opacity-20 flex items-center justify-center mr-3"> | |
| <i class="fas fa-heartbeat text-medical-primary"></i> | |
| </div> | |
| <h3 class="font-medium">Cardiologie</h3> | |
| </div> | |
| <p class="text-sm text-medical-text opacity-80">12 cas cliniques disponibles</p> | |
| </div> | |
| <div class="bg-medical-light rounded-lg p-4 hover:bg-medical-dark transition cursor-pointer"> | |
| <div class="flex items-center mb-2"> | |
| <div class="w-10 h-10 rounded-full bg-medical-secondary bg-opacity-20 flex items-center justify-center mr-3"> | |
| <i class="fas fa-lungs text-medical-secondary"></i> | |
| </div> | |
| <h3 class="font-medium">Pneumologie</h3> | |
| </div> | |
| <p class="text-sm text-medical-text opacity-80">8 cas cliniques disponibles</p> | |
| </div> | |
| <div class="bg-medical-light rounded-lg p-4 hover:bg-medical-dark transition cursor-pointer"> | |
| <div class="flex items-center mb-2"> | |
| <div class="w-10 h-10 rounded-full bg-medical-accent bg-opacity-20 flex items-center justify-center mr-3"> | |
| <i class="fas fa-brain text-medical-accent"></i> | |
| </div> | |
| <h3 class="font-medium">Neurologie</h3> | |
| </div> | |
| <p class="text-sm text-medical-text opacity-80">10 cas cliniques disponibles</p> | |
| </div> | |
| <div class="bg-medical-light rounded-lg p-4 hover:bg-medical-dark transition cursor-pointer"> | |
| <div class="flex items-center mb-2"> | |
| <div class="w-10 h-10 rounded-full bg-medical-warning bg-opacity-20 flex items-center justify-center mr-3"> | |
| <i class="fas fa-allergies text-medical-warning"></i> | |
| </div> | |
| <h3 class="font-medium">Dermatologie</h3> | |
| </div> | |
| <p class="text-sm text-medical-text opacity-80">15 cas cliniques disponibles</p> | |
| </div> | |
| </div> | |
| </section> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Lead Capture Form --> | |
| <section id="lead-capture" class="hidden max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12"> | |
| <div class="bg-medical-light rounded-xl p-8"> | |
| <h2 class="text-2xl font-bold mb-2">Essayez MedSynapse dans votre structure</h2> | |
| <p class="text-medical-text opacity-90 mb-6">Laissez-nous vos coordonnées pour un accès démo personnalisé.</p> | |
| <form id="lead-form" class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div> | |
| <label class="block text-sm font-medium mb-1">Prénom*</label> | |
| <input type="text" required class="w-full bg-medical-dark rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-medical-primary"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-1">Nom*</label> | |
| <input type="text" required class="w-full bg-medical-dark rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-medical-primary"> | |
| </div> | |
| <div class="md:col-span-2"> | |
| <label class="block text-sm font-medium mb-1">Email professionnel*</label> | |
| <input type="email" required pattern="[^@\s]+@[^@\s]+\.[^@\s]+" class="w-full bg-medical-dark rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-medical-primary"> | |
| </div> | |
| <div class="md:col-span-2"> | |
| <label class="block text-sm font-medium mb-1">Numéro de téléphone</label> | |
| <input type="tel" class="w-full bg-medical-dark rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-medical-primary"> | |
| </div> | |
| <div class="md:col-span-2 flex justify-between items-center"> | |
| <div class="text-xs text-medical-text opacity-70"> | |
| <label class="inline-flex items-center"> | |
| <input type="checkbox" class="form-checkbox text-medical-primary rounded"> | |
| <span class="ml-2">Mode test sans enregistrement</span> | |
| </label> | |
| </div> | |
| <button type="submit" class="bg-medical-primary hover:bg-blue-600 text-white px-6 py-2 rounded-lg"> | |
| Demander un accès démo | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| </section> | |
| <!-- Confirmation Message --> | |
| <div id="confirmation-message" class="hidden fixed inset-0 bg-black bg-opacity-80 z-50 flex items-center justify-center"> | |
| <div class="bg-medical-light rounded-lg max-w-md w-full p-8 text-center"> | |
| <i class="fas fa-check-circle text-medical-secondary text-5xl mb-4"></i> | |
| <h2 class="text-2xl font-bold mb-2">Merci !</h2> | |
| <p class="mb-6">Vous serez contacté prochainement par notre équipe médicale IA.</p> | |
| <button onclick="closeConfirmation()" class="bg-medical-primary hover:bg-blue-600 text-white px-6 py-2 rounded-lg"> | |
| Fermer | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="bg-medical-dark border-t border-medical-light mt-12"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">MedSynapse</h3> | |
| <p class="text-sm text-medical-text opacity-80">Plateforme IA sécurisée pour les professionnels de santé. Conforme RGPD et normes médicales.</p> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Fonctionnalités</h3> | |
| <ul class="space-y-2 text-sm"> | |
| <li><a href="#" class="text-medical-text opacity-80 hover:text-medical-primary">Assistant Clinique</a></li> | |
| <li><a href="#" class="text-medical-text opacity-80 hover:text-medical-primary">Analyse d'Imagerie</a></li> | |
| <li><a href="#" class="text-medical-text opacity-80 hover:text-medical-primary">Recherche Médicale</a></li> | |
| <li><a href="#" class="text-medical-text opacity-80 hover:text-medical-primary">Triage Patient</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Ressources</h3> | |
| <ul class="space-y-2 text-sm"> | |
| <li><a href="#" class="text-medical-text opacity-80 hover:text-medical-primary">Documentation</a></li> | |
| <li><a href="#" class="text-medical-text opacity-80 hover:text-medical-primary">Formation</a></li> | |
| <li><a href="#" class="text-medical-text opacity-80 hover:text-medical-primary">Cas Cliniques</a></li> | |
| <li><a href="#" class="text-medical-text opacity-80 hover:text-medical-primary">API Intégration</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Sécurité</h3> | |
| <ul class="space-y-2 text-sm"> | |
| <li class="flex items-center text-medical-text opacity-80"><i class="fas fa-shield-alt text-medical-primary mr-2"></i> Chiffrement AES-256</li> | |
| <li class="flex items-center text-medical-text opacity-80"><i class="fas fa-server text-medical-primary mr-2"></i> Hébergement dédié</li> | |
| <li class="flex items-center text-medical-text opacity-80"><i class="fas fa-user-lock text-medical-primary mr-2"></i> Authentification forte</li> | |
| <li class="flex items-center text-medical-text opacity-80"><i class="fas fa-certificate text-medical-primary mr-2"></i> Certifié HDS</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="mt-8 pt-8 border-t border-medical-light flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-sm text-medical-text opacity-70">© 2023 MedSynapse. Tous droits réservés.</p> | |
| <div class="flex space-x-4 mt-4 md:mt-0"> | |
| <a href="#" class="text-medical-text opacity-70 hover:text-white"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="text-medical-text opacity-70 hover:text-white"><i class="fab fa-linkedin"></i></a> | |
| <a href="#" class="text-medical-text opacity-70 hover:text-white"><i class="fab fa-github"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Onboarding Tutorial | |
| const onboardingSteps = [ | |
| { | |
| title: "Assistant clinique", | |
| content: "Décrivez un cas clinique en langage naturel. L'IA génère automatiquement un compte-rendu professionnel." | |
| }, | |
| { | |
| title: "Analyse d'imagerie", | |
| content: "Importez une image médicale (ex. : radiographie) et obtenez un rapport instantané avec hypothèses diagnostiques." | |
| }, | |
| { | |
| title: "Moteur de recherche d'images", | |
| content: "Recherchez une image médicale par description ou par similarité visuelle (fonction MedSigLIP)." | |
| }, | |
| { | |
| title: "Assistant de triage", | |
| content: "Un chatbot IA vous aide à orienter les patients selon les symptômes et images fournies." | |
| }, | |
| { | |
| title: "Mode pédagogique", | |
| content: "Utilisez MedSynapse comme simulateur de cas cliniques pour former internes ou professionnels." | |
| } | |
| ]; | |
| let currentStep = 0; | |
| function startOnboarding() { | |
| document.getElementById('onboarding-overlay').classList.remove('hidden'); | |
| updateOnboardingStep(); | |
| } | |
| function updateOnboardingStep() { | |
| const stepContainer = document.getElementById('onboarding-overlay').querySelector('.onboarding-step'); | |
| if (currentStep === 0) { | |
| stepContainer.innerHTML = ` | |
| <h2 class="text-2xl font-bold mb-4">Bienvenue dans MedSynapse</h2> | |
| <p class="mb-6">L'IA médicale multimodale pour les professionnels de santé. Cliquez sur Suivant pour découvrir ses capacités.</p> | |
| <div class="flex justify-between"> | |
| <div></div> | |
| <button onclick="nextOnboardingStep()" class="bg-medical-primary hover:bg-blue-600 text-white px-6 py-2 rounded-lg"> | |
| Suivant <i class="fas fa-arrow-right ml-2"></i> | |
| </button> | |
| </div> | |
| `; | |
| } else if (currentStep <= onboardingSteps.length) { | |
| const step = onboardingSteps[currentStep - 1]; | |
| stepContainer.innerHTML = ` | |
| <h2 class="text-2xl font-bold mb-4">${step.title}</h2> | |
| <p class="mb-6">${step.content}</p> | |
| <div class="flex justify-between"> | |
| <button onclick="prevOnboardingStep()" class="text-medical-text hover:text-medical-primary px-4 py-2"> | |
| <i class="fas fa-arrow-left mr-2"></i> Précédent | |
| </button> | |
| <button onclick="nextOnboardingStep()" class="bg-medical-primary hover:bg-blue-600 text-white px-6 py-2 rounded-lg"> | |
| ${currentStep === onboardingSteps.length ? 'Terminer' : 'Suivant'} <i class="fas fa-${currentStep === onboardingSteps.length ? 'check' : 'arrow-right'} ml-2"></i> | |
| </button> | |
| </div> | |
| `; | |
| } | |
| } | |
| function nextOnboardingStep() { | |
| currentStep++; | |
| if (currentStep > onboardingSteps.length) { | |
| document.getElementById('onboarding-overlay').classList.add('hidden'); | |
| document.getElementById('lead-capture').classList.remove('hidden'); | |
| } else { | |
| updateOnboardingStep(); | |
| } | |
| } | |
| function prevOnboardingStep() { | |
| currentStep--; | |
| updateOnboardingStep(); | |
| } | |
| // Lead Form Submission | |
| document.getElementById('lead-form').addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| const testMode = this.querySelector('input[type="checkbox"]').checked; | |
| if (!testMode) { | |
| // In production, send to Supabase | |
| // fetch('YOUR_SUPABASE_ENDPOINT', { | |
| // method: 'POST', | |
| // headers: { 'Content-Type': 'application/json' }, | |
| // body: JSON.stringify({ | |
| // first_name: this.querySelector('input[type="text"]').value, | |
| // last_name: this.querySelectorAll('input[type="text"]')[1].value, | |
| // email: this.querySelector('input[type="email"]').value, | |
| // phone: this.querySelector('input[type="tel"]').value, | |
| // created_at: new Date().toISOString() | |
| // }) | |
| // }); | |
| } | |
| this.reset(); | |
| document.getElementById('lead-capture').classList.add('hidden'); | |
| document.getElementById('confirmation-message').classList.remove('hidden'); | |
| }); | |
| function closeConfirmation() { | |
| document.getElementById('confirmation-message').classList.add('hidden'); | |
| } | |
| // Start onboarding when page loads | |
| document.addEventListener('DOMContentLoaded', function() { | |
| setTimeout(startOnboarding, 1000); | |
| }); | |
| // Mobile menu toggle | |
| const mobileMenuButton = document.getElementById('mobile-menu-button'); | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| mobileMenuButton.addEventListener('click', () => { | |
| mobileMenu.classList.toggle('hidden'); | |
| }); | |
| // User menu toggle | |
| const userMenuButton = document.getElementById('user-menu'); | |
| const userMenu = document.getElementById('user-menu-dropdown'); | |
| userMenuButton.addEventListener('click', () => { | |
| userMenu.classList.toggle('hidden'); | |
| }); | |
| // Simulate loading for demo purposes | |
| document.addEventListener('DOMContentLoaded', () => { | |
| setTimeout(() => { | |
| const loadingElements = document.querySelectorAll('.animate-pulse'); | |
| loadingElements.forEach(el => { | |
| el.classList.remove('animate-pulse'); | |
| }); | |
| }, 1500); | |
| }); | |
| // Tab functionality for demonstration | |
| function openTab(evt, tabName) { | |
| const tabContents = document.getElementsByClassName('tab-content'); | |
| for (let i = 0; i < tabContents.length; i++) { | |
| tabContents[i].classList.add('hidden'); | |
| } | |
| const tabButtons = document.getElementsByClassName('tab-button'); | |
| for (let i = 0; i < tabButtons.length; i++) { | |
| tabButtons[i].classList.remove('bg-medical-primary', 'text-white'); | |
| tabButtons[i].classList.add('bg-medical-dark', 'text-medical-text'); | |
| } | |
| document.getElementById(tabName).classList.remove('hidden'); | |
| evt.currentTarget.classList.remove('bg-medical-dark', 'text-medical-text'); | |
| evt.currentTarget.classList.add('bg-medical-primary', 'text-white'); | |
| } | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=mathurinacheisoft/medsynapse" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |