Fix regression on exposition

Also optimized fonts, after discovering (when having all photos in one page) they were too heavy.

README.md

@@ -1,11 +1,17 @@
 # Ginou Project
 
-## What is it
+## Description
 
 This project is a website dedicated to the memory of my late grandmother who was an artist named Ginou, with the goal of keeping her painting legacy intact.
 
 Of course, all the content is oriented around her, but you can easily edit it and use it for your own purpose if you want. Just please perhaps change the design a little bit?
 
+## Launch
+
+The easiest way to launch the website, is by launching a Python server. You just need to go inside this folder and launch (inside PowerShell or the Terminal):
+
+`python -m http.server`
+
 ## Tools
 
 Tools used:
@@ -21,3 +27,7 @@ Fonts used:
 ### Export Excel spreadsheet to JSON
 
 The JSON file present in the repository is generated automatically from an Excel spreadsheet. See this [Stack Overflow thread](https://superuser.com/questions/1249898/saving-excel-sheet-as-json-file) for details.
+
+### Optimizing images
+
+You can optimize images to gain space without losing quality. Useful tools are [listed on this page](https://imageoptim.com/versions.html) (I personally use _imageoptim_ and _pinga_).

biographie.html

@@ -30,19 +30,20 @@
 
     <article class="main">
         <h1>Biographie</h1>
+
         <p>Ginou, née Geneviève Collignon, était une artiste-peintre qui a vu le jour un matin de mars 1936 à Mouilly, un petit village isolé dans la forêt meusienne, au fond d'une vallée accrochée aux contreforts des Côtes de Meuse.</p>
         
-        <p>Comme l'écrit Ginou dans un texte sur sa jeunesse, “je suis née un jour de mars 1936 dans un petit village de la Meuse, Mouilly, le berceau des parents de mon père.”. Elle a 4 ans quand la Seconde Guerre Mondiale éclate, elle en garde des souvenirs très précis, même 75 ans après. Après avoir passé le Certificat d'Étude avec succès, Geneviève apprend le métier de couturière de son père Eugène, tailleur installé dans le bas du village, dans un maison sur les berges du petit ruisseau qui serpente au fond de la vallée.</p>
+        <p>Comme l'écrit Ginou dans un texte sur sa jeunesse, &laquo;&#8239;je suis née un jour de mars 1936 dans un petit village de la Meuse, Mouilly, le berceau des parents de mon père&#8239;&raquo;. Elle a 4 ans quand la Seconde Guerre Mondiale éclate, elle en garde des souvenirs très précis, même 75 ans après. Après avoir passé le Certificat d'Étude avec succès, Geneviève apprend le métier de couturière de son père Eugène, tailleur installé dans le bas du village, dans un maison sur les berges du petit ruisseau qui serpente au fond de la vallée.</p>
                 
-        <p>Dans ce petit village blottit dans la forêt domeniale des Eparges, elle passe beaucoup de temps dans la nature environante, accompagnant son père quand il allait dans les bois chercher des champignons ou bien pour aller jouer ou se promener avec ses copains et copines du village. Elle se souvient&#8239;: “J'ai appris à les reconnaître, girolles, cèpes, cela me plaisait bien. J'ai toujours aimé la nature, les fleurs, les oiseaux, apercevoir une biche qui détale au détour d'un chemin”. Où bien quand elle rendait visite à ses cousines à Saint Dié dans les Vosges, elle faisait de longues promenades autour de la ville.  Cet amour de la nature se ressentira tout au long de son œuvre.</p>
+        <p>Dans ce petit village blottit dans la forêt domeniale des Eparges, elle passe beaucoup de temps dans la nature environante, accompagnant son père quand il allait dans les bois chercher des champignons ou bien pour aller jouer ou se promener avec ses copains et copines du village. Elle se souvient&#8239;: &laquo;&#8239;J'ai appris à les reconnaître, girolles, cèpes, cela me plaisait bien. J'ai toujours aimé la nature, les fleurs, les oiseaux, apercevoir une biche qui détale au détour d'un chemin&#8239;&raquo;. Où bien quand elle rendait visite à ses cousines à Saint Dié dans les Vosges, elle faisait de longues promenades autour de la ville. Cet amour de la nature se ressentira tout au long de son œuvre.</p>
 
-        <p>Comme Geneviève l'a elle même relaté dans un texte sur sa jeunesse,  “Depuis toute petite, j'aimais dessiner et colorier et puis l'institutrice nous a appris à peindre à la gouache. Elle aussi, comme mon père, encourageait mon don.” C'est ainsi que Geneviève réalise ses premieres aquarelles.</p>
+        <p>Comme Geneviève l'a elle même relaté dans un texte sur sa jeunesse, &#8239;&laquo;&#8239;depuis toute petite, j'aimais dessiner et colorier et puis l'institutrice nous a appris à peindre à la gouache. Elle aussi, comme mon père, encourageait mon don&#8239;&raquo;. C'est ainsi que Geneviève réalise ses premieres aquarelles.</p>
 
-        <p>“Et puis, un jour, j'ai rencontré une jeune femme qui peignait et qui m'a parlé de la peinture à l'huile. J'ai voulu essayer, c'est le voisin qui m'a rapporté de Metz mes premiers tubes de peinture et la palette (que j'ai toujours). J'ai aussi acheté quelques livrets traitant de la technique et je me suis lancée et j'ai progressé tout doucement. Et cette passion ne m'a jamais quitté.” Ainsi est née Ginou !</p>
+        <p>&laquo;&#8239;Et puis, un jour, j'ai rencontré une jeune femme qui peignait et qui m'a parlé de la peinture à l'huile. J'ai voulu essayer, c'est le voisin qui m'a rapporté de Metz mes premiers tubes de peinture et la palette (que j'ai toujours). J'ai aussi acheté quelques livrets traitant de la technique et je me suis lancée et j'ai progressé tout doucement. Et cette passion ne m'a jamais quittée&#8239;&raquo;. Ainsi est née Ginou !</p>
 
-        <p>Ginou peindra ainsi 383 tableaux (huile sur toile, bois et carton), tous recencés dans un tout petit carnet à spirale ou elle notait leurs caractéristiques et leur acquereurs et destinataires. Ceux-ci sont maintenant en parti disséminé aux quatre coins de la France, peut-être de l'Europe, voir du monde !</p>
+        <p>Ginou peindra ainsi 383 tableaux (huile sur toile, bois et carton), tous recencés dans un tout petit carnet à spirale ou elle notait leurs caractéristiques et leur acquereurs et destinataires. Ceux-ci sont maintenant en parti disséminé aux quatre coins de la France, peut-être de l'Europe, voir du monde&#8239;!</p>
 
-        <p>Curiosité de la vie, Ginou était en train de completer la dernière page de son petit carnet lorsque qu'elle s'est éteinte le 02 avril 2017, laissant le numéro 383 inachevé.</p>
+        <p>Curiosité de la vie, Ginou était en train de compléter la dernière page de son petit carnet lorsque qu'elle s'est éteinte le 02 avril 2017, laissant le numéro 383 inachevé.</p>
 
         <p><img src="images/genevievedugny.jpg"></p>
     </article>

divers.html

@@ -128,10 +128,10 @@
                 <canvas id="month" width="400" height="200"></canvas>
             </div>
             <div id="stat">
-                <canvas id="month2" width="400" height="200"></canvas>
+                <canvas id="year" width="400" height="200"></canvas>
             </div>
             <div id="stat">
-                <canvas id="month3" width="400" height="200"></canvas>
+                <canvas id="dimension" width="400" height="200"></canvas>
             </div>
         </div>
     </article>

explorer.html

@@ -9,6 +9,11 @@
     <link rel="shortcut icon" href="images/favicon.png">
     <link rel="stylesheet" href="styles/main.css" media="screen">
     <script src="scripts/menu.js"></script>
+    <link rel="stylesheet" href="styles/fancybox.css" media="screen">
+    <script src="plugins/jquery-3.5.1.min.js"></script>
+    <link href="plugins/jquery.fancybox.min.css" rel="stylesheet">
+    <script src="plugins/jquery.fancybox.min.js"></script>
+    <script src="scripts/explorer.js"></script>
 </head>
 <body>
     <header>
@@ -28,9 +33,181 @@
         </nav>
     </header>
 
-    <article>
+    <article class="explorer">
         <h1>Explorer</h1>
-        <p>En construction...</p>
+        <p>Cette section du site permet de générer une liste (aussi visible sous le format d'une galerie) en fonction de différents paramètres, listés ci-dessous. Il permet d'explorer l'&oelig;uvre de Ginou, y compris les tableaux dont nous ne possédons pas de photo.<br>
+        Une &#x2606; étoile vide dans la colonne photo signifie que nous n'avons pas de photo pour un tableau ; une &#x2605; étoile qu'elle est de mauvaise qualité ; deux &#x2605;&#x2605; étoiles qu'elle est acceptable ; et trois &#x2605;&#x2605;&#x2605; étoiles qu'elle est tout à fait satisfaisante.<br>
+        Le symbole &#8252;&#xFE0E; dans la colonne aide signifie que nous avons besoin d'aide pour obtenir une photo et que <a href="informations.html">vous pouvez contribuer</a>.</p>
+
+        <div class="style-container">
+            <h2 class="active">Configuration&nbsp;</h2>
+            <img class="style-select frame" src="styles/icons/frame.svg">
+            <img class="style-select list" src="styles/icons/list.svg">
+        </div>
+        <form action="">
+            <div class="container">
+                <div class="box years active">
+                    <h3>Années&nbsp;</h3>
+                    <div class="item-cont">
+                        <span><input type="checkbox" id="years" name="years" value="all">
+                        <label for="years">Toutes</label></span>
+                        <span><input type="checkbox" id="50s" name="year" value="50s">
+                        <label for="50s">1956 - 1959</label></span>
+                        <span><input type="checkbox" id="60s" name="year" value="60s">
+                        <label for="60s">1960 - 1969</label></span>
+                        <span><input type="checkbox" id="70s" name="year" value="70s">
+                        <label for="70s">1970 - 1979</label></span>
+                        <span><input type="checkbox" id="80s" name="year" value="80s">
+                        <label for="80s">1980 - 1989</label></span>
+                        <span><input type="checkbox" id="90s" name="year" value="90s">
+                        <label for="90s">1990 - 1999</label></span>
+                        <span><input type="checkbox" id="00s" name="year" value="00s">
+                        <label for="00s">2000 - 2009</label></span>
+                        <span><input type="checkbox" id="10s" name="year" value="10s">
+                        <label for="10s">2010 - 2016</label></span>
+                    </div>
+                </div>
+                <div class="box months">
+                    <h3>Mois&nbsp;</h3>
+                    <div class="item-cont">
+                        <span><input type="checkbox" id="months" name="months" value="all">
+                        <label for="months">Tous</label></span>
+                        <span><input type="checkbox" id="01" name="month" value="01">
+                        <label for="01">Janvier</label></span>
+                        <span><input type="checkbox" id="02" name="month" value="02">
+                        <label for="02">Février</label></span>
+                        <span><input type="checkbox" id="03" name="month" value="03">
+                        <label for="03">Mars</label></span>
+                        <span><input type="checkbox" id="04" name="month" value="04">
+                        <label for="04">Avril</label></span>
+                        <span><input type="checkbox" id="05" name="month" value="05">
+                        <label for="05">Mai</label></span>
+                        <span><input type="checkbox" id="06" name="month" value="06">
+                        <label for="06">Juin</label></span>
+                        <span><input type="checkbox" id="07" name="month" value="07">
+                        <label for="07">Juillet</label></span>
+                        <span><input type="checkbox" id="08" name="month" value="08">
+                        <label for="08">Août</label></span>
+                        <span><input type="checkbox" id="09" name="month" value="09">
+                        <label for="09">Septembre</label></span>
+                        <span><input type="checkbox" id="10" name="month" value="10">
+                        <label for="10">Octobre</label></span>
+                        <span><input type="checkbox" id="11" name="month" value="11">
+                        <label for="11">Novembre</label></span>
+                        <span><input type="checkbox" id="12" name="month" value="12">
+                        <label for="12">Décembre</label></span>
+                    </div>
+                </div>
+                <div class="box dimensions">
+                    <h3>Dimensions&nbsp;</h3>
+                    <div class="item-cont">
+                        <span><input type="checkbox" id="dimensions" name="dimensions" value="all">
+                        <label for="dimensions">Toutes</label></span>
+                        <span><input type="checkbox" id="18" name="dimension" value="18">
+                        <label for="18">< 20cm</label></span>
+                        <span><input type="checkbox" id="20" name="dimension" value="20">
+                        <label for="20">20cm - 29cm</label></span>
+                        <span><input type="checkbox" id="30" name="dimension" value="30">
+                        <label for="30">30cm - 39cm</label></span>
+                        <span><input type="checkbox" id="40" name="dimension" value="40">
+                        <label for="40">40cm - 49cm</label></span>
+                        <span><input type="checkbox" id="50" name="dimension" value="50">
+                        <label for="50">50cm - 59cm</label></span>
+                        <span><input type="checkbox" id="60" name="dimension" value="60">
+                        <label for="60">60cm - 69cm</label></span>
+                        <span><input type="checkbox" id="70" name="dimension" value="70">
+                        <label for="70">70cm - 79cm</label></span>
+                        <span><input type="checkbox" id="80" name="dimension" value="80">
+                        <label for="80">80cm - 89cm</label></span>
+                        <span><input type="checkbox" id="90" name="dimension" value="90">
+                        <label for="90">90cm - 99cm</label></span>
+                        <span><input type="checkbox" id="100" name="dimension" value="100">
+                        <label for="100">>= 100cm</label></span>
+                    </div>
+                </div>
+                <div class="box genres">
+                    <h3>Genres&nbsp;</h3>
+                    <div class="item-cont">
+                        <span><input type="checkbox" id="genres" name="genres" value="all">
+                        <label for="genres">Tous</label></span>
+                    </div>
+                </div>
+                <div class="box themes">
+                    <h3>Thèmes&nbsp;</h3>
+                    <div class="item-cont">
+                        <span><input type="checkbox" id="themes" name="themes" value="all">
+                        <label for="themes">Tous</label></span>
+                    </div>
+                </div>
+                <div class="box places">
+                    <h3>Lieux&nbsp;</h3>
+                    <div class="item-cont">
+                        <span><input type="checkbox" id="places" name="places" value="all">
+                        <label for="places">Tous</label></span>
+
+                        <!--<input type="checkbox" id="place1" name="place1" value="all"><select style="display:inline;"></select>-->
+                    </div>
+                </div>
+                <div class="box tags">
+                    <h3>Tags&nbsp;</h3>
+                    <div class="item-cont">
+                        <span><input type="checkbox" id="tags" name="tags" value="all">
+                        <label for="tags">Tous</label></span>
+
+                        <!--<input type="checkbox" id="tag1" name="tag1" value="all"><select style="display:inline;"></select>-->
+                    </div>
+                </div>
+                <div class="box photos">
+                    <h3>État photo&nbsp;</h3>
+                    <div class="item-cont">
+                        <span><input type="checkbox" id="photos" name="photos" value="all">
+                        <label for="photos">Tout état</label></span>
+                        <span><input type="checkbox" id="none" name="photo" value="none">
+                        <label for="none">&#x2606; aucune</label></span>
+                        <!--<span><input type="checkbox" id="exist" name="photo" value="exist">
+                        <label for="exist">Existante</label></span>-->
+                        <span><input type="checkbox" id="bad" name="photo" value="bad">
+                        <label for="bad">&#x2605; mauvaise</label></span>
+                        <span><input type="checkbox" id="ok" name="photo" value="ok">
+                        <label for="ok">&#x2605;&#x2605; acceptable</label></span>
+                        <span><input type="checkbox" id="good" name="photo" value="good">
+                        <label for="good">&#x2605;&#x2605;&#x2605; bonne</label></span>
+                    </div>
+                </div>
+                <div class="box help">
+                    <h3>Aide requise&nbsp;</h3>
+                    <div class="item-cont">
+                        <span><input type="checkbox" id="helps" name="helps" value="all">
+                        <label for="helps">Toute</label></span>
+                        <span><input type="checkbox" id="no" name="help" value="no">
+                        <label for="no">Non</label></span>
+                        <span><input type="checkbox" id="yes" name="help" value="yes">
+                        <label for="yes">&#8252;&#xFE0E;&nbsp;Oui</label></span>
+                    </div>
+                </div>
+            </div>
+            <input type="submit" value="Générer">
+        </form>
+        <p class="no-result"><strong>Aucun résultat.</strong> Veuillez réessayer avec d'autres paramètres.</p>
+        <div id="gallery"></div>
+        <table>
+            <thead>
+                <tr>
+                    <th>&#x2116;</th>
+                    <th>Titre</th>
+                    <th>Année</th>
+                    <th>Dimension</th>
+                    <th>Genre</th>
+                    <th>Thème</th>
+                    <th>Lieu</th>
+                    <th>Tags</th>
+                    <th>Photo</th>
+                    <th>Aide</th>
+                    <th>Voir</th>
+                </tr>
+            </thead>
+        </table>
+        <p class="result" style="text-align:center;"></p>
     </article>
 </body>
 </html>

exposition.html

@@ -33,68 +33,10 @@
         </nav>
     </header>
 
-    <article>
+    <article class="exposition">
         <h1>Exposition</h1>
-
         <p style="text-align:center;">Cliquez sur une image pour la voir en grand avec ses détails.</p>
-
-        <div id="gallery" class="exposition">
-            <a data-fancybox="exposition" href="photos/paintings/normal/15.jpg" data-fancybox-index="15">
-                <img src="photos/paintings/mini/15.jpg">
-            </a>
-
-            <a data-fancybox="exposition" href="photos/paintings/normal/19.jpg" data-fancybox-index="19">
-                <img src="photos/paintings/mini/19.jpg">
-            </a>
-
-            <a data-fancybox="exposition" href="photos/paintings/normal/22.jpg" data-fancybox-index="22">
-                <img src="photos/paintings/mini/22.jpg">
-            </a>
-
-            <a data-fancybox="exposition" href="photos/paintings/normal/26.jpg">
-                <img src="photos/paintings/mini/26.jpg">
-            </a>
-
-            <a data-fancybox="exposition" href="photos/paintings/normal/34.jpg">
-                <img src="photos/paintings/mini/34.jpg">
-            </a>
-
-            <a data-fancybox="exposition" href="photos/paintings/normal/42.jpg">
-                <img src="photos/paintings/mini/42.jpg">
-            </a>
-
-            <a data-fancybox="exposition" href="photos/paintings/normal/43.jpg">
-                <img src="photos/paintings/mini/43.jpg">
-            </a>
-
-            <a data-fancybox="exposition" href="photos/paintings/normal/44.jpg">
-                <img src="photos/paintings/mini/44.jpg">
-            </a>
-
-            <a data-fancybox="exposition" href="photos/paintings/normal/51.jpg">
-                <img src="photos/paintings/mini/51.jpg">
-            </a>
-
-            <a data-fancybox="exposition" href="photos/paintings/normal/55.jpg">
-                <img src="photos/paintings/mini/55.jpg">
-            </a>
-
-            <a data-fancybox="exposition" href="photos/paintings/normal/57.jpg">
-                <img src="photos/paintings/mini/57.jpg">
-            </a>
-
-            <a data-fancybox="exposition" href="photos/paintings/normal/58.jpg">
-                <img src="photos/paintings/mini/58.jpg">
-            </a>
-
-            <a data-fancybox="exposition" href="photos/paintings/normal/59.jpg">
-                <img src="photos/paintings/mini/59.jpg">
-            </a>
-
-            <a data-fancybox="exposition" href="photos/paintings/normal/64.jpg">
-                <img src="photos/paintings/mini/64.jpg">
-            </a>
-        </div>
+        <div id="gallery"></div>
     </article>
 </body>
 </html>

index.html

@@ -30,7 +30,7 @@
 
     <article class="main">
         <h1>L'art de Ginou</h1>
-        <p>Ginou, de son vrai nom Geneviève Collignon (née à Mouilly, 1936-2017), était une artiste peintre autodidacte très appréciée dans son entourage. Elle a réalisé de nombreuses œuvres, à travers la peinture à l’huile principalement, occasionnellement à l’aquarelle, mais aussi par le biais de la peinture sur soie ou bien encore dans les cahiers où elle écrivait des poèmes.</p>
+        <p>Ginou était une artiste peintre autodidacte très appréciée dans son entourage. Elle a réalisé de nombreuses œuvres, à travers la peinture à l’huile principalement, occasionnellement à l’aquarelle, mais aussi par le biais de la peinture sur soie ou bien encore dans les cahiers où elle écrivait des poèmes.</p>
 
         <p>Tout au long de sa vie, Ginou a tenu à jour un petit carnet où elle consignait ses tableaux, en leur attribuant un numéro et un titre et reportait les dimensions et leur destinataires / acheteurs / commanditaires. Dans ce petit carnet, de 1958 à 2017, sont recensés 383 tableaux. Ginou a commencé à prendre en photos certains tableaux qu’elle peignait dans les années 1980 puis plus systématiquement à partir des années 2000. Pour compléter cette base iconographique, nous avons repris en photo en haute résolution les tableaux en notre possession. Ainsi, pour le moment, nous pouvons présenter sur ce site 261<!-- rendre cette valeur dynamique en fonction de la valeur des tableaux possédant une photo --> des 383 tableaux numérotés.</p>
 

informations.html

@@ -56,7 +56,7 @@
 
         <p>Le code source est librement disponible <em>via git</em> en <a href="https://git.n700.ovh/keb/ginou">cliquant ici</a>. Cela signifie qu'il est possible d'obtenir le site en local pour son utilisation personnelle, moyennant quelques connaissances techniques.</p>
 
-        <p>Dernière mise à jour en janvier 2021.</p>
+        <p>Dernière mise à jour en février 2021.</p>
     </article>
 </body>
 </html>

painting.html

@@ -2,13 +2,15 @@
 <html lang="fr">
 <head>
     <meta charset="utf-8">
-    <title>Ginou • tableau <!-- insérer le nom et/ou le numéro --></title>
+    <title>Ginou • tableau nº</title>
     <meta name="description" content="Site dédié à la mémoire et aux peintures de Geneviève Collignon, dite Ginou.">
     <meta name="author" content="Famille Marchal">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="shortcut icon" href="images/favicon.png">
     <link rel="stylesheet" href="styles/main.css" media="screen">
     <script src="scripts/menu.js"></script>
+    <script src="plugins/jquery-3.5.1.min.js"></script>
+    <script src="scripts/painting.js"></script>
 </head>
 <body>
     <header>
@@ -31,35 +33,35 @@
     <article class="painting">
 
         <div class="container">
-            <div></div> <!-- fake div to center with a flex box -->
+            <div></div>
+            <!-- fake div to center with a flex box -->
 
-            <div>
-                <img src="photos/paintings/normal/26.jpg">
+            <div class="photo">
+                <img src="">
             </div>
 
             <div>
                 <ul class="metadata">
-                    <li><span class="title">numéro :</span><span class="content"> 42</span></li>
-                    <li><span class="title">date :</span><span class="content"> février 1974</span></li>
-                    <li><span class="title">format :</span><span class="content"> 30x39</span></li>
-                    <li><span class="title">support :</span><span class="content"> toile</span></li>
-                    <li><span class="title">thème :</span><span class="content"> Reproduction</span></li>
-                    <li><span class="title">lieu :</span><span class="content"> -</span></li>
-                    <li><span class="title">catégorie :</span><span class="content"> -</span></li>
-                    <li><span class="title">état photo :</span><span class="content"> mauvais</span></li>
-                    <li><span class="title">aide requise :</span><span class="content"> <a href="informations.html"><strong>oui (!)</strong></a></span></li>
-                    <li><span class="title">commentaire :</span><span class="content"> Reproduction de Courbet</span></li>
-                    <li><span class="content"><a href="photos/paintings/original/42.jpg">photo originale ⭧</a></span></li>
+                    <li><span class="title">numéro :</span><span class="content number">&nbsp;</span></li>
+                    <li><span class="title">date :</span><span class="content date">&nbsp;</span></li>
+                    <li><span class="title">format :</span><span class="content dimension">&nbsp;</span></li>
+                    <li><span class="title">support :</span><span class="content support">&nbsp;</span></li>
+                    <li><span class="title">genre :</span><span class="content genre">&nbsp;</span></li>
+                    <li><span class="title">thème :</span><span class="content theme">&nbsp;</span></li>
+                    <li><span class="title">lieu :</span><span class="content place">&nbsp;</span></li>
+                    <li><span class="title">état photo :</span><span class="content photo">&nbsp;</span></li>
+                    <li><span class="title">aide requise :</span><span class="content help">&nbsp;</span></li>
+                    <li><span class="title">commentaire :</span><span class="content comment"> </span></li>
+                    <li><span class="content original"><a href="photos/paintings/original/42.jpg">photo originale ⭧</a></span></li>
                 </ul>
             </div>
         </div>
 
         <div id="info">
-            <span class="title">La Truite</span><span class="year">1960</span>
-            <span class="format">Huile sur toile (55x35)</span>
-            <span class="comment">Reproduction de Courbet</span>
+            <span class="title"></span><span class="year"></span>
+            <span class="format"></span>
+            <span class="comment">&nbsp;</span>
         </div>
-
     </article>
 </body>
 </html>

photos

@@ -1 +1 @@
-Subproject commit 76435953fc3c39694d81a3c77c1f8ee93809719b
+Subproject commit a6563802c6e46310e7c54034fa13c6f4d46bbc1b

scripts/divers.js

@@ -1,6 +1,7 @@
-jQuery(document).ready(function($) {
-
-    $('[data-fancybox="divers"]').fancybox({
+jQuery(document).ready(function($)
+{
+    $('[data-fancybox="divers"]').fancybox(
+    {
         infobar: false,
         toolbar: true,
         smallBtn: false,

scripts/explorer.js

@@ -0,0 +1,450 @@
+jQuery(document).ready(function($)
+{
+    // get URL parameters
+    urlParams = new URLSearchParams(window.location.search);
+    paramYear = (urlParams.get('years') == null ? urlParams.getAll('year') : urlParams.getAll('years'));
+    paramMonth = (urlParams.get('months') == null ? urlParams.getAll('month') : urlParams.getAll('months'));
+    paramDimension = (urlParams.get('dimensions') == null ? urlParams.getAll('dimension') : urlParams.getAll('dimensions'));
+    paramGenre = (urlParams.get('genres') == null ? urlParams.getAll('genre') : urlParams.getAll('genres'));
+    paramTheme = (urlParams.get('themes') == null ? urlParams.getAll('theme') : urlParams.getAll('themes'));
+    paramPlace = (urlParams.get('places') == null ? urlParams.getAll('place') : urlParams.getAll('places'));
+    paramTag = (urlParams.get('tags') == null ? urlParams.getAll('tag') : urlParams.getAll('tags'));
+    paramPhoto = (urlParams.get('photos') == null ? urlParams.getAll('photo') : urlParams.getAll('photos'));
+    paramHelp = (urlParams.get('helps') == null ? urlParams.getAll('help') : urlParams.getAll('helps'));
+
+    $.getJSON("data.json", function(data)
+    {
+
+/**********/
+/** MENU **/
+/**********/
+
+        //var dimensions = [];
+        var genres = [];
+        var themes = [];
+        var places = [];
+        var tags = [];
+
+        function generateMenu()
+        {
+            for (i of data)
+            {
+                /*if (dimensions.indexOf(i.dimension) === -1 && i.dimension != "" && i.dimension != "—")
+                    dimensions.push(i.dimension);*/
+                if (genres.indexOf(i.genre) === -1 && i.genre != "" && i.genre != "—")
+                    genres.push(i.genre);
+                if (themes.indexOf(i.theme) === -1 && i.theme != "" && i.theme != "—")
+                    themes.push(i.theme);
+                if (places.indexOf(i.place) === -1 && i.place != "" && i.place != "—")
+                    places.push(i.place);
+                if (tags.indexOf(i.tags) === -1 && i.tags != "" && i.tags != "—")
+                {
+                    splitTags = i.tags.split(", ");
+                    for (splitTag of splitTags) {
+                        if (tags.indexOf(splitTag) === -1)
+                        {
+                            tags.push(splitTag);
+                        }
+                    }
+                }
+            }
+
+            //dimensions.sort();
+            genres.sort();
+            themes.sort();
+            places.sort();
+            tags.sort();
+
+            /*for (dimension of dimensions)
+            {
+                html = '<span><input type="checkbox" id="' + dimension + '" name="dimension" value="' + dimension + '"></input>\n';
+                html += '<label for="' + dimension + '">' + dimension + '</label></span>';
+                $(".box.dimensions .item-cont").append(html);
+            }*/
+            for (genre of genres)
+            {
+                html = '<span><input type="checkbox" id="' + genre + '" name="genre" value="' + genre + '"></input>\n';
+                html += '<label for="' + genre + '">' + genre + '</label></span>';
+                $(".box.genres .item-cont").append(html);
+            }
+            for (theme of themes)
+            {
+                html = '<span><input type="checkbox" id="' + theme + '" name="theme" value="' + theme + '"></input>\n';
+                html += '<label for="' + theme + '">' + theme + '</label></span>';
+                $(".box.themes .item-cont").append(html);
+            }
+            //$(".box.places select").append('<option value="none">Aucun</option');
+            for (place of places)
+            {
+                html = '<span><input type="checkbox" id="' + place + '" name="place" value="' + place + '"></input>\n';
+                html += '<label for="'+place+'">' + place + '</label></span>';
+                $(".box.places .item-cont").append(html);
+
+                //$(".box.places select").append('<option value="' + place + '">' + place + '</option');
+            }
+            //$(".box.tags select").append('<option value="none">Aucun</option');
+            for (tag of tags)
+            {
+                html = '<span><input type="checkbox" id="' + tag + '" name="tag" value="' + tag + '"></input>\n';
+                html += '<label for="'+tag+'">' + tag + '</label></span>';
+                $(".box.tags .item-cont").append(html);
+
+                //$(".box.tags select").append('<option value="' + tag + '">' + tag + '</option');
+            }
+
+            // populate checkboxes depending on URL
+            function checkBoxSelector(names, name, urlParam)
+            {
+                if (urlParam == "all")
+                {
+                    $('input[name="'+names+'"]').prop("checked", true);
+                    $('input[name="'+name+'"]').prop("disabled", true);
+                    $('input[name="'+name+'"]').prop("checked", true);
+                }
+                else
+                {
+                    for (a of urlParam)
+                    {
+                        $('input[id="'+a+'"]').prop("checked", true);
+                    }
+                }
+            }
+
+            checkBoxSelector("years", "year", paramYear)
+            checkBoxSelector("months", "month", paramMonth);
+            checkBoxSelector("dimensions", "dimension", paramDimension);
+            checkBoxSelector("genres", "genre", paramGenre);
+            checkBoxSelector("themes", "theme", paramTheme);
+            checkBoxSelector("places", "place", paramPlace);
+            checkBoxSelector("tags", "tag", paramTag);
+            checkBoxSelector("photos", "photo", paramPhoto);
+            checkBoxSelector("helps", "help", paramHelp);
+        }
+
+        // if "all" is selected, check all other options and disable them
+        function AllCheckBoxSelector(names, name)
+        {
+            $('input[id="' + names + '"]').click(function()
+            {
+                if ($(this).prop("checked") == true)
+                {
+                    $('input[name="' + name + '"]').prop("checked", true);
+                    $('input[name="' + name + '"]').prop("disabled", true);
+                }
+                else if ($(this).prop("checked") == false)
+                {
+                    $('input[name="' + name + '"]').prop("checked", false);
+                    $('input[name="' + name + '"]').prop("disabled", false);
+                }
+            });
+        }
+
+        $("input").prop("checked", false); // by default, uncheck all options
+
+        AllCheckBoxSelector("years", "year");
+        AllCheckBoxSelector("months", "month");
+        AllCheckBoxSelector("dimensions", "dimension");
+        AllCheckBoxSelector("genres", "genre");
+        AllCheckBoxSelector("themes", "theme");
+        AllCheckBoxSelector("places", "place");
+        AllCheckBoxSelector("tags", "tag");
+        AllCheckBoxSelector("photos", "photo");
+        AllCheckBoxSelector("helps", "help");
+        
+        // menu configurer show / hide
+        $("article.explorer h2").click(function()
+        {
+            if ($(this).hasClass("active"))
+            {
+                $(this).removeClass("active");
+                $("form").slideUp(200);
+            }
+            else
+            {
+                $(this).addClass("active");
+                $("form").slideDown(200);
+            }
+        });
+
+        // menu configurer child on mobile show/hide
+        if ($(window).width() <= 600)
+        {
+            $("article.explorer .box h3").click(function()
+            {
+                if ($(this).parent().hasClass("active"))
+                {
+                    $(this).parent().removeClass("active");
+                    $(this).parent().children(".item-cont").slideUp(200);
+                }
+                else
+                {
+                    $(this).parent().addClass("active");
+                    $(this).parent().children(".item-cont").slideDown(200);
+                }
+            });
+        }
+
+
+/*********************/
+/** TABLE & GALLERY **/
+/*********************/
+
+            function checkYear(year)
+            {
+                if (paramYear == "all")                                         return true;
+                if (paramYear.includes("50s") && year >= 1950 && year <= 1959)  return true;
+                if (paramYear.includes("60s") && year >= 1960 && year <= 1969)  return true;
+                if (paramYear.includes("70s") && year >= 1970 && year <= 1979)  return true;
+                if (paramYear.includes("80s") && year >= 1980 && year <= 1989)  return true;
+                if (paramYear.includes("90s") && year >= 1990 && year <= 1999)  return true;
+                if (paramYear.includes("00s") && year >= 2000 && year <= 2009)  return true;
+                if (paramYear.includes("10s") && year >= 2010 && year <= 2020)  return true;
+                return false;
+            }
+
+            function checkMonth(month)
+            {
+                if (paramMonth == "all") return true;
+                if (paramMonth.includes("01") && month == "Janvier")    return true;
+                if (paramMonth.includes("02") && month == "Février")    return true;
+                if (paramMonth.includes("03") && month == "Mars")       return true;
+                if (paramMonth.includes("04") && month == "Avril")      return true;
+                if (paramMonth.includes("05") && month == "Mai")        return true;
+                if (paramMonth.includes("06") && month == "Juin")       return true;
+                if (paramMonth.includes("07") && month == "Juillet")    return true;
+                if (paramMonth.includes("08") && month == "Août")       return true;
+                if (paramMonth.includes("09") && month == "Septembre")  return true;
+                if (paramMonth.includes("10") && month == "Octobre")    return true;
+                if (paramMonth.includes("11") && month == "Novembre")   return true;
+                if (paramMonth.includes("12") && month == "Décembre")   return true;
+                return false;
+            }
+
+            function checkDimension(dimension)
+            {
+                if (paramDimension == "all")                                                                             return true;
+                if (paramDimension.includes("18") && dimension.split("x")[0] >= 18 && dimension.split("x")[0] <= 19)     return true;
+                if (paramDimension.includes("20") && dimension.split("x")[0] >= 20 && dimension.split("x")[0] <= 29)     return true;
+                if (paramDimension.includes("30") && dimension.split("x")[0] >= 30 && dimension.split("x")[0] <= 39)     return true;
+                if (paramDimension.includes("40") && dimension.split("x")[0] >= 40 && dimension.split("x")[0] <= 49)     return true;
+                if (paramDimension.includes("50") && dimension.split("x")[0] >= 50 && dimension.split("x")[0] <= 59)     return true;
+                if (paramDimension.includes("60") && dimension.split("x")[0] >= 60 && dimension.split("x")[0] <= 69)     return true;
+                if (paramDimension.includes("70") && dimension.split("x")[0] >= 70 && dimension.split("x")[0] <= 79)     return true;
+                if (paramDimension.includes("80") && dimension.split("x")[0] >= 80 && dimension.split("x")[0] <= 89)     return true;
+                if (paramDimension.includes("90") && dimension.split("x")[0] >= 90 && dimension.split("x")[0] <= 99)     return true;
+                if (paramDimension.includes("100") && dimension.split("x")[0] >= 100 && dimension.split("x")[0] <= 109)  return true;
+                return false;
+            }
+
+            function checkGenre(genre)
+            {
+                if (paramGenre == "all")
+                    return true;
+                if (paramGenre.includes(genre))
+                    return true;
+                return false;
+            }
+
+            function checkTheme(theme)
+            {
+                if (paramTheme == "all")
+                    return true;
+                if (paramTheme.includes(theme))
+                    return true;
+                return false;
+            }
+
+            function checkPlace(place)
+            {
+                if (paramPlace == "all")
+                    return true;
+                if (paramPlace.includes(place))
+                    return true;
+                return false;
+            }
+
+            function checkTag(tag)
+            {
+                if (paramTag == "all")
+                    return true;
+                splitTag = tag.split(", ");
+
+                for (t of splitTag)
+                {
+                    if (paramTag.includes(t))
+                        return true;
+                }
+                return false;
+            }
+
+            function checkPhoto(photo)
+            {
+                if (paramPhoto == "all") return true;
+                if (paramPhoto.includes("none") && photo == "none") return true;
+                if (paramPhoto.includes("bad") && photo == "bad")   return true;
+                if (paramPhoto.includes("ok") && photo == "ok")     return true;
+                if (paramPhoto.includes("good") && photo == "good") return true;
+                return false;
+            }
+
+            function checkHelp(help)
+            {
+                if (paramHelp == "all") return true;
+                if (paramHelp.includes("no") && help == "no")   return true;
+                if (paramHelp.includes("yes") && help == "yes") return true;
+                return false;
+            }
+
+        function generateTable()
+        {
+            hasResult = false;
+            numberOfItem = 0;
+
+            for (i of data)
+            {
+                if (urlParams.toString() === "") // no parameter in URL
+                    res = false;
+                else
+                    res = true;
+
+                // check URL parameters and compute result
+                if (paramYear != "")        res &&= checkYear(i.year);
+                if (paramMonth != "")       res &&= checkMonth(i.month);
+                if (paramDimension != "")   res &&= checkDimension(i.dimension);
+                if (paramGenre != "")       res &&= checkGenre(i.genre);
+                if (paramTheme != "")       res &&= checkTheme(i.theme);
+                if (paramPlace != "")       res &&= checkPlace(i.place);
+                if (paramTag != "")         res &&= checkTag(i.tags);
+                if (paramPhoto != "")       res &&= checkPhoto(i.photo);
+                if (paramHelp != "")        res &&= checkHelp(i.help);
+
+                if (!res)
+                    continue;
+
+                hasResult = true;
+                numberOfItem++;
+
+                // table
+                $("table").css("display", "block");
+
+                result = "<tr>";
+                result += "<td>" + i.number + "</td>";
+                result += "<td>" + i.title + "</td>";
+                result += "<td>" + (i.month != "—" ? i.month + "&nbsp;" : "") + i.year + "</td>";
+                result += "<td>" + i.dimension + "</td>";
+                result += "<td>" + i.genre + "</td>";
+                result += "<td>" + i.theme + "</td>";
+                result += "<td>" + i.place + "</td>";
+                result += "<td>" + i.tags + "</td>";
+
+                if (i.photo == "good")
+                    result += '<td class="photo">&#x2605;&#x2605;&#x2605;</td>';
+                else if (i.photo == "ok")
+                    result += '<td class="photo">&#x2605;&#x2605;</td>';
+                else if (i.photo == "bad")
+                    result += '<td class="photo">&#x2605;</td>';
+                else if (i.photo == "none")
+                    result += '<td class="photo">&#x2606;</td>';
+
+                if (i.help == "yes")
+                    result += '<td class="help">&#8252;&#xFE0E;</td>'
+                else
+                    result += '<td>&nbsp;</td>'
+
+                result += '<td><a href="painting.html?number=' + i.number + '"><img src="styles/icons/eye.svg"></a></td>';
+                result += "</tr>";
+
+                $("table").append(result);
+
+                // gallery
+                if (i.photo == "none")
+                {
+                    paintingHtml = '<a data-fancybox="exposition" href="images/unknown.jpg" data-fancybox-index="' + i.number + '">'
+                    paintingHtml += '<img src="images/unknown.jpg"></a>'
+                }
+                else
+                {
+                    paintingHtml = '<a data-fancybox="exposition" href="photos/paintings/normal/' + i.number + '.jpg" data-fancybox-index="' + i.number + '">'
+                    paintingHtml += '<img src="photos/paintings/mini/' + i.number + '.jpg"></a>'
+                }
+                $("#gallery").append(paintingHtml);
+            }
+            $(".explorer .result").append("La recherche donne un résultat de <strong>" + numberOfItem + " éléments</strong>.");
+            return hasResult;
+        }
+
+        $("#gallery").hide();
+        $(".style-select").hide();
+
+        generateMenu();
+        var res = generateTable();
+
+        if (res) // display table or no result depending of computed result
+        {
+            $(".style-select").show();
+            $("article.explorer h2").removeClass("active")
+            $("form").slideUp(200);
+            $("article.explorer p.result").css("display", "block");
+        }
+        else
+        {
+            $("article.explorer p.no-result").css("display", "block");
+            $("article.explorer p.result").css("display", "none");
+        }
+
+        // on mobile, show only the first item slided down
+        if ($(window).width() <= 600)
+        {
+            $("article.explorer .container .box").each(function()
+            {
+                if (!$(this).hasClass('active'))
+                {
+                    $(this).children(".item-cont").slideUp(200);
+                }
+            });
+        }
+
+        // change display: gallery/table
+        $(".style-select.frame").click(function()
+        {
+            $("table").hide();
+            $("#gallery").show();
+        })
+        $(".style-select.list").click(function()
+        {
+            $("#gallery").hide();
+            $("table").show();
+        })
+
+
+        // fancybox configuration
+        $('[data-fancybox="exposition"]').fancybox(
+        {
+            infobar: false,
+            toolbar: true,
+            smallBtn: false,
+            buttons: ["arrowLeft", "arrowRight", "close"],
+            arrows: false,
+            transitionEffect: "fade",
+            baseClass: 'fancybox-custom-layout',
+            mobile: {
+                preventCaptionOverlap: true,
+            },
+
+            caption: function(instance, item)
+            {
+                var idx = item.opts.fancyboxIndex - 1; // painting number
+                if (item.opts.fancyboxIndex >= 1000)
+                    idx = item.opts.fancyboxIndex - 1000 + 383 - 1; // inédit: index starts at 1000 // 383: total number of paintings except inédit
+                return '\
+                <div id="info">\
+                    <span class="info"><a href="painting.html?number=' + data[idx].number + '">&#8505;&#xFE0E;</span></a></span>\
+                    <span class="title">' + data[idx].title + '</span><span class="year">' + (data[idx].month != '—' ? data[idx].month + '&nbsp;' : '') + data[idx].year + '</span>\
+                    <span class="format">' + data[idx].paint + ' sur ' + data[idx].support + ' (' + data[idx].dimension + ')</span>\
+                    <span class="comment">' + data[idx].comment + '</span>\
+                </div>\
+                ';
+            }
+        });
+    });
+});

scripts/exposition.js

@@ -1,6 +1,19 @@
-jQuery(document).ready(function($) {
+jQuery(document).ready(function($)
+{
+    $.getJSON("data.json", function(data)
+    {
+        for (i of data)
+        {
+            if (i.photo == "ok" || i.photo == "good")
+            {
+                paintingHtml = '<a data-fancybox="exposition" href="photos/paintings/normal/' + i.number + '.jpg" data-fancybox-index="' + i.number + '">'
+                paintingHtml += '<img src="photos/paintings/mini/' + i.number + '.jpg"></a>';
+                $("#gallery").append(paintingHtml);
+            }
+        }
 
-    $('[data-fancybox="exposition"]').fancybox({
+        $('[data-fancybox="exposition"]').fancybox(
+        {
             infobar: false,
             toolbar: true,
             smallBtn: false,
@@ -8,20 +21,25 @@ jQuery(document).ready(function($) {
             arrows: false,
             transitionEffect: "fade",
             baseClass: 'fancybox-custom-layout',
+            mobile: {
+                preventCaptionOverlap: true,
+            },
 
-        caption : function( instance, item ) {
-            // index put inside, we can get the number: `item.opts.fancyboxIndex`
-            // and thus what we what inside the caption!
+            caption: function(instance, item)
+            {
+                var idx = item.opts.fancyboxIndex - 1; // painting number
+                if (item.opts.fancyboxIndex >= 1000)
+                    idx = item.opts.fancyboxIndex - 1000 + 383 - 1; // inédit: index starts at 1000 // 383: total number of paintings except inédit
 
-            // TODO read json to input good captions info
                 return '\
                 <div id="info">\
-                <span class="info"><a href="painting.html?number=26">&#8505;&#xFE0E;</span></a></span>\
-                <span class="title">La Truite</span><span class="year">1960</span>\
-                <span class="format">Huile sur toile (55x35)</span>\
-                <span class="comment">Reproduction de Courbet</span>\
+                    <span class="info"><a href="painting.html?number=' + data[idx].number + '">&#8505;&#xFE0E;</span></a></span>\
+                    <span class="title">' + data[idx].title + '</span><span class="year">' + (data[idx].month != '—' ? data[idx].month + '&nbsp;' : '') + data[idx].year + '</span>\
+                    <span class="format">' + data[idx].paint + ' sur ' + data[idx].support.toLowerCase() + ' (' + data[idx].dimension + ')</span>\
+                    <span class="comment">' + data[idx].comment + '</span>\
                 </div>\
                 ';
             }
         });
     });
+});

scripts/mail.js

@@ -1,7 +1,8 @@
-jQuery(document).ready(function($) {
-
+jQuery(document).ready(function($)
+{
     // a n t i  s p a m (hopefully)
-    $('a.mail').on('click', function() {
+    $('a.mail').on('click', function()
+    {
         var href = $(this).attr('href');
         var a1 = "hoo";
         var a2 = "den" ;

scripts/menu.js

@@ -1,7 +1,6 @@
-function mobilemenu() {
-
+function mobilemenu()
+{
     var navmenu = document.getElementsByTagName("nav");
-
     if (navmenu[0].classList.contains("active"))
         navmenu[0].classList.remove("active");
     else

scripts/painting.js

@@ -0,0 +1,59 @@
+jQuery(document).ready(function($)
+{
+    const urlParams = new URLSearchParams(window.location.search);
+    const pageId = urlParams.get('number');
+    i = pageId - 1; // index is 0
+
+    $.getJSON("data.json", function(data)
+    {
+        // page title
+        $("head title").append(data[i].number);
+
+        // photo
+        if (data[i].photo != "none")
+            $(".photo img").attr("src", "photos/paintings/normal/" + data[i].number + ".jpg");
+        else
+        $(".photo img").attr("src", "images/unknown.jpg");
+
+        // metadata
+        $(".metadata .content.number").append(data[i].number);
+        if (data[i].month != "—")
+            $(".metadata .content.date").append(data[i].month + " " + data[i].year);
+        else
+            $(".metadata .content.date").append(data[i].year);
+        $(".metadata .content.dimension").append(data[i].dimension);
+        $(".metadata .content.support").append(data[i].support);
+        $(".metadata .content.genre").append(data[i].genre);
+        $(".metadata .content.theme").append(data[i].theme);
+        $(".metadata .content.place").append(data[i].place);
+
+        if (data[i].photo == "none") photoState = "aucune";
+        if (data[i].photo == "bad") photoState = "mauvais";
+        if (data[i].photo == "ok") photoState = "acceptable";
+        if (data[i].photo == "good") photoState = "bon";
+        $(".metadata .content.photo").append(photoState);
+
+        if (data[i].help == "yes")
+            $(".metadata .content.help").append('<a href="informations.html"><strong>oui (!)</strong></a>');
+        else
+            $(".metadata .content.help").append("non");
+
+        $(".metadata .content.comment").append(data[i].comment);
+
+        if (data[i].photo != "none")
+            $(".metadata .content.original a").attr("href", "photos/paintings/original/" + data[i].number + ".jpg");
+        else
+            $(".metadata .content.original").parent().css("display", "none");
+
+        // cartel
+        $("#info .title").append(data[i].title);
+        if (data[i].month != "—")
+            $("#info .year").append(data[i].month + " " + data[i].year);
+        else
+            $("#info .year").append(data[i].year);
+        format = data[i].paint + " sur " + data[i].support.toLowerCase();
+        format += " (" + data[i].dimension + ")";
+        $("#info .format").append(format);
+        $("#info .comment").prepend(data[i].comment);
+    });
+});

scripts/stats.js

@@ -1,5 +1,5 @@
-jQuery(document).ready(function($) {
-
+jQuery(document).ready(function($)
+{
     var canvasMonth = document.getElementById("month").getContext('2d');
     var chartMonth = new Chart(canvasMonth, {
         type: 'bar',
@@ -7,7 +7,7 @@ jQuery(document).ready(function($) {
             labels: ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"],
             datasets: [{
                 label: 'nombre de tableaux',
-                data: [13, 30, 40, 34, 50, 33, 27, 23, 18, 24, 35, 19],
+                data: [11, 30, 40, 34, 50, 33, 27, 24, 17, 26, 37, 19],
                 backgroundColor: '#2589BD',
                 borderColor: '#187795',
                 borderWidth: 1
@@ -38,14 +38,14 @@ jQuery(document).ready(function($) {
         }
     });
 
-    var canvasMonth2 = document.getElementById("month2").getContext('2d');
-    var chartMonth2 = new Chart(canvasMonth2, {
+    var canvasYear = document.getElementById("year").getContext('2d');
+    var chartYear = new Chart(canvasYear, {
         type: 'bar',
         data: {
-            labels: ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"],
+            labels: ["1956 - 1959", "1960 - 1969", "1970 - 1979", "1980 - 1989", "1990 - 1999", "2000 - 2009", "2010 - 2016"],
             datasets: [{
                 label: 'nombre de tableaux',
-                data: [13, 30, 40, 34, 50, 33, 27, 23, 18, 24, 35, 19],
+                data: [24, 16, 7, 57, 117, 112, 52],
                 backgroundColor: '#2589BD',
                 borderColor: '#187795',
                 borderWidth: 1
@@ -76,14 +76,14 @@ jQuery(document).ready(function($) {
         }
     });
 
-    var canvasMonth3 = document.getElementById("month3").getContext('2d');
-    var chartMonth3 = new Chart(canvasMonth3, {
+    var canvasDimension = document.getElementById("dimension").getContext('2d');
+    var chartDimension = new Chart(canvasDimension, {
         type: 'bar',
         data: {
-            labels: ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"],
+            labels: ["< 20cm", "20cm - 29cm", "30cm - 39cm", "40cm - 49cm", "50cm - 59cm", "60cm - 69cm", "70cm - 79cm", "80cm - 89cm", "90cm - 99cm", ">= 100cm"],
             datasets: [{
                 label: 'nombre de tableaux',
-                data: [13, 30, 40, 34, 50, 33, 27, 23, 18, 24, 35, 19],
+                data: [1, 60, 54, 97, 50, 54, 11, 2, 1, 2],
                 backgroundColor: '#2589BD',
                 borderColor: '#187795',
                 borderWidth: 1

styles/fancybox.css

@@ -21,7 +21,6 @@
     top:0;
 }
 
-
 .fancybox-custom-layout.fancybox-can-zoomIn .fancybox-show-caption,
 .fancybox-custom-layout.fancybox-can-zoomIn .fancybox-caption,
 .fancybox-custom-layout.fancybox-can-zoomIn .fancybox-toolbar {
@@ -35,7 +34,6 @@
     opacity:0;
 }
 
-
 .fancybox-custom-layout .fancybox-button {
     color:#38686A;
     background:#f6f6f6;
@@ -53,7 +51,6 @@
     margin:0;
     margin-right:-3rem;
     padding:0rem;
-
 }
 
 .fancybox-custom-layout .fancybox-close-small:hover {
@@ -78,3 +75,7 @@
 .fancybox-custom-layout .fancybox-caption #info a:hover {
     color:#2589BD;
 }
+
+.fancybox-custom-layout.fancybox-container .fancybox-caption {
+    box-sizing:initial;
+}

styles/icons/eye.svg

@@ -0,0 +1,9 @@
+<svg fill-opacity="1" xmlns:xlink="http://www.w3.org/1999/xlink" color-rendering="auto" color-interpolation="auto" text-rendering="auto" stroke="black" stroke-linecap="square" stroke-miterlimit="10" shape-rendering="auto" stroke-opacity="1" fill="#38686A" stroke-dasharray="none" font-weight="normal" stroke-width="1" xmlns="http://www.w3.org/2000/svg" font-family="'Dialog'" font-style="normal" stroke-linejoin="miter" font-size="12" stroke-dashoffset="0" image-rendering="auto" viewBox="4.05 194.32 279.9 155.17">
+  <!--Unicode Character 'EYE' (U+1F441)-->
+  <defs id="genericDefs"/>
+  <g>
+    <g>
+      <path d="M283.9219 271.9688 Q262.8281 310.0781 225.1406 330.1875 Q189.1406 349.4531 144.1406 349.4531 Q99 349.4531 63.1406 330.1875 Q25.4531 310.0781 4.0781 271.9688 Q25.5938 233.7188 63 213.6094 Q98.8594 194.3438 144.1406 194.3438 Q189.2812 194.3438 225.1406 213.6094 Q262.8281 233.7188 283.9219 271.9688 ZM257.3438 271.9688 Q229.7812 223.5938 170.4375 213.75 Q188.1562 221.3438 198.7031 237.0312 Q209.25 252.7031 209.25 271.9688 Q209.25 290.8125 198.8438 306.5625 Q188.4375 322.3125 171.1406 330.0469 Q230.0625 320.0625 257.3438 271.9688 ZM195.75 271.9688 Q195.75 250.7344 180.4844 236.0469 Q165.2344 221.3438 144 221.3438 Q132.8906 221.3438 122.625 225.9844 L117.2812 213.75 Q58.0781 223.875 30.6562 271.9688 Q57.9375 319.9219 116.7188 330.0469 Q99.4219 322.3125 89.0781 306.5625 Q78.75 290.8125 78.75 271.9688 Q78.75 260.4375 82.8281 249.4688 L95.9062 253.5469 Q92.25 262.6875 92.25 271.9688 Q92.25 293.2031 107.4375 307.9062 Q122.625 322.5938 144 322.5938 Q165.375 322.5938 180.5625 307.9062 Q195.75 293.2031 195.75 271.9688 ZM183.0938 271.9688 Q183.0938 288 171.5625 299.1875 Q160.0312 310.3594 144 310.3594 Q127.8281 310.3594 116.3594 299.1875 Q104.9062 288 104.9062 271.9688 Q104.9062 264.7969 107.2969 258.4688 L147.2344 276.6094 L128.5312 236.9531 Q136.125 233.5781 144 233.5781 Q160.0312 233.5781 171.5625 244.7656 Q183.0938 255.9375 183.0938 271.9688 Z" stroke="none"/>
+    </g>
+  </g>
+</svg>

styles/icons/frame.svg

@@ -0,0 +1,9 @@
+<svg id="emoji" xmlns="http://www.w3.org/2000/svg" viewBox="10 10 52 52">
+  <g id="line">
+    <rect x="12" y="12" width="48" height="48" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"/>
+    <rect x="18" y="18" width="36" height="36" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"/>
+    <circle cx="26" cy="30" r="4" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"/>
+    <rect x="18" y="18" width="36" height="36" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"/>
+    <path fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2" d="M22,43c0.5259-1.0198,0.7275-1.9672,3-3c2.6096-1.1859,3-2,6-4c4.746-3.164,6.792-9.0278,11-9c1.7205,0.0114,5,7,8,8"/>
+  </g>
+</svg>

styles/icons/list.svg

@@ -0,0 +1,9 @@
+<svg fill-opacity="1" xmlns:xlink="http://www.w3.org/1999/xlink" color-rendering="auto" color-interpolation="auto" text-rendering="auto" stroke="black" stroke-linecap="square" stroke-miterlimit="10" shape-rendering="auto" stroke-opacity="1" fill="black" stroke-dasharray="none" font-weight="normal" stroke-width="1" xmlns="http://www.w3.org/2000/svg" font-family="'Dialog'" font-style="normal" stroke-linejoin="miter" font-size="12" stroke-dashoffset="0" image-rendering="auto" viewBox="17.27 224.85 138.27 161.05">
+  <!--Unicode Character 'APL FUNCTIONAL SYMBOL QUAD EQUAL' (U+2338)-->
+  <defs id="genericDefs"/>
+  <g>
+    <g>
+      <path d="M155.5312 385.875 L17.2969 385.875 L17.2969 224.8594 L155.5312 224.8594 L155.5312 385.875 ZM141.75 372.0938 L141.75 238.6406 L31.0781 238.6406 L31.0781 372.0938 L141.75 372.0938 ZM130.2188 286.1719 L42.6094 286.1719 L42.6094 272.3906 L130.2188 272.3906 L130.2188 286.1719 ZM130.2188 338.625 L42.6094 338.625 L42.6094 324.8438 L130.2188 324.8438 L130.2188 338.625 Z" stroke="none"/>
+    </g>
+  </g>
+</svg>

styles/main.css

@@ -1,6 +1,7 @@
 @font-face {
     font-family:Rubik;
-    src:url('fonts/Rubik-VariableFont_wght.ttf');
+    src:url('fonts/Rubik-Regular.woff2') format("woff2"),
+        url('fonts/Rubik-Regular.woff') format("woff");
 }
 
 @font-face {
@@ -10,7 +11,7 @@
 
 @font-face {
     font-family:Commissioner;
-    src:url('fonts/Commissioner-VariableFont_wght.ttf');
+    Src:url('fonts/CommissionerFlair-Regular.ttf');
 }
 
 body {
@@ -199,7 +200,7 @@ article #gallery {
     margin-top:0;
 }
 
-article #gallery.exposition {
+article.exposition #gallery {
     text-align:center;
 }
 
@@ -225,8 +226,10 @@ article #gallery img {
 /* Cartel (expo & painting) */
 
 #info {
-    width:300px;
-    max-width:70vw;
+    width:-moz-fit-content;
+    width:fit-content;    
+    min-width:300px;
+    max-width:76vw;
     box-shadow:.2rem .2rem .2rem .2rem rgba(0,0,0,.1);
     padding:0.65rem 1.15rem 0.65rem 1.15rem;
     position:relative;
@@ -236,14 +239,24 @@ article #gallery img {
     margin-bottom:1.5rem;
 }
 
+@media only screen and (max-width: 600px) {
+    #info {
+        min-width:280px;
+    }
+}
+
 #info .info {
     font-size:1.2rem;
     position:absolute;
-    top:0.4rem;
+    top:0.325rem;
     right:1rem;
     font-family:monospace;    
 }
 
+#info .year {
+    margin-right:1rem;
+}
+
 #info .title {
     font-weight:bold;
     font-style:italic;
@@ -327,6 +340,236 @@ article.painting .container .metadata span.content {
 }
 
 
+/* Explorer */
+
+article.explorer #gallery {
+    text-align:center;
+}
+
+article.explorer p {
+    width:55vw;
+    margin:auto;
+    margin-bottom:2rem;
+    text-align:justify;
+}
+
+@media only screen and (max-width: 1200px) {
+    article.explorer p {
+        width:90vw;
+    }
+}
+
+article.explorer .style-container {
+    display:flex;
+    align-self:flex-end;
+    justify-content:space-evenly;
+    flex-wrap:nowrap;
+}
+
+article.explorer h2 {
+    margin:0;
+    margin-right:auto;
+    cursor:pointer;
+    width:-moz-fit-content;
+    width:fit-content;
+}
+
+article.explorer h2::after {
+    content:"▼︎";
+    display:inline-block;
+    position:absolute;
+    transition:transform .2s ease;
+    transform:rotate(-90deg);
+}
+
+article.explorer h2.active::after {
+    transform:rotate(0);
+}
+
+article.explorer img.style-select {
+    display:block;
+    text-align:right;
+    max-height:2rem;
+    margin:0;
+    margin-bottom:0.25rem;
+    margin-right:0.5rem;
+    margin-left:0.5rem;
+    cursor:pointer;
+}
+
+article.explorer h3 {
+    margin-bottom:0.3rem;
+}
+
+article.explorer form h3, article.explorer form span {
+    display:block;
+}
+
+article.explorer form .container {
+    /*max-width:80vw;*/
+    margin:auto;
+    display:flex;
+    align-self:flex-start;
+    justify-content:space-around;
+    flex-wrap:wrap;
+}
+
+article.explorer form {
+    margin-bottom:1rem;
+}
+
+article.explorer form select {
+    display:block;
+    margin-left:0.2rem;
+}
+
+/* does not seem to work */
+article.explorer form .box {
+    margin:1rem;
+}
+
+article.explorer input[type = submit] {
+    display:block;
+    margin:auto;
+    text-align:center;
+    border: none;
+    padding:0.8rem;
+    margin-top:1.5rem;
+    border-radius:5%;
+    background:#2589BD;
+    text-decoration:none;
+    font-size:1.1rem;
+    cursor:pointer;
+    color:white;
+}
+
+@media only screen and (max-width:600px) {
+    article.explorer form .container {
+        display:block;
+    }
+
+    article.explorer form .container .box span {
+        display:block;
+        margin-left:1rem;
+        font-size:1.05rem;
+    }
+
+    article.explorer form .container h3 {
+        cursor:pointer;
+    }
+
+    article.explorer form .container h3::after{
+        content:"▼︎";
+        display:inline-block;
+        position:absolute;
+        transition:transform .2s ease;
+        transform:rotate(-90deg);
+    }
+
+    article.explorer form .container .box.active h3::after {
+        transform:rotate(0);
+    }
+}
+
+@media only screen and (max-width:1200px) {
+    article.explorer form .container {
+        justify-content:left;
+    }
+}
+
+article.explorer p.no-result {
+    text-align:center;
+    font-size:1.2rem;
+    display:none;
+    margin-top:1.5rem;
+}
+
+article.explorer table {
+    display:none;
+    border-collapse:separate;
+    border-spacing:0;
+    width:100%;
+    margin-top:1rem;
+    margin-bottom:1rem;
+    overflow-x:auto;
+}
+
+article.explorer table tr:first-child th:first-child {
+    border-top-left-radius:6px;
+}
+
+article.explorer table tr:first-child th:last-child {
+    border-top-right-radius:6px;
+}
+
+article.explorer table tr:last-child td:first-child {
+    border-bottom-left-radius:6px;
+}
+
+article.explorer table tr:last-child td:last-child {
+    border-bottom-right-radius:6px;
+}
+
+article.explorer table tr th:first-child,
+article.explorer table tr td:first-child {
+    border-left:1px solid #bbb;
+}
+
+article.explorer td, article.explorer th {
+    border-right:1px solid #bbb;
+    border-bottom:1px solid #bbb;
+    text-align:left;
+    padding:8px;
+}
+
+article.explorer th {
+    border-top:1px solid #bbb;
+    background:#ddd;
+    position:sticky;
+    top:0;
+}
+
+article.explorer tr td:first-child {
+    width:1%;
+    white-space:nowrap;
+}
+
+article.explorer tr td:nth-child(2) {
+    width:25%;
+    white-space:nowrap;
+}
+
+article.explorer tr td:last-child {
+    font-size:1.5rem;
+    text-align:center;
+    padding:0;
+    width:1%;
+    white-space:nowrap;
+}
+
+article.explorer tr td:last-child img {
+    max-width:50%;
+}
+
+article.explorer tr td.help {
+    font-size:1.5rem;
+    text-align:center;
+    padding:0;
+    width:1%;
+    white-space:nowrap;
+}
+
+article.explorer tr:nth-child(2n+3) {
+    background-color:#dddddd;
+}
+
+article.explorer table .photo {
+    width:1%;
+    white-space:nowrap;
+    text-align:center;
+}
+
+
 /* Divers */
 
 article #stats {
@@ -370,6 +613,7 @@ article #stats #stat {
     }
 }
 
+
 /* Informations */
 
 article.infos .mail {