Refine new customer welcome email template with enhanced styles and improved HTML structure
This commit is contained in:
Jeppe Bundgaard
@@ -20,22 +20,82 @@ class email_template_head
|
||||
?>
|
||||
<!-- Styles -->
|
||||
<style>
|
||||
/* Base container used by all custom email templates */
|
||||
.email-template {
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
background-color: #f9f9f9;
|
||||
font-family: Arial, sans-serif;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.email-template h1 {
|
||||
color: #333;
|
||||
/* New-customer specific layout (names reused from provided HTML) */
|
||||
.container-blue {
|
||||
background-color: #001244; /* brand blue */
|
||||
padding: 48px 24px; /* responsive friendly */
|
||||
}
|
||||
|
||||
.email-template p {
|
||||
color: #333;
|
||||
.container-inner {
|
||||
background-color: #ffffff;
|
||||
border-radius: 0;
|
||||
padding: 32px 24px;
|
||||
}
|
||||
|
||||
.container-text-lg {
|
||||
color: #000000;
|
||||
font-size: 24px;
|
||||
line-height: 1.5;
|
||||
margin: 0 0 24px 0;
|
||||
}
|
||||
|
||||
.container-text-md {
|
||||
color: #000000;
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
margin: 0 0 18px 0;
|
||||
}
|
||||
|
||||
.container-text-sm {
|
||||
color: #000000;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
margin: 0 0 14px 0;
|
||||
}
|
||||
|
||||
.no-margin { margin: 0; }
|
||||
|
||||
.container-button {
|
||||
background-color: #477fae;
|
||||
color: #ffffff !important;
|
||||
padding: 16px 24px;
|
||||
text-decoration: none;
|
||||
border-radius: 15px;
|
||||
font-size: 18px; /* slightly smaller for mobile/email clients */
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.container-button-shadow {
|
||||
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
/* Signature columns */
|
||||
.signature-columns {
|
||||
width: 100%;
|
||||
display: table; /* email-safe two columns */
|
||||
table-layout: fixed;
|
||||
}
|
||||
.signature-column {
|
||||
display: table-cell;
|
||||
vertical-align: top;
|
||||
width: 50%;
|
||||
padding-right: 8px;
|
||||
}
|
||||
.signature-image {
|
||||
width: 100px; height: auto; display: block; margin: 0 0 8px 0;
|
||||
}
|
||||
.signature-link, .signature-name, .signature-role { color: #001244; text-decoration: none; }
|
||||
.signature-name { font-weight: bold; }
|
||||
.signature-role { font-style: italic; }
|
||||
</style>
|
||||
|
||||
<?php
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
namespace email\templates;
|
||||
|
||||
use email\helpers\email_template;
|
||||
use email\helpers\email_template;use objects\users_o;
|
||||
|
||||
class email_template_new_customer
|
||||
{
|
||||
@@ -54,63 +54,83 @@ class email_template_new_customer
|
||||
# Start of the html
|
||||
?>
|
||||
|
||||
<!-- New customer welcome template -->
|
||||
<!-- New customer welcome template (styled per provided HTML) -->
|
||||
<div class="email-template">
|
||||
<!-- Title / Welcome -->
|
||||
<p style="color: #000; font-size: 24px; line-height: 1.5; margin: 0 0 24px 0;"><strong>Velkommen!</strong></p>
|
||||
<!-- Blue outer container -->
|
||||
<div class="container-blue">
|
||||
<!-- White inner card -->
|
||||
<div class="container-inner">
|
||||
<!-- Title / Welcome -->
|
||||
<p class="container-text-lg"><strong>Velkommen!</strong></p>
|
||||
|
||||
<!-- Intro -->
|
||||
<p style="color: #000; font-size: 16px; line-height: 1.5; margin: 0 0 18px 0;">
|
||||
Tak for din registrering af virksomhed (CVR) som kunde hos Truck Wash.
|
||||
</p>
|
||||
<!-- Intro -->
|
||||
<p class="container-text-md">
|
||||
Tak for din registrering af virksomhed (CVR) som kunde hos Truck Wash.
|
||||
</p>
|
||||
|
||||
<!-- Info -->
|
||||
<p style="color: #000; font-size: 16px; line-height: 1.5; margin: 0 0 18px 0;">
|
||||
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>
|
||||
<!-- You can now wash your trucks -->
|
||||
<p class="container-text-md">
|
||||
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>
|
||||
|
||||
<!-- Benefits header -->
|
||||
<p style="color: #000; font-size: 16px; line-height: 1.5; margin: 0;">
|
||||
Som ny kunde af Truck Wash får du adgang til en række unikke fordele:
|
||||
</p>
|
||||
<!-- As a new customer of Truck Wash, features -->
|
||||
<p class="container-text-md no-margin">
|
||||
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;">
|
||||
<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>
|
||||
<li>Et standardiseret vaskecertifikat for gennemførte vaske</li>
|
||||
<li>En bookingportal, hvor du nemt kan booke vaske på tværs af landet</li>
|
||||
<li>En mulighed for at vaske 24/7, idet vi har døgnåbent på de fleste lokationer</li>
|
||||
</ul>
|
||||
|
||||
<!-- Benefits list -->
|
||||
<ul style="color: #000; font-size: 16px; line-height: 1.5; margin: 8px 0 24px 20px; padding: 0;">
|
||||
<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>
|
||||
<li>Et standardiseret vaskecertifikat for gennemførte vaske</li>
|
||||
<li>En bookingportal, hvor du nemt kan booke vaske på tværs af landet</li>
|
||||
<li>En mulighed for at vaske 24/7, idet vi har døgnåbent på de fleste lokationer</li>
|
||||
</ul>
|
||||
<!-- Customer credentials -->
|
||||
<p class="container-text-md no-margin">
|
||||
Dit login til kundeportalen er:<br/>
|
||||
<strong>Brugernavn:</strong> <?= $this->customer_number ?><br/>
|
||||
<strong>Kode:</strong> Ikke opsat
|
||||
</p>
|
||||
|
||||
<!-- Credentials -->
|
||||
<p style="color: #000; font-size: 16px; line-height: 1.5; margin: 0;">
|
||||
Dit login til kundeportalen er:<br>
|
||||
<strong>Brugernavn:</strong> <?= $this->customer_number ?><br>
|
||||
<strong>Kode:</strong> Ikke opsat
|
||||
</p>
|
||||
<!-- Button to create password (centered)-->
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<!-- CTA Button -->
|
||||
<div style="margin: 24px 0 32px 0; text-align: center;">
|
||||
<a href="<?= htmlspecialchars($this->password_reset_link) ?>"
|
||||
style="background-color:#477fae; color:#fff; padding:12px 18px; text-decoration:none; border-radius:12px; font-size:16px; display:inline-block;">
|
||||
Færdiggør kontoopsætning
|
||||
</a>
|
||||
<!-- Closing -->
|
||||
<p class="container-text-md no-margin">
|
||||
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;">
|
||||
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://www.truckwash.dk/wp-content/uploads/email/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://www.truckwash.dk/wp-content/uploads/email/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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Closing -->
|
||||
<p style="color: #000; font-size: 16px; line-height: 1.5; margin: 0;">
|
||||
Vi ser frem til at modtage dine køretøjer ude i vaskebanerne.<br>
|
||||
Har du spørgsmål, så kontakt os endelig.
|
||||
</p>
|
||||
|
||||
<!-- Regards -->
|
||||
<p style="color: #000; font-size: 16px; line-height: 1.5; margin: 16px 0 0 0;">
|
||||
Med venlig hilsen,<br>
|
||||
Truck Wash
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<?php
|
||||
|
||||
Reference in New Issue
Block a user