From df6381fd5e455a82167dffc7ca0649d49fd4ca9f Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp@philippdormann.de>
Date: Tue, 18 Mar 2025 23:37:28 +0100
Subject: [PATCH] feat: new email templates

---
 src/templates/welcome/de.html | 115 +++++++++++++++++++++++++++++-----
 src/templates/welcome/en.html | 115 ++++++++++++++++++++++++++++++----
 2 files changed, 202 insertions(+), 28 deletions(-)

diff --git a/src/templates/welcome/de.html b/src/templates/welcome/de.html
index 060614f..3e6a2a4 100644
--- a/src/templates/welcome/de.html
+++ b/src/templates/welcome/de.html
@@ -175,8 +175,10 @@
 								-moz-osx-font-smoothing: grayscale;
 							"
 						>
-							Am Lauftag (<strong>{{event_date}}</strong>) musst du nur noch diesen
-							Barcode vorzeigen, damit erhältst du deine Läuferkarte.
+							Am Lauftag (<strong>{{event_date}}</strong>) musst du nur noch
+							diesen Barcode vorzeigen, damit erhältst du deine Läuferkarte.<br />Der
+							Bürger- & Firmenlauf findet von
+							<strong>13:00 bis 18:00 Uhr</strong> statt.
 						</p>
 						<table
 							align="center"
@@ -223,20 +225,103 @@
 							"
 						>
 							Deinen Registrierungs-Code, Rundenzeiten und weitere Infos kannst
-							du jederzeit im
-							<a
-								href="{{link}}"
-								rel="noopener noreferrer nofollow"
-								style="
-									color: #111827;
-									text-decoration: underline;
-									font-weight: 500;
-								"
-								target="_blank"
-								>Lauf für Kaya! Selfservice</a
-							>
-							einsehen.
+							du jederzeit im Lauf für Kaya! Selfservice einsehen.
 						</p>
+						<table
+							align="center"
+							width="100%"
+							border="0"
+							cellpadding="0"
+							cellspacing="0"
+							role="presentation"
+							style="max-width: 100%; text-align: center; margin-bottom: 20px"
+						>
+							<tbody>
+								<tr style="width: 100%">
+									<td>
+										<a
+											href="{{link}}"
+											style="
+												line-height: 100%;
+												text-decoration: none;
+												display: inline-block;
+												max-width: 100%;
+												mso-padding-alt: 0px;
+												color: #ffffff;
+												background-color: #3a4bdd;
+												border-color: #3a4bdd;
+												border-width: 2px;
+												border-style: solid;
+												font-size: 14px;
+												font-weight: 500;
+												border-radius: 0px;
+												padding: 12px 32px 12px 32px;
+											"
+											target="_blank"
+											><span
+												><!--[if mso
+													]><i
+														style="mso-font-width: 400%; mso-text-raise: 18"
+														hidden
+														>&#8202;&#8202;&#8202;&#8202;</i
+													><!
+												[endif]--></span
+											><span
+												style="
+													max-width: 100%;
+													display: inline-block;
+													line-height: 120%;
+													mso-padding-alt: 0px;
+													mso-text-raise: 9px;
+												"
+												>Zum Selfservice Portal</span
+											><span
+												><!--[if mso
+													]><i style="mso-font-width: 400%" hidden
+														>&#8202;&#8202;&#8202;&#8202;&#8203;</i
+													><!
+												[endif]--></span
+											></a
+										>
+									</td>
+								</tr>
+							</tbody>
+						</table>
+						<p
+							style="
+								font-size: 15px;
+								line-height: 26.25px;
+								margin: 0 0 20px 0;
+								-webkit-font-smoothing: antialiased;
+								-moz-osx-font-smoothing: grayscale;
+								color: #374151;
+							"
+						>
+							Wenn der Button nicht funktioniert, kannst du diesen Link in
+							deinen Browser kopieren:
+							<code
+								style="
+									background-color: #efefef;
+									color: #111827;
+									padding: 2px 4px;
+									border-radius: 6px;
+									font-family: SFMono-Regular, Menlo, Monaco, Consolas,
+										'Liberation Mono', 'Courier New', monospace;
+									font-weight: 400;
+									letter-spacing: 0;
+								"
+								>{{link}}</code
+							>
+						</p>
+						<hr
+							style="
+								width: 100%;
+								border: none;
+								border-top: 1px solid #eaeaea;
+								margin-top: 32px;
+								margin-bottom: 32px;
+							"
+						/>
 						<p
 							style="
 								font-size: 15px;
diff --git a/src/templates/welcome/en.html b/src/templates/welcome/en.html
index a8b59c3..6d337cc 100644
--- a/src/templates/welcome/en.html
+++ b/src/templates/welcome/en.html
@@ -160,7 +160,7 @@
 								-moz-osx-font-smoothing: grayscale;
 							"
 						>
-                            Thank you for registering for the {{event_name}}
+							Thank you for registering for the {{event_name}}
 						</p>
 						<p
 							style="
@@ -175,7 +175,10 @@
 								-moz-osx-font-smoothing: grayscale;
 							"
 						>
-                            On the day of the run (<strong>{{event_date}}</strong>) you only have to show your barcode to receive your runner's card.
+							On the day of the run (<strong>{{event_date}}</strong>) you only
+							have to show your barcode to receive your runner's card.<br />The
+							Citizens' & Company Run will take place from
+							<strong> 1:00 p.m. to 6:00 p.m.</strong>
 						</p>
 						<table
 							align="center"
@@ -221,19 +224,104 @@
 								-moz-osx-font-smoothing: grayscale;
 							"
 						>
-                            You can view your registration code, lap times and further information at any time from the 
-							<a
-								href="{{link}}"
-								rel="noopener noreferrer nofollow"
+							You can view your registration code, lap times and further
+							information at any time from the Lauf für Kaya! Selfservice
+						</p>
+						<table
+							align="center"
+							width="100%"
+							border="0"
+							cellpadding="0"
+							cellspacing="0"
+							role="presentation"
+							style="max-width: 100%; text-align: center; margin-bottom: 20px"
+						>
+							<tbody>
+								<tr style="width: 100%">
+									<td>
+										<a
+											href="{{link}}"
+											style="
+												line-height: 100%;
+												text-decoration: none;
+												display: inline-block;
+												max-width: 100%;
+												mso-padding-alt: 0px;
+												color: #ffffff;
+												background-color: #3a4bdd;
+												border-color: #3a4bdd;
+												border-width: 2px;
+												border-style: solid;
+												font-size: 14px;
+												font-weight: 500;
+												border-radius: 0px;
+												padding: 12px 32px 12px 32px;
+											"
+											target="_blank"
+											><span
+												><!--[if mso
+													]><i
+														style="mso-font-width: 400%; mso-text-raise: 18"
+														hidden
+														>&#8202;&#8202;&#8202;&#8202;</i
+													><!
+												[endif]--></span
+											><span
+												style="
+													max-width: 100%;
+													display: inline-block;
+													line-height: 120%;
+													mso-padding-alt: 0px;
+													mso-text-raise: 9px;
+												"
+												>To the self-service portal</span
+											><span
+												><!--[if mso
+													]><i style="mso-font-width: 400%" hidden
+														>&#8202;&#8202;&#8202;&#8202;&#8203;</i
+													><!
+												[endif]--></span
+											></a
+										>
+									</td>
+								</tr>
+							</tbody>
+						</table>
+						<p
+							style="
+								font-size: 15px;
+								line-height: 26.25px;
+								margin: 0 0 20px 0;
+								-webkit-font-smoothing: antialiased;
+								-moz-osx-font-smoothing: grayscale;
+								color: #374151;
+							"
+						>
+							If the button doesn't work, you can copy this link into your
+							browser:
+							<code
 								style="
+									background-color: #efefef;
 									color: #111827;
-									text-decoration: underline;
-									font-weight: 500;
+									padding: 2px 4px;
+									border-radius: 6px;
+									font-family: SFMono-Regular, Menlo, Monaco, Consolas,
+										'Liberation Mono', 'Courier New', monospace;
+									font-weight: 400;
+									letter-spacing: 0;
 								"
-								target="_blank"
-								>Lauf für Kaya! Selfservice</a
+								>{{link}}</code
 							>
 						</p>
+						<hr
+							style="
+								width: 100%;
+								border: none;
+								border-top: 1px solid #eaeaea;
+								margin-top: 32px;
+								margin-bottom: 32px;
+							"
+						/>
 						<p
 							style="
 								font-size: 15px;
@@ -247,7 +335,7 @@
 								-moz-osx-font-smoothing: grayscale;
 							"
 						>
-                            We look forward to seeing you and to a successful Lauf für Kaya!
+							We look forward to seeing you and to a successful Lauf für Kaya!
 						</p>
 						<p
 							style="
@@ -262,7 +350,8 @@
 								-moz-osx-font-smoothing: grayscale;
 							"
 						>
-                            If you have any questions, please reply to this e-mail at any time or write to 
+							If you have any questions, please reply to this e-mail at any time
+							or write to
 							<u
 								><strong
 									><a
@@ -292,7 +381,7 @@
 								-moz-osx-font-smoothing: grayscale;
 							"
 						>
-                            Sporty Greetings 🏃‍♂️<br />Your Team Lauf für Kaya!
+							Sporty Greetings 🏃‍♂️<br />Your Team Lauf für Kaya!
 						</p>
 						<hr
 							style="