WikiLerni/views/wikilerni/mail.pug

173 lines
14 KiB
Plaintext

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office"><head>
head
meta(http-equiv="Content-Type" content="text/html; charset=UTF-8")
meta(name="viewport" content="initial-scale=1.0")
meta(name="format-detection" content="telephone=no")
title #{mailSubject}
style(type="text/css").
body{ margin: 0; padding: 0; }
img{ border: 0px; display: block; }
.socialLinks{ font-size: 6px; }
.socialLinks a{
display: inline-block;
}
.long-text p{ margin: 1em 0px; }
.long-text p:last-child{ margin-bottom: 0px; }
.long-text p:first-child{ margin-top: 0px; }
style(type="text/css").
/* yahoo, hotmail */
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div{ line-height: 100%; }
.yshortcuts a{ border-bottom: none !important; }
.vb-outer{ min-width: 0 !important; }
.RMsgBdy, .ExternalClass{
width: 100%;
background-color: #3f3f3f;
background-color: #8c599c}
/* outlook/office365 add buttons outside not-linked images and safari have 2px margin */
[o365] button{ margin: 0 !important; }
/* outlook */
table{ mso-table-rspace: 0pt; mso-table-lspace: 0pt; }
#outlook a{ padding: 0; }
img{ outline: none; text-decoration: none; border: none; -ms-interpolation-mode: bicubic; }
a img{ border: none; }
@media screen and (max-width: 600px) {
table.vb-container, table.vb-row{
width: 95% !important;
}
.mobile-hide{ display: none !important; }
.mobile-textcenter{ text-align: center !important; }
.mobile-full{
width: 100% !important;
max-width: none !important;
}
}
/* previously used also screen and (max-device-width: 600px) but Yahoo Mail doesn't support multiple queries */
style(type="text/css").
#ko_textBlock_5 .links-color a, #ko_textBlock_5 .links-color a:link, #ko_textBlock_5 .links-color a:visited, #ko_textBlock_5 .links-color a:hover{
color: #3f3f3f;
color: #3f3f3f;
text-decoration: underline
}
#ko_footerBlock_2 .links-color a, #ko_footerBlock_2 .links-color a:link, #ko_footerBlock_2 .links-color a:visited, #ko_footerBlock_2 .links-color a:hover{
color: #cccccc;
color: #cccccc;
text-decoration: underline
}
<!--[if !(gte mso 16)]-->
<body style="margin: 0; padding: 0; background-color: #8c599c; color: #919191;" vlink="#cccccc" text="#919191" bgcolor="#8c599c" alink="#cccccc"><!--<![endif]--><center>
<!-- preheaderBlock -->
<table role="presentation" class="vb-outer" style="background-color: #8c599c;" id="ko_preheaderBlock_1" width="100%" cellspacing="0" cellpadding="0" border="0" bgcolor="#8c599c">
<tbody><tr><td class="vb-outer" style="padding-left: 9px; padding-right: 9px; font-size: 0;" valign="top" align="center">
if(mailPreheader)
div(style="font-size:1px;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;") #{mailPreheader}
<!--[if (gte mso 9)|(lte ie 8)]><table role="presentation" align="center" border="0" cellspacing="0" cellpadding="0" width="570"><tr><td align="center" valign="top"><![endif]--><!-- --><div style="margin: 0 auto; max-width: 570px; -mru-width: 0px;"><table role="presentation" style="border-collapse: separate; width: 100%; mso-cellspacing: 0px; border-spacing: 0px; max-width: 570px; -mru-width: 0px;" class="vb-row" width="570" cellspacing="0" cellpadding="0" border="0">
<tbody><tr>
<td style="font-size: 0; padding: 0 9px;" valign="top" align="center"><div style="width: 100%; max-width: 552px; -mru-width: 0px;"><!--[if (gte mso 9)|(lte ie 8)]><table role="presentation" align="center" border="0" cellspacing="0" cellpadding="0" width="552"><tr><![endif]--><!-- --><!-- --><!--[if (gte mso 9)|(lte ie 8)]><td align="center" valign="top" width="570"><![endif]--><!-- --><div class="mobile-full" style="display: inline-block; vertical-align: top; width: 100%; max-width: 570px; -mru-width: 0px; min-width: calc(50%); max-width: calc(100%);width:100%;"><!-- --><table role="presentation" class="vb-content" style="border-collapse: separate; width: 100%; mso-cellspacing: 9px; border-spacing: 9px; -yandex-p: calc(2px - 3%);" width="570" cellspacing="9" cellpadding="0" border="0" align="center">
<tbody><tr><td style="font-weight: normal; color: #ffffff; font-size: 13px; font-family: Arial, Helvetica, sans-serif; text-align: left;" width="100%" valign="top" align="left">
a(style="color: #FFFFFF; text-decoration: underline;" target="_new" href=mailHeaderLinkUrl) #{mailHeaderLinkTxt}
</td></tr>
</tbody></table><!-- --></div><!--[if (gte mso 9)|(lte ie 8)]></td><![endif]--><!-- -->
<!-- --></div><!--[if (gte mso 9)|(lte ie 8)]></td><![endif]--><!-- --><!-- --><!--[if (gte mso 9)|(lte ie 8)]></tr></table><![endif]--></div></td>
</tr>
</tbody></table></div><!-- --><!--[if (gte mso 9)|(lte ie 8)]></td></tr></table><![endif]-->
</td></tr>
</tbody></table>
<!-- /preheaderBlock -->
<table role="presentation" class="vb-outer" style="background-color: #8c599c;" id="ko_logoBlock_3" width="100%" cellspacing="0" cellpadding="0" border="0" bgcolor="#8c599c">
<tbody><tr><td class="vb-outer" style="padding-left: 9px; padding-right: 9px; font-size: 0;" valign="top" align="center">
<!--[if (gte mso 9)|(lte ie 8)]><table role="presentation" align="center" border="0" cellspacing="0" cellpadding="0" width="570"><tr><td align="center" valign="top"><![endif]--><!-- --><div style="margin: 0 auto; max-width: 570px; -mru-width: 0px;"><table role="presentation" class="vb-row" style="border-collapse: separate; width: 100%; background-color: #FF8800;background-image: url('https://www.wikilerni.com/themes/wikilerni/img/background-texture.png'); mso-cellspacing: 9px; border-spacing: 9px; max-width: 570px; -mru-width: 0px;" width="570" cellspacing="9" cellpadding="0" border="0" bgcolor="#FF8800">
<tbody><tr>
<td style="font-size: 0;" valign="top" align="center"><div style="vertical-align: top; width: 100%; max-width: 184px; -mru-width: 0px;"><!-- --><table role="presentation" class="vb-content" style="border-collapse: separate; width: 100%; mso-cellspacing: 9px; border-spacing: 9px;" width="184" cellspacing="9" cellpadding="0" border="0">
<tbody><tr><td class="links-color" width="100%" valign="top" align="center"><!--[if (lte ie 8)]><div style="display: inline-block; width: 166px; -mru-width: 0px;"><![endif]-->
a(target="_new" href=siteUrl)
img(alt="Logo" style="border:0px;display:block;vertical-align:top;height:auto;margin:0 auto;color:#ffffff;font-size:15px;font-family:Arial,Helvetica,sans-serif;width:100%;max-width:166px;height:auto;" src="https://www.wikilerni.com/themes/wikilerni/img/wikilerni-purple-2-128.png" width="128" vspace="0" hspace="0" border="0" align="middle")
<!--[if (lte ie 8)]></div><![endif]--></td></tr>
</tbody></table></div></td>
</tr>
</tbody></table></div><!-- --><!--[if (gte mso 9)|(lte ie 8)]></td></tr></table><![endif]-->
</td></tr>
</tbody></table>
<table role="presentation" class="vb-outer" style="background-color: #8c599c;" id="ko_titleBlock_4" width="100%" cellspacing="0" cellpadding="0" border="0" bgcolor="#8c599c">
<tbody><tr><td class="vb-outer" style="padding-left: 9px; padding-right: 9px; font-size: 0;" valign="top" align="center">
<!--[if (gte mso 9)|(lte ie 8)]><table role="presentation" align="center" border="0" cellspacing="0" cellpadding="0" width="570"><tr><td align="center" valign="top"><![endif]--><!-- --><div style="margin: 0 auto; max-width: 570px; -mru-width: 0px;"><table role="presentation" class="vb-row" style="border-collapse: separate; width: 100%; background-color: #FF8800;background-image:url('https://www.wikilerni.com/themes/wikilerni/img/background-texture.png'); mso-cellspacing: 0px; border-spacing: 0px; max-width: 570px; -mru-width: 0px;" width="570" cellspacing="0" cellpadding="0" border="0" bgcolor="#FF8800">
<tbody><tr>
<td style="font-size: 0; padding: 0 9px;" valign="top" align="center"><div style="vertical-align: top; width: 100%; max-width: 552px; -mru-width: 0px;"><!-- --><table role="presentation" class="vb-content" style="border-collapse: separate; width: 100%; mso-cellspacing: 9px; border-spacing: 9px;" width="552" cellspacing="9" cellpadding="0" border="0">
<tbody><tr>
<td style="font-weight: normal; color: #f2f2f2; font-size: 22px; font-family: Arial, Helvetica, sans-serif; text-align: center;" width="100%" valign="top" align="center">
span(style="font-weight: normal;") #{mailTitle}
</td>
</tr>
</tbody></table></div></td>
</tr>
</tbody></table></div><!-- --><!--[if (gte mso 9)|(lte ie 8)]></td></tr></table><![endif]-->
</td></tr>
</tbody></table>
<table role="presentation" class="vb-outer" style="background-color: #8c599c;" id="ko_textBlock_5" width="100%" cellspacing="0" cellpadding="0" border="0" bgcolor="#8c599c">
<tbody><tr><td class="vb-outer" style="padding-left: 9px; padding-right: 9px; font-size: 0;" valign="top" align="center">
<!--[if (gte mso 9)|(lte ie 8)]><table role="presentation" align="center" border="0" cellspacing="0" cellpadding="0" width="570"><tr><td align="center" valign="top"><![endif]--><!-- -->
<div style="margin: 0 auto; max-width: 570px; -mru-width: 0px;"><table role="presentation" class="vb-container" style="border-collapse: separate; width: 100%; background-color: #FF8800;background-image:url('https://www.wikilerni.com/themes/wikilerni/img/background-texture.png'); mso-cellspacing: 18px; border-spacing: 18px; max-width: 570px; -mru-width: 0px;" width="570" cellspacing="18" cellpadding="0" border="0" bgcolor="#FF8800">
<tbody><tr>
td(class="long-text links-color" style="font-weight: normal; color: #ffffff; font-size: 15px; font-family: Arial, Helvetica, sans-serif; text-align: left; line-height: normal;" width="100%" valign="top" align="left") !{mailMainContent}
</tr>
</tbody></table></div><!-- --><!--[if (gte mso 9)|(lte ie 8)]></td></tr></table><![endif]-->
</td></tr>
</tbody></table>
<table role="presentation" class="vb-outer" style="background-color: #8c599c;" id="ko_buttonBlock_6" width="100%" cellspacing="0" cellpadding="0" border="0" bgcolor="#8c599c">
<tbody><tr><td class="vb-outer" style="padding-left: 9px; padding-right: 9px; font-size: 0;" valign="top" align="center">
<!--[if (gte mso 9)|(lte ie 8)]><table role="presentation" align="center" border="0" cellspacing="0" cellpadding="0" width="570"><tr><td align="center" valign="top"><![endif]--><!-- --><div style="margin: 0 auto; max-width: 570px; -mru-width: 0px;"><table role="presentation" class="vb-container" style="border-collapse: separate; width: 100%; background-color: #FF8800;background-image:url('https://www.wikilerni.com/themes/wikilerni/img/background-texture.png'); mso-cellspacing: 18px; border-spacing: 18px; max-width: 570px; -mru-width: 0px;" width="570" cellspacing="18" cellpadding="0" border="0" bgcolor="#FF8800">
<tbody><tr>
<td valign="top" align="center"><table role="presentation" style="border-spacing: 0; mso-padding-alt: 12px 12px 12px 12px;" cellspacing="0" cellpadding="12" border="0" align="center">
if linksCTA
tbody
for link in linksCTA
tr
td(style="text-align:center;font-weight:normal;padding:12px;padding-left:14px;padding-right:14px;background-color:#8c599c;background-image:url('https://www.wikilerni.com/themes/wikilerni/img/background-texture.png');color:#f2f2f2;font-size:22px;font-family:Arial,Helvetica,sans-serif;border-radius:10px;" width="auto" valign="middle" bgcolor="#8c599c;" align="center")
a(style="text-decoration:none;font-weight:normal;color:#f2f2f2;font-size:22px;font-family:Arial,Helvetica,sans-serif;" target="_new" href=link.url) #{link.txt}
tr
td
</table></td>
</tr>
</tbody></table></div><!-- --><!--[if (gte mso 9)|(lte ie 8)]></td></tr></table><![endif]-->
</td></tr>
</tbody></table>
<!-- footerBlock -->
<table role="presentation" class="vb-outer" style="background-color: #8c599c;" id="ko_footerBlock_2" width="100%" cellspacing="0" cellpadding="0" border="0" bgcolor="#8c599c">
<tbody><tr><td class="vb-outer" style="padding-left: 9px; padding-right: 9px; font-size: 0;" valign="top" align="center">
<!--[if (gte mso 9)|(lte ie 8)]><table role="presentation" align="center" border="0" cellspacing="0" cellpadding="0" width="570"><tr><td align="center" valign="top"><![endif]--><!-- --><div style="margin: 0 auto; max-width: 570px; -mru-width: 0px;"><table role="presentation" style="border-collapse: separate; width: 100%; mso-cellspacing: 0px; border-spacing: 0px; max-width: 570px; -mru-width: 0px;" class="vb-row" width="570" cellspacing="0" cellpadding="0" border="0">
<tbody><tr>
<td style="font-size: 0; padding: 0 9px;" valign="top" align="center"><div style="vertical-align: top; width: 100%; max-width: 552px; -mru-width: 0px;"><!-- --><table role="presentation" class="vb-content" style="border-collapse: separate; width: 100%; mso-cellspacing: 9px; border-spacing: 9px;" width="552" cellspacing="9" cellpadding="0" border="0">
<tbody><tr><td class="long-text links-color" style="font-weight: normal; color: #FFFFFF; font-size: 13px; font-family: Arial, Helvetica, sans-serif; text-align: center;" width="100%" valign="top" align="center">
p(style="margin:1em0px;margin-bottom:0px;margin-top:0px;") #{mailRecipientTxt} #{mailRecipientAddress}
</td></tr>
<tr>
td(style="font-weight:normal;color:#FFFFFF;font-size:13px;font-family:Arial,Helvetica,sans-serif;text-align:center;" width="100%" valign="top" align="center")
- let url;
for item in footLinks
-
url=item.attributes.href;
if(url.indexOf("http")!==0)
url=siteUrl+url
a(href=url style="color:#FFFFFF;text-decoration:underline;" target="_new") #{item.anchor}
span(style="padding:0 1px") |
</td></tr>
</tbody></table></div></td>
</tr>
</center><!--[if !(gte mso 16)]--></body><!--<![endif]--></html>