Skip to content

Commit

Permalink
feat(emails): add test run template
Browse files Browse the repository at this point in the history
  • Loading branch information
@harunbleech
harunbleech committed Jun 17, 2024
1 parent 594cc08 commit c605d44
Showing 1 changed file with 277 additions and 0 deletions.
277 changes: 277 additions & 0 deletions components/emails/test-run.php
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,277 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title</title>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="x-apple-disable-message-reformatting" />
<meta content="telephone=no" name="format-detection">

<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--<![endif]-->

<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings xmlns:o="urn:schemas-microsoft-com:office:office">
<o:AllowPNG />
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->

<style>
table,
tr,
td {
border-collapse: separate;
padding: 0;
}
</style>

<!--[if mso]>
<style type="text/css">
v\:* {
behavior: url(#default#VML);
display: inline-block;
}
o\:* {
behavior: url(#default#VML);
display: inline-block;
}
w\:* {
behavior: url(#default#VML);
display: inline-block;
}
.ExternalClass {
width: 100%;
}
table {
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
img {
-ms-interpolation-mode: bicubic;
}
.ReadMsgBody {
width: 100%;
}
a {
background: transparent !important;
background-color: transparent !important;
}

li {
text-align: -webkit-match-parent;
display: list-item;
text-indent: -1em;
}

ul,
ol {
margin-left: 1em !important;
}

p {
text-indent: 0;
}
</style>
<![endif]-->
</head>
<body style="width:100%;height:100%;padding:0;Margin:0">
<table border="0" cellspacing="0" width="100%" bgcolor="#dce5fd" style="background-color: #dce5fd; font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, sans-serif, Tahoma, system-ui; padding-top: 50px;">
<tr>
<td></td>
<td width="600" style="padding: 0 20px;">
<table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 100%; padding-bottom: 25px; border-spacing: 0;">
<tr>
<td width="1%" valign="middle">
<img src="<?php echo esc_url( vrts()->get_plugin_url( 'assets/icons/vrts-logo-icon.svg' ) ); ?>" width="40" height="40" alt="VRTs logo" style="width: 40px; height: 40px; display: block" />
</td>
<td width="99%" valign="middle" style="padding-left: 10px;">
<table border="0" cellspacing="0" width="100%">
<tr>
<td valign="middle">
<p style="font-size: 16px; font-weight: 600; color: #262626; margin: 0; padding: 0; line-height: 26px; mso-line-height-alt: normal">VRTs Plugin</p>
</td>
<td valign="bottom" style="text-align: right;">
<p style="font-size: 14px; font-weight: 400; color: #262626; margin: 0; padding: 0; line-height: 20px; mso-line-height-alt: 20px">Run #25</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 100%; padding: 15px; border-spacing: 0; background-color: #ffffff; border-radius: 2px; box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.08);">
<tr>
<td>
<p style="font-size: 14px; line-height: 16px; color: #262626; display: block; mso-line-height-rule: exactly">Hey there 👋</p>
<p style="font-size: 14px; line-height: 16px; color: #262626; display: block; mso-line-height-rule: exactly">We've detected visual changes on your website during a recent test run:</p>
</td>
</tr>
<tr>
<td align="left" style="padding-top: 15px;">
<table cellpadding="0" cellspacing="0" border="0" role="presentation" style="margin: 0; border-spacing: 0">
<tr>
<td width="85">
<p style="font-size: 16px; font-weight: 700; color: #262626; margin: 0; padding: 0; width: 85px; line-height: 23px; mso-line-height-alt: 24px">Run #25</p>
</td>
<td width="10" style="padding-left: 10px;">
<table cellpadding="0" cellspacing="0" border="0" role="presentation" bgcolor="#f0e8f8" width="100.00%" style="border-radius: 100px; background-color: #f0e8f8; width: 100%; border-spacing: 0; border-collapse: separate">
<tr>
<td align="center" valign="middle">
<p style="font-size: 14px; font-weight: 400; line-height: 16px; color: #591b98; mso-line-height-alt: 16px; margin: 0; padding: 4px 10px">Scheduled</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding-top: 5px;">
<table cellpadding="0" cellspacing="0" border="0" role="presentation" width="100.00%" style="width: 100%; border-spacing: 0">
<tr>
<td valign="top" width="85">
<p style="font-size: 14px; font-weight: 400; color: #262626; margin: 0; padding: 0; line-height: 20px; mso-line-height-alt: 20px">15 Tests</p>
</td>
<td valign="top" style="padding-left: 10px;">
<p style="font-size: 14px; font-weight: 400; text-align: left; line-height: 20px; color: rgba(38, 38, 38, 0.6); mso-line-height-rule: exactly; margin: 0; padding: 0;">(trigger meta info that can be multiple lines long and look like this if it has a more of information)</p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding-top: 25px;">
<table cellpadding="0" cellspacing="0" border="0" role="presentation" width="100.00%" style="width: 100%; border-spacing: 0">
<tr>
<td valign="top">
<table cellpadding="0" cellspacing="0" border="0" role="presentation" style="border-spacing: 0">
<tr>
<td>
<p style="font-size: 14px; font-weight: 600; color: #e80242; margin: 0; padding: 0; line-height: 20px; mso-line-height-alt: 20px">Changes Detected (2)</p>
</td>
</tr>
<tr>
<td style="padding-top: 5px">
<p style="font-size: 14px; font-weight: 400; color: #262626; margin: 0; padding: 0; line-height: 20px; mso-line-height-alt: 20px">2024/02/07 at 8:42 AM</p>
</td>
</tr>
</table>
</td>
<td valign="top" width="1" style="padding-left: 10px;">
<table cellpadding="0" cellspacing="0" border="0" role="presentation" bgcolor="#1954ed" width="100.00%" style="border-radius: 2px; background-color: #1954ed; width: 100%; border-spacing: 0; border-collapse: separate">
<tr>
<td align="center" valign="middle">
<a href="#" style="font-size: 14px; font-weight: 600; color: white; margin: 0; padding: 0; line-height: 20px; mso-line-height-alt: 20px; text-decoration: none; display: block; padding: 8px 12px;">Review&nbsp;Alerts</a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2" style="padding-top: 8px;">
<div style="border-top: 1px solid #ddd;"></div>
</td>
</tr>
<tr>
<td colspan="2" style="padding-top: 5px;">
<ul style="list-style-type: disc; margin: 0; padding-left: 1.5em">
<li style="margin-top: 10px">
<span style="font-size: 14px; font-weight: 600; text-align: left; line-height: 20px; mso-line-height-rule: exactly">If there was Astro for WordPress</span><br />
<a href="#" style="font-size: 14px; font-weight: 400; color: #1954ed; text-align: left; line-height: 20px; mso-line-height-rule: exactly; text-decoration: none;">/blog/if-there-was-astro-for-wordpress/</a>
</li>
<li style="margin-top: 10px">
<span style="font-size: 14px; font-weight: 600; text-align: left; line-height: 20px; mso-line-height-rule: exactly">If there was Astro for WordPress</span><br />
<a href="#" style="font-size: 14px; font-weight: 400; color: #1954ed; text-align: left; line-height: 20px; mso-line-height-rule: exactly; text-decoration: none;">/blog/if-there-was-astro-for-wordpress/</a>
</li>
</ul>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding-top: 25px;">
<table cellpadding="0" cellspacing="0" border="0" role="presentation" width="100.00%" style="width: 100%; border-spacing: 0">
<tr>
<td valign="top">
<p style="font-size: 14px; font-weight: 600; color: #28D1B4; margin: 0; padding: 0; line-height: 20px; mso-line-height-alt: 20px">Passed (5)</p>
</td>
</tr>
<tr>
<td colspan="2" style="padding-top: 8px;">
<div style="border-top: 1px solid #ddd;"></div>
</td>
</tr>
<tr>
<td colspan="2" style="padding-top: 5px;">
<ul style="list-style-type: disc; margin: 0; padding-left: 1.5em">
<li style="margin-top: 10px">
<span style="font-size: 14px; font-weight: 600; text-align: left; line-height: 20px; mso-line-height-rule: exactly">If there was Astro for WordPress</span><br />
<a href="#" style="font-size: 14px; font-weight: 400; color: #1954ed; text-align: left; line-height: 20px; mso-line-height-rule: exactly; text-decoration: none;">/blog/if-there-was-astro-for-wordpress/</a>
</li>
<li style="margin-top: 10px">
<span style="font-size: 14px; font-weight: 600; text-align: left; line-height: 20px; mso-line-height-rule: exactly">If there was Astro for WordPress</span><br />
<a href="#" style="font-size: 14px; font-weight: 400; color: #1954ed; text-align: left; line-height: 20px; mso-line-height-rule: exactly; text-decoration: none;">/blog/if-there-was-astro-for-wordpress/</a>
</li>
</ul>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding-top: 25px;">
<p style="font-size: 14px; line-height: 16px; color: #262626; display: block; mso-line-height-rule: exactly">Your VRTs squad! 🚀</p>
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 100%; padding-bottom: 50px; padding-left: 15px; padding-right: 15px; border-spacing: 0;">
<tr>
<td align="left" style="padding-top: 25px;">
<p style="font-size: 12px; font-weight: 600; text-transform: uppercase; opacity: 0.8; color: #262626; margin: 0; margin-bottom: 5px; padding: 0; line-height: 16px; mso-line-height-alt: 16px">READ MORE</p>
<p style="font-size: 12px; font-weight: 400; color: #262626; margin: 0; padding: 0; line-height: 16px; mso-line-height-alt: 16px">
Dive deeper on <a href="#" style="font-size: 12px; font-weight: 400; color: #1954ed; text-align: left; text-decoration-line: underline; text-decoration: underline">vrts.app</a> and our guide “<a href="#" style="font-size: 12px; font-weight: 400; color: #1954ed; text-align: left; text-decoration-line: underline; text-decoration: underline">How does visual regression testing work?</a>”</span>
</p>
</td>
</tr>
<tr>
<td align="left" style="padding-top: 25px;">
<p style="font-size: 12px; font-weight: 600; text-transform: uppercase; opacity: 0.8; color: #262626; margin: 0; margin-bottom: 5px; padding: 0; line-height: 16px; mso-line-height-alt: 16px">SUPPORT</p>
<p style="font-size: 12px; font-weight: 400; color: #262626; margin: 0; padding: 0; line-height: 16px; mso-line-height-alt: 16px">
If you have questions or spotted a bug, feel free to email us at <a href="mailto:support@vrts.app" style="font-size: 12px; font-weight: 400; color: #1954ed; text-align: left; text-decoration-line: underline; text-decoration: underline">support@vrts.app</a>.
</p>
</td>
</tr>
<tr>
<td>
<div style="border-top: 1px solid #869BD3; opacity: 45%; margin-top: 25px;"></div>
</td>
</tr>
<tr>
<td align="center" style="padding-top: 25px;">
<table cellpadding="0" cellspacing="0" border="0" role="presentation" style="border-spacing: 0">
<tr>
<td valign="middle">
<img src="<?php echo esc_url( vrts()->get_plugin_url( 'assets/icons/vrts-logo-icon.svg' ) ); ?>" width="20" height="20" alt="VRTs logo" style="width: 20px; height: 20px; display: block" />
</td>
<td valign="middle" style="padding-left: 4px">
<p style="color: #262626; margin: 0; padding: 0; font-size: 12px; line-height: 20px; mso-line-height-alt: normal">
<strong>VRTs Plugin</strong> on <a href="#" style="font-size: 12px; font-weight: 400; color: #1954ed; text-decoration-line: underline; text-decoration: underline">[Website URL]</a>
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td></td>
</tr>
</table>
</body>
</html>

0 comments on commit c605d44

Please sign in to comment.