refactored email template
This commit is contained in:
Damodar Lohani
parent
f373d30a45
commit
bbf77dcb9a
1 changed files with 63 additions and 150 deletions
|
|
@ -1,165 +1,78 @@
|
||||||
<!doctype html>
|
|
||||||
<html>
|
<html>
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta name="viewport" content="width=device-width" />
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
<title>{{subject}}</title>
|
<link
|
||||||
<style>
|
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Poppins:wght@500;600&display=swap"
|
||||||
body {
|
rel="stylesheet">
|
||||||
background-color: {{bg-body}};
|
<style>
|
||||||
color: {{text-content}};
|
a { color:currentColor; }
|
||||||
font-family: sans-serif;
|
body {
|
||||||
-webkit-font-smoothing: antialiased;
|
padding: 32px;
|
||||||
font-size: 14px;
|
color: #616B7C;
|
||||||
line-height: 1.4;
|
font-size: 15px;
|
||||||
margin: 0;
|
font-family: 'Inter', sans-serif;
|
||||||
padding: 0;
|
line-height: 15px;
|
||||||
-ms-text-size-adjust: 100%;
|
}
|
||||||
-webkit-text-size-adjust: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
table {
|
table {
|
||||||
border-collapse: separate;
|
width: 100%;
|
||||||
mso-table-lspace: 0pt;
|
border-spacing: 0 !important;
|
||||||
mso-table-rspace: 0pt;
|
}
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
table td {
|
table,
|
||||||
font-family: sans-serif;
|
tr,
|
||||||
font-size: 14px;
|
th,
|
||||||
vertical-align: top;
|
td {
|
||||||
}
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.body {
|
td {
|
||||||
background-color: {{bg-body}};
|
vertical-align: top;
|
||||||
width: 100%;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.container {
|
h* {
|
||||||
display: block;
|
font-family: 'Poppins', sans-serif;
|
||||||
margin: 0 auto !important;
|
}
|
||||||
max-width: 580px;
|
|
||||||
padding: 10px;
|
|
||||||
width: 580px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content {
|
hr {
|
||||||
box-sizing: border-box;
|
border: none;
|
||||||
display: block;
|
border-top: 1px solid #E8E9F0;
|
||||||
margin: 0 auto;
|
}
|
||||||
max-width: 580px;
|
</style>
|
||||||
padding: 10px;
|
|
||||||
color: {{text-content}};
|
|
||||||
}
|
|
||||||
|
|
||||||
.main {
|
|
||||||
background: {{bg-content}};
|
|
||||||
border-radius: 10px;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wrapper {
|
|
||||||
box-sizing: border-box;
|
|
||||||
padding: 30px 30px 15px 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content-block {
|
|
||||||
padding-bottom: 10px;
|
|
||||||
padding-top: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
font-family: sans-serif;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: normal;
|
|
||||||
margin: 0;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
word-break: break-all;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media only screen and (max-width: 620px) {
|
|
||||||
.container {
|
|
||||||
padding: 0;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@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;
|
|
||||||
}
|
|
||||||
|
|
||||||
#MessageViewBody a {
|
|
||||||
color: inherit;
|
|
||||||
text-decoration: none;
|
|
||||||
font-size: inherit;
|
|
||||||
font-family: inherit;
|
|
||||||
font-weight: inherit;
|
|
||||||
line-height: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body style="direction: {{direction}}">
|
<body style="direction: {{direction}}">
|
||||||
<table role="presentation" border="0" cellpadding="0" cellspacing="0" class="body">
|
|
||||||
<tr>
|
|
||||||
<td> </td>
|
|
||||||
<td class="container">
|
|
||||||
<div class="content">
|
|
||||||
<table role="presentation" class="main">
|
|
||||||
<tr>
|
|
||||||
<td class="wrapper">
|
|
||||||
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<p>{{hello}}</p>
|
|
||||||
<p>{{body}}</p>
|
|
||||||
<a href="{{redirect}}" target="_blank">{{redirect}}</a>
|
|
||||||
<p></br>{{footer}}</p>
|
|
||||||
<p>{{thanks}}
|
|
||||||
</br>
|
|
||||||
{{signature}}
|
|
||||||
</p>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</table>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- <div style="text-align: center; line-height: 25px; margin: 15px 0; font-size: 12px; color: #40404c;">
|
<div style="max-width:650px; margin:0 auto;">
|
||||||
<a href="https://appwrite.io" style="text-decoration: none; color: #40404c;">Powered by <img src="https://appwrite.io/images/appwrite-footer-light.svg" height="15" style="margin: -3px 0" /></a>
|
<table style="margin-top: 32px">
|
||||||
</div> -->
|
<tr>
|
||||||
</td>
|
<td>
|
||||||
<td> </td>
|
<h1>
|
||||||
</tr>
|
{{subject}}
|
||||||
</table>
|
</h1>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
<table style="margin-top: 40px">
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<p>{{hello}}</p>
|
||||||
|
<p>{{body}}</p>
|
||||||
|
<a href="{{redirect}}" target="_blank">{{redirect}}</a>
|
||||||
|
<p></br>{{footer}}</p>
|
||||||
|
<p>{{thanks}}
|
||||||
|
</br>
|
||||||
|
{{signature}}
|
||||||
|
</p>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
Loading…
Reference in a new issue