134 lines
No EOL
5.8 KiB
HTML
134 lines
No EOL
5.8 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="fr">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>Nouveau CDDU créé</title>
|
||
<meta name="color-scheme" content="light dark">
|
||
<meta name="supported-color-schemes" content="light dark">
|
||
<style>
|
||
/* Reset léger compatible email */
|
||
body { margin:0; padding:0; background:#F4F6FA; color:#0F172A; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }
|
||
a { color:#0B5FFF; text-decoration:none; }
|
||
.wrapper { width:100%; padding:32px 0; }
|
||
.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; }
|
||
.brandbar { height:6px; background:#efc543; }
|
||
.header { padding:28px 28px 10px 28px; text-align:left; }
|
||
.logo { height:60px; display:block; }
|
||
.title { font-size:22px; line-height:1.3; margin:18px 0 8px; font-weight:700; }
|
||
.subtitle { font-size:15px; color:#334155; margin:0 0 16px; }
|
||
.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; }
|
||
.card { margin:6px 28px 0 28px; border:1px solid #E5E7EB; border-radius:12px; padding:18px; background:#FFFFFF; }
|
||
.card h2 { font-size:16px; margin:0 0 10px; }
|
||
.table { width:100%; border-collapse:collapse; margin-top:10px; }
|
||
.table th, .table td { padding:8px 12px; text-align:left; border-bottom:1px solid #E5E7EB; }
|
||
.table th { font-size:12px; color:#64748B; text-transform:uppercase; letter-spacing:0.03em; background:#F8FAFC; }
|
||
.table td { font-size:15px; color:#0F172A; }
|
||
.cta-wrap { padding:24px 28px 6px 28px; text-align:center; }
|
||
.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; }
|
||
.muted { color:#94A3B8; }
|
||
/* Bouton "bulletproof" */
|
||
.btn { background:#efc543; color:#000; display:inline-block; padding:14px 26px; border-radius:10px; font-weight:700; }
|
||
.btn:hover { filter:brightness(0.96); }
|
||
/* Dark mode (support basique) */
|
||
@media (prefers-color-scheme: dark) {
|
||
body { background:#0B1220; color:#E5E7EB; }
|
||
.container, .card { background:#0E1628; }
|
||
.title, .table td { color:#E7ECF3; }
|
||
.subtitle, .table th, .note, .footer { color:#A8B3C7; }
|
||
.chip { background:#101A30; border-color:#24324A; color:#D6DEEB; }
|
||
.card { border-color:#1E2A41; }
|
||
.table th { background:#101A30; }
|
||
.table th, .table td { border-color:#1E2A41; }
|
||
.btn { background:#3B82F6; }
|
||
}
|
||
/* Mobile */
|
||
@media (max-width: 480px) {
|
||
.cta-wrap { padding:22px 16px 6px; }
|
||
.card { margin:6px 16px 0 16px; }
|
||
.header, .note { padding-left:16px; padding-right:16px; }
|
||
.table th, .table td { padding:6px 8px; font-size:14px; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<!-- Préheader (invisible) -->
|
||
<div style="display:none;max-height:0;overflow:hidden;opacity:0;">
|
||
Nouveau CDDU créé pour {{employeeName}} · Réf {{contractReference}} · Consultez et téléchargez votre contrat.
|
||
</div>
|
||
|
||
<div class="wrapper">
|
||
<div class="container">
|
||
<div class="brandbar"></div>
|
||
<div class="header">
|
||
<img class="logo" src="https://newstaging.odentas.fr/wp-content/uploads/2025/08/Odentas-Logo-Bleu-Fond-Transparent-4-1.webp" alt="Odentas">
|
||
<h1 class="title">Nouveau CDDU créé</h1>
|
||
<p class="subtitle">Un nouveau contrat vient d'être généré dans votre Espace Paie Odentas.</p>
|
||
<div class="chips">
|
||
<span class="chip">Réf : {{contractReference}}</span>
|
||
<span class="chip">Statut : Créé</span>
|
||
<span class="chip">Date : {{startDate}}</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<h2>Détails du contrat</h2>
|
||
<table class="table">
|
||
<tr>
|
||
<th>Salarié</th>
|
||
<td>{{employeeName}}</td>
|
||
</tr>
|
||
<tr>
|
||
<th>Poste</th>
|
||
<td>{{profession}}</td>
|
||
</tr>
|
||
<tr>
|
||
<th>Date de début</th>
|
||
<td>{{startDate}}</td>
|
||
</tr>
|
||
<tr>
|
||
<th>Date de fin</th>
|
||
<td>{{endDate}}</td>
|
||
</tr>
|
||
<tr>
|
||
<th>Analytique</th>
|
||
<td>{{contractReference}}</td>
|
||
</tr>
|
||
<tr>
|
||
<th>Rémunération</th>
|
||
<td>{{salary}}</td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
|
||
<div class="cta-wrap">
|
||
<!--[if mso]>
|
||
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" arcsize="10%" fillcolor="#efc543" stroke="f" style="height:46px;v-text-anchor:middle;width:260px;">
|
||
<w:anchorlock/>
|
||
<center style="color:#000000;font-family:Segoe UI, Arial, sans-serif;font-size:16px;font-weight:700;">Voir le contrat</center>
|
||
</v:roundrect>
|
||
<![endif]-->
|
||
<!--[if !mso]><!-- -->
|
||
<a class="btn" href="{{ctaUrl}}">Voir le contrat</a>
|
||
<!--<![endif]-->
|
||
</div>
|
||
|
||
<p class="note">
|
||
Pour votre sécurité, ne partagez jamais ce message. <br>Si vous n'êtes pas à l'origine de cette création,
|
||
<a href="{{supportUrl}}">contactez le support</a>.<br><br>L'équipe Odentas vous remercie pour votre confiance.
|
||
</p>
|
||
|
||
<div class="footer">
|
||
<p>Vous recevez cet e-mail car vous êtes client de Odentas, <br>pour vous notifier d'une action sur votre compte. <br><span class="muted">© 2021-2025 Odentas Media SAS</span></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Version texte simple (fallback) -->
|
||
<div style="display:none; font-size:0; line-height:0;">
|
||
Nouveau CDDU créé – Réf {{contractReference}} pour {{employeeName}}, poste {{profession}}.
|
||
Voir le contrat : {{ctaUrl}}.
|
||
</div>
|
||
</body>
|
||
</html> |