keb/ginou
1
0
Fork 0
Code Issues 6 Pull Requests Releases Activity

First implementation of dynamic requests with dummy data

Browse Source 
Not yet tested for mobile.
This commit is contained in:
Théo Marchal 2021-01-24 15:43:02 +01:00
parent 25135304f9
commit 69b18017b0
16 changed files with 1095 additions and 129 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
README.md
View File

@ -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:
@ -20,4 +26,8 @@ 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.
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_).

19
biographie.html
View File

@ -32,18 +32,17 @@
<p><strong>En construction...</strong></p>
<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>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>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>“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>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>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>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>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, &#8239;&laquo;&nbsp;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&nbsp;&raquo;. C'est ainsi que Geneviève réalise ses premieres aquarelles.</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&#8239;!</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>
</article>
</body>
</html>

324
data.json Normal file
View File

@ -0,0 +1,324 @@
[{
"type": "tableau",
"number": "1",
"title": "Paysage Mouilly",
"dimension": "",
"month": "",
"year": "",
"support": "",
"paint": "",
"theme": "",
"category": "",
"place": "",
"tags": "",
"comment": "",
"photo": "none",
"help": ""
},
{
"type": "tableau",
"number": "2",
"title": "Rep. \"Nature Morte\"",
"dimension": "—",
"month": "",
"year": "",
"support": "",
"paint": "",
"theme": "",
"category": "",
"place": "",
"tags": "",
"comment": "",
"photo": "none",
"help": ""
},
{
"type": "tableau",
"number": "3",
"title": "Rep. \"Chasse\"",
"dimension": "",
"month": "",
"year": "",
"support": "",
"paint": "",
"theme": "",
"category": "",
"place": "Mouilly",
"tags": "",
"comment": "",
"photo": "none",
"help": ""
},
{
"type": "tableau",
"number": "4",
"title": "Rep. \"Portrait\" (Reynolds)",
"dimension": "",
"month": "",
"year": "",
"support": "",
"paint": "",
"theme": "",
"category": "",
"place": "",
"tags": "",
"comment": "",
"photo": "none",
"help": ""
},
{
"type": "tableau",
"number": "5",
"title": "Rep. \"Paysage\"",
"dimension": "",
"month": "",
"year": "",
"support": "",
"paint": "",
"theme": "",
"category": "",
"place": "",
"tags": "",
"comment": "",
"photo": "none",
"help": ""
},
{
"type": "tableau",
"number": "6",
"title": "Portrait Monique",
"dimension": "",
"month": "",
"year": "",
"support": "",
"paint": "",
"theme": "",
"category": "oui",
"place": "",
"tags": "mouche",
"comment": "",
"photo": "none",
"help": ""
},
{
"type": "tableau",
"number": "7",
"title": "Rep. \"Portrait\" (Greuze)",
"dimension": "",
"month": "",
"year": "",
"support": "",
"paint": "",
"theme": "",
"category": "non",
"place": "",
"tags": "canard",
"comment": "",
"photo": "none",
"help": ""
},
{
"type": "tableau",
"number": "8",
"title": "Paysage Mouilly",
"dimension": "",
"month": "",
"year": "",
"support": "",
"paint": "",
"theme": "",
"category": "",
"place": "Nancy",
"tags": "",
"comment": "",
"photo": "none",
"help": ""
},
{
"type": "tableau",
"number": "9",
"title": "Rep. \"Vierge aux raisins\" (Mignard)",
"dimension": "",
"month": "",
"year": "",
"support": "",
"paint": "",
"theme": "",
"category": "",
"place": "",
"tags": "",
"comment": "",
"photo": "none",
"help": ""
},
{
"type": "tableau",
"number": "10",
"title": "Rep. \"Paysage\"",
"dimension": "",
"month": "",
"year": "",
"support": "",
"paint": "",
"theme": "",
"category": "",
"place": "",
"tags": "",
"comment": "",
"photo": "none",
"help": ""
},
{
"type": "tableau",
"number": "11",
"title": "Rep. \"Paysage\"",
"dimension": "",
"month": "",
"year": "",
"support": "",
"paint": "",
"theme": "",
"category": "",
"place": "",
"tags": "",
"comment": "",
"photo": "bad",
"help": ""
},
{
"type": "tableau",
"number": "12",
"title": "Rep. \"Paysage\"",
"dimension": "",
"month": "",
"year": "",
"support": "",
"paint": "",
"theme": "",
"category": "",
"place": "",
"tags": "",
"comment": "",
"photo": "none",
"help": ""
},
{
"type": "tableau",
"number": "13",
"title": "Paysage neige à Mouilly et bavure d'escargot âpre",
"dimension": "99x69",
"month": "septembre",
"year": "2006",
"support": "carton",
"paint": "Aquarelle",
"theme": "",
"category": "",
"place": "",
"tags": "",
"comment": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer congue faucibus velit, eget fringilla metus.",
"photo": "none",
"help": ""
},
{
"type": "tableau",
"number": "14",
"title": "Rep. \"T. de genres\"",
"dimension": "55x46",
"month": "",
"year": "1956",
"support": "",
"paint": "",
"theme": "",
"category": "",
"place": "",
"tags": "",
"comment": "",
"photo": "bad",
"help": ""
},
{
"type": "tableau",
"number": "15",
"title": "Sérénade à l’enfant",
"dimension": "55x46",
"month": "—",
"year": "1959",
"support": "Toile",
"paint": "Huile",
"theme": "Personnages",
"category": "—",
"place": "—",
"tags": "—",
"comment": "test commentaire",
"photo": "good",
"help": "no"
},
{
"type": "tableau",
"number": "16",
"title": "Mona Lisa",
"dimension": "65x50",
"month": "avril",
"year": "1959",
"support": "Toile",
"paint": "Huile",
"theme": "Personnages",
"category": "—",
"place": "—",
"tags": "chien, chat, cerf, canard, oie",
"comment": "Reproduction de Léonard de Vinci",
"photo": "bad",
"help": "yes"
},
{
"type": "tableau",
"number": "17",
"title": "Paysage Mouilly",
"dimension": "",
"month": "—",
"year": "1980",
"support": "",
"paint": "",
"theme": "",
"category": "",
"place": "",
"tags": "",
"comment": "",
"photo": "none",
"help": ""
},
{
"type": "tableau",
"number": "18",
"title": "Paysage Mouilly",
"dimension": "",
"month": "—",
"year": "1985",
"support": "",
"paint": "",
"theme": "",
"category": "",
"place": "",
"tags": "",
"comment": "",
"photo": "none",
"help": ""
},
{
"type": "tableau",
"number": "19",
"title": "Paysage Mouilly",
"dimension": "99x32",
"month": "février",
"year": "1987",
"support": "",
"paint": "",
"theme": "",
"category": "",
"place": "",
"tags": "",
"comment": "",
"photo": "ok",
"help": ""
}
]

126
explorer.html
View File

@ -9,6 +9,8 @@
<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/explorer.js"></script>
</head>
<body>
<header>
@ -27,9 +29,129 @@
</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 (<strong>bientôt</strong> 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>
<h2 class="active">Configuration <span>&nbsp;</span></h2>
<form action="">
<div class="container">
<div class="box years">
<h3>Années</h3>
<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 class="box months">
<h3>Mois</h3>
<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 class="box dimensions">
<h3>Dimensions</h3>
<span><input type="checkbox" id="dimensions" name="dimensions" value="all">
<label for="dimensions">Toutes</label></span>
</div>
<div class="box themes">
<h3>Thèmes</h3>
<span><input type="checkbox" id="themes" name="themes" value="all">
<label for="themes">Tous</label></span>
</div>
<div class="box categories">
<h3>Catégories</h3>
<span><input type="checkbox" id="categories" name="categories" value="all">
<label for="categories">Toutes</label></span>
</div>
<div class="box places">
<h3>Lieux</h3>
<span><input type="checkbox" id="places" name="places" value="all">
<label for="places">Tous</label></span>
</div>
<div class="box tags">
<h3>Tags</h3>
<span><input type="checkbox" id="tags" name="tags" value="all">
<label for="tags">Tous</label></span>
</div>
<div class="box photos">
<h3>État photo</h3>
<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="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 class="box help">
<h3>Aide requise</h3>
<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>
<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>
<table>
<tr>
<th>nº</th>
<th>Titre</th>
<th>Année</th>
<th>Dimension</th>
<th>Thème</th>
<th>Catégorie</th>
<th>Lieu</th>
<th>Tags</th>
<th>Photo</th>
<th>Aide</th>
<th>Voir</th>
</tr>
</table>
</article>
</body>
</html>

61
exposition.html
View File

@ -11,7 +11,7 @@
<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">
<link href="plugins/jquery.fancybox.min.css" rel="stylesheet">
<script src="plugins/jquery.fancybox.min.js"></script>
<script src="scripts/exposition.js"></script>
</head>
@ -34,64 +34,7 @@
<article>
<h1>Exposition</h1>
<div id="gallery">
<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>

BIN
images/unknown.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 799 KiB

2
index.html
View File

@ -29,7 +29,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>

40
painting.html
View File

@ -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>
@ -30,35 +32,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">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">catégorie :</span><span class="content category">&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>

7
scripts/divers.js
View File

@ -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,

345
scripts/explorer.js Normal file
View File

@ -0,0 +1,345 @@
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'));
paramTheme = (urlParams.get('themes') == null ? urlParams.getAll('theme') : urlParams.getAll('themes'));
paramCategory = (urlParams.get('categories') == null ? urlParams.getAll('category') : urlParams.getAll('categories'));
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 themes = [];
var categories = [];
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 (themes.indexOf(i.theme) === -1 && i.theme != "" && i.theme != "—")
themes.push(i.theme);
if (categories.indexOf(i.category) === -1 && i.category != "" && i.category != "—")
categories.push(i.category);
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();
themes.sort();
categories.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").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").append(html);
}
for (category of categories)
{
html = '<span><input type="checkbox" id="' + category + '" name="category" value="' + category + '"></input>\n';
html += '<label for="' + category + '">' + category + '</label></span>';
$(".box.categories").append(html);
}
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").append(html);
}
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").append(html);
}
// 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("themes", "theme", paramTheme);
checkBoxSelector("categories", "category", paramCategory);
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("themes", "theme");
AllCheckBoxSelector("categories", "category");
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);
}
});
/***********/
/** TABLE **/
/***********/
function generateTable()
{
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(dimension))
return true;
return false;
}
function checkTheme(theme)
{
if (paramTheme == "all")
return true;
if (paramTheme.includes(theme))
return true;
return false;
}
function checkCategory(category)
{
if (paramCategory == "all")
return true;
if (paramCategory.includes(category))
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;
console.log("tag: " + tag);
console.log("paramTag: " + paramTag);
splitTag = tag.split(", ");
console.log(splitTag);
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;
}
hasResult = false;
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 (paramTheme != "") res &&= checkTheme(i.theme);
if (paramCategory != "") res &&= checkCategory(i.category);
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;
$("table").css("display", "block");
result = "<tr>";
result += "<td>" + i.number + "</td>";
result += "<td>" + i.title + "</td>";
result += "<td>" + i.year + "</td>";
result += "<td>" + i.dimension + "</td>";
result += "<td>" + i.theme + "</td>";
result += "<td>" + i.category + "</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 + '">👁</a></td>';
result += "</tr>";
$("table").append(result);
}
return hasResult;
}
generateMenu();
var res = generateTable();
// display table or no result depending of computed result
if (res)
{
$("article.explorer h2").removeClass("active")
$("form").slideUp(200);
}
else
$("article.explorer p.no-result").css("display", "block");
});
});

62
scripts/exposition.js
View File

@ -1,27 +1,41 @@
jQuery(document).ready(function($) {
$('[data-fancybox="exposition"]').fancybox({
infobar: false,
toolbar: true,
smallBtn: false,
buttons : [ "arrowLeft", "arrowRight", "close" ],
arrows: false,
transitionEffect: "fade",
baseClass: 'fancybox-custom-layout',
caption : function( instance, item ) {
// index put inside, we can get the number: `item.opts.fancyboxIndex`
// and thus what we what inside the caption!
// 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>\
</div>\
';
jQuery(document).ready(function($)
{
$.getJSON("data.json", function(data)
{
for (i of data)
{
if (i.photo == "ok" || i.photo == "good")
{
console.log(i.number);
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>';
console.log(paintingHtml);
$("#gallery").append(paintingHtml);
}
}
$('[data-fancybox="exposition"]').fancybox(
{
infobar: false,
toolbar: true,
smallBtn: false,
buttons: ["arrowLeft", "arrowRight", "close"],
arrows: false,
transitionEffect: "fade",
baseClass: 'fancybox-custom-layout',
caption: function(instance, item)
{
var idx = item.opts.fancyboxIndex - 1; // painting number
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>\
';
}
});
});
});

7
scripts/mail.js
View File

@ -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 = "adres" ; var a2 = "se em"; var a3 = "ail";
var goodMail = a1 + a2 + a3;

5
scripts/menu.js
View File

@ -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

53
scripts/painting.js Normal file
View File

@ -0,0 +1,53 @@
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.theme").append(data[i].theme);
$(".metadata .content.place").append(data[i].place);
$(".metadata .content.category").append(data[i].category);
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;
format += " (" + data[i].dimension + ")";
$("#info .format").append(format);
$("#info .comment").prepend(data[i].comment);
});
});

4
scripts/stats.js
View File

@ -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',

155
styles/main.css
View File

@ -320,6 +320,158 @@ article.painting .container .metadata span.content {
}
/* Explorer */
article.explorer p {
width:55vw;
margin:auto;
margin-bottom:2rem;
}
article.explorer h2 {
margin:0;
cursor:pointer;
}
article.explorer h2 span::before {
content: "▼︎";
display: inline-block;
position: absolute;
transition:transform .2s ease;
transform:rotate(-90deg);
}
article.explorer h2.active span::before {
transform:rotate(0);
}
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-evenly;
flex-wrap:nowrap;
}
article.explorer form {
margin-bottom:1rem;
}
article.explorer form select {
display:block;
margin-right:1rem;
}
article.explorer input[type = submit] {
display:block;
margin:auto;
text-align:center;
border: none;
padding:0.8rem;
border-radius:5%;
background:#2589BD;
text-decoration:none;
font-size:1.1rem;
cursor:pointer;
color:white;
}
article.explorer p.no-result {
text-align:center;
font-size:1.2rem;
display:none;
}
article.explorer table {
display:none;
border-collapse:separate;
border-spacing:0;
width:100%;
margin-top:1rem;
margin-bottom:1rem;
}
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:#dddddd;
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.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 {
@ -361,7 +513,8 @@ article #stats #stat {
margin:auto;
margin-top:3rem;
}
}
}
/* Informations */