Add app getting started guide and import instructions

docs/css/styles.css

@@ -1372,4 +1372,11 @@ a:hover.back-to-top {
     font-size: 1.2rem;
     font-weight: 400;
     text-transform: none;
+}
+
+.mockup {
+    display:inline;
+    margin:1rem 1rem 1rem 0;
+    border:1px solid black;
+    border-radius:1rem;
 }
\ No newline at end of file

docs/guide/app/getting-started.md

+# Démarrage
+
+Bienvenue sur ePoc, l'application mobile d'apprentissage sur mobile proposée par Inria. Cette page vous guidera à travers les fonctionnalités principales de l'application.
+
+## Page d'accueil
+
+La page d'accueil liste toutes les ePocs proposés par Inria. Vous pouvez également importer vos propres ePocs ou ceux de la communauté en utilisant le bouton d'importation.
+
+Pour plus de détails sur l'importation d'ePocs, consultez la page de documentation [import.md](import.md).
+
+![Page d'accueil](/images/app-accueil.png){ width="300" class="mockup" }
+![Page d'accueil import](/images/app-accueil-import.png){ width="300" class="mockup" }
+
+## Page de présentation des cours
+
+Chaque cours dispose d'une page de présentation où vous pouvez retrouver :
+
+- Un teaser du cours
+- Les objectifs pédagogiques
+- Les auteurs du cours
+- Un résumé de la formation
+
+![Page de présentation](/images/app-epoc-overview.png){ width="300" class="mockup" }
+
+## Télécharger et lancer une formation
+
+Pour télécharger un ePoc et lancer la formation, suivez ces étapes :
+
+1. Sélectionnez le cours que vous souhaitez suivre.
+2. Cliquez sur le bouton de téléchargement.
+3. Une fois le téléchargement terminé, cliquez sur "Découvrir".
+
+## Menu contextuel d'un ePoc
+
+Chaque ePoc dispose d'un menu contextuel permettant un accès rapide à plusieurs fonctionnalités :
+
+- **Score** : Consultez votre progression et vos résultats.
+- **Licence** : Accédez aux informations de licence du cours.
+- **Supprimer** : Supprimez le cours de votre bibliothèque.
+- **Mettre à jour** : Mettez à jour le contenu du cours (non disponible pour les ePocs importés).
+
+![Menu contextuel](/images/app-epoc-menu.png){ width="300" class="mockup" }
+
+Nous espérons que cette introduction vous aidera à démarrer avec ePoc. Bonne formation !

docs/guide/app/import.md

+# Importer des ePocs
+
+Cette page vous guide à travers le processus d'importation d'un ePoc dans l'application. Vous pouvez importer des ePocs depuis un lien, un QR code ou un fichier local sur votre smartphone.
+
+## Importer un ePoc depuis un lien
+
+1. **Obtenir le lien** : Assurez-vous d'avoir un lien direct vers un fichier `.epoc` ou `.zip` accessible publiquement.
+2. **Importer** : Ouvrez l'application ePoc, cliquez sur le bouton "Ajouter un ePoc" et selectionner "Importer depuis un lien".
+3. **Coller le lien** : Collez le lien dans le champ prévu à cet effet.
+4. **Télécharger** : L'application téléchargera et importera automatiquement le fichier.
+5. **Profitez** : C'est fait ! Vous pouvez maintenant parcourir l'ePoc importé!
+
+## Importer un ePoc depuis un QR code
+
+1. **Obtenir le QR code** : Assurez-vous d'avoir un QR code pointant vers un fichier `.epoc` ou `.zip` accessible publiquement.
+2. **Importer** : Ouvrez l'application ePoc, cliquez sur le bouton "Ajouter un ePoc" et selectionner "Importer depuis un QR code".
+3. **Scanner le QR code** : Utilisez l'appareil photo pour scanner le code.
+4. **Télécharger** : L'application reconnaîtra le lien et téléchargera automatiquement le fichier.
+5. **Profitez** : C'est fait ! Vous pouvez maintenant parcourir l'ePoc importé!
+
+## Importer un ePoc depuis un fichier local
+
+1. **Télécharger le fichier** : Assurez-vous d'avoir le fichier `.epoc` ou `.zip` téléchargé sur votre smartphone.
+2. **Importer** : Ouvrez l'application ePoc, cliquez sur le bouton "Ajouter un ePoc" et selectionner "Importer depuis un fichier"
+3. **Sélectionner le fichier** : Naviguer dans vos fichiers locaux et sélectionner le fichier téléchargé
+4. **Profitez** : C'est fait ! Vous pouvez maintenant parcourir l'ePoc importé!
+
+## Remarques importantes
+
+- **Accessibilité publique** : Le lien ou le QR code doit pointer vers un fichier accessible publiquement. L'application ne supporte pas l'import depuis des services cloud ou serveurs nécessitant une authentification.
+- **Formats supportés** : Les formats supportés pour l'importation sont `.epoc` et `.zip`.
+
+Nous espérons que ce guide vous aidera à importer facilement vos ePocs. Si vous avez des questions ou rencontrez des problèmes, n'hésitez pas à nous contacter pour obtenir de l'aide.

mkdocs.yml

@@ -21,6 +21,10 @@ extra:
   editor_link_linux: https://github.com/inrialearninglab/epoc-editor/releases/download/${EDITOR_VERSION}-beta/epoc-editor_${EDITOR_VERSION}-beta_linux_x86_64.AppImage
 exclude_docs: |
   !.well-known
+markdown_extensions:
+  - attr_list
+  - md_in_html
+  - pymdownx.blocks.caption
 plugins:
   - awesome-pages
   - search

requirements.txt

 mkdocs
 mkdocs-material
 mkdocs-awesome-pages-plugin
-mkdocs-static-i18n
+mkdocs-static-i18n
\ No newline at end of file
+pymdown-extensions
\ No newline at end of file