27847dfad3
App Flask complète pour https://dynamic.alpinux.org : - 10 quiz Linux, 5 niveaux (Découverte → Expert), 50+ questions - Public : Découverte, Débutant, Intermédiaire (6 quiz) - Membres AlpID : Avancé, Expert (4 quiz — Git, Admin, Sécurité, Bash) - Navigation question par question avec avance automatique après choix - Score calculé côté serveur, enregistré en SQLite si connecté - Page profil : meilleurs scores par quiz + historique des tentatives Authentification : - OIDC via authlib + AlpID (Keycloak), SSO partagé avec Gitea/Nextcloud - Décorateur @login_required, redirection post-login sur l'URL d'origine - /auth/login, /auth/callback, /auth/logout Structure : - dynamic/app.py, db.py, quiz.py, auth_utils.py - dynamic/routes/ (public.py, auth.py, protected.py) - dynamic/templates/ (base, index, quiz/*, profil/) - dynamic/static/ (style.css thème Alpinux, quiz.js vanilla) - dynamic/data/quizzes.json (source de vérité des questions) - dynamic/.env.example Infrastructure : - scripts/dynamic.alpinux.org.vhost.conf (Apache reverse proxy) - scripts/dynamic.alpinux.org.service (systemd Gunicorn) - docs/technique/deploiement-dynamic.md (procédure complète) - mkdocs.yml : page de déploiement ajoutée à la nav Technique - .gitignore : exclut venv/ et .env Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
83 lines
2.9 KiB
HTML
83 lines
2.9 KiB
HTML
{% extends "base.html" %}
|
|
{% block title %}Accueil{% endblock %}
|
|
|
|
{% block content %}
|
|
<section class="hero">
|
|
<h1>Quiz Linux <span class="hero-sub">par Alpinux</span></h1>
|
|
<p class="hero-desc">
|
|
Testez vos connaissances sur Linux — du premier clic sur le bureau
|
|
jusqu'aux scripts Bash et la sécurité système.
|
|
</p>
|
|
<div class="hero-actions">
|
|
<a href="{{ url_for('public.quiz_list') }}" class="btn btn-primary">Voir tous les quiz</a>
|
|
{% if not user %}
|
|
<a href="{{ url_for('auth.login') }}" class="btn btn-outline">
|
|
Se connecter pour accéder aux quiz Avancé & Expert
|
|
</a>
|
|
{% endif %}
|
|
</div>
|
|
</section>
|
|
|
|
<section class="levels-section">
|
|
<h2 class="section-title">Cinq niveaux progressifs</h2>
|
|
<div class="levels-grid">
|
|
<div class="level-card level-1">
|
|
<span class="level-icon">🌱</span>
|
|
<strong>Découverte</strong>
|
|
<p>Bureau, internet, navigateur web</p>
|
|
<span class="badge public">Public</span>
|
|
</div>
|
|
<div class="level-card level-2">
|
|
<span class="level-icon">📘</span>
|
|
<strong>Débutant</strong>
|
|
<p>Fichiers, logiciels, Linux Mint</p>
|
|
<span class="badge public">Public</span>
|
|
</div>
|
|
<div class="level-card level-3">
|
|
<span class="level-icon">⚡</span>
|
|
<strong>Intermédiaire</strong>
|
|
<p>Terminal, permissions</p>
|
|
<span class="badge public">Public</span>
|
|
</div>
|
|
<div class="level-card level-4">
|
|
<span class="level-icon">🔧</span>
|
|
<strong>Avancé</strong>
|
|
<p>Git, administration système</p>
|
|
<span class="badge members">Membres</span>
|
|
</div>
|
|
<div class="level-card level-5">
|
|
<span class="level-icon">🏆</span>
|
|
<strong>Expert</strong>
|
|
<p>Sécurité, Bash scripting</p>
|
|
<span class="badge members">Membres</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="quizzes-preview">
|
|
<h2 class="section-title">Quiz disponibles</h2>
|
|
<div class="quiz-grid">
|
|
{% for quiz in quizzes[:6] %}
|
|
<a href="{{ url_for('public.quiz_intro', quiz_id=quiz.id) }}" class="quiz-card {% if quiz.members_only %}quiz-card--members{% endif %}">
|
|
<span class="quiz-icon">{{ quiz.icon }}</span>
|
|
<div class="quiz-card-body">
|
|
<h3>{{ quiz.title }}</h3>
|
|
<p>{{ quiz.description }}</p>
|
|
<div class="quiz-meta">
|
|
<span class="level-badge level-badge-{{ quiz.level_id }}">{{ quiz.level }}</span>
|
|
<span class="quiz-duration">⏱ {{ quiz.duration_min }} min</span>
|
|
{% if quiz.members_only %}
|
|
<span class="lock-badge">🔒 Membres</span>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</a>
|
|
{% endfor %}
|
|
</div>
|
|
{% if quizzes|length > 6 %}
|
|
<div style="text-align:center;margin-top:2rem">
|
|
<a href="{{ url_for('public.quiz_list') }}" class="btn btn-outline">Voir les {{ quizzes|length }} quiz</a>
|
|
</div>
|
|
{% endif %}
|
|
</section>
|
|
{% endblock %}
|