Files
mail/resources/screenshots/demo-email.html
T

110 lines
9.2 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Your weekly traffic report</title>
</head>
<body style="margin:0; padding:0; background-color:#eef2f7; font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; color:#101828;">
<div style="padding:16px;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="max-width:648px; margin:0 auto; border-collapse:separate; background-color:#ffffff; border-radius:20px;">
<tr>
<td style="padding:28px 28px 26px; border-radius:20px 20px 0 0; background-color:#fff7e8; background-image:linear-gradient(160deg, #ffffff 0%, #ffedcc 100%);">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td style="vertical-align:top;">
<svg width="66" height="30" viewBox="68 54 66 30" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Cloudflare">
<path fill="#FF5E1F" d="M121.118 67.125C128.115 67.125 133.786 72.8334 133.786 79.875C133.786 81.1302 133.606 82.3433 133.271 83.489C133.18 83.7967 132.895 84 132.576 84H114.951C114.69 84 114.51 83.7362 114.603 83.4906L114.94 82.6077C116.016 79.775 119.086 77.4544 121.927 77.3185L127.311 77.041C127.599 77.0262 127.825 76.7869 127.825 76.4971C127.825 76.2087 127.601 75.9702 127.316 75.9533L122.259 75.654C119.541 75.5148 118.213 73.0948 118.944 70.5729L119.786 67.6705C119.871 67.3753 120.127 67.1604 120.432 67.1438C120.659 67.1314 120.888 67.125 121.118 67.125Z"/>
<path fill="#FF5E1F" d="M103.607 54C110.903 54 117.032 59.0249 118.765 65.8235C118.838 66.109 118.815 66.4103 118.711 66.6858L117.323 70.3634C116.247 73.1961 113.481 75.6525 110.352 75.6525L86.248 75.9313C85.9571 75.9348 85.7231 76.1731 85.723 76.466C85.723 76.7585 85.9566 76.9971 86.2473 77.001L110.012 77.3169C112.736 77.3169 114.058 79.8762 113.327 82.3983L113.021 83.4594C112.928 83.7798 112.637 84 112.305 84H68.9626C68.5919 84 68.2745 83.7258 68.2448 83.3538C68.2224 83.0721 68.2109 82.7875 68.2109 82.5C68.2109 77.0237 72.3766 72.527 77.6929 72.0436C77.5838 71.5465 77.5258 71.0301 77.5258 70.5C77.5258 66.565 80.6954 63.375 84.6052 63.375C86.1612 63.375 87.5998 63.8806 88.7681 64.7369C90.8486 58.4963 96.7063 54 103.607 54Z"/>
</svg>
</td>
<td style="vertical-align:top; text-align:right; font-size:13px; line-height:20px; color:#1f1f1f;">Sep 1–7, 2026</td>
</tr>
</table>
<p style="margin:14px 0 6px; font-size:11px; line-height:16px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:#7c7c7c;">Weekly insights</p>
<h1 style="margin:0; font-size:28px; line-height:34px; font-weight:700; letter-spacing:-0.01em; color:#000000;">A faster week for flectar.com</h1>
<p style="margin:10px 0 18px; font-size:15px; line-height:22px; color:#3f3f3f;">Traffic grew while performance and security stayed strong.</p>
<span style="display:inline-block; padding:5px 12px; border-radius:16px; background-color:#ff5e1f; color:#ffffff; font-size:12px; line-height:18px; font-weight:700;">18.2% growth</span>
</td>
</tr>
<tr>
<td style="padding:20px 20px 0;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="border-collapse:separate; border-spacing:8px 0;">
<tr>
<td width="33%" style="padding:14px 14px 13px; border:1px solid #e6eaf0; border-radius:12px; vertical-align:top;">
<p style="margin:0; font-size:10px; line-height:14px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; color:#667085;"><svg width="8" height="8" viewBox="0 0 8 8" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" style="margin-right:6px;"><circle cx="4" cy="4" r="4" fill="#FF5E1F"/></svg>Requests</p>
<p style="margin:8px 0 6px; font-size:26px; line-height:30px; font-weight:700; color:#101828;">1.24M</p>
<p style="margin:0; font-size:11px; line-height:14px; color:#98a2b3;"><span style="font-weight:700; color:#16845b;">+18.2%</span>&nbsp; vs last week</p>
</td>
<td width="33%" style="padding:14px 14px 13px; border:1px solid #e6eaf0; border-radius:12px; vertical-align:top;">
<p style="margin:0; font-size:10px; line-height:14px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; color:#667085;"><svg width="8" height="8" viewBox="0 0 8 8" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" style="margin-right:6px;"><circle cx="4" cy="4" r="4" fill="#5B8DEF"/></svg>Bandwidth</p>
<p style="margin:8px 0 6px; font-size:26px; line-height:30px; font-weight:700; color:#101828;">38.6 GB</p>
<p style="margin:0; font-size:11px; line-height:14px; color:#98a2b3;"><span style="font-weight:700; color:#16845b;">+9.4%</span>&nbsp; vs last week</p>
</td>
<td width="33%" style="padding:14px 14px 13px; border:1px solid #e6eaf0; border-radius:12px; vertical-align:top;">
<p style="margin:0; font-size:10px; line-height:14px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; color:#667085;"><svg width="8" height="8" viewBox="0 0 8 8" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" style="margin-right:6px;"><circle cx="4" cy="4" r="4" fill="#34A67B"/></svg>Threats blocked</p>
<p style="margin:8px 0 6px; font-size:26px; line-height:30px; font-weight:700; color:#101828;">2,849</p>
<p style="margin:0; font-size:11px; line-height:14px; color:#98a2b3;"><span style="font-weight:700; color:#16845b;">99.98%</span>&nbsp; clean traffic</p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding:26px 28px 0;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td style="font-size:18px; line-height:24px; font-weight:700; color:#101828;">Requests over the last 7 days</td>
<td style="text-align:right; font-size:11px; line-height:24px; color:#667085;">Peak: Fri, 14:00 UTC</td>
</tr>
</table>
<svg width="100%" viewBox="68 476 584 138" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Requests peaked on Friday and finished the week near their high" style="display:block; margin-top:10px;">
<defs>
<linearGradient id="requests-area" x1="70" y1="486" x2="70" y2="611.935" gradientUnits="userSpaceOnUse">
<stop stop-color="#F6821F" stop-opacity="0.24"/>
<stop offset="1" stop-color="#F6821F" stop-opacity="0"/>
</linearGradient>
</defs>
<path d="M70 502H650M70 548H650M70 594H650" stroke="#98A2B3" stroke-opacity="0.28"/>
<path d="M70 581C105 566 130 570 165 548C200 526 225 524 260 535C295 546 322 572 360 542C398 512 425 490 456 490C487 490 520 545 554 520C588 495 615 499 650 503V612H70Z" fill="url(#requests-area)"/>
<path d="M70 581C105 566 130 570 165 548C200 526 225 524 260 535C295 546 322 572 360 542C398 512 425 490 456 490C487 490 520 545 554 520C588 495 615 499 650 503" stroke="#FF5E1F" stroke-width="4" stroke-linecap="round" fill="none"/>
<circle cx="456" cy="490" r="7" fill="#FFFFFF" stroke="#FF5E1F" stroke-width="4"/>
</svg>
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="margin-top:8px; table-layout:fixed; font-size:10px; line-height:14px; letter-spacing:0.04em; color:#98a2b3;">
<tr>
<td width="8.333%" style="text-align:left;">MON</td>
<td width="16.667%" style="text-align:center;">TUE</td>
<td width="16.667%" style="text-align:center;">WED</td>
<td width="16.667%" style="text-align:center;">THU</td>
<td width="16.667%" style="text-align:center;">FRI</td>
<td width="16.667%" style="text-align:center;">SAT</td>
<td width="8.333%" style="text-align:right;">SUN</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding:22px 28px 28px;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="border-collapse:separate; background-color:#f8fafc; border:1px solid #e9edf2; border-radius:10px;">
<tr>
<td width="26" style="padding:10px 0 10px 12px; vertical-align:middle;">
<svg width="26" height="26" viewBox="81 674 26 26" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<circle cx="94" cy="687" r="13" fill="#E9F7F1"/>
<path d="M88 687L92 691L100 682" stroke="#16845B" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
</svg>
</td>
<td style="padding:10px 12px; vertical-align:middle;">
<p style="margin:0; font-size:13px; line-height:18px; font-weight:700; color:#344054;">All systems healthy</p>
<p style="margin:0; font-size:11px; line-height:16px; color:#667085;">No action is needed for your domains this week.</p>
</td>
<td style="padding:10px 16px 10px 0; text-align:right; vertical-align:middle; white-space:nowrap;">
<a href="https://dash.cloudflare.com/" style="font-size:12px; line-height:18px; font-weight:700; color:#f6821f; text-decoration:none;">View analytics ›</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div></body>
</html>