مكونات واجهة المستخدم متوسط
Invoice / Receipt Email
Invoice email with line-item table, subtotal/tax/total breakdown, and payment details. Email-safe table layout.
فتح في المختبر
MCP
html css
الأهداف: JS HTML
الكود
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Invoice #INV-2026-0042</title>
<style>
body { margin: 0; padding: 0; background: #f4f5f7; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
.preview-wrap { padding: 32px 16px; background: #f4f5f7; }
.email-wrap { max-width: 600px; margin: 0 auto; background: #ffffff; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
</style>
</head>
<body>
<div class="preview-wrap">
<!-- EMAIL START -->
<table class="email-wrap" role="presentation" cellpadding="0" cellspacing="0" width="100%">
<!-- Header -->
<tr>
<td style="padding:28px 40px;border-bottom:1px solid #e5e7eb;">
<table role="presentation" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<span style="font-size:22px;font-weight:800;color:#111827;">Acme</span>
</td>
<td style="text-align:right;">
<span style="display:inline-block;background:#dcfce7;color:#15803d;font-size:12px;font-weight:700;padding:4px 12px;border-radius:20px;text-transform:uppercase;letter-spacing:0.05em;">Paid</span>
</td>
</tr>
</table>
</td>
</tr>
<!-- Invoice meta -->
<tr>
<td style="padding:28px 40px 20px;">
<h1 style="margin:0 0 4px;font-size:22px;font-weight:800;color:#111827;">Invoice #INV-2026-0042</h1>
<p style="margin:0;font-size:14px;color:#6b7280;">Issued: March 6, 2026 · Due: March 6, 2026</p>
</td>
</tr>
<!-- Billing info -->
<tr>
<td style="padding:0 40px 24px;">
<table role="presentation" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="width:50%;vertical-align:top;">
<p style="margin:0 0 6px;font-size:11px;font-weight:700;color:#9ca3af;text-transform:uppercase;letter-spacing:0.06em;">Bill To</p>
<p style="margin:0;font-size:14px;font-weight:700;color:#111827;">Jane Smith</p>
<p style="margin:0;font-size:14px;color:#6b7280;">[email protected]</p>
<p style="margin:0;font-size:14px;color:#6b7280;">123 Main St, New York, NY</p>
</td>
<td style="width:50%;vertical-align:top;text-align:right;">
<p style="margin:0 0 6px;font-size:11px;font-weight:700;color:#9ca3af;text-transform:uppercase;letter-spacing:0.06em;">From</p>
<p style="margin:0;font-size:14px;font-weight:700;color:#111827;">Acme, Inc.</p>
<p style="margin:0;font-size:14px;color:#6b7280;">[email protected]</p>
<p style="margin:0;font-size:14px;color:#6b7280;">456 Tech Ave, SF, CA</p>
</td>
</tr>
</table>
</td>
</tr>
<!-- Line items -->
<tr>
<td style="padding:0 40px 24px;">
<table role="presentation" cellpadding="0" cellspacing="0" width="100%" style="border:1px solid #e5e7eb;border-radius:8px;overflow:hidden;">
<!-- Table head -->
<tr style="background:#f9fafb;">
<td style="padding:10px 16px;font-size:11px;font-weight:700;color:#6b7280;text-transform:uppercase;letter-spacing:0.05em;">Description</td>
<td style="padding:10px 16px;font-size:11px;font-weight:700;color:#6b7280;text-transform:uppercase;letter-spacing:0.05em;text-align:center;">Qty</td>
<td style="padding:10px 16px;font-size:11px;font-weight:700;color:#6b7280;text-transform:uppercase;letter-spacing:0.05em;text-align:right;">Amount</td>
</tr>
<!-- Row 1 -->
<tr style="border-top:1px solid #e5e7eb;">
<td style="padding:14px 16px;">
<p style="margin:0;font-size:14px;font-weight:600;color:#111827;">Pro Plan — Monthly</p>
<p style="margin:2px 0 0;font-size:13px;color:#6b7280;">Feb 6, 2026 – Mar 6, 2026</p>
</td>
<td style="padding:14px 16px;font-size:14px;color:#374151;text-align:center;">1</td>
<td style="padding:14px 16px;font-size:14px;font-weight:600;color:#111827;text-align:right;">$49.00</td>
</tr>
<!-- Row 2 -->
<tr style="border-top:1px solid #e5e7eb;">
<td style="padding:14px 16px;">
<p style="margin:0;font-size:14px;font-weight:600;color:#111827;">Extra Seats (×3)</p>
<p style="margin:2px 0 0;font-size:13px;color:#6b7280;">$5.00 per seat</p>
</td>
<td style="padding:14px 16px;font-size:14px;color:#374151;text-align:center;">3</td>
<td style="padding:14px 16px;font-size:14px;font-weight:600;color:#111827;text-align:right;">$15.00</td>
</tr>
<!-- Subtotal -->
<tr style="border-top:1px solid #e5e7eb;background:#f9fafb;">
<td colspan="2" style="padding:10px 16px;font-size:13px;color:#6b7280;text-align:right;">Subtotal</td>
<td style="padding:10px 16px;font-size:13px;color:#374151;text-align:right;">$64.00</td>
</tr>
<tr style="background:#f9fafb;">
<td colspan="2" style="padding:4px 16px;font-size:13px;color:#6b7280;text-align:right;">Tax (8%)</td>
<td style="padding:4px 16px;font-size:13px;color:#374151;text-align:right;">$5.12</td>
</tr>
<!-- Total -->
<tr style="border-top:2px solid #e5e7eb;background:#f9fafb;">
<td colspan="2" style="padding:12px 16px;font-size:15px;font-weight:800;color:#111827;text-align:right;">Total</td>
<td style="padding:12px 16px;font-size:15px;font-weight:800;color:#111827;text-align:right;">$69.12</td>
</tr>
</table>
</td>
</tr>
<!-- Payment method -->
<tr>
<td style="padding:0 40px 28px;">
<table role="presentation" cellpadding="0" cellspacing="0" width="100%" style="background:#f9fafb;border-radius:8px;padding:16px;">
<tr>
<td style="padding:16px;">
<p style="margin:0 0 6px;font-size:11px;font-weight:700;color:#9ca3af;text-transform:uppercase;letter-spacing:0.06em;">Payment Method</p>
<p style="margin:0;font-size:14px;color:#374151;">Visa ending in <strong>4242</strong> · Charged on March 6, 2026</p>
</td>
</tr>
</table>
</td>
</tr>
<!-- Footer -->
<tr>
<td style="padding:20px 40px;border-top:1px solid #e5e7eb;text-align:center;">
<p style="margin:0 0 6px;font-size:13px;color:#9ca3af;">Questions? <a href="#" style="color:#6366f1;text-decoration:none;">Contact billing support</a></p>
<p style="margin:0;font-size:13px;color:#9ca3af;">© 2026 Acme, Inc.</p>
</td>
</tr>
</table>
<!-- EMAIL END -->
</div>
</body>
</html>Invoice/receipt email with a branded header, line-item table, subtotal/tax/total rows, and payment method info. Designed for transactional billing emails using table-based layout.