Files
notytex/templates/base.html

80 lines
4.7 KiB
HTML

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}Gestion Scolaire{% endblock %}</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
// Configuration Tailwind pour dark mode et focus
tailwind.config = {
theme: {
extend: {
colors: {
primary: {
50: '#eff6ff',
600: '#2563eb',
700: '#1d4ed8',
}
}
}
}
}
</script>
</head>
<body class="bg-gray-100 min-h-screen" role="document">
<nav class="bg-blue-600 text-white shadow-lg" role="navigation" aria-label="Navigation principale">
<div class="max-w-7xl mx-auto px-4">
<div class="flex justify-between items-center py-4">
<div class="flex items-center space-x-4">
<h1 class="text-xl font-bold">
<a href="{{ url_for('index') }}" class="hover:text-blue-200 focus:outline-none focus:ring-2 focus:ring-blue-300 focus:ring-offset-2 focus:ring-offset-blue-600 rounded-sm" aria-label="Accueil - Gestion Scolaire">Gestion Scolaire</a>
</h1>
</div>
<div class="flex space-x-6" role="menubar">
<a href="{{ url_for('index') }}" class="hover:text-blue-200 transition-colors focus:outline-none focus:ring-2 focus:ring-blue-300 focus:ring-offset-2 focus:ring-offset-blue-600 rounded-sm px-2 py-1" role="menuitem">Accueil</a>
<a href="{{ url_for('classes') }}" class="hover:text-blue-200 transition-colors focus:outline-none focus:ring-2 focus:ring-blue-300 focus:ring-offset-2 focus:ring-offset-blue-600 rounded-sm px-2 py-1" role="menuitem">Classes</a>
<a href="{{ url_for('students') }}" class="hover:text-blue-200 transition-colors focus:outline-none focus:ring-2 focus:ring-blue-300 focus:ring-offset-2 focus:ring-offset-blue-600 rounded-sm px-2 py-1" role="menuitem">Élèves</a>
<a href="{{ url_for('assessments.list') }}" class="hover:text-blue-200 transition-colors focus:outline-none focus:ring-2 focus:ring-blue-300 focus:ring-offset-2 focus:ring-offset-blue-600 rounded-sm px-2 py-1" role="menuitem">Évaluations</a>
</div>
</div>
</div>
</nav>
<main class="max-w-7xl mx-auto px-4 py-8" role="main">
<!-- Messages flash améliorés pour l'accessibilité -->
{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
<div role="alert" aria-live="polite">
{% for category, message in messages %}
<div class="mb-4 p-4 rounded-md {% if category == 'error' %}bg-red-100 text-red-700 border border-red-300{% else %}bg-green-100 text-green-700 border border-green-300{% endif %}" role="alert">
<div class="flex items-center">
{% if category == 'error' %}
<svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path>
</svg>
<span class="sr-only">Erreur:</span>
{% else %}
<svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
</svg>
<span class="sr-only">Succès:</span>
{% endif %}
{{ message }}
</div>
</div>
{% endfor %}
</div>
{% endif %}
{% endwith %}
{% block content %}{% endblock %}
</main>
<footer class="bg-gray-800 text-white mt-auto">
<div class="max-w-7xl mx-auto px-4 py-6 text-center">
<p>&copy; 2025 Gestion Scolaire - Application de gestion des évaluations</p>
</div>
</footer>
</body>
</html>