150 lines
7.4 KiB
HTML
150 lines
7.4 KiB
HTML
|
|
<!DOCTYPE html>
|
|
<html lang="es">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
|
<title>Renovación de servicios — USITE</title>
|
|
</head>
|
|
<body style="margin:0; padding:0; background:#060a0f;">
|
|
<!-- Email wrapper — compatible con clientes de correo -->
|
|
<div style="margin:0; padding:32px 16px; background:#060a0f; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;">
|
|
<table width="100%" cellpadding="0" cellspacing="0" role="presentation" style="max-width:580px; margin:0 auto;">
|
|
<tr><td>
|
|
|
|
<!-- Card principal -->
|
|
<table width="100%" cellpadding="0" cellspacing="0" role="presentation"
|
|
style="background:#0a0f16; border-radius:20px; overflow:hidden; border:1px solid #1a2840; box-shadow:0 24px 64px rgba(0,0,0,0.6);">
|
|
|
|
<!-- Accent bar superior -->
|
|
<tr>
|
|
<td style="height:3px; background:linear-gradient(90deg,#16a34a 0%,#22c55e 50%,#4ade80 100%); font-size:0; line-height:0;"> </td>
|
|
</tr>
|
|
|
|
<!-- Header -->
|
|
<tr>
|
|
<td style="padding:36px 40px 32px; background:#0a0f16; border-bottom:1px solid #141f2e;">
|
|
|
|
<!-- Logo + badge row -->
|
|
<table width="100%" cellpadding="0" cellspacing="0" role="presentation">
|
|
<tr>
|
|
<td>
|
|
<img src="https://u-site.app/img/USITE_PNG_8.webp" alt="USITE" height="28"
|
|
style="display:block; height:28px; width:auto;" />
|
|
</td>
|
|
<td align="right">
|
|
<span style="display:inline-block; background:#0d2218; border:1px solid #166534; border-radius:100px; padding:4px 12px; font-size:10px; letter-spacing:0.1em; color:#4ade80; text-transform:uppercase; font-weight:600;">● Renovación</span>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<!-- Título -->
|
|
<h1 style="margin:28px 0 8px; font-size:24px; font-weight:600; color:#f1f5f9; letter-spacing:-0.03em; line-height:1.3;">
|
|
Renueva antes de que venza
|
|
</h1>
|
|
<p style="margin:0; font-size:13.5px; color:#7a93a8; line-height:1.65;">
|
|
Uno o más servicios están próximos a expirar. Actúa antes de la fecha límite para evitar interrupciones.
|
|
</p>
|
|
|
|
</td>
|
|
</tr>
|
|
|
|
<!-- Body -->
|
|
<tr>
|
|
<td style="padding:32px 40px;">
|
|
|
|
<!-- Saludo -->
|
|
<p style="margin:0 0 28px; font-size:14px; color:#8faabb; line-height:1.75;">
|
|
Hola <span style="color:#e2e8f0; font-weight:500;">{{.ClienteNombre}}</span> — para garantizar la continuidad digital de <span style="color:#e2e8f0; font-weight:500;">{{.ClienteEmpresa}}</span>, te recomendamos renovar antes de la fecha indicada.
|
|
</p>
|
|
|
|
<!-- Info strip — 3 métricas -->
|
|
<table width="100%" cellpadding="0" cellspacing="0" role="presentation"
|
|
style="border-radius:12px; overflow:hidden; border:1px solid #141f2e; margin-bottom:28px;">
|
|
<tr>
|
|
<td width="33%" style="background:#0d1420; padding:18px 16px; border-right:1px solid #141f2e; vertical-align:top;">
|
|
<p style="margin:0 0 5px; font-size:9.5px; letter-spacing:0.1em; text-transform:uppercase; color:#334155;">Vence</p>
|
|
<p style="margin:0; font-size:13px; font-weight:600; color:#e2e8f0;">{{.FechaVencimiento}}</p>
|
|
</td>
|
|
<td width="33%" style="background:#0d1420; padding:18px 16px; border-right:1px solid #141f2e; vertical-align:top;">
|
|
<p style="margin:0 0 5px; font-size:9.5px; letter-spacing:0.1em; text-transform:uppercase; color:#334155;">Días restantes</p>
|
|
<p style="margin:0; font-size:13px; font-weight:600; color:#fbbf24;">{{.DiasRestantes}} días</p>
|
|
</td>
|
|
<td width="34%" style="background:#0d1420; padding:18px 16px; vertical-align:top;">
|
|
<p style="margin:0 0 5px; font-size:9.5px; letter-spacing:0.1em; text-transform:uppercase; color:#334155;">Total a pagar</p>
|
|
<p style="margin:0; font-size:16px; font-weight:700; color:#4ade80;">${{.Total}}</p>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<!-- Label servicios -->
|
|
<p style="margin:0 0 10px; font-size:10px; letter-spacing:0.12em; text-transform:uppercase; color:#2d3f52; font-weight:600;">Servicios incluidos</p>
|
|
|
|
<!-- Lista de servicios -->
|
|
<table width="100%" cellpadding="0" cellspacing="0" role="presentation"
|
|
style="border:1px solid #141f2e; border-radius:12px; overflow:hidden; margin-bottom:32px;">
|
|
{{range .Servicios}}
|
|
<tr>
|
|
<td style="padding:13px 18px; border-bottom:1px solid #0f1a27; font-size:13px; color:#94a3b8;">
|
|
<span style="display:inline-block; width:6px; height:6px; border-radius:50%; background:#1e3a2f; border:1px solid #166534; margin-right:10px; vertical-align:middle;"></span>
|
|
{{.Nombre}}
|
|
</td>
|
|
<td style="padding:13px 18px; border-bottom:1px solid #0f1a27; font-size:13px; color:#4ade80; text-align:right; white-space:nowrap; font-weight:500;">{{.Moneda}} {{.Precio}}</td>
|
|
</tr>
|
|
{{end}}
|
|
</table>
|
|
|
|
<!-- CTA Button -->
|
|
<table width="100%" cellpadding="0" cellspacing="0" role="presentation">
|
|
<tr>
|
|
<td align="center">
|
|
<a href="#"
|
|
style="display:inline-block; background:#22c55e; color:#052e16; padding:15px 40px; border-radius:12px; font-size:14px; font-weight:700; text-decoration:none; letter-spacing:0.02em;">
|
|
Renovar servicios →
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
|
|
</td>
|
|
</tr>
|
|
|
|
<!-- Footer note -->
|
|
<tr>
|
|
<td style="padding:20px 40px; border-top:1px solid #0f1a27;">
|
|
<p style="margin:0; font-size:12px; color:#5a7a90; line-height:1.7;">
|
|
Si ya realizaste el pago, ignora este mensaje. ¿Necesitas ayuda? Escríbenos directamente a través de <a href="https://vcard.u-site.app/usite" style="color:#22c55e; text-decoration:none;">nuestro canal de soporte</a>.
|
|
</p>
|
|
</td>
|
|
</tr>
|
|
|
|
<!-- Footer brand -->
|
|
<tr>
|
|
<td style="padding:18px 40px; background:#060a0f; border-top:1px solid #0f1a27;">
|
|
<table width="100%" cellpadding="0" cellspacing="0" role="presentation">
|
|
<tr>
|
|
<td>
|
|
<p style="margin:0; font-size:11px; color:#1e2d3d; letter-spacing:0.04em;">
|
|
© USITE — Soluciones de Software a Medida
|
|
</p>
|
|
<p style="margin:4px 0 0; font-size:10px; color:#162030;">Mensaje automático · <a href="https://u-site.app" style="color:#1e3a2f; text-decoration:none;">u-site.app</a></p>
|
|
</td>
|
|
<td align="right">
|
|
<img src="https://u-site.app/img/USITE_PNG_8.webp" alt="USITE" height="18"
|
|
style="display:block; height:18px; width:auto; opacity:0.25;" />
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
|
|
</table>
|
|
<!-- /Card principal -->
|
|
|
|
</td></tr>
|
|
</table>
|
|
</div>
|
|
</body>
|
|
</html>
|