70 lines
3.5 KiB
HTML
70 lines
3.5 KiB
HTML
{% extends "base.html" %}
|
|
{% from 'components/common/macros.html' import hero_section %}
|
|
{% from 'components/class/class_card.html' import class_card %}
|
|
|
|
{% block title %}Classes - Gestion Scolaire{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="space-y-8">
|
|
{# Hero Section avec composant réutilisable #}
|
|
{% set meta_info = [
|
|
{
|
|
'icon': '<svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20"><path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>',
|
|
'text': classes|length ~ ' classes actives'
|
|
},
|
|
{
|
|
'icon': '<svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"/></svg>',
|
|
'text': 'Année scolaire 2024-2025'
|
|
}
|
|
] %}
|
|
{% set primary_action = {
|
|
'url': '#',
|
|
'text': 'Nouvelle classe',
|
|
'icon': '<svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd"/></svg>'
|
|
} %}
|
|
{{ hero_section(
|
|
title="Mes Classes 🏫",
|
|
subtitle="Gérez et organisez toutes vos classes",
|
|
meta_info=meta_info,
|
|
primary_action=primary_action,
|
|
gradient_class="from-blue-600 to-green-600"
|
|
) }}
|
|
|
|
{% if classes %}
|
|
<!-- Grille de classes avec composants -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
{% for class in classes %}
|
|
{{ class_card(class) }}
|
|
{% endfor %}
|
|
</div>
|
|
{% else %}
|
|
<!-- État vide moderne -->
|
|
<div class="bg-white rounded-xl shadow-lg p-12 text-center">
|
|
<div class="w-24 h-24 bg-gradient-to-br from-blue-100 to-green-100 rounded-full flex items-center justify-center mx-auto mb-6">
|
|
<svg class="w-12 h-12 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
|
|
<path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
|
</svg>
|
|
</div>
|
|
|
|
<h3 class="text-xl font-bold text-gray-900 mb-2">Aucune classe créée</h3>
|
|
<p class="text-gray-600 mb-6 max-w-md mx-auto">
|
|
Commencez votre gestion scolaire en créant votre première classe.
|
|
Vous pourrez ensuite y ajouter des élèves et créer des évaluations.
|
|
</p>
|
|
|
|
<div class="space-y-4">
|
|
<button class="inline-flex items-center bg-gradient-to-r from-blue-500 to-green-500 hover:from-blue-600 hover:to-green-600 text-white px-6 py-3 rounded-xl transition-all duration-300 font-semibold shadow-lg hover:shadow-xl transform hover:scale-105">
|
|
<svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd"/>
|
|
</svg>
|
|
Créer ma première classe
|
|
</button>
|
|
|
|
<div class="text-sm text-gray-500">
|
|
<p>💡 <strong>Astuce :</strong> Une classe peut contenir plusieurs élèves et être utilisée pour de nombreuses évaluations</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
{% endblock %} |