admin/crm_ecosplay
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: replace all layout tables with CSS in email and PDF templates

Browse Source 
- Email templates: replace table/tr/td with div-based CSS layout
- PDF templates: replace table with display:table/table-row/table-cell CSS (Dompdf compatible)
- Only table.data (RGPD access session data) remains as actual HTML table

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Serreau Jovann
2026-04-01 19:57:26 +02:00
parent a76e96fb21
commit 363cea260b
7 changed files with 153 additions and 178 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
templates/emails/membre_created.html.twig
View File

@@ -8,16 +8,16 @@
<div style="background: #111827; color: #fff; padding: 20px; margin: 20px 0;">
<p style="font-size: 11px; text-transform: uppercase; letter-spacing: 1px; margin: 0 0 12px; opacity: 0.7;">Vos identifiants de connexion</p>
<table role="presentation" style="width: 100%; font-size: 14px;">
<tr>
<td style="color: #fabf04; font-weight: bold; padding: 4px 0; width: 120px;">Email</td>
<td style="color: #fff; padding: 4px 0;">{{ email }}</td>
</tr>
<tr>
<td style="color: #fabf04; font-weight: bold; padding: 4px 0;">Mot de passe</td>
<td style="color: #fff; padding: 4px 0; font-family: monospace; letter-spacing: 1px;">{{ tempPassword }}</td>
</tr>
</table>
<div style="font-size: 14px;">
<div style="padding: 4px 0;">
<span style="color: #fabf04; font-weight: bold; display: inline-block; width: 120px;">Email</span>
<span style="color: #fff;">{{ email }}</span>
</div>
<div style="padding: 4px 0;">
<span style="color: #fabf04; font-weight: bold; display: inline-block; width: 120px;">Mot de passe</span>
<span style="color: #fff; font-family: monospace; letter-spacing: 1px;">{{ tempPassword }}</span>
</div>
</div>
</div>
<p style="font-size: 14px; line-height: 1.6; margin: 0 0 16px 0;">Lors de votre premiere connexion, il vous sera demande de :</p>
@@ -45,13 +45,9 @@
</ul>
{% endif %}
<table role="presentation" style="margin: 24px 0;">
<tr>
<td style="background: #fabf04; border: 2px solid #111827; padding: 12px 24px;">
<a href="{{ url('app_home') }}" style="color: #111827; font-weight: 900; text-transform: uppercase; font-size: 13px; text-decoration: none; letter-spacing: 1px;">Se connecter</a>
</td>
</tr>
</table>
<div style="margin: 24px 0;">
<a href="{{ url('app_home') }}" style="display: inline-block; background: #fabf04; border: 2px solid #111827; padding: 12px 24px; color: #111827; font-weight: 900; text-transform: uppercase; font-size: 13px; text-decoration: none; letter-spacing: 1px;">Se connecter</a>
</div>
<p style="font-size: 14px; line-height: 1.6; margin: 16px 0;">Une fois sur la page de connexion, cliquez sur le bouton <strong>"Connexion E-Cosplay"</strong> puis saisissez vos identifiants ci-dessus.</p>

86
templates/emails/revendeur_created.html.twig
View File

@@ -13,61 +13,47 @@
<p style="font-size: 14px; line-height: 1.6; margin: 0 0 8px; font-weight: bold;">Pour acceder a votre espace, suivez ces etapes :</p>
<table role="presentation" style="width: 100%; margin: 16px 0;">
<tr>
<td style="padding: 12px 16px; border-left: 4px solid #fabf04; background: #f9fafb;">
<p style="font-size: 12px; font-weight: 900; text-transform: uppercase; color: #fabf04; margin: 0 0 4px;">Etape 1</p>
<p style="font-size: 14px; margin: 0; line-height: 1.6;">Cliquez sur le bouton ci-dessous pour <strong>definir votre mot de passe</strong>. Ce lien est a usage unique.</p>
</td>
</tr>
<tr><td style="height: 8px;"></td></tr>
<tr>
<td style="padding: 12px 16px; border-left: 4px solid #fabf04; background: #f9fafb;">
<p style="font-size: 12px; font-weight: 900; text-transform: uppercase; color: #fabf04; margin: 0 0 4px;">Etape 2</p>
<p style="font-size: 14px; margin: 0; line-height: 1.6;">Une fois votre mot de passe defini, rendez-vous sur la page de connexion et identifiez-vous avec votre email <strong>{{ email }}</strong> et votre nouveau mot de passe.</p>
</td>
</tr>
<tr><td style="height: 8px;"></td></tr>
<tr>
<td style="padding: 12px 16px; border-left: 4px solid #fabf04; background: #f9fafb;">
<p style="font-size: 12px; font-weight: 900; text-transform: uppercase; color: #fabf04; margin: 0 0 4px;">Etape 3</p>
<p style="font-size: 14px; margin: 0; line-height: 1.6;">Vous accederez a votre <strong>Espace Revendeur</strong> ou vous pourrez gerer vos ventes, commandes et factures.</p>
</td>
</tr>
</table>
<div style="width: 100%; margin: 16px 0;">
<div style="padding: 12px 16px; border-left: 4px solid #fabf04; background: #f9fafb;">
<p style="font-size: 12px; font-weight: 900; text-transform: uppercase; color: #fabf04; margin: 0 0 4px;">Etape 1</p>
<p style="font-size: 14px; margin: 0; line-height: 1.6;">Cliquez sur le bouton ci-dessous pour <strong>definir votre mot de passe</strong>. Ce lien est a usage unique.</p>
</div>
<div style="height: 8px;"></div>
<div style="padding: 12px 16px; border-left: 4px solid #fabf04; background: #f9fafb;">
<p style="font-size: 12px; font-weight: 900; text-transform: uppercase; color: #fabf04; margin: 0 0 4px;">Etape 2</p>
<p style="font-size: 14px; margin: 0; line-height: 1.6;">Une fois votre mot de passe defini, rendez-vous sur la page de connexion et identifiez-vous avec votre email <strong>{{ email }}</strong> et votre nouveau mot de passe.</p>
</div>
<div style="height: 8px;"></div>
<div style="padding: 12px 16px; border-left: 4px solid #fabf04; background: #f9fafb;">
<p style="font-size: 12px; font-weight: 900; text-transform: uppercase; color: #fabf04; margin: 0 0 4px;">Etape 3</p>
<p style="font-size: 14px; margin: 0; line-height: 1.6;">Vous accederez a votre <strong>Espace Revendeur</strong> ou vous pourrez gerer vos ventes, commandes et factures.</p>
</div>
</div>
<table role="presentation" style="margin: 24px 0; width: 100%;">
<tr>
<td style="background: #fabf04; border: 2px solid #111827; padding: 14px 24px; text-align: center;">
<a href="{{ setPasswordUrl }}" style="color: #111827; font-weight: 900; text-transform: uppercase; font-size: 14px; text-decoration: none; letter-spacing: 1px;">Definir mon mot de passe</a>
</td>
</tr>
</table>
<div style="margin: 24px 0; text-align: center;">
<a href="{{ setPasswordUrl }}" style="display: inline-block; background: #fabf04; border: 2px solid #111827; padding: 14px 24px; color: #111827; font-weight: 900; text-transform: uppercase; font-size: 14px; text-decoration: none; letter-spacing: 1px;">Definir mon mot de passe</a>
</div>
<table role="presentation" style="margin: 0 0 24px; width: 100%;">
<tr>
<td style="background: #fff; border: 2px solid #111827; padding: 12px 24px; text-align: center;">
<a href="{{ url('app_home') }}" style="color: #111827; font-weight: 900; text-transform: uppercase; font-size: 12px; text-decoration: none; letter-spacing: 1px;">Acceder a la page de connexion</a>
</td>
</tr>
</table>
<div style="margin: 0 0 24px; text-align: center;">
<a href="{{ url('app_home') }}" style="display: inline-block; background: #fff; border: 2px solid #111827; padding: 12px 24px; color: #111827; font-weight: 900; text-transform: uppercase; font-size: 12px; text-decoration: none; letter-spacing: 1px;">Acceder a la page de connexion</a>
</div>
<div style="background: #f9fafb; padding: 16px; border: 1px solid #e5e7eb; margin: 16px 0;">
<p style="font-size: 12px; font-weight: bold; margin: 0 0 8px;">Informations de votre compte :</p>
<table role="presentation" style="font-size: 12px; width: 100%;">
<tr>
<td style="padding: 2px 0; color: #666; width: 120px;">Code revendeur</td>
<td style="padding: 2px 0; font-weight: bold; font-family: monospace;">{{ codeRevendeur }}</td>
</tr>
<tr>
<td style="padding: 2px 0; color: #666;">Email</td>
<td style="padding: 2px 0; font-weight: bold;">{{ email }}</td>
</tr>
<tr>
<td style="padding: 2px 0; color: #666;">Nom</td>
<td style="padding: 2px 0; font-weight: bold;">{{ firstName }} {{ lastName }}</td>
</tr>
</table>
<div style="font-size: 12px;">
<div style="padding: 2px 0;">
<span style="color: #666; display: inline-block; width: 120px;">Code revendeur</span>
<span style="font-weight: bold; font-family: monospace;">{{ codeRevendeur }}</span>
</div>
<div style="padding: 2px 0;">
<span style="color: #666; display: inline-block; width: 120px;">Email</span>
<span style="font-weight: bold;">{{ email }}</span>
</div>
<div style="padding: 2px 0;">
<span style="color: #666; display: inline-block; width: 120px;">Nom</span>
<span style="font-weight: bold;">{{ firstName }} {{ lastName }}</span>
</div>
</div>
</div>
<p style="font-size: 12px; color: #999; margin: 16px 0 0;">Pour toute question, contactez-nous a <a href="mailto:contact@e-cosplay.fr" style="color: #4338ca;">contact@e-cosplay.fr</a>. Conservez precieusement votre code revendeur {{ codeRevendeur }}.</p>

25
templates/emails/rgpd_attestation_signed.html.twig
View File

@@ -6,20 +6,17 @@
<h1 style="font-size: 20px; font-weight: bold; text-transform: uppercase; margin: 0 0 16px 0;">Attestation RGPD signee</h1>
<p style="font-size: 14px; line-height: 1.6; margin: 0 0 16px 0;">Bonjour,</p>
<p style="font-size: 14px; line-height: 1.6; margin: 0 0 16px 0;">Suite a votre demande, vous trouverez en piece jointe votre <strong>attestation d'{{ typeName }}</strong>, signee electroniquement par l'association E-Cosplay.</p>
<table role="presentation" style="margin: 16px 0; font-size: 13px; width: 100%;">
<tr>
<td style="padding: 8px 12px; background: #f9fafb; border-left: 3px solid #fabf04; font-weight: bold;">Reference</td>
<td style="padding: 8px 12px; background: #f9fafb;">{{ attestation.reference }}</td>
</tr>
<tr>
<td style="padding: 8px 12px; border-left: 3px solid #fabf04; font-weight: bold;">Date</td>
<td style="padding: 8px 12px;">{{ attestation.createdAt|date('d/m/Y a H:i') }}</td>
</tr>
<tr>
<td style="padding: 8px 12px; background: #f9fafb; border-left: 3px solid #fabf04; font-weight: bold;">Type</td>
<td style="padding: 8px 12px; background: #f9fafb;">{{ typeName|capitalize }}</td>
</tr>
</table>
<div style="margin: 16px 0; font-size: 13px; width: 100%;">
<div style="padding: 8px 12px; background: #f9fafb; border-left: 3px solid #fabf04;">
<strong>Reference</strong> {{ attestation.reference }}
</div>
<div style="padding: 8px 12px; border-left: 3px solid #fabf04;">
<strong>Date</strong> {{ attestation.createdAt|date('d/m/Y a H:i') }}
</div>
<div style="padding: 8px 12px; background: #f9fafb; border-left: 3px solid #fabf04;">
<strong>Type</strong> {{ typeName|capitalize }}
</div>
</div>
<p style="font-size: 14px; line-height: 1.6; margin: 0 0 16px 0;">Le certificat de signature electronique est egalement joint a cet email.</p>
<p style="font-size: 14px; line-height: 1.6; margin: 0;">Cordialement,<br><strong>Association E-Cosplay</strong></p>
{% endblock %}

44
templates/pdf/contrat_revendeur.html.twig
View File

@@ -13,16 +13,18 @@
h1 { font-size: 18px; font-weight: 900; text-transform: uppercase; letter-spacing: -0.5px; font-style: italic; margin: 0 0 4px; }
h2 { font-size: 11px; font-weight: 900; text-transform: uppercase; margin: 14px 0 4px; padding: 4px 8px; background: #fabf04; border: 2px solid #111827; display: inline-block; }
.subtitle { font-size: 9px; color: #666; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 16px; }
.parties { width: 100%; margin-bottom: 16px; border: 2px solid #111827; }
.parties td { width: 50%; vertical-align: top; padding: 10px; font-size: 10px; }
.parties td.left { border-right: 2px solid #111827; }
.parties { display: table; width: 100%; margin-bottom: 16px; border: 2px solid #111827; }
.parties-row { display: table-row; }
.parties-cell { display: table-cell; width: 50%; vertical-align: top; padding: 10px; font-size: 10px; }
.parties-cell.left { border-right: 2px solid #111827; }
.label { font-size: 7px; font-weight: 900; text-transform: uppercase; letter-spacing: 1.5px; color: #999; display: block; margin-bottom: 3px; }
.section { margin-bottom: 10px; }
.section p { margin: 3px 0; }
.section ul { margin: 3px 0; padding-left: 18px; }
.section li { margin-bottom: 2px; }
.signatures { width: 100%; margin-top: 20px; }
.signatures td { width: 50%; vertical-align: top; padding: 8px; }
.signatures { display: table; width: 100%; margin-top: 20px; }
.signatures-row { display: table-row; }
.signatures-cell { display: table-cell; width: 50%; vertical-align: top; padding: 8px; }
.sig-box { border: 2px solid #111827; width: 200px; height: 70px; padding: 6px; }
.sig-label { font-size: 7px; font-weight: 900; text-transform: uppercase; letter-spacing: 1.5px; color: #999; margin-bottom: 4px; }
.sig-date { font-size: 8px; color: #999; margin-top: 4px; }
@@ -40,24 +42,24 @@
<p style="margin-bottom: 12px; font-weight: 700;">Entre les soussignes :</p>
<table class="parties">
<tr>
<th class="left" style="text-align: left; font-weight: normal;">
<div class="parties">
<div class="parties-row">
<div class="parties-cell left">
<span class="label">Le Prestataire</span>
<strong>Association E-Cosplay</strong><br>
RNA : W022006988 — SIREN : 943121517<br>
42 rue de Saint-Quentin, 02800 Beautor, France<br>
contact@e-cosplay.fr
</th>
<th style="text-align: left; font-weight: normal;">
</div>
<div class="parties-cell">
<span class="label">Le Revendeur</span>
<strong>{{ revendeur.raisonSociale ?? revendeur.user.fullName }}</strong><br>
{% if revendeur.siret %}SIRET : {{ revendeur.siret }}<br>{% endif %}
{% if revendeur.address %}{{ revendeur.address }}{% if revendeur.zipCode %}, {{ revendeur.zipCode }}{% endif %}{% if revendeur.city %} {{ revendeur.city }}{% endif %}<br>{% endif %}
{{ revendeur.email ?? revendeur.user.email }}
</th>
</tr>
</table>
</div>
</div>
</div>
<p style="font-weight: 700;">Il a ete convenu ce qui suit :</p>
@@ -184,24 +186,24 @@
<p style="margin-top: 14px; font-weight: 700;">Fait en deux exemplaires, a Beautor, le {{ date|date('d/m/Y') }}.</p>
<table class="signatures" role="presentation">
<tr>
<td>
<div class="signatures">
<div class="signatures-row">
<div class="signatures-cell">
<span class="sig-label">Pour l'Association E-Cosplay</span>
<div class="sig-box">
<div style="font-size: 8px; color: #000;">{% verbatim %}{{Sign;type=signature;width=150;height=50;role=E-Cosplay}}{% endverbatim %}</div>
</div>
<span class="sig-date">Date et signature</span>
</td>
<td>
</div>
<div class="signatures-cell">
<span class="sig-label">Pour le Revendeur</span>
<div class="sig-box">
<div style="font-size: 8px; color: #000;">{% verbatim %}{{Sign2;type=signature;width=150;height=50;role=Revendeur}}{% endverbatim %}</div>
</div>
<span class="sig-date">Date et signature</span>
</td>
</tr>
</table>
</div>
</div>
</div>
<div class="footer">
Association E-Cosplay — RNA W022006988 — SIREN 943121517<br>

50
templates/pdf/rgpd_access.html.twig
View File

@@ -14,8 +14,9 @@
h1 { font-size: 18px; font-weight: 900; text-transform: uppercase; letter-spacing: -0.5px; font-style: italic; margin: 0 0 4px 0; line-height: 1.1; }
h2 { font-size: 11px; font-weight: 900; text-transform: uppercase; margin: 16px 0 4px; padding: 4px 10px; background: #fabf04; border: 2px solid #111827; display: inline-block; }
.subtitle { font-size: 9px; color: #666; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 16px; }
.info-grid { width: 100%; margin-bottom: 12px; }
.info-grid td { padding: 6px 10px; vertical-align: top; }
.info-grid { display: table; width: 100%; margin-bottom: 12px; }
.info-row { display: table-row; }
.info-grid .info-cell { display: table-cell; padding: 6px 10px; vertical-align: top; }
.info-label { font-size: 7px; font-weight: 900; text-transform: uppercase; letter-spacing: 1.5px; color: #999; display: block; margin-bottom: 1px; }
.info-value { font-size: 11px; font-weight: 700; color: #111827; }
.info-cell { border-left: 3px solid #4338ca; }
@@ -26,12 +27,11 @@
table.data td { padding: 3px 8px; border-bottom: 1px solid #e5e7eb; }
table.data tr:nth-child(even) td { background: #f9fafb; }
.no-data { padding: 8px; background: #f9fafb; border: 2px dashed #d1d5db; font-style: italic; color: #999; text-align: center; font-size: 9px; }
.verify-box { margin: 12px 0; border: 2px solid #111827; }
.verify-box table { width: 100%; }
.verify-box td { vertical-align: middle; }
.verify-qr { text-align: center; width: 100px; padding: 8px; border-right: 2px solid #111827; }
.verify-box { margin: 12px 0; border: 2px solid #111827; display: table; width: 100%; }
.verify-row { display: table-row; }
.verify-qr { display: table-cell; text-align: center; width: 100px; padding: 8px; border-right: 2px solid #111827; vertical-align: middle; }
.verify-qr img { width: 72px; height: 72px; }
.verify-info { padding: 8px 12px; font-size: 9px; }
.verify-info { display: table-cell; padding: 8px 12px; font-size: 9px; vertical-align: middle; }
.verify-label { font-size: 7px; font-weight: 900; text-transform: uppercase; letter-spacing: 1.5px; color: #999; display: block; margin-bottom: 1px; }
.verify-url { font-size: 8px; font-family: monospace; color: #4338ca; word-break: break-all; }
.hmac { font-size: 7px; color: #aaa; word-break: break-all; margin: 8px 0; padding: 6px 8px; background: #f9fafb; border: 1px solid #e5e7eb; font-family: monospace; }
@@ -48,14 +48,14 @@
<span class="doc-type">Droit d'acces</span>
<h1>Donnees personnelles</h1>
<div class="subtitle">RGPD &mdash; Article 15</div>
<table class="info-grid" role="presentation">
<tr>
<td class="info-cell" style="width: 25%;"><span class="info-label">Reference</span><span class="info-value">{{ attestation.reference }}</span></td>
<td class="info-cell" style="width: 25%;"><span class="info-label">Date</span><span class="info-value">{{ date|date('d/m/Y a H:i') }}</span></td>
<td class="info-cell" style="width: 25%;"><span class="info-label">Adresse IP</span><span class="info-value">{{ ip }}</span></td>
<td class="info-cell" style="width: 25%;"><span class="info-label">Sessions</span><span class="info-value">{{ data|length }}</span></td>
</tr>
</table>
<div class="info-grid">
<div class="info-row">
<div class="info-cell" style="width: 25%;"><span class="info-label">Reference</span><span class="info-value">{{ attestation.reference }}</span></div>
<div class="info-cell" style="width: 25%;"><span class="info-label">Date</span><span class="info-value">{{ date|date('d/m/Y a H:i') }}</span></div>
<div class="info-cell" style="width: 25%;"><span class="info-label">Adresse IP</span><span class="info-value">{{ ip }}</span></div>
<div class="info-cell" style="width: 25%;"><span class="info-label">Sessions</span><span class="info-value">{{ data|length }}</span></div>
</div>
</div>
{% for entry in data %}
<h2>Session #{{ loop.index }}</h2>
@@ -75,17 +75,15 @@
{% endfor %}
<div class="verify-box">
<table role="presentation">
<tr>
<td class="verify-qr"><img src="{{ qrcode }}" alt="QR Code"></td>
<td class="verify-info">
<span class="verify-label">Verifier ce document</span>
<p style="margin: 2px 0 4px; font-size: 9px; font-weight: 700;">Scannez le QR code ou consultez le lien ci-dessous.</p>
<span class="verify-label">URL</span>
<span class="verify-url">{{ verify_url }}</span>
</td>
</tr>
</table>
<div class="verify-row">
<div class="verify-qr"><img src="{{ qrcode }}" alt="QR Code"></div>
<div class="verify-info">
<span class="verify-label">Verifier ce document</span>
<p style="margin: 2px 0 4px; font-size: 9px; font-weight: 700;">Scannez le QR code ou consultez le lien ci-dessous.</p>
<span class="verify-label">URL</span>
<span class="verify-url">{{ verify_url }}</span>
</div>
</div>
</div>
<div class="hmac">HMAC-SHA256 : {{ attestation.hmac }}</div>
<div style="margin-top: 16px;">

48
templates/pdf/rgpd_deletion.html.twig
View File

@@ -13,8 +13,9 @@
.doc-type { display: inline-block; padding: 4px 12px; background: #dc2626; color: #fff; font-size: 8px; font-weight: 900; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 8px; }
h1 { font-size: 18px; font-weight: 900; text-transform: uppercase; letter-spacing: -0.5px; font-style: italic; margin: 0 0 4px 0; line-height: 1.1; }
.subtitle { font-size: 9px; color: #666; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 16px; }
.info-grid { width: 100%; margin-bottom: 16px; }
.info-grid td { padding: 6px 12px; vertical-align: top; }
.info-grid { display: table; width: 100%; margin-bottom: 16px; }
.info-row { display: table-row; }
.info-grid .info-cell { display: table-cell; padding: 6px 12px; vertical-align: top; }
.info-label { font-size: 7px; font-weight: 900; text-transform: uppercase; letter-spacing: 1.5px; color: #999; display: block; margin-bottom: 1px; }
.info-value { font-size: 11px; font-weight: 700; color: #111827; }
.info-cell { border-left: 3px solid #dc2626; }
@@ -24,12 +25,11 @@
.attestation-body p { line-height: 1.6; margin: 4px 0; font-size: 11px; }
.badge { display: inline-block; padding: 2px 8px; background: #111827; color: #fabf04; font-weight: 900; text-transform: uppercase; font-size: 7px; letter-spacing: 1px; margin-bottom: 6px; }
.warning { padding: 8px 12px; background: #fef2f2; border-left: 3px solid #dc2626; margin: 8px 0; font-size: 10px; font-weight: 700; }
.verify-box { margin: 12px 0; border: 2px solid #111827; }
.verify-box table { width: 100%; }
.verify-box td { vertical-align: middle; }
.verify-qr { text-align: center; width: 100px; padding: 8px; border-right: 2px solid #111827; }
.verify-box { margin: 12px 0; border: 2px solid #111827; display: table; width: 100%; }
.verify-row { display: table-row; }
.verify-qr { display: table-cell; text-align: center; width: 100px; padding: 8px; border-right: 2px solid #111827; vertical-align: middle; }
.verify-qr img { width: 72px; height: 72px; }
.verify-info { padding: 8px 12px; font-size: 9px; }
.verify-info { display: table-cell; padding: 8px 12px; font-size: 9px; vertical-align: middle; }
.verify-label { font-size: 7px; font-weight: 900; text-transform: uppercase; letter-spacing: 1.5px; color: #999; display: block; margin-bottom: 1px; }
.verify-url { font-size: 8px; font-family: monospace; color: #4338ca; word-break: break-all; }
.hmac { font-size: 7px; color: #aaa; word-break: break-all; margin: 8px 0; padding: 6px 8px; background: #f9fafb; border: 1px solid #e5e7eb; font-family: monospace; }
@@ -46,13 +46,13 @@
<span class="doc-type">Suppression definitive</span>
<h1>Attestation de suppression des donnees</h1>
<div class="subtitle">RGPD &mdash; Article 17</div>
<table class="info-grid" role="presentation">
<tr>
<td class="info-cell" style="width: 33%;"><span class="info-label">Reference</span><span class="info-value">{{ attestation.reference }}</span></td>
<td class="info-cell" style="width: 33%;"><span class="info-label">Date</span><span class="info-value">{{ date|date('d/m/Y a H:i') }}</span></td>
<td class="info-cell" style="width: 33%;"><span class="info-label">Adresse IP</span><span class="info-value">{{ ip }}</span></td>
</tr>
</table>
<div class="info-grid">
<div class="info-row">
<div class="info-cell" style="width: 33%;"><span class="info-label">Reference</span><span class="info-value">{{ attestation.reference }}</span></div>
<div class="info-cell" style="width: 33%;"><span class="info-label">Date</span><span class="info-value">{{ date|date('d/m/Y a H:i') }}</span></div>
<div class="info-cell" style="width: 33%;"><span class="info-label">Adresse IP</span><span class="info-value">{{ ip }}</span></div>
</div>
</div>
<div class="attestation-box">
<div class="attestation-header">Attestation de suppression</div>
<div class="attestation-body">
@@ -64,17 +64,15 @@
</div>
<div class="warning">Cette suppression est irreversible. Aucune donnee relative a cette adresse IP ne subsiste dans nos bases de donnees.</div>
<div class="verify-box">
<table role="presentation">
<tr>
<td class="verify-qr"><img src="{{ qrcode }}" alt="QR Code"></td>
<td class="verify-info">
<span class="verify-label">Verifier ce document</span>
<p style="margin: 2px 0 4px; font-size: 9px; font-weight: 700;">Scannez le QR code ou consultez le lien ci-dessous.</p>
<span class="verify-label">URL</span>
<span class="verify-url">{{ verify_url }}</span>
</td>
</tr>
</table>
<div class="verify-row">
<div class="verify-qr"><img src="{{ qrcode }}" alt="QR Code"></div>
<div class="verify-info">
<span class="verify-label">Verifier ce document</span>
<p style="margin: 2px 0 4px; font-size: 9px; font-weight: 700;">Scannez le QR code ou consultez le lien ci-dessous.</p>
<span class="verify-label">URL</span>
<span class="verify-url">{{ verify_url }}</span>
</div>
</div>
</div>
<div class="hmac">HMAC-SHA256 : {{ attestation.hmac }}</div>
<div style="margin-top: 16px;">

48
templates/pdf/rgpd_no_data.html.twig
View File

@@ -13,8 +13,9 @@
.doc-type { display: inline-block; padding: 4px 12px; background: #111827; color: #fabf04; font-size: 8px; font-weight: 900; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 8px; }
h1 { font-size: 18px; font-weight: 900; text-transform: uppercase; letter-spacing: -0.5px; font-style: italic; margin: 0 0 4px 0; line-height: 1.1; }
.subtitle { font-size: 9px; color: #666; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 16px; }
.info-grid { width: 100%; margin-bottom: 16px; }
.info-grid td { padding: 6px 12px; vertical-align: top; }
.info-grid { display: table; width: 100%; margin-bottom: 16px; }
.info-row { display: table-row; }
.info-grid .info-cell { display: table-cell; padding: 6px 12px; vertical-align: top; }
.info-label { font-size: 7px; font-weight: 900; text-transform: uppercase; letter-spacing: 1.5px; color: #999; display: block; margin-bottom: 1px; }
.info-value { font-size: 11px; font-weight: 700; color: #111827; }
.info-cell { border-left: 3px solid #fabf04; }
@@ -22,12 +23,11 @@
.attestation-header { background: #111827; color: #fff; padding: 6px 16px; font-size: 8px; font-weight: 900; text-transform: uppercase; letter-spacing: 2px; }
.attestation-body { padding: 14px 16px; background: #fffbeb; }
.attestation-body p { line-height: 1.6; margin: 4px 0; font-size: 11px; }
.verify-box { margin: 12px 0; border: 2px solid #111827; }
.verify-box table { width: 100%; }
.verify-box td { vertical-align: middle; }
.verify-qr { text-align: center; width: 100px; padding: 8px; border-right: 2px solid #111827; }
.verify-box { margin: 12px 0; border: 2px solid #111827; display: table; width: 100%; }
.verify-row { display: table-row; }
.verify-qr { display: table-cell; text-align: center; width: 100px; padding: 8px; border-right: 2px solid #111827; vertical-align: middle; }
.verify-qr img { width: 72px; height: 72px; }
.verify-info { padding: 8px 12px; font-size: 9px; }
.verify-info { display: table-cell; padding: 8px 12px; font-size: 9px; vertical-align: middle; }
.verify-label { font-size: 7px; font-weight: 900; text-transform: uppercase; letter-spacing: 1.5px; color: #999; display: block; margin-bottom: 1px; }
.verify-url { font-size: 8px; font-family: monospace; color: #4338ca; word-break: break-all; }
.content p { line-height: 1.6; margin: 4px 0; font-size: 10px; }
@@ -45,13 +45,13 @@
<span class="doc-type">Document officiel</span>
<h1>Attestation d'absence de donnees</h1>
<div class="subtitle">RGPD &mdash; Article 15</div>
<table class="info-grid" role="presentation">
<tr>
<td class="info-cell" style="width: 33%;"><span class="info-label">Reference</span><span class="info-value">{{ attestation.reference }}</span></td>
<td class="info-cell" style="width: 33%;"><span class="info-label">Date</span><span class="info-value">{{ date|date('d/m/Y a H:i') }}</span></td>
<td class="info-cell" style="width: 33%;"><span class="info-label">Adresse IP</span><span class="info-value">{{ ip }}</span></td>
</tr>
</table>
<div class="info-grid">
<div class="info-row">
<div class="info-cell" style="width: 33%;"><span class="info-label">Reference</span><span class="info-value">{{ attestation.reference }}</span></div>
<div class="info-cell" style="width: 33%;"><span class="info-label">Date</span><span class="info-value">{{ date|date('d/m/Y a H:i') }}</span></div>
<div class="info-cell" style="width: 33%;"><span class="info-label">Adresse IP</span><span class="info-value">{{ ip }}</span></div>
</div>
</div>
<div class="attestation-box">
<div class="attestation-header">Attestation</div>
<div class="attestation-body">
@@ -63,17 +63,15 @@
<p>Aucune donnee personnelle (identifiants de session, evenements de navigation, informations techniques) n'est stockee dans nos bases de donnees pour cette adresse IP.</p>
</div>
<div class="verify-box">
<table role="presentation">
<tr>
<td class="verify-qr"><img src="{{ qrcode }}" alt="QR Code"></td>
<td class="verify-info">
<span class="verify-label">Verifier ce document</span>
<p style="margin: 2px 0 4px; font-size: 9px; font-weight: 700;">Scannez le QR code ou consultez le lien ci-dessous.</p>
<span class="verify-label">URL</span>
<span class="verify-url">{{ verify_url }}</span>
</td>
</tr>
</table>
<div class="verify-row">
<div class="verify-qr"><img src="{{ qrcode }}" alt="QR Code"></div>
<div class="verify-info">
<span class="verify-label">Verifier ce document</span>
<p style="margin: 2px 0 4px; font-size: 9px; font-weight: 700;">Scannez le QR code ou consultez le lien ci-dessous.</p>
<span class="verify-label">URL</span>
<span class="verify-url">{{ verify_url }}</span>
</div>
</div>
</div>
<div class="hmac">HMAC-SHA256 : {{ attestation.hmac }}</div>
<div style="margin-top: 16px;">