Contact Support MediCare Plus Pharmacy | QuickCoder

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contact & Support | MediCare Plus Pharmacy</title>
    
    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    
</head>
<body>

<header class="hero">
        
        <div class="particles" id="particles"></div>
        <div class="hero-content">
            <h1>Your Health, Our Priority</h1>
            <p>100% Genuine Medicines, Expert Pharmacist Consultation, and Lightning-Fast Home Delivery. We are here for you 24/7.</p>
        </div>
    </header>

<section class="quick-actions">
        
        <div class="action-card reveal">
            <div class="icon-wrapper"><i class="fas fa-store"></i></div>
            <h3>Visit Our Pharmacy</h3>
            <p>Open 365 days. Walk in for medicines, health supplements, and free basic checkups (BP & Sugar).</p>
            <a href="#location" class="action-btn">Get Directions <i class="fas fa-arrow-right"></i></a>
        </div>
        
        
        <div class="action-card emergency reveal" style="transition-delay: 0.2s;">
            <div class="icon-wrapper"><i class="fas fa-ambulance"></i></div>
            <h3>24/7 Emergency Line</h3>
            <p>Need urgent medicines at midnight? Call our dedicated emergency delivery staff directly.</p>
            <a href="tel:108" class="action-btn"><i class="fas fa-phone-alt"></i> +91 98765-43210</a>
        </div>

<div class="action-card reveal" style="transition-delay: 0.4s;">
            <div class="icon-wrapper" style="color: #25D366; background: rgba(37, 211, 102, 0.1);"><i class="fab fa-whatsapp"></i></div>
            <h3>Order via WhatsApp</h3>
            <p>Simply click a photo of your doctor's prescription and send it to us. We will dispatch immediately.</p>
            <a href="#" class="action-btn" style="color: #25D366;">Chat Now <i class="fas fa-arrow-right"></i></a>
        </div>
    </section>

<section class="services-section reveal">
        <h2 class="section-title">Why Choose MediCare Plus?</h2>
        <p class="section-subtitle">We go beyond just selling medicines. We offer a complete healthcare ecosystem for your family.</p>
        
        <div class="services-grid">
            <div class="service-box">
                <i class="fas fa-shield-virus"></i>
                <h4>Genuine Products</h4>
                <p>Sourced directly from certified pharmaceutical brands.</p>
            </div>
            <div class="service-box">
                <i class="fas fa-shipping-fast"></i>
                <h4>60-Min Delivery</h4>
                <p>Superfast local delivery right to your doorstep.</p>
            </div>
            <div class="service-box">
                <i class="fas fa-vial"></i>
                <h4>Home Lab Tests</h4>
                <p>Book blood tests and full body checkups at home.</p>
            </div>
            <div class="service-box">
                <i class="fas fa-user-md"></i>
                <h4>Free Consultation</h4>
                <p>Talk to our certified pharmacists before buying.</p>
            </div>
        </div>
    </section>

<section class="contact-section" id="location">
        
        
        <div class="info-panel reveal">
            <h2 class="section-title" style="text-align: left;">Get in Touch</h2>
            <p style="color: var(--text-muted); margin-bottom: 40px;">Have a question about a medicine substitute or want to track your order? Reach out to us.</p>
            
            <div class="info-item">
                <i class="fas fa-map-marker-alt"></i>
                <div>
                    <h4>Main Branch</h4>
                    <p>12/A Healthcare Avenue, City Center<br>Opposite Civil Hospital, NY 10001</p>
                </div>
            </div>
            <div class="info-item">
                <i class="fas fa-clock"></i>
                <div>
                    <h4>Operating Hours</h4>
                    <p>Monday - Sunday: 24 Hours Open<br>Home Delivery: 8:00 AM - 11:00 PM</p>
                </div>
            </div>
            <div class="info-item">
                <i class="fas fa-envelope"></i>
                <div>
                    <h4>Email Support</h4>
                    <p>care@medicareplus.com<br>orders@medicareplus.com</p>
                </div>
            </div>

<img src="https://images.unsplash.com/photo-1587854692152-cbe660dbde88?auto=format&fit=crop&w=800&q=80" alt="Pharmacy Inside" class="store-image">
        </div>

<div class="form-panel reveal" style="transition-delay: 0.2s;">
            <h3>Order / Inquiry Form</h3>
            <p style="color: var(--text-muted); margin-bottom: 30px;">Fill the details or upload your prescription below.</p>

<div class="input-group" style="margin-bottom: 20px;">
                    <select id="inquiryType" required>
                        <option value="" disabled selected hidden>What do you need?</option>
                        <option value="order">Order Medicines</option>
                        <option value="substitute">Find Medicine Substitute</option>
                        <option value="lab">Book Lab Test</option>
                        <option value="other">Other Inquiry</option>
                    </select>
                </div>

<div class="file-upload-box">
                    <i class="fas fa-cloud-upload-alt"></i>
                    <h4>Upload Doctor's Prescription</h4>
                    <p style="font-size: 0.85rem; color: var(--text-muted); margin-top: 5px;">(JPG, PNG or PDF formats only)</p>
                    <input type="file" id="prescriptionFile" accept=".jpg,.jpeg,.png,.pdf">
                    <span class="file-name-display" id="fileName">No file chosen yet</span>
                </div>

<button type="submit" class="submit-btn" id="submitBtn">
                    Submit Request <i class="fas fa-paper-plane"></i>
                </button>
            </form>
        </div>
    </section>

<section class="faq-section reveal">
        <h2 class="section-title" style="text-align: center;">Frequently Asked Questions</h2>
        <p class="section-subtitle" style="text-align: center;">Quick answers to common questions about our pharmacy.</p>

<div class="faq-item">
            <div class="faq-header">Do I need a prescription to buy medicines? <i class="fas fa-chevron-down"></i></div>
            <div class="faq-body"><p>Yes, for Schedule H and H1 drugs (like antibiotics, sleeping pills), a valid doctor's prescription is strictly mandatory. OTC (Over-the-counter) products like vitamins, cough syrups, and first-aid can be bought without one.</p></div>
        </div>
        <div class="faq-item">
            <div class="faq-header">How long does home delivery take? <i class="fas fa-chevron-down"></i></div>
            <div class="faq-body"><p>For addresses within a 5km radius of our store, we ensure a 60-minute express delivery. For other areas within the city, it takes 2 to 4 hours maximum.</p></div>
        </div>
        <div class="faq-item">
            <div class="faq-header">Do you sell generic medicines (Substitutes)? <i class="fas fa-chevron-down"></i></div>
            <div class="faq-body"><p>Absolutely. If your prescribed branded medicine is expensive, our certified pharmacists can suggest equally effective, govt-approved generic substitutes to save your money.</p></div>
        </div>
        <div class="faq-item">
            <div class="faq-header">What is your return policy? <i class="fas fa-chevron-down"></i></div>
            <div class="faq-body"><p>We accept returns of unsealed, undamaged strips and bottles within 7 days of purchase. However, refrigerated medicines (like Insulin) and injections are non-returnable due to safety protocols.</p></div>
        </div>
    </section>

</body>
</html>

CSS

/* --- CSS VARIABLES --- */
        :root {
            --primary-blue: #0A66C2; /* Medical Blue */
            --secondary-teal: #0D9488; /* Healthcare Teal */
            --emergency-red: #EF4444; /* Emergency Red */
            --bg-light: #F3F6F8;
            --white: #FFFFFF;
            --text-dark: #1E293B;
            --text-muted: #64748B;
            --border-light: #E2E8F0;
            --shadow-sm: 0 4px 6px rgba(0,0,0,0.05);
            --shadow-lg: 0 20px 40px rgba(10, 102, 194, 0.08);
            --transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
            font-family: 'Plus Jakarta Sans', sans-serif;
            background-color: var(--white);
            color: var(--text-dark);
            overflow-x: hidden;
        }

h1, h2, h3, h4 { font-family: 'Outfit', sans-serif; }

/* --- HERO SECTION --- */
        .hero {
            position: relative;
            height: 70vh;
            background: linear-gradient(135deg, rgba(10, 102, 194, 0.95), rgba(13, 148, 136, 0.85)), 
                        url('https://images.unsplash.com/photo-1586911989462-16012b1d7d0a?auto=format&fit=crop&w=1920&q=80') center/cover;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: var(--white);
            overflow: hidden;
        }

/* Floating Medical Cross/Particles Animation */
        .particles {
            position: absolute;
            width: 100%; height: 100%;
            top: 0; left: 0;
            z-index: 1;
            pointer-events: none;
        }
        .particle {
            position: absolute;
            background: rgba(255,255,255,0.1);
            border-radius: 50%;
            animation: floatUp 10s infinite linear;
        }

.hero-content {
            position: relative;
            z-index: 2;
            padding: 0 20px;
            max-width: 800px;
        }

.hero-content h1 {
            font-size: 4rem;
            font-weight: 700;
            margin-bottom: 20px;
            animation: slideDown 1s ease forwards;
        }
        .hero-content p {
            font-size: 1.2rem;
            color: #E2E8F0;
            margin-bottom: 30px;
            animation: slideUp 1s ease forwards 0.3s;
            opacity: 0;
        }

/* --- SECTION 1: QUICK ACTION CARDS --- */
        .quick-actions {
            max-width: 1300px;
            margin: -80px auto 60px;
            position: relative;
            z-index: 10;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 30px;
            padding: 0 20px;
        }

.action-card {
            background: var(--white);
            padding: 40px 30px;
            border-radius: 20px;
            box-shadow: var(--shadow-lg);
            text-align: center;
            transition: var(--transition);
            border-bottom: 5px solid transparent;
        }

.action-card:hover {
            transform: translateY(-15px);
            border-bottom: 5px solid var(--secondary-teal);
        }

.action-card.emergency { border-bottom-color: var(--emergency-red); }
        .action-card.emergency:hover { border-bottom-color: var(--emergency-red); transform: scale(1.05); }

.icon-wrapper {
            width: 80px; height: 80px;
            margin: 0 auto 20px;
            background: var(--bg-light);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2.2rem;
            color: var(--primary-blue);
            transition: var(--transition);
        }
        
        .action-card.emergency .icon-wrapper {
            background: rgba(239, 68, 68, 0.1);
            color: var(--emergency-red);
            animation: pulseAlert 2s infinite;
        }

.action-card:hover .icon-wrapper {
            background: var(--primary-blue);
            color: var(--white);
        }
        .action-card.emergency:hover .icon-wrapper { background: var(--emergency-red); }

.action-card h3 { font-size: 1.4rem; margin-bottom: 10px; color: var(--text-dark); }
        .action-card p { color: var(--text-muted); font-size: 0.95rem; line-height: 1.6; margin-bottom: 15px;}
        .action-btn { font-weight: 600; color: var(--primary-blue); text-decoration: none; display: inline-flex; align-items: center; gap: 8px;}
        .action-card.emergency .action-btn { color: var(--emergency-red); font-size: 1.2rem;}

/* --- SECTION 2: SERVICES (Making page longer) --- */
        .services-section {
            background-color: var(--bg-light);
            padding: 80px 20px;
            text-align: center;
        }

.section-title {
            font-size: 2.5rem;
            color: var(--text-dark);
            margin-bottom: 15px;
        }
        .section-subtitle {
            color: var(--text-muted);
            max-width: 600px;
            margin: 0 auto 50px;
        }

.services-grid {
            max-width: 1300px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 25px;
        }

.service-box {
            background: var(--white);
            padding: 30px 20px;
            border-radius: 15px;
            box-shadow: var(--shadow-sm);
            transition: var(--transition);
        }
        .service-box:hover { box-shadow: var(--shadow-lg); transform: translateY(-5px); }
        .service-box i { font-size: 2.5rem; color: var(--secondary-teal); margin-bottom: 15px; }
        .service-box h4 { font-size: 1.1rem; margin-bottom: 10px; }
        .service-box p { font-size: 0.9rem; color: var(--text-muted); }

/* --- SECTION 3: MAIN CONTACT & PRESCRIPTION FORM --- */
        .contact-section {
            max-width: 1300px;
            margin: 100px auto;
            padding: 0 20px;
            display: grid;
            grid-template-columns: 1fr 1.2fr;
            gap: 60px;
        }

/* Left: Info Map */
        .info-panel { padding-right: 20px; }
        .info-item {
            display: flex;
            align-items: flex-start;
            gap: 20px;
            margin-bottom: 35px;
        }
        .info-item i {
            font-size: 1.5rem;
            color: var(--white);
            background: var(--primary-blue);
            width: 50px; height: 50px;
            display: flex; justify-content: center; align-items: center;
            border-radius: 12px;
            flex-shrink: 0;
        }
        .info-item h4 { font-size: 1.2rem; margin-bottom: 5px; }
        .info-item p { color: var(--text-muted); font-size: 0.95rem; }

/* Store Image / Map placeholder */
        .store-image {
            width: 100%;
            height: 250px;
            border-radius: 15px;
            object-fit: cover;
            box-shadow: var(--shadow-lg);
            margin-top: 30px;
            transition: var(--transition);
        }
        .store-image:hover { transform: scale(1.02); }

/* Right: Advanced Form */
        .form-panel {
            background: var(--white);
            padding: 50px;
            border-radius: 20px;
            box-shadow: 0 10px 40px rgba(0,0,0,0.06);
            border: 1px solid var(--border-light);
        }

.form-panel h3 { font-size: 2rem; margin-bottom: 10px; color: var(--primary-blue); }
        .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
        
        .input-group { position: relative; }
        .input-group input, .input-group select, .input-group textarea {
            width: 100%;
            padding: 16px 20px;
            background: var(--bg-light);
            border: 2px solid transparent;
            border-radius: 10px;
            font-family: 'Plus Jakarta Sans', sans-serif;
            font-size: 1rem;
            color: var(--text-dark);
            outline: none;
            transition: var(--transition);
        }
        .input-group textarea { height: 100px; resize: none; }

.input-group input:focus, .input-group select:focus, .input-group textarea:focus {
            border-color: var(--primary-blue);
            background: var(--white);
        }

/* File Upload UI (Advanced) */
        .file-upload-box {
            border: 2px dashed var(--secondary-teal);
            background: rgba(13, 148, 136, 0.05);
            padding: 30px 20px;
            border-radius: 10px;
            text-align: center;
            cursor: pointer;
            transition: var(--transition);
            margin-bottom: 25px;
            position: relative;
        }
        .file-upload-box:hover { background: rgba(13, 148, 136, 0.1); }
        .file-upload-box i { font-size: 2rem; color: var(--secondary-teal); margin-bottom: 10px; }
        .file-upload-box input[type="file"] {
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            opacity: 0; cursor: pointer;
        }
        .file-name-display { display: block; margin-top: 10px; font-size: 0.85rem; color: var(--primary-blue); font-weight: 600;}

.submit-btn {
            width: 100%;
            background: var(--primary-blue);
            color: var(--white);
            border: none;
            padding: 18px;
            font-size: 1.1rem;
            font-weight: 600;
            border-radius: 10px;
            cursor: pointer;
            transition: var(--transition);
            display: flex; justify-content: center; align-items: center; gap: 10px;
        }
        .submit-btn:hover { background: var(--secondary-teal); box-shadow: 0 10px 20px rgba(13, 148, 136, 0.3); transform: translateY(-3px); }

/* --- SECTION 4: FAQ (Adds length and value) --- */
        .faq-section { max-width: 900px; margin: 0 auto 100px; padding: 0 20px; }
        
        .faq-item {
            background: var(--white);
            border: 1px solid var(--border-light);
            border-radius: 10px;
            margin-bottom: 15px;
            overflow: hidden;
            transition: var(--transition);
        }
        .faq-header {
            padding: 20px 25px;
            font-weight: 600;
            font-size: 1.1rem;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: var(--text-dark);
        }
        .faq-header i { transition: transform 0.3s; color: var(--primary-blue); }
        .faq-item.active { border-color: var(--primary-blue); box-shadow: var(--shadow-sm); }
        .faq-item.active .faq-header i { transform: rotate(180deg); }
        
        .faq-body {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.4s ease;
        }
        .faq-body p { padding: 0 25px 25px; color: var(--text-muted); line-height: 1.6; }

/* --- ANIMATIONS --- */
        @keyframes floatUp { 0% { transform: translateY(100vh) scale(0); opacity: 0; } 50% { opacity: 1; } 100% { transform: translateY(-10vh) scale(1); opacity: 0; } }
        @keyframes slideDown { from { opacity: 0; transform: translateY(-50px); } to { opacity: 1; transform: translateY(0); } }
        @keyframes slideUp { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: translateY(0); } }
        @keyframes pulseAlert { 0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); } 70% { box-shadow: 0 0 0 20px rgba(239, 68, 68, 0); } 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); } }

.reveal { opacity: 0; transform: translateY(60px); transition: 0.8s cubic-bezier(0.4, 0, 0.2, 1); }
        .reveal.active { opacity: 1; transform: translateY(0); }

/* --- RESPONSIVE --- */
        @media (max-width: 1024px) {
            .quick-actions, .services-grid { grid-template-columns: repeat(2, 1fr); }
            .contact-section { grid-template-columns: 1fr; }
            .hero h1 { font-size: 3rem; }
        }
        @media (max-width: 768px) {
            .quick-actions, .services-grid { grid-template-columns: 1fr; }
            .form-row { grid-template-columns: 1fr; }
            .hero { height: 60vh; }
            .hero h1 { font-size: 2.5rem; }
            .form-panel { padding: 30px 20px; }
        }

JavaScript

// 1. Generate Floating Particles in Hero Background
        const particlesContainer = document.getElementById('particles');
        for(let i = 0; i < 20; i++) {
            let particle = document.createElement('div');
            particle.classList.add('particle');
            // Randomize size, position, and animation duration
            let size = Math.random() * 20 + 5; // 5px to 25px
            particle.style.width = size + 'px';
            particle.style.height = size + 'px';
            particle.style.left = Math.random() * 100 + 'vw';
            particle.style.animationDuration = (Math.random() * 10 + 5) + 's'; // 5s to 15s
            particle.style.animationDelay = Math.random() * 5 + 's';
            particlesContainer.appendChild(particle);
        }

// 2. Scroll Reveal Animation
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if(entry.isIntersecting) {
                    entry.target.classList.add('active');
                }
            });
        }, { threshold: 0.15 });

document.querySelectorAll('.reveal').forEach(el => observer.observe(el));

// 3. File Upload Display Name Logic
        const fileInput = document.getElementById('prescriptionFile');
        const fileNameDisplay = document.getElementById('fileName');

fileInput.addEventListener('change', function() {
            if(this.files && this.files.length > 0) {
                fileNameDisplay.innerHTML = `<i class="fas fa-check-circle"></i> File attached: ${this.files[0].name}`;
                fileNameDisplay.style.color = 'var(--secondary-teal)';
            } else {
                fileNameDisplay.innerHTML = "No file chosen yet";
                fileNameDisplay.style.color = "var(--primary-blue)";
            }
        });

// 4. FAQ Accordion Logic
        document.querySelectorAll('.faq-header').forEach(header => {
            header.addEventListener('click', () => {
                const item = header.parentElement;
                const body = item.querySelector('.faq-body');

// Close all others
                document.querySelectorAll('.faq-item').forEach(other => {
                    if(other !== item) {
                        other.classList.remove('active');
                        other.querySelector('.faq-body').style.maxHeight = null;
                    }
                });

// Toggle current
                if(item.classList.contains('active')) {
                    item.classList.remove('active');
                    body.style.maxHeight = null;
                } else {
                    item.classList.add('active');
                    body.style.maxHeight = body.scrollHeight + "px";
                }
            });
        });

// 5. Form Submit Animation
        document.getElementById('medicalForm').addEventListener('submit', function(e) {
            e.preventDefault();
            const btn = document.getElementById('submitBtn');
            const ogText = btn.innerHTML;

// Processing state
            btn.innerHTML = 'Securely Sending... <i class="fas fa-spinner fa-spin"></i>';
            btn.style.opacity = '0.8';
            btn.style.pointerEvents = 'none';

// Simulate API
            setTimeout(() => {
                btn.innerHTML = 'Request Received! <i class="fas fa-check-circle"></i>';
                btn.style.background = 'var(--secondary-teal)'; // Green success
                btn.style.opacity = '1';

this.reset();
                fileNameDisplay.innerHTML = "No file chosen yet";
                fileNameDisplay.style.color = "var(--primary-blue)";

setTimeout(() => {
                    btn.innerHTML = ogText;
                    btn.style.background = '';
                    btn.style.pointerEvents = 'auto';
                }, 4000);
            }, 2000);
        });

Contact Support MediCare Plus Pharmacy Preview

Download Options