PlanTempusApp/PlanTempus.Application/wwwroot/email-templates/verify-email.html
Janus C. H. Knudsen 7fc1ae0650 WIP
2026-01-10 20:39:17 +01:00

308 lines
9.2 KiB
HTML

<!DOCTYPE html>
<html lang="da">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Bekræft din email - Plan Tempus</title>
<!--[if mso]>
<noscript>
<xml>
<o:OfficeDocumentSettings>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
</noscript>
<![endif]-->
<style>
/* Reset & Base */
body {
margin: 0;
padding: 0;
background-color: #f5f5f5;
font-family: Arial, Helvetica, sans-serif;
}
/* Wrapper */
.email-wrapper {
background-color: #f5f5f5;
}
.email-wrapper-cell {
padding: 40px 20px;
}
/* Container */
.email-container {
max-width: 600px;
background-color: #ffffff;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
/* Logo */
.logo-cell {
padding: 40px 40px 30px 40px;
}
.logo {
display: block;
max-width: 180px;
height: auto;
}
/* Header */
.header-cell {
padding: 0 40px 20px 40px;
}
.header-title {
margin: 0;
font-size: 28px;
font-weight: 600;
color: #1e2a4a;
line-height: 1.3;
}
/* Divider */
.divider-cell {
padding: 0 40px 30px 40px;
}
.divider-accent {
height: 3px;
background: linear-gradient(90deg, #e8734a 0%, #f5a882 100%);
border-radius: 2px;
}
.divider-line {
height: 1px;
background-color: #e0e0e0;
}
.divider-line-cell {
padding: 0 40px;
}
/* Content */
.content-cell {
padding: 0 40px 30px 40px;
}
.text-body {
margin: 0 0 16px 0;
font-size: 16px;
line-height: 1.6;
color: #4a4a4a;
}
.text-body:last-child {
margin-bottom: 0;
}
.text-strong {
color: #1e2a4a;
}
/* CTA Button */
.cta-cell {
padding: 0 40px 30px 40px;
}
.cta-button-cell {
background-color: #e8734a;
border-radius: 6px;
}
.cta-button {
display: inline-block;
padding: 16px 40px;
font-size: 16px;
font-weight: 600;
color: #ffffff;
text-decoration: none;
border-radius: 6px;
}
/* Fallback */
.fallback-cell {
padding: 0 40px 40px 40px;
}
.text-small {
margin: 0 0 10px 0;
font-size: 14px;
line-height: 1.5;
color: #888888;
}
.text-small:last-child {
margin-bottom: 0;
}
.link-accent {
color: #e8734a;
text-decoration: underline;
word-break: break-all;
}
/* Footer */
.footer-cell {
padding: 30px 40px 40px 40px;
}
.text-footer {
margin: 0 0 8px 0;
font-size: 13px;
line-height: 1.5;
color: #888888;
}
.text-footer:last-child {
margin-bottom: 0;
}
.link-dark {
color: #1e2a4a;
text-decoration: underline;
}
/* Outside footer */
.footer-outside {
max-width: 600px;
}
.footer-outside-cell {
padding: 30px 40px;
}
.text-copyright {
margin: 0 0 8px 0;
font-size: 12px;
color: #888888;
}
.text-copyright:last-child {
margin-bottom: 0;
}
</style>
</head>
<body>
<!-- Wrapper table -->
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" class="email-wrapper">
<tr>
<td align="center" class="email-wrapper-cell">
<!-- Email container -->
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="600" class="email-container">
<!-- Logo section -->
<tr>
<td align="center" class="logo-cell">
<img src="/images/poclogo.png" alt="Plan Tempus" width="180" class="logo">
</td>
</tr>
<!-- Header -->
<tr>
<td align="center" class="header-cell">
<h1 class="header-title">Bekræft din email</h1>
</td>
</tr>
<!-- Divider -->
<tr>
<td align="center" class="divider-cell">
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="80">
<tr>
<td class="divider-accent"></td>
</tr>
</table>
</td>
</tr>
<!-- Welcome text -->
<tr>
<td class="content-cell">
<p class="text-body">
Hej <strong class="text-strong">{{USER_NAME}}</strong>,
</p>
<p class="text-body">
Tak fordi du har oprettet en konto hos Plan Tempus. For at komme i gang skal du bekræfte din email-adresse ved at klikke på knappen nedenfor.
</p>
<p class="text-body">
Linket er gyldigt i 24 timer.
</p>
</td>
</tr>
<!-- CTA Button -->
<tr>
<td align="center" class="cta-cell">
<table role="presentation" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="center" class="cta-button-cell">
<a href="{{VERIFY_URL}}" target="_blank" class="cta-button">
Bekræft email
</a>
</td>
</tr>
</table>
</td>
</tr>
<!-- Fallback link -->
<tr>
<td class="fallback-cell">
<p class="text-small">
Hvis knappen ikke virker, kan du kopiere og indsætte dette link i din browser:
</p>
<p class="text-small">
<a href="{{VERIFY_URL}}" class="link-accent">{{VERIFY_URL}}</a>
</p>
</td>
</tr>
<!-- Divider line -->
<tr>
<td class="divider-line-cell">
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td class="divider-line"></td>
</tr>
</table>
</td>
</tr>
<!-- Footer -->
<tr>
<td class="footer-cell">
<p class="text-footer">
Hvis du ikke har oprettet en konto hos Plan Tempus, kan du ignorere denne email.
</p>
<p class="text-footer">
Har du spørgsmål? Kontakt os på <a href="mailto:support@plantempus.dk" class="link-dark">support@plantempus.dk</a>
</p>
</td>
</tr>
</table>
<!-- Footer outside card -->
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="600" class="footer-outside">
<tr>
<td align="center" class="footer-outside-cell">
<p class="text-copyright">
&copy; 2026 Plan Tempus. Alle rettigheder forbeholdes.
</p>
<p class="text-copyright">
Plan Tempus ApS &bull; CVR: 12345678 &bull; Danmark
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>