doctype html
html(lang="it")
head
meta(charset="UTF-8")
meta(name="viewport" content="width=device-width, initial-scale=1.0")
title Recupera Password - #{nomeapp}
body(style="margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); background-color: #f5f7fa;")
// Container Principale
table(role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 40px 20px;")
tr
td(align="center")
// Card Email
table(role="presentation" cellspacing="0" cellpadding="0" border="0" width="600" style="max-width: 600px; background: #ffffff; border-radius: 24px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.16); overflow: hidden;")
// Header con Icona
tr
td(style="background: linear-gradient(to bottom, rgba(103, 126, 234, 0.08), transparent); padding: 40px 32px 32px; text-align: center; border-bottom: 1px solid rgba(0, 0, 0, 0.06);")
table(role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%")
tr
td(align="center")
// Icona
div(style="width: 100px; height: 100px; margin: 0 auto 20px; background: linear-gradient(135deg, rgba(25, 118, 210, 0.15), rgba(38, 166, 154, 0.15)); border-radius: 50%; display: flex; align-items: center; justify-content: center;")
span(style="font-size: 48px; color: #1976d2;") 🔐
// Titolo
h1(style="margin: 0 0 12px; font-size: 28px; font-weight: 600; color: #1a1a1a; line-height: 1.3;") Recupera la tua Password
p(style="margin: 0; font-size: 16px; color: #666; line-height: 1.5;")
| Ciao
strong(style="color: #333;") #{name}
| , abbiamo ricevuto una richiesta per reimpostare la tua password
// Contenuto Principale
tr
td(style="padding: 32px;")
// Messaggio
p(style="margin: 0 0 24px; font-size: 16px; color: #333; line-height: 1.6;")
| Per cambiare la tua password di
strong #{nomeapp}
| , puoi utilizzare uno dei seguenti metodi:
// Metodo 1: Bottone Link
table(role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="margin-bottom: 32px;")
tr
td(style="background: linear-gradient(to right, rgba(25, 118, 210, 0.08), transparent); padding: 24px; border-radius: 16px; border: 1px solid rgba(25, 118, 210, 0.15);")
p(style="margin: 0 0 16px; font-size: 14px; font-weight: 600; color: #1976d2; text-transform: uppercase; letter-spacing: 0.5px;") ✨ Metodo 1: Link Diretto
// Bottone CTA
table(role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%")
tr
td(align="center" style="padding: 8px 0;")
a(href=strlinksetpassword target="_blank" style="display: inline-block; padding: 16px 48px; background: linear-gradient(135deg, #1976d2, #42a5f5); color: #ffffff; text-decoration: none; border-radius: 12px; font-size: 16px; font-weight: 600; box-shadow: 0 4px 16px rgba(25, 118, 210, 0.3);")
| 🔓 Reimposta Password
p(style="margin: 16px 0 0; font-size: 13px; color: #666; text-align: center;")
| Il link è valido per
strong(style="color: #f2c037;") 4 ore
// Divisore
table(role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="margin: 24px 0;")
tr
td(style="position: relative; text-align: center;")
div(style="position: relative; height: 1px; background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.12), transparent);")
span(style="position: relative; top: -12px; display: inline-block; padding: 4px 16px; background: #ffffff; color: #666; font-size: 14px; font-weight: 500; border-radius: 12px; border: 1px solid rgba(0, 0, 0, 0.08);") oppure
// Metodo 2: Codice
table(role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="margin-bottom: 24px;")
tr
td(style="background: linear-gradient(to right, rgba(33, 186, 69, 0.08), transparent); padding: 24px; border-radius: 16px; border: 1px solid rgba(33, 186, 69, 0.15);")
p(style="margin: 0 0 16px; font-size: 14px; font-weight: 600; color: #21ba45; text-transform: uppercase; letter-spacing: 0.5px;") 🔢 Metodo 2: Codice di Verifica
p(style="margin: 0 0 12px; font-size: 15px; color: #333;") Inserisci questo codice nell'app:
// Codice Box
div(style="background: #ffffff; border: 2px dashed #21ba45; border-radius: 12px; padding: 20px; text-align: center; margin: 16px 0;")
div(style="font-size: 36px; font-weight: 700; color: #1976d2; letter-spacing: 8px; font-family: 'Courier New', monospace;") #{tokenforgot_code}
p(style="margin: 12px 0 0; font-size: 13px; color: #666; text-align: center;")
| Copia e incolla il codice nell'app per confermare
// Warning Box
table(role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%")
tr
td(style="background: rgba(242, 192, 55, 0.1); padding: 16px; border-radius: 12px; border-left: 4px solid #f2c037;")
p(style="margin: 0; font-size: 14px; color: #666; line-height: 1.6;")
strong(style="color: #333;") ⚠️ Importante:
br
| Se non sei stato tu a richiedere questo cambiamento, ignora questa email. La tua password rimarrà invariata.
// Footer
tr
td(style="background: linear-gradient(to top, rgba(0, 0, 0, 0.02), transparent); padding: 32px; text-align: center; border-top: 1px solid rgba(0, 0, 0, 0.06);")
p(style="margin: 0 0 8px; font-size: 15px; color: #333; font-weight: 600;") Cordiali Saluti
p(style="margin: 0 0 20px; font-size: 15px; color: #1976d2; font-weight: 600;")
| Supporto #{nomeapp}
// Info Footer
p(style="margin: 0; font-size: 13px; color: #999; line-height: 1.6;")
| Questa è una email automatica, per favore non rispondere.
br
| © #{new Date().getFullYear()} #{nomeapp}. Tutti i diritti riservati.
// Versione Mobile (per client email che non supportano media queries)
table(role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="max-width: 600px; margin: 0 auto; display: none;")
tr
td
style(type="text/css").
@media only screen and (max-width: 600px) {
table[class="mobile-responsive"] {
width: 100% !important;
}
td[class="mobile-padding"] {
padding: 20px 16px !important;
}
h1 {
font-size: 24px !important;
}
.code-box {
font-size: 28px !important;
letter-spacing: 4px !important;
}
}