polygrapher / app /special-events-email.html
dhruv575
Change special events to have full click boxes
af13547
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Polygraph Special Event</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--
Special Events template — simplified layout for one-off event coverage.
Table-based, inline styles, no CSS variables.
-->
</head>
<body style="margin:0; padding:0; background-color:#F3F4F6;">
<center style="width:100%; background-color:#F3F4F6;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="center" style="padding:20px 0;">
<!-- OUTER CONTAINER -->
<table role="presentation" width="500" cellpadding="0" cellspacing="0" border="0" style="
width:100%;
max-width:500px;
border-radius:16px;
border:1px solid #E5E7EB;
background-color:#FFFFFF;
">
<tr>
<td style="padding:0;border-radius:16px;overflow:hidden;">
<!-- HEADER IMAGE (dynamic — defaults to Polygraph logo, can be overridden via link) -->
<table width="100%" cellpadding="0" cellspacing="0" border="0" role="presentation" style="background:#FFFFFF;">
<tr>
<td align="center" style="padding:0;">
<div class="header_image_wrapper">
<img class="header_image"
src="https://userimg-assets.customeriomail.com/images/client-env-189925/1764635277704_polygraph_logo_01KBE7AYFA3GSQSQE6VAB7JMS3.png"
alt="Polygraph by Polymarket"
style="display:block; border:0; outline:none; text-decoration:none; width:100%; max-width:500px; height:auto;"
/>
</div>
</td>
</tr>
</table>
<!-- MAIN WHITE CARD -->
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="
width:100%;
background-color:#FFFFFF;
">
<tr>
<td style="padding:24px 20px 24px 20px;">
<!-- EVENT TITLE -->
<div class="event_title" style="
text-align:center;
margin:0 0 4px 0;
">
<h1 style="
margin:0;
font-family:'Open Sauce One', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
font-size:28px;
line-height:34px;
font-weight:800;
color:#111827;
letter-spacing:-0.5px;
">
Super Bowl LX
</h1>
</div>
<!-- EVENT DATE/TIME -->
<div class="event_date" style="
text-align:center;
margin:0 0 16px 0;
">
<p style="
margin:0;
font-family:'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
font-size:15px;
line-height:20px;
color:#6B7280;
font-weight:500;
">
Sunday · Feb 9 · 6:30pm ET
</p>
</div>
<!-- INTRODUCTION -->
<div class="event_intro">
<p style="
margin:0 0 20px 0;
font-family:'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
font-size:17px;
line-height:22px;
letter-spacing:-0.43px;
color:#212121;
text-align:center;
">
The big game is here. Here's what Polymarket traders are betting on for Super Bowl LX — from the winner to the coin toss.
</p>
</div>
<!-- CTA BUTTON -->
<div class="event_cta" style="text-align:center; margin:0 0 24px 0;">
<table role="presentation" cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td align="center" style="border-radius:10px; background-color:#2E5CFF;">
<a class="event_cta_link" href="https://polymarket.com" style="
display:inline-block;
text-decoration:none;
font-family:'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
font-size:16px;
font-weight:600;
color:#FFFFFF;
padding:12px 28px;
border-radius:10px;
">
Trade what happens live
</a>
</td>
</tr>
</table>
</div>
<!-- SECTION: TOP STORIES -->
<div class="top_stories">
<div class="wrap_h">
<hr style="border:0; border-top:1px solid #F3F4F6; margin:0 0 16px 0;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-bottom:12px;">
<tr>
<td class="top_stories_heading" style="
font-family:'Open Sauce One', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
font-size:18px;
font-weight:700;
color:#111827;
padding-bottom:4px;
border-bottom:2px solid #2E5CFF;
">
Top Stories
</td>
</tr>
</table>
</div>
<!-- TOP STORIES BOX -->
<table class="top_stories_box" role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="
margin-bottom:16px;
border-radius:14px;
border:1px solid #2E5CFF;
background-color:#FFFFFF;
">
<tr>
<td>
<a class="top_stories_card_link" href="https://polymarket.com" style="text-decoration:none; color:inherit; display:block; padding:16px;">
<div class="top_stories_image_wrapper">
<img src="https://yourcdn.com/polygraph/top-story.png" alt="Top story image" style="display:block; width:100%; height:auto; border-radius:8px; margin-bottom:12px;" />
</div>
<p class="top_stories_title" style="
margin:0 0 8px 0;
font-family:'Open Sauce One', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
font-size:16px;
line-height:24px;
font-weight:700;
color:#2E5CFF;
">
Top Story Headline
</p>
<p class="top_stories_description" style="
margin:0 0 16px 0;
font-family:'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
font-size:17px;
line-height:22px;
letter-spacing:-0.43px;
color:#212121;
">
A brief description of this top story and why it matters.
</p>
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td align="right">
<span class="top_stories_link"
style="
display:inline-block;
text-align:center;
text-decoration:none;
font-family:'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
font-size:15px;
line-height:20px;
letter-spacing:-0.23px;
color:#2E5CFF;
border-radius:8px;
border:1px solid #2E5CFF;
padding:8px 14px;
">
Read more →
</span>
</td>
</tr>
</table>
</a>
</td>
</tr>
</table>
</div>
<!-- SECTION: WALLET WATCH -->
<div class="wallet_watch">
<div class="wrap_h">
<hr style="border:0; border-top:1px solid #F3F4F6; margin:0 0 16px 0;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-bottom:8px;">
<tr>
<td style="
font-family:'Open Sauce One', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
font-size:18px;
font-weight:700;
color:#111827;
padding-bottom:4px;
border-bottom:2px solid #2E5CFF;
">
Wallet Watch
</td>
</tr>
</table>
</div>
<!-- WALLET WATCH BOX -->
<table class="wallet_watch_box" role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="
margin-bottom:16px;
border-radius:14px;
border:1px solid #2E5CFF;
background-color:#FFFFFF;
">
<tr>
<td>
<a class="wallet_watch_card_link" href="https://polymarket.com" style="text-decoration:none; color:inherit; display:block; padding:16px;">
<img src="https://yourcdn.com/polygraph/wallet-watch.png" alt="Wallet Watch image" style="display:block; width:100%; height:auto; border-radius:8px; margin-bottom:12px;" />
<p style="
margin:0 0 8px 0;
font-family:'Open Sauce One', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
font-size:16px;
line-height:24px;
font-weight:700;
color:#2E5CFF;
">
Wallet Watch Title
</p>
<p style="
margin:0 0 16px 0;
font-family:'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
font-size:17px;
line-height:22px;
letter-spacing:-0.43px;
color:#212121;
">
Wallet Watch description goes here with more details about the wallet activity.
</p>
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td align="right">
<span class="wallet_watch_link"
style="
display:inline-block;
text-align:center;
text-decoration:none;
font-family:'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
font-size:15px;
line-height:20px;
letter-spacing:-0.23px;
color:#2E5CFF;
border-radius:8px;
border:1px solid #2E5CFF;
padding:8px 14px;
">
View Wallet →
</span>
</td>
</tr>
</table>
</a>
</td>
</tr>
</table>
</div>
<!-- SECTION: FEATURED MARKETS -->
<div class="highlighted_markets">
<hr style="border:0; border-top:1px solid #F3F4F6; margin:0 0 16px 0;">
<!-- CATEGORY HEADER -->
<table class="market_category_header" role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-bottom:8px;">
<tr>
<td style="
font-family:'Open Sauce One', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
font-size:18px;
font-weight:700;
color:#111827;
padding-bottom:4px;
border-bottom:2px solid #2E5CFF;
">
Super Bowl LX
</td>
</tr>
</table>
<!-- MARKET ROW 1 -->
<a href="https://polymarket.com" style="text-decoration:none; color:inherit;">
<table class="market_row" role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="
margin-bottom:10px;
background-color:#FFFFFF;
border-radius:14px;
border:1px solid #2E5CFF;
">
<tr>
<td style="padding:12px 14px;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="vertical-align:middle; width:44px; padding-right:12px;">
<div class="market_image_wrapper">
<img src="https://yourcdn.com/polygraph/market1.png" alt="market image" style="
display:block; width:44px; height:44px; border-radius:6px; object-fit:cover;
">
</div>
</td>
<td style="vertical-align:middle;">
<p class="market_title" style="
margin:0 0 2px 0;
font-family:'Open Sauce One', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
font-size:15px;
line-height:20px;
font-weight:600;
color:#111827;
">
Who will win Super Bowl LX?
</p>
<p class="market_volume" style="
margin:0;
font-family:'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
font-size:13px;
line-height:18px;
color:#6B7280;
">
$1,482,777 vol
</p>
</td>
<td style="vertical-align:middle; width:auto; text-align:right; white-space:nowrap;">
<a href="https://polymarket.com" style="
display:inline-block;
text-decoration:none;
font-family:'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
font-size:13px;
font-weight:600;
color:#2E5CFF;
border:1px solid #2E5CFF;
border-radius:8px;
padding:6px 12px;
">
Trade Now
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</a>
<!-- MARKET ROW 2 -->
<a href="https://polymarket.com" style="text-decoration:none; color:inherit;">
<table class="market_row" role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="
margin-bottom:10px;
background-color:#FFFFFF;
border-radius:14px;
border:1px solid #2E5CFF;
">
<tr>
<td style="padding:12px 14px;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="vertical-align:middle; width:44px; padding-right:12px;">
<div class="market_image_wrapper">
<img src="https://yourcdn.com/polygraph/market2.png" alt="market image" style="
display:block; width:44px; height:44px; border-radius:6px; object-fit:cover;
">
</div>
</td>
<td style="vertical-align:middle;">
<p class="market_title" style="
margin:0 0 2px 0;
font-family:'Open Sauce One', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
font-size:15px;
line-height:20px;
font-weight:600;
color:#111827;
">
Super Bowl LX total points over/under 48.5?
</p>
<p class="market_volume" style="
margin:0;
font-family:'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
font-size:13px;
line-height:18px;
color:#6B7280;
">
$403,048 vol
</p>
</td>
<td style="vertical-align:middle; width:auto; text-align:right; white-space:nowrap;">
<a href="https://polymarket.com" style="
display:inline-block;
text-decoration:none;
font-family:'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
font-size:13px;
font-weight:600;
color:#2E5CFF;
border:1px solid #2E5CFF;
border-radius:8px;
padding:6px 12px;
">
Trade Now
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</a>
<!-- MARKET ROW 3 -->
<a href="https://polymarket.com" style="text-decoration:none; color:inherit;">
<table class="market_row" role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="
margin-bottom:10px;
background-color:#FFFFFF;
border-radius:14px;
border:1px solid #2E5CFF;
">
<tr>
<td style="padding:12px 14px;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="vertical-align:middle; width:44px; padding-right:12px;">
<div class="market_image_wrapper">
<img src="https://yourcdn.com/polygraph/market3.png" alt="market image" style="
display:block; width:44px; height:44px; border-radius:6px; object-fit:cover;
">
</div>
</td>
<td style="vertical-align:middle;">
<p class="market_title" style="
margin:0 0 2px 0;
font-family:'Open Sauce One', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
font-size:15px;
line-height:20px;
font-weight:600;
color:#111827;
">
Will the coin toss be heads?
</p>
<p class="market_volume" style="
margin:0;
font-family:'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
font-size:13px;
line-height:18px;
color:#6B7280;
">
$450,000 vol
</p>
</td>
<td style="vertical-align:middle; width:auto; text-align:right; white-space:nowrap;">
<a href="https://polymarket.com" style="
display:inline-block;
text-decoration:none;
font-family:'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
font-size:13px;
font-weight:600;
color:#2E5CFF;
border:1px solid #2E5CFF;
border-radius:8px;
padding:6px 12px;
">
Trade Now
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</a>
</div>
<!-- END FEATURED MARKETS -->
<!-- OUTRO -->
<hr style="border:0; border-top:1px solid #F3F4F6; margin:0 0 16px 0;">
<div class="outro_text">
<p style="
margin:0 0 8px 0;
font-family:'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
font-size:17px;
line-height:22px;
letter-spacing:-0.43px;
color:#212121;
">
That's all for this special event.
</p>
<p style="
margin:0 0 20px 0;
font-family:'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
font-size:17px;
line-height:22px;
letter-spacing:-0.43px;
color:#212121;
">
If you're waiting for the launch of Polymarket USA, make sure you're on the wait list.
&nbsp;<a href="https://polymarket.com"
style="color:#2E5CFF; text-decoration:none; font-weight:600;">
Get Priority Access
</a>
</p>
</div>
</td>
</tr>
</table>
<!-- DIVIDER BETWEEN BODY AND FOOTER -->
<hr style="border:0; border-top:1px solid #F3F4F6; margin:0 0 0 0;">
<!-- START FOOTER -->
<table width="100%" cellpadding="0" cellspacing="0" border="0" role="presentation" style="background:#FFFFFF;">
<tr>
<td align="center" style="padding:0; margin:0; background:#FFFFFF;">
<table width="100%" cellpadding="0" cellspacing="0" border="0" role="presentation" style="border-collapse:collapse; background:#FFFFFF;">
<tr>
<td align="center" style="padding:26px 16px;">
<!-- Logo -->
<table width="100%" cellpadding="0" cellspacing="0" border="0" role="presentation">
<tr>
<td align="center" style="padding:0 0 20px 0;">
<img src="https://res.cloudinary.com/db1zelfhi/image/upload/v1764566356/polygraph/images/yatmom1sp8xoaavhhcpt.png" alt="Polymarket" border="0" style="display:block; max-width:100%; height:auto;">
</td>
</tr>
</table>
<!-- Copy -->
<table width="100%" cellpadding="0" cellspacing="0" border="0" role="presentation">
<tr>
<td align="center" style="padding:0 0 20px 0; color:#6B7280; font-family:'Open Sauce One', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; font-size:12px; line-height:19px;">
<p style="margin:0; padding:0;">
If you have any feedback on Polymarket, drop us a line at <a href="mailto:support@polymarket.com" style="color:#6B7280; text-decoration:underline;">support@polymarket.com</a>. If you don't wish to receive these emails you can <a href="#" style="color:#6B7280; text-decoration:underline;">unsubscribe here</a>.
</p>
</td>
</tr>
</table>
<!-- Address -->
<table width="100%" cellpadding="0" cellspacing="0" border="0" role="presentation">
<tr>
<td align="center" style="padding:0 0 24px 0; color:#6B7280; font-family:'Open Sauce One', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; font-size:12px; line-height:19px;">
<div style="margin:0; padding:0;">228 Park Ave S, PMB 750480</div>
<div style="margin:0; padding:0;">New York, NY 10003-1502 U.S.</div>
</td>
</tr>
</table>
<!-- Social icons -->
<table cellpadding="0" cellspacing="0" border="0" role="presentation" align="center">
<tr>
<td align="center" style="padding:0 5px 0 0;">
<a href="https://www.instagram.com/polymarket/" target="_blank" rel="noopener noreferrer" style="text-decoration:none;">
<img src="https://res.cloudinary.com/db1zelfhi/image/upload/v1764566357/polygraph/images/b74ej5gzznbkzqtcwg9e.png" alt="Instagram" border="0" width="24" height="24" style="display:block; max-width:100%; width:24px; height:24px;">
</a>
</td>
<td align="center" style="padding:0 5px;">
<a href="https://discord.com/invite/polymarket" target="_blank" rel="noopener noreferrer" style="text-decoration:none;">
<img src="https://res.cloudinary.com/db1zelfhi/image/upload/v1764566357/polygraph/images/fhkg9qgqniftkssbev86.png" alt="Discord" border="0" width="24" height="24" style="display:block; max-width:100%; width:24px; height:24px;">
</a>
</td>
<td align="center" style="padding:0 5px;">
<a href="https://x.com/Polymarket" target="_blank" rel="noopener noreferrer" style="text-decoration:none;">
<img src="https://res.cloudinary.com/db1zelfhi/image/upload/v1764566358/polygraph/images/d3z6va5pww3svwtqrfis.png" alt="X (Twitter)" border="0" width="24" height="24" style="display:block; max-width:100%; width:24px; height:24px;">
</a>
</td>
<td align="center" style="padding:0 0 0 5px;">
<a href="https://news.polymarket.com/" target="_blank" rel="noopener noreferrer" style="text-decoration:none;">
<img src="https://res.cloudinary.com/db1zelfhi/image/upload/v1764566359/polygraph/images/fiojenyiismqywh5m79u.png" alt="News" border="0" width="24" height="24" style="display:block; max-width:100%; width:24px; height:24px;">
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- END FOOTER -->
</td>
</tr>
</table>
<!-- END OUTER CONTAINER -->
</td>
</tr>
</table>
</center>
</body>
</html>