Sujet
#####

Il vous est demandé de travailler sur un site internet d'un commerce de proximité qui se spécialise dans la vente de deux produits, les glaces et les gâteaux maison. Le site se compose de quelques pages (voir liste).

Format
******

3 formats de page sont demandé pour chaque page :

* un format mobile (à titre indicatif format portrait 375 par 812 px)
* un format tablette (à titre indicatif format portrait 768 par 1024 px)
* un format ordinateur (à titre indicatif format paysage 1100 par 800 px)

liste des pages et éléments
***************************

Navigation
==========

La navigation est à votre appréciation, à vous de voir au vue de l'arborescence, les éléments à y intégrer.

zone panier
-----------

La navigation doit contenir une partie panier indiquant soit que le panier est vide, soit que le panier contient des articles.

Lorsque l'on clique sur celui-ci, on doit afficher sur la page, pour chaque article :

* son nom
* son prix
* le nombre de fois où l'article est dans le panier
* un symbole permettant de supprimer l'article du panier
* un texte ou symbole permet de fermer la zone panier

La zone panier contient aussi un lien permettant de naviguer jusqu'à la page panier.

.. admonition:: check-liste

   .. raw:: html

      <input for="navigation-1" type="checkbox"></input><label for="navigation-1" style="display:inline">chaque item de ma zone panier a d'indiqué son nom</label><br>
      <input for="navigation-2" type="checkbox"></input><label for="navigation-2" style="display:inline">chaque item de ma zone panier a d'indiqué son prix</label><br>
      <input for="navigation-3" type="checkbox"></input><label for="navigation-3" style="display:inline">chaque item de ma zone panier a d'indiqué le nombre d'items commandés</label><br>
      <input for="navigation-4" type="checkbox"></input><label for="navigation-4" style="display:inline">chaque item de ma zone panier a un symbole associé permettant de supprimer l'item du panier</label><br>
      <input for="navigation-5" type="checkbox"></input><label for="navigation-5" style="display:inline">ma zone panier possède un bouton permettant d'accéder à la page panier</label><br>
      <input for="navigation-6" type="checkbox"></input><label for="navigation-6" style="display:inline">ma zone panier possède un bouton permettant de fermer la zone panier</label><br>
      <input for="navigation-6" type="checkbox"></input><label for="navigation-6" style="display:inline">ma zone panier possède une version où le panier est vide avec l'indication de cet état</label>

Mentions génériques
===================

.. note::

   Les mentions génériques doivent figurer sur toutes les pages.

.. important::

   Tous ces éléments ne sont pas forcément au même endroit !

* le logo/nom du site
* un court texte de présentation (20 à 40 mots)
* l'adresse postale du commerçant
* une mention « copyright »
* une liste de réseaux sociaux

  * mentions « réseaux sociaux »
  * instagram
  * facebook

arborescence
************

.. image:: arborescence.svg

Page d'accueil
==============

La page d'accueil affiche :

* un court message d'accroche [#accroche]_
* un texte court de présentation
* une illustration [#illustration]_
* deux blocs

  * avec la mention « nos glaces » ou « nos gâteaux »
  * avec une image
  * la mention « découvrir »

* un court texte sur la structure avec une mention « en savoir plus » renvoyant vers la page à propos.

Page produit
============

* nom du produit (1 à 5 mots)
* description courte du produit (10 à 20 mots)
* description longue du produit (peut contenir une 50aine de mots, une liste d'éléments)
* prix en euros
* catégorie (1 à 3 mots)
* image principale (1)
* images secondaires (0 ou plus)
* bouton d'ajout au panier
* zone « articles similaires » : affichage de 3 articles similaires

  * nom du produit
  * image principale
  * prix

Page catégorie
==============

* le titre de la page (la catégorie)
* une liste de produits avec chacun :

  * l'image principale du produit
  * le nom du produit
  * la description courte du produit
  * le prix du produit
  * un bouton « ajouter au panier »

Page panier
===========

* Une mention « contenu du panier »
* un tableau

  * avec comme en-têtes dans l'ordre souhaité :

    * la mention « article »
    * la mention « prix »
    * la mention « quantité »

  * avec pour chaque ligne dans l'ordre souhaité :

    * l'image principale
    * le nom du produit
    * la quantité d'items
    * le prix total des items
    * un bouton permettant de supprimer l'item du panier

* un bouton « payer »

Page à propos
=============

* le titre « à propos »
* un texte de présentation
* une illustration

Page mentions légales
=====================

* Titre de la page
* long bloc de texte mention légales avec deux niveaux de titre

-----

.. [#accroche] Une accroche est une courte phrase permettant de présenter le site de manière très résumée et, idéalement, très efficace.
.. [#illustration] Une illustration = une image, qui peut être un dessin, une photo…