Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>MediCare Hospital - Advanced Healthcare Solutions</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| /* Custom CSS */ | |
| .hero-bg { | |
| background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://images.unsplash.com/photo-1579684385127-1ef15d508118?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80'); | |
| background-size: cover; | |
| background-position: center; | |
| } | |
| .department-card:hover { | |
| transform: translateY(-10px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .doctor-card:hover img { | |
| transform: scale(1.05); | |
| } | |
| .emergency-banner { | |
| background: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%); | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { box-shadow: 0 0 0 0 rgba(225, 29, 72, 0.7); } | |
| 70% { box-shadow: 0 0 0 10px rgba(225, 29, 72, 0); } | |
| 100% { box-shadow: 0 0 0 0 rgba(225, 29, 72, 0); } | |
| } | |
| .testimonial-card { | |
| background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%); | |
| box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.1); | |
| } | |
| .appointment-form { | |
| background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%); | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans"> | |
| <!-- Top Bar --> | |
| <div class="bg-blue-900 text-white py-2 px-4"> | |
| <div class="container mx-auto flex justify-between items-center"> | |
| <div class="flex space-x-4"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-phone-alt mr-2"></i> | |
| <span>Emergency: (123) 456-7890</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-envelope mr-2"></i> | |
| <span>info@medicarehospital.com</span> | |
| </div> | |
| </div> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="hover:text-blue-200"><i class="fab fa-facebook-f"></i></a> | |
| <a href="#" class="hover:text-blue-200"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="hover:text-blue-200"><i class="fab fa-instagram"></i></a> | |
| <a href="#" class="hover:text-blue-200"><i class="fab fa-linkedin-in"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-md sticky top-0 z-50"> | |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <div class="bg-blue-600 text-white p-2 rounded-full mr-3"> | |
| <i class="fas fa-heartbeat text-2xl"></i> | |
| </div> | |
| <a href="#" class="text-2xl font-bold text-blue-900">Medi<span class="text-blue-600">Care</span></a> | |
| </div> | |
| <div class="hidden md:flex space-x-8"> | |
| <a href="#" class="text-blue-900 font-medium hover:text-blue-600">Home</a> | |
| <a href="#" class="text-gray-700 font-medium hover:text-blue-600">About Us</a> | |
| <a href="#" class="text-gray-700 font-medium hover:text-blue-600">Departments</a> | |
| <a href="#" class="text-gray-700 font-medium hover:text-blue-600">Doctors</a> | |
| <a href="#" class="text-gray-700 font-medium hover:text-blue-600">Services</a> | |
| <a href="#" class="text-gray-700 font-medium hover:text-blue-600">Contact</a> | |
| </div> | |
| <div class="hidden md:block"> | |
| <a href="#" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-full font-medium transition duration-300">Appointment</a> | |
| </div> | |
| <button id="mobile-menu-button" class="md:hidden text-gray-700 focus:outline-none"> | |
| <i class="fas fa-bars text-2xl"></i> | |
| </button> | |
| </div> | |
| <!-- Mobile Menu --> | |
| <div id="mobile-menu" class="hidden md:hidden bg-white absolute w-full left-0 px-4 pb-4 shadow-lg"> | |
| <a href="#" class="block py-2 text-blue-900 font-medium">Home</a> | |
| <a href="#" class="block py-2 text-gray-700 hover:text-blue-600">About Us</a> | |
| <a href="#" class="block py-2 text-gray-700 hover:text-blue-600">Departments</a> | |
| <a href="#" class="block py-2 text-gray-700 hover:text-blue-600">Doctors</a> | |
| <a href="#" class="block py-2 text-gray-700 hover:text-blue-600">Services</a> | |
| <a href="#" class="block py-2 text-gray-700 hover:text-blue-600">Contact</a> | |
| <a href="#" class="block mt-2 bg-blue-600 text-white px-4 py-2 rounded-full font-medium text-center">Appointment</a> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="hero-bg text-white py-24 md:py-32"> | |
| <div class="container mx-auto px-4"> | |
| <div class="max-w-2xl"> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-4">Advanced Healthcare With Compassion</h1> | |
| <p class="text-xl mb-8">MediCare Hospital provides world-class medical treatment with state-of-the-art technology and a team of expert doctors.</p> | |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <a href="#" class="bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-full font-medium text-center transition duration-300">Our Services</a> | |
| <a href="#" class="bg-white hover:bg-gray-100 text-blue-900 px-8 py-3 rounded-full font-medium text-center transition duration-300">Book Appointment</a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Emergency Banner --> | |
| <div class="emergency-banner text-white py-4"> | |
| <div class="container mx-auto px-4 flex flex-col md:flex-row justify-between items-center"> | |
| <div class="flex items-center mb-4 md:mb-0"> | |
| <i class="fas fa-ambulance text-3xl mr-4"></i> | |
| <div> | |
| <h3 class="font-bold text-xl">Emergency Medical Care 24/7</h3> | |
| <p>Immediate assistance for critical conditions</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-phone-alt text-2xl mr-4"></i> | |
| <div> | |
| <p class="text-sm">Call Emergency</p> | |
| <h3 class="font-bold text-xl">(123) 456-7890</h3> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Features Section --> | |
| <section class="py-16 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold text-blue-900 mb-4">Why Choose MediCare Hospital</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto">We provide the highest quality healthcare with cutting-edge technology and compassionate care.</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="bg-white p-8 rounded-xl shadow-md hover:shadow-lg transition duration-300 text-center"> | |
| <div class="bg-blue-100 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-4"> | |
| <i class="fas fa-user-md text-blue-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3 text-blue-900">Expert Doctors</h3> | |
| <p class="text-gray-600">Our team consists of highly qualified specialists with years of experience in their respective fields.</p> | |
| </div> | |
| <div class="bg-white p-8 rounded-xl shadow-md hover:shadow-lg transition duration-300 text-center"> | |
| <div class="bg-blue-100 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-4"> | |
| <i class="fas fa-procedures text-blue-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3 text-blue-900">Modern Equipment</h3> | |
| <p class="text-gray-600">We use the latest medical technology to ensure accurate diagnosis and effective treatment.</p> | |
| </div> | |
| <div class="bg-white p-8 rounded-xl shadow-md hover:shadow-lg transition duration-300 text-center"> | |
| <div class="bg-blue-100 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-4"> | |
| <i class="fas fa-heart text-blue-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3 text-blue-900">Patient Care</h3> | |
| <p class="text-gray-600">Your health and comfort are our top priorities with personalized care plans for every patient.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Departments Section --> | |
| <section class="py-16"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold text-blue-900 mb-4">Our Medical Departments</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto">Comprehensive healthcare services across various medical specialties.</p> | |
| </div> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Department Card 1 --> | |
| <div class="department-card bg-white rounded-xl overflow-hidden shadow-md transition duration-300"> | |
| <div class="h-48 bg-blue-100 flex items-center justify-center"> | |
| <i class="fas fa-heartbeat text-blue-600 text-5xl"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2 text-blue-900">Cardiology</h3> | |
| <p class="text-gray-600 mb-4">Comprehensive heart care with advanced diagnostic and treatment options.</p> | |
| <a href="#" class="text-blue-600 font-medium flex items-center"> | |
| Read More <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Department Card 2 --> | |
| <div class="department-card bg-white rounded-xl overflow-hidden shadow-md transition duration-300"> | |
| <div class="h-48 bg-green-100 flex items-center justify-center"> | |
| <i class="fas fa-brain text-green-600 text-5xl"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2 text-blue-900">Neurology</h3> | |
| <p class="text-gray-600 mb-4">Expert care for disorders of the nervous system and brain conditions.</p> | |
| <a href="#" class="text-blue-600 font-medium flex items-center"> | |
| Read More <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Department Card 3 --> | |
| <div class="department-card bg-white rounded-xl overflow-hidden shadow-md transition duration-300"> | |
| <div class="h-48 bg-purple-100 flex items-center justify-center"> | |
| <i class="fas fa-bone text-purple-600 text-5xl"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2 text-blue-900">Orthopedics</h3> | |
| <p class="text-gray-600 mb-4">Specialized care for musculoskeletal system, joints, and sports injuries.</p> | |
| <a href="#" class="text-blue-600 font-medium flex items-center"> | |
| Read More <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Department Card 4 --> | |
| <div class="department-card bg-white rounded-xl overflow-hidden shadow-md transition duration-300"> | |
| <div class="h-48 bg-yellow-100 flex items-center justify-center"> | |
| <i class="fas fa-baby text-yellow-600 text-5xl"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2 text-blue-900">Pediatrics</h3> | |
| <p class="text-gray-600 mb-4">Compassionate healthcare for infants, children, and adolescents.</p> | |
| <a href="#" class="text-blue-600 font-medium flex items-center"> | |
| Read More <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Department Card 5 --> | |
| <div class="department-card bg-white rounded-xl overflow-hidden shadow-md transition duration-300"> | |
| <div class="h-48 bg-red-100 flex items-center justify-center"> | |
| <i class="fas fa-eye text-red-600 text-5xl"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2 text-blue-900">Ophthalmology</h3> | |
| <p class="text-gray-600 mb-4">Expert eye care including vision correction and treatment of eye diseases.</p> | |
| <a href="#" class="text-blue-600 font-medium flex items-center"> | |
| Read More <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Department Card 6 --> | |
| <div class="department-card bg-white rounded-xl overflow-hidden shadow-md transition duration-300"> | |
| <div class="h-48 bg-pink-100 flex items-center justify-center"> | |
| <i class="fas fa-tooth text-pink-600 text-5xl"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2 text-blue-900">Dentistry</h3> | |
| <p class="text-gray-600 mb-4">Complete dental care including cosmetic, restorative and preventive treatments.</p> | |
| <a href="#" class="text-blue-600 font-medium flex items-center"> | |
| Read More <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-10"> | |
| <a href="#" class="inline-block bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-full font-medium transition duration-300">View All Departments</a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Doctors Section --> | |
| <section class="py-16 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold text-blue-900 mb-4">Our Expert Doctors</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto">Meet our team of highly qualified and experienced medical professionals.</p> | |
| </div> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8"> | |
| <!-- Doctor Card 1 --> | |
| <div class="doctor-card bg-white rounded-xl overflow-hidden shadow-md transition duration-300"> | |
| <div class="h-64 overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1559839734-2b71ea197ec2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Dr. Sarah Johnson" class="w-full h-full object-cover transition duration-500"> | |
| </div> | |
| <div class="p-6 text-center"> | |
| <h3 class="text-xl font-bold mb-1 text-blue-900">Dr. Sarah Johnson</h3> | |
| <p class="text-blue-600 font-medium mb-3">Cardiologist</p> | |
| <p class="text-gray-600 mb-4">Specializes in heart disease prevention and treatment with 15 years of experience.</p> | |
| <div class="flex justify-center space-x-3"> | |
| <a href="#" class="text-blue-600 hover:text-blue-800"><i class="fab fa-facebook-f"></i></a> | |
| <a href="#" class="text-blue-600 hover:text-blue-800"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="text-blue-600 hover:text-blue-800"><i class="fab fa-linkedin-in"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Doctor Card 2 --> | |
| <div class="doctor-card bg-white rounded-xl overflow-hidden shadow-md transition duration-300"> | |
| <div class="h-64 overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1622253692010-333f2da6031d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1964&q=80" alt="Dr. Michael Chen" class="w-full h-full object-cover transition duration-500"> | |
| </div> | |
| <div class="p-6 text-center"> | |
| <h3 class="text-xl font-bold mb-1 text-blue-900">Dr. Michael Chen</h3> | |
| <p class="text-blue-600 font-medium mb-3">Neurologist</p> | |
| <p class="text-gray-600 mb-4">Expert in treating complex neurological disorders with innovative approaches.</p> | |
| <div class="flex justify-center space-x-3"> | |
| <a href="#" class="text-blue-600 hover:text-blue-800"><i class="fab fa-facebook-f"></i></a> | |
| <a href="#" class="text-blue-600 hover:text-blue-800"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="text-blue-600 hover:text-blue-800"><i class="fab fa-linkedin-in"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Doctor Card 3 --> | |
| <div class="doctor-card bg-white rounded-xl overflow-hidden shadow-md transition duration-300"> | |
| <div class="h-64 overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1594824476967-48c8b9642736?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80" alt="Dr. Emily Rodriguez" class="w-full h-full object-cover transition duration-500"> | |
| </div> | |
| <div class="p-6 text-center"> | |
| <h3 class="text-xl font-bold mb-1 text-blue-900">Dr. Emily Rodriguez</h3> | |
| <p class="text-blue-600 font-medium mb-3">Pediatrician</p> | |
| <p class="text-gray-600 mb-4">Dedicated to providing compassionate care for children of all ages.</p> | |
| <div class="flex justify-center space-x-3"> | |
| <a href="#" class="text-blue-600 hover:text-blue-800"><i class="fab fa-facebook-f"></i></a> | |
| <a href="#" class="text-blue-600 hover:text-blue-800"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="text-blue-600 hover:text-blue-800"><i class="fab fa-linkedin-in"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Doctor Card 4 --> | |
| <div class="doctor-card bg-white rounded-xl overflow-hidden shadow-md transition duration-300"> | |
| <div class="h-64 overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1651008376811-b90baee60c1f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80" alt="Dr. David Wilson" class="w-full h-full object-cover transition duration-500"> | |
| </div> | |
| <div class="p-6 text-center"> | |
| <h3 class="text-xl font-bold mb-1 text-blue-900">Dr. David Wilson</h3> | |
| <p class="text-blue-600 font-medium mb-3">Orthopedic Surgeon</p> | |
| <p class="text-gray-600 mb-4">Specializes in joint replacement and sports medicine surgeries.</p> | |
| <div class="flex justify-center space-x-3"> | |
| <a href="#" class="text-blue-600 hover:text-blue-800"><i class="fab fa-facebook-f"></i></a> | |
| <a href="#" class="text-blue-600 hover:text-blue-800"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="text-blue-600 hover:text-blue-800"><i class="fab fa-linkedin-in"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-10"> | |
| <a href="#" class="inline-block bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-full font-medium transition duration-300">Meet All Doctors</a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Appointment Section --> | |
| <section class="py-16"> | |
| <div class="container mx-auto px-4"> | |
| <div class="appointment-form rounded-xl shadow-xl overflow-hidden"> | |
| <div class="grid grid-cols-1 lg:grid-cols-2"> | |
| <div class="p-8 lg:p-12 bg-blue-900 text-white"> | |
| <h2 class="text-3xl font-bold mb-4">Book an Appointment</h2> | |
| <p class="mb-6">Schedule your visit with our specialists. We'll contact you to confirm your appointment.</p> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-700 p-3 rounded-full mr-4"> | |
| <i class="fas fa-phone-alt"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Emergency Cases</h4> | |
| <p>(123) 456-7890</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-700 p-3 rounded-full mr-4"> | |
| <i class="fas fa-envelope"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Email Us</h4> | |
| <p>appointments@medicarehospital.com</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-700 p-3 rounded-full mr-4"> | |
| <i class="fas fa-map-marker-alt"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Hospital Location</h4> | |
| <p>123 Medical Drive, Health City, HC 12345</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-8 lg:p-12 bg-white"> | |
| <form id="appointmentForm" class="space-y-4"> | |
| <div> | |
| <label for="name" class="block text-gray-700 font-medium mb-2">Full Name</label> | |
| <input type="text" id="name" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Your Name" required> | |
| </div> | |
| <div> | |
| <label for="email" class="block text-gray-700 font-medium mb-2">Email Address</label> | |
| <input type="email" id="email" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Your Email" required> | |
| </div> | |
| <div> | |
| <label for="phone" class="block text-gray-700 font-medium mb-2">Phone Number</label> | |
| <input type="tel" id="phone" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Your Phone" required> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div> | |
| <label for="department" class="block text-gray-700 font-medium mb-2">Department</label> | |
| <select id="department" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" required> | |
| <option value="">Select Department</option> | |
| <option value="cardiology">Cardiology</option> | |
| <option value="neurology">Neurology</option> | |
| <option value="orthopedics">Orthopedics</option> | |
| <option value="pediatrics">Pediatrics</option> | |
| <option value="ophthalmology">Ophthalmology</option> | |
| <option value="dentistry">Dentistry</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="doctor" class="block text-gray-700 font-medium mb-2">Doctor</label> | |
| <select id="doctor" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" required> | |
| <option value="">Select Doctor</option> | |
| <option value="dr-johnson">Dr. Sarah Johnson</option> | |
| <option value="dr-chen">Dr. Michael Chen</option> | |
| <option value="dr-rodriguez">Dr. Emily Rodriguez</option> | |
| <option value="dr-wilson">Dr. David Wilson</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="date" class="block text-gray-700 font-medium mb-2">Appointment Date</label> | |
| <input type="date" id="date" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" required> | |
| </div> | |
| <div> | |
| <label for="message" class="block text-gray-700 font-medium mb-2">Message (Optional)</label> | |
| <textarea id="message" rows="3" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Your Message"></textarea> | |
| </div> | |
| <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-medium transition duration-300">Book Appointment</button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials Section --> | |
| <section class="py-16 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold text-blue-900 mb-4">What Our Patients Say</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto">Hear from our patients about their experiences at MediCare Hospital.</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Testimonial 1 --> | |
| <div class="testimonial-card p-8 rounded-xl"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full overflow-hidden mr-4"> | |
| <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80" alt="Sarah Johnson" class="w-full h-full object-cover"> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Sarah Johnson</h4> | |
| <div class="flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 italic">"The care I received at MediCare Hospital was exceptional. The cardiology team diagnosed my condition accurately and provided treatment that has completely changed my life. The facilities are modern and the staff is incredibly compassionate."</p> | |
| </div> | |
| <!-- Testimonial 2 --> | |
| <div class="testimonial-card p-8 rounded-xl"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full overflow-hidden mr-4"> | |
| <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80" alt="Michael Chen" class="w-full h-full object-cover"> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Michael Chen</h4> | |
| <div class="flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 italic">"After suffering from chronic migraines for years, the neurology department at MediCare finally found the root cause and provided effective treatment. The doctors took time to explain everything and made me feel comfortable throughout the process."</p> | |
| </div> | |
| <!-- Testimonial 3 --> | |
| <div class="testimonial-card p-8 rounded-xl"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full overflow-hidden mr-4"> | |
| <img src="https://images.unsplash.com/photo-1531123897727-8f129e1688ce?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80" alt="Emily Rodriguez" class="w-full h-full object-cover"> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Emily Rodriguez</h4> | |
| <div class="flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 italic">"The pediatric team was wonderful with my daughter. They made her feel safe and comfortable during her treatment. The facilities are child-friendly and the doctors have an amazing bedside manner. Highly recommend for families!"</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Stats Section --> | |
| <section class="py-16 bg-blue-900 text-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center"> | |
| <div class="p-4"> | |
| <div class="text-4xl font-bold mb-2">250+</div> | |
| <div class="text-blue-200 font-medium">Expert Doctors</div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="text-4xl font-bold mb-2">50+</div> | |
| <div class="text-blue-200 font-medium">Medical Departments</div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="text-4xl font-bold mb-2">10,000+</div> | |
| <div class="text-blue-200 font-medium">Happy Patients</div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="text-4xl font-bold mb-2">24/7</div> | |
| <div class="text-blue-200 font-medium">Emergency Services</div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Blog Section --> | |
| <section class="py-16"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold text-blue-900 mb-4">Latest Health Articles</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto">Stay informed with our medical insights and health tips from our experts.</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Blog Post 1 --> | |
| <div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition duration-300"> | |
| <div class="h-48 overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1505751172876-fa1923c5c528?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Heart Health" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="p-6"> | |
| <div class="text-blue-600 text-sm font-medium mb-2">Cardiology • June 15, 2023</div> | |
| <h3 class="text-xl font-bold mb-3 text-blue-900">10 Ways to Improve Your Heart Health</h3> | |
| <p class="text-gray-600 mb-4">Learn simple lifestyle changes that can significantly reduce your risk of heart disease and improve cardiovascular health.</p> | |
| <a href="#" class="text-blue-600 font-medium flex items-center"> | |
| Read More <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Blog Post 2 --> | |
| <div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition duration-300"> | |
| <div class="h-48 overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1571019613454-1cb2f5b44fcc?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Exercise Benefits" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="p-6"> | |
| <div class="text-blue-600 text-sm font-medium mb-2">Fitness • May 28, 2023</div> | |
| <h3 class="text-xl font-bold mb-3 text-blue-900">The Science Behind Regular Exercise Benefits</h3> | |
| <p class="text-gray-600 mb-4">Discover how consistent physical activity affects your body at the cellular level and why it's crucial for longevity.</p> | |
| <a href="#" class="text-blue-600 font-medium flex items-center"> | |
| Read More <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Blog Post 3 --> | |
| <div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition duration-300"> | |
| <div class="h-48 overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1498837167922-d504455e31c7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Nutrition Guide" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="p-6"> | |
| <div class="text-blue-600 text-sm font-medium mb-2">Nutrition • May 10, 2023</div> | |
| <h3 class="text-xl font-bold mb-3 text-blue-900">A Complete Guide to Balanced Nutrition</h3> | |
| <p class="text-gray-600 mb-4">Our dietitian breaks down the essential components of a healthy diet and how to maintain proper nutrition for optimal health.</p> | |
| <a href="#" class="text-blue-600 font-medium flex items-center"> | |
| Read More <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-10"> | |
| <a href="#" class="inline-block bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-full font-medium transition duration-300">View All Articles</a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Newsletter Section --> | |
| <section class="py-16 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="max-w-4xl mx-auto bg-white rounded-xl shadow-md overflow-hidden"> | |
| <div class="md:flex"> | |
| <div class="md:w-1/2 bg-blue-900 text-white p-8 md:p-12"> | |
| <h2 class="text-2xl font-bold mb-4">Subscribe to Our Newsletter</h2> | |
| <p>Stay updated with the latest health news, medical breakthroughs, and hospital updates delivered straight to your inbox.</p> | |
| </div> | |
| <div class="md:w-1/2 p-8 md:p-12"> | |
| <form id="newsletterForm" class="space-y-4"> | |
| <div> | |
| <input type="text" placeholder="Your Name" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" required> | |
| </div> | |
| <div> | |
| <input type="email" placeholder="Your Email" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" required> | |
| </div> | |
| <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-medium transition duration-300">Subscribe Now</button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section class="py-16"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold text-blue-900 mb-4">Contact Us</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto">We're here to help and answer any questions you might have.</p> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> | |
| <div class="bg-white p-8 rounded-xl shadow-md"> | |
| <div class="flex items-start mb-6"> | |
| <div class="bg-blue-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-map-marker-alt text-blue-600"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-bold mb-2 text-blue-900">Our Location</h3> | |
| <p class="text-gray-600">123 Medical Drive, Health City, HC 12345</p> | |
| </div> | |
| </div> | |
| <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3022.215373510288!2d-73.9878449241809!3d40.74844097138996!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c259a9b3117469%3A0xd134e199a405a163!2sEmpire%20State%20Building!5e0!3m2!1sen!2sus!4v1689872100629!5m2!1sen!2sus" class="w-full h-64 rounded-lg border-0" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe> | |
| </div> | |
| <div class="bg-white p-8 rounded-xl shadow-md"> | |
| <div class="flex items-start mb-6"> | |
| <div class="bg-blue-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-phone-alt text-blue-600"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-bold mb-2 text-blue-900">Contact Information</h3> | |
| <p class="text-gray-600 mb-1">Main: (123) 456-7890</p> | |
| <p class="text-gray-600 mb-1">Emergency: (123) 456-7891</p> | |
| <p class="text-gray-600">Appointments: (123) 456-7892</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start mb-6"> | |
| <div class="bg-blue-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-envelope text-blue-600"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-bold mb-2 text-blue-900">Email Us</h3> | |
| <p class="text-gray-600 mb-1">General: info@medicarehospital.com</p> | |
| <p class="text-gray-600">Appointments: appointments@medicarehospital.com</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-clock text-blue-600"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-bold mb-2 text-blue-900">Working Hours</h3> | |
| <p class="text-gray-600 mb-1">Monday - Friday: 8:00 AM - 6:00 PM</p> | |
| <p class="text-gray-600">Saturday: 9:00 AM - 3:00 PM</p> | |
| <p class="text-gray-600">Emergency: 24/7</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white p-8 rounded-xl shadow-md"> | |
| <h3 class="text-xl font-bold mb-6 text-blue-900">Send Us a Message</h3> | |
| <form id="contactForm" class="space-y-4"> | |
| <div> | |
| <input type="text" placeholder="Your Name" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" required> | |
| </div> | |
| <div> | |
| <input type="email" placeholder="Your Email" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" required> | |
| </div> | |
| <div> | |
| <input type="text" placeholder="Subject" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" required> | |
| </div> | |
| <div> | |
| <textarea rows="4" placeholder="Your Message" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" required></textarea> | |
| </div> | |
| <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-medium transition duration-300">Send Message</button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-blue-900 text-white pt-16 pb-8"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-12"> | |
| <div> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-white p-2 rounded-full mr-3"> | |
| <i class="fas fa-heartbeat text-blue-900 text-xl"></i> | |
| </div> | |
| <a href="#" class="text-2xl font-bold text-white">Medi<span class="text-blue-300">Care</span></a> | |
| </div> | |
| <p class="mb-4 text-blue-200">Providing exceptional healthcare services with compassion and cutting-edge technology since 1995.</p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-blue-200 hover:text-white"><i class="fab fa-facebook-f"></i></a> | |
| <a href="#" class="text-blue-200 hover:text-white"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="text-blue-200 hover:text-white"><i class="fab fa-instagram"></i></a> | |
| <a href="#" class="text-blue-200 hover:text-white"><i class="fab fa-linkedin-in"></i></a> | |
| <a href="#" class="text-blue-200 hover:text-white"><i class="fab fa-youtube"></i></a> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-bold mb-6">Quick Links</h3> | |
| <ul class="space-y-3"> | |
| <li><a href="#" class="text-blue-200 hover:text-white">Home</a></li> | |
| <li><a href="#" class="text-blue-200 hover:text-white">About Us</a></li> | |
| <li><a href="#" class="text-blue-200 hover:text-white">Services</a></li> | |
| <li><a href="#" class="text-blue-200 hover:text-white">Departments</a></li> | |
| <li><a href="#" class="text-blue-200 hover:text-white">Doctors</a></li> | |
| <li><a href="#" class="text-blue-200 hover:text-white">Contact</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-bold mb-6">Departments</h3> | |
| <ul class="space-y-3"> | |
| <li><a href="#" class="text-blue-200 hover:text-white">Cardiology</a></li> | |
| <li><a href="#" class="text-blue-200 hover:text-white">Neurology</a></li> | |
| <li><a href="#" class="text-blue-200 hover:text-white">Orthopedics</a></li> | |
| <li><a href="#" class="text-blue-200 hover:text-white">Pediatrics</a></li> | |
| <li><a href="#" class="text-blue-200 hover:text-white">Ophthalmology</a></li> | |
| <li><a href="#" class="text-blue-200 hover:text-white">Dentistry</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-bold mb-6">Newsletter</h3> | |
| <p class="text-blue-200 mb-4">Subscribe to our newsletter to receive the latest health news and updates.</p> | |
| <form class="flex"> | |
| <input type="email" placeholder="Your Email" class="px-4 py-2 rounded-l-lg focus:outline-none text-gray-900 w-full"> | |
| <button type="submit" class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-r-lg"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| <div class="border-t border-blue-800 pt-8"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-blue-200 mb-4 md:mb-0">© 2023 MediCare Hospital. All Rights Reserved.</p> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-blue-200 hover:text-white">Privacy Policy</a> | |
| <a href="#" class="text-blue-200 hover:text-white">Terms of Service</a> | |
| <a href="#" class="text-blue-200 hover:text-white">Sitemap</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Back to Top Button --> | |
| <button id="backToTop" class="fixed bottom-8 right-8 bg-blue-600 text-white w-12 h-12 rounded-full shadow-lg flex items-center justify-center hidden"> | |
| <i class="fas fa-arrow-up"></i> | |
| </button> | |
| <script> | |
| // Mobile Menu Toggle | |
| const mobileMenuButton = document.getElementById('mobile-menu-button'); | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| mobileMenuButton.addEventListener('click', () => { | |
| mobileMenu.classList.toggle('hidden'); | |
| }); | |
| // Back to Top Button | |
| const backToTopButton = document.getElementById('backToTop'); | |
| window.addEventListener('scroll', () => { | |
| if (window.pageYOffset > 300) { | |
| backToTopButton.classList.remove('hidden'); | |
| } else { | |
| backToTopButton.classList.add('hidden'); | |
| } | |
| }); | |
| backToTopButton.addEventListener('click', () => { | |
| window.scrollTo({ top: 0, behavior: 'smooth' }); | |
| }); | |
| // Form Submissions | |
| const appointmentForm = document.getElementById('appointmentForm'); | |
| const newsletterForm = document.getElementById('newsletterForm'); | |
| const contactForm = document.getElementById('contactForm'); | |
| if (appointmentForm) { | |
| appointmentForm.addEventListener('submit', (e) => { | |
| e.preventDefault(); | |
| alert('Appointment request submitted successfully! We will contact you shortly to confirm your appointment.'); | |
| appointmentForm.reset(); | |
| }); | |
| } | |
| if (newsletterForm) { | |
| newsletterForm.addEventListener('submit', (e) => { | |
| e.preventDefault(); | |
| alert('Thank you for subscribing to our newsletter!'); | |
| newsletterForm.reset(); | |
| }); | |
| } | |
| if (contactForm) { | |
| contactForm.addEventListener('submit', (e) => { | |
| e.preventDefault(); | |
| alert('Your message has been sent successfully! We will get back to you soon.'); | |
| contactForm.reset(); | |
| }); | |
| } | |
| // Department and Doctor Select Relationship | |
| const departmentSelect = document.getElementById('department'); | |
| const doctorSelect = document.getElementById('doctor'); | |
| if (departmentSelect && doctorSelect) { | |
| departmentSelect.addEventListener('change', () => { | |
| // Clear existing options except the first one | |
| while (doctorSelect.options.length > 1) { | |
| doctorSelect.remove(1); | |
| } | |
| // Add doctors based on selected department | |
| if (departmentSelect.value === 'cardiology') { | |
| addOption(doctorSelect, 'Dr. Sarah Johnson', 'dr-johnson'); | |
| addOption(doctorSelect, 'Dr. Robert Smith', 'dr-smith'); | |
| } else if (departmentSelect.value === 'neurology') { | |
| addOption(doctorSelect, 'Dr. Michael Chen', 'dr-chen'); | |
| addOption(doctorSelect, 'Dr. Lisa Wong', 'dr-wong'); | |
| } else if (departmentSelect.value === 'orthopedics') { | |
| addOption(doctorSelect, 'Dr. David Wilson', 'dr-wilson'); | |
| addOption(doctorSelect, 'Dr. James Brown', 'dr-brown'); | |
| } else if (departmentSelect.value === 'pediatrics') { | |
| addOption(doctorSelect, 'Dr. Emily Rodriguez', 'dr-rodriguez'); | |
| addOption(doctorSelect, 'Dr. Jennifer Lee', 'dr-lee'); | |
| } else if (departmentSelect.value === 'ophthalmology') { | |
| addOption(doctorSelect, 'Dr. Thomas Clark', 'dr-clark'); | |
| addOption(doctorSelect, 'Dr. Patricia Adams', 'dr-adams'); | |
| } else if (departmentSelect.value === 'dentistry') { | |
| addOption(doctorSelect, 'Dr. Mark Taylor', 'dr-taylor'); | |
| addOption(doctorSelect, 'Dr. Susan Miller', 'dr-miller'); | |
| } | |
| }); | |
| } | |
| function addOption(selectElement, text, value) { | |
| const option = document.createElement('option'); | |
| option.text = text; | |
| option.value = value; | |
| selectElement.add(option); | |
| } | |
| </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=chatkenneth/medicare" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |