Skip to content

Commit 10f1025

Browse files
ZingzyZingzy
authored
Merge pull request #163 from spoo-me/refactor/email-templates
feat: create base email template and refactor existing email template…
2 parents c7f67c5 + 7d3e308 commit 10f1025

4 files changed

Lines changed: 114 additions & 303 deletions

File tree

‎templates/emails/base.html‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
<!DOCTYPE html
2+
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3+
<html dir="ltr" lang="en">
4+
5+
<head>
6+
<link rel="preload" as="image" href="https://spoo-landing.netlify.app/logo.png" />
7+
<link rel="preload" as="image" href="https://new.email/static/emails/social/social-github.png" />
8+
<link rel="preload" as="image" href="https://new.email/static/emails/social/social-discord.png" />
9+
<link rel="preload" as="image" href="https://new.email/static/emails/social/social-x.png" />
10+
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
11+
<meta name="x-apple-disable-message-reformatting" />
12+
</head>
13+
14+
<body
15+
style='background-color:rgb(255,255,255);font-family:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";padding-top:40px;padding-bottom:40px'>
16+
<div style="display:none;overflow:hidden;line-height:1px;opacity:0;max-height:0;max-width:0"
17+
data-skip-in-text="true">
18+
{% block preview %}{% endblock %}
19+
<div> ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏
20+
‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏
21+
‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏
22+
‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ </div>
23+
</div>
24+
<table align="center" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation"
25+
style="background-color:rgb(26,24,24);border-radius:8px;padding-left:32px;padding-right:32px;padding-top:40px;padding-bottom:40px;margin-left:auto;margin-right:auto;max-width:600px">
26+
<tbody>
27+
<tr style="width:100%">
28+
<td>
29+
<table align="center" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation"
30+
style="text-align:center;margin-bottom:32px">
31+
<tbody>
32+
<tr>
33+
<td>
34+
<img alt="spoo.me" src="https://spoo-landing.netlify.app/logo.png"
35+
style="width:120px;height:auto;margin-left:auto;margin-right:auto;display:block;outline:none;border:none;text-decoration:none" />
36+
</td>
37+
</tr>
38+
</tbody>
39+
</table>
40+
{% block content %}{% endblock %}
41+
<hr
42+
style="border-color:rgb(51,51,51);border-style:solid;margin-top:32px;margin-bottom:32px;width:100%;border:none;border-top:1px solid #333333" />
43+
<table align="center" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation">
44+
<tbody>
45+
<tr>
46+
<td>
47+
<p
48+
style="color:rgb(227,235,242);font-size:14px;text-align:center;margin-bottom:0px;margin:0px;line-height:24px;margin-top:0px;margin-left:0px;margin-right:0px">
49+
Need help? Contact us at <a href="mailto:support@spoo.me"
50+
style="color:rgb(124,58,237);text-decoration-line:none"
51+
target="_blank">support@spoo.me</a></p>
52+
<table align="center" width="100%" border="0" cellpadding="0" cellspacing="0"
53+
role="presentation" style="margin-top:16px;margin-bottom:24px">
54+
<tbody style="width:100%">
55+
<tr style="width:100%">
56+
<td align="center">
57+
<table border="0" cellpadding="0" cellspacing="0"
58+
role="presentation" style="display:inline-block">
59+
<tbody>
60+
<tr>
61+
<td style="padding:0 8px">
62+
<a href="https://github.com/spoo-me/spoo"
63+
style="color:#067df7;text-decoration-line:none"
64+
target="_blank"><img alt="GitHub"
65+
src="https://new.email/static/emails/social/social-github.png"
66+
style="width:24px;height:24px;display:block;outline:none;border:none;text-decoration:none" /></a>
67+
</td>
68+
<td style="padding:0 8px">
69+
<a href="https://spoo.me/discord"
70+
style="color:#067df7;text-decoration-line:none"
71+
target="_blank"><img alt="Discord"
72+
src="https://new.email/static/emails/social/social-discord.png"
73+
style="width:24px;height:24px;display:block;outline:none;border:none;text-decoration:none" /></a>
74+
</td>
75+
<td style="padding:0 8px">
76+
<a href="https://x.com/spoo_me"
77+
style="color:#067df7;text-decoration-line:none"
78+
target="_blank"><img alt="X (Twitter)"
79+
src="https://new.email/static/emails/social/social-x.png"
80+
style="width:24px;height:24px;display:block;outline:none;border:none;text-decoration:none" /></a>
81+
</td>
82+
</tr>
83+
</tbody>
84+
</table>
85+
</td>
86+
</tr>
87+
</tbody>
88+
</table>
89+
<p
90+
style="color:rgb(227,235,242);font-size:12px;text-align:center;margin:0px;line-height:24px;margin-top:0px;margin-bottom:0px;margin-left:0px;margin-right:0px">
91+
© 2025 spoo.me. All rights reserved.</p>
92+
</td>
93+
</tr>
94+
</tbody>
95+
</table>
96+
</td>
97+
</tr>
98+
</tbody>
99+
</table>
100+
</body>
101+
102+
</html>

‎templates/emails/password_reset.html‎

Lines changed: 4 additions & 101 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,8 @@
1-
<!DOCTYPE html
2-
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3-
<html dir="ltr" lang="en">
1+
{% extends "base.html" %}
42

5-
<head>
6-
<link rel="preload" as="image" href="https://spoo-landing.netlify.app/logo.png" />
7-
<link rel="preload" as="image" href="https://new.email/static/emails/social/social-github.png" />
8-
<link rel="preload" as="image" href="https://new.email/static/emails/social/social-discord.png" />
9-
<link rel="preload" as="image" href="https://new.email/static/emails/social/social-x.png" />
10-
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
11-
<meta name="x-apple-disable-message-reformatting" />
12-
</head>
3+
{% block preview %}Your spoo.me password reset code: {{ otp_code }}{% endblock %}
134

14-
<body
15-
style='background-color:rgb(255,255,255);font-family:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";padding-top:40px;padding-bottom:40px'>
16-
<div style="display:none;overflow:hidden;line-height:1px;opacity:0;max-height:0;max-width:0"
17-
data-skip-in-text="true">
18-
Your spoo.me password reset code: {{ otp_code }}
19-
<div> ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏
20-
‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏
21-
‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏
22-
‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ ‌​‍‎‏ </div>
23-
</div>
24-
<table align="center" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation"
25-
style="background-color:rgb(26,24,24);border-radius:8px;padding-left:32px;padding-right:32px;padding-top:40px;padding-bottom:40px;margin-left:auto;margin-right:auto;max-width:600px">
26-
<tbody>
27-
<tr style="width:100%">
28-
<td>
29-
<table align="center" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation"
30-
style="text-align:center;margin-bottom:32px">
31-
<tbody>
32-
<tr>
33-
<td>
34-
<img alt="spoo.me" src="https://spoo-landing.netlify.app/logo.png"
35-
style="width:120px;height:auto;margin-left:auto;margin-right:auto;display:block;outline:none;border:none;text-decoration:none" />
36-
</td>
37-
</tr>
38-
</tbody>
39-
</table>
40-
<table align="center" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation"
5+
{% block content %}<table align="center" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation"
416
style="margin-bottom:32px">
427
<tbody>
438
<tr>
@@ -103,66 +68,4 @@
10368
</td>
10469
</tr>
10570
</tbody>
106-
</table>
107-
<hr
108-
style="border-color:rgb(51,51,51);border-style:solid;margin-top:32px;margin-bottom:32px;width:100%;border:none;border-top:1px solid #333333" />
109-
<table align="center" width="100%" border="0" cellpadding="0" cellspacing="0" role="presentation">
110-
<tbody>
111-
<tr>
112-
<td>
113-
<p
114-
style="color:rgb(227,235,242);font-size:14px;text-align:center;margin-bottom:0px;margin:0px;line-height:24px;margin-top:0px;margin-left:0px;margin-right:0px">
115-
Need help? Contact us at <a href="mailto:support@spoo.me"
116-
style="color:rgb(124,58,237);text-decoration-line:none"
117-
target="_blank">support@spoo.me</a></p>
118-
<table align="center" width="100%" border="0" cellpadding="0" cellspacing="0"
119-
role="presentation" style="margin-top:16px;margin-bottom:24px">
120-
<tbody style="width:100%">
121-
<tr style="width:100%">
122-
<td align="center">
123-
<table border="0" cellpadding="0" cellspacing="0"
124-
role="presentation" style="display:inline-block">
125-
<tbody>
126-
<tr>
127-
<td style="padding:0 8px">
128-
<a href="https://github.com/spoo-me/spoo"
129-
style="color:#067df7;text-decoration-line:none"
130-
target="_blank"><img alt="GitHub"
131-
src="https://new.email/static/emails/social/social-github.png"
132-
style="width:24px;height:24px;display:block;outline:none;border:none;text-decoration:none" /></a>
133-
</td>
134-
<td style="padding:0 8px">
135-
<a href="https://spoo.me/discord"
136-
style="color:#067df7;text-decoration-line:none"
137-
target="_blank"><img alt="Discord"
138-
src="https://new.email/static/emails/social/social-discord.png"
139-
style="width:24px;height:24px;display:block;outline:none;border:none;text-decoration:none" /></a>
140-
</td>
141-
<td style="padding:0 8px">
142-
<a href="https://x.com/spoo_me"
143-
style="color:#067df7;text-decoration-line:none"
144-
target="_blank"><img alt="X (Twitter)"
145-
src="https://new.email/static/emails/social/social-x.png"
146-
style="width:24px;height:24px;display:block;outline:none;border:none;text-decoration:none" /></a>
147-
</td>
148-
</tr>
149-
</tbody>
150-
</table>
151-
</td>
152-
</tr>
153-
</tbody>
154-
</table>
155-
<p
156-
style="color:rgb(227,235,242);font-size:12px;text-align:center;margin:0px;line-height:24px;margin-top:0px;margin-bottom:0px;margin-left:0px;margin-right:0px">
157-
© 2025 spoo.me. All rights reserved.</p>
158-
</td>
159-
</tr>
160-
</tbody>
161-
</table>
162-
</td>
163-
</tr>
164-
</tbody>
165-
</table>
166-
</body>
167-
168-
</html>
71+
</table>{% endblock %}

0 commit comments

Comments
 (0)