Skip to content

Commit 2c66289

Browse files
Brutus5000Brutus5000
committed
Add FAF styled emails in MailJet markup language
1 parent e7daf7f commit 2c66289

6 files changed

Lines changed: 264 additions & 0 deletions

File tree

‎src/main/mjml/_footer.mjml‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<mj-section background-color="#000000" padding="2px" css-class="footer">
2+
<mj-column>
3+
<mj-text color="white" align="center" padding="2px">
4+
<ul>
5+
<li>
6+
<a target="_blank" href="https://discord.com/invite/hgvj6Af">
7+
<i class="fab fa-discord" aria-label="FAF Discord"/>
8+
</a>
9+
</li>
10+
<li>
11+
<a target="_blank" href="https://www.youtube.com/c/ForgedAllianceForever">
12+
<i class="fab fa-youtube" aria-label="FAF Youtube"/>
13+
</a>
14+
</li>
15+
<li>
16+
<a target="_blank" href="https://www.facebook.com/ForgedAllianceForever">
17+
<i class="fab fa-facebook" aria-label="FAF Facebook"/>
18+
</a>
19+
</li>
20+
<li>
21+
<a target="_blank" href="https://github.com/FAForever/">
22+
<i class="fab fa-github" aria-label="FAF Github"/>
23+
</a>
24+
</li>
25+
<li>
26+
<a target="_blank" href="https://www.patreon.com/faf">
27+
<i class="fab fa-patreon" aria-label="FAF Patreon"/>
28+
</a>
29+
</li>
30+
</ul>
31+
<p>
32+
<a href="https://wwww.faforever.com">www.faforever.com</a>
33+
</p>
34+
</mj-text>
35+
</mj-column>
36+
</mj-section>

‎src/main/mjml/_header.mjml‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<mj-section background-url="https://faforever.com/images/index-background.jpg" background-size="cover">
2+
<mj-column>
3+
<mj-spacer height="50px"/>
4+
<mj-image src="https://faforever.com/images/vector_faf_logo.png" alt="FAF Logo" width="100px" height="100px"/>
5+
<mj-text font-family="Yanone Kaffeesatz" font-size="40px" color="white" align="center">Forged Alliance Forever
6+
</mj-text>
7+
<mj-spacer height="50px"/>
8+
</mj-column>
9+
</mj-section>

‎src/main/mjml/_style.mjml‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<mj-font name="Yanone Kaffeesatz" href="https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz"/>
2+
<mj-raw>
3+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"
4+
integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w=="
5+
crossorigin="anonymous"/>
6+
</mj-raw>
7+
<mj-style>
8+
.footer li {
9+
display: inline-block;
10+
padding: 0 1px;
11+
}
12+
13+
.footer ul {
14+
padding: 0;
15+
list-style-type: none;
16+
}
17+
18+
.footer a {
19+
text-decoration: none;
20+
}
21+
22+
a, a:visited {
23+
color: white;
24+
}
25+
26+
.footer a:hover {
27+
color: #d32a0e;
28+
}
29+
</mj-style>

‎src/main/mjml/activate-account.mjml‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<mjml>
2+
<mj-head>
3+
<mj-include path="_style.mjml" />
4+
<mj-preview>
5+
FAForever account activation
6+
</mj-preview>
7+
</mj-head>
8+
<mj-body background-color="#fafafa">
9+
<mj-include path="_header.mjml" />
10+
11+
<mj-section background-color="#ffffff">
12+
<mj-column>
13+
<mj-text>
14+
<h1>Activate your account</h1>
15+
<p>Dear {{username}},</p>
16+
<p>welcome to the FAForever community. To finish your registration please activate your account and select a
17+
password.
18+
</p>
19+
</mj-text>
20+
<mj-button href="{{activationUrl}">
21+
Activate account
22+
</mj-button>
23+
<mj-text>
24+
<p>Further information will be provided to you after activation.</p>
25+
</mj-text>
26+
<mj-text>
27+
<p>Thanks,</p>
28+
<p>-- The FAForever team</p>
29+
</mj-text>
30+
</mj-column>
31+
</mj-section>
32+
33+
<mj-section background-color="gray" padding="0">
34+
<mj-column>
35+
<mj-text color="#d3d3d3">
36+
<p>You don't know where this email is coming from?</p>
37+
<p>Someone used your email address in the registration form on faforever.com. If you do not wish to be part of
38+
our community, just ignore or delete this email. No account was created yet.
39+
</p>
40+
</mj-text>
41+
</mj-column>
42+
</mj-section>
43+
44+
<mj-include path="_footer.mjml" />
45+
</mj-body>
46+
</mjml>

‎src/main/mjml/password-reset.mjml‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<mjml>
2+
<mj-head>
3+
<mj-include path="_style.mjml" />
4+
<mj-preview>
5+
Password reset
6+
</mj-preview>
7+
</mj-head>
8+
<mj-body background-color="#fafafa">
9+
<mj-include path="_header.mjml" />
10+
11+
<mj-section background-color="#ffffff">
12+
<mj-column>
13+
<mj-text>
14+
<h1>Password reset</h1>
15+
<p>Dear {{username}},</p>
16+
<p>a password reset was requested for your account. Click on the button to reset your password now.
17+
</p>
18+
</mj-text>
19+
<mj-button href="{{passwordResetUrl}}">
20+
Reset password
21+
</mj-button>
22+
<mj-text>
23+
<p>Thanks,</p>
24+
<p>-- The FAForever team</p>
25+
</mj-text>
26+
</mj-column>
27+
</mj-section>
28+
29+
<mj-section background-color="gray" padding="0">
30+
<mj-column>
31+
<mj-text color="#d3d3d3">
32+
<p>If you did not request a new password or changed your mind, you can just delete this email.
33+
</p>
34+
</mj-text>
35+
</mj-column>
36+
</mj-section>
37+
38+
<mj-include path="_footer.mjml" />
39+
</mj-body>
40+
</mjml>

‎src/main/mjml/welcome-to-faf.mjml‎

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
<mjml>
2+
<mj-head>
3+
<mj-include path="_style.mjml"/>
4+
<mj-preview>
5+
Password reset
6+
</mj-preview>
7+
</mj-head>
8+
<mj-body background-color="#fafafa">
9+
<mj-include path="_header.mjml"/>
10+
11+
<mj-section background-color="#ffffff">
12+
<mj-column>
13+
<mj-text>
14+
<h1>Welcome, {{username}}</h1>
15+
<p>you just joined FAF, how great is that! We're a rather small community so every new member is precious to
16+
us.
17+
</p>
18+
<p>This email contains the next steps to get you started.</p>
19+
</mj-text>
20+
21+
<mj-divider border-width="2px" border-color="lightgrey" padding-bottom="0px"/>
22+
</mj-column>
23+
</mj-section>
24+
25+
<mj-section background-color="#ffffff" padding-top="0px">
26+
<mj-column>
27+
<mj-text>
28+
<h2>Link your account to Steam</h2>
29+
<p>Before you can play games, we need to verify that you own the game. Please login to our website and link
30+
your account to Steam. Make sure your Steam profile and game list are public (you can follow <a
31+
href="https://imgur.com/a/enuUlAb">this guide</a>).
32+
</p>
33+
</mj-text>
34+
<mj-button href="https://www.faforever.com/account/link">
35+
Link to Steam
36+
</mj-button>
37+
<mj-divider border-width="2px" border-color="lightgrey" padding-bottom="0px"/>
38+
</mj-column>
39+
</mj-section>
40+
41+
<mj-section background-color="#ffffff" padding-top="0px">
42+
<mj-column>
43+
<mj-text>
44+
<h2>Download our Client</h2>
45+
<p>You will need to install our client to chat with other player launch games, download maps & mods..
46+
</p>
47+
</mj-text>
48+
<mj-button href="https://www.faforever.com/client">
49+
Download FAF client
50+
</mj-button>
51+
<mj-divider border-width="2px" border-color="lightgrey" padding-bottom="0px"/>
52+
</mj-column>
53+
</mj-section>
54+
55+
<mj-section background-color="#ffffff" padding-top="0px">
56+
<mj-column>
57+
<mj-text>
58+
<h2>Get help</h2>
59+
<p>Don't be afraid to ask for help. FAF isn't always straightforward. But we have plenty of resources to help you out.</p>
60+
</mj-text>
61+
</mj-column>
62+
</mj-section>
63+
64+
<mj-section background-color="#ffffff" padding-top="0px">
65+
<mj-column>
66+
<mj-button href="https://forum.faforever.com/category/18/frequently-asked-questions">
67+
Open FAQ
68+
</mj-button>
69+
</mj-column>
70+
<mj-column>
71+
<mj-button href="https://wiki.faforever.com">
72+
Open Wiki
73+
</mj-button>
74+
</mj-column>
75+
<mj-column>
76+
<mj-button href="https://forum.faforever.com">
77+
Open Forum
78+
</mj-button>
79+
</mj-column>
80+
</mj-section>
81+
82+
<mj-section background-color="#ffffff" padding-top="0px">
83+
<mj-column>
84+
<mj-divider border-width="2px" border-color="lightgrey" padding-top="0px"/>
85+
<mj-text>
86+
<p>We hope this gives you a head start. See you on the battlefield!</p>
87+
<p>-- The FAForever team</p>
88+
</mj-text>
89+
</mj-column>
90+
</mj-section>
91+
92+
<mj-section background-color="gray" padding="0">
93+
<mj-column>
94+
<mj-text color="#d3d3d3">
95+
<p>Should you ever want to delete your account, please send an email with your request to
96+
admin@faforever.com.
97+
</p>
98+
</mj-text>
99+
</mj-column>
100+
</mj-section>
101+
102+
<mj-include path="_footer.mjml"/>
103+
</mj-body>
104+
</mjml>

0 commit comments

Comments
 (0)