Marijn/TijdVoorDeTest
1
0
Fork 0
mirror of https://github.com/MarijnDoeve/TijdVoorDeTest.git synced 2026-07-13 13:25:19 +02:00
Code Issues Packages Projects Releases Activity

Add Inky-based, WIDM-styled email templates (#212)

Browse Source 
Adds twig/inky-extra and twig/cssinliner-extra to build the password
reset and email confirmation emails from a shared responsive layout,
styled after the quiz's green/black look, with Dutch copy in the
show's dramatic tone.
This commit is contained in:
Marijn Doeve
2026-07-12 22:57:16 +02:00
committed by GitHub
parent ee408cd065
commit 97cec66083
9 changed files with 554 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/backoffice/registration/confirmation_email.html.twig
+20 -9
View File
@@ -1,11 +1,22 @@
<h1>Hi! Please confirm your email!</h1>
{% extends 'emails/layout.html.twig' %}
<p>
Please confirm your email address by clicking the following link: <br><br>
<a href="{{ signedUrl|raw }}">Confirm my Email</a>.
This link will expire in {{ expiresAtMessageKey|trans(expiresAtMessageData, 'VerifyEmailBundle') }}.
</p>
{% block preheader %}Bevestig je e-mailadres voor Tijd voor de test.{% endblock %}
<p>
Cheers!
</p>
{% block heading %}Nog één stap voor je mee mag doen{% endblock %}
{% block body %}
<p class="text">Beste speler,</p>
<p class="text">
Welkom bij Tijd voor de test! Voor je echt aan de slag kunt, moeten we nog één ding
weten: of jij écht bent wie je zegt dat je bent. Klik daarom op de knop hieronder.
</p>
<center><button href="{{ signedUrl|raw }}">Bevestig e-mailadres</button></center>
<p class="text">
Deze link verloopt over {{ expiresAtMessageKey|trans(expiresAtMessageData, 'VerifyEmailBundle') }}, dus
wacht niet te lang.
</p>
<p class="text">Veel plezier!</p>
{% endblock %}
templates/emails/layout.html.twig
+168
View File
@@ -0,0 +1,168 @@
{% apply inline_css %}
{% apply inky_to_html %}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}Tijd voor de test{% endblock %}</title>
<style>
body, table, td { font-family: Arial, Helvetica, sans-serif; }
body {
margin: 0;
padding: 0;
width: 100% !important;
background-color: #f2f4f1;
color: #22281f;
}
table { border-collapse: collapse; }
img { border: 0; }
a { color: #2d7a1f; }
.body-table { width: 100%; background-color: #f2f4f1; }
.container { width: 100%; max-width: 580px; }
.header > tbody > tr > th { padding: 28px 24px 20px 24px; text-align: center; }
.brand-table { margin: 0 auto; }
.square-cell { width: 18px; }
.square {
width: 18px !important;
height: 18px !important;
max-width: 18px;
min-width: 18px;
max-height: 18px;
min-height: 18px;
font-size: 0;
line-height: 1px;
border-radius: 4px;
background-color: #6abf4b;
}
.square-gap { width: 10px; font-size: 0; line-height: 1px; }
.brand {
font-size: 20px;
font-weight: bold;
letter-spacing: 0.5px;
color: #17321a;
white-space: nowrap;
}
.content-wrapper { background-color: #f2f4f1; }
.content-wrapper > tbody > tr > th { padding: 24px 28px; }
.card {
background-color: #ffffff;
border-radius: 8px;
border: 1px solid #e1e6dd;
}
.card td.card-inner { padding: 32px; }
h1.heading {
margin: 0 0 16px 0;
font-size: 21px;
line-height: 1.3;
color: #17321a;
}
p.text {
margin: 0 0 16px 0;
font-size: 15px;
line-height: 1.6;
color: #3a4239;
}
p.text:last-child { margin-bottom: 0; }
.button { margin: 8px auto 12px auto; width: auto !important; }
.button table { width: auto; margin: 0 auto; }
.button td { border-radius: 5px; background: #2d7a1f; }
.button a {
background: #2d7a1f;
color: #ffffff !important;
border-radius: 5px;
display: inline-block;
padding: 12px 26px;
font-size: 15px;
font-weight: bold;
text-decoration: none;
border: 1px solid #2d7a1f;
}
.h-line th { border-bottom: 1px solid #e1e6dd; height: 1px; font-size: 0; line-height: 0; }
.footer > tbody > tr > th { padding: 24px 28px 32px 28px; text-align: center; }
.footer p {
margin: 0;
font-size: 12px;
line-height: 1.6;
color: #8b9186;
}
.preheader {
display: none !important;
visibility: hidden;
opacity: 0;
color: transparent;
height: 0;
width: 0;
font-size: 1px;
line-height: 1px;
max-height: 0;
max-width: 0;
overflow: hidden;
mso-hide: all;
}
</style>
</head>
<body>
<span class="preheader">{% block preheader %}{% endblock %}</span>
<table class="body-table" role="presentation">
<tr>
<td align="center">
<container>
<row class="header">
<columns small="12" large="12" no-expander="true">
<table class="brand-table" role="presentation" align="center">
<tr>
<td class="square-cell" valign="middle">
<table role="presentation" width="18" height="18" style="width: 18px !important; height: 18px !important; max-width: 18px; min-width: 18px;">
<tr style="height: 18px !important;">
<td class="square" width="18" height="18" style="width: 18px !important; height: 18px !important; max-width: 18px; min-width: 18px; max-height: 18px; min-height: 18px;">&nbsp;</td>
</tr>
</table>
</td>
<td class="square-gap">&nbsp;</td>
<td class="brand" valign="middle">Tijd voor de test</td>
</tr>
</table>
</columns>
</row>
<row class="content-wrapper">
<columns small="12" large="12" class="content" no-expander="true">
<table class="card" role="presentation" width="100%">
<tr>
<td class="card-inner">
<h1 class="heading">{% block heading %}{% endblock %}</h1>
{% block body %}{% endblock %}
</td>
</tr>
</table>
</columns>
</row>
<row class="footer">
<columns small="12" large="12" no-expander="true">
<h-line></h-line>
<spacer size="16"></spacer>
{% block footer_extra %}{% endblock %}
</columns>
</row>
</container>
</td>
</tr>
</table>
</body>
</html>
{% endapply %}
{% endapply %}
templates/reset_password/email.html.twig
+23 -5
View File
@@ -1,9 +1,27 @@
<h1>Hi!</h1>
{% extends 'emails/layout.html.twig' %}
<p>To reset your password, please visit the following link</p>
{% block preheader %}Je hebt om een nieuw wachtwoord gevraagd voor Tijd voor de test.{% endblock %}
<a href="{{ url('tvdt_reset_password', {token: resetToken.token}) }}">{{ url('tvdt_reset_password', {token: resetToken.token}) }}</a>
{% block heading %}Tijd voor een nieuw wachtwoord{% endblock %}
<p>This link will expire in {{ resetToken.expirationMessageKey|trans(resetToken.expirationMessageData, 'ResetPasswordBundle') }}.</p>
{% block body %}
<p class="text">Beste speler,</p>
<p class="text">
Je hebt aangegeven dat je wachtwoord opnieuw moet worden ingesteld. Voordat je verder mag, is er nog één
opdracht: klik op de knop hieronder.
</p>
<p>Cheers!</p>
<center><button href="{{ url('tvdt_reset_password', {token: resetToken.token}) }}">Stel wachtwoord opnieuw in</button></center>
<p class="text">
Werkt de knop niet? Kopieer dan deze link naar je browser:<br>
<a href="{{ url('tvdt_reset_password', {token: resetToken.token}) }}">{{ url('tvdt_reset_password', {token: resetToken.token}) }}</a>
</p>
<p class="text">
Let op: deze link is, niet eeuwig geldig. Hij verloopt over
{{ resetToken.expirationMessageKey|trans(resetToken.expirationMessageData, 'ResetPasswordBundle') }}.
</p>
<p class="text">Veel succes!</p>
{% endblock %}