# Carnet — démarrer et modifier le site Carnet est un petit site de révision en français, construit avec HTML, CSS et JavaScript. Sans configuration, il fonctionne en mode local. Une connexion Supabase permet d’ajouter de vrais comptes et de synchroniser les carnets en ligne. ## Lancer avec Docker Installe Docker Desktop, puis ouvre un terminal dans ce dossier et lance : ```bash docker compose up --build ``` Ouvre ensuite . Pour arrêter Carnet, fais `Ctrl+C` dans le terminal. Pour le relancer en arrière-plan, ajoute `-d` à la commande ; pour arrêter ce mode, lance `docker compose down`. Le conteneur sert la version statique de Carnet avec Nginx. Docker est un moyen de lancer Carnet sur ton ordinateur ou sur un serveur Docker. Netlify, lui, héberge la version web statique : il ne lance pas ce conteneur. ## Publier sur Netlify avec GitHub Le fichier `netlify.toml` indique à Netlify que le site est statique et que les fichiers à publier sont à la racine du dépôt. Pour le déploiement automatique : 1. Envoie ce dossier dans un dépôt GitHub. 2. Dans Netlify, choisis **Add new project → Import an existing project** et connecte le compte GitHub. 3. Sélectionne le dépôt Carnet et publie-le. Netlify lit les réglages de `netlify.toml` ; il n’y a pas de commande de compilation à lancer. 4. Après chaque `git push` sur la branche de production, Netlify redéploie le site. Le déploiement Netlify et le lancement Docker sont deux façons séparées de servir le même site. Pour garder les comptes et la progression synchronisés entre appareils, configure aussi Supabase comme expliqué plus bas. ## Lancer le site Pour utiliser le site en mode local, ouvre `index.html`. Pour les comptes en ligne, lance plutôt un serveur statique depuis ce dossier : ```bash python3 -m http.server 8000 ``` Puis visite `http://localhost:8000`. Le navigateur doit avoir accès à Internet pour charger la bibliothèque Supabase utilisée par la connexion. ## Héberger gratuitement avec Cloudflare Pages Le site est statique : Cloudflare Pages peut l’héberger sans étape de compilation. Les requêtes vers les fichiers statiques sont gratuites sur Pages. Le fichier `_headers` ajoute une politique de sécurité du navigateur (dont CSP, anti-iframe et permissions réduites). 1. Crée un compte Cloudflare, puis ouvre **Workers & Pages**. 2. Choisis **Create application → Pages → Direct Upload** et nomme le projet `carnet`. 3. Dépose le contenu du dossier `carnet` (ou le ZIP du projet après l’avoir décompressé) et lance le déploiement. 4. Copie l’adresse `https://…pages.dev` obtenue dans la configuration des URL de redirection Supabase. La page sera alors accessible en HTTPS. Pour que les comptes soient actifs dès la première publication, configure d’abord Supabase comme décrit ci-dessous. Le site reste consultable sans cette étape, mais les comptes en ligne ne fonctionneront pas. ## Ce que tu peux faire - Réviser avec des cartes recto-verso, un QCM, du vrai ou faux, une réponse écrite ou un mélange des formats. Les propositions du QCM et du vrai ou faux sont générées à partir des autres cartes. - Rejouer « Mes erreurs » : chaque question ratée y reste jusqu’à deux bonnes réponses d’affilée. - Passer un examen noté sur 20 (types de questions, nombre et chrono au choix), avec correction détaillée et historique des notes. - Jouer à « Associer » : relier questions et réponses le plus vite possible. - Ajouter des images aux cartes, et des diagrammes à légender (repères à nommer, format « Placer »). - Mettre en forme les cartes (gras, italique, souligné, surlignage, couleurs) et choisir la couleur, la police et la taille de chaque fiche. - Activer ou couper les bruitages et les vibrations dans « Préférences ». - Créer, modifier et supprimer des fiches, des cartes et des notes de cours. - Rechercher et filtrer les fiches par matière. - Consulter les cartes apprises, les rappels et l’historique des sessions. - Voir la progression globale et la progression par matière. Un cours correspond à une fiche et compte comme maîtrisé quand toutes ses cartes sont au niveau « bien retenue ». - Exporter ou importer les fiches en JSON, images comprises. - Créer un compte e-mail et retrouver ses fiches, notes et progression sur plusieurs appareils (après configuration de Supabase). - Utiliser des profils locaux sur cet appareil si la connexion en ligne n’est pas configurée. ## Où modifier le contenu - `app.js` contient les règles de progression et les interactions. - `styles.css` contient les couleurs, la mise en page et les règles d’affichage sur téléphone. - `index.html` contient la structure de la page et les liens vers les fichiers. Pour changer la couleur principale, modifie les variables au début de `styles.css` (par exemple `--ink`, `--paper`, `--coral`). Le calcul de la progression par matière se trouve dans `progressBySubject()` et `isCourseMastered()` dans `app.js`. Le pourcentage global est le nombre de fiches entièrement maîtrisées divisé par le nombre total de fiches. Le détail par matière affiche aussi les cartes bien retenues sur le total de cartes. ## Comptes en ligne et sauvegarde La connexion utilise Supabase : son service d’authentification gère les comptes e-mail et une table stocke le carnet de chaque compte. Les règles SQL limitent chaque compte à ses propres données. Sans configuration, Carnet reste en mode local et enregistre les données dans `localStorage`. Pour activer les comptes : 1. Crée un projet sur [Supabase](https://supabase.com/) et garde son tableau de bord ouvert. 2. Dans **SQL Editor**, copie puis exécute le contenu de `supabase-schema.sql`. Cela crée la table et les règles d’accès privées. 3. Dans les réglages du projet, copie l’URL du projet et sa clé publique (souvent nommée `anon` ou `publishable`). Dans `config.js`, colle-les dans `url` et `anonKey`. 4. Démarre Carnet avec le serveur local ci-dessus. Dans les réglages d’authentification Supabase, autorise `http://localhost:8000` comme adresse du site et de redirection. 5. Clique sur le bouton de profil dans Carnet, crée ton compte, puis confirme l’adresse e-mail si Supabase le demande. Lors de la première connexion, le carnet présent sur cet appareil est copié dans le compte. Ensuite, les modifications sont synchronisées en ligne. Utilise « Mes données » pour exporter une copie JSON de sécurité. La clé publique est prévue pour être utilisée dans le navigateur : les règles de la base protègent les carnets. **Ne mets jamais une clé `service_role` dans `config.js`**. Le fichier `cloud.js` s’occupe de la connexion et de la lecture/écriture. `supabase-schema.sql` configure le stockage privé. ## Accessibilité et raccourcis Les boutons et champs ont des libellés accessibles et les mises en page s’adaptent aux petits écrans. Pendant la révision par cartes, `Espace` retourne la carte, `→` évalue la réponse affichée, et `Échap` quitte la session.