<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Email Templates Preview - Al Hammadi Hospital</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #005696 0%, #007bbd 100%);
            min-height: 100vh;
            padding: 40px 20px;
        }
        
        .preview-container {
            max-width: 1200px;
            margin: 0 auto;
        }
        
        .header {
            text-align: center;
            color: #ffffff;
            margin-bottom: 40px;
        }
        
        .header h1 {
            font-size: 36px;
            margin-bottom: 10px;
            text-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }
        
        .header p {
            font-size: 18px;
            opacity: 0.95;
        }
        
        .templates-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 30px;
            margin-bottom: 40px;
        }
        
        .template-card {
            background: #ffffff;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 10px 40px rgba(0,0,0,0.2);
            transition: transform 0.3s, box-shadow 0.3s;
        }
        
        .template-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 50px rgba(0,0,0,0.3);
        }
        
        .template-preview {
            height: 400px;
            overflow: hidden;
            background: #f8fafc;
            position: relative;
        }
        
        .template-preview iframe {
            width: 100%;
            height: 100%;
            border: none;
        }
        
        .template-info {
            padding: 25px;
        }
        
        .template-badge {
            display: inline-block;
            padding: 6px 12px;
            background: linear-gradient(135deg, #005696 0%, #007bbd 100%);
            color: #ffffff;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
            margin-bottom: 15px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        
        .template-title {
            font-size: 22px;
            font-weight: 700;
            color: #005696;
            margin-bottom: 10px;
        }
        
        .template-description {
            color: #64748b;
            line-height: 1.6;
            margin-bottom: 20px;
        }
        
        .template-features {
            list-style: none;
            margin-bottom: 20px;
        }
        
        .template-features li {
            padding: 8px 0;
            color: #1e293b;
            font-size: 14px;
            display: flex;
            align-items: center;
        }
        
        .template-features li:before {
            content: '✓';
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 20px;
            height: 20px;
            background: #eef6fb;
            color: #005696;
            border-radius: 50%;
            margin-right: 10px;
            font-size: 12px;
            font-weight: bold;
        }
        
        .template-actions {
            display: flex;
            gap: 10px;
        }
        
        .btn {
            flex: 1;
            padding: 12px 20px;
            border-radius: 8px;
            text-decoration: none;
            text-align: center;
            font-weight: 600;
            font-size: 14px;
            transition: all 0.3s;
            display: inline-block;
        }
        
        .hh-btn-primary {
            background: linear-gradient(135deg, #005696 0%, #007bbd 100%);
            color: #ffffff;
        }
        
        .hh-btn-primary:hover {
            box-shadow: 0 4px 12px rgba(0, 86, 150, 0.4);
        }
        
        .hh-btn-secondary {
            background: #eef6fb;
            color: #005696;
        }
        
        .hh-btn-secondary:hover {
            background: #dbe7f3;
        }
        
        .color-palette {
            background: #ffffff;
            border-radius: 16px;
            padding: 30px;
            margin-top: 40px;
            box-shadow: 0 10px 40px rgba(0,0,0,0.2);
        }
        
        .color-palette h2 {
            color: #005696;
            margin-bottom: 25px;
            font-size: 24px;
        }
        
        .colors-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 20px;
        }
        
        .color-swatch {
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }
        
        .color-preview {
            height: 100px;
            width: 100%;
        }
        
        .color-info {
            padding: 15px;
            background: #ffffff;
        }
        
        .color-name {
            font-weight: 600;
            color: #1e293b;
            margin-bottom: 5px;
            font-size: 14px;
        }
        
        .color-hex {
            font-family: 'Courier New', monospace;
            color: #64748b;
            font-size: 13px;
        }
        
        .footer {
            text-align: center;
            color: #ffffff;
            margin-top: 40px;
            padding-top: 30px;
            border-top: 1px solid rgba(255,255,255,0.2);
        }
        
        @media (max-width: 768px) {
            .templates-grid {
                grid-template-columns: 1fr;
            }
            
            .header h1 {
                font-size: 28px;
            }
        }
    </style>
</head>
<body>
    <div class="preview-container">
        <!-- Header -->
        <div class="header">
            <h1>🏥 Al Hammadi Hospital Email Templates</h1>
            <p>Professional email templates with hospital branding</p>
        </div>
        
        <!-- Templates Grid -->
        <div class="templates-grid">
            
            <!-- Template 1: Base Template -->
            <div class="template-card">
                <div class="template-preview">
                    <iframe srcdoc='
<!DOCTYPE html>
<html>
<head>
    <style>
        body { font-family: sans-serif; margin: 0; padding: 20px; background: #f8fafc; }
        .container { max-width: 600px; margin: 0 auto; background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
        .header { background: linear-gradient(135deg, #005696 0%, #007bbd 100%); padding: 30px; text-align: center; }
        .logo { color: white; font-size: 24px; font-weight: bold; }
        .content { padding: 30px; }
        h1 { color: #005696; margin: 0 0 10px 0; font-size: 24px; }
        p { color: #64748b; line-height: 1.6; }
        .btn { display: inline-block; padding: 12px 30px; background: linear-gradient(135deg, #005696 0%, #007bbd 100%); color: white; text-decoration: none; border-radius: 8px; margin-top: 20px; }
        .info-box { background: #eef6fb; padding: 15px; border-left: 4px solid #005696; border-radius: 8px; margin-top: 20px; }
        .footer { background: #005696; color: white; padding: 20px; text-align: center; font-size: 12px; }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <div class="logo">Al Hammadi Hospital</div>
        </div>
        <div class="content">
            <h1>Base Email Template</h1>
            <p>This is the foundation template with all common components.</p>
            <a href="#" class="btn">Call to Action</a>
            <div class="info-box">
                <strong>ℹ️ Information:</strong> This is an info box component.
            </div>
        </div>
        <div class="footer">© 2026 Al Hammadi Hospital</div>
    </div>
</body>
</html>'></iframe>
                </div>
                <div class="template-info">
                    <span class="template-badge">Foundation</span>
                    <h3 class="template-title">Base Template</h3>
                    <p class="template-description">
                        The foundation template with responsive design, header, content areas, and footer.
                    </p>
                    <ul class="template-features">
                        <li>Responsive layout</li>
                        <li>Brand gradient header</li>
                        <li>Multiple content blocks</li>
                        <li>Dark mode support</li>
                    </ul>
                    <div class="template-actions">
                        <a href="base_email_template.html" class="btn btn-primary">View Code</a>
                    </div>
                </div>
            </div>
            
            <!-- Template 2: Survey Invitation -->
            <div class="template-card">
                <div class="template-preview">
                    <iframe srcdoc='
<!DOCTYPE html>
<html>
<head>
    <style>
        body { font-family: sans-serif; margin: 0; padding: 20px; background: #f8fafc; }
        .container { max-width: 600px; margin: 0 auto; background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
        .header { background: linear-gradient(135deg, #005696 0%, #007bbd 100%); padding: 30px; text-align: center; }
        .logo { color: white; font-size: 24px; font-weight: bold; }
        .content { padding: 30px; }
        h1 { color: #005696; margin: 0 0 10px 0; font-size: 24px; }
        p { color: #64748b; line-height: 1.6; margin: 15px 0; }
        .benefit { display: flex; align-items: center; margin: 12px 0; }
        .icon { width: 32px; height: 32px; background: #eef6fb; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 12px; font-size: 16px; }
        .btn { display: inline-block; padding: 14px 32px; background: linear-gradient(135deg, #005696 0%, #007bbd 100%); color: white; text-decoration: none; border-radius: 8px; margin-top: 20px; font-weight: 600; }
        .info-box { background: #eef6fb; padding: 15px; border-left: 4px solid #005696; border-radius: 8px; margin-top: 20px; font-size: 14px; }
        .footer { background: #005696; color: white; padding: 20px; text-align: center; font-size: 12px; }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <div class="logo">Al Hammadi Hospital</div>
        </div>
        <div class="content">
            <h1>We Value Your Feedback</h1>
            <p>Dear Valued Patient,</p>
            <p>Help us improve our services by sharing your experience.</p>
            <div class="benefit">
                <div class="icon">✓</div>
                <span>Improve Patient Care</span>
            </div>
            <div class="benefit">
                <div class="icon">★</div>
                <span>Better Experience</span>
            </div>
            <div class="benefit">
                <div class="icon">❤</div>
                <span>Quality Standards</span>
            </div>
            <a href="#" class="btn">Start Survey</a>
            <div class="info-box">
                <strong>ℹ️ Survey Info:</strong> Duration: 3-5 minutes<br>
                <strong>Confidentiality:</strong> Completely confidential
            </div>
        </div>
        <div class="footer">© 2026 Al Hammadi Hospital</div>
    </div>
</body>
</html>'></iframe>
                </div>
                <div class="template-info">
                    <span class="template-badge">Patient Communication</span>
                    <h3 class="template-title">Survey Invitation</h3>
                    <p class="template-description">
                        Engaging survey invitation with benefits and clear call-to-action.
                    </p>
                    <ul class="template-features">
                        <li>Personalized greeting</li>
                        <li>Benefits highlights</li>
                        <li>Survey details box</li>
                        <li>Mobile-optimized</li>
                    </ul>
                    <div class="template-actions">
                        <a href="survey_invitation.html" class="btn btn-primary">View Code</a>
                    </div>
                </div>
            </div>
            
            <!-- Template 3: Appointment Confirmation -->
            <div class="template-card">
                <div class="template-preview">
                    <iframe srcdoc='
<!DOCTYPE html>
<html>
<head>
    <style>
        body { font-family: sans-serif; margin: 0; padding: 20px; background: #f8fafc; }
        .container { max-width: 600px; margin: 0 auto; background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
        .header { background: linear-gradient(135deg, #005696 0%, #007bbd 100%); padding: 30px; text-align: center; }
        .logo { color: white; font-size: 24px; font-weight: bold; }
        .content { padding: 30px; }
        h1 { color: #005696; margin: 0 0 10px 0; font-size: 24px; }
        p { color: #64748b; line-height: 1.6; margin: 15px 0; }
        .details-card { background: #eef6fb; padding: 20px; border-radius: 8px; border: 1px solid #cbd5e1; margin: 20px 0; }
        .detail-row { display: flex; margin-bottom: 10px; font-size: 14px; }
        .detail-label { width: 100px; color: #64748b; font-weight: 500; }
        .detail-value { color: #1e293b; font-weight: 600; }
        .btn { display: inline-block; padding: 14px 32px; background: linear-gradient(135deg, #005696 0%, #007bbd 100%); color: white; text-decoration: none; border-radius: 8px; margin-top: 20px; font-weight: 600; }
        .footer { background: #005696; color: white; padding: 20px; text-align: center; font-size: 12px; }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <div class="logo">Al Hammadi Hospital</div>
        </div>
        <div class="content">
            <h1>Appointment Confirmed</h1>
            <p>Dear Patient,</p>
            <p>Your appointment has been confirmed.</p>
            <div class="details-card">
                <div class="detail-row">
                    <span class="detail-label">Date:</span>
                    <span class="detail-value">March 15, 2026</span>
                </div>
                <div class="detail-row">
                    <span class="detail-label">Time:</span>
                    <span class="detail-value">10:00 AM</span>
                </div>
                <div class="detail-row">
                    <span class="detail-label">Department:</span>
                    <span class="detail-value">Cardiology</span>
                </div>
                <div class="detail-row">
                    <span class="detail-label">Doctor:</span>
                    <span class="detail-value">Dr. Ahmed Smith</span>
                </div>
            </div>
            <a href="#" class="btn">Reschedule or Cancel</a>
        </div>
        <div class="footer">© 2026 Al Hammadi Hospital</div>
    </div>
</body>
</html>'></iframe>
                </div>
                <div class="template-info">
                    <span class="template-badge">Appointment Management</span>
                    <h3 class="template-title">Appointment Confirmation</h3>
                    <p class="template-description">
                        Professional appointment confirmation with detailed information card.
                    </p>
                    <ul class="template-features">
                        <li>Appointment details card</li>
                        <li>Important reminders</li>
                        <li>Reschedule CTA</li>
                        <li>Contact information</li>
                    </ul>
                    <div class="template-actions">
                        <a href="appointment_confirmation.html" class="btn btn-primary">View Code</a>
                    </div>
                </div>
            </div>
            
            <!-- Template 4: Survey Results -->
            <div class="template-card">
                <div class="template-preview">
                    <iframe srcdoc='
<!DOCTYPE html>
<html>
<head>
    <style>
        body { font-family: sans-serif; margin: 0; padding: 20px; background: #f8fafc; }
        .container { max-width: 600px; margin: 0 auto; background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
        .header { background: linear-gradient(135deg, #005696 0%, #007bbd 100%); padding: 30px; text-align: center; }
        .logo { color: white; font-size: 24px; font-weight: bold; }
        .content { padding: 30px; }
        h1 { color: #005696; margin: 0 0 10px 0; font-size: 24px; }
        p { color: #64748b; line-height: 1.6; margin: 15px 0; }
        .stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 20px 0; }
        .stat-card { background: #eef6fb; padding: 15px; border-radius: 8px; text-align: center; }
        .stat-value { font-size: 24px; font-weight: 700; color: #005696; }
        .stat-label { font-size: 11px; color: #64748b; text-transform: uppercase; margin-top: 5px; }
        .btn { display: inline-block; padding: 14px 32px; background: linear-gradient(135deg, #005696 0%, #007bbd 100%); color: white; text-decoration: none; border-radius: 8px; margin-top: 20px; font-weight: 600; }
        .alert { background: #eef6fb; padding: 15px; border-left: 4px solid #005696; border-radius: 8px; margin-top: 20px; font-size: 14px; }
        .footer { background: #005696; color: white; padding: 20px; text-align: center; font-size: 12px; }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <div class="logo">Al Hammadi Hospital</div>
        </div>
        <div class="content">
            <h1>Survey Results Ready</h1>
            <p>Your department results are available.</p>
            <div class="stats-grid">
                <div class="stat-card">
                    <div class="stat-value">4.5/5</div>
                    <div class="stat-label">Overall Score</div>
                </div>
                <div class="stat-card">
                    <div class="stat-value">156</div>
                    <div class="stat-label">Responses</div>
                </div>
                <div class="stat-card">
                    <div class="stat-value" style="color:#005696;">78%</div>
                    <div class="stat-label">Response Rate</div>
                </div>
            </div>
            <a href="#" class="btn">View Full Report</a>
            <div class="alert">
                <strong>⚠️ Action Required:</strong> Please review and prepare action plan by end of month.
            </div>
        </div>
        <div class="footer">© 2026 Al Hammadi Hospital</div>
    </div>
</body>
</html>'></iframe>
                </div>
                <div class="template-info">
                    <span class="template-badge">Analytics & Reporting</span>
                    <h3 class="template-title">Survey Results Notification</h3>
                    <p class="template-description">
                        Department survey results with statistics and actionable insights.
                    </p>
                    <ul class="template-features">
                        <li>Statistics dashboard</li>
                        <li>Key highlights</li>
                        <li>Action items alert</li>
                        <li>Report access link</li>
                    </ul>
                    <div class="template-actions">
                        <a href="survey_results_notification.html" class="btn btn-primary">View Code</a>
                    </div>
                </div>
            </div>
            
        </div>
        
        <!-- Color Palette -->
        <div class="color-palette">
            <h2>🎨 Brand Color Palette</h2>
            <div class="colors-grid">
                <div class="color-swatch">
                    <div class="color-preview" style="background: #005696;"></div>
                    <div class="color-info">
                        <div class="color-name">Primary Navy</div>
                        <div class="color-hex">#005696</div>
                    </div>
                </div>
                <div class="color-swatch">
                    <div class="color-preview" style="background: #007bbd;"></div>
                    <div class="color-info">
                        <div class="color-name">Accent Blue</div>
                        <div class="color-hex">#007bbd</div>
                    </div>
                </div>
                <div class="color-swatch">
                    <div class="color-preview" style="background: #eef6fb;"></div>
                    <div class="color-info">
                        <div class="color-name">Light Background</div>
                        <div class="color-hex">#eef6fb</div>
                    </div>
                </div>
                <div class="color-swatch">
                    <div class="color-preview" style="background: #64748b;"></div>
                    <div class="color-info">
                        <div class="color-name">Slate Gray</div>
                        <div class="color-hex">#64748b</div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Footer -->
        <div class="footer">
            <p><strong>Al Hammadi Hospital Email Templates</strong></p>
            <p>Patient Experience Management Department</p>
            <p style="margin-top: 15px; opacity: 0.8; font-size: 14px;">
                Created with ❤️ for better patient communication
            </p>
        </div>
    </div>
</body>
</html>
