* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background-color: #f8fafc; color: #1e293b; line-height: 1.6; } .app-container { max-width: 428px; margin: 0 auto; background: white; min-height: 100vh; position: relative; box-shadow: 0 0 20px rgba(0,0,0,0.1); } /* Medical Color Scheme */ .medical-blue { color: #4f46e5; } .medical-bg { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); } .medical-gradient { background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%); } .medical-accent { color: #ef4444; } .bg-medical-blue { background-color: #4f46e5; } .bg-medical-accent { background-color: #ef4444; } /* Common Components */ .btn { padding: 12px 24px; border: none; border-radius: 12px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; font-size: 16px; text-decoration: none; display: inline-block; text-align: center; } .btn-primary { background-color: #4f46e5; color: white; } .btn-primary:hover { background-color: #4338ca; transform: translateY(-2px); } .btn-full { width: 100%; } .input-field { width: 100%; padding: 16px; border: 2px solid #e5e7eb; border-radius: 12px; font-size: 16px; background-color: #f9fafb; transition: border-color 0.3s ease; } .input-field:focus { outline: none; border-color: #4f46e5; background-color: white; } .select-field { width: 100%; padding: 16px; border: 2px solid #e5e7eb; border-radius: 12px; font-size: 16px; background-color: #f9fafb; cursor: pointer; } .card { background: white; border-radius: 16px; padding: 20px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); margin-bottom: 16px; } /* Onboarding Screen */ .onboarding { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%); color: white; text-align: center; padding: 40px 24px; } .app-logo { width: 120px; height: 120px; background: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 32px; box-shadow: 0 20px 40px rgba(0,0,0,0.2); } .app-logo i { font-size: 60px; color: #4f46e5; } .onboarding h1 { font-size: 48px; font-weight: bold; margin-bottom: 16px; } .onboarding p { font-size: 20px; margin-bottom: 48px; opacity: 0.9; } /* Auth Screen */ .auth-screen { padding: 40px 24px; } .auth-header { background: #4f46e5; color: white; padding: 60px 24px 40px; text-align: center; margin: -40px -24px 40px; } .auth-header h2 { font-size: 28px; margin-bottom: 8px; } .tab-bar { display: flex; background: #f1f5f9; border-radius: 12px; margin-bottom: 32px; padding: 4px; } .tab { flex: 1; padding: 12px; text-align: center; border-radius: 8px; cursor: pointer; font-weight: 600; transition: all 0.3s ease; } .tab.active { background: white; color: #4f46e5; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .form-group { margin-bottom: 20px; } .form-group label { display: block; margin-bottom: 8px; font-weight: 600; color: #374151; } /* Profile Setup */ .profile-setup { padding: 0; } .profile-header { background: #4f46e5; color: white; padding: 60px 24px 40px; text-align: center; } .profile-content { padding: 24px; } .profile-photo { text-align: center; margin-bottom: 32px; } .photo-circle { width: 100px; height: 100px; background: #e5e7eb; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; position: relative; } .photo-circle i { font-size: 40px; color: #9ca3af; } .add-photo-btn { background: none; border: none; color: #4f46e5; font-weight: 600; cursor: pointer; } /* Home Screen */ .home-screen { background: #f8fafc; min-height: 100vh; padding-bottom: 80px; } .home-header { background: white; padding: 60px 24px 24px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); } .user-info { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; } .user-avatar { display: flex; align-items: center; gap: 12px; } .avatar { width: 48px; height: 48px; background: linear-gradient(45deg, #f59e0b, #ef4444); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; } .user-details h3 { font-size: 18px; font-weight: 600; } .user-details p { color: #6b7280; font-size: 14px; } .header-actions { display: flex; gap: 12px; } .icon-btn { width: 40px; height: 40px; border: none; background: #f9fafb; border-radius: 8px; display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; } .notification-dot { position: absolute; top: 8px; right: 8px; width: 8px; height: 8px; background: #ef4444; border-radius: 50%; } .search-bar { display: flex; align-items: center; background: #f9fafb; border-radius: 12px; padding: 12px 16px; margin-bottom: 24px; } .search-bar i { color: #9ca3af; margin-right: 12px; } .search-bar input { border: none; background: none; outline: none; flex: 1; font-size: 16px; } .home-content { padding: 24px; } .banner-carousel { position: relative; margin-bottom: 32px; } .banner-container { position: relative; height: 180px; border-radius: 16px; overflow: hidden; } .banner-slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.5s ease-in-out; } .banner-slide.active { opacity: 1; } .banner-content { display: none; } .banner-text h3 { display: none; } .banner-text p { display: none; } .banner-ad-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 16px; } .banner-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 16px; } .banner-overlay-1 { background: linear-gradient(135deg, rgba(239, 68, 68, 0.7) 0%, rgba(185, 28, 28, 0.7) 100%); } .banner-overlay-2 { background: linear-gradient(135deg, rgba(34, 197, 94, 0.7) 0%, rgba(21, 128, 61, 0.7) 100%); } .banner-overlay-3 { background: linear-gradient(135deg, rgba(59, 130, 246, 0.7) 0%, rgba(29, 78, 216, 0.7) 100%); } .banner-overlay-4 { background: linear-gradient(135deg, rgba(251, 146, 60, 0.7) 0%, rgba(234, 88, 12, 0.7) 100%); } .banner-overlay-5 { background: linear-gradient(135deg, rgba(168, 85, 247, 0.7) 0%, rgba(124, 58, 237, 0.7) 100%); } .banner-overlay-6 { background: linear-gradient(135deg, rgba(236, 72, 153, 0.7) 0%, rgba(190, 24, 93, 0.7) 100%); } .banner-overlay-7 { background: linear-gradient(135deg, rgba(20, 184, 166, 0.7) 0%, rgba(13, 148, 136, 0.7) 100%); } .carousel-dots { display: flex; justify-content: center; gap: 8px; margin-top: 16px; } .carousel-dot { width: 8px; height: 8px; border-radius: 50%; background: #e5e7eb; cursor: pointer; transition: background 0.3s ease; } .carousel-dot.active { background: #4f46e5; } .specialist-container { position: relative; } .specialist-swipe-container { overflow: hidden; width: 100%; position: relative; } .specialist-swipe-container .specialist-grid { transition: transform 0.3s ease; } .specialist-navigation { margin-top: 16px; } .specialist-dots { display: flex; justify-content: center; gap: 8px; } .specialist-dot { width: 8px; height: 8px; border-radius: 50%; background: #e5e7eb; cursor: pointer; transition: background 0.3s ease; } .specialist-dot.active { background: #4f46e5; } .section-title { font-size: 20px; font-weight: bold; margin-bottom: 16px; color: #1e293b; } .emergency-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 32px; } .emergency-item { background: white; border-radius: 16px; padding: 20px; text-align: center; cursor: pointer; transition: transform 0.3s ease; } .emergency-item:hover { transform: translateY(-4px); } .emergency-item.blood { background: #fef2f2; color: #dc2626; } .emergency-item.ambulance { background: #fdf2f8; color: #db2777; } .emergency-item.hospital { background: #eff6ff; color: #2563eb; } .emergency-item.help { background: #f3e8ff; color: #7c3aed; } .emergency-item i { font-size: 32px; margin-bottom: 12px; } .emergency-item p { font-weight: 600; font-size: 14px; } .specialist-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 32px; } .specialist-item { background: white; border-radius: 16px; padding: 16px; text-align: center; cursor: pointer; transition: transform 0.3s ease; } .specialist-item:hover { transform: translateY(-4px); } .specialist-item.cardiology { background: #fef2f2; color: #dc2626; } .specialist-item.oncology { background: #eff6ff; color: #2563eb; } .specialist-item.pulmonology { background: #f0fdf4; color: #16a34a; } .specialist-item.pediatrics { background: #fffbeb; color: #d97706; } .specialist-item.dental { background: #f3e8ff; color: #7c3aed; } .specialist-item.neurology { background: #eef2ff; color: #4338ca; } .specialist-item.orthopedic { background: #fff7ed; color: #ea580c; } .specialist-item.gynecology { background: #fdf2f8; color: #db2777; } .specialist-item i { font-size: 24px; margin-bottom: 8px; } .specialist-item p { font-weight: 600; font-size: 12px; } .doctor-card { background: white; border-radius: 16px; padding: 16px; margin-bottom: 16px; display: flex; align-items: center; gap: 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); } .doctor-image { width: 64px; height: 64px; border-radius: 16px; object-fit: cover; } .doctor-info { flex: 1; } .doctor-info h4 { font-size: 16px; font-weight: 600; margin-bottom: 4px; } .doctor-info p { color: #6b7280; font-size: 14px; margin-bottom: 8px; } .doctor-rating { display: flex; align-items: center; gap: 4px; } .doctor-rating i { color: #fbbf24; font-size: 14px; } .doctor-rating span { font-size: 14px; font-weight: 600; } .doctor-actions { display: flex; flex-direction: column; gap: 8px; } .btn-small { padding: 8px 16px; font-size: 14px; border-radius: 8px; } /* Bottom Navigation */ .bottom-nav { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 428px; background: white; padding: 12px 24px; box-shadow: 0 -4px 12px rgba(0,0,0,0.1); display: flex; justify-content: space-around; z-index: 1000; } .nav-item { display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; padding: 8px; border-radius: 8px; transition: all 0.3s ease; } .nav-item.active { color: #4f46e5; } .nav-item i { font-size: 20px; } .nav-item span { font-size: 12px; font-weight: 600; } /* Doctor Details */ .doctor-details { background: white; } .doctor-banner { height: 300px; position: relative; overflow: hidden; } .doctor-banner img { width: 100%; height: 100%; object-fit: cover; } .banner-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.1)); } .banner-actions { position: absolute; top: 20px; left: 20px; right: 20px; display: flex; justify-content: space-between; } .back-btn, .favorite-btn { width: 40px; height: 40px; background: rgba(255,255,255,0.9); border: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; } .doctor-info-card { margin: -60px 24px 24px; background: white; border-radius: 16px; padding: 24px; box-shadow: 0 8px 32px rgba(0,0,0,0.1); position: relative; z-index: 10; } .doctor-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 24px 0; } .stat-item { text-align: center; } .stat-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin: 0 auto 8px; } .stat-icon.patients { background: #eff6ff; color: #2563eb; } .stat-icon.experience { background: #f0fdf4; color: #16a34a; } .stat-icon.rating { background: #fffbeb; color: #d97706; } .stat-icon.reviews { background: #f3e8ff; color: #7c3aed; } .stat-value { font-size: 16px; font-weight: bold; margin-bottom: 4px; } .stat-label { font-size: 12px; color: #6b7280; } /* Appointment Form */ .appointment-form { padding: 24px; } .form-section { margin-bottom: 32px; } .form-section h3 { font-size: 18px; font-weight: 600; margin-bottom: 16px; } .date-picker { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin-bottom: 24px; } .date-item { aspect-ratio: 1; border: 2px solid #e5e7eb; border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; } .date-item.selected { background: #4f46e5; color: white; border-color: #4f46e5; } .date-item.today { background: #ef4444; color: white; border-color: #ef4444; } .time-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 24px; } .time-slot { padding: 12px; border: 2px solid #e5e7eb; border-radius: 8px; text-align: center; cursor: pointer; transition: all 0.3s ease; } .time-slot.selected { background: #4f46e5; color: white; border-color: #4f46e5; } /* Payment Screen */ .payment-summary { background: #f8fafc; border-radius: 12px; padding: 20px; margin-bottom: 24px; } .summary-row { display: flex; justify-content: space-between; margin-bottom: 12px; } .summary-row.total { font-size: 18px; font-weight: bold; color: #4f46e5; padding-top: 12px; border-top: 1px solid #e5e7eb; } .payment-methods { margin-bottom: 24px; } .payment-method { display: flex; align-items: center; padding: 16px; border: 2px solid #e5e7eb; border-radius: 12px; margin-bottom: 12px; cursor: pointer; transition: all 0.3s ease; } .payment-method.selected { border-color: #4f46e5; background: #f8fafc; } .payment-method input[type="radio"] { margin-right: 12px; } .payment-logo { width: 32px; height: 32px; border-radius: 6px; display: flex; align-items: center; justify-content: center; margin-right: 12px; font-weight: bold; color: white; } .bkash { background: #e91e63; } .nagad { background: #ff9800; } .rocket { background: #9c27b0; } /* Emergency Forms */ .emergency-screen { background: #f8fafc; min-height: 100vh; } .emergency-header { background: #4f46e5; color: white; padding: 60px 24px 24px; text-align: center; } .emergency-content { padding: 24px; } /* Responsive Design */ @media (max-width: 480px) { .app-container { max-width: 100%; } .specialist-grid { grid-template-columns: repeat(3, 1fr); } .date-picker { grid-template-columns: repeat(5, 1fr); } } /* Loading States */ .loading { display: flex; align-items: center; justify-content: center; padding: 40px; } .spinner { width: 32px; height: 32px; border: 3px solid #e5e7eb; border-top: 3px solid #4f46e5; border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Hidden class */ .hidden { display: none !important; } /* Modal */ .modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 2000; } .modal-content { background: white; border-radius: 16px; padding: 32px; margin: 24px; max-width: 320px; text-align: center; } .success-icon { width: 80px; height: 80px; background: #dcfce7; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 24px; } .success-icon i { font-size: 40px; color: #16a34a; } // Medical App JavaScript class MedicalApp { constructor() { this.currentScreen = 'onboarding'; this.user = null; this.doctors = []; this.appointments = []; this.selectedDoctor = null; this.appointmentForm = {}; this.init(); } init() { this.currentSlide = 0; this.currentCategoryPage = 0; this.bannerImages = [ { id: 1, image: "https://images.unsplash.com/photo-1576091160399-112ba8d25d1f?w=600", title: "Medical Checks!", subtitle: "Check Your Medical Condition Regularly To Minimize The Risk Of Disease In The Future" }, { id: 2, image: "https://images.unsplash.com/photo-1559757148-5c350d0d3c56?w=600", title: "Emergency Care", subtitle: "24/7 Emergency Medical Services Available For Critical Situations" }, { id: 3, image: "https://images.unsplash.com/photo-1551190822-a9333d879b1f?w=600", title: "Expert Doctors", subtitle: "Consult With Top Rated Specialist Doctors In Your Area" }, { id: 4, image: "https://images.unsplash.com/photo-1582750433449-648ed127bb54?w=600", title: "Digital Health", subtitle: "Modern Digital Healthcare Solutions For Better Treatment" }, { id: 5, image: "https://images.unsplash.com/photo-1559839734-2b71ea197ec2?w=600", title: "Women's Health", subtitle: "Specialized Healthcare Services For Women's Wellness" }, { id: 6, image: "https://images.unsplash.com/photo-1612349317150-e413f6a5b16d?w=600", title: "Dental Care", subtitle: "Complete Dental Solutions For Your Oral Health" }, { id: 7, image: "https://images.unsplash.com/photo-1631217868264-e5b90bb7e133?w=600", title: "Pharmacy Services", subtitle: "Online Medicine Ordering With Home Delivery" } ]; this.loadMockData(); this.render(); this.attachEventListeners(); this.startCarousel(); } loadMockData() { // Mock doctors data this.doctors = [ { id: 1, name: "Prof. Dr. Musa Siddik Juwel", specialty: "dental", specialtyDisplay: "Dental And Maxillofacial Surgeon", qualifications: "BDS, MCPS, FCPS (Maxillofacial Surgery)", institution: "Rangpur Community Dental College", rating: 5.0, reviews: 245, patients: "5000+", experience: "10+", consultationFee: 800, photo: "https://images.unsplash.com/photo-1612349317150-e413f6a5b16d?w=300", about: "Dr. Musa Siddik Juwel is a renowned Dental and Maxillofacial Surgeon in Rangpur. He is a Professor & Head of Maxillofacial Surgery as well as Principal of Rangpur Community Dental College.", workingTime: "Saturday - Thursday, 03 P.M - 10 P.M", chamberName: "Dental Maxillofacial & Implant Center", chamberAddress: "Beside Ma-Moni Hotel, Jail Road, Dhap, Rangpur" }, { id: 2, name: "Dr. Dip Jyoti Sarker", specialty: "pulmonology", specialtyDisplay: "Pulmonologist", qualifications: "MBBS, BCS, FCPS (Medicine), MD (Chest Medicine)", institution: "Rangpur Medical College & Hospital", rating: 5.0, reviews: 380, patients: "3000+", experience: "8+", consultationFee: 600, photo: "https://images.unsplash.com/photo-1582750433449-648ed127bb54?w=300", about: "Dr. Dip Jyoti Sarker is a specialized Pulmonologist with extensive experience in treating respiratory diseases.", workingTime: "Sunday - Thursday, 09 A.M - 02 P.M", chamberName: "Chest Disease Clinic", chamberAddress: "Medical Road, Rangpur" }, { id: 3, name: "Dr. Shahi Farzana Tasmin", specialty: "gynecology", specialtyDisplay: "Gynecologist", qualifications: "MBBS, FCPS (OBGYN)", institution: "Rangpur Medical College & Hospital", rating: 5.0, reviews: 295, patients: "4000+", experience: "12+", consultationFee: 700, photo: "https://images.unsplash.com/photo-1559839734-2b71ea197ec2?w=300", about: "Dr. Shahi Farzana Tasmin is an experienced Gynecologist specializing in women's health and reproductive medicine.", workingTime: "Saturday - Wednesday, 04 P.M - 09 P.M", chamberName: "Women's Health Center", chamberAddress: "Station Road, Rangpur" }, { id: 4, name: "Dr. Rashid Ahmed", specialty: "cardiology", specialtyDisplay: "Cardiologist", qualifications: "MBBS, MD (Cardiology)", institution: "National Heart Foundation Hospital", rating: 4.8, reviews: 156, patients: "2500+", experience: "6+", consultationFee: 900, photo: "https://images.unsplash.com/photo-1551190822-a9333d879b1f?w=300", about: "Dr. Rashid Ahmed is a skilled Cardiologist specializing in heart disease management and interventional cardiology.", workingTime: "Monday - Friday, 10 A.M - 04 P.M", chamberName: "Heart Care Center", chamberAddress: "Hospital Road, Rangpur" }, { id: 5, name: "Dr. Fatima Khatun", specialty: "pediatrics", specialtyDisplay: "Pediatrician", qualifications: "MBBS, DCH, FCPS (Pediatrics)", institution: "Rangpur Children's Hospital", rating: 4.9, reviews: 220, patients: "3500+", experience: "9+", consultationFee: 550, photo: "https://images.unsplash.com/photo-1559839734-2b71ea197ec2?w=300", about: "Dr. Fatima Khatun is a dedicated Pediatrician with expertise in child health and development.", workingTime: "Saturday - Thursday, 08 A.M - 02 P.M", chamberName: "Children's Health Clinic", chamberAddress: "New Market, Rangpur" }, { id: 6, name: "Dr. Mohammad Hasan", specialty: "orthopedic", specialtyDisplay: "Orthopedic Surgeon", qualifications: "MBBS, MS (Orthopedics)", institution: "Rangpur Orthopedic Hospital", rating: 4.7, reviews: 180, patients: "2000+", experience: "7+", consultationFee: 750, photo: "https://images.unsplash.com/photo-1612349317150-e413f6a5b16d?w=300", about: "Dr. Mohammad Hasan is an experienced Orthopedic Surgeon specializing in bone and joint treatments.", workingTime: "Sunday - Thursday, 02 P.M - 08 P.M", chamberName: "Bone & Joint Center", chamberAddress: "Central Road, Rangpur" }, { id: 7, name: "Dr. Nasreen Sultana", specialty: "dermatology", specialtyDisplay: "Dermatologist", qualifications: "MBBS, DDV, MD (Dermatology)", institution: "Skin Care Institute", rating: 4.6, reviews: 142, patients: "1800+", experience: "5+", consultationFee: 650, photo: "https://images.unsplash.com/photo-1559839734-2b71ea197ec2?w=300", about: "Dr. Nasreen Sultana is a qualified Dermatologist specializing in skin and hair treatments.", workingTime: "Monday - Saturday, 11 A.M - 05 P.M", chamberName: "Skin & Hair Clinic", chamberAddress: "Modern More, Rangpur" }, { id: 8, name: "Dr. Abdul Karim", specialty: "neurology", specialtyDisplay: "Neurologist", qualifications: "MBBS, MD (Neurology)", institution: "Neuro Medical Center", rating: 4.8, reviews: 189, patients: "2200+", experience: "8+", consultationFee: 850, photo: "https://images.unsplash.com/photo-1612349317150-e413f6a5b16d?w=300", about: "Dr. Abdul Karim is a specialist Neurologist with expertise in brain and nervous system disorders.", workingTime: "Tuesday - Saturday, 09 A.M - 03 P.M", chamberName: "Neuro Care Center", chamberAddress: "Medical College Road, Rangpur" } ]; // Mock appointments this.appointments = [ { id: "MSuld0043", doctorId: 1, doctorName: "Prof. Dr. Musa Siddik Juwel", specialty: "Dental And Maxillofacial Surgeon", date: "February 19, 2025", time: "03:00 PM", status: "active", patientName: "Jannatul Jannat", age: 21, mobile: "+8801823076302", problem: "Dental Problem In Right Side" } ]; } render() { const app = document.getElementById('app'); app.innerHTML = this.getCurrentScreenHTML(); } getCurrentScreenHTML() { switch (this.currentScreen) { case 'onboarding': return this.getOnboardingHTML(); case 'auth': return this.getAuthHTML(); case 'profile-setup': return this.getProfileSetupHTML(); case 'home': return this.getHomeHTML(); case 'top-doctors': return this.getTopDoctorsHTML(); case 'specialist': return this.getSpecialistHTML(); case 'appointments': return this.getAppointmentsHTML(); case 'profile': return this.getProfileHTML(); case 'doctor-details': return this.getDoctorDetailsHTML(); case 'book-appointment': return this.getBookAppointmentHTML(); case 'payment': return this.getPaymentHTML(); case 'emergency-blood': return this.getEmergencyBloodHTML(); case 'emergency-ambulance': return this.getEmergencyAmbulanceHTML(); case 'emergency-hospital': return this.getEmergencyHospitalHTML(); case 'emergency-help': return this.getEmergencyHelpHTML(); default: return this.getOnboardingHTML(); } } getOnboardingHTML() { return `

MediCare

Your Trusted Platform To Find And Book Doctors Across Rangpur — Anytime, Anywhere.

`; } getAuthHTML() { return `

Welcome Back

Sign in to continue your health journey

Sign In
Sign Up
`; } getProfileSetupHTML() { return `

Complete Your Profile

Help us personalize your experience

`; } getHomeHTML() { return `

Emergency Services

Blood Bank

Ambulance

Private Hospital

Help Center

Specialist Doctors

${this.getSpecialistCategoriesHTML()}
${this.getSpecialistDotsHTML()}

Sponsor

Top Doctor

${this.getDoctorCardsHTML(this.getFiveStarDoctors().slice(0, 2))}
${this.getBottomNavHTML('home')}
`; } getTopDoctorsHTML() { return `

Top Doctors In Rangpur

Find All Specialist Doctors In One Place

Top Doctors List

Sort By: Rating
${this.getDoctorCardsHTML(this.getFiveStarDoctors(), true)}
${this.getBottomNavHTML('top-doctors')}
`; } getSpecialistHTML() { const sectionTitle = this.currentSpecialtyFilter ? `${this.getCategoryDisplayName(this.currentSpecialtyFilter)} Doctor` : 'Top Doctor'; const displayedDoctors = this.currentSpecialtyFilter ? this.doctors.filter(doctor => doctor.specialty === this.currentSpecialtyFilter) : this.getFiveStarDoctors(); return `

Find Specialist Doctors

Find Specialist Doctors From Category

Specialist Doctors

${this.getAllSpecialistCategoriesGridHTML()}

${sectionTitle}

${this.getDoctorCardsHTML(displayedDoctors, true)}
${this.getBottomNavHTML('specialist')}
`; } getAppointmentsHTML() { return `

My Appointment

View Your Doctor Appointment And Services

Active Appointment (01)

Sort By: This Month
${this.getAppointmentCardsHTML(this.appointments.filter(apt => apt.status === 'active'))}

Completed Appointment (08)

Sort By: Last Month

No completed appointments

${this.getBottomNavHTML('appointments')}
`; } getProfileHTML() { return `

Profile

JJ

Jannatul Jannat

+8801823076302

${this.getBottomNavHTML('profile')}
`; } getDoctorDetailsHTML() { if (!this.selectedDoctor) return ''; const doctor = this.selectedDoctor; return `
${doctor.name}

${doctor.name}

${doctor.specialty}

${doctor.qualifications}

${doctor.institution}

${doctor.patients}
Patients
${doctor.experience}
Years Exp.
${doctor.rating}
Rating
${doctor.reviews}
Reviews

About Doctor

${doctor.about}

Working Time

${doctor.workingTime}

Chamber Address

${doctor.chamberName}

${doctor.chamberAddress}

`; } getBookAppointmentHTML() { if (!this.selectedDoctor) return ''; const doctor = this.selectedDoctor; return `

Book Appointment

Schedule your medical consultation

${doctor.name}

${doctor.name}

${doctor.specialty}

Patient Information

Select Date & Time

03:00 PM
04:00 PM
05:00 PM
06:00 PM
07:00 PM
08:00 PM

Appointment Summary

Consultation Fee: ৳${doctor.consultationFee}
Booking Fee: ৳50
Total: ৳${doctor.consultationFee + 50}
`; } getPaymentHTML() { return `

Payment

Secure payment for your appointment

Payment Summary

Doctor: Prof. Dr. Musa Siddik Juwel
Date: February 19, 2025
Time: 04:00 PM
Total Amount: ৳850

Select Payment Method

bKash Payment Details

Payment Instructions:

  1. Dial *247# from your bKash account
  2. Select "Send Money"
  3. Enter merchant: 01XXXXXXXXX
  4. Enter amount: ৳850
  5. Enter reference: MSuld0043
  6. Enter your bKash PIN
Your payment information is secure and encrypted
`; } getEmergencyBloodHTML() { return `

Blood Bank

Donate Blood Willingly — The Patient Will Smile, A Life Will Be Saved

Make A Request For Blood

`; } getEmergencyAmbulanceHTML() { return `

Ambulance

Make A Request For Ambulance Service

`; } getEmergencyHospitalHTML() { return `

Private Hospital

Book Private Hospitals With Discount Offers — Only On This App!

Hospital

Doctors Community Hospital

Medical East Gate, Ganagachara Road 5400, Rangpur
Discount Offer: 10%
5.0 (158)

Make A Request For Booking

`; } getEmergencyHelpHTML() { return `

Help Center

We're Here To Help You Every Step Of The Way.

Call Us

Help Desk 01 : +8801750913031
Help Desk 02 : +8801566777755
Help Desk 03 : +8801736360028
Help Desk 04 : +8801750913031
Help Desk 05 : +8801750913031
`; } getDoctorCardsHTML(doctors, showFavorite = false) { return doctors.map(doctor => `
${doctor.name}

${doctor.name}

${doctor.specialtyDisplay || doctor.specialty}

${doctor.rating} (${doctor.reviews})
${showFavorite ? '' : ''}
`).join(''); } getAppointmentCardsHTML(appointments) { return appointments.map(appointment => `
Booking Id : ${appointment.id} Date : ${appointment.date}
${appointment.doctorName}

${appointment.doctorName}

${appointment.specialty}

5.0 (278)
`).join(''); } getBottomNavHTML(activeTab) { const items = [ { id: 'home', icon: 'fas fa-home', label: 'Home' }, { id: 'top-doctors', icon: 'fas fa-user-md', label: 'Top Doctor' }, { id: 'specialist', icon: 'fas fa-stethoscope', label: 'Specialist' }, { id: 'appointments', icon: 'fas fa-calendar-alt', label: 'Appointment' }, { id: 'profile', icon: 'fas fa-user', label: 'Profile' } ]; return `
${items.map(item => `
${item.label}
`).join('')}
`; } // Event Handlers attachEventListeners() { // Add search functionality after page renders setTimeout(() => { const searchInput = document.querySelector('.search-bar input'); if (searchInput) { searchInput.addEventListener('input', (e) => { const query = e.target.value; const filteredDoctors = this.searchDoctors(query); // Update doctor cards if we're on a page that shows them if (this.currentScreen === 'home' || this.currentScreen === 'specialist' || this.currentScreen === 'top-doctors') { const doctorContainers = document.querySelectorAll('.doctor-card').forEach(card => card.parentNode); const lastSection = document.querySelector('.section:last-child'); if (lastSection && lastSection.querySelector('.doctor-card')) { const cardContainer = lastSection.querySelector('.doctor-card').parentNode; cardContainer.innerHTML = this.getDoctorCardsHTML(filteredDoctors, true); } } }); } // Add swipe functionality for specialist categories const swipeContainer = document.getElementById('specialist-swipe'); if (swipeContainer) { let startX = 0; let currentX = 0; let isDragging = false; swipeContainer.addEventListener('touchstart', (e) => { startX = e.touches[0].clientX; isDragging = true; }); swipeContainer.addEventListener('touchmove', (e) => { if (!isDragging) return; currentX = e.touches[0].clientX; }); swipeContainer.addEventListener('touchend', () => { if (!isDragging) return; isDragging = false; const diffX = startX - currentX; if (Math.abs(diffX) > 50) { if (diffX > 0) { this.nextCategories(); } else { this.previousCategories(); } } }); } }, 100); } startCarousel() { setInterval(() => { if (this.currentScreen === 'home') { this.nextSlide(); } }, 3000); } showSlide(n) { const slides = document.querySelectorAll('.banner-slide'); const dots = document.querySelectorAll('.carousel-dot'); slides.forEach(slide => slide.classList.remove('active')); dots.forEach(dot => dot.classList.remove('active')); if (slides[n]) { slides[n].classList.add('active'); dots[n].classList.add('active'); this.currentSlide = n; } } nextSlide() { const slides = document.querySelectorAll('.banner-slide'); if (slides.length > 0) { this.currentSlide = (this.currentSlide + 1) % slides.length; this.showSlide(this.currentSlide); } } goToSlide(n) { this.currentSlide = n; this.showSlide(n); } getAllSpecialistCategories() { return [ { name: 'Cardiolo..', icon: 'fas fa-heart', class: 'cardiology', specialty: 'cardiology', bgColor: '#fef2f2', color: '#dc2626' }, { name: 'Oncologi..', icon: 'fas fa-ribbon', class: 'oncology', specialty: 'oncology', bgColor: '#eff6ff', color: '#2563eb' }, { name: 'Pulmonol..', icon: 'fas fa-lungs', class: 'pulmonology', specialty: 'pulmonology', bgColor: '#f0fdf4', color: '#16a34a' }, { name: 'Pediatri..', icon: 'fas fa-baby', class: 'pediatrics', specialty: 'pediatrics', bgColor: '#fffbeb', color: '#d97706' }, { name: 'Dentists', icon: 'fas fa-tooth', class: 'dental', specialty: 'dental', bgColor: '#f3e8ff', color: '#7c3aed' }, { name: 'Neurolog..', icon: 'fas fa-brain', class: 'neurology', specialty: 'neurology', bgColor: '#eef2ff', color: '#4338ca' }, { name: 'Orthoped..', icon: 'fas fa-bone', class: 'orthopedic', specialty: 'orthopedic', bgColor: '#fff7ed', color: '#ea580c' }, { name: 'Gynecolo..', icon: 'fas fa-user-md', class: 'gynecology', specialty: 'gynecology', bgColor: '#fdf2f8', color: '#db2777' }, { name: 'Dermatol..', icon: 'fas fa-hand-paper', class: 'dermatology', specialty: 'dermatology', bgColor: '#f0fdfa', color: '#059669' }, { name: 'Psychiat..', icon: 'fas fa-user-nurse', class: 'psychiatry', specialty: 'psychiatry', bgColor: '#fef3f2', color: '#dc2626' }, { name: 'Radiolog..', icon: 'fas fa-x-ray', class: 'radiology', specialty: 'radiology', bgColor: '#f0f9ff', color: '#0284c7' }, { name: 'Anesthes..', icon: 'fas fa-syringe', class: 'anesthesia', specialty: 'anesthesia', bgColor: '#fefce8', color: '#ca8a04' }, { name: 'Emergency', icon: 'fas fa-ambulance', class: 'emergency', specialty: 'emergency', bgColor: '#fef2f2', color: '#dc2626' }, { name: 'Patholog..', icon: 'fas fa-microscope', class: 'pathology', specialty: 'pathology', bgColor: '#f8fafc', color: '#64748b' }, { name: 'Surgery', icon: 'fas fa-cut', class: 'surgery', specialty: 'surgery', bgColor: '#fff1f2', color: '#e11d48' }, { name: 'Urology', icon: 'fas fa-kidneys', class: 'urology', specialty: 'urology', bgColor: '#ecfdf5', color: '#059669' }, { name: 'Ophthalm..', icon: 'fas fa-eye', class: 'ophthalmology', specialty: 'ophthalmology', bgColor: '#fef7ff', color: '#a855f7' }, { name: 'ENT', icon: 'fas fa-head-side-mask', class: 'ent', specialty: 'ent', bgColor: '#f0fdf4', color: '#16a34a' }, { name: 'Endocrin..', icon: 'fas fa-tablets', class: 'endocrinology', specialty: 'endocrinology', bgColor: '#fffbeb', color: '#d97706' }, { name: 'Gastroen..', icon: 'fas fa-stomach', class: 'gastroenterology', specialty: 'gastroenterology', bgColor: '#f0f9ff', color: '#0284c7' }, { name: 'Nephrolo..', icon: 'fas fa-kidneys', class: 'nephrology', specialty: 'nephrology', bgColor: '#ecfccb', color: '#65a30d' }, { name: 'Rheumatol', icon: 'fas fa-joint', class: 'rheumatology', specialty: 'rheumatology', bgColor: '#fdf4ff', color: '#c026d3' }, { name: 'Infectio..', icon: 'fas fa-virus', class: 'infectious', specialty: 'infectious', bgColor: '#fef2f2', color: '#dc2626' }, { name: 'Geriatri..', icon: 'fas fa-user-alt', class: 'geriatrics', specialty: 'geriatrics', bgColor: '#f1f5f9', color: '#64748b' } ]; } getAllSpecialistCategoriesGridHTML() { const categories = this.getAllSpecialistCategories(); let html = '
'; categories.forEach(category => { html += `

${category.name}

`; }); html += '
'; return html; } getSpecialistCategoriesHTML() { const categories = this.getAllSpecialistCategories(); const startIndex = this.currentCategoryPage * 8; const endIndex = startIndex + 8; const visibleCategories = categories.slice(startIndex, endIndex); return visibleCategories.map(category => `

${category.name}

`).join(''); } getSpecialistDotsHTML() { const totalCategories = this.getAllSpecialistCategories().length; const totalPages = Math.ceil(totalCategories / 8); return Array.from({length: totalPages}, (_, index) => ` `).join(''); } nextCategories() { const totalCategories = this.getAllSpecialistCategories().length; const maxPages = Math.ceil(totalCategories / 8) - 1; if (this.currentCategoryPage < maxPages) { this.currentCategoryPage++; this.updateCategoriesDisplay(); } } previousCategories() { if (this.currentCategoryPage > 0) { this.currentCategoryPage--; this.updateCategoriesDisplay(); } } updateCategoriesDisplay() { const grid = document.getElementById('specialist-grid'); const dotsContainer = document.getElementById('specialist-dots'); if (grid) { grid.innerHTML = this.getSpecialistCategoriesHTML(); } if (dotsContainer) { dotsContainer.innerHTML = this.getSpecialistDotsHTML(); } } goToCategoryPage(pageIndex) { this.currentCategoryPage = pageIndex; this.updateCategoriesDisplay(); } getBannerSlidesHTML() { const colors = ['#f44336', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5', '#2196f3', '#03a9f4']; return this.bannerImages.map((banner, index) => ` `).join(''); } getBannerDotsHTML() { return this.bannerImages.map((_, index) => ` `).join(''); } getFiveStarDoctors() { return this.doctors.filter(doctor => doctor.rating === 5.0); } navigateTo(screen) { this.currentScreen = screen; this.currentSpecialtyFilter = null; this.render(); } navigateToSpecialist(specialty) { this.currentScreen = 'specialist'; this.render(); } filterSpecialists(specialty) { console.log('Filtering by specialty:', specialty); this.currentSpecialtyFilter = specialty; // Navigate to specialist page and show filtered doctors this.currentScreen = 'specialist'; this.render(); // Update the displayed doctors based on filter setTimeout(() => { const filteredDoctors = specialty ? this.doctors.filter(doctor => doctor.specialty === specialty) : this.doctors; const doctorContainer = document.querySelector('.section:last-child'); if (doctorContainer) { const sectionTitle = doctorContainer.querySelector('.section-title'); if (sectionTitle) { const categoryName = this.getCategoryDisplayName(specialty); sectionTitle.textContent = categoryName ? `${categoryName} Doctor` : 'Top Doctor'; } const cardContainer = doctorContainer.querySelector('.doctor-card')?.parentNode; if (cardContainer) { cardContainer.innerHTML = this.getDoctorCardsHTML(filteredDoctors, true); } } }, 100); } getCategoryDisplayName(specialty) { const categoryMap = { 'cardiology': 'Cardiology', 'oncology': 'Oncology', 'pulmonology': 'Pulmonology', 'pediatrics': 'Pediatrics', 'dental': 'Dental', 'neurology': 'Neurology', 'orthopedic': 'Orthopedic', 'gynecology': 'Gynecology', 'dermatology': 'Dermatology', 'psychiatry': 'Psychiatry', 'radiology': 'Radiology', 'anesthesia': 'Anesthesia', 'emergency': 'Emergency', 'pathology': 'Pathology', 'surgery': 'Surgery', 'urology': 'Urology', 'ophthalmology': 'Ophthalmo', 'ent': 'ENT', 'endocrinology': 'Endocrin', 'gastroenterology': 'Gastroen', 'nephrology': 'Nephrolo', 'rheumatology': 'Rheumatol', 'infectious': 'Infectio', 'geriatrics': 'Geriatri' }; return categoryMap[specialty] || null; } searchDoctors(query) { if (!query) return this.doctors; return this.doctors.filter(doctor => doctor.name.toLowerCase().includes(query.toLowerCase()) || doctor.specialtyDisplay.toLowerCase().includes(query.toLowerCase()) || doctor.specialty.toLowerCase().includes(query.toLowerCase()) ); } switchAuthTab(tab) { const signinForm = document.getElementById('signin-form'); const signupForm = document.getElementById('signup-form'); const tabs = document.querySelectorAll('.tab'); tabs.forEach(t => t.classList.remove('active')); if (tab === 'signin') { signinForm.classList.remove('hidden'); signupForm.classList.add('hidden'); tabs[0].classList.add('active'); } else { signinForm.classList.add('hidden'); signupForm.classList.remove('hidden'); tabs[1].classList.add('active'); } } handleSignIn(event) { event.preventDefault(); this.user = { name: 'Jannatul Jannat', email: 'jannatul@example.com' }; this.navigateTo('home'); } handleSignUp(event) { event.preventDefault(); this.navigateTo('profile-setup'); } handleProfileSetup(event) { event.preventDefault(); this.navigateTo('home'); } viewDoctor(doctorId) { this.selectedDoctor = this.doctors.find(d => d.id === doctorId); this.navigateTo('doctor-details'); } bookAppointment(doctorId) { this.selectedDoctor = this.doctors.find(d => d.id === doctorId); this.navigateTo('book-appointment'); } selectTime(element, time) { document.querySelectorAll('.time-slot').forEach(slot => slot.classList.remove('selected')); element.classList.add('selected'); this.appointmentForm.time = time; } handleAppointmentForm(event) { event.preventDefault(); const formData = new FormData(event.target); this.appointmentForm = Object.fromEntries(formData); this.navigateTo('payment'); } selectPaymentMethod(element, method) { document.querySelectorAll('.payment-method').forEach(pm => pm.classList.remove('selected')); element.classList.add('selected'); element.querySelector('input[type="radio"]').checked = true; } confirmPayment() { this.showSuccessModal(); } showSuccessModal() { const modal = document.createElement('div'); modal.className = 'modal'; modal.innerHTML = `

Congratulations!

Your Appointment With Prof. Dr. Musa Siddik Juwel

Is Confirmed For Feb February 19-2025

`; document.body.appendChild(modal); } closeModal() { const modal = document.querySelector('.modal'); if (modal) modal.remove(); } handleEmergencyForm(event, type) { event.preventDefault(); alert(`${type} request submitted successfully!`); this.navigateTo('home'); } toggleFavorite(doctorId) { console.log('Toggling favorite for doctor:', doctorId); } viewAppointmentDetails(appointmentId) { console.log('Viewing appointment details:', appointmentId); } logout() { this.user = null; this.navigateTo('onboarding'); } // Helper function to truncate text truncateText(text, maxLength) { if (text.length <= maxLength) return text; return text.substring(0, maxLength) + '..'; } } // Initialize the app const app = new MedicalApp();