71 lines
3.9 KiB
Twig
71 lines
3.9 KiB
Twig
|
{% extends 'mails/base.twig' %}
|
||
|
|
|
||
|
|
{% block content %}
|
||
|
|
<!-- Section principale - Fond clair (Light Gray) -->
|
||
|
|
<mj-section background-color="#f3f4f6" border-radius="12px" padding="20px">
|
||
|
|
|
||
|
|
<!-- Colonne pour le Titre -->
|
||
|
|
<mj-column>
|
||
|
|
<!-- Titre -->
|
||
|
|
<mj-text font-family="Helvetica, Arial, sans-serif" color="#4f46e5" font-size="28px" font-weight="bold" align="center" padding-bottom="20px">
|
||
|
|
Votre Cotisation Annuelle
|
||
|
|
</mj-text>
|
||
|
|
</mj-column>
|
||
|
|
|
||
|
|
<!-- Carte d'information (fond blanc) - Correction: Remplacement de <mj-group> par <mj-wrapper> -->
|
||
|
|
<mj-wrapper background-color="#ffffff" border-radius="8px" padding="20px" css-class="card-container" border="1px solid #e5e7eb" padding-bottom="20px">
|
||
|
|
<mj-section padding="0">
|
||
|
|
<mj-column width="100%">
|
||
|
|
<!-- Texte principal : couleur sombre -->
|
||
|
|
<mj-text font-family="Helvetica, Arial, sans-serif" color="#374151" font-size="16px" line-height="1.6" padding-bottom="0">
|
||
|
|
Bonjour <strong>{{ datas.pseudo }}</strong>,
|
||
|
|
</mj-text>
|
||
|
|
|
||
|
|
<mj-text font-family="Helvetica, Arial, sans-serif" color="#374151" font-size="16px" line-height="1.6" padding-top="0" padding-bottom="20px">
|
||
|
|
Nous vous remercions de votre engagement. Veuillez trouver ci-dessous les détails de votre cotisation pour la période à venir.
|
||
|
|
</mj-text>
|
||
|
|
|
||
|
|
<!-- Détails de la Cotisation : Période -->
|
||
|
|
<mj-table padding="5px 0" width="100%" color="#374151" font-size="14px">
|
||
|
|
<!-- Bordure très claire -->
|
||
|
|
<tr style="border-bottom: 1px solid #e5e7eb;">
|
||
|
|
<td style="font-weight: bold; padding: 10px 0;">Période :</td>
|
||
|
|
<td style="text-align: right; padding: 10px 0;">Du {{ datas.start_at|date('d/m/Y') }} au {{ datas.end_at|date('d/m/Y') }}</td>
|
||
|
|
</tr>
|
||
|
|
</mj-table>
|
||
|
|
|
||
|
|
<!-- Détails de la Cotisation : Montant -->
|
||
|
|
<mj-table padding="5px 0" width="100%">
|
||
|
|
<tr>
|
||
|
|
<td style="font-weight: bold; padding: 10px 0; color: #374151; font-size: 14px;">Montant total :</td>
|
||
|
|
<!-- Couleur d'accentuation verte conservée -->
|
||
|
|
<td style="text-align: right; padding: 10px 0; color: #10b981; font-size: 18px; font-weight: bold;">{{ datas.amount|format_currency('EUR', locale='fr') }}</td>
|
||
|
|
</tr>
|
||
|
|
</mj-table>
|
||
|
|
</mj-column>
|
||
|
|
</mj-section>
|
||
|
|
</mj-wrapper>
|
||
|
|
|
||
|
|
<!-- Colonne pour le Bouton et le bas de page -->
|
||
|
|
<mj-column>
|
||
|
|
<!-- Bouton de Paiement (couleur d'accentuation conservée) -->
|
||
|
|
<mj-button href="{{ datas.link }}" background-color="#4f46e5" color="#ffffff" font-size="16px" font-weight="bold" border-radius="8px" padding-top="25px" padding-bottom="25px">
|
||
|
|
Procéder au Paiement Sécurisé
|
||
|
|
</mj-button>
|
||
|
|
|
||
|
|
<!-- Note de bas de page : couleur de texte gris moyen -->
|
||
|
|
<mj-text font-family="Helvetica, Arial, sans-serif" color="#6b7280" font-size="12px" align="center" padding-top="15px">
|
||
|
|
Si le bouton ne fonctionne pas, veuillez copier-coller ce lien dans votre navigateur :<br>
|
||
|
|
<a href="{{ datas.link }}" style="color: #4f46e5; text-decoration: underline; word-break: break-all;">{{ datas.link }}</a>
|
||
|
|
</mj-text>
|
||
|
|
|
||
|
|
<mj-text font-family="Helvetica, Arial, sans-serif" color="#6b7280" font-size="12px" align="center" padding-top="10px">
|
||
|
|
Cet e-mail est envoyé automatiquement. Merci de ne pas y répondre.
|
||
|
|
</mj-text>
|
||
|
|
</mj-column>
|
||
|
|
|
||
|
|
</mj-section>
|
||
|
|
|
||
|
|
|
||
|
|
{% endblock %}
|