Skip to content

Commit

Permalink
fix many clients such as yahoo, outlook
Browse files Browse the repository at this point in the history
  • Loading branch information
@mihaieremia
mihaieremia committed Sep 15, 2024
1 parent 1388d2c commit 536ccf3
Show file tree
Hide file tree
Showing 4 changed files with 257 additions and 9 deletions.
201 changes: 201 additions & 0 deletions invitation.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,201 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html class="no-scrollbar" style="background:#2a2a2a;background-color:#2a2a2a" dir="ltr" lang="en">

<head>
<link rel="preload" as="image" href="https://media.xoxno.com/hotlink-ok/email_logo.png" />
<link rel="preload" as="image" href="https://devnet-media.xoxno.com/eventmedia/7182e829-ccbb-440e-9b86-3732eaec262d/ticket/7588fffa-1182-4573-8cd9-e8b094f5384a.png?ts=1726135086" />
<link rel="preload" as="image" href="https://media.xoxno.com/hotlink-ok/email_info.png" />
<link rel="preload" as="image" href="https://media.xoxno.com/hotlink-ok/email_pin.png" />
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<meta name="x-apple-disable-message-reformatting" />
<title>Your Curiosity Summit 3 Ticket is Here – Claim Now!</title>
<meta name="color-scheme" content="light dark" />
<meta name="supported-color-schemes" content="light dark only" />
<style>
@font-face {
font-style: normal;
font-family: Heading;
font-weight: 400;
mso-font-alt: Verdana;
src: url(https://media.xoxno.com/fonts/ClashDisplay-Semibold.woff2) format(woff2);
}
</style>
<style>
@font-face {
font-style: normal;
font-family: Button;
font-weight: 400;
mso-font-alt: Verdana;
src: url(https://media.xoxno.com/fonts/ClashDisplay-Medium.woff2) format(woff2);
}
</style>
<style>
@font-face {
font-style: normal;
font-family: Body;
font-weight: 400;
mso-font-alt: Verdana;
src: url(https://media.xoxno.com/fonts/Satoshi-Light.woff2) format(woff2);
}
</style>
<style>
.no-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
}

.no-scrollbar::-webkit-scrollbar {
display: none;
}

u~div .gmail-screen {
background: #000;
mix-blend-mode: screen;
/* background:transparent; */
}

u~div .gmail-difference {
background: #000;
mix-blend-mode: difference;
/* background:transparent; */
}
</style>
</head>
<div style="display:none;overflow:hidden;line-height:1px;opacity:0;max-height:0;max-width:0">Your Curiosity Summit 3 Ticket is Here – Claim Now!<div> ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎��� ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏</div>
</div>
<table align="center" width="100%" class="body" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="max-width:900px;background:#2a2a2a;background-color:#2a2a2a;background-repeat:no-repeat;background-image:url(https://trustmarketdevnet.blob.core.windows.net/eventmedia/7182e829-ccbb-440e-9b86-3732eaec262d/background.png);min-height:100vh;background-position:center;background-size:cover">
<tbody>
<tr style="width:100%">
<td>
<div><!--[if gte mso 9]>
<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
<v:fill type="frame" src="https://trustmarketdevnet.blob.core.windows.net/eventmedia/7182e829-ccbb-440e-9b86-3732eaec262d/background.png" color="#2a2a2a"/>
</v:background>
<![endif]--></div>
<table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="max-width:37.5em;padding-left:1.25rem;padding-right:1.25rem">
<tbody>
<tr style="width:100%">
<td>
<table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="min-height:100px">
<tbody>
<tr>
<td>
<table width="100%" border="0" cellSpacing="0" cellPadding="0">
<tr>
<td align="center"><img alt="XOXNO Logo" height="24" src="https://media.xoxno.com/hotlink-ok/email_logo.png" style="display:block;outline:none;border:none;text-decoration:none" width="130" /></td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
<table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="padding:1.25rem">
<tbody>
<tr>
<td>
<table width="100%" border="0" cellSpacing="0" cellPadding="0">
<tr>
<td align="center">
<h1 style="color:#FFF;font-family:Heading, Verdana;text-align:center;font-size:28px;font-style:normal;font-weight:600;line-height:36px;margin-top:0px;margin-bottom:0px"><span class="gmail-screen"><span class="gmail-difference">Your Curiosity Summit 3 Ticket is Here</span></span></h1>
<p style="font-size:16px;line-height:24px;margin:16px 0;color:#D0D0D0;text-align:center;font-family:Body, Verdana;font-style:normal;font-weight:400;margin-bottom:0px"><span class="gmail-screen"><span class="gmail-difference">Dear Mihai Daniel,</span></span></p>
<p style="font-size:16px;line-height:24px;margin:16px 0;color:#D0D0D0;text-align:center;font-family:Body, Verdana;font-style:normal;font-weight:400"><span class="gmail-screen"><span class="gmail-difference">We&#x27;re excited to have you join us at the Curiosity Summit 3! You can use the <b>QR Code attached to this email</b> to pass the event check-in.</span></span></p>
</td>
</tr>
</table>
<table width="100%" border="0" cellSpacing="0" cellPadding="0">
<tr>
<td align="center"><a href="https://xoxno.com/event/7182e829-ccbb-440e-9b86-3732eaec262d?guest=41180fd5-141c-4ab9-aca3-c7cf8aa2c535" style="color:#AEFB4F;text-decoration:none;font-family:Body, Verdana;font-size:16px;font-style:normal;font-weight:500;line-height:24px;white-space:nowrap" target="_blank"><span class="gmail-screen"><span class="gmail-difference"><img alt="Picture of ticket" src="https://devnet-media.xoxno.com/eventmedia/7182e829-ccbb-440e-9b86-3732eaec262d/ticket/7588fffa-1182-4573-8cd9-e8b094f5384a.png?ts=1726135086" style="display:block;outline:none;border:none;text-decoration:none" width="200"/></span></span></a></td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
<table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation">
<tbody>
<tr>
<td>
<table width="100%" border="0" cellSpacing="0" cellPadding="0">
<tr>
<td align="center">
<p style="font-size:16px;line-height:24px;margin:16px 0;color:#D0D0D0;text-align:center;font-family:Body, Verdana;font-style:normal;font-weight:400"><span class="gmail-screen"><span class="gmail-difference">If you want to get the best experience and a unique collectible as a memory of this event, click below to claim your digital ticket:</span></span></p><a href="https://xoxno.com/event/7182e829-ccbb-440e-9b86-3732eaec262d?guest=41180fd5-141c-4ab9-aca3-c7cf8aa2c535" style="line-height:16px;text-decoration:none;display:block;max-width:95%;font-family:Button, Verdana;padding:12px 20px 12px 20px;border-radius:8px;background:linear-gradient(#953fff,#953fff);background-color:#953fff;color:#FFF;font-size:14px;font-style:normal;font-weight:500;margin-bottom:0.75rem" target="_blank"><span><!--[if mso]><i style="mso-font-width:500%;mso-text-raise:18" hidden>&#8202;&#8202;</i><![endif]--></span><span style="max-width:100%;display:inline-block;line-height:120%;mso-padding-alt:0px;mso-text-raise:9px"><span class="gmail-screen"><span class="gmail-difference">CLAIM YOUR DIGITAL TICKET HERE</span></span></span><span><!--[if mso]><i style="mso-font-width:500%" hidden>&#8202;&#8202;&#8203;</i><![endif]--></span></a>
<table width="95%" role="presentation" cellSpacing="0" cellPadding="0" border="0" style="background:linear-gradient(#121212,#121212);background-color:#121212;border-color:#E8EC0D;margin-bottom:40px;padding:0.75rem;border-radius:0.75rem;border-width:1px;border-style:solid">
<tbody>
<tr>
<td style="padding-right:16px;padding-top:4px;vertical-align:baseline"><img alt="Info Icon" height="24" src="https://media.xoxno.com/hotlink-ok/email_info.png" style="display:block;outline:none;border:none;text-decoration:none" width="24" /></td>
<td style="vertical-align:middle">
<p style="font-size:16px;line-height:24px;margin:16px 0;color:#E8EC0D;text-align:start;font-family:Body, Verdana;font-style:normal;font-weight:400;margin-top:0px;margin-bottom:0px"><span class="gmail-screen"><span class="gmail-difference">If you have trouble accessing the ticket on the website, use the <b>QR Code attached to this email</b> to pass the check-in.</span></span></p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
<table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation">
<tbody>
<tr>
<td>
<p style="font-size:19px;line-height:26px;margin:16px 0;color:#FFF;text-align:center;font-family:Button, Verdana;font-style:normal;font-weight:500;margin-bottom:0px"><span class="gmail-screen"><span class="gmail-difference">10-10 October 2024</span></span></p>
<table width="100%" border="0" cellSpacing="0" cellPadding="0">
<tr>
<td align="center">
<table role="presentation" cellSpacing="0" cellPadding="0" border="0" style="border-collapse:collapse">
<tbody>
<tr>
<td style="padding-right:16px;vertical-align:middle"><img alt="Location pin" height="24" src="https://media.xoxno.com/hotlink-ok/email_pin.png" style="display:block;outline:none;border:none;text-decoration:none" width="24" /></td>
<td style="vertical-align:middle">
<p style="font-size:16px;line-height:24px;margin:16px 0;color:#D0D0D0;text-align:center;font-family:Body, Verdana;font-style:normal;font-weight:400;margin-top:0px;margin-bottom:0px"><span class="gmail-screen"><span class="gmail-difference">Globalworth Campus, Bulevardul Dimitrie Pompeiu, Bucharest, Romania</span></span></p>
</td>
</tr>
</tbody>
</table><a href="https://www.google.com/maps/search/?api=1&amp;query=Globalworth Campus, Bulevardul Dimitrie Pompeiu, Bucharest, Romania&amp;query_place_id=ChIJs8SR6oH4sUARi85xIWeSDVg" style="color:#AEFB4F;text-decoration:none;font-family:Body, Verdana;font-size:16px;font-style:normal;font-weight:500;line-height:24px;white-space:nowrap" target="_blank"><span class="gmail-screen"><span class="gmail-difference">Open in Google Maps</span></span></a>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
<table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="padding-top:2rem;padding-bottom:2rem;margin-top:2rem;text-align:center;border-top-width:1px;border-style:solid;border-color:rgb(255,255,255,0.1)">
<tbody>
<tr>
<td>
<p style="font-size:16px;line-height:24px;margin:16px 0;color:#D0D0D0;text-align:center;font-family:Body, Verdana;font-style:normal;font-weight:400;margin-top:0px;margin-bottom:0px"><span class="gmail-screen"><span class="gmail-difference">For more information and updates, <a href="https://xoxno.com" style="color:#AEFB4F;text-decoration:none;font-family:Body, Verdana;font-size:16px;font-style:normal;font-weight:500;line-height:24px;white-space:nowrap" target="_blank">visit our website</a>. If you have any questions, feel free to reach out to us <a href="mailto:[email protected]" style="color:#AEFB4F;text-decoration:none;font-family:Body, Verdana;font-size:16px;font-style:normal;font-weight:500;line-height:24px;white-space:nowrap" target="_blank">via email</a>.</span></span></p>
<table role="presentation" cellSpacing="0" cellPadding="0" border="0" style="border-collapse:collapse;margin-top:1.25rem" align="center">
<tbody>
<tr>
<td style="padding-right:8px;padding-top:4px;vertical-align:middle">❤️</td>
<td style="vertical-align:middle">
<p style="font-size:16px;line-height:24px;margin:16px 0;color:#D0D0D0;text-align:center;font-family:Body, Verdana;font-style:normal;font-weight:400;margin-top:0px;margin-bottom:0px"><span class="gmail-screen"><span class="gmail-difference">Thank you for using XOXNO!</span></span></p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="padding-left:1.25rem;padding-right:1.25rem;padding-top:1.5rem;padding-bottom:3rem;text-align:center">
<tbody>
<tr>
<td>
<p style="font-size:16px;line-height:24px;margin:16px 0;color:#D0D0D0;text-align:center;font-family:Body, Verdana;font-style:normal;font-weight:400;margin-bottom:0px"><span class="gmail-screen"><span class="gmail-difference">No longer want to receive emails?</span></span></p><a href="https://xoxno.com/unsubscribe?token=ZWU2NTQ5ODdjOTlmMTBkYmNjZDEwNmFiZGNhNzQ3MmE6OTY1ZDllNTU1N2FmMjExMDY5Njg5MjliYjgwOWJiZWZiYmU5OTJmOWE1NjdmNWU4MjI2Y2IyZjVjZGY5NjQ1Nw==" style="color:#AEFB4F;text-decoration:none;font-family:Body, Verdana;font-size:16px;font-style:normal;font-weight:500;line-height:24px;white-space:nowrap" target="_blank"><span class="gmail-screen"><span class="gmail-difference">Unsubscribe</span></span></a>
</td>
</tr>
</tbody>
</table>

</html>
22 changes: 16 additions & 6 deletions src/email/event-email-2.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React, { createElement, type ComponentProps } from 'react'

import { Body, Container, Img, Section } from '@react-email/components'
import { Container, Img, Section } from '@react-email/components'
import { createTranslator } from 'use-intl'

import { getMapsLink, getOnlineLocation } from '../utils'
Expand Down Expand Up @@ -60,7 +60,7 @@ const EventEmail = ({
event,
name,
style = {
background: 'linear-gradient(#121212,#121212)',
background: '#121212',
backgroundColor: '#121212',
},
unsubscribeToken,
Expand All @@ -83,15 +83,25 @@ const EventEmail = ({
HOST={HOST}
unsubscribeToken={unsubscribeToken}
>
<Body
className="body min-h-screen bg-center bg-cover"
<Container
className="body min-h-screen max-w-[900px] bg-center bg-cover"
style={{
...style,
backgroundRepeat: 'no-repeat',
backgroundImage: event.backgroundImage
? `url(${event.backgroundImage})`
: style.background,
}}
>
<div
dangerouslySetInnerHTML={{
__html: `<!--[if gte mso 9]>
<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
<v:fill type="frame" src="${event.backgroundImage}" color="#121212"/>
</v:background>
<![endif]-->`,
}}
/>
<Container className="px-5">
<Section className="min-h-[100px]">
<Center>
Expand Down Expand Up @@ -126,7 +136,7 @@ const EventEmail = ({
</FixedLink>
</Center>
</Section>
<Section>
<Section width={'95%'}>
<Center>
<FixedText>{t('hint')}</FixedText>
<FixedButton href={href} className="mb-3 block">
Expand Down Expand Up @@ -236,7 +246,7 @@ const EventEmail = ({
<ThankYou text={t('footer')} />
</Section>
</Container>
</Body>
</Container>
</GeneralEmail>
)
}
Expand Down
Loading

0 comments on commit 536ccf3

Please sign in to comment.