[email]: add one click verify button for verification email
This commit is contained in:
anandbaburajan
@@ -1,126 +1,234 @@
|
||||
<!doctype html>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<meta content="text/html; charset=utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
|
||||
<style>
|
||||
body {
|
||||
background-color: #F0F1F3;
|
||||
font-family: 'Helvetica Neue', 'Segoe UI', Helvetica, sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 27px;
|
||||
margin: 0;
|
||||
color: #444;
|
||||
}
|
||||
<meta content="text/html; charset=utf-8" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1, minimum-scale=1"
|
||||
/>
|
||||
<style>
|
||||
body {
|
||||
background-color: #f0f1f3;
|
||||
font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 27px;
|
||||
margin: 0;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
pre {
|
||||
background: #f4f4f4f4;
|
||||
padding: 2px;
|
||||
}
|
||||
pre {
|
||||
background: #f4f4f4f4;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
table {
|
||||
width: 100%;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
table td {
|
||||
border-color: #ddd;
|
||||
padding: 5px;
|
||||
}
|
||||
table td {
|
||||
border-color: #ddd;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.wrap {
|
||||
background-color: #fff;
|
||||
padding: 30px;
|
||||
max-width: 525px;
|
||||
margin: 0 auto;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.button {
|
||||
background: #0055d4;
|
||||
border-radius: 3px;
|
||||
text-decoration: none !important;
|
||||
color: #fff !important;
|
||||
font-weight: bold;
|
||||
padding: 10px 30px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
background: #111;
|
||||
}
|
||||
|
||||
.footer {
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.footer a {
|
||||
color: #888;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.gutter {
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #0055d4;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #111;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
.wrap {
|
||||
max-width: auto;
|
||||
background-color: #fff;
|
||||
padding: 30px;
|
||||
max-width: 525px;
|
||||
margin: 0 auto;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.button {
|
||||
background: #0055d4;
|
||||
border-radius: 3px;
|
||||
text-decoration: none !important;
|
||||
color: #fff !important;
|
||||
font-weight: bold;
|
||||
padding: 10px 30px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
background: #111;
|
||||
}
|
||||
|
||||
.footer {
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.footer a {
|
||||
color: #888;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.gutter {
|
||||
padding: 10px;
|
||||
padding: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-icons {
|
||||
padding: 4px !important;
|
||||
width: 24px !important;
|
||||
}
|
||||
</style>
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
<body>
|
||||
a {
|
||||
color: #0055d4;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #111;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
.wrap {
|
||||
max-width: auto;
|
||||
}
|
||||
|
||||
.gutter {
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-icons {
|
||||
padding: 4px !important;
|
||||
width: 24px !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body>
|
||||
<div class="gutter" style="padding: 4px"> </div>
|
||||
<div class="wrap" style="background-color: rgb(255, 255, 255); padding: 30px; max-width: 525px; margin: 0 auto; border-radius: 5px; font-size: 16px">
|
||||
<p style="text-align: center;">Please use this code to verify your email address</p>
|
||||
<div
|
||||
class="wrap"
|
||||
style="
|
||||
background-color: rgb(255, 255, 255);
|
||||
padding: 30px;
|
||||
max-width: 525px;
|
||||
margin: 0 auto;
|
||||
border-radius: 5px;
|
||||
font-size: 16px;
|
||||
"
|
||||
>
|
||||
<h2 style="text-align: center; margin-bottom: 16px">
|
||||
Verify your email address
|
||||
</h2>
|
||||
<hr style="margin: 24px 0; border: none; border-top: 1px solid #ddd" />
|
||||
<p style="text-align: center">
|
||||
Click on the button to verify your email.
|
||||
</p>
|
||||
<center style="margin: 24px 0">
|
||||
<a
|
||||
href="https://verify.ente.io/?ott={{.VerificationCode}}"
|
||||
style="
|
||||
background-color: #00b33c;
|
||||
border-radius: 3px;
|
||||
text-decoration: none !important;
|
||||
color: #fff !important;
|
||||
font-weight: bold;
|
||||
padding: 8px 30px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
"
|
||||
target="_blank"
|
||||
>
|
||||
Verify email
|
||||
</a>
|
||||
</center>
|
||||
<div
|
||||
style="
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
margin-top: 32px;
|
||||
margin-bottom: 32px;
|
||||
"
|
||||
>
|
||||
<p>— or enter the code manually —</p>
|
||||
<center>
|
||||
<div style="background-color:#DEDEDE; border-radius:6px; color:#00b33c; display:inline-block; letter-spacing:4px; padding:12px 18px 12px 18px; text-align:center; font-size:24px; font-weight: bold;" target="_blank">{{.VerificationCode}}</div>
|
||||
<div
|
||||
style="
|
||||
background-color: #f6f6f6;
|
||||
border-radius: 6px;
|
||||
color: #787878;
|
||||
display: inline-block;
|
||||
letter-spacing: 3px;
|
||||
padding: 8px 14px;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
"
|
||||
target="_blank"
|
||||
>
|
||||
{{.VerificationCode}}
|
||||
</div>
|
||||
</center>
|
||||
<hr style="margin-top: 24px; margin-bottom: 24px" />
|
||||
<p style="text-align: center; font-size: 14px;">If you need help, just hit the reply button!</p>
|
||||
</div>
|
||||
<hr
|
||||
style="
|
||||
margin-top: 24px;
|
||||
margin-bottom: 24px;
|
||||
border: none;
|
||||
border-top: 1px solid #ddd;
|
||||
"
|
||||
/>
|
||||
<p style="text-align: center; font-size: 14px; color: #666">
|
||||
If you need help, just hit the reply button!
|
||||
</p>
|
||||
</div>
|
||||
<br />
|
||||
<div class="footer" style="text-align: center; font-size: 12px; color: rgb(136, 136, 136)">
|
||||
<div>
|
||||
<a href="https://ente.io" target="_blank"><img src="https://email-assets.ente.io/ente-green.png" style="width: 100px; padding: 24px" title="Ente" alt="Ente" /></a>
|
||||
</div>
|
||||
<div>
|
||||
<a href="https://fosstodon.org/@ente" target="_blank"><img src="https://email-assets.ente.io/mastodon-icon.png" class="footer-icons" style="width: 24px; padding: 4px;" title="Mastodon" alt="Mastodon" /></a>
|
||||
<a href="https://twitter.com/enteio" target="_blank"><img src="https://email-assets.ente.io/twitter-icon.png" class="footer-icons" style="width: 24px; padding: 4px;" title="Twitter" alt="Twitter" /></a>
|
||||
<a href="https://discord.ente.io" target="_blank"><img src="https://email-assets.ente.io/discord-icon.png" class="footer-icons" style="width: 24px; padding: 4px;" title="Discord" alt="Discord" /></a>
|
||||
<a href="https://github.com/ente-io" target="_blank"><img src="https://email-assets.ente.io/github-icon.png" class="footer-icons" style="width: 24px; padding: 4px;" title="GitHub" alt="GitHub" /></a>
|
||||
</div>
|
||||
<p>
|
||||
Ente Technologies, Inc.
|
||||
<br />
|
||||
1111B S Governors Ave 6032 Dover, DE 19904
|
||||
</p>
|
||||
<div
|
||||
class="footer"
|
||||
style="text-align: center; font-size: 12px; color: rgb(136, 136, 136)"
|
||||
>
|
||||
<div>
|
||||
<a href="https://ente.io" target="_blank"
|
||||
><img
|
||||
src="https://email-assets.ente.io/ente-green.png"
|
||||
style="width: 100px; padding: 24px"
|
||||
title="Ente"
|
||||
alt="Ente"
|
||||
/></a>
|
||||
</div>
|
||||
<div>
|
||||
<a href="https://fosstodon.org/@ente" target="_blank"
|
||||
><img
|
||||
src="https://email-assets.ente.io/mastodon-icon.png"
|
||||
class="footer-icons"
|
||||
style="width: 24px; padding: 4px"
|
||||
title="Mastodon"
|
||||
alt="Mastodon"
|
||||
/></a>
|
||||
<a href="https://twitter.com/enteio" target="_blank"
|
||||
><img
|
||||
src="https://email-assets.ente.io/twitter-icon.png"
|
||||
class="footer-icons"
|
||||
style="width: 24px; padding: 4px"
|
||||
title="Twitter"
|
||||
alt="Twitter"
|
||||
/></a>
|
||||
<a href="https://discord.ente.io" target="_blank"
|
||||
><img
|
||||
src="https://email-assets.ente.io/discord-icon.png"
|
||||
class="footer-icons"
|
||||
style="width: 24px; padding: 4px"
|
||||
title="Discord"
|
||||
alt="Discord"
|
||||
/></a>
|
||||
<a href="https://github.com/ente-io" target="_blank"
|
||||
><img
|
||||
src="https://email-assets.ente.io/github-icon.png"
|
||||
class="footer-icons"
|
||||
style="width: 24px; padding: 4px"
|
||||
title="GitHub"
|
||||
alt="GitHub"
|
||||
/></a>
|
||||
</div>
|
||||
<p>
|
||||
Ente Technologies, Inc.
|
||||
<br />
|
||||
1111B S Governors Ave 6032 Dover, DE 19904
|
||||
</p>
|
||||
<br />
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user