252 lines
18 KiB
HTML
252 lines
18 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<title>Bilan d'évaluation - {{ assessment.title }}</title>
|
|
</head>
|
|
<body style="margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; line-height: 1.6; color: #333333; background-color: #f5f5f5;">
|
|
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color: #f5f5f5; padding: 20px 0;">
|
|
<tr>
|
|
<td align="center">
|
|
<!-- Container principal -->
|
|
<table width="600" cellpadding="0" cellspacing="0" border="0" style="max-width: 600px; background-color: #ffffff; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
|
|
|
|
<!-- Header avec gradient -->
|
|
<tr>
|
|
<td style="background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%); color: #ffffff; padding: 30px 20px; border-radius: 8px 8px 0 0;">
|
|
<h1 style="margin: 0 0 10px 0; font-size: 24px; font-weight: bold;">{{ assessment.title }}</h1>
|
|
<p style="margin: 0; font-size: 14px; opacity: 0.9;">
|
|
{{ assessment.class_name }} - Trimestre {{ assessment.trimester }}
|
|
</p>
|
|
<p style="margin: 5px 0 0 0; font-size: 13px; opacity: 0.8;">
|
|
📅 Date : {{ assessment.date }}
|
|
</p>
|
|
</td>
|
|
</tr>
|
|
|
|
<!-- Content -->
|
|
<tr>
|
|
<td style="padding: 30px 20px;">
|
|
|
|
<!-- Greeting -->
|
|
<p style="margin: 0 0 15px 0; font-size: 16px;">
|
|
Bonjour <strong>{{ student.first_name }}</strong>,
|
|
</p>
|
|
<p style="margin: 0 0 20px 0; font-size: 15px; color: #6b7280;">
|
|
Voici votre bilan pour l'évaluation <strong>{{ assessment.title }}</strong>.
|
|
</p>
|
|
|
|
<!-- Score global -->
|
|
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="margin: 20px 0 30px 0;">
|
|
<tr>
|
|
<td align="center" style="background-color: #f3f4f6; color: #1f2937; padding: 25px; border-radius: 8px; border: 2px solid #e5e7eb;">
|
|
<div style="font-size: 32px; font-weight: bold; margin-bottom: 10px; color: #1f2937;">
|
|
{{ results.total_score }}/{{ results.total_max_points }}
|
|
</div>
|
|
<!-- Barre de progression -->
|
|
<table width="80%" cellpadding="0" cellspacing="0" border="0" style="margin: 0 auto;">
|
|
<tr>
|
|
<td style="background-color: #d1d5db; border-radius: 10px; height: 12px; overflow: hidden; padding: 0;">
|
|
<table width="{{ results.percentage }}%" cellpadding="0" cellspacing="0" border="0" style="height: 12px;">
|
|
<tr>
|
|
<td style="background-color: #3b82f6; height: 12px; padding: 0;"></td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
<div style="font-size: 16px; color: #6b7280; margin-top: 8px;">
|
|
{{ results.percentage }}%
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<!-- Détail par exercice -->
|
|
<h2 style="font-size: 18px; font-weight: bold; margin: 25px 0 15px 0; color: #1f2937;">
|
|
📝 Détail par exercice
|
|
</h2>
|
|
|
|
{% for exercise in exercises %}
|
|
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-bottom: 15px; border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden;">
|
|
<tr>
|
|
<td style="background-color: #f9fafb; padding: 12px 15px; font-weight: bold; font-size: 15px; color: #1f2937;">
|
|
{{ exercise.title }}
|
|
<span style="float: right; color: #3b82f6;">
|
|
{{ "%.1f"|format(exercise.score) }}/{{ exercise.max_points }} ({{ "%.0f"|format(exercise.percentage) }}%)
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
{% for element in exercise.elements %}
|
|
<tr>
|
|
<td style="padding: 10px 15px; border-top: 1px solid #f3f4f6;">
|
|
<table width="100%" cellpadding="0" cellspacing="0" border="0">
|
|
<tr>
|
|
<td style="vertical-align: middle;">
|
|
<strong style="font-size: 14px; color: #374151;">{{ element.label }}</strong>
|
|
{% if element.skill %}
|
|
<span style="font-size: 12px; color: #6b7280;"> - {{ element.skill }}</span>
|
|
{% endif %}
|
|
{% if element.description %}
|
|
<div style="font-size: 12px; color: #9ca3af; margin-top: 3px;">{{ element.description }}</div>
|
|
{% endif %}
|
|
</td>
|
|
<td align="right" style="vertical-align: middle; white-space: nowrap;">
|
|
{% if element.grading_type == 'score' %}
|
|
<!-- Affichage étoiles pour compétences -->
|
|
<span style="font-size: 18px; color: #fbbf24;">
|
|
{% if element.raw_value %}
|
|
{% for i in range(3) %}
|
|
{% if i < element.raw_value|int %}⭐{% else %}☆{% endif %}
|
|
{% endfor %}
|
|
{% else %}
|
|
☆☆☆
|
|
{% endif %}
|
|
</span>
|
|
{% if element.score_label %}
|
|
<div style="font-size: 11px; color: #6b7280; margin-top: 3px;">{{ element.score_label }}</div>
|
|
{% endif %}
|
|
{% else %}
|
|
<!-- Affichage points pour notes -->
|
|
<strong style="font-size: 15px; color: #1f2937;">
|
|
{% if element.calculated_score is not none %}
|
|
{{ "%.1f"|format(element.calculated_score) }}/{{ element.max_points }}
|
|
{% else %}
|
|
-/{{ element.max_points }}
|
|
{% endif %}
|
|
</strong>
|
|
{% endif %}
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</table>
|
|
{% endfor %}
|
|
|
|
<!-- Résultats par compétences -->
|
|
{% if competences and competences|length > 0 %}
|
|
<h2 style="font-size: 18px; font-weight: bold; margin: 25px 0 15px 0; color: #1f2937;">
|
|
⭐ Compétences travaillées
|
|
</h2>
|
|
|
|
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-bottom: 20px;">
|
|
{% for comp in competences %}
|
|
<tr>
|
|
<td style="padding: 10px 0; border-bottom: 1px solid #e5e7eb;">
|
|
<table width="100%" cellpadding="0" cellspacing="0" border="0">
|
|
<tr>
|
|
<td colspan="2" style="font-weight: 500; font-size: 14px; color: #374151; padding-bottom: 8px;">
|
|
{{ comp.name }}
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="width: 70%; vertical-align: middle;">
|
|
<!-- Barre de progression -->
|
|
<table width="100%" cellpadding="0" cellspacing="0" border="0">
|
|
<tr>
|
|
<td style="background-color: #e5e7eb; border-radius: 8px; height: 10px; overflow: hidden; padding: 0;">
|
|
<table width="{{ comp.percentage }}%" cellpadding="0" cellspacing="0" border="0" style="height: 10px;">
|
|
<tr>
|
|
<td style="background-color: #3b82f6; height: 10px; padding: 0;"></td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
<td align="right" style="font-size: 14px; color: #6b7280; padding-left: 12px; white-space: nowrap;">
|
|
{{ "%.1f"|format(comp.score) }}/{{ comp.max_points }}
|
|
<span style="color: #3b82f6; font-weight: 500;">({{ "%.0f"|format(comp.percentage) }}%)</span>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</table>
|
|
{% endif %}
|
|
|
|
<!-- Résultats par domaines -->
|
|
{% if domains and domains|length > 0 %}
|
|
<h2 style="font-size: 18px; font-weight: bold; margin: 25px 0 15px 0; color: #1f2937;">
|
|
🏷️ Domaines travaillés
|
|
</h2>
|
|
|
|
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-bottom: 20px;">
|
|
{% for domain in domains %}
|
|
<tr>
|
|
<td style="padding: 10px 0; border-bottom: 1px solid #e5e7eb;">
|
|
<table width="100%" cellpadding="0" cellspacing="0" border="0">
|
|
<tr>
|
|
<td colspan="2" style="padding-bottom: 8px; vertical-align: middle;">
|
|
<span style="display: inline-block; width: 12px; height: 12px; border-radius: 3px; background-color: {{ domain.color }}; margin-right: 8px; vertical-align: middle;"></span>
|
|
<span style="font-weight: 500; font-size: 14px; color: #374151;">{{ domain.name }}</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="width: 70%; vertical-align: middle;">
|
|
<!-- Barre de progression -->
|
|
<table width="100%" cellpadding="0" cellspacing="0" border="0">
|
|
<tr>
|
|
<td style="background-color: #e5e7eb; border-radius: 8px; height: 10px; overflow: hidden; padding: 0;">
|
|
<table width="{{ domain.percentage }}%" cellpadding="0" cellspacing="0" border="0" style="height: 10px;">
|
|
<tr>
|
|
<td style="background-color: #3b82f6; height: 10px; padding: 0;"></td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
<td align="right" style="font-size: 14px; color: #6b7280; padding-left: 12px; white-space: nowrap;">
|
|
{{ "%.1f"|format(domain.score) }}/{{ domain.max_points }}
|
|
<span style="color: #3b82f6; font-weight: 500;">({{ "%.0f"|format(domain.percentage) }}%)</span>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</table>
|
|
{% endif %}
|
|
|
|
<!-- Message personnalisé du professeur -->
|
|
{% if custom_message %}
|
|
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="margin: 25px 0;">
|
|
<tr>
|
|
<td style="background-color: #dbeafe; padding: 15px; border-radius: 8px; border-left: 4px solid #3b82f6;">
|
|
<p style="margin: 0 0 8px 0; font-weight: bold; font-size: 14px; color: #1e40af;">
|
|
💬 Message du professeur
|
|
</p>
|
|
<p style="margin: 0; font-size: 14px; color: #1f2937; white-space: pre-wrap;">{{ custom_message }}</p>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
{% endif %}
|
|
|
|
</td>
|
|
</tr>
|
|
|
|
<!-- Footer -->
|
|
<tr>
|
|
<td style="background-color: #f9fafb; padding: 20px; border-top: 2px solid #e5e7eb; border-radius: 0 0 8px 8px;">
|
|
<p style="margin: 0; font-size: 12px; color: #6b7280; text-align: center;">
|
|
Email généré automatiquement par <strong>Notytex</strong>
|
|
</p>
|
|
<p style="margin: 5px 0 0 0; font-size: 11px; color: #9ca3af; text-align: center;">
|
|
Système de gestion scolaire
|
|
</p>
|
|
</td>
|
|
</tr>
|
|
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</body>
|
|
</html>
|