storj/web/satellite/static/emails/Invite.html
Jeremy Wharton 3720afb81b web/satellite: Update emails to be consistent with deployed code
Update the forgot password, invite, and welcome emails to be
cosistent with deployed code. This change is part of an ongoing
effort to remove code from the branding repo.

Change-Id: I6edb6811904552c1cf7761b96bc9aa879c2eb154
2021-07-26 22:49:28 +00:00

581 lines
26 KiB
HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--[if IE]><html xmlns="http://www.w3.org/1999/xhtml" class="ie"><![endif]--><!--[if !IE]><!-->
<html style="margin: 0;padding: 0;" xmlns="http://www.w3.org/1999/xhtml" xmlns="http://www.w3.org/1999/html"><!--<![endif]-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<!--[if !mso]><!--><meta http-equiv="X-UA-Compatible" content="IE=edge" /><!--<![endif]-->
<meta name="viewport" content="width=device-width" />
<style type="text/css">
@media only screen and (min-width: 620px) {
.wrapper {
min-width: 600px !important
}
.wrapper h1 {}
.wrapper h1 {
font-size: 64px !important;
line-height: 63px !important
}
.wrapper h2 {}
.wrapper h2 {
font-size: 30px !important;
line-height: 38px !important
}
.wrapper h3 {}
.wrapper h3 {
font-size: 22px !important;
line-height: 31px !important
}
.wrapper .size-10 {
font-size: 10px !important;
line-height: 18px !important
}
.wrapper .size-12 {
font-size: 12px !important;
line-height: 19px !important
}
.wrapper .size-20 {
font-size: 20px !important;
line-height: 28px !important
}
.wrapper .size-40 {
font-size: 40px !important;
line-height: 47px !important
}
}
</style>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
table {
border-collapse: collapse;
table-layout: fixed;
}
* {
line-height: inherit;
}
[x-apple-data-detectors],
[href^="tel"],
[href^="sms"] {
color: inherit !important;
text-decoration: none !important;
}
.wrapper .footer__share-button a:hover,
.wrapper .footer__share-button a:focus {
color: #ffffff !important;
}
.btn a:hover,
.btn a:focus,
.footer__share-button a:hover,
.footer__share-button a:focus,
.email-footer__links a:hover,
.email-footer__links a:focus {
opacity: 0.8;
}
.layout,
.column {
transition: width 0.25s ease-in-out, max-width 0.25s ease-in-out;
}
.preheader td {
padding-bottom: 8px;
}
.layout {
max-width: 400px !important;
-fallback-width: 95% !important;
width: calc(100% - 20px) !important;
}
.column {
max-width: 400px !important;
width: 100% !important;
}
.fixed-width.has-border .layout__inner {
box-sizing: border-box;
}
[owa] .column div,
[owa] .column button {
display: block !important;
}
.ie .column,
[owa] .column {
display: table-cell;
float: none !important;
vertical-align: top;
}
.ie .layout,
[owa] .layout,
.ie .one-col .column,
[owa] .one-col .column {
max-width: 600px !important;
width: 600px !important;
}
.ie .two-col .column,
[owa] .two-col .column {
max-width: 300px !important;
width: 300px !important;
}
.ie .three-col .column,
[owa] .three-col .column {
max-width: 200px !important;
width: 200px !important;
}
.ie .two-col.has-gutter .column,
[owa] .two-col.x_has-gutter .column {
max-width: 290px !important;
width: 290px !important;
}
.ie .three-col.has-gutter .column,
[owa] .three-col.x_has-gutter .column,
.ie .has-gutter .narrow,
[owa] .has-gutter .narrow {
max-width: 188px !important;
width: 188px !important;
}
.ie .has-gutter .wide,
[owa] .has-gutter .wide {
max-width: 394px !important;
width: 394px !important;
}
.ie .two-col.has-gutter.has-border .column,
[owa] .two-col.x_has-gutter.x_has-border .column {
max-width: 292px !important;
width: 292px !important;
}
.ie .three-col.has-gutter.has-border .column,
[owa] .three-col.x_has-gutter.x_has-border .column,
.ie .has-gutter.has-border .narrow,
[owa] .has-gutter.x_has-border .narrow {
max-width: 190px !important;
width: 190px !important;
}
.ie .has-gutter.has-border .wide,
[owa] .has-gutter.x_has-border .wide {
max-width: 396px !important;
width: 396px !important;
}
.ie .fixed-width .layout__inner {
border-left: 0 none white !important;
border-right: 0 none white !important;
}
.layout-fixed-width {
background-color: #ffffff;
}
@media only screen and (min-width: 620px) {
.column {
display: table-cell;
Float: none !important;
vertical-align: top;
}
.layout,
.one-col .column {
max-width: 600px !important;
width: 600px !important;
}
.two-col .column {
max-width: 300px !important;
width: 300px !important;
}
.three-col .column {
max-width: 200px !important;
width: 200px !important;
}
.two-col.has-gutter .column,
.two-col.ecxhas-gutter .column {
max-width: 290px !important;
width: 290px !important;
}
.three-col.has-gutter .column,
.three-col.ecxhas-gutter .column {
max-width: 188px !important;
width: 188px !important;
}
.two-col.has-gutter.has-border .column,
.two-col.ecxhas-gutter.ecxhas-border .column {
max-width: 292px !important;
width: 292px !important;
}
.three-col.has-gutter.has-border .column,
.three-col.ecxhas-gutter.ecxhas-border .column,
.has-gutter.has-border .narrow,
.has-gutter.ecxhas-border .narrow {
max-width: 190px !important;
width: 190px !important;
}
.has-gutter.has-border .wide,
.has-gutter.ecxhas-border .wide {
max-width: 396px !important;
width: 396px !important;
}
}
@media (max-width: 321px) {
.fixed-width.has-border .layout__inner {
border-width: 1px 0 !important;
}
.layout,
.column {
min-width: 320px !important;
width: 320px !important;
}
}
.mso div {
border: 0 none white !important;
}
.mso .w560 .divider {
Margin-left: 260px !important;
Margin-right: 260px !important;
}
.mso .w360 .divider {
Margin-left: 160px !important;
Margin-right: 160px !important;
}
.mso .w260 .divider {
Margin-left: 110px !important;
Margin-right: 110px !important;
}
.mso .w160 .divider {
Margin-left: 60px !important;
Margin-right: 60px !important;
}
.mso .w354 .divider {
Margin-left: 157px !important;
Margin-right: 157px !important;
}
.mso .w250 .divider {
Margin-left: 105px !important;
Margin-right: 105px !important;
}
.mso .w148 .divider {
Margin-left: 54px !important;
Margin-right: 54px !important;
}
.mso .size-10,
.ie .size-10 {
font-size: 10px !important;
line-height: 18px !important;
}
.mso .size-12,
.ie .size-12 {
font-size: 12px !important;
line-height: 19px !important;
}
.mso .size-20,
.ie .size-20 {
font-size: 20px !important;
line-height: 28px !important;
}
.mso .size-40,
.ie .size-40 {
font-size: 40px !important;
line-height: 47px !important;
}
</style>
<!--[if !mso]><!-->
<style type="text/css">
@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700,400italic);
</style>
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700,400italic" rel="stylesheet" type="text/css" />
<!--<![endif]-->
<style type="text/css">
body {
background-color: #fff
}
.logo a:hover,
.logo a:focus {
color: #859bb1 !important
}
.mso h1,
.ie h1 {
font-size: 64px !important;
line-height: 63px !important
}
.mso h2,
.ie h2 {
font-size: 30px !important;
line-height: 38px !important
}
.mso h3,
.ie h3 {
font-size: 22px !important;
line-height: 31px !important
}
.mso .footer__share-button p {
font-family: sans-serif
}
</style>
<meta name="robots" content="noindex,nofollow" />
<meta property="og:title" content="My First Campaign" />
</head>
<!--[if mso]>
<body class="mso">
<![endif]-->
<!--[if !mso]><!-->
<body class="half-padding" style="margin: 0;padding: 0;-webkit-text-size-adjust: 100%;">
<!--<![endif]-->
<table class="wrapper"
style="border-collapse: collapse;table-layout: fixed;min-width: 320px;width: 100%;background-color: #fff;"
cellpadding="0" cellspacing="0" role="presentation">
<tbody>
<tr>
<td>
<div role="section">
<div class="layout one-col fixed-width"
style="Margin: 0 auto;max-width: 600px;min-width: 320px;width: calc(28000% - 167400px);
overflow-wrap: break-word;word-wrap: break-word;word-break: break-word;">
<div class="layout__inner" style="border-collapse: collapse;display: table;width: 100%;background-color: #fff;">
<!--[if (mso)|(IE)]>
<table align="center" cellpadding="0" cellspacing="0" role="presentation">
<tr class="layout-fixed-width" style="background-color: #fff;">
<td style="width: 600px" class="w560">
<![endif]-->
<div class="column"
style="text-align: left;color: #8e959c;font-size: 14px;line-height: 21px;font-family: sans-serif;
max-width: 600px;min-width: 320px;width: calc(28000% - 167400px);">
<div style="margin: 12px 20px">
<div style="mso-line-height-rule: exactly;mso-text-raise: 4px;">
<h1 class="size-40"
style="Margin-top: 0;Margin-bottom: 0;font-style: normal;font-weight: normal;
color: #000;font-size: 32px;line-height: 40px;
font-family: montserrat,dejavu sans,verdana,sans-serif;" lang="x-size-40">
<span class="font-montserrat">
<strong>Hi {{ .UserName }},</strong>
</span>
</h1>
</div>
</div>
</div>
<!--[if (mso)|(IE)]></td></tr></table><![endif]-->
</div>
</div>
<div style="mso-line-height-rule: exactly;line-height: 20px;font-size: 20px;">&nbsp;</div>
<div class="layout one-col fixed-width"
style="Margin: 0 auto;max-width: 600px;min-width: 320px;width: calc(28000% - 167400px);
overflow-wrap: break-word;word-wrap: break-word;word-break: break-word;">
<div class="layout__inner" style="border-collapse: collapse;display: table;width: 100%;background-color: #fff;">
<!--[if (mso)|(IE)]>
<table align="center" cellpadding="0" cellspacing="0" role="presentation">
<tr class="layout-fixed-width" style="background-color: #fff;">
<td style="width: 600px" class="w560">
<![endif]-->
<div class="column"
style="text-align: left;color: #8e959c;font-size: 14px;line-height: 21px;font-family: sans-serif;
max-width: 600px;min-width: 320px;width: calc(28000% - 167400px);">
<div style="margin: 12px 20px">
<div style="mso-line-height-rule: exactly;mso-text-raise: 4px;">
<p class="size-20" style="Margin-top: 0;Margin-bottom: 0;font-family: montserrat,dejavu sans,verdana,sans-serif;font-size: 17px;line-height: 26px;" lang="x-size-20">
<span class="font-montserrat">You were invited to the
<a href="{{ .Origin }}" style="color: #2683ff; text-decoration: none; font-weight: bold">{{ .ProjectName }}</a>
on Storj DCS
</span>
</p>
<p class="size-20"
style="Margin-top: 5px;Margin-bottom: 0;
font-family: montserrat,dejavu sans,verdana,sans-serif;font-size: 17px;line-height: 26px;"
lang="x-size-20">
<span class="font-montserrat"><br/>Log in and interact with the project!</span>
</p>
</div>
</div>
</div>
<!--[if (mso)|(IE)]></td></tr></table><![endif]-->
</div>
</div>
<div style="mso-line-height-rule: exactly;line-height: 20px;font-size: 20px;">&nbsp;</div>
<div class="layout one-col fixed-width"
style="Margin: 0 auto;max-width: 600px;min-width: 320px;width: calc(28000% - 167400px);
overflow-wrap: break-word;word-wrap: break-word;word-break: break-word;">
<div class="layout__inner" style="border-collapse: collapse;display: table;width: 100%;background-color: #fff;">
<!--[if (mso)|(IE)]>
<table align="center" cellpadding="0" cellspacing="0" role="presentation">
<tr class="layout-fixed-width" style="background-color: #fff;">
<td style="width: 600px" class="w560">
<![endif]-->
<div class="column"
style="text-align: left;color: #8e959c;font-size: 14px;line-height: 21px;font-family: sans-serif;
max-width: 600px;min-width: 320px;width: calc(28000% - 167400px);">
<div style="margin: 12px 20px">
<div class="btn btn--flat btn--large" style="text-align:left;">
<a style="border-radius: 4px;display: inline-block;font-size: 14px;font-weight: bold;
line-height: 24px;padding: 12px 50px;text-align: center;
text-decoration: none !important;transition: opacity 0.1s ease-in;
color: #ffffff !important;background-color: #2683ff;
font-family: Montserrat, DejaVu Sans, Verdana, sans-serif;" href="{{ .SignInLink }}"
target="_blank">Sign In
</a>
<!--[if mso]>
<p style="line-height:0;margin:0;"></p>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" href="{{ .SignInLink }}"
style="width:191px" arcsize="9%" fillcolor="#2683FF" stroke="f">
<v:textbox style="mso-fit-shape-to-text:t" inset="0px,11px,0px,11px">
<center style="font-size:14px;line-height:24px;color:#FFFFFF;
font-family:Montserrat,DejaVu Sans,Verdana,sans-serif;font-weight:bold;
mso-line-height-rule:exactly;mso-text-raise:4px">Sign In
</center>
</v:textbox>
</v:roundrect>
<![endif]-->
</div>
</div>
</div>
<!--[if (mso)|(IE)]></td></tr></table><![endif]-->
</div>
</div>
<div style="mso-line-height-rule: exactly;line-height: 20px;font-size: 20px;">&nbsp;</div>
<div class="layout one-col fixed-width"
style="Margin: 0 auto;max-width: 600px;min-width: 320px;width: calc(28000% - 167400px);
overflow-wrap: break-word;word-wrap: break-word;word-break: break-word;">
<div class="layout__inner" style="border-collapse: collapse;display: table;width: 100%;background-color: #fff;">
<!--[if (mso)|(IE)]>
<table align="center" cellpadding="0" cellspacing="0" role="presentation">
<tr class="layout-fixed-width" style="background-color: #fff;">
<td style="width: 600px" class="w560">
<![endif]-->
<div class="column"
style="text-align: left;color: #8e959c;font-size: 14px;line-height: 21px;font-family: sans-serif;
max-width: 600px;min-width: 320px; width: calc(28000% - 167400px);">
<div style="Margin-left: 20px;Margin-right: 20px;Margin-top: 12px;">
<div class="divider"
style="display: block;font-size: 2px;line-height: 1px;Margin-left: auto;Margin-right: auto;
width: 100%;background-color: #ccc;Margin-bottom: 20px;">&nbsp
</div>
</div>
</div>
<!--[if (mso)|(IE)]></td></tr></table><![endif]-->
</div>
</div>
<div style="mso-line-height-rule: exactly;line-height: 20px;font-size: 20px;">&nbsp;</div>
<div class="layout one-col fixed-width"
style="Margin: 0 auto;max-width: 600px;min-width: 320px;width: calc(28000% - 167400px);
overflow-wrap: break-word;word-wrap: break-word;word-break: break-word;">
<div class="layout__inner" style="border-collapse: collapse;display: table;width: 100%;background-color: #fff;">
<!--[if (mso)|(IE)]>
<table align="center" cellpadding="0" cellspacing="0" role="presentation">
<tr class="layout-fixed-width" style="background-color: #fff;">
<td style="width: 600px" class="w560">
<![endif]-->
<div class="column"
style="text-align: left;color: #8e959c;font-size: 14px;line-height: 21px;font-family: sans-serif;
max-width: 600px;min-width: 320px;width: calc(28000% - 167400px);">
<div style="margin: 12px 20px">
<div style="mso-line-height-rule: exactly;mso-text-raise: 4px;">
<p class="size-12"
style="Margin-top: 0;Margin-bottom: 0;
font-family: montserrat,dejavu sans,verdana,sans-serif;font-size: 12px;
line-height: 19px;" lang="x-size-12">
<span class="font-montserrat">Please do not reply to this email.</span>
</p>
</div>
</div>
</div>
<!--[if (mso)|(IE)]></td></tr></table><![endif]-->
</div>
</div>
<div style="mso-line-height-rule: exactly;line-height: 20px;font-size: 20px;">&nbsp;</div>
<div class="layout three-col fixed-width"
style="Margin: 0 auto;max-width: 600px;min-width: 320px;width: calc(28000% - 167400px);
overflow-wrap: break-word;word-wrap: break-word;word-break: break-word;">
<div class="layout__inner" style="border-collapse: collapse;display: table;width: 100%;background-color: #fff;">
<!--[if (mso)|(IE)]>
<table align="center" cellpadding="0" cellspacing="0" role="presentation">
<tr class="layout-fixed-width" style="background-color: #fff;">
<td style="width: 200px" valign="top" class="w160">
<![endif]-->
<div class="column"
style="text-align: left;color: #8e959c;font-size: 14px;line-height: 21px;font-family: sans-serif;
Float: left;max-width: 320px;min-width: 200px;width: calc(72200px - 12000%);">
<div style="margin: 0 20px">
<div style="mso-line-height-rule: exactly;mso-text-raise: 4px;">
<a href="https://supportdcs.storj.io/"
style="text-decoration: none; color: #66686C;" target="_blank">
<p class="size-12"
style="Margin-top: 0;Margin-bottom: 0;
font-family: montserrat,dejavu sans,verdana,sans-serif;font-size: 12px;
line-height: 19px;" lang="x-size-12">
<span class="font-montserrat">
<strong>Support</strong>
</span>
</p>
</a>
</div>
</div>
</div>
<!--[if (mso)|(IE)]></td><td style="width: 200px" valign="top" class="w160"><![endif]-->
<div class="column"
style="text-align: left;color: #8e959c;font-size: 14px;line-height: 21px;font-family: sans-serif;
Float: left;max-width: 320px;min-width: 200px;width: calc(72200px - 12000%);">
<div style="margin: 0 20px">
<div style="mso-line-height-rule: exactly;mso-text-raise: 4px;">
<a href="{{ .ContactInfoURL }}" style="text-decoration: none; color: #66686C;" target="_blank">
<p class="size-12"
style="Margin-top: 0;Margin-bottom: 0;
font-family: montserrat,dejavu sans,verdana,sans-serif;font-size: 12px;
line-height: 19px;" lang="x-size-12">
<span class="font-montserrat">
<strong>Contact Info</strong>
</span>
</p>
</a>
</div>
</div>
</div>
<!--[if (mso)|(IE)]></td><td style="width: 100px" valign="top" class="w160"><![endif]-->
<div class="column"
style="text-align: left;color: #8e959c;font-size: 14px;line-height: 21px;font-family: sans-serif;
Float: left;max-width: 150px;min-width: 100px;width: calc(72200px - 12000%);">
<div style="margin: 0 20px">
<div style="mso-line-height-rule: exactly;mso-text-raise: 4px;">
<a href="{{ .TermsAndConditionsURL }}" target="_blank" style="text-decoration: none; color: #66686C;">
<p class="size-12"
style="Margin-top: 0;Margin-bottom: 0;
font-family: montserrat,dejavu sans,verdana,sans-serif;font-size: 12px;
line-height: 19px;" lang="x-size-12">
<span class="font-montserrat">
<strong>Terms &amp; Conditions</strong><br/>
&nbsp; </span>
</p>
</a>
</div>
</div>
</div>
<!--[if (mso)|(IE)]></td></tr></table><![endif]-->
</div>
</div>
<div class="layout one-col fixed-width"
style="Margin: 0 auto;max-width: 600px;min-width: 320px;width: calc(28000% - 167400px);
overflow-wrap: break-word;word-wrap: break-word;word-break: break-word;">
<div class="layout__inner" style="border-collapse: collapse;display: table;width: 100%;background-color: #fff;">
<!--[if (mso)|(IE)]>
<table align="center" cellpadding="0" cellspacing="0" role="presentation">
<tr class="layout-fixed-width" style="background-color: #fff;">
<td style="width: 600px" class="w560">
<![endif]-->
<div class="column"
style="text-align: left;color: #8e959c;font-size: 14px;line-height: 21px;font-family: sans-serif;
max-width: 600px;min-width: 320px;width: calc(28000% - 167400px);">
<div style="margin: 0 20px 12px 20px">
<div style="mso-line-height-rule: exactly;mso-text-raise: 4px;">
<p class="size-10"
style="Margin-top: 0;Margin-bottom: 0;
font-family: montserrat,dejavu sans,verdana,sans-serif;font-size: 10px;line-height: 18px;"
lang="x-size-10">
<span class="font-montserrat">Storj Labs Inc 2019.<br/></span>
</p>
</div>
</div>
</div>
<!--[if (mso)|(IE)]></td></tr></table><![endif]-->
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>