Splenda Life - Email de Código de Verificación (Template HTML)

verification-email-template.html

<!-- Preheader (hidden) -->
<div style="display:none; max-height:0; overflow:hidden; opacity:0; font-size:1px; line-height:1px;">
  Tu código de verificación para activar tu cuenta.
</div>

<table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0" style="background-color:#4b4b4b;">
  <tr>
    <td align="center" style="padding:24px 12px;">
      <table role="presentation" width="600" cellspacing="0" cellpadding="0" border="0" style="max-width:600px; width:100%; background-color:#ffffff; border-radius:12px;">
        
        <!-- Header with logo -->
        <tr>
          <td align="left" style="padding:18px 24px;">
            <img src="https://splenda-uploads.nyc3.digitaloceanspaces.com/splenda_logo_7e502cdb26.png" alt="Splenda" width="120" style="display:block; max-width:120px; height:auto;" />
          </td>
        </tr>
        
        <!-- Divider -->
        <tr>
          <td style="border-top:1px solid #e9e9e9;"></td>
        </tr>

        <!-- Main content -->
        <tr>
          <td style="padding:22px 24px 0 24px; font-family:Arial,Helvetica,sans-serif; color:#111111;">
            <h1 style="margin:0 0 10px; font-size:20px; line-height:1.35; font-weight:400;">
              Verifica tu cuenta
            </h1>
            <p style="margin:0 0 12px; font-size:14px; line-height:1.6; color:#333333;">
              Para activar tu cuenta y comenzar a usar Splenda Life, ingresa el siguiente código de verificación:
            </p>
          </td>
        </tr>

        <!-- Verification code -->
        <tr>
          <td align="center" style="padding:24px 24px;">
            <div style="background-color:#f5f5f5; border-radius:12px; padding:24px; display:inline-block;">
              <p style="margin:0 0 8px; font-family:Arial,Helvetica,sans-serif; font-size:12px; color:#666666; text-align:center;">
                Código de verificación
              </p>
              <p style="margin:0; font-family:Courier New,monospace; font-size:32px; font-weight:700; letter-spacing:8px; color:#1e4ed8; text-align:center;">
                ${code}
              </p>
            </div>
          </td>
        </tr>

        <!-- Expiration notice -->
        <tr>
          <td style="padding:0 24px 24px 24px;">
            <p style="margin:0; font-family:Arial,Helvetica,sans-serif; font-size:12px; color:#666666; text-align:center; line-height:1.5;">
              Este código expirará en <strong>10 minutos</strong>.<br>
              Si no solicitaste este código, puedes ignorar este correo de forma segura.
            </p>
          </td>
        </tr>

        <!-- Footer card -->
        <tr>
          <td style="padding:0 24px 24px 24px;">
            <table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0" style="background-color:#233a73; border-radius:12px;">
              
              <!-- Brand logo -->
              <tr>
                <td style="padding:18px 20px 10px 20px;">
                  <img src="https://splenda-uploads.nyc3.digitaloceanspaces.com/splenda_life_logo2_754d9a0c09.png" alt="Splenda Life" width="140" style="display:block; max-width:140px; height:auto;" />
                </td>
              </tr>
              
              <!-- Copyright -->
              <tr>
                <td align="center" style="padding:4px 20px 0 20px; font-family:Arial,Helvetica,sans-serif; font-size:11px; color:#ffffff; font-weight:700;">
                  © 2025. Todos los derechos reservados.
                </td>
              </tr>
              
              <!-- Disclaimer -->
              <tr>
                <td align="center" style="padding:6px 20px 0 20px; font-family:Arial,Helvetica,sans-serif; font-size:10px; line-height:1.5; color:#d8dff2;">
                  Esta aplicación está diseñada con fines educativos y de bienestar general.
                  La información aquí contenida no sustituye la consulta, diagnóstico ni tratamiento
                  de un profesional de la salud. El uso de esta plataforma implica la aceptación de los
                  <a href="https://splenda-lifeapp.com/terminos" style="color:#ffffff; text-decoration:underline;">Términos y Condiciones</a>
                  y del <a href="https://splenda-lifeapp.com/privacidad" style="color:#ffffff; text-decoration:underline;">Aviso de Privacidad</a>.
                </td>
              </tr>
              
              <!-- Social icons -->
              <tr>
                <td align="center" style="padding:12px 0 16px 0;">
                  <a href="https://www.facebook.com/splenda" style="text-decoration:none; display:inline-block; margin:0 8px;">
                    <img src="https://splenda-uploads.nyc3.digitaloceanspaces.com/facebook_765e5366b9.png" alt="Facebook" width="28" style="display:block; width:28px; height:auto;" />
                  </a>
                  <a href="https://www.instagram.com/splendalatam" style="text-decoration:none; display:inline-block; margin:0 8px;">
                    <img src="https://splenda-uploads.nyc3.digitaloceanspaces.com/instagram_f9e770a629.png" alt="Instagram" width="28" style="display:block; width:28px; height:auto;" />
                  </a>
                  <a href="https://www.tiktok.com/@splendalatam" style="text-decoration:none; display:inline-block; margin:0 8px;">
                    <img src="https://splenda-uploads.nyc3.digitaloceanspaces.com/tiktok_290e55c5be.png" alt="TikTok" width="28" style="display:block; width:28px; height:auto;" />
                  </a>
                </td>
              </tr>
              
            </table>
          </td>
        </tr>

      </table>
    </td>
  </tr>
</table>