worklenz-backend/worklenz-email-templates/client-invitation.html
Rama main · réplica de lectura del repositorio original.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Welcome to Your Client Portal - Worklenz</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta content="width=device-width,initial-scale=1" name="viewport">
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
background: linear-gradient(135deg, #f5f8ff 0%, #eaf0fb 100%);
-webkit-text-size-adjust: none;
text-size-adjust: none;
font-family: 'Mada', Arial, sans-serif;
}
.main-container {
background: #fff;
border-radius: 18px;
box-shadow: 0 4px 24px rgba(73, 146, 240, 0.10);
margin: 40px auto 0 auto;
max-width: 500px;
padding: 0 0 20px 0;
}
.padding-30 {
padding: 0px 30px;
}
.padding-20 {
padding: 0px 20px;
}
.desktop_hide,
.desktop_hide table {
mso-hide: all;
display: none;
max-height: 0;
overflow: hidden;
}
.modern-btn {
text-decoration: none;
display: inline-block;
color: #334155 !important;
background-color: transparent;
border-radius: 6px;
font-weight: 600;
padding: 14px 40px;
font-size: 18px;
line-height: 120%;
border: 2px solid #334155;
transition: background 0.2s, border-color 0.2s;
mso-padding-alt: 14px 40px;
}
.modern-btn:hover {
background-color: #f8fafc;
border-color: #1e293b;
}
.info-box {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 8px;
padding: 20px;
margin: 20px 0;
}
.info-box .label {
color: #64748b;
font-size: 14px;
font-weight: 500;
margin-bottom: 4px;
}
.info-box .value {
color: #1e293b;
font-size: 16px;
font-weight: 600;
}
.footer {
text-align: center;
color: #b0b8c9;
font-size: 13px;
margin-top: 30px;
padding-bottom: 18px;
}
@media (max-width: 525px) {
.main-container {
margin: 0;
border-radius: 0;
box-shadow: none;
max-width: 100% !important;
}
.desktop_hide table.icons-inner {
display: inline-block !important;
}
.icons-inner {
text-align: center;
}
.icons-inner td {
margin: 0 auto;
}
.row-content {
width: 95% !important;
}
.mobile_hide {
display: none;
}
.stack .column {
width: 100%;
display: block;
}
.mobile_hide {
min-height: 0;
max-height: 0;
max-width: 0;
overflow: hidden;
font-size: 0;
}
.desktop_hide,
.desktop_hide table {
display: table !important;
max-height: none !important;
}
}
</style>
<link href="https://fonts.googleapis.com/css2?family=Mada:wght@500;700&display=swap" rel="stylesheet">
</head>
<body>
<div class="main-container">
<table border="0" cellpadding="0" cellspacing="0" class="nl-container" role="presentation" style="background:transparent;" width="100%">
<tbody>
<tr>
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="row row-1" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0" width="100%">
<tbody>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" class="image_block block-1 padding-20" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;margin-left: auto;margin-right: auto;padding-top: 20px; padding-bottom: 20px;" width="220">
<tr>
<td class="pad" style="width:100%;padding-right:0;padding-left:0">
<div align="left" class="alignment" style="line-height:10px">
<a href="https://www.worklenz.com" style="outline:none;width: 170px;" tabindex="-1" target="_blank"><img src="https://s3.us-west-2.amazonaws.com/worklenz.com/email-templates-assets/worklenz-light-mode.png" style="display:block;height:auto;border:0;max-width:100%;margin-top: 10px;margin-bottom: 5px;"></a>
</div>
</td>
</tr>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="row-content stack" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;color:#000;width:475px;" width="475">
<tbody>
<tr>
<td class="column column-1" style="mso-table-lspace:0;mso-table-rspace:0;font-weight:400;text-align:left;vertical-align:top;padding-top:5px;padding-bottom:5px;border-top:0;border-right:0;border-bottom:0;border-left:0" width="100%">
<table border="0" cellpadding="0" cellspacing="0" class="image_block block-3" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0" width="100%">
<tr>
<td class="pad">
<h1 style="margin:0;color:rgb(66, 66, 66);font-size:28px;line-height:120%;text-align:center;direction:ltr;font-weight:700;letter-spacing:0.5px;margin-top:30px;margin-bottom:0;padding-top: 20px;padding-bottom: 20px;font-family: 'Mada', Arial, sans-serif;">
<span class="tinyMce-placeholder">Welcome to Your Client Portal</span>
</h1>
</td>
</tr>
<!-- <tr>
<td class="pad" style="width:100%;padding-right:0;padding-left:0">
<div align="center" class="alignment" style="line-height:10px"><img src="https://worklenz.s3.amazonaws.com/email-templates-assets/email-welcome.png" style="display:block;height:auto;border:0;width:180px;max-width:100%;margin-top: 30px;margin-bottom: 10px;" width="180">
</div>
</td>
</tr> -->
</table>
<table border="0" cellpadding="5" cellspacing="0" class="paragraph_block block-4 padding-30" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;word-break:break-word" width="100%">
<tr>
<td class="pad">
<div style="color:#505771;font-size:20px;font-family: 'Mada', Arial, sans-serif;font-weight:500;line-height:130%;text-align:center;direction:ltr;letter-spacing:0.1px;mso-line-height-alt:24px">
<p style="margin-top: 0px;margin-bottom: 2px;">Hi [VAR_CLIENT_NAME],</p>
</div>
</td>
</tr>
</table>
<table border="0" cellpadding="8" cellspacing="0" class="paragraph_block block-5 padding-30" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;word-break:break-word" width="100%">
<tr>
<td class="pad">
<div style="color:rgb(143,152,164);font-size:16px;font-family: 'Mada', Arial, sans-serif;font-weight:400;line-height:145%;text-align:center;direction:ltr;letter-spacing:0.1px;mso-line-height-alt:18px">
<p style="margin:0;margin-bottom:10px">Your client portal has been created successfully! [VAR_TEAM_NAME] has set up your dedicated workspace where you can track projects, view progress, and collaborate with the team.</p>
<p style="margin:0;margin-bottom:10px">Access your personalized client portal to stay updated on your projects.</p>
<p style="margin:0;margin-bottom:10px">There is no password to create. When you open the link below we email you a 6-digit code to confirm it is you. Next time, sign in with this email address and a new code.</p>
</div>
</td>
</tr>
</table>
<div class="info-box padding-30">
<div class="label">Client Portal Details:</div>
<div class="value">Company: [VAR_COMPANY_NAME]</div>
<div class="value">Email: [VAR_CLIENT_EMAIL]</div>
<div class="value">Contact: [VAR_CLIENT_PHONE]</div>
</div>
<table border="0" cellpadding="10" cellspacing="0" class="button_block block-6" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;margin-top: 20px;margin-bottom: 30px;" width="100%">
<tr>
<td class="pad" align="center" style="text-align:center;">
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="[VAR_PORTAL_LINK]" style="height:50px;v-text-anchor:middle;width:240px;" arcsize="12%" strokecolor="#1890ff" strokeweight="2px" fillcolor="#1890ff">
<w:anchorlock/>
<center style="color:#ffffff;font-family:'Mada',Arial,sans-serif;font-size:18px;font-weight:600;">Access Your Portal</center>
</v:roundrect>
<![endif]-->
<!--[if !mso]><!-- -->
<table align="center" role="presentation" cellpadding="0" cellspacing="0" border="0" style="border-collapse:separate;margin:0 auto;">
<tr>
<td align="center" valign="middle" bgcolor="#1890ff" style="border-radius:6px;background-color:#1890ff !important;mso-padding-alt:14px 40px;">
<a href="[VAR_PORTAL_LINK]" style="display:inline-block;color:#ffffff !important;font-size:18px;font-weight:600;text-decoration:none;border-radius:6px;line-height:48px;padding:14px 40px;border:2px solid #1890ff;background-color:#1890ff !important;font-family:'Mada', Arial, sans-serif;mso-hide:none;">
Access Your Portal
</a>
</td>
</tr>
</table>
<!--<![endif]-->
</td>
</tr>
</table>
<table border="0" cellpadding="8" cellspacing="0" class="paragraph_block block-7 padding-30" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;word-break:break-word" width="100%">
<tr>
<td class="pad">
<div style="color:rgb(143,152,164);font-size:14px;font-family: 'Mada', Arial, sans-serif;font-weight:400;line-height:140%;text-align:center;direction:ltr;letter-spacing:0.1px;mso-line-height-alt:16px">
<p style="margin:0;margin-bottom:8px">Through your client portal, you can:</p>
<ul style="text-align:left;margin:10px 0;padding-left:20px;">
<li>View project progress and timelines</li>
<li>Track task completion and milestones</li>
<li>Communicate with your project team</li>
<li>Access project documents and files</li>
<li>Review reports and analytics</li>
</ul>
</div>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<div class="footer">
If you have any questions, contact us at <a href="mailto:[email protected]" style="color:#4992f0;text-decoration:none;">[email protected]</a>.<br>
© 2026 Worklenz. All rights reserved.
</div>
</div>
</body>
</html>