Bot

[TanveerHussain6]

[TanveerHussain6]

<title>Hospital App</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; }

    body {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        min-height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
    }

    .container {
        width: 100%;
        max-width: 500px;
        padding: 20px;
    }

    .page {
        display: none;
        animation: fadeIn 0.5s ease-in;
    }

    .page.active {
        display: block;
    }

    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(20px); }
        to { opacity: 1; transform: translateY(0); }
    }

    /* Page 1 Styles */
    .page1 {
        text-align: center;
    }

    .header-text {
        color: white;
        font-size: 28px;
        margin-bottom: 30px;
        text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        font-weight: bold;
    }

    .dp-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        margin-bottom: 40px;
    }

    .dp-card {
        background: white;
        border-radius: 20px;
        padding: 20px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.2);
        transition: transform 0.3s, box-shadow 0.3s;
        cursor: pointer;
    }

    .dp-card:hover {
        transform: translateY(-10px) scale(1.05);
        box-shadow: 0 15px 40px rgba(0,0,0,0.3);
    }

    .dp-icon {
        font-size: 60px;
        margin-bottom: 10px;
    }

    .dp-title {
        color: #333;
        font-size: 16px;
        font-weight: 600;
    }

    .aage-btn {
        background: linear-gradient(45deg, #f093fb 0%, #f5576c 100%);
        color: white;
        border: none;
        padding: 20px 60px;
        font-size: 24px;
        border-radius: 50px;
        cursor: pointer;
        box-shadow: 0 10px 30px rgba(245, 87, 108, 0.4);
        transition: all 0.3s;
        font-weight: bold;
        text-transform: uppercase;
        letter-spacing: 2px;
    }

    .aage-btn:hover {
        transform: scale(1.1);
        box-shadow: 0 15px 40px rgba(245, 87, 108, 0.6);
    }

    .aage-btn:active {
        transform: scale(0.95);
    }

    /* Page 2 Styles */
    .page2 {
        text-align: center;
    }

    .back-btn {
        position: absolute;
        top: 20px;
        left: 20px;
        background: rgba(255,255,255,0.2);
        color: white;
        border: none;
        padding: 10px 20px;
        border-radius: 30px;
        cursor: pointer;
        font-size: 16px;
        backdrop-filter: blur(10px);
        transition: all 0.3s;
    }

    .back-btn:hover {
        background: rgba(255,255,255,0.3);
        transform: translateX(-5px);
    }

    .page2-title {
        color: white;
        font-size: 32px;
        margin-bottom: 40px;
        margin-top: 60px;
        text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
    }

    .button-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 25px;
    }

    .action-btn {
        background: white;
        border: none;
        padding: 30px 20px;
        border-radius: 20px;
        cursor: pointer;
        box-shadow: 0 10px 30px rgba(0,0,0,0.2);
        transition: all 0.3s;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }

    .action-btn:hover {
        transform: translateY(-5px) scale(1.05);
        box-shadow: 0 15px 40px rgba(0,0,0,0.3);
    }

    .action-btn.hospital {
        background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
        color: white;
    }

    .action-btn.other {
        background: linear-gradient(135deg, #30cfd0 0%, #330867 100%);
        color: white;
    }

    .btn-icon {
        font-size: 50px;
    }

    .btn-text {
        font-size: 20px;
        font-weight: bold;
    }

    .pulse {
        animation: pulse 2s infinite;
    }

    @keyframes pulse {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.05); }
    }

    /* Floating particles */
    .particles {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        overflow: hidden;
        z-index: -1;
    }

    .particle {
        position: absolute;
        width: 10px;
        height: 10px;
        background: rgba(255,255,255,0.1);
        border-radius: 50%;
        animation: float 15s infinite;
    }

    @keyframes float {
        0%, 100% { transform: translateY(100vh) rotate(0deg); opacity: 0; }
        10% { opacity: 1; }
        90% { opacity: 1; }
        100% { transform: translateY(-100vh) rotate(720deg); opacity: 0; }
    }
</style>

<!-- Floating Background Particles -->
<div class="particles" id="particles"></div>

<div class="container">
    <!-- Page 1: 4 DPs and Aage Button -->
    <div class="page page1 active" id="page1">
        <h1 class="header-text">🏥 Welcome to Health Care</h1>
        
        <div class="dp-grid">
            <div class="dp-card">
                <div class="dp-icon">👨‍⚕️</div>
                <div class="dp-title">Doctor</div>
            </div>
            <div class="dp-card">
                <div class="dp-icon">🚑</div>
                <div class="dp-title">Emergency</div>
            </div>
            <div class="dp-card">
                <div class="dp-icon">💊</div>
                <div class="dp-title">Medicine</div>
            </div>
            <div class="dp-card">
                <div class="dp-icon">🩺</div>
                <div class="dp-title">Checkup</div>
            </div>
        </div>

        <button class="aage-btn pulse" onclick="goToPage2()">
            आगे ➡️
        </button>
    </div>

    <!-- Page 2: Hospital Buttons and Others -->
    <div class="page page2" id="page2">
        <button class="back-btn" onclick="goToPage1()">⬅️ वापस</button>
        
        <h2 class="page2-title">Select Option</h2>
        
        <div class="button-grid">
            <button class="action-btn hospital" onclick="alert('Hospital 1 Selected')">
                <span class="btn-icon">🏥</span>
                <span class="btn-text">Hospital 1</span>
            </button>
            <button class="action-btn hospital" onclick="alert('Hospital 2 Selected')">
                <span class="btn-icon">🏨</span>
                <span class="btn-text">Hospital 2</span>
            </button>
            <button class="action-btn other" onclick="alert('Clinic Selected')">
                <span class="btn-icon">🩺</span>
                <span class="btn-text">Clinic</span>
            </button>
            <button class="action-btn other" onclick="alert('Pharmacy Selected')">
                <span class="btn-icon">💉</span>
                <span class="btn-text">Pharmacy</span>
            </button>
        </div>
    </div>
</div>

<script>
    // Page Navigation Functions
    function goToPage2() {
        document.getElementById('page1').classList.remove('active');
        document.getElementById('page2').classList.add('active');
    }

    function goToPage1() {
        document.getElementById('page2').classList.remove('active');
        document.getElementById('page1').classList.add('active');
    }

    // Create floating particles
    function createParticles() {
        const container = document.getElementById('particles');
        for (let i = 0; i < 20; i++) {
            const particle = document.createElement('div');
            particle.className = 'particle';
            particle.style.left = Math.random() * 100 + '%';
            particle.style.animationDelay = Math.random() * 15 + 's';
            particle.style.animationDuration = (15 + Math.random() * 10) + 's';
            container.appendChild(particle);
        }
    }

    // Initialize
    createParticles();

    // Add click effects to DP cards
    document.querySelectorAll('.dp-card').forEach(card => {
        card.addEventListener('click', function() {
            this.style.transform = 'scale(0.95)';
            setTimeout(() => {
                this.style.transform = '';
            }, 200);
        });
    });
</script>