copenhagentruckwash/api
1
0
Fork 0
Code Issues Pull Requests 1 Actions 2 Packages Projects Releases Wiki Activity

Refine new customer welcome email template with inline styles, improved accessibility, and MSO-specific adjustments

Browse Source
This commit is contained in:
Jeppe Bundgaard
2026-02-18 15:42:14 +01:00
parent c5840c0f3e
commit 3f512a4fa6
2 changed files with 71 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
services/nginx/app/modules/email/templates/email_template_head.php
+24
View File
@@ -20,6 +20,17 @@ class email_template_head
?>
<!-- Styles -->
<style>
/* Reset/legacy helpers for broad email client support */
html, body { margin: 0 !important; padding: 0 !important; height: 100% !important; width: 100% !important; }
* { -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
table { border-collapse: collapse !important; }
img { -ms-interpolation-mode: bicubic; border: 0; outline: none; text-decoration: none; display: block; }
a { text-decoration: none; }
/* Outlook.com (a.k.a. Hotmail) line-height fix */
.ExternalClass { width: 100%; }
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div { line-height: 100%; }
/* Base container used by all custom email templates */
.email-template {
width: 100%;
@@ -98,6 +109,19 @@ class email_template_head
.signature-role { font-style: italic; }
</style>
<!--[if mso]>
<style type="text/css">
/* Outlook (Word) specific adjustments to mimic web rendering */
body, table, td, p, a, span { font-family: Arial, sans-serif !important; }
p { margin: 0 0 18px 0 !important; mso-line-height-rule: exactly; line-height: 150% !important; }
.container-text-lg { font-size: 24px !important; }
.container-text-md { font-size: 16px !important; }
.container-text-sm { font-size: 14px !important; }
.no-margin { margin: 0 !important; }
.email-template { width: 600px !important; }
</style>
<![endif]-->
<?php
# End of the html
return ob_get_clean();
services/nginx/app/modules/email/templates/email_template_new_customer.php
+47 -31
View File
@@ -57,30 +57,30 @@ class email_template_new_customer
?>
<!-- New customer welcome template (styled per provided HTML) -->
<div class="email-template">
<div class="email-template" style="width:100%;max-width:600px;margin:0 auto;font-family:Arial, sans-serif;color:#000000;">
<!-- Blue outer container -->
<div class="container-blue">
<div class="container-blue" style="background-color:#001244;padding:48px 24px;">
<!-- White inner card -->
<div class="container-inner">
<div class="container-inner" style="background-color:#ffffff;border-radius:0;padding:32px 24px;">
<!-- Title / Welcome -->
<p class="container-text-lg"><strong>Velkommen!</strong></p>
<p class="container-text-lg" style="color:#000000;font-size:24px;line-height:1.5;margin:0 0 24px 0;mso-line-height-rule:exactly;"><strong>Velkommen!</strong></p>
<!-- Intro -->
<p class="container-text-md">
<p class="container-text-md" style="color:#000000;font-size:16px;line-height:1.5;margin:0 0 18px 0;mso-line-height-rule:exactly;">
Tak for din registrering af <?=((new users_o())->getCustomerName((int)$this->customer_number))?><?=(((new users_o())->getCustomerEcocomicData((int)$this->customer_number)->economic_customer->corporateIdentificationNumber) ? ' (' . (new users_o())->getCustomerEcocomicData((int)$this->customer_number)->economic_customer->corporateIdentificationNumber . ')' : '')?> som kunde hos Truck Wash.
</p>
<!-- You can now wash your trucks -->
<p class="container-text-md">
<p class="container-text-md" style="color:#000000;font-size:16px;line-height:1.5;margin:0 0 18px 0;mso-line-height-rule:exactly;">
Du kan nu vaske i alle vores afdelinger, find din nærmeste på
<a href="https://www.truckwash.dk" style="color:#001244; text-decoration:none;">truckwash.dk</a>
</p>
<!-- As a new customer of Truck Wash, features -->
<p class="container-text-md no-margin">
<p class="container-text-md no-margin" style="color:#000000;font-size:16px;line-height:1.5;margin:0;mso-line-height-rule:exactly;">
Som ny kunde af Truck Wash får du adgang til en række unikke fordele:
</p>
<ul class="container-text-md" style="list-style-type: disc; padding-left: 20px; margin-top: 0;">
<ul class="container-text-md" style="list-style-type: disc; padding-left: 20px; margin-top: 0; margin-bottom:18px;">
<li>Et landsdækkende netværk af vaskehaller</li>
<li>En kundeportal, hvor du kan håndtere alle aspekter af dine vaskebehov</li>
<li>En samlet faktura for alle dine vaske på tværs af landet</li>
@@ -90,47 +90,63 @@ class email_template_new_customer
</ul>
<!-- Customer credentials -->
<p class="container-text-md no-margin">
<p class="container-text-md no-margin" style="color:#000000;font-size:16px;line-height:1.5;margin:0;mso-line-height-rule:exactly;">
Dit login til kundeportalen er:<br/>
<strong>Brugernavn:</strong> <?= $this->customer_number ?><br/>
<strong>Kode:</strong> Ikke opsat
</p>
<!-- Button to create password (centered)-->
<!-- Button to create password (centered) with MSO fallback -->
<div style="margin-top: 24px; margin-bottom: 32px; text-align: center;">
<a href="<?= htmlspecialchars($this->password_reset_link) ?>" class="container-button container-button-shadow">Færdiggør kontoopsætning</a>
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word"
href="<?= htmlspecialchars($this->password_reset_link) ?>"
style="height:48px;v-text-anchor:middle;width:360px;" arcsize="25%" stroke="f" fillcolor="#477fae">
<w:anchorlock/>
<center style="color:#ffffff;font-family:Arial,sans-serif;font-size:18px;">Færdiggør kontoopsætning</center>
</v:roundrect>
<![endif]-->
<!--[if !mso]><!-- -->
<a href="<?= htmlspecialchars($this->password_reset_link) ?>"
class="container-button container-button-shadow"
style="background-color:#477fae;color:#ffffff !important;padding:16px 24px;text-decoration:none;border-radius:15px;font-size:18px;display:inline-block;box-shadow:0 4px 8px rgba(0,0,0,0.2);">
Færdiggør kontoopsætning
</a>
<!--<![endif]-->
</div>
<!-- Closing -->
<p class="container-text-md no-margin">
<p class="container-text-md no-margin" style="color:#000000;font-size:16px;line-height:1.5;margin:0;mso-line-height-rule:exactly;">
Vi ser frem til at modtage dine køretøjer ude i vaskebanerne.<br/>
Har du spørgsmål, så kontakt os endelig.
</p>
<!-- Kind regards -->
<p class="container-text-md no-margin" style="margin-top: 16px;">
<p class="container-text-md no-margin" style="margin-top: 16px;color:#000000;font-size:16px;line-height:1.5;mso-line-height-rule:exactly;">
Med venlig hilsen,
</p>
<!-- Signatures (images + contact) -->
<div class="signature-columns" style="margin-top: 24px;">
<div class="signature-column">
<p class="container-text-md no-margin">
<img src="https://truckwash.io/img/jm-signature.png" class="signature-image" alt="Signature Jimmy Mølgaard"/>
<a class="signature-name" href="tel:+4553855359">Jimmy Mølgaard<br/></a>
<a class="signature-role" href="tel:+4553855359">Kundechef<br/></a>
<a class="signature-link" href="tel:+4553855359">+45 53 85 53 59</a>
</p>
</div>
<div class="signature-column">
<p class="container-text-md no-margin">
<img src="https://truckwash.io/img/my-signature.png" class="signature-image" alt="Signature Mads Yde Jensen"/>
<a class="signature-name" href="tel:+4542460282">Mads Yde Jensen<br/></a>
<a class="signature-role" href="tel:+4542460282">Direktør<br/></a>
<a class="signature-link" href="tel:+4542460282">+45 42 46 02 82</a>
</p>
</div>
</div>
<table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0" style="margin-top:24px;">
<tr>
<td valign="top" width="50%" style="padding-right:8px;">
<p class="container-text-md no-margin" style="color:#000000;font-size:16px;line-height:1.5;margin:0;mso-line-height-rule:exactly;">
<img src="https://truckwash.io/img/jm-signature.png" alt="Signature Jimmy Mølgaard" width="100" style="width:100px;height:auto;display:block;margin:0 0 8px 0;"/>
<a class="signature-name" href="tel:+4553855359" style="color:#001244;text-decoration:none;font-weight:bold;">Jimmy Mølgaard<br/></a>
<a class="signature-role" href="tel:+4553855359" style="color:#001244;text-decoration:none;font-style:italic;">Kundechef<br/></a>
<a class="signature-link" href="tel:+4553855359" style="color:#001244;text-decoration:none;">+45 53 85 53 59</a>
</p>
</td>
<td valign="top" width="50%" style="padding-left:8px;">
<p class="container-text-md no-margin" style="color:#000000;font-size:16px;line-height:1.5;margin:0;mso-line-height-rule:exactly;">
<img src="https://truckwash.io/img/my-signature.png" alt="Signature Mads Yde Jensen" width="100" style="width:100px;height:auto;display:block;margin:0 0 8px 0;"/>
<a class="signature-name" href="tel:+4542460282" style="color:#001244;text-decoration:none;font-weight:bold;">Mads Yde Jensen<br/></a>
<a class="signature-role" href="tel:+4542460282" style="color:#001244;text-decoration:none;font-style:italic;">Direktør<br/></a>
<a class="signature-link" href="tel:+4542460282" style="color:#001244;text-decoration:none;">+45 42 46 02 82</a>
</p>
</td>
</tr>
</table>
</div>
</div>
</div>