| <!DOCTYPE html> |
| <html lang="fr"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>SécurityMed | Expertise en Cybersécurité Médicale</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800&family=Open+Sans:wght@400;500;600&display=swap" rel="stylesheet"> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <script type="application/ld+json"> |
| { |
| "@context": "https://schema.org", |
| "@type": "MedicalOrganization", |
| "name": "SécurityMed", |
| "url": "https://www.securitymed.fr", |
| "logo": "https://securitymed.fr/logo.png", |
| "description": "Expert en cybersécurité pour infrastructures d'imagerie médicale, protection des flux DICOM et conformité LI 27001", |
| "medicalSpecialty": "Cyberprotection médicale", |
| "areaServed": "France" |
| } |
| </script> |
| <script> |
| tailwind.config = { |
| theme: { |
| extend: { |
| colors: { |
| 'medical-blue': '#0d3b66', |
| 'security-green': '#38b000', |
| 'light-blue': '#f0f7ff', |
| }, |
| fontFamily: { |
| 'heading': ['Montserrat', 'sans-serif'], |
| 'body': ['Open Sans', 'sans-serif'] |
| } |
| } |
| } |
| } |
| </script> |
| <style> |
| body { |
| font-family: 'body', sans-serif; |
| } |
| |
| h1, h2, h3, h4 { |
| font-family: 'heading', sans-serif; |
| } |
| |
| .navbar-fixed { |
| @apply fixed z-50 bg-white bg-opacity-90 backdrop-blur; |
| box-shadow: 0 2px 20px rgba(13, 59, 102, 0.1); |
| } |
| |
| .process-step { |
| position: relative; |
| min-height: 120px; |
| padding-top: 60px; |
| padding-left: 25px; |
| } |
| |
| .process-step:before { |
| content: ''; |
| @apply absolute top-0 left-0 w-16 h-16 rounded-full flex items-center justify-center bg-security-green text-white font-bold; |
| font-family: 'heading'; |
| font-size: 1.5rem; |
| line-height: 1.5; |
| } |
| |
| .process-step:nth-child(1):before { content: '1'; } |
| .process-step:nth-child(2):before { content: '2'; } |
| .process-step:nth-child(3):before { content: '3'; } |
| .process-step:nth-child(4):before { content: '4'; } |
| |
| @keyframes pulse { |
| 0% { transform: scale(1); } |
| 50% { transform: scale(1.05); } |
| 100% { transform: scale(1); } |
| } |
| |
| .security-icon { |
| @apply w-16 h-16 flex items-center justify-center rounded-full mb-4; |
| background-color: rgba(56, 176, 0, 0.1); |
| } |
| |
| .hero-pattern { |
| background: |
| radial-gradient(circle at 10% 50%, rgba(13, 59, 102, 0.05) 0%, transparent 20%), |
| radial-gradient(circle at 90% 30%, rgba(56, 176, 0, 0.05) 0%, transparent 15%); |
| } |
| </style> |
| </head> |
| <body> |
| |
| <header class="w-full py-4 transition-all duration-300" id="navbar"> |
| <div class="container mx-auto px-4 flex justify-between items-center"> |
| |
| <div class="flex items-center"> |
| <div class="w-10 h-10 bg-medical-blue rounded-full mr-3 flex items-center justify-center"> |
| <i class="fas fa-shield-alt text-white text-xl"></i> |
| </div> |
| <span class="text-medical-blue text-xl font-bold">Sécurity<span class="text-security-green">Med</span></span> |
| </div> |
| |
| |
| <nav class="hidden md:flex items-center space-x-10"> |
| <a href="#solutions" class="text-medical-blue font-medium hover:text-security-green transition">Solutions</a> |
| <a href="#expertise" class="text-medical-blue font-medium hover:text-security-green transition">Expertise</a> |
| <a href="#norms" class="text-medical-blue font-medium hover:text-security-green transition">Normes</a> |
| <a href="#contact" class="text-medical-blue font-medium hover:text-security-green transition">Contact</a> |
| </nav> |
| |
| |
| <button class="hidden md:block bg-security-green hover:bg-medical-blue text-white font-bold py-2 px-6 rounded-full transition-all duration-300 transform hover:-translate-y-1"> |
| Audit de sécurité gratuit |
| </button> |
| |
| |
| <button id="mobileMenuBtn" class="md:hidden text-medical-blue"> |
| <i class="fas fa-bars text-2xl"></i> |
| </button> |
| </div> |
| |
| |
| <div id="mobileMenu" class="hidden bg-white py-4 px-4 absolute w-full left-0 top-20 z-50 shadow-lg"> |
| <nav class="flex flex-col space-y-4"> |
| <a href="#solutions" class="text-medical-blue font-medium hover:text-security-green transition">Solutions</a> |
| <a href="#expertise" class="text-medical-blue font-medium hover:text-security-green transition">Expertise</a> |
| <a href="#norms" class="text-medical-blue font-medium hover:text-security-green transition">Normes</a> |
| <a href="#contact" class="text-medical-blue font-medium hover:text-security-green transition">Contact</a> |
| <button class="bg-security-green hover:bg-medical-blue text-white font-bold py-3 px-4 rounded-full transition w-full"> |
| Audit de sécurité gratuit |
| </button> |
| </nav> |
| </div> |
| </header> |
|
|
| |
| <section class="hero-pattern bg-light-blue py-16 md:py-24 relative overflow-hidden"> |
| <div class="container mx-auto px-4 flex flex-col md:flex-row items-center"> |
| <div class="md:w-1/2 mb-12 md:mb-0"> |
| <h1 class="text-3xl md:text-5xl font-bold text-medical-blue leading-tight mb-6"> |
| <span class="relative z-10">Sécurisez vos images médicales contre les cybermenaces</span> |
| </h1> |
| <p class="text-lg md:text-xl text-gray-700 mb-8 leading-relaxed"> |
| Solutions conformes LI 27001 pour flux DICOM et réseaux hospitaliers - Protégez vos données patients et votre infrastructure médicale. |
| </p> |
| <div class="flex flex-wrap gap-4"> |
| <button class="bg-security-green hover:bg-medical-blue text-white font-bold py-3 px-8 rounded-full shadow-lg transition-all duration-300 transform hover:-translate-y-1 flex items-center"> |
| Diagnostic gratuit |
| <i class="fas fa-arrow-right ml-3"></i> |
| </button> |
| <button class="bg-medical-blue hover:bg-blue-900 text-white font-bold py-3 px-8 rounded-full shadow-lg transition-all duration-300"> |
| Nos certifications |
| </button> |
| </div> |
| </div> |
| |
| <div class="md:w-1/2 flex justify-center relative"> |
| <div class="relative w-full max-w-xl"> |
| <div class="relative p-8 rounded-3xl overflow-hidden" style="background: linear-gradient(145deg, #0d3b66, #092848);"> |
| <div class="flex justify-center mb-6"> |
| <div class="security-icon"> |
| <i class="fas fa-shield-alt text-security-green text-3xl"></i> |
| </div> |
| <div class="security-icon ml-6"> |
| <i class="fas fa-heartbeat text-security-green text-3xl"></i> |
| </div> |
| </div> |
| |
| <div class="mb-6 text-center"> |
| <h3 class="text-xl font-bold text-white mb-2">Protection réseau DICOM</h3> |
| <div class="flex justify-center mb-4"> |
| <div class="bg-yellow-500 text-xs px-2 py-1 rounded-full mr-2">Port 104</div> |
| <div class="bg-green-500 text-xs px-2 py-1 rounded-full">SSL/TLS</div> |
| </div> |
| <div class="bg-blue-900 rounded-lg p-4 border border-blue-700 mb-2"> |
| <div class="flex items-center"> |
| <div class="w-3 h-3 rounded-full bg-green-500 mr-2"></div> |
| <span class="text-sm text-blue-200">CT Scanner HL7 → DICOM Secured</span> |
| </div> |
| </div> |
| <div class="bg-blue-900 rounded-lg p-4 border border-blue-700 mb-2"> |
| <div class="flex items-center"> |
| <div class="w-3 h-3 rounded-full bg-green-500 mr-2"></div> |
| <span class="text-sm text-blue-200">Serveur PACS ↔ Station radiologique</span> |
| </div> |
| </div> |
| </div> |
| |
| <div class="text-center"> |
| <div class="inline-flex items-center text-white bg-medical-blue rounded-full px-4 py-2"> |
| <i class="fas fa-certificate text-security-green mr-2"></i> |
| <span>LI 27001 Certified</span> |
| </div> |
| </div> |
| </div> |
| <div class="absolute -bottom-6 -right-6 w-32 h-32 bg-security-green rounded-full opacity-20"></div> |
| <div class="absolute -top-6 -left-6 w-24 h-24 bg-medical-blue rounded-full opacity-10"></div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="expertise" class="py-16 md:py-24 bg-white"> |
| <div class="container mx-auto px-4"> |
| <div class="text-center max-w-3xl mx-auto mb-16"> |
| <h2 class="text-3xl md:text-4xl font-bold text-medical-blue mb-6">Notre expertise unique</h2> |
| <p class="text-gray-600 text-lg">Spécialisés dans la sécurisation des infrastructures médicales et des flux DICOM</p> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-12"> |
| |
| <div class="bg-light-blue p-8 rounded-2xl shadow-sm hover:shadow-md transition-shadow duration-300"> |
| <div class="flex flex-col items-center text-center"> |
| <div class="security-icon"> |
| <i class="fas fa-shield-alt text-security-green text-3xl"></i> |
| </div> |
| <h3 class="text-xl font-bold text-medical-blue my-4">Protection DICOM</h3> |
| <p class="text-gray-600"> |
| Chiffrement des flux d'images, contrôle d'accès HL7 sécurisé, authentification multifacteur pour vos systèmes PACs/RIS. |
| </p> |
| <div class="mt-6 inline-block bg-medical-blue text-white px-4 py-2 rounded-full text-sm font-medium"> |
| En savoir plus |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-light-blue p-8 rounded-2xl shadow-sm hover:shadow-md transition-shadow duration-300"> |
| <div class="flex flex-col items-center text-center"> |
| <div class="security-icon"> |
| <i class="fas fa-network-wired text-security-green text-3xl"></i> |
| </div> |
| <h3 class="text-xl font-bold text-medical-blue my-4">Analyse réseau médical</h3> |
| <p class="text-gray-600"> |
| Surveillance Wireshark spécialisée équipements médicaux, détection des anomalies dans les flux DICOM, cartographie sécurisée. |
| </p> |
| <div class="mt-6 inline-block bg-medical-blue text-white px-4 py-2 rounded-full text-sm font-medium"> |
| En savoir plus |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-light-blue p-8 rounded-2xl shadow-sm hover:shadow-md transition-shadow duration-300"> |
| <div class="flex flex-col items-center text-center"> |
| <div class="security-icon"> |
| <i class="fas fa-certificate text-security-green text-3xl"></i> |
| </div> |
| <h3 class="text-xl font-bold text-medical-blue my-4">Conformité normative</h3> |
| <p class="text-gray-600"> |
| Certification LI 27001 & adaptation RGPD santé, préparation aux audits ANSSI, solutions HDS pour la santé. |
| </p> |
| <div class="mt-6 inline-block bg-medical-blue text-white px-4 py-2 rounded-full text-sm font-medium"> |
| En savoir plus |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="norms" class="py-16 md:py-24 bg-medical-blue text-white"> |
| <div class="container mx-auto px-4"> |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center"> |
| |
| <div> |
| <h2 class="text-3xl md:text-4xl font-bold mb-8">Conformité aux normes de sécurité médicale</h2> |
| <p class="text-lg text-blue-100 mb-10"> |
| Nous garantissons le respect des réglementations les plus strictes pour la protection de vos données de santé. |
| </p> |
| |
| <div class="grid grid-cols-2 gap-4"> |
| <div class="bg-blue-900 bg-opacity-50 rounded-2xl p-6 flex flex-col items-center text-center"> |
| <div class="w-16 h-16 rounded-lg bg-white flex items-center justify-center mb-4"> |
| <span class="text-medical-blue font-bold">LI 27001</span> |
| </div> |
| <h3 class="font-bold">Label Informatique</h3> |
| <p class="text-blue-100 text-sm mt-2">Cybersécurité des SI de santé</p> |
| </div> |
| |
| <div class="bg-blue-900 bg-opacity-50 rounded-2xl p-6 flex flex-col items-center text-center"> |
| <div class="w-16 h-16 rounded-lg bg-white flex items-center justify-center mb-4"> |
| <span class="text-medical-blue font-bold">DICOM</span> |
| </div> |
| <h3 class="font-bold">DICOM Secured</h3> |
| <p class="text-blue-100 text-sm mt-2">Sécurité des flux d'imagerie</p> |
| </div> |
| |
| <div class="bg-blue-900 bg-opacity-50 rounded-2xl p-6 flex flex-col items-center text-center"> |
| <div class="w-16 h-16 rounded-lg bg-white flex items-center justify-center mb-4"> |
| <span class="text-medical-blue font-bold">HIPAA</span> |
| </div> |
| <h3 class="font-bold">Health Insurance</h3> |
| <p class="text-blue-100 text-sm mt-2">Protection données patients</p> |
| </div> |
| |
| <div class="bg-blue-900 bg-opacity-50 rounded-2xl p-6 flex flex-col items-center text-center"> |
| <div class="w-16 h-16 rounded-lg bg-white flex items-center justify-center mb-4"> |
| <span class="text-medical-blue font-bold">HDS</span> |
| </div> |
| <h3 class="font-bold">Hébergeur de Santé</h3> |
| <p class="text-blue-100 text-sm mt-2">Certification de conformité</p> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div> |
| <h3 class="text-2xl font-bold mb-8">Notre processus d'accompagnement</h3> |
| <div class="space-y-8"> |
| <div class="process-step"> |
| <h4 class="font-bold text-lg mb-2">Audit sécurité approfondi</h4> |
| <p class="text-blue-100">Analyse complète de votre infrastructure et des flux DICOM</p> |
| </div> |
| |
| <div class="process-step"> |
| <h4 class="font-bold text-lg mb-2">Hardening des systèmes</h4> |
| <p class="text-blue-100">Renforcement de la sécurité serveurs et équipements</p> |
| </div> |
| |
| <div class="process-step"> |
| <h4 class="font-bold text-lg mb-2">Formation spécifique</h4> |
| <p class="text-blue-100">Personnalisée pour vos équipes médicales et techniques</p> |
| </div> |
| |
| <div class="process-step"> |
| <h4 class="font-bold text-lg mb-2">Surveillance continue</h4> |
| <p class="text-blue-100">Monitoring et réponse aux incidents 24/7</p> |
| </div> |
| </div> |
| |
| <div class="mt-10"> |
| <button class="bg-security-green hover:bg-green-600 text-white font-bold py-4 px-8 rounded-full shadow-lg flex items-center"> |
| Télécharger notre livre blanc |
| <i class="fas fa-download ml-3"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-16 md:py-24 bg-white"> |
| <div class="container mx-auto px-4"> |
| <div class="text-center max-w-3xl mx-auto mb-16"> |
| <h2 class="text-3xl md:text-4xl font-bold text-medical-blue mb-6">Ils nous font confiance</h2> |
| <p class="text-gray-600 text-lg">Hôpitaux, cliniques et fabricants nous font confiance pour sécuriser leur infrastructure médicale</p> |
| </div> |
| |
| |
| <div class="max-w-3xl mx-auto bg-light-blue rounded-2xl p-8 md:p-12 mb-16 relative"> |
| <div class="absolute top-0 left-0 text-medical-blue opacity-10" style="font-size: 120px; transform: translate(-20%, -40%)"> |
| <i class="fas fa-quote-left"></i> |
| </div> |
| <div class="relative z-10"> |
| <div class="flex items-center mb-6"> |
| <div class="w-16 h-16 rounded-full overflow-hidden mr-4"> |
| <div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16" /> |
| </div> |
| <div> |
| <h4 class="font-bold text-lg text-medical-blue">Dr. Martin Dubois</h4> |
| <p class="text-blue-700">Responsable SI, CHU de Bordeaux</p> |
| </div> |
| </div> |
| <p class="text-lg italic text-gray-700"> |
| "Grâce à SécurityMed, notre système PACS a obtenu la certification LI 27001 en seulement 3 mois. Leur expertise spécifique aux réseaux d'imagerie médicale a été déterminante pour répondre aux exigences les plus strictes tout en maintenant notre continuité de service." |
| </p> |
| <div class="flex mt-6"> |
| <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> |
| </div> |
| |
| |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-8 items-center justify-center"> |
| <div class="bg-gray-100 h-16 flex items-center justify-center rounded-lg p-4"> |
| <span class="text-medical-blue font-bold text-lg">CHU Paris</span> |
| </div> |
| <div class="bg-gray-100 h-16 flex items-center justify-center rounded-lg p-4"> |
| <span class="text-medical-blue font-bold text-lg">Clinique Lyon</span> |
| </div> |
| <div class="bg-gray-100 h-16 flex items-center justify-center rounded-lg p-4"> |
| <span class="text-medical-blue font-bold text-lg">Imagerie Sud</span> |
| </div> |
| <div class="bg-gray-100 h-16 flex items-center justify-center rounded-lg p-4"> |
| <span class="text-medical-blue font-bold text-lg">ScanMed</span> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="contact" class="py-16 md:py-24 bg-light-blue"> |
| <div class="container mx-auto px-4"> |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center"> |
| <div> |
| <h2 class="text-3xl md:text-4xl font-bold text-medical-blue mb-6">Contactez nos experts</h2> |
| <p class="text-gray-700 mb-8"> |
| Nos spécialistes en sécurité des réseaux médicaux sont à votre disposition pour évaluer vos besoins et protéger votre infrastructure. |
| </p> |
| <div class="bg-white p-6 rounded-xl shadow-sm mb-8"> |
| <div class="flex items-start mb-4"> |
| <div class="text-security-green text-xl mr-4"> |
| <i class="fas fa-history"></i> |
| </div> |
| <div> |
| <h4 class="font-bold text-medical-blue">Spécialistes depuis 2015</h4> |
| <p class="text-gray-600">Plus de 8 ans d'expertise dédiée à la cybersécurité médicale</p> |
| </div> |
| </div> |
| </div> |
| <div class="space-y-6"> |
| <div class="flex items-center"> |
| <div class="w-12 h-12 bg-medical-blue rounded-full flex items-center justify-center text-white mr-4"> |
| <i class="fas fa-hands-helping"></i> |
| </div> |
| <div> |
| <h4 class="font-bold text-medical-blue">Rappel sous 24h</h4> |
| <p class="text-gray-600">Nous vous contactons rapidement après votre demande</p> |
| </div> |
| </div> |
| <div class="flex items-center"> |
| <div class="w-12 h-12 bg-medical-blue rounded-full flex items-center justify-center text-white mr-4"> |
| <i class="fas fa-user-md"></i> |
| </div> |
| <div> |
| <h4 class="font-bold text-medical-blue">Approche sectorielle</h4> |
| <p class="text-gray-600">Des solutions adaptées à vos contraintes médicales</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-xl shadow-lg p-8"> |
| <form id="contactForm"> |
| <div class="mb-6"> |
| <label for="name" class="block text-medical-blue font-medium mb-2">Nom</label> |
| <input type="text" id="name" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-security-green focus:border-transparent" required> |
| </div> |
| |
| <div class="mb-6"> |
| <label for="email" class="block text-medical-blue font-medium mb-2">Email</label> |
| <input type="email" id="email" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-security-green focus:border-transparent" required> |
| </div> |
| |
| <div class="mb-6"> |
| <label for="message" class="block text-medical-blue font-medium mb-2">Votre message</label> |
| <textarea id="message" rows="4" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-security-green focus:border-transparent" required></textarea> |
| </div> |
| |
| <button type="submit" class="w-full bg-security-green hover:bg-medical-blue text-white font-bold py-4 px-6 rounded-full shadow-md transition-all duration-300 transform hover:-translate-y-1"> |
| Sécuriser mon infrastructure |
| </button> |
| </form> |
| <div id="formSuccess" class="hidden mt-4 p-4 bg-green-100 text-green-700 rounded-lg"> |
| <i class="fas fa-check-circle mr-2"></i> |
| Votre message a été envoyé ! Nous vous contacterons dans les plus brefs délais. |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <footer class="bg-medical-blue text-white py-12"> |
| <div class="container mx-auto px-4"> |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> |
| <div> |
| <h3 class="text-xl font-bold mb-4 flex items-center"> |
| <i class="fas fa-shield-alt mr-3"></i> |
| Sécurity<span class="text-security-green">Med</span> |
| </h3> |
| <p class="text-blue-100 mb-4"> |
| Experts en cybersécurité dédiée au secteur médical et à l'imagerie DICOM. |
| </p> |
| <div class="flex space-x-4"> |
| <a href="#" class="text-white hover:text-security-green transition"><i class="fab fa-linkedin-in"></i></a> |
| <a href="#" class="text-white hover:text-security-green transition"><i class="fab fa-twitter"></i></a> |
| <a href="#" class="text-white hover:text-security-green transition"><i class="fab fa-github"></i></a> |
| </div> |
| </div> |
| |
| <div> |
| <h4 class="font-bold mb-4">Liens utiles</h4> |
| <ul class="space-y-2"> |
| <li><a href="#" class="text-blue-100 hover:text-white transition">Blog technique</a></li> |
| <li><a href="#" class="text-blue-100 hover:text-white transition">FAQ Sécurité DICOM</a></li> |
| <li><a href="#" class="text-blue-100 hover:text-white transition">RGPD Santé</a></li> |
| <li><a href="#" class="text-blue-100 hover:text-white transition">Mentions légales</a></li> |
| </ul> |
| </div> |
| |
| <div> |
| <h4 class="font-bold mb-4">Certifications</h4> |
| <ul class="space-y-2"> |
| <li class="flex items-center"> |
| <i class="fas fa-check-circle text-security-green mr-2"></i> |
| <span>LI 27001</span> |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-check-circle text-security-green mr-2"></i> |
| <span>Hébergeur de Données de Santé</span> |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-check-circle text-security-green mr-2"></i> |
| <span>DICOM Secured</span> |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-check-circle text-security-green mr-2"></i> |
| <span>Reconnu par l'ANSSI</span> |
| </li> |
| </ul> |
| </div> |
| |
| <div> |
| <h4 class="font-bold mb-4">Contact</h4> |
| <ul class="space-y-2"> |
| <li class="flex items-start"> |
| <i class="fas fa-map-marker-alt mt-1 mr-3 text-blue-100"></i> |
| <span class="text-blue-100">12 Rue des PACS, 75000 Paris</span> |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-phone-alt mr-3 text-blue-100"></i> |
| <span class="text-blue-100">+33 1 23 45 67 89</span> |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-envelope mr-3 text-blue-100"></i> |
| <span class="text-blue-100">contact@securitymed.fr</span> |
| </li> |
| </ul> |
| </div> |
| </div> |
| |
| <div class="border-t border-blue-800 mt-12 pt-8 text-center text-blue-100"> |
| <p>© 2023 SécurityMed - Tous droits réservés. Experts en sécurité DICOM et LI 27001.</p> |
| </div> |
| </div> |
| </footer> |
| |
| |
| <div class="fixed bottom-6 right-6 z-50"> |
| <button class="bg-security-green hover:bg-medical-blue text-white p-4 rounded-full shadow-lg animate-pulse"> |
| <i class="fas fa-comment-medical text-xl"></i> |
| </button> |
| </div> |
|
|
| <script> |
| |
| const mobileMenuBtn = document.getElementById('mobileMenuBtn'); |
| const mobileMenu = document.getElementById('mobileMenu'); |
| |
| mobileMenuBtn.addEventListener('click', () => { |
| mobileMenu.classList.toggle('hidden'); |
| }); |
| |
| |
| const navbar = document.getElementById('navbar'); |
| window.addEventListener('scroll', () => { |
| if (window.scrollY > 100) { |
| navbar.classList.add('navbar-fixed'); |
| } else { |
| navbar.classList.remove('navbar-fixed'); |
| } |
| }); |
| |
| |
| const contactForm = document.getElementById('contactForm'); |
| const formSuccess = document.getElementById('formSuccess'); |
| |
| contactForm.addEventListener('submit', (e) => { |
| e.preventDefault(); |
| formSuccess.classList.remove('hidden'); |
| formSuccess.classList.add('block'); |
| contactForm.reset(); |
| setTimeout(() => { |
| formSuccess.classList.add('hidden'); |
| formSuccess.classList.remove('block'); |
| }, 5000); |
| }); |
| |
| |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
| anchor.addEventListener('click', function(e) { |
| e.preventDefault(); |
| |
| |
| mobileMenu.classList.add('hidden'); |
| |
| const target = document.querySelector(this.getAttribute('href')); |
| if (target) { |
| window.scrollTo({ |
| top: target.offsetTop - 100, |
| behavior: 'smooth' |
| }); |
| } |
| }); |
| }); |
| </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=Maheri/secmed" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
