Spaces:
Running
Running
toujours le même problème... je voudrais vraiment que lorsque l'on clique sur " espace pour l'interface IA de diagnostic" et " commencer maintenant" de l'accueil, ça nous redirige automatiquement sur la barre de recherche c'est a dire que l'on peut DIRECTEMENT écrire, sans devoir cliquer sur la barre de recherche pour décrire les symptomes.. De plus, je voudrais que cette barre de recherche soit plus haute dans la page "symptomes et diagnostic" , je voudrais aussi que le cadre pour déposer une ordonnance soit plus haut dans la page "déposer une ordonnance" de sorte à ce qu'on le voit directement. De meme pour l'espace patient, je veux que tu enlève le grand vide qu'il y a au dessus de " connexion" et "inscription" - Follow Up Deployment
5adf71e
verified
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta name="description" content="Déposez vos ordonnances en ligne avec PharmaCare - Simple, sécurisé et efficace"> | |
| <title>Déposer une ordonnance | PharmaCare</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> | |
| <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Montserrat', sans-serif; | |
| } | |
| .upload-area { | |
| border: 2px dashed #cbd5e0; | |
| transition: all 0.3s ease; | |
| } | |
| .upload-area:hover { | |
| border-color: #4299e1; | |
| background-color: #f0f9ff; | |
| } | |
| .upload-area.dragover { | |
| border-color: #4299e1; | |
| background-color: #ebf8ff; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-white"> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-sm py-4 px-6 md:px-12 flex justify-between items-center sticky top-0 z-50"> | |
| <div class="flex items-center"> | |
| <span class="text-xl font-bold text-gray-800">Pharma<span class="text-green-600">Care</span></span> | |
| </div> | |
| <div class="hidden md:flex space-x-8"> | |
| <a href="index.html" class="text-gray-600 hover:text-blue-600">Accueil</a> | |
| <a href="symptomes.html" class="text-gray-600 hover:text-blue-600">Symptômes & Diagnostic</a> | |
| <a href="ordonnance.html" class="text-blue-600 font-medium">Déposer ordonnance</a> | |
| <a href="espace-patient.html" class="text-gray-600 hover:text-blue-600">Espace patient</a> | |
| <a href="apropos.html" class="text-gray-600 hover:text-blue-600">À propos</a> | |
| <a href="contact.html" class="text-gray-600 hover:text-blue-600">Contact</a> | |
| </div> | |
| <button class="md:hidden"> | |
| <i data-feather="menu"></i> | |
| </button> | |
| </nav> | |
| <!-- Hero Section - Reduced padding --> | |
| <section class="bg-blue-50 py-8 px-6 md:px-12"> | |
| <div class="max-w-6xl mx-auto text-center"> | |
| <h1 class="text-3xl md:text-4xl font-bold text-gray-800 leading-tight mb-6" data-aos="fade-up"> | |
| Déposer une ordonnance en ligne | |
| </h1> | |
| <p class="text-lg text-gray-600 max-w-3xl mx-auto" data-aos="fade-up" data-aos-delay="100"> | |
| Chargez vos documents médicaux en toute sécurité et simplifiez votre suivi de traitement. | |
| </p> | |
| </div> | |
| </section> | |
| <!-- Main Content - Moved higher up --> | |
| <section class="py-8 px-6 md:px-12 bg-white"> | |
| <div class="max-w-4xl mx-auto"> | |
| <div class="bg-white p-8 md:p-10 rounded-xl shadow-lg border border-gray-100" data-aos="fade-up"> | |
| <div class="flex items-center mb-8"> | |
| <div class="w-14 h-14 bg-blue-100 rounded-full flex items-center justify-center mr-6"> | |
| <i data-feather="upload" class="text-blue-600 w-6 h-6"></i> | |
| </div> | |
| <h2 class="text-2xl font-bold text-gray-800">Téléverser votre ordonnance</h2> | |
| </div> | |
| <div class="space-y-8"> | |
| <div class="upload-area rounded-xl p-12 text-center cursor-pointer" id="uploadArea"> | |
| <div class="mx-auto w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-6"> | |
| <i data-feather="upload-cloud" class="text-blue-600 w-8 h-8"></i> | |
| </div> | |
| <h3 class="text-lg font-medium text-gray-700 mb-2">Glissez-déposez votre fichier ici</h3> | |
| <p class="text-gray-500 mb-4">ou</p> | |
| <label for="fileInput" class="inline-block bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-6 rounded-lg transition duration-300 cursor-pointer"> | |
| Sélectionner un fichier | |
| </label> | |
| <input type="file" id="fileInput" class="hidden" accept=".pdf,.jpg,.jpeg,.png"> | |
| <p class="text-sm text-gray-500 mt-4">Formats acceptés : PDF, JPG, PNG (max. 10MB)</p> | |
| </div> | |
| <div class="bg-gray-50 p-6 rounded-lg border border-gray-200"> | |
| <h3 class="font-medium text-gray-800 mb-3 flex items-center"> | |
| <i data-feather="info" class="text-blue-600 mr-2"></i> | |
| Conseils pour un bon téléversement | |
| </h3> | |
| <ul class="text-gray-600 space-y-2"> | |
| <li class="flex items-start"> | |
| <i data-feather="check" class="text-green-500 w-4 h-4 mr-2 mt-1"></i> | |
| <span>Assurez-vous que le document est bien lisible</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i data-feather="check" class="text-green-500 w-4 h-4 mr-2 mt-1"></i> | |
| <span>Photographiez dans un endroit bien éclairé</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i data-feather="check" class="text-green-500 w-4 h-4 mr-2 mt-1"></i> | |
| <span>Vérifiez que toutes les informations sont visibles</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="bg-blue-50 p-6 rounded-lg border border-blue-100"> | |
| <div class="flex items-center mb-3"> | |
| <i data-feather="lock" class="text-blue-600 mr-2"></i> | |
| <h3 class="font-medium text-blue-800">Sécurité des données</h3> | |
| </div> | |
| <p class="text-blue-700"> | |
| Vos documents médicaux sont stockés de manière sécurisée et cryptée. Seuls les professionnels de santé autorisés peuvent y accéder dans le cadre de votre suivi médical. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- How It Works --> | |
| <section class="py-20 px-6 md:px-12 bg-gray-50"> | |
| <div class="max-w-6xl mx-auto"> | |
| <h2 class="text-3xl font-bold text-center text-gray-800 mb-16" data-aos="fade-up">Comment ça marche ?</h2> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <!-- Step 1 --> | |
| <div class="bg-white p-8 rounded-xl shadow-sm border border-gray-100" data-aos="fade-up" data-aos-delay="100"> | |
| <div class="w-14 h-14 bg-blue-100 rounded-full flex items-center justify-center mb-6 text-blue-600 font-bold">1</div> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-3">Téléversez</h3> | |
| <p class="text-gray-600"> | |
| Chargez votre ordonnance ou document médical via notre interface sécurisée. | |
| </p> | |
| </div> | |
| <!-- Step 2 --> | |
| <div class="bg-white p-8 rounded-xl shadow-sm border border-gray-100" data-aos="fade-up" data-aos-delay="200"> | |
| <div class="w-14 h-14 bg-green-100 rounded-full flex items-center justify-center mb-6 text-green-600 font-bold">2</div> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-3">Vérification</h3> | |
| <p class="text-gray-600"> | |
| Notre équipe vérifie la validité de votre document sous 24h. | |
| </p> | |
| </div> | |
| <!-- Step 3 --> | |
| <div class="bg-white p-8 rounded-xl shadow-sm border border-gray-100" data-aos="fade-up" data-aos-delay="300"> | |
| <div class="w-14 h-14 bg-purple-100 rounded-full flex items-center justify-center mb-6 text-purple-600 font-bold">3</div> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-3">Suivi</h3> | |
| <p class="text-gray-600"> | |
| Accédez à votre espace patient pour suivre l'état de votre ordonnance. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Benefits --> | |
| <section class="py-20 px-6 md:px-12 bg-white"> | |
| <div class="max-w-6xl mx-auto"> | |
| <h2 class="text-3xl font-bold text-center text-gray-800 mb-16" data-aos="fade-up">Les avantages du dépôt en ligne</h2> | |
| <div class="grid md:grid-cols-2 gap-8"> | |
| <!-- Benefit 1 --> | |
| <div class="bg-white p-8 rounded-xl shadow-sm border border-gray-100 flex" data-aos="fade-up" data-aos-delay="100"> | |
| <div class="w-14 h-14 bg-blue-100 rounded-full flex items-center justify-center mr-6 flex-shrink-0"> | |
| <i data-feather="clock" class="text-blue-600 w-6 h-6"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-3">Gain de temps</h3> | |
| <p class="text-gray-600"> | |
| Plus besoin de vous déplacer pour déposer vos ordonnances. Faites-le en quelques clics depuis chez vous. | |
| </p> | |
| </div> | |
| </div> | |
| <!-- Benefit 2 --> | |
| <div class="bg-white p-8 rounded-xl shadow-sm border border-gray-100 flex" data-aos="fade-up" data-aos-delay="200"> | |
| <div class="w-14 h-14 bg-green-100 rounded-full flex items-center justify-center mr-6 flex-shrink-0"> | |
| <i data-feather="shield" class="text-green-600 w-6 h-6"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-3">Sécurité renforcée</h3> | |
| <p class="text-gray-600"> | |
| Vos documents sont stockés de manière cryptée et protégés contre toute perte ou vol. | |
| </p> | |
| </div> | |
| </div> | |
| <!-- Benefit 3 --> | |
| <div class="bg-white p-8 rounded-xl shadow-sm border border-gray-100 flex" data-aos="fade-up" data-aos-delay="300"> | |
| <div class="w-14 h-14 bg-purple-100 rounded-full flex items-center justify-center mr-6 flex-shrink-0"> | |
| <i data-feather="bell" class="text-purple-600 w-6 h-6"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-3">Alertes et rappels</h3> | |
| <p class="text-gray-600"> | |
| Recevez des notifications pour le renouvellement de vos traitements et la prise de vos médicaments. | |
| </p> | |
| </div> | |
| </div> | |
| <!-- Benefit 4 --> | |
| <div class="bg-white p-8 rounded-xl shadow-sm border border-gray-100 flex" data-aos="fade-up" data-aos-delay="400"> | |
| <div class="w-14 h-14 bg-yellow-100 rounded-full flex items-center justify-center mr-6 flex-shrink-0"> | |
| <i data-feather="archive" class="text-yellow-600 w-6 h-6"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-3">Historique complet</h3> | |
| <p class="text-gray-600"> | |
| Consultez l'ensemble de vos ordonnances passées dans votre espace patient. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA --> | |
| <section class="py-16 px-6 md:px-12 bg-blue-600 text-white"> | |
| <div class="max-w-4xl mx-auto text-center" data-aos="fade-up"> | |
| <h2 class="text-3xl font-bold mb-6">Vous n'avez pas encore de compte ?</h2> | |
| <p class="text-xl mb-8 opacity-90"> | |
| Créez votre espace patient pour bénéficier de tous nos services. | |
| </p> | |
| <button class="bg-white text-blue-600 hover:bg-gray-100 font-medium py-3 px-8 rounded-full transition duration-300 transform hover:scale-105"> | |
| S'inscrire maintenant | |
| </button> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white py-12 px-6 md:px-12"> | |
| <div class="max-w-6xl mx-auto grid md:grid-cols-4 gap-12"> | |
| <!-- Logo & Description --> | |
| <div> | |
| <div class="flex items-center mb-4"> | |
| <i data-feather="heart" class="text-blue-400 mr-2"></i> | |
| <span class="text-xl font-bold text-white">Pharma<span class="text-green-400">Care</span></span> | |
| </div> | |
| <p class="text-gray-400 mb-6"> | |
| Votre partenaire santé intelligent pour une meilleure qualité de vie. | |
| </p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i data-feather="facebook"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i data-feather="twitter"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i data-feather="instagram"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i data-feather="linkedin"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Links 1 --> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Navigation</h4> | |
| <ul class="space-y-3"> | |
| <li><a href="index.html" class="text-gray-400 hover:text-white transition">Accueil</a></li> | |
| <li><a href="symptomes.html" class="text-gray-400 hover:text-white transition">Symptômes & Diagnostic</a></li> | |
| <li><a href="ordonnance.html" class="text-gray-400 hover:text-white transition">Déposer ordonnance</a></li> | |
| <li><a href="espace-patient.html" class="text-gray-400 hover:text-white transition">Espace patient</a></li> | |
| </ul> | |
| </div> | |
| <!-- Links 2 --> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Entreprise</h4> | |
| <ul class="space-y-3"> | |
| <li><a href="apropos.html" class="text-gray-400 hover:text-white transition">À propos</a></li> | |
| <li><a href="contact.html" class="text-gray-400 hover:text-white transition">Contact</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Carrières</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Blog</a></li> | |
| </ul> | |
| </div> | |
| <!-- Legal --> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Légal</h4> | |
| <ul class="space-y-3"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Mentions légales</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Politique de confidentialité</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Conditions d'utilisation</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Cookies</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="max-w-6xl mx-auto border-t border-gray-800 mt-12 pt-8 text-center text-gray-500 text-sm"> | |
| <p>© 2023 PharmaCare. Tous droits réservés.</p> | |
| </div> | |
| </footer> | |
| <script> | |
| AOS.init({ | |
| duration: 800, | |
| easing: 'ease-in-out', | |
| once: true | |
| }); | |
| feather.replace(); | |
| // Upload area interaction | |
| const uploadArea = document.getElementById('uploadArea'); | |
| const fileInput = document.getElementById('fileInput'); | |
| uploadArea.addEventListener('click', () => fileInput.click()); | |
| ['dragenter', 'dragover'].forEach(eventName => { | |
| uploadArea.addEventListener(eventName, (e) => { | |
| e.preventDefault(); | |
| uploadArea.classList.add('dragover'); | |
| }); | |
| }); | |
| ['dragleave', 'drop'].forEach(eventName => { | |
| uploadArea.addEventListener(eventName, (e) => { | |
| e.preventDefault(); | |
| uploadArea.classList.remove('dragover'); | |
| }); | |
| }); | |
| fileInput.addEventListener('change', (e) => { | |
| if (fileInput.files.length) { | |
| const fileName = fileInput.files[0].name; | |
| uploadArea.innerHTML = ` | |
| <div class="mx-auto w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mb-6"> | |
| <i data-feather="check" class="text-green-600 w-8 h-8"></i> | |
| </div> | |
| <h3 class="text-lg font-medium text-gray-700 mb-2">${fileName}</h3> | |
| <p class="text-sm text-gray-500">Fichier prêt à être téléversé</p> | |
| `; | |
| feather.replace(); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> | |