Max Yakovenko
8 years ago
parent
6a6aaede78
commit
ff3cc9837c
3 changed files with 461 additions and 16 deletions
@ -1,10 +1,35 @@ |
|||||||
<!DOCTYPE html> |
{% extends 'emails/email_base.html' %} |
||||||
<html lang="en"> |
{% block title %} |
||||||
<head> |
Активация учетной записи |
||||||
<meta charset="UTF-8"> |
{% endblock title %} |
||||||
<title>$Title$</title> |
{% block email_body %} |
||||||
</head> |
<table border="0" cellpadding="0" cellspacing="0"> |
||||||
<body> |
<tr> |
||||||
$END$ |
<td> |
||||||
</body> |
<p>Здравствуйте!</p> |
||||||
</html> |
<p>Спасибо за регистрацию на сайте {{ request.get_host }}</p> |
||||||
|
<p>Для того чтобы войти в свой аккуант его нужно активировать.\n |
||||||
|
Чтобы активировать ваш аккаунт, перейдите по ссылке:</p> |
||||||
|
<table border="0" cellpadding="0" cellspacing="0" class="btn btn-primary"> |
||||||
|
<tbody> |
||||||
|
<tr> |
||||||
|
<td align="left"> |
||||||
|
<table border="0" cellpadding="0" cellspacing="0"> |
||||||
|
<tbody> |
||||||
|
<tr> |
||||||
|
<td><a href="http://htmlemail.io" target="_blank">Активация</a></td> |
||||||
|
</tr> |
||||||
|
</tbody> |
||||||
|
</table> |
||||||
|
</td> |
||||||
|
</tr> |
||||||
|
</tbody> |
||||||
|
</table> |
||||||
|
<p>This is a really simple email template. Its sole purpose is to get the |
||||||
|
recipient to click the button with no distractions.</p> |
||||||
|
<p>С уважением, Администрация сайта {{ request.get_host }}</p> |
||||||
|
</td> |
||||||
|
</tr> |
||||||
|
</table> |
||||||
|
|
||||||
|
{% endblock email_body %} |
||||||
|
|||||||
@ -1,10 +1,396 @@ |
|||||||
<!DOCTYPE html> |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" |
||||||
<html lang="en"> |
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
||||||
|
<html xmlns="http://www.w3.org/1999/xhtml" lang="en"> |
||||||
<head> |
<head> |
||||||
<meta charset="UTF-8"> |
<meta charset="UTF-8"> |
||||||
<title>$Title$</title> |
<title>{{ title }}</title> |
||||||
|
<meta name="viewport" content="width=device-width"/> |
||||||
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> |
||||||
|
<style> |
||||||
|
/* ------------------------------------- |
||||||
|
GLOBAL RESETS |
||||||
|
------------------------------------- */ |
||||||
|
img { |
||||||
|
border: none; |
||||||
|
-ms-interpolation-mode: bicubic; |
||||||
|
max-width: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
body { |
||||||
|
background-color: #f6f6f6; |
||||||
|
font-family: sans-serif; |
||||||
|
-webkit-font-smoothing: antialiased; |
||||||
|
font-size: 14px; |
||||||
|
line-height: 1.4; |
||||||
|
margin: 0; |
||||||
|
padding: 0; |
||||||
|
-ms-text-size-adjust: 100%; |
||||||
|
-webkit-text-size-adjust: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
table { |
||||||
|
border-collapse: separate; |
||||||
|
mso-table-lspace: 0pt; |
||||||
|
mso-table-rspace: 0pt; |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
table td { |
||||||
|
font-family: sans-serif; |
||||||
|
font-size: 14px; |
||||||
|
vertical-align: top; |
||||||
|
} |
||||||
|
|
||||||
|
/* ------------------------------------- |
||||||
|
BODY & CONTAINER |
||||||
|
------------------------------------- */ |
||||||
|
|
||||||
|
.body { |
||||||
|
background-color: #f6f6f6; |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
/* Set a max-width, and make it display as block so it will automatically stretch to that width, but will also shrink down on a phone or something */ |
||||||
|
.container { |
||||||
|
display: block; |
||||||
|
Margin: 0 auto !important; |
||||||
|
/* makes it centered */ |
||||||
|
max-width: 580px; |
||||||
|
padding: 10px; |
||||||
|
width: 580px; |
||||||
|
} |
||||||
|
|
||||||
|
/* This should also be a block element, so that it will fill 100% of the .container */ |
||||||
|
.content { |
||||||
|
box-sizing: border-box; |
||||||
|
display: block; |
||||||
|
Margin: 0 auto; |
||||||
|
max-width: 580px; |
||||||
|
padding: 10px; |
||||||
|
} |
||||||
|
|
||||||
|
/* ------------------------------------- |
||||||
|
HEADER, FOOTER, MAIN |
||||||
|
------------------------------------- */ |
||||||
|
.main { |
||||||
|
background: #ffffff; |
||||||
|
border-radius: 3px; |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
.wrapper { |
||||||
|
box-sizing: border-box; |
||||||
|
padding: 20px; |
||||||
|
} |
||||||
|
|
||||||
|
.content-block { |
||||||
|
padding-bottom: 10px; |
||||||
|
padding-top: 10px; |
||||||
|
} |
||||||
|
|
||||||
|
.footer { |
||||||
|
clear: both; |
||||||
|
Margin-top: 10px; |
||||||
|
text-align: center; |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
.footer td, |
||||||
|
.footer p, |
||||||
|
.footer span, |
||||||
|
.footer a { |
||||||
|
color: #999999; |
||||||
|
font-size: 12px; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
|
||||||
|
/* ------------------------------------- |
||||||
|
TYPOGRAPHY |
||||||
|
------------------------------------- */ |
||||||
|
h1, |
||||||
|
h2, |
||||||
|
h3, |
||||||
|
h4 { |
||||||
|
color: #000000; |
||||||
|
font-family: sans-serif; |
||||||
|
font-weight: 400; |
||||||
|
line-height: 1.4; |
||||||
|
margin: 0; |
||||||
|
Margin-bottom: 30px; |
||||||
|
} |
||||||
|
|
||||||
|
h1 { |
||||||
|
font-size: 35px; |
||||||
|
font-weight: 300; |
||||||
|
text-align: center; |
||||||
|
text-transform: capitalize; |
||||||
|
} |
||||||
|
|
||||||
|
p, |
||||||
|
ul, |
||||||
|
ol { |
||||||
|
font-family: sans-serif; |
||||||
|
font-size: 14px; |
||||||
|
font-weight: normal; |
||||||
|
margin: 0; |
||||||
|
Margin-bottom: 15px; |
||||||
|
} |
||||||
|
|
||||||
|
p li, |
||||||
|
ul li, |
||||||
|
ol li { |
||||||
|
list-style-position: inside; |
||||||
|
margin-left: 5px; |
||||||
|
} |
||||||
|
|
||||||
|
a { |
||||||
|
color: #3498db; |
||||||
|
text-decoration: underline; |
||||||
|
} |
||||||
|
|
||||||
|
/* ------------------------------------- |
||||||
|
BUTTONS |
||||||
|
------------------------------------- */ |
||||||
|
.btn { |
||||||
|
box-sizing: border-box; |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
.btn > tbody > tr > td { |
||||||
|
padding-bottom: 15px; |
||||||
|
} |
||||||
|
|
||||||
|
.btn table { |
||||||
|
width: auto; |
||||||
|
} |
||||||
|
|
||||||
|
.btn table td { |
||||||
|
background-color: #ffffff; |
||||||
|
border-radius: 5px; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
|
||||||
|
.btn a { |
||||||
|
background-color: #ffffff; |
||||||
|
border: solid 1px #3498db; |
||||||
|
border-radius: 5px; |
||||||
|
box-sizing: border-box; |
||||||
|
color: #3498db; |
||||||
|
cursor: pointer; |
||||||
|
display: inline-block; |
||||||
|
font-size: 14px; |
||||||
|
font-weight: bold; |
||||||
|
margin: 0; |
||||||
|
padding: 12px 25px; |
||||||
|
text-decoration: none; |
||||||
|
text-transform: capitalize; |
||||||
|
} |
||||||
|
|
||||||
|
.btn-primary table td { |
||||||
|
background-color: #3498db; |
||||||
|
} |
||||||
|
|
||||||
|
.btn-primary a { |
||||||
|
background-color: #3498db; |
||||||
|
border-color: #3498db; |
||||||
|
color: #ffffff; |
||||||
|
} |
||||||
|
|
||||||
|
/* ------------------------------------- |
||||||
|
OTHER STYLES THAT MIGHT BE USEFUL |
||||||
|
------------------------------------- */ |
||||||
|
.last { |
||||||
|
margin-bottom: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.first { |
||||||
|
margin-top: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.align-center { |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
|
||||||
|
.align-right { |
||||||
|
text-align: right; |
||||||
|
} |
||||||
|
|
||||||
|
.align-left { |
||||||
|
text-align: left; |
||||||
|
} |
||||||
|
|
||||||
|
.clear { |
||||||
|
clear: both; |
||||||
|
} |
||||||
|
|
||||||
|
.mt0 { |
||||||
|
margin-top: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.mb0 { |
||||||
|
margin-bottom: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.preheader { |
||||||
|
color: transparent; |
||||||
|
display: none; |
||||||
|
height: 0; |
||||||
|
max-height: 0; |
||||||
|
max-width: 0; |
||||||
|
opacity: 0; |
||||||
|
overflow: hidden; |
||||||
|
mso-hide: all; |
||||||
|
visibility: hidden; |
||||||
|
width: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.powered-by a { |
||||||
|
text-decoration: none; |
||||||
|
} |
||||||
|
|
||||||
|
hr { |
||||||
|
border: 0; |
||||||
|
border-bottom: 1px solid #f6f6f6; |
||||||
|
Margin: 20px 0; |
||||||
|
} |
||||||
|
|
||||||
|
/* ------------------------------------- |
||||||
|
RESPONSIVE AND MOBILE FRIENDLY STYLES |
||||||
|
------------------------------------- */ |
||||||
|
@media only screen and (max-width: 620px) { |
||||||
|
table[class=body] h1 { |
||||||
|
font-size: 28px !important; |
||||||
|
margin-bottom: 10px !important; |
||||||
|
} |
||||||
|
|
||||||
|
table[class=body] p, |
||||||
|
table[class=body] ul, |
||||||
|
table[class=body] ol, |
||||||
|
table[class=body] td, |
||||||
|
table[class=body] span, |
||||||
|
table[class=body] a { |
||||||
|
font-size: 16px !important; |
||||||
|
} |
||||||
|
|
||||||
|
table[class=body] .wrapper, |
||||||
|
table[class=body] .article { |
||||||
|
padding: 10px !important; |
||||||
|
} |
||||||
|
|
||||||
|
table[class=body] .content { |
||||||
|
padding: 0 !important; |
||||||
|
} |
||||||
|
|
||||||
|
table[class=body] .container { |
||||||
|
padding: 0 !important; |
||||||
|
width: 100% !important; |
||||||
|
} |
||||||
|
|
||||||
|
table[class=body] .main { |
||||||
|
border-left-width: 0 !important; |
||||||
|
border-radius: 0 !important; |
||||||
|
border-right-width: 0 !important; |
||||||
|
} |
||||||
|
|
||||||
|
table[class=body] .btn table { |
||||||
|
width: 100% !important; |
||||||
|
} |
||||||
|
|
||||||
|
table[class=body] .btn a { |
||||||
|
width: 100% !important; |
||||||
|
} |
||||||
|
|
||||||
|
table[class=body] .img-responsive { |
||||||
|
height: auto !important; |
||||||
|
max-width: 100% !important; |
||||||
|
width: auto !important; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
/* ------------------------------------- |
||||||
|
PRESERVE THESE STYLES IN THE HEAD |
||||||
|
------------------------------------- */ |
||||||
|
@media all { |
||||||
|
.ExternalClass { |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
.ExternalClass, |
||||||
|
.ExternalClass p, |
||||||
|
.ExternalClass span, |
||||||
|
.ExternalClass font, |
||||||
|
.ExternalClass td, |
||||||
|
.ExternalClass div { |
||||||
|
line-height: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
.apple-link a { |
||||||
|
color: inherit !important; |
||||||
|
font-family: inherit !important; |
||||||
|
font-size: inherit !important; |
||||||
|
font-weight: inherit !important; |
||||||
|
line-height: inherit !important; |
||||||
|
text-decoration: none !important; |
||||||
|
} |
||||||
|
|
||||||
|
.btn-primary table td:hover { |
||||||
|
background-color: #34495e !important; |
||||||
|
} |
||||||
|
|
||||||
|
.btn-primary a:hover { |
||||||
|
background-color: #34495e !important; |
||||||
|
border-color: #34495e !important; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
</style> |
||||||
|
{% block email_head %} |
||||||
|
{% endblock email_head %} |
||||||
</head> |
</head> |
||||||
<body> |
<body {% block body_attrs %}{% endblock body_attrs %}> |
||||||
$END$ |
<table border="0" cellpadding="0" cellspacing="0" class="body"> |
||||||
|
<tr> |
||||||
|
<td> </td> |
||||||
|
<td class="container"> |
||||||
|
<div class="content"> |
||||||
|
|
||||||
|
<!-- START CENTERED WHITE CONTAINER --> |
||||||
|
<span class="preheader">This is preheader text. Some clients will show this text as a preview.</span> |
||||||
|
<table class="main"> |
||||||
|
|
||||||
|
<!-- START MAIN CONTENT AREA --> |
||||||
|
<tr> |
||||||
|
<td class="wrapper"> |
||||||
|
{% block email_body %} |
||||||
|
{% endblock email_body %} |
||||||
|
</td> |
||||||
|
</tr> |
||||||
|
|
||||||
|
<!-- END MAIN CONTENT AREA --> |
||||||
|
</table> |
||||||
|
|
||||||
|
<!-- START FOOTER --> |
||||||
|
<div class="footer"> |
||||||
|
<table border="0" cellpadding="0" cellspacing="0"> |
||||||
|
<tr> |
||||||
|
<td class="content-block"> |
||||||
|
<span class="apple-link">Русские программы</span> |
||||||
|
</td> |
||||||
|
</tr> |
||||||
|
<tr> |
||||||
|
<td class="content-block powered-by"></td> |
||||||
|
</tr> |
||||||
|
</table> |
||||||
|
</div> |
||||||
|
<!-- END FOOTER --> |
||||||
|
|
||||||
|
<!-- END CENTERED WHITE CONTAINER --> |
||||||
|
</div> |
||||||
|
</td> |
||||||
|
<td> </td> |
||||||
|
</tr> |
||||||
|
</table> |
||||||
|
{% block email_extra_js %} |
||||||
|
{% endblock email_extra_js %} |
||||||
</body> |
</body> |
||||||
</html> |
</html> |
||||||
|
|||||||
@ -1 +1,35 @@ |
|||||||
{% extends 'base.html' %} |
{% extends 'emails/email_base.html' %} |
||||||
|
{% block title %} |
||||||
|
Сброс пароля |
||||||
|
{% endblock title %} |
||||||
|
{% block email_body %} |
||||||
|
<table border="0" cellpadding="0" cellspacing="0"> |
||||||
|
<tr> |
||||||
|
<td> |
||||||
|
<p>Hi there,</p> |
||||||
|
<p>Sometimes you just want to send a simple HTML email with a simple design |
||||||
|
and clear call to action. This is it.</p> |
||||||
|
<table border="0" cellpadding="0" cellspacing="0" class="btn btn-primary"> |
||||||
|
<tbody> |
||||||
|
<tr> |
||||||
|
<td align="left"> |
||||||
|
<table border="0" cellpadding="0" cellspacing="0"> |
||||||
|
<tbody> |
||||||
|
<tr> |
||||||
|
<td><a href="http://htmlemail.io" target="_blank">Call |
||||||
|
To Action</a></td> |
||||||
|
</tr> |
||||||
|
</tbody> |
||||||
|
</table> |
||||||
|
</td> |
||||||
|
</tr> |
||||||
|
</tbody> |
||||||
|
</table> |
||||||
|
<p>This is a really simple email template. Its sole purpose is to get the |
||||||
|
recipient to click the button with no distractions.</p> |
||||||
|
<p>Good luck! Hope it works.</p> |
||||||
|
</td> |
||||||
|
</tr> |
||||||
|
</table> |
||||||
|
|
||||||
|
{% endblock email_body %} |
||||||
|
|||||||
Loading…
Reference in new issue