e1e98e752d
- Add isInvitation (nullable bool) to BilletOrder: null=no badge, true=invitation - PDF footer: add SIRET, email, phone of organizer - PDF: show invitation badge based on ticket.isInvitation instead of design - Rename "Sortie libre" to "Sortie - Entree illimitee" Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
360 lines
12 KiB
Twig
360 lines
12 KiB
Twig
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>{{ ticket.reference }} - {{ event.title }}</title>
|
|
<style>
|
|
{% set ac = design ? design.accentColor : '#4f46e5' %}
|
|
{% set inv_color = design ? design.invitationColor : '#d4a017' %}
|
|
{% set inv_title = design ? design.invitationTitle : 'Invitation' %}
|
|
|
|
@page { size: A4; margin: 0; }
|
|
body {
|
|
font-family: Helvetica, Arial, sans-serif;
|
|
font-size: 11px;
|
|
color: #111;
|
|
margin: 0;
|
|
padding: 0;
|
|
width: 210mm;
|
|
height: 297mm;
|
|
}
|
|
|
|
.main-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
}
|
|
.main-table td {
|
|
vertical-align: top;
|
|
}
|
|
|
|
/* ====== HEADER ====== */
|
|
.header {
|
|
background: {{ ac }};
|
|
color: #fff;
|
|
padding: 18px 30px;
|
|
}
|
|
.header-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
}
|
|
.header-table td {
|
|
vertical-align: middle;
|
|
}
|
|
.header-org {
|
|
font-size: 13px;
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
letter-spacing: 2px;
|
|
}
|
|
.header-badge {
|
|
font-size: 9px;
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
letter-spacing: 2px;
|
|
text-align: right;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
/* ====== CONTENT ====== */
|
|
.content-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
}
|
|
.content-left {
|
|
width: 62%;
|
|
padding: 24px 20px 24px 30px;
|
|
border-right: 3px solid {{ ac }};
|
|
}
|
|
.content-right {
|
|
width: 38%;
|
|
padding: 10px;
|
|
text-align: center;
|
|
background: #fafafa;
|
|
}
|
|
.content-right img {
|
|
max-width: 100%;
|
|
}
|
|
|
|
/* ====== EVENT INFO ====== */
|
|
.event-title {
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
margin: 0 0 12px 0;
|
|
line-height: 1.2;
|
|
}
|
|
.info-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin-bottom: 6px;
|
|
}
|
|
.info-table td {
|
|
padding: 3px 0;
|
|
border-bottom: 1px solid #eee;
|
|
}
|
|
.info-table tr:last-child td {
|
|
border-bottom: none;
|
|
}
|
|
.lbl {
|
|
width: 60px;
|
|
font-size: 7px;
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
color: #999;
|
|
}
|
|
.val {
|
|
font-size: 11px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* ====== SEPARATOR ====== */
|
|
.sep {
|
|
height: 3px;
|
|
background: {{ ac }};
|
|
margin: 12px 0;
|
|
}
|
|
|
|
/* ====== BILLET INFO ====== */
|
|
.billet-name {
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
margin: 0 0 2px 0;
|
|
}
|
|
.billet-price {
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
color: {{ ac }};
|
|
margin: 0 0 10px 0;
|
|
}
|
|
.meta-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin-bottom: 6px;
|
|
}
|
|
.meta-table td {
|
|
padding: 2px 6px 2px 0;
|
|
vertical-align: top;
|
|
}
|
|
.meta-lbl {
|
|
font-size: 7px;
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
color: #999;
|
|
}
|
|
.meta-val {
|
|
font-size: 10px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* ====== BADGES ====== */
|
|
.badge-exit-def {
|
|
display: inline-block;
|
|
padding: 3px 6px;
|
|
font-size: 8px;
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
background: #fee2e2;
|
|
color: #991b1b;
|
|
border: 1px solid #991b1b;
|
|
}
|
|
.badge-exit-libre {
|
|
display: inline-block;
|
|
padding: 3px 6px;
|
|
font-size: 8px;
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
background: #dcfce7;
|
|
color: #166534;
|
|
border: 1px solid #166534;
|
|
}
|
|
.badge-invitation {
|
|
display: inline-block;
|
|
padding: 3px 6px;
|
|
font-size: 8px;
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
color: #fff;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
/* ====== QR ====== */
|
|
.qr-section {
|
|
margin-top: 14px;
|
|
padding-top: 10px;
|
|
border-top: 1px solid #eee;
|
|
}
|
|
.qr-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
}
|
|
.qr-table td {
|
|
vertical-align: bottom;
|
|
}
|
|
.qr-img {
|
|
width: 130px;
|
|
height: 130px;
|
|
}
|
|
.ref-lbl {
|
|
font-size: 7px;
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
color: #bbb;
|
|
}
|
|
.ref-val {
|
|
font-size: 9px;
|
|
font-weight: bold;
|
|
font-family: 'Courier New', monospace;
|
|
color: #666;
|
|
}
|
|
|
|
/* ====== FOOTER ====== */
|
|
.footer {
|
|
background: {{ ac }};
|
|
color: #fff;
|
|
padding: 14px 30px;
|
|
}
|
|
.footer-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
}
|
|
.footer-table td {
|
|
vertical-align: middle;
|
|
}
|
|
.footer-logo img {
|
|
width: 40px;
|
|
height: 40px;
|
|
}
|
|
.footer-org {
|
|
font-size: 11px;
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
}
|
|
.footer-details {
|
|
font-size: 8px;
|
|
opacity: 0.7;
|
|
margin-top: 2px;
|
|
}
|
|
.footer-powered {
|
|
font-size: 6px;
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
opacity: 0.4;
|
|
text-align: right;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- HEADER -->
|
|
<div class="header">
|
|
<table class="header-table">
|
|
<tr>
|
|
<td>
|
|
{% if logoBase64 %}
|
|
<img src="{{ logoBase64 }}" alt="Logo" style="width: 36px; height: 36px; vertical-align: middle; margin-right: 10px;">
|
|
{% endif %}
|
|
<span class="header-org">{{ organizer.companyName ?? (organizer.firstName ~ ' ' ~ organizer.lastName) }}</span>
|
|
</td>
|
|
<td class="header-badge">Billet d'entree</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- CONTENT -->
|
|
<table class="content-table">
|
|
<tr>
|
|
<td class="content-left">
|
|
<div class="event-title">{{ event.title }}</div>
|
|
|
|
<table class="info-table">
|
|
<tr><td class="lbl">Date</td><td class="val">{{ event.startAt|date('d/m/Y') }}</td></tr>
|
|
<tr><td class="lbl">Horaires</td><td class="val">{{ event.startAt|date('H:i') }} — {{ event.endAt|date('H:i') }}</td></tr>
|
|
<tr><td class="lbl">Lieu</td><td class="val">{{ event.address }}</td></tr>
|
|
<tr><td class="lbl">Ville</td><td class="val">{{ event.zipcode }} {{ event.city }}</td></tr>
|
|
</table>
|
|
|
|
<div class="sep"></div>
|
|
|
|
<div class="billet-name">{{ ticket.billetName }}</div>
|
|
<div class="billet-price">{{ ticket.unitPriceHTDecimal|number_format(2, ',', ' ') }} € HT</div>
|
|
|
|
<table class="meta-table">
|
|
<tr>
|
|
<td><div class="meta-lbl">Categorie</div><div class="meta-val">{{ ticket.billet.category.name }}</div></td>
|
|
<td><div class="meta-lbl">Date d'achat</div><div class="meta-val">{{ order.paidAt ? order.paidAt|date('d/m/Y H:i') : order.createdAt|date('d/m/Y H:i') }}</div></td>
|
|
</tr>
|
|
<tr>
|
|
<td><div class="meta-lbl">Acheteur</div><div class="meta-val">{{ order.firstName }} {{ order.lastName }}</div></td>
|
|
<td><div class="meta-lbl">E-mail</div><div class="meta-val">{{ order.email }}</div></td>
|
|
</tr>
|
|
</table>
|
|
|
|
<div style="margin-top: 8px;">
|
|
{% if ticket.billet.definedExit %}
|
|
<span class="badge-exit-def">Sortie definitive</span>
|
|
{% else %}
|
|
<span class="badge-exit-libre">Sortie - Entree illimitee</span>
|
|
{% endif %}
|
|
{% if ticket.invitation %}
|
|
<span class="badge-invitation" style="background: {{ inv_color }};">{{ inv_title }}</span>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="qr-section">
|
|
<table class="qr-table">
|
|
<tr>
|
|
<td style="width: 140px;">
|
|
<img src="{{ qrBase64 }}" alt="QR" class="qr-img">
|
|
</td>
|
|
<td style="text-align: right;">
|
|
<div class="ref-lbl">Reference billet</div>
|
|
<div class="ref-val">{{ ticket.reference }}</div>
|
|
<br>
|
|
<div class="ref-lbl">Commande</div>
|
|
<div class="ref-val">{{ order.orderNumber }}</div>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</td>
|
|
<td class="content-right">
|
|
{% if posterBase64 %}
|
|
<img src="{{ posterBase64 }}" alt="{{ event.title }}">
|
|
{% endif %}
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<!-- FOOTER -->
|
|
<div class="footer">
|
|
<table class="footer-table">
|
|
<tr>
|
|
{% if logoBase64 %}
|
|
<td class="footer-logo" style="width: 54px; padding-right: 12px;">
|
|
<img src="{{ logoBase64 }}" alt="Logo">
|
|
</td>
|
|
{% endif %}
|
|
<td>
|
|
<div class="footer-org">{{ organizer.companyName ?? (organizer.firstName ~ ' ' ~ organizer.lastName) }}</div>
|
|
{% if organizer.siret %}
|
|
<div class="footer-details">SIRET: {{ organizer.siret }}</div>
|
|
{% endif %}
|
|
{% if organizer.address %}
|
|
<div class="footer-details">{{ organizer.address }}{% if organizer.postalCode %}, {{ organizer.postalCode }}{% endif %}{% if organizer.city %} {{ organizer.city }}{% endif %}</div>
|
|
{% endif %}
|
|
{% if organizer.email or organizer.phone %}
|
|
<div class="footer-details">{% if organizer.email %}{{ organizer.email }}{% endif %}{% if organizer.email and organizer.phone %} — {% endif %}{% if organizer.phone %}{{ organizer.phone }}{% endif %}</div>
|
|
{% endif %}
|
|
</td>
|
|
<td class="footer-powered">E-Ticket<br>by E-Cosplay</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</body>
|
|
</html>
|