Vezeeta-like Medical Website

A responsive medical appointment booking website inspired by Vezeeta, featuring a modern UI design optimized for both desktop and mobile devices.

📋 Project Overview

This project is a healthcare platform interface that allows users to:

• Search for doctors by specialty, location, or name
• Book clinic appointments
• Schedule teleconsultation calls
• Browse medical offers and promotions
• Access pharmacy services
• Book veterinary services

🗂️ Project Structure

Web3/
├── index.html           # Main HTML file with complete page structure
├── styles.css           # Primary CSS stylesheet for desktop and general styling
├── mobile-styles.css    # Responsive CSS for mobile devices
├── scripte.js           # JavaScript for interactivity and functionality
└── README.md           # Project documentation (this file)

📁 File Descriptions

index.html

The main HTML document containing:

• Top navigation bar with logo and user menu
• Hero section with search form
• Tab switching interface (Doctor Booking / Telehealth)
• Service cards (Veterinary, Pharmacy, Teleconsultation, Home Visits)
• Promotional offers slider
• Specialty categories slider
• Features section
• Mobile app download section
• Quick access tags

styles.css

Main stylesheet featuring:

• Custom CSS variables for consistent theming
• Topbar and navigation styling
• Hero banner with background image
• Search form and input fields design
• Card layouts and grid systems
• Slider components
• Feature sections
• Responsive breakpoints for tablets and mobile

mobile-styles.css

Mobile-specific optimizations:

• Responsive slider layouts
• Touch-friendly button sizing
• Optimized spacing for small screens
• Adjusted font sizes and containers

scripte.js

Interactive functionality including:

• Tab switching between booking types
• Search form validation and handling
• Mobile menu optimization
• Touch event handling for mobile devices
• Toast notification system
• Form validation helpers (email, phone)
• Performance monitoring
• Error handling and logging

🚀 Features

Core Features

• Smart Search: Multi-criteria search (specialty, city, area, doctor name)
• Tab Switching: Toggle between clinic visits and teleconsultations
• Responsive Design: Fully optimized for desktop, tablet, and mobile
• Touch Optimization: Enhanced touch targets for mobile usability
• Toast Notifications: User-friendly feedback messages

UI Components

• Custom logo design with accent styling
• Icon-based navigation
• Interactive cards and banners
• Horizontal scrolling sliders
• Call-to-action buttons
• Promotional discount badges

🎨 Design Features

• Color Scheme:

  • Primary Blue: #0070cd
  • Primary Red: #ea2027
  • Light Background: #eef4f8
  • Text Color: #333

• Typography: Tajawal font family (Google Fonts)

• Icons: Font Awesome 6.5.1 + Icons8

• Animations: Smooth transitions and slide effects

🔧 Technologies Used

• HTML5: Semantic markup
• CSS3: Modern layouts with Flexbox and Grid
• JavaScript (ES6): Vanilla JS with modern features
• Google Fonts: Tajawal Arabic font
• Font Awesome: Icon library
• Icons8: Additional icon resources

📱 Responsive Breakpoints

• Desktop: 900px and above
• Tablet: 768px - 900px
• Mobile: 480px - 768px
• Small Mobile: Below 480px

🌐 Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)
• Mobile browsers (iOS Safari, Chrome Mobile)

🛠️ Setup & Installation

1. Clone or download the project files

   git clone [repository-url]
   cd Web3

2. Open the project

   • Simply open index.html in your web browser
   • Or use a local server (recommended):

   # Using Python
   python -m http.server 8000
   
   # Using Node.js http-server
   npx http-server

3. Access the website

   • Direct: Open index.html in browser
   • Local server: Visit http://localhost:8000

📝 Usage

Search for a Doctor

1. Select one of the tabs (Doctor Booking / Telehealth)
2. Fill in search criteria:
   • Select a medical specialty
   • Choose your city
   • Select your area
   • Or search by doctor/hospital name
3. Click the red "Search" button

Interactive Elements

• Tabs: Click to switch between booking and telehealth
• Cards: Clickable service cards with hover effects
• Sliders: Horizontal scroll for offers and specialties
• Buttons: All CTAs are interactive with feedback

🔐 Security Features

• Form validation before submission
• Email and phone format validation
• Error handling with user-friendly messages
• XSS prevention through proper escaping

📊 Performance

• Optimized asset loading
• Debounced resize events
• Performance monitoring built-in
• Load time tracking (check console)

🐛 Error Handling

• Global error catching
• Unhandled promise rejection handling
• Console logging for debugging
• User-friendly error messages via toast notifications

🎯 Future Enhancements

• Backend API integration
• User authentication system
• Real doctor database
• Booking confirmation system
• Payment gateway integration
• Email/SMS notifications
• User dashboard
• Review and rating system
• Multi-language support (Arabic/English)
• Advanced filters and sorting

📞 Contact & Support

For questions or support, please contact:

• Email: [email protected]
• Phone: 16676 (as shown on website)

📄 License

This project is created for educational purposes.

👨‍💻 Development Notes

Key Functions in scripte.js

• initializeApp(): Initializes all components on page load
• setupTabSwitching(): Handles tab click events
• setupSearchForm(): Manages search functionality
• handleSearch(): Validates and processes search queries
• showMessage(): Displays toast notifications
• setupTouchOptimization(): Enhances mobile touch experience
• debounce(): Performance optimization for events
• validateEmail(): Email format validation
• validatePhone(): Phone number validation

CSS Architecture

• Root variables for consistent theming
• Mobile-first approach in mobile-styles.css
• BEM-like naming conventions
• Modular component styling
• Reusable utility classes

🙏 Acknowledgments

• Design inspiration: Vezeeta.com
• Icons: Font Awesome & Icons8
• Fonts: Google Fonts (Tajawal)
• Images: Demo images from various sources

---

Version: 1.0.0
Last Updated: December 31, 2025
Status: Active Development