250 lines
No EOL
12 KiB
HTML
250 lines
No EOL
12 KiB
HTML
<!DOCTYPE html><!doctype html>
|
||
|
||
<html lang="fr"><html>
|
||
|
||
<head> <body style="margin:0;padding:0;background:#f7f9fc;">
|
||
|
||
<meta charset="UTF-8"> <!-- Preheader (masqué) -->
|
||
|
||
<title>Invitation Espace Paie Odentas</title> <div style="display:none;font-size:1px;line-height:1px;max-height:0;max-width:0;opacity:0;overflow:hidden;">
|
||
|
||
<meta name="color-scheme" content="light dark"> Votre compte Odentas a été créé. Activez-le pour accéder à l’Espace Paie Employeur.
|
||
|
||
<meta name="supported-color-schemes" content="light dark"> </div>
|
||
|
||
<style>
|
||
|
||
/* Reset léger compatible email */ <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="background:#f7f9fc;">
|
||
|
||
body { margin:0; padding:0; background:#F4F6FA; color:#0F172A; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; } <tr>
|
||
|
||
a { color:#0B5FFF; text-decoration:none; } <td align="center" style="padding:24px;">
|
||
|
||
.wrapper { width:100%; padding:32px 0; } <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="max-width:600px;background:#ffffff;border-radius:8px;">
|
||
|
||
.container { width:100%; max-width:640px; margin:0 auto; background:#FFFFFF; border-radius:14px; box-shadow: 0 6px 20px rgba(15,23,42,0.06); overflow:hidden; } <!-- Logo -->
|
||
|
||
.brandbar { height:6px; background:#efc543; } <tr>
|
||
|
||
.header { padding:28px 28px 10px 28px; text-align:left; } <td style="padding:24px;text-align:center;">
|
||
|
||
.logo { height:60px; display:block; } <img src="https://newstaging.odentas.fr/wp-content/uploads/2025/08/Odentas-Logo-Bleu-Fond-Transparent-4-1.png" width="200" alt="Odentas" style="display:block;border:0;outline:none;text-decoration:none;margin:0 auto;height:auto;">
|
||
|
||
.title { font-size:22px; line-height:1.3; margin:18px 0 8px; font-weight:700; } </td>
|
||
|
||
.subtitle { font-size:15px; color:#334155; margin:0 0 16px; } </tr>
|
||
|
||
.chips { margin:14px 0 4px; }
|
||
|
||
.chip { display:inline-block; font-size:13px; padding:6px 10px; border:1px solid #E5E7EB; border-radius:999px; margin-right:8px; margin-bottom:8px; color:#0F172A; background:#F8FAFC; } <!-- Titre -->
|
||
|
||
.card { margin:6px 28px 0 28px; border:1px solid #E5E7EB; border-radius:12px; padding:18px; background:#FFFFFF; } <tr>
|
||
|
||
.card h2 { font-size:16px; margin:0 0 10px; } <td style="padding:0 24px 8px 24px;text-align:center;">
|
||
|
||
.row { display:flex; gap:12px; } <div style="font-family:Arial, Helvetica, sans-serif;font-size:22px;font-weight:bold;color:#333;">
|
||
|
||
.col { flex:1; } Bienvenue sur l’Espace Paie Odentas
|
||
|
||
.label { font-size:12px; color:#64748B; text-transform:uppercase; letter-spacing:0.03em; margin-bottom:4px; } </div>
|
||
|
||
.value { font-size:15px; color:#0F172A; } </td>
|
||
|
||
.cta-wrap { padding:24px 28px 6px 28px; text-align:center; } </tr>
|
||
|
||
.note { font-size:13px; color:#475569; padding:0 28px 26px 28px; }
|
||
|
||
.footer { font-size:12px; color:#64748B; text-align:center; padding:18px 28px 0 28px; } <!-- Intro -->
|
||
|
||
.muted { color:#94A3B8; } <tr>
|
||
|
||
/* Bouton "bulletproof" */ <td style="padding:8px 24px 0 24px;">
|
||
|
||
.btn { background:#efc543; color:#000; display:inline-block; padding:14px 26px; border-radius:10px; font-weight:700; } <div style="font-family:Arial, Helvetica, sans-serif;font-size:16px;line-height:1.5;color:#333;">
|
||
|
||
.btn:hover { filter:brightness(0.96); } Bonjour {{firstName}},<br><br>
|
||
|
||
/* Dark mode (support basique) */ Un compte a été créé pour vous afin d’accéder à l’Espace Paie Employeur Odentas.
|
||
|
||
@media (prefers-color-scheme: dark) { Cliquez sur le bouton ci-dessous pour <strong>activer votre compte</strong>.
|
||
|
||
body { background:#0B1220; color:#E5E7EB; } </div>
|
||
|
||
.container, .card { background:#0E1628; } </td>
|
||
|
||
.title, .value { color:#E7ECF3; } </tr>
|
||
|
||
.subtitle, .label, .note, .footer { color:#A8B3C7; }
|
||
|
||
.chip { background:#101A30; border-color:#24324A; color:#D6DEEB; } <!-- Bouton d’activation -->
|
||
|
||
.card { border-color:#1E2A41; } <tr>
|
||
|
||
.btn { background:#3B82F6; } <td align="center" style="padding:16px 24px 0 24px;">
|
||
|
||
} <a href="{{actionLink}}"
|
||
|
||
/* Mobile */ style="display:inline-block;padding:12px 18px;border-radius:10px;background:#2563eb;color:#ffffff;
|
||
|
||
@media (max-width: 480px) { font-family:Arial, Helvetica, sans-serif;font-size:15px;font-weight:600;text-decoration:none;">
|
||
|
||
.row { display:block; } Activer mon compte
|
||
|
||
.cta-wrap { padding:22px 16px 6px; } </a>
|
||
|
||
.card { margin:6px 16px 0 16px; } </td>
|
||
|
||
.header, .note { padding-left:16px; padding-right:16px; } </tr>
|
||
|
||
}
|
||
|
||
</style> <!-- Alerte validité -->
|
||
|
||
</head> <tr>
|
||
|
||
<body> <td align="center" style="padding:8px 24px 0 24px;">
|
||
|
||
<!-- Préheader (invisible) --> <div style="font-family:Arial, Helvetica, sans-serif;font-size:12px;color:#666;opacity:0.8;">
|
||
|
||
<div style="display:none;max-height:0;overflow:hidden;opacity:0;"> Ce lien est sécurisé et personnel. Si besoin, vous pourrez demander un nouveau lien depuis la page de connexion.
|
||
|
||
Invitation Espace Paie Odentas pour {{organizationName}} · Activez votre compte. </div>
|
||
|
||
</div> </td>
|
||
|
||
</tr>
|
||
|
||
<div class="wrapper">
|
||
|
||
<div class="container"> <!-- Card d’infos compte -->
|
||
|
||
<div class="brandbar"></div> <tr>
|
||
|
||
<div class="header"> <td align="center" style="padding:16px 24px 0 24px;">
|
||
|
||
<img class="logo" src="https://newstaging.odentas.fr/wp-content/uploads/2025/08/Odentas-Logo-Bleu-Fond-Transparent-4-1.webp" alt="Odentas"> <table role="presentation" cellpadding="0" cellspacing="0" border="0" style="max-width:420px;width:100%;background:#e6f0ff;border-radius:12px;">
|
||
|
||
<h1 class="title">Bienvenue sur l'Espace Paie Odentas</h1> <tr>
|
||
|
||
<p class="subtitle">Un compte a été créé pour vous afin d'accéder à l'Espace Paie Employeur.</p> <td style="padding:16px 16px;text-align:left;">
|
||
|
||
<div class="chips"> <div style="font-family:Arial, Helvetica, sans-serif;font-size:14px;color:#111;margin-bottom:8px;">
|
||
|
||
<span class="chip">Organisation : {{organizationName}}</span> Détails de votre compte
|
||
|
||
<span class="chip">Statut : Invitation</span> </div>
|
||
|
||
<span class="chip">Type : Employeur</span> <div style="font-family:Arial, Helvetica, sans-serif;font-size:13px;color:#111;opacity:.9;">
|
||
|
||
</div> <div style="margin-bottom:6px;"><strong>Email :</strong> {{email}}</div>
|
||
|
||
</div> <div style="margin-bottom:6px;"><strong>Rôle :</strong> {{role}}</div>
|
||
|
||
<div><strong>Structure API :</strong> {{structureApi}}</div>
|
||
|
||
<div class="card"> </div>
|
||
|
||
<h2>Informations du compte</h2> </td>
|
||
|
||
<div class="row" style="margin-bottom:10px;"> </tr>
|
||
|
||
<div class="col"> </table>
|
||
|
||
<div class="label">Nom</div> </td>
|
||
|
||
<div class="value">{{firstName}}</div> </tr>
|
||
|
||
</div>
|
||
|
||
<div class="col"> <!-- Explications login -->
|
||
|
||
<div class="label">Email</div> <tr>
|
||
|
||
<div class="value">{{email}}</div> <td style="padding:16px 24px 0 24px;">
|
||
|
||
</div> <div style="font-family:Arial, Helvetica, sans-serif;font-size:13px;line-height:1.6;color:#333;">
|
||
|
||
</div> Après activation, vous pourrez vous connecter en toute simplicité par <strong>lien magique</strong> (e-mail)
|
||
|
||
<div class="row"> et accéder à vos contrats, paies et documents. Si vous n’êtes pas à l’origine de cette création de compte,
|
||
|
||
<div class="col"> ignorez ce message et contactez notre équipe.
|
||
|
||
<div class="label">Organisation</div> </div>
|
||
|
||
<div class="value">{{organizationName}}</div> </td>
|
||
|
||
</div> </tr>
|
||
|
||
<div class="col">
|
||
|
||
<div class="label">Rôle</div> <!-- Lien en clair (fallback) -->
|
||
|
||
<div class="value">Employeur</div> <tr>
|
||
|
||
</div> <td style="padding:16px 24px 0 24px;">
|
||
|
||
</div> <div style="font-family:Arial, Helvetica, sans-serif;font-size:13px;line-height:1.5;color:#666;">
|
||
|
||
</div> Si le bouton ne fonctionne pas, copiez-collez ce lien dans votre navigateur :<br>
|
||
|
||
<a href="{{actionLink}}" style="color:#2563eb;word-break:break-all;">{{actionLink}}</a>
|
||
|
||
<div class="cta-wrap"> </div>
|
||
|
||
<!--[if mso]> </td>
|
||
|
||
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" arcsize="10%" fillcolor="#efc543" stroke="f" style="height:46px;v-text-anchor:middle;width:260px;"> </tr>
|
||
|
||
<w:anchorlock/>
|
||
|
||
<center style="color:#000000;font-family:Segoe UI, Arial, sans-serif;font-size:16px;font-weight:700;">Activer mon compte</center> <!-- Séparateur -->
|
||
|
||
</v:roundrect> <tr>
|
||
|
||
<![endif]--> <td style="padding:20px 24px 0 24px;">
|
||
|
||
<!--[if !mso]><!-- --> <div style="border-top:4px solid #e6eaf1;height:1px;line-height:1px;"> </div>
|
||
|
||
<a class="btn" href="{{ctaUrl}}">Activer mon compte</a> </td>
|
||
|
||
<!--<![endif]--> </tr>
|
||
|
||
</div>
|
||
|
||
<!-- Footer -->
|
||
|
||
<p class="note"> <tr>
|
||
|
||
Cliquez sur le bouton ci-dessus pour activer votre compte et définir votre mot de passe. <br>Si vous avez des questions, <td style="padding:16px 24px 24px 24px;text-align:center;">
|
||
|
||
<a href="{{supportUrl}}">contactez le support</a>.<br><br>L'équipe Odentas vous remercie pour votre confiance. <div style="font-family:Arial, Helvetica, sans-serif;font-size:12px;line-height:1.6;color:#888;">
|
||
|
||
</p> © Odentas Media SAS 2021-2025 | RCS Paris 907880348 | 6 rue d'Armaillé, 75017 Paris<br>
|
||
|
||
<a href="mailto:paie@odentas.fr" style="color:#888;text-decoration:underline;">paie@odentas.fr</a><br><br>
|
||
|
||
<div class="footer"> <span style="color:#aaa;">Vous recevez cet e-mail car un compte a été créé pour vous sur l’Espace Paie Employeur Odentas.
|
||
|
||
<p>Vous recevez cet e-mail car un compte a été créé pour vous sur l'Espace Paie Odentas. <br><span class="muted">© 2021-2025 Odentas Media SAS</span></p> Si vous pensez avoir reçu cet e-mail par erreur, merci de contacter notre équipe à l’adresse paie@odentas.fr.</span>
|
||
|
||
</div> </div>
|
||
|
||
</div> </td>
|
||
|
||
</div> </tr>
|
||
|
||
|
||
|
||
<!-- Version texte simple (fallback) --> </table>
|
||
|
||
<div style="display:none; font-size:0; line-height:0;"> </td>
|
||
|
||
Invitation Espace Paie Odentas – Organisation {{organizationName}} pour {{firstName}}. </tr>
|
||
|
||
Activer le compte : {{ctaUrl}}. </table>
|
||
|
||
</div> </body>
|
||
|
||
</body></html>
|
||
</html> |