Refactored user activation email

This commit is contained in:
PCoder 2017-09-02 12:24:10 +05:30
parent 39b996ea1a
commit 79f4b38e4c
4 changed files with 199 additions and 130 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

View file

@ -0,0 +1,178 @@
{% load static from staticfiles %}
{% load i18n %}
<!-- Inliner Build Version 4380b7741bb759d6cb997545f3add21ad48f010b -->
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{dcl_text}}</title>
</head>
<body bgcolor="#ffffff"
style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; width: 100% !important; height: 100%; color: white; margin: 0;">
<style type="text/css">
@media only screen and (max-width: 480px) {
table[class*="container-for-gmail-android"] {
min-width: 290px !important; width: 100% !important;
}
img[class="force-width-gmail"] {
display: none !important; width: 0 !important; height: 0 !important;
}
table[class="w320"] {
width: 320px !important;
}
td[class*="mobile-header-padding-left"] {
width: 160px !important; padding-left: 0 !important;
}
td[class*="mobile-header-padding-right"] {
width: 160px !important; padding-right: 0 !important;
}
td[class="header-lg"] {
font-size: 24px !important; padding-bottom: 5px !important;
}
td[class="content-padding"] {
padding: 5px 0 5px !important;
}
td[class="button"] {
padding: 5px 5px 30px !important;
}
td[class*="free-text"] {
padding: 10px 18px 30px !important;
}
td[class~="mobile-hide-img"] {
display: none !important; height: 0 !important; width: 0 !important; line-height: 0 !important;
}
td[class~="item"] {
width: 140px !important; vertical-align: top !important;
}
td[class~="quantity"] {
width: 50px !important;
}
td[class~="price"] {
width: 90px !important;
}
td[class="item-table"] {
padding: 30px 20px !important;
}
td[class="mini-container-left"] {
padding: 0 15px 15px !important; display: block !important; width: 290px !important;
}
td[class="mini-container-right"] {
padding: 0 15px 15px !important; display: block !important; width: 290px !important;
}
}
</style>
<table align="center" cellpadding="0" cellspacing="0"
class="container-for-gmail-android" width="100%"
style="border-collapse: collapse !important; min-width: 600px; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
<tr style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
<td align="left" valign="top" width="100%"
style="border-collapse: collapse; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; text-align: center; line-height: 21px; background: #ffffff url(http://s3.amazonaws.com/swu-filepicker/4E687TRe69Ld95IDWyEg_bg_top_02.jpg) repeat-x;"
bgcolor="#ffffff">
<center style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
<table cellspacing="0" cellpadding="0" width="100%"
bgcolor="#ffffff"
background="{{base_url}}{% static 'datacenterlight/img/dcl-email-bg.jpg' %}"
style="border-collapse: collapse !important; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important; background: transparent;">
<tr style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
<td width="100%" height="80" valign="top"
style="text-align: center; vertical-align: middle; border-collapse: collapse; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; line-height: 21px; background-color: #ffffff"
align="center">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml"
fill="true" stroke="false"
style="mso-width-percent:1000;height:80px; v-text-anchor:middle;">
<v:fill type="tile"
src="{{base_url}}{% static 'datacenterlight/img/dcl-email-bg.jpg' %}"
color="#ffffff"/>
<v:textbox inset="0,0,0,0">
<![endif]-->
<center style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
<table cellpadding="0" cellspacing="0"
width="600" class="w320"
style="border-collapse: collapse !important; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
<tr style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
<td class="pull-left mobile-header-padding-left"
style="vertical-align: middle; border-collapse: collapse; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; text-align: left; line-height: 21px; width: 290px; padding-left: 0px;"
align="left" valign="middle">
<a href="{{base_url}}"
style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important; color: #676767; text-decoration: none !important;"><img
width="137"
src="{{base_url}}{% static 'datacenterlight/img/datacenterlight.png' %}"
alt="logo"
style="max-width: 600px; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important; border: none;"></a>
</td>
<td class="pull-right mobile-header-padding-right"
style="color: #4d4d4d; border-collapse: collapse; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; text-align: right; line-height: 21px; width: 290px; padding-left: 10px;"
align="right">
</td>
</tr>
</table>
</center>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
</center>
</td>
</tr>
<tr style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
<td align="center" valign="top" width="100%"
style="border-collapse: collapse; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; text-align: center; line-height: 21px; background: #ffffff; padding: 20px 0 5px;"
class="content-padding" bgcolor="#f7f7f7">
<center style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
<table cellspacing="0" cellpadding="0" width="600" class="w320"
style="border-collapse: collapse !important; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
<tr style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
<td class="header-lg"
style="border-collapse: collapse; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 32px; color: #4d4d4d; text-align: left; line-height: normal; font-weight: 400; padding: 35px 5px 0px;"
align="center">
{% block email_head %}
{% endblock %}
</td>
</tr>
<tr style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
<td class="free-text"
style="border-collapse: collapse; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; text-align: left; line-height: 21px; width: 100% !important; padding: 40px 5px 20px;"
align="center">
<p>
{% block email_body %}
{% endblock %}
</p></td>
</tr>
<tr style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
<td class="button"
style="border-collapse: collapse; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; text-align: center; line-height: 21px; padding: 0;"
align="center">&nbsp;
</td>
</tr>
</table>
</center>
</td>
</tr>
<tr style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
<td align="center" valign="top" width="100%"
style="height: 100px; border-collapse: collapse; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; text-align: center; line-height: 21px; background: #ffffff;"
bgcolor="#ffffff">
<center style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
<table cellspacing="0" cellpadding="0" width="600" class="w320"
style="border-collapse: collapse !important; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
<tr style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
<td style="border-collapse: collapse; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; font-weight: 600; color: #7293de; padding: 25px 5px 0px;text-align: left; line-height: 21px;;"
align="left">{% trans 'Your' %} {{dcl_text}} {%
trans 'team' %}<br
style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
</body>
</html>

View file

@ -0,0 +1,9 @@
{% load static from staticfiles %}
{% load i18n %}
{% block email_head %}
{% endblock %}
{% block email_body %}
{% endblock %}
{% trans 'Your' %} {{dcl_text}} {% trans 'team' %}

View file

@ -1,132 +1,14 @@
{% extends "datacenterlight/emails/base_email.html" %}
{% load static from staticfiles %} {% load static from staticfiles %}
{% load i18n %} {% load i18n %}
<!-- Inliner Build Version 4380b7741bb759d6cb997545f3add21ad48f010b --> {% block email_head %}
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{dcl_text}}</title>
</head>
<body bgcolor="#ffffff" style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; width: 100% !important; height: 100%; color: white; margin: 0;">
<style type="text/css">
@media only screen and (max-width: 480px) {
table[class*="container-for-gmail-android"] {
min-width: 290px !important; width: 100% !important;
}
img[class="force-width-gmail"] {
display: none !important; width: 0 !important; height: 0 !important;
}
table[class="w320"] {
width: 320px !important;
}
td[class*="mobile-header-padding-left"] {
width: 160px !important; padding-left: 0 !important;
}
td[class*="mobile-header-padding-right"] {
width: 160px !important; padding-right: 0 !important;
}
td[class="header-lg"] {
font-size: 24px !important; padding-bottom: 5px !important;
}
td[class="content-padding"] {
padding: 5px 0 5px !important;
}
td[class="button"] {
padding: 5px 5px 30px !important;
}
td[class*="free-text"] {
padding: 10px 18px 30px !important;
}
td[class~="mobile-hide-img"] {
display: none !important; height: 0 !important; width: 0 !important; line-height: 0 !important;
}
td[class~="item"] {
width: 140px !important; vertical-align: top !important;
}
td[class~="quantity"] {
width: 50px !important;
}
td[class~="price"] {
width: 90px !important;
}
td[class="item-table"] {
padding: 30px 20px !important;
}
td[class="mini-container-left"] {
padding: 0 15px 15px !important; display: block !important; width: 290px !important;
}
td[class="mini-container-right"] {
padding: 0 15px 15px !important; display: block !important; width: 290px !important;
}
}
</style>
<table align="center" cellpadding="0" cellspacing="0" class="container-for-gmail-android" width="100%" style="border-collapse: collapse !important; min-width: 600px; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
<tr style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
<td align="left" valign="top" width="100%" style="border-collapse: collapse; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; text-align: center; line-height: 21px; background: #ffffff url(http://s3.amazonaws.com/swu-filepicker/4E687TRe69Ld95IDWyEg_bg_top_02.jpg) repeat-x;" bgcolor="#ffffff">
<center style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
<table cellspacing="0" cellpadding="0" width="100%" bgcolor="#ffffff" background="http://s3.amazonaws.com/swu-filepicker/4E687TRe69Ld95IDWyEg_bg_top_02.jpg" style="border-collapse: collapse !important; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important; background: transparent;"><tr style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
<td width="100%" height="80" valign="top" style="text-align: center; vertical-align: middle; border-collapse: collapse; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; line-height: 21px; background-color: #ffffff" align="center">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;height:80px; v-text-anchor:middle;">
<v:fill type="tile" src="http://s3.amazonaws.com/swu-filepicker/4E687TRe69Ld95IDWyEg_bg_top_02.jpg" color="#ffffff" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<center style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
<table cellpadding="0" cellspacing="0" width="600" class="w320" style="border-collapse: collapse !important; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;"><tr style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
<td class="pull-left mobile-header-padding-left" style="vertical-align: middle; border-collapse: collapse; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; text-align: left; line-height: 21px; width: 290px; padding-left: 0px;" align="left" valign="middle">
<a href="{{base_url}}" style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important; color: #676767; text-decoration: none !important;"><img width="137" src="{{base_url}}{% static 'datacenterlight/img/datacenterlight.png' %}" alt="logo" style="max-width: 600px; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important; border: none;"></a>
</td>
<td class="pull-right mobile-header-padding-right" style="color: #4d4d4d; border-collapse: collapse; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; text-align: right; line-height: 21px; width: 290px; padding-left: 10px;" align="right">
</td>
</tr></table>
</center>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr></table>
</center>
</td>
</tr>
<tr style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
<td align="center" valign="top" width="100%" style="border-collapse: collapse; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; text-align: center; line-height: 21px; background: #ffffff; padding: 20px 0 5px;" class="content-padding" bgcolor="#f7f7f7">
<center style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
<table cellspacing="0" cellpadding="0" width="600" class="w320" style="border-collapse: collapse !important; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
<tr style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
<td class="header-lg" style="border-collapse: collapse; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 32px; color: #4d4d4d; text-align: left; line-height: normal; font-weight: 400; padding: 35px 5px 0px;" align="center">
{{dcl_text}} {% trans 'account activation' %} {{dcl_text}} {% trans 'account activation' %}
</td> {% endblock %}
</tr> {% block email_body %}
<tr style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
<td class="free-text" style="border-collapse: collapse; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; text-align: left; line-height: 21px; width: 100% !important; padding: 40px 5px 20px;" align="center">
<p>
{% blocktrans %} {% blocktrans %}
You can activate your {{dcl_text}} account by <a href="{{base_url}}{{activation_link}}">clicking here</a>.<br/><br/> You can activate your Data Center Light account by <a href="{{base_url}}{{activation_link}}">clicking here</a>.<br/>
You can also copy and paste the following link into the address bar of your browser and follow the link in order to activate your datacenterlight account.<br/> You can also copy and paste the following link into the address bar of your browser<br/>
to activate your Data Center Light account.<br/>
{{base_url}}{{activation_link}} {{base_url}}{{activation_link}}
{% endblocktrans %} {% endblocktrans %}
</p></td> {% endblock %}
</tr>
<tr style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
<td class="button" style="border-collapse: collapse; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; text-align: center; line-height: 21px; padding: 0;" align="center">&nbsp;</td>
</tr>
</table>
</center>
</td>
</tr>
<tr style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
<td align="center" valign="top" width="100%" style="height: 100px; border-collapse: collapse; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; color: #777777; text-align: center; line-height: 21px; background: #ffffff;" bgcolor="#ffffff">
<center style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
<table cellspacing="0" cellpadding="0" width="600" class="w320" style="border-collapse: collapse !important; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;"><tr style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
<td style="border-collapse: collapse; font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important; font-size: 14px; font-weight: 600; color: #7293de; padding: 25px 5px 0px;text-align: left; line-height: 21px;;" align="left">{% trans 'Your' %} {{dcl_text}} {% trans 'team' %}<br style="font-family: 'Raleway', 'Helvetica Neue', 'Arial', 'sans-serif' !important;">
</td>
</tr></table>
</center>
</td>
</tr>
</table>
</body>
</html>