Skip to content

Commit 60930f2

Browse files
committed
feat(template): add logo on email templates
1 parent b6d248a commit 60930f2

File tree

7 files changed

+211
-60
lines changed

7 files changed

+211
-60
lines changed

apps/common/templatetags/__init__.py

Whitespace-only changes.
Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
from django import template
2+
from django.conf import settings
3+
from django.templatetags.static import static
4+
5+
register = template.Library()
6+
7+
8+
@register.filter(is_safe=True)
9+
def static_full_path(path):
10+
static_path = static(path)
11+
# Domain from URL object
12+
domain = f"{settings.APP_DOMAIN.scheme}://{settings.APP_DOMAIN.hostname}"
13+
if settings.APP_DOMAIN.port:
14+
domain += f":{settings.APP_DOMAIN.port}"
15+
return f"{domain}{static_path}"

main/settings.py

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@
7777
APP_ENVIRONMENT = env("APP_ENVIRONMENT").upper()
7878
APP_TYPE = env("APP_TYPE").upper()
7979
SECRET_KEY = env("DJANGO_SECRET_KEY")
80-
80+
STATICFILES_DIRS = (str(BASE_DIR.joinpath("static")),)
8181
DEBUG = env("DEBUG")
8282

8383
ALLOWED_HOSTS = [

static/images/rc-select-logo.png

7.07 KB
Loading

templates/email/base.html

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
1-
<!DOCTYPE html>
2-
<html lang="en">
1+
2+
<html>
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>{% block title %}RC Select{% endblock %}</title>
7-
87
<style>
98
body {
109
margin: 0;
Lines changed: 92 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,101 @@
11
{% extends "email/base.html" %}
2-
32
{% block content %}
4-
<div style="margin-bottom: 20px;">
5-
<!-- TODO: Add Logo link here -->
6-
<img src="../assets/logos.png" alt="logos" style="width: 100%; max-width: 600px; height: auto; display: block;">
3+
{% load custom_tags %}
4+
5+
<!-- Logo -->
6+
<div style="margin-bottom: 24px;">
7+
<img
8+
alt="RC Select Logo" height="auto"
9+
src="{{ 'images/rc-select-logo.png' | static_full_path }}"
10+
style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:30%;font-size:14px;"
11+
width="10"
12+
/>
713
</div>
814

9-
<p style="font-size: 14px; margin-bottom: 15px; font-weight: bold; font-family: Arial, sans-serif; color: #000000;">
10-
You got a new feedback!
15+
<!-- Heading -->
16+
<p style="font-size: 20px; margin: 0 0 4px 0; font-weight: bold; font-family: Arial, sans-serif; color: #1a1a2e;">
17+
New Feedback Received
1118
</p>
19+
<p style="font-size: 14px; margin: 0 0 24px 0; font-family: Arial, sans-serif; color: #6b7280;">
20+
A user has submitted feedback through the platform.
21+
</p>
22+
23+
<!-- Divider -->
24+
<hr style="border: none; border-top: 1px solid #e5e7eb; margin: 0 0 24px 0;" />
25+
26+
<!-- User Info Card -->
27+
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background-color: #f8f9fb; border-radius: 8px; border: 1px solid #ebedf0;">
28+
<tr>
29+
<td style="padding: 20px 24px;">
30+
31+
<!-- Row: Name -->
32+
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
33+
<tr>
34+
<td width="130" style="padding: 8px 0; vertical-align: top;">
35+
<span style="font-size: 11px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.8px; color: #9ca3af; font-family: Arial, sans-serif;">Name</span>
36+
</td>
37+
<td style="padding: 8px 0; vertical-align: top;">
38+
<span style="font-size: 14px; font-weight: bold; color: #1a1a2e; font-family: Arial, sans-serif;">{{ name }}</span>
39+
</td>
40+
</tr>
41+
</table>
42+
43+
<hr style="border: none; border-top: 1px solid #e8eaed; margin: 0;" />
44+
45+
<!-- Row: Email -->
46+
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
47+
<tr>
48+
<td width="130" style="padding: 8px 0; vertical-align: top;">
49+
<span style="font-size: 11px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.8px; color: #9ca3af; font-family: Arial, sans-serif;">Email</span>
50+
</td>
51+
<td style="padding: 8px 0; vertical-align: top;">
52+
<a href="mailto:{{ email }}" style="font-size: 14px; color: #c4362a; text-decoration: none; font-family: Arial, sans-serif;">{{ email }}</a>
53+
</td>
54+
</tr>
55+
</table>
56+
57+
<hr style="border: none; border-top: 1px solid #e8eaed; margin: 0;" />
58+
59+
<!-- Row: National Society -->
60+
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
61+
<tr>
62+
<td width="130" style="padding: 8px 0; vertical-align: top;">
63+
<span style="font-size: 11px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.8px; color: #9ca3af; font-family: Arial, sans-serif;">National Society</span>
64+
</td>
65+
<td style="padding: 8px 0; vertical-align: top;">
66+
<span style="font-size: 14px; color: #1a1a2e; font-family: Arial, sans-serif;">{{ national_society }}</span>
67+
</td>
68+
</tr>
69+
</table>
70+
71+
</td>
72+
</tr>
73+
</table>
74+
75+
<!-- Feedback Content -->
76+
<div style="margin-top: 24px;">
77+
<p style="margin: 0 0 8px 0; font-size: 11px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.8px; color: #9ca3af; font-family: Arial, sans-serif;">
78+
Feedback
79+
</p>
80+
<div style="background-color: #f0f7ff; border-left: 4px solid #2563eb; border-radius: 0 6px 6px 0; padding: 16px 20px;">
81+
<p style="margin: 0; font-size: 14px; line-height: 1.65; color: #374151; font-family: Arial, sans-serif;">
82+
{{ content }}
83+
</p>
84+
</div>
85+
</div>
86+
87+
<!-- CTA -->
88+
<div style="margin-top: 28px; text-align: center;">
89+
<a href="mailto:{{ email }}?subject=Re: Your Feedback" style="display: inline-block; background-color: #f5333f; color: #ffffff; font-size: 14px; font-weight: bold; text-decoration: none; padding: 12px 36px; border-radius: 6px; font-family: Arial, sans-serif;">
90+
Reply to {{ name }} &rarr;
91+
</a>
92+
</div>
1293

13-
<div style="font-size: 14px; margin-bottom: 15px; font-family: Arial, sans-serif; color: #000000;">
14-
User Information:
94+
<div style="margin-top: 28px;">
95+
<hr style="border: none; border-top: 1px solid #e5e7eb; margin: 0 0 16px 0;" />
96+
<p style="margin: 0; font-size: 12px; color: #9ca3af; font-family: Arial, sans-serif; line-height: 1.5;">
97+
This is an automated notification. Please do not forward this email as it contains the requester&rsquo;s contact information.
98+
</p>
1599
</div>
16100

17-
<ul style="padding-left: 20px; margin: 0; font-family: Arial, sans-serif; font-size: 14px; color: #000000; line-height: 1.6;">
18-
<li style="margin-bottom: 8px;">
19-
<strong style="color: #000000;">Name:</strong> {{ name }}
20-
</li>
21-
22-
<li style="margin-bottom: 8px;">
23-
<strong style="color: #000000;">Email:</strong> {{ email }}
24-
</li>
25-
26-
<li style="margin-bottom: 8px;">
27-
<strong style="color: #000000;">National Society:</strong> {{ national_society }}
28-
</li>
29-
30-
<li style="margin-bottom: 8px;">
31-
<strong style="color: #000000;">Description:</strong> {{ content }}
32-
</li>
33-
</ul>
34101
{% endblock %}

templates/email/request_demo.html

Lines changed: 101 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,115 @@
11
{% extends "email/base.html" %}
2-
32
{% block content %}
3+
{% load custom_tags %}
44

5-
<div style="margin-bottom: 20px;">
6-
<!-- TODO: Add Logo link here -->
7-
<img src="../assets/logos.png" alt="logos" style="width: 100%; max-width: 600px; height: auto; display: block;">
5+
<!-- Logo -->
6+
<div style="margin-bottom: 24px;">
7+
<img
8+
alt="RC Select Logo" height="auto"
9+
src="{{ 'images/rc-select-logo.png' | static_full_path }}"
10+
style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:30%;font-size:14px;"
11+
width="10"
12+
/>
813
</div>
914

10-
<p style="font-size: 14px; margin-bottom: 15px; font-weight: bold; font-family: Arial, sans-serif; color: #000000;">
11-
You got a new Request for Demo!
15+
<!-- Heading -->
16+
<p style="font-size: 20px; margin: 0 0 4px 0; font-weight: bold; font-family: Arial, sans-serif; color: #1a1a2e;">
17+
New Demo Request
18+
</p>
19+
<p style="font-size: 14px; margin: 0 0 24px 0; font-family: Arial, sans-serif; color: #6b7280;">
20+
Someone is interested in seeing <strong style="color: #c4362a;">{{ tool }}</strong> in action.
1221
</p>
1322

14-
<!-- TODO: Add tool owner name here -->
15-
<div style="font-size: 14px; margin-bottom: 15px; font-family: Arial, sans-serif; color: #000000;">
16-
Hi {{name}},
23+
<!-- Divider -->
24+
<hr style="border: none; border-top: 1px solid #e5e7eb; margin: 0 0 24px 0;" />
25+
26+
<!-- User Info Card -->
27+
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background-color: #f8f9fb; border-radius: 8px; border: 1px solid #ebedf0;">
28+
<tr>
29+
<td style="padding: 20px 24px;">
30+
31+
<!-- Row: Name -->
32+
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
33+
<tr>
34+
<td width="130" style="padding: 8px 0; vertical-align: top;">
35+
<span style="font-size: 11px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.8px; color: #9ca3af; font-family: Arial, sans-serif;">Name</span>
36+
</td>
37+
<td style="padding: 8px 0; vertical-align: top;">
38+
<span style="font-size: 14px; font-weight: bold; color: #1a1a2e; font-family: Arial, sans-serif;">{{ name }}</span>
39+
</td>
40+
</tr>
41+
</table>
42+
43+
<hr style="border: none; border-top: 1px solid #e8eaed; margin: 0;" />
44+
45+
<!-- Row: Email -->
46+
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
47+
<tr>
48+
<td width="130" style="padding: 8px 0; vertical-align: top;">
49+
<span style="font-size: 11px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.8px; color: #9ca3af; font-family: Arial, sans-serif;">Email</span>
50+
</td>
51+
<td style="padding: 8px 0; vertical-align: top;">
52+
<a href="mailto:{{ email }}" style="font-size: 14px; color: #c4362a; text-decoration: none; font-family: Arial, sans-serif;">{{ email }}</a>
53+
</td>
54+
</tr>
55+
</table>
56+
57+
<hr style="border: none; border-top: 1px solid #e8eaed; margin: 0;" />
58+
59+
<!-- Row: Tool -->
60+
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
61+
<tr>
62+
<td width="130" style="padding: 8px 0; vertical-align: top;">
63+
<span style="font-size: 11px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.8px; color: #9ca3af; font-family: Arial, sans-serif;">Tool</span>
64+
</td>
65+
<td style="padding: 8px 0; vertical-align: top;">
66+
<span style="font-size: 14px; color: #1a1a2e; font-family: Arial, sans-serif;">{{ tool }}</span>
67+
</td>
68+
</tr>
69+
</table>
70+
71+
<hr style="border: none; border-top: 1px solid #e8eaed; margin: 0;" />
72+
73+
<!-- Row: National Society -->
74+
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
75+
<tr>
76+
<td width="130" style="padding: 8px 0; vertical-align: top;">
77+
<span style="font-size: 11px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.8px; color: #9ca3af; font-family: Arial, sans-serif;">National Society</span>
78+
</td>
79+
<td style="padding: 8px 0; vertical-align: top;">
80+
<span style="font-size: 14px; color: #1a1a2e; font-family: Arial, sans-serif;">{{ national_society }}</span>
81+
</td>
82+
</tr>
83+
</table>
84+
85+
</td>
86+
</tr>
87+
</table>
88+
89+
<!-- Description -->
90+
<div style="margin-top: 24px;">
91+
<p style="margin: 0 0 8px 0; font-size: 11px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.8px; color: #9ca3af; font-family: Arial, sans-serif;">
92+
Description
93+
</p>
94+
<div style="background-color: #fef9f8; border-left: 4px solid #c4362a; border-radius: 0 6px 6px 0; padding: 16px 20px;">
95+
<p style="margin: 0; font-size: 14px; line-height: 1.65; color: #374151; font-family: Arial, sans-serif;">
96+
{{ content }}
97+
</p>
98+
</div>
1799
</div>
18100

19-
<!-- TODO: Add tool name here -->
20-
<div style="font-size: 14px; margin-bottom: 15px; font-family: Arial, sans-serif; color: #000000;">
21-
You've received a new demo request from a user through {{name}}:
101+
<!-- CTA -->
102+
<div style="margin-top: 28px; text-align: center;">
103+
<a href="mailto:{{ email }}?subject=Re: Demo Request for {{ tool }}" style="display: inline-block; background-color: #f5333f; color: #ffffff; font-size: 14px; font-weight: bold; text-decoration: none; padding: 12px 36px; border-radius: 6px; font-family: Arial, sans-serif;">
104+
Reply to {{ name }} &rarr;
105+
</a>
22106
</div>
23107

24-
<div style="font-size: 14px; margin-bottom: 15px; font-family: Arial, sans-serif; color: #000000;">
25-
User Information:
108+
<div style="margin-top: 28px;">
109+
<hr style="border: none; border-top: 1px solid #e5e7eb; margin: 0 0 16px 0;" />
110+
<p style="margin: 0; font-size: 12px; color: #9ca3af; font-family: Arial, sans-serif; line-height: 1.5;">
111+
This is an automated notification. Please do not forward this email as it contains the requester&rsquo;s contact information.
112+
</p>
26113
</div>
27114

28-
<ul style="padding-left: 20px; margin: 0; font-family: Arial, sans-serif; font-size: 14px; color: #000000; line-height: 1.6;">
29-
<li style="margin-bottom: 8px;">
30-
<strong style="color: #000000;">Name:</strong> {{ name }}
31-
</li>
32-
33-
<li style="margin-bottom: 8px;">
34-
<strong style="color: #000000;">Email:</strong> {{ email }}
35-
</li>
36-
37-
<li style="margin-bottom: 8px;">
38-
<strong style="color: #000000;">National Society:</strong> {{ national_society }}
39-
</li>
40-
41-
<li style="margin-bottom: 8px;">
42-
<strong style="color: #000000;">Description:</strong> {{ content }}
43-
</li>
44-
</ul>
45115
{% endblock %}

0 commit comments

Comments
 (0)