email-editor
Version:
Tool for writing email page.
81 lines (76 loc) • 13 kB
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Renew ${product_name} Pro Account</title>
</head>
<body style="border: 0; font: inherit; font-size: 100%; line-height: 1; margin: 0; outline: 0; padding: 0; vertical-align: middle;">
<table border="0" cellpadding="0" cellspacing="0" style="border: none; border-collapse: collapse; border-spacing: 0; font: inherit; font-size: 100%; margin: 0 auto; outline: 0; padding: 0; vertical-align: middle;" width="602" align="center">
<tbody style="border: 0; font: inherit; font-size: 100%; margin: 0; outline: 0; padding: 0; vertical-align: middle;">
<tr style="border: 0; font: inherit; font-size: 100%; margin: 0; outline: 0; padding: 0; vertical-align: middle;">
<td style="border: 0; font: inherit; font-size: 100%; margin: 0; outline: 0; padding: 0; vertical-align: middle;">
<div class="tick-email" style="border: 1px solid #d8e4f6; border-radius: 12px; font: inherit; font-family: -apple-system, '.SFNSText-Regular', 'Roboto', 'Segoe UI', 'Oxygen', 'Ubuntu', 'Cantarell', 'Microsoft Yahei', '微软雅黑', 'Helvetica Neue', 'メイリオ', 'ＭＳ Ｐゴシック', Arial, sans-serif; font-size: 100%; margin: 0 auto; margin-top: 30px; outline: 0; padding: 0; vertical-align: middle; width: 600px;">
<div class="e-header" style="border: 0; font: inherit; font-size: 100%; margin: 0; outline: 0; padding: 0; text-align: center; vertical-align: middle;">
<img src="https://${cdn_domain}/static/img/email/icons/logo.png" alt="${product_name} logo" width="48" style="border: 0; font: inherit; font-size: 100%; margin: 0; margin-top: 42px; outline: 0; padding: 0; vertical-align: middle;">
<div class="e-h" style="border: 0; font: inherit; font-size: 100%; margin: 0; outline: 0; padding: 0; padding-bottom: 0; padding-top: 22px; vertical-align: middle;">
<h3 style="border: 0; color: #4b4b4b; font: inherit; font-size: 28px; line-height: 1; margin: 0; outline: 0; padding: 0; vertical-align: middle;">Your Pro Account Will Expire</h3>
</div>
</div> <div class="e-section" style="border: 0; font: inherit; font-size: 100%; margin: 0 auto; outline: 0; padding: 0; text-align: center; vertical-align: middle; width: 480px;">
<p class="e-intro" style="border: 0; color: #979797; font: inherit; font-size: 16px; line-height: 26px; margin: 35px 0; outline: 0; padding: 0; vertical-align: middle;">
Dear ${user_display_name}, your Pro account will expire on <span class="e-warn" style="border: 0; color: #ffc817; font: inherit; font-size: 100%; margin: 0; outline: 0; padding: 0 4px; vertical-align: baseline;">${expires_date}</span>, you can renew now. ${product_name} will become better and better together with you.
</p>
</div>
<div class="e-section" style="border: 0; font: inherit; font-size: 100%; margin: 0 auto; outline: 0; padding: 0; text-align: center; vertical-align: middle; width: 480px;">
<a class="e-btn" href="http://${site_domain}/about/upgrade" style="background-color: #617fde; border: 0; border-color: #617fde; border-radius: 8px; color: #fff; cursor: pointer; display: block; font: inherit; font-size: 22px; height: 42px; line-height: 42px; margin: 0 auto; margin-bottom: 44px; outline: 0; padding: 0 10px; text-align: center; text-decoration: none; vertical-align: middle; width: 160px;">Renew Now</a>
</div> <div class="e-footer" style="background: #f7f7f7; border: 0; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; font: inherit; font-size: 100%; margin: 0; outline: 0; padding: 24px 0 20px; vertical-align: middle;">
<div class="e-platform" style="border: 0; font: inherit; font-size: 0; margin: 0; outline: 0; padding: 0 32px 18px 32px; text-align: center; vertical-align: middle;">
<h5 style="border: 0; color: #617fde; font: inherit; font-size: 14px; margin: 0; outline: 0; padding: 0; padding-bottom: 16px; vertical-align: middle;">Get ${product_name}</h5>
<ul class="pl" style="border: 0; font: inherit; font-size: 100%; list-style: none; margin: 0; outline: 0; padding: 0; vertical-align: middle;">
#if($is_cn_site=="false")
<li style="border: 0; display: inline-block; font: inherit; font-size: 100%; margin: 0 5px; outline: 0; padding: 0; vertical-align: top;"><a href="https://play.google.com/store/apps/details?id=com.ticktick.task" style="border: 0; color: #617fde; font: inherit; font-size: 12px; margin: 0; outline: 0; padding: 0; text-decoration: underline; vertical-align: middle;">Android</a></li>
<li style="border: 0; display: inline-block; font: inherit; font-size: 100%; margin: 0 5px; outline: 0; padding: 0; vertical-align: top;"><a href="https://itunes.apple.com/app/tick-tick/id626144601" style="border: 0; color: #617fde; font: inherit; font-size: 12px; margin: 0; outline: 0; padding: 0; text-decoration: underline; vertical-align: middle;">iPhone</a></li>
<li style="border: 0; display: inline-block; font: inherit; font-size: 100%; margin: 0 5px; outline: 0; padding: 0; vertical-align: top;"><a href="https://itunes.apple.com/app/tick-tick/id626144601" style="border: 0; color: #617fde; font: inherit; font-size: 12px; margin: 0; outline: 0; padding: 0; text-decoration: underline; vertical-align: middle;">iPad</a></li>
<li style="border: 0; display: inline-block; font: inherit; font-size: 100%; margin: 0 5px; outline: 0; padding: 0; vertical-align: top;"><a href="https://ticktick.com/signin" style="border: 0; color: #617fde; font: inherit; font-size: 12px; margin: 0; outline: 0; padding: 0; text-decoration: underline; vertical-align: middle;">Web</a></li>
<li style="border: 0; display: inline-block; font: inherit; font-size: 100%; margin: 0 5px; outline: 0; padding: 0; vertical-align: top;"><a href="https://ticktick.com/static/getApp/download?type=mac" style="border: 0; color: #617fde; font: inherit; font-size: 12px; margin: 0; outline: 0; padding: 0; text-decoration: underline; vertical-align: middle;">Mac</a></li>
<li style="border: 0; display: inline-block; font: inherit; font-size: 100%; margin: 0 5px; outline: 0; padding: 0; vertical-align: top;"><a href="https://itunes.apple.com/app/tick-tick/id626144601" style="border: 0; color: #617fde; font: inherit; font-size: 12px; margin: 0; outline: 0; padding: 0; text-decoration: underline; vertical-align: middle;">Apple Watch</a></li>
#else
<li style="border: 0; display: inline-block; font: inherit; font-size: 100%; margin: 0 5px; outline: 0; padding: 0; vertical-align: top;"><a href="https://${site_domain}.com/static/getApp/download?type=apk" style="border: 0; color: #617fde; font: inherit; font-size: 12px; margin: 0; outline: 0; padding: 0; text-decoration: underline; vertical-align: middle;">Android</a></li>
<li style="border: 0; display: inline-block; font: inherit; font-size: 100%; margin: 0 5px; outline: 0; padding: 0; vertical-align: top;"><a href="https://itunes.apple.com/cn/app/di-da-qing-dan-dai-ban-shi/id626144601?mt=8" style="border: 0; color: #617fde; font: inherit; font-size: 12px; margin: 0; outline: 0; padding: 0; text-decoration: underline; vertical-align: middle;">iPhone</a></li>
<li style="border: 0; display: inline-block; font: inherit; font-size: 100%; margin: 0 5px; outline: 0; padding: 0; vertical-align: top;"><a href="https://itunes.apple.com/cn/app/di-da-qing-dan-dai-ban-shi/id626144601?mt=8" style="border: 0; color: #617fde; font: inherit; font-size: 12px; margin: 0; outline: 0; padding: 0; text-decoration: underline; vertical-align: middle;">iPad</a></li>
<li style="border: 0; display: inline-block; font: inherit; font-size: 100%; margin: 0 5px; outline: 0; padding: 0; vertical-align: top;"><a href="https://${site_domain}.com/signin" style="border: 0; color: #617fde; font: inherit; font-size: 12px; margin: 0; outline: 0; padding: 0; text-decoration: underline; vertical-align: middle;">Web</a></li>
<li style="border: 0; display: inline-block; font: inherit; font-size: 100%; margin: 0 5px; outline: 0; padding: 0; vertical-align: top;"><a href="https://${site_domain}.com/static/getApp/download?type=mac" style="border: 0; color: #617fde; font: inherit; font-size: 12px; margin: 0; outline: 0; padding: 0; text-decoration: underline; vertical-align: middle;">Mac</a></li>
<li style="border: 0; display: inline-block; font: inherit; font-size: 100%; margin: 0 5px; outline: 0; padding: 0; vertical-align: top;"><a href="https://itunes.apple.com/cn/app/di-da-qing-dan-dai-ban-shi/id626144601?mt=8" style="border: 0; color: #617fde; font: inherit; font-size: 12px; margin: 0; outline: 0; padding: 0; text-decoration: underline; vertical-align: middle;">Apple Watch</a></li>
#end
</ul>
</div>
<div class="e-footer-sns" style="border: 0; font: inherit; font-size: 100%; margin: 0; outline: 0; padding: 0; text-align: center; vertical-align: middle;">
#if($is_cn_site=="false")
<a class="s-sina" href="https://www.facebook.com/TickTickApp" target="_blank" style="border: 0; color: #617fde; font: inherit; font-size: 100%; margin: 10px; outline: 0; padding: 0; position: relative; text-decoration: none; vertical-align: middle;">
<img src="https://${cdn_domain}/static/img/email/icons/f.png" alt="facebook" width="44" height="44" style="border: 0; font: inherit; font-size: 100%; margin: 0; outline: 0; padding: 0; vertical-align: middle;">
</a>
<a class="s-twitter" href="https://twitter.com/TickTickTeam" target="_blank" style="border: 0; color: #617fde; font: inherit; font-size: 100%; margin: 10px; outline: 0; padding: 0; position: relative; text-decoration: none; vertical-align: middle;">
<img src="https://${cdn_domain}/static/img/email/icons/t.png" alt="twitter" width="44" height="44" style="border: 0; font: inherit; font-size: 100%; margin: 0; outline: 0; padding: 0; vertical-align: middle;">
</a>
<a class="s-google" href="https://plus.google.com/106052725488609251300/posts" target="_blank" style="border: 0; color: #617fde; font: inherit; font-size: 100%; margin: 10px; outline: 0; padding: 0; position: relative; text-decoration: none; vertical-align: middle;">
<img src="https://${cdn_domain}/static/img/email/icons/g.png" alt="google" width="44" height="44" style="border: 0; font: inherit; font-size: 100%; margin: 0; outline: 0; padding: 0; vertical-align: middle;">
</a>
#else
<a class="s-sina" href="http://weibo.com/ticktickteam" target="_blank" style="border: 0; color: #617fde; font: inherit; font-size: 100%; margin: 10px; outline: 0; padding: 0; position: relative; text-decoration: none; vertical-align: middle;">
<img src="https://${cdn_domain}/static/img/email/icons/weibo.png" alt="weibo" width="44" height="44" style="border: 0; font: inherit; font-size: 100%; margin: 0; outline: 0; padding: 0; vertical-align: middle;">
</a>
<a class="s-douban" href="http://www.douban.com/people/99840312/" target="_blank" style="border: 0; color: #617fde; font: inherit; font-size: 100%; margin: 10px; outline: 0; padding: 0; position: relative; text-decoration: none; vertical-align: middle;">
<img src="https://${cdn_domain}/static/img/email/icons/douban.png" alt="douban" width="44" height="44" style="border: 0; font: inherit; font-size: 100%; margin: 0; outline: 0; padding: 0; vertical-align: middle;">
</a>
#end
</div>
<div class="e-help" style="border: 0; font: inherit; font-size: 100%; margin: 0; outline: 0; padding: 12px 0 20px 0; text-align: center; vertical-align: middle;">
<p style="border: 0; color: #999; font: inherit; font-size: 10px; line-height: 18px; margin: 0; outline: 0; padding: 0; vertical-align: middle;">If you need help or give us any feedback, please visit our <a href="https://help.${site_domain}.com" style="border: 0; color: #617fde; font: inherit; font-size: 100%; margin: 0; outline: 0; padding: 0; text-decoration: underline; vertical-align: middle;">Help Center</a>.</p>
<p style="border: 0; color: #999; font: inherit; font-size: 10px; line-height: 18px; margin: 0; outline: 0; padding: 0; vertical-align: middle;">${product_name} Team</p>
</div>
</div> </div>
</td>
</tr>
</tbody>
</table>
</body>
</html>