Add new HTML email template and assets for welcoming new Truckwash customers

This commit is contained in:
Jeppe Bundgaard
2026-02-17 11:37:49 +01:00
parent fc054d6226
commit 0a582951a0
5 changed files with 209 additions and 0 deletions
Binary file not shown.

After

Width:  |  Height:  |  Size: 9.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 204 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 224 KiB

@@ -0,0 +1,209 @@
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="container">
<div class="container-blue">
<div class="container-inner">
<!-- Banner -->
<img src="../assets/truckwash.png" alt="TruckWash Banner" style="width: 100%; height: auto; margin-bottom: 24px;">
<!-- Divider -->
<div class="container-divider" style="width: 100%; background-color: #FFFFFF; margin-bottom: 24px;"></div>
<!-- Content -->
<p class="container-text-lg">
<strong>Velkommen!</strong>
</p>
<!-- Thanks for registering -->
<p class="container-text-md">
Tak for din registrering af virksomhed (CVR) som kunde hos Truck Wash.
</p>
<!-- Divider -->
<div class="container-divider" style="width: 100%; background-color: #FFFFFF; margin-bottom: 48px;"></div>
<!-- You can now wash your trucks -->
<p class="container-text-md">
Du kan nu vaske i alle vores afdelinger, find din nærmeste på truckwash.dk
</p>
<!-- Divider -->
<div class="container-divider" style="width: 100%; background-color: #FFFFFF; margin-bottom: 48px;"></div>
<!-- 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>
<!-- Divider -->
<div class="container-divider" style="width: 100%; background-color: #FFFFFF; margin-bottom: 48px;"></div>
<!-- Customer credentials -->
<p class="container-text-md no-margin">
Dit login til kundeportalen er:<br/>
<strong>Brugernavn:</strong> 12345678<br/>
<strong>Kode:</strong> Ikke opsat<br/>
</p>
<!-- Button to create password (centered)-->
<div style="margin-top: 24px; margin-bottom: 48px; display: flex; justify-content: center;">
<a href="about:blank" class="container-button container-button-shadow">Færdiggør kontoopsætning</a>
</div>
<!-- Divider -->
<div class="container-divider" style="width: 100%; background-color: #FFFFFF; margin-bottom: 48px;"></div>
<!-- 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">
Med venlig hilsen,
</p>
<!-- Divider -->
<div class="container-divider" style="width: 100%; background-color: #FFFFFF; margin-bottom: 48px;"></div>
<!-- Signatures -->
<div class="signature-columns">
<div class="signature-column">
<p class="container-text-md no-margin">
<img src="../assets/jm-signature.png" class="signature-image" alt="Signature"/>
<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="../assets/my-signature.png" class="signature-image" alt="Signature"/>
<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>
<!-- Footer -->
<div class="container-footer">
<p class="container-text-md no-margin" style="text-align: center; color: #FFFFFF;">
Truckwash ApS Letland Alle 2, 2630 Høje Taastrup
</p>
<a href="https://www.truckwash.dk" style="color: #FFFFFF">
<p class="container-text-sm no-margin" style="text-align: center; color: #FFFFFF;">
www.truckwash.dk
</p>
</a>
</div>
</div>
</div>
</body>
<style>
.container {
width: --container-width;
background-color: #FFFFFF;
height: 1454px;
margin-bottom: 36px;
margin-top: 54px;
margin-left: 49px;
margin-right: 49px;
}
.container-blue {
background-color: #001244;
padding-left: 65px;
padding-right: 65px;
padding-top: 64px;
padding-bottom: 156px;
height: -webkit-fill-available;
border-radius: 0px;
}
.container-inner {
width: --container-width;
height: -webkit-fill-available;
background-color: #ffffff;
padding-left: 64px;
padding-right: 64px;
padding-top: 2rem;
margin: 0 auto 5rem;
border-radius: 0px;
}
.container-text-lg {
color: black;
font-size: 24px;
font-family: Arial, sans-serif;
line-height: 1.5;
margin-bottom: 24px;
}
.container-text-md {
color: black;
font-size: 24px;
font-family: Arial, sans-serif;
line-height: 1.1;
margin-bottom: 18px;
}
.container-text-sm {
color: black;
font-size: 14px;
font-family: Arial, sans-serif;
line-height: 1.5;
margin-bottom: 14px;
}
.no-margin {
margin-bottom: 0;
}
.container-button {
background-color: #477fae;
color: white;
padding: 16px 24px;
text-decoration: none;
border-radius: 15px;
font-size: 24px;
font-family: Arial, sans-serif;
}
.container-button-shadow {
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}
.signature-columns {
display: flex;
justify-content: space-between;
margin-top: 24px;
}
.signature-column {
width: 45%;
}
.signature-link {
color: #001244;
text-decoration: none;
}
.signature-name {
color: #001244;
font-weight: bold;
text-decoration: none;
}
.signature-role {
color: #001244;
font-style: italic;
text-decoration: none;
}
.signature-image {
position: absolute;
width: 100px;
height: auto;
margin-top: -50px;
}
</style>
</html>