panels-origin/docs/mockups/panels-access-email.html

<!doctype html>
<html lang="es" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="x-apple-disable-message-reformatting">
<title>Acceso a PANELS — {{company_name}}</title>
<style>
html,body{margin:0!important;padding:0!important;width:100%!important;background:#f7f9fc}
table,td{border-collapse:collapse!important;mso-table-lspace:0!important;mso-table-rspace:0!important}
.preheader{display:none!important;max-height:0!important;overflow:hidden!important;opacity:0!important;mso-hide:all!important}
@media(max-width:680px){.shell{width:100%!important}.pad{padding-left:24px!important;padding-right:24px!important}.title{font-size:30px!important;line-height:36px!important}.label,.value{display:block!important;width:100%!important;box-sizing:border-box!important;text-align:left!important}.label{padding-bottom:4px!important}.value{padding-top:0!important}.petals{display:none!important}}
</style>
</head>
<body style="margin:0;padding:0;width:100%;min-width:100%;background:#f7f9fc">
<div class="preheader">Tu acceso de administrador a PANELS está listo.</div>
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="background:#f7f9fc">
<tr><td align="center" style="padding:40px 16px">
<!--[if mso]><table role="presentation" width="620"><tr><td><![endif]-->
<table class="shell" role="presentation" width="620" cellpadding="0" cellspacing="0" border="0" style="width:100%;max-width:620px;background:#fff;border:1px solid #e4e9f2;border-radius:16px;overflow:hidden">
<tr><td class="pad" style="padding:30px 40px;border-bottom:1px solid #e4e9f2">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr>
<td valign="middle"><table role="presentation" cellpadding="0" cellspacing="0" border="0"><tr>
<td style="padding-right:14px"><table role="presentation" width="48" cellpadding="0" cellspacing="0" border="0" style="width:48px;height:48px;background:#2f6fed;border-radius:12px"><tr><td align="center" style="padding:7px"><table role="presentation" width="34" cellpadding="0" cellspacing="0" border="0">
<tr><td width="15" height="15" style="background:#fff;border-radius:5px 5px 12px 5px">&nbsp;</td><td width="4"></td><td width="15" height="15" style="background:#fff;border-radius:5px 5px 5px 12px">&nbsp;</td></tr>
<tr><td colspan="3" height="4"></td></tr>
<tr><td width="15" height="15" style="background:#fff;border-radius:5px 12px 5px 5px">&nbsp;</td><td width="4"></td><td width="15" height="15" style="background:#fff;border-radius:12px 5px 5px 5px">&nbsp;</td></tr>
</table></td></tr></table></td>
<td style="font:800 30px/34px Inter,Segoe UI,Arial,sans-serif;letter-spacing:2px;color:#0f2557">PANELS</td>
</tr></table></td>
<td class="petals" align="right" width="104"><table role="presentation" width="92" cellpadding="0" cellspacing="0" border="0">
<tr><td width="42" height="42" style="background:#eaf1ff;border-radius:12px 12px 32px 12px"></td><td width="8"></td><td width="42" height="42" style="background:#eaf1ff;border-radius:12px 12px 12px 32px"></td></tr>
<tr><td colspan="3" height="8"></td></tr>
<tr><td width="42" height="42" style="background:#eaf1ff;border-radius:12px 32px 12px 12px"></td><td width="8"></td><td width="42" height="42" style="background:#eaf1ff;border-radius:32px 12px 12px 12px"></td></tr>
</table></td>
</tr></table></td></tr>
<tr><td class="pad" style="padding:38px 40px 34px;font-family:Inter,Segoe UI,Arial,sans-serif;color:#26324a">
<p style="margin:0 0 12px;font-size:17px;line-height:26px;color:#4b5872">Hola, {{recipient_name}}</p>
<h1 class="title" style="margin:0 0 18px;font-size:36px;line-height:43px;font-weight:800;color:#0f2557">Tu acceso a PANELS está listo</h1>
<p style="margin:0 0 26px;font-size:16px;line-height:25px;color:#4b5872">La empresa <strong style="color:#0f2557">{{company_name}}</strong> ya tiene acceso a PANELS. Utiliza los siguientes datos para iniciar sesión:</p>
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="background:#eef4ff;border:1px solid #dce8ff;border-radius:12px;overflow:hidden">
<tr><td class="label" width="52%" style="padding:18px 20px;border-bottom:1px solid #d6e3f8;font-size:14px;font-weight:700;color:#4b5872">Usuario administrador</td><td class="value" width="48%" align="right" style="padding:18px 20px;border-bottom:1px solid #d6e3f8;font:700 16px/21px Consolas,monospace;color:#0f2557">{{admin_username}}</td></tr>
<tr><td class="label" width="52%" style="padding:18px 20px;font-size:14px;font-weight:700;color:#4b5872">Contraseña temporal</td><td class="value" width="48%" align="right" style="padding:18px 20px;font:700 16px/21px Consolas,monospace;color:#0f2557;word-break:break-all">{{temporary_password}}</td></tr>
</table>
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-top:24px"><tr><td align="center" bgcolor="#2F6FED" style="border-radius:8px"><a href="{{login_url}}" target="_blank" style="display:block;padding:15px 24px;border:1px solid #2f6fed;border-radius:8px;font-size:16px;line-height:22px;font-weight:700;color:#fff;text-decoration:none">Ingresar a PANELS</a></td></tr></table>
<p style="margin:12px 0 0;text-align:center;font-size:12px;line-height:18px;color:#71809e;word-break:break-all">Si el botón no funciona, abre este enlace:<br><a href="{{login_url}}" target="_blank" style="color:#2f6fed;text-decoration:underline">{{login_url}}</a></p>
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-top:24px"><tr><td width="34" valign="top" style="font:700 22px/24px Arial;color:#2f6fed">✓</td><td style="font-size:14px;line-height:22px;color:#4b5872">Por seguridad, al ingresar por primera vez deberás crear una nueva contraseña.</td></tr></table>
</td></tr>
<tr><td class="pad" bgcolor="#0F2557" style="padding:24px 40px;background:#0f2557;font-family:Inter,Segoe UI,Arial,sans-serif"><p style="margin:0 0 5px;font-size:15px;font-weight:700;color:#fff">— Equipo PANELS</p><p style="margin:0;font-size:13px;color:#cbd9f6">Todas tus operaciones. Un solo sistema.</p></td></tr>
<tr><td class="pad" align="center" style="padding:18px 40px;background:#f9fbff;font:11px/18px Inter,Segoe UI,Arial,sans-serif;color:#8390a8">Este correo fue enviado automáticamente. No respondas a este mensaje.</td></tr>
</table>
<!--[if mso]></td></tr></table><![endif]-->
</td></tr></table>
</body>
</html>