c61572a715
- Login - Password dimenticata - Aggiorna password. - Email registrazione - Ammetti Utente
129 lines
8.0 KiB
Plaintext
Executable File
129 lines
8.0 KiB
Plaintext
Executable File
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;
|
|
}
|
|
}
|