Structure du Cahier des Charges

1. Contexte et Objectifs

Public cible : Jeunes en insertion (18-25 ans), habitués aux smartphones.
Objectif principal : Permettre une révision autonome du code de la route, avec un suivi des progrès et un mode "examen blanc".
Problématique : Manque d’outils adaptés, accessibles et motivants pour ce public.

2. Fonctionnalités Clés
Fonctionnalités Indispensables




Fonctionnalité
Description
Exemple/Précision




QCM interactifs
Questions à choix multiples avec corrections détaillées (explications des réponses).
Source : Base officielle ANTS (Agence Nationale des Titres Sécurisés).


Suivi des progrès
Historique des scores, temps passé par thème, identification des points faibles.
Visualisation sous forme de graphiques ou tableaux.


Mode "examen blanc"
Simulation d’examen officiel (40 questions, 35 bonnes réponses requises, chronométré).
Respect des règles officielles (durée, notation).


Accessibilité
Interface simple, compatible smartphones, pas d’identification requise.
Pas de création de compte, accès direct.




Fonctionnalités Optionnelles (à discuter)

Multilingue : Traduction des questions en langues régionales (occitan, etc.).
Gamification : Badges ou récompenses pour motiver les utilisateurs.
Mode hors ligne : Téléchargement des QCM pour réviser sans connexion.

3. Contenu et Ressources

Source des questions : Exclusivement les bases officielles (ANTS, code de la route 2025).
Mises à jour :

Fréquence : Trimestrielle (pour suivre les changements réglementaires).
Responsable : À définir (partenaire, administrateur local).


4. Technologies et Contraintes




Élément
Détail




Hébergement
Local (sur serveur dédié ou machine en atelier).


Compatibilité
Navigateurs mobiles (Chrome, Safari) et desktop (Firefox, Edge).


Sécurité
Pas de collecte de données personnelles (RGPD).


Technologies
Framework front-end : React ou Vue.js (pour une interface dynamique).


Budget
À préciser : développement interne ou prestataire externe ?

README.md

@@ -1,10 +1,13 @@
 ---
-title: Roadmaster Rev
-emoji: 😻
-colorFrom: red
-colorTo: indigo
+title: RoadMaster Rev 🚗💨
+colorFrom: gray
+colorTo: blue
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/footer.js

@@ -0,0 +1,71 @@
+class CustomFooter extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                footer {
+                    background: #1f2937;
+                    color: white;
+                }
+                .footer-link {
+                    transition: color 0.3s ease;
+                }
+                .footer-link:hover {
+                    color: #3b82f6;
+                }
+                .social-icon {
+                    transition: all 0.3s ease;
+                }
+                .social-icon:hover {
+                    transform: translateY(-3px);
+                }
+            </style>
+            <footer class="py-12">
+                <div class="container mx-auto px-4">
+                    <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
+                        <div>
+                            <h3 class="text-lg font-semibold mb-4">RoadMaster Rev</h3>
+                            <p class="text-gray-300">L'application ultime pour réviser et réussir votre code de la route.</p>
+                        </div>
+                        <div>
+                            <h3 class="text-lg font-semibold mb-4">Navigation</h3>
+                            <ul class="space-y-2">
+                                <li><a href="index.html" class="footer-link text-gray-300">Accueil</a></li>
+                                <li><a href="quizz.html" class="footer-link text-gray-300">QCM</a></li>
+                                <li><a href="exam.html" class="footer-link text-gray-300">Examen Blanc</a></li>
+                                <li><a href="progress.html" class="footer-link text-gray-300">Progression</a></li>
+                            </ul>
+                        </div>
+                        <div>
+                            <h3 class="text-lg font-semibold mb-4">Ressources</h3>
+                            <ul class="space-y-2">
+                                <li><a href="#" class="footer-link text-gray-300">FAQ</a></li>
+                                <li><a href="#" class="footer-link text-gray-300">Mentions légales</a></li>
+                                <li><a href="#" class="footer-link text-gray-300">Confidentialité</a></li>
+                            </ul>
+                        </div>
+                        <div>
+                            <h3 class="text-lg font-semibold mb-4">Nous suivre</h3>
+                            <div class="flex space-x-4">
+                                <a href="#" class="social-icon text-gray-300 hover:text-white">
+                                    <i data-feather="facebook"></i>
+                                </a>
+                                <a href="#" class="social-icon text-gray-300 hover:text-white">
+                                    <i data-feather="twitter"></i>
+                                </a>
+                                <a href="#" class="social-icon text-gray-300 hover:text-white">
+                                    <i data-feather="instagram"></i>
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
+                        <p>&copy; 2023 RoadMaster Rev. Tous droits réservés.</p>
+                    </div>
+                </div>
+            </footer>
+        `;
+    }
+}
+
+customElements.define('custom-footer', CustomFooter);

components/navbar.js

@@ -0,0 +1,62 @@
+class CustomNavbar extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                nav {
+                    background: white;
+                    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+                }
+                .nav-container {
+                    max-width: 1200px;
+                }
+                .nav-link {
+                    transition: color 0.3s ease;
+                }
+                .nav-link:hover {
+                    color: #3b82f6;
+                }
+                .mobile-menu {
+                    transition: all 0.3s ease;
+                }
+            </style>
+            <nav class="py-4">
+                <div class="nav-container mx-auto px-4 flex justify-between items-center">
+                    <a href="index.html" class="flex items-center">
+                        <div class="bg-primary text-white p-2 rounded-lg mr-3">
+                            <i data-feather="car"></i>
+                        </div>
+                        <span class="text-xl font-bold text-gray-800">RoadMaster Rev</span>
+                    </a>
+                    
+                    <div class="hidden md:flex items-center space-x-8">
+                        <a href="index.html" class="nav-link text-gray-700 font-medium">Accueil</a>
+                        <a href="quizz.html" class="nav-link text-gray-700 font-medium">QCM</a>
+                        <a href="exam.html" class="nav-link text-gray-700 font-medium">Examen Blanc</a>
+                        <a href="progress.html" class="nav-link text-gray-700 font-medium">Progression</a>
+                    </div>
+                    
+                    <button id="mobile-menu-button" class="md:hidden text-gray-700">
+                        <i data-feather="menu"></i>
+                    </button>
+                </div>
+                
+                <!-- Mobile menu -->
+                <div id="mobile-menu" class="mobile-menu hidden md:hidden px-4 pt-2 pb-4">
+                    <a href="index.html" class="block py-2 text-gray-700">Accueil</a>
+                    <a href="quizz.html" class="block py-2 text-gray-700">QCM</a>
+                    <a href="exam.html" class="block py-2 text-gray-700">Examen Blanc</a>
+                    <a href="progress.html" class="block py-2 text-gray-700">Progression</a>
+                </div>
+            </nav>
+        `;
+
+        // Add mobile menu toggle functionality
+        this.shadowRoot.getElementById('mobile-menu-button').addEventListener('click', () => {
+            const menu = this.shadowRoot.getElementById('mobile-menu');
+            menu.classList.toggle('hidden');
+        });
+    }
+}
+
+customElements.define('custom-navbar', CustomNavbar);

index.html

@@ -1,19 +1,94 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>RoadMaster Rev - Révision Code de la Route</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        primary: '#3b82f6',
+                        secondary: '#10b981'
+                    }
+                }
+            }
+        }
+    </script>
+</head>
+<body class="bg-gray-50">
+    <custom-navbar></custom-navbar>
+    
+    <main class="container mx-auto px-4 py-8">
+        <section class="hero bg-gradient-to-r from-primary to-secondary rounded-xl p-8 text-white mb-12">
+            <div class="max-w-2xl mx-auto text-center">
+                <h1 class="text-4xl font-bold mb-4">Maîtrisez le Code de la Route</h1>
+                <p class="text-xl mb-6">La méthode simple et efficace pour réussir votre examen</p>
+                <div class="flex flex-col sm:flex-row gap-4 justify-center">
+                    <a href="quizz.html" class="bg-white text-primary px-6 py-3 rounded-lg font-medium hover:bg-gray-100 transition duration-200">Commencer les QCM</a>
+                    <a href="exam.html" class="bg-white bg-opacity-20 px-6 py-3 rounded-lg font-medium hover:bg-opacity-30 transition duration-200">Mode Examen Blanc</a>
+                </div>
+            </div>
+        </section>
+
+        <section class="features grid grid-cols-1 md:grid-cols-3 gap-8 mb-16">
+            <div class="feature-card bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition duration-200">
+                <div class="icon bg-primary bg-opacity-10 text-primary p-3 rounded-full w-12 h-12 flex items-center justify-center mb-4">
+                    <i data-feather="book"></i>
+                </div>
+                <h3 class="text-xl font-semibold mb-2">QCM Interactifs</h3>
+                <p class="text-gray-600">Répondez aux questions officielles avec corrections détaillées et explications.</p>
+            </div>
+            <div class="feature-card bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition duration-200">
+                <div class="icon bg-secondary bg-opacity-10 text-secondary p-3 rounded-full w-12 h-12 flex items-center justify-center mb-4">
+                    <i data-feather="bar-chart-2"></i>
+                </div>
+                <h3 class="text-xl font-semibold mb-2">Suivi des Progrès</h3>
+                <p class="text-gray-600">Visualisez vos scores et identifiez vos points faibles pour progresser efficacement.</p>
+            </div>
+            <div class="feature-card bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition duration-200">
+                <div class="icon bg-primary bg-opacity-10 text-primary p-3 rounded-full w-12 h-12 flex items-center justify-center mb-4">
+                    <i data-feather="clock"></i>
+                </div>
+                <h3 class="text-xl font-semibold mb-2">Examen Blanc</h3>
+                <p class="text-gray-600">Entraînez-vous en conditions réelles avec le mode examen chronométré.</p>
+            </div>
+        </section>
+
+        <section class="stats bg-white p-8 rounded-xl shadow-md mb-16">
+            <h2 class="text-2xl font-bold mb-6 text-center">Nos Chiffres</h2>
+            <div class="grid grid-cols-2 md:grid-cols-4 gap-6 text-center">
+                <div>
+                    <div class="text-4xl font-bold text-primary mb-2">500+</div>
+                    <div class="text-gray-600">Questions officielles</div>
+                </div>
+                <div>
+                    <div class="text-4xl font-bold text-secondary mb-2">95%</div>
+                    <div class="text-gray-600">Taux de réussite</div>
+                </div>
+                <div>
+                    <div class="text-4xl font-bold text-primary mb-2">10k</div>
+                    <div class="text-gray-600">Utilisateurs satisfaits</div>
+                </div>
+                <div>
+                    <div class="text-4xl font-bold text-secondary mb-2">24/7</div>
+                    <div class="text-gray-600">Accessible à tout moment</div>
+                </div>
+            </div>
+        </section>
+    </main>
+
+    <custom-footer></custom-footer>
+
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+    <script src="script.js"></script>
+    <script>feather.replace();</script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js

@@ -0,0 +1,31 @@
+// Global functions and event listeners
+document.addEventListener('DOMContentLoaded', () => {
+    // Initialize tooltips
+    const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
+    tooltipTriggerList.map(function (tooltipTriggerEl) {
+        return new bootstrap.Tooltip(tooltipTriggerEl);
+    });
+
+    // Track user progress (mock function)
+    if (localStorage.getItem('userProgress')) {
+        const progress = JSON.parse(localStorage.getItem('userProgress'));
+        console.log('User progress loaded:', progress);
+    } else {
+        localStorage.setItem('userProgress', JSON.stringify({
+            scores: [],
+            weakTopics: [],
+            lastSession: null
+        }));
+    }
+});
+
+// Shared utility functions
+function formatTime(seconds) {
+    const mins = Math.floor(seconds / 60);
+    const secs = seconds % 60;
+    return `${mins}:${secs < 10 ? '0' : ''}${secs}`;
+}
+
+function calculatePercentage(score, total) {
+    return Math.round((score / total) * 100);
+}

style.css

@@ -1,28 +1,40 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+    font-family: 'Inter', sans-serif;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
+
+.hero {
+    background-size: cover;
+    background-position: center;
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+.feature-card {
+    transition: all 0.3s ease;
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+.feature-card:hover {
+    transform: translateY(-5px);
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+.icon i {
+    width: 24px;
+    height: 24px;
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+main {
+    flex: 1;
 }
+
+/* Animation for buttons */
+.btn-animate:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
+}
+
+.btn-animate {
+    transition: all 0.3s ease;
+}