Compare commits
77 Commits
79413bb01a
...
v1
| Author | SHA1 | Date | |
|---|---|---|---|
| 3e2866b9b9 | |||
| f50a9fbb59 | |||
| c9c587d489 | |||
| 88950d7529 | |||
| 60422a6400 | |||
| 47a0dcd200 | |||
| e923c9404e | |||
| e31639d340 | |||
| 61511ecc95 | |||
| e0ebd28dcb | |||
| e41ccc5549 | |||
| 862a7348e6 | |||
| 3283d11c02 | |||
| 25a09015d1 | |||
| 34e8fe9b12 | |||
| 4effbe657e | |||
| 35b1e06dfc | |||
| 3a964098e7 | |||
| 3fe24e502e | |||
| 44a5f52e94 | |||
| 5b79f924cb | |||
| 936af2a9fd | |||
| f37a2fde6e | |||
| ab5710e69e | |||
| dae17821ad | |||
| 10dea8e993 | |||
| 6e07aec3a5 | |||
| c9b501c6fc | |||
| 8d677d9bdc | |||
| fece1eab16 | |||
| 4739726e5c | |||
| bf60722e22 | |||
| 3e5eeb6fd9 | |||
| 1dffff9c83 | |||
| 43f1f494cd | |||
| bcb0eec9f6 | |||
| e8d7e401b0 | |||
| f51ea1a530 | |||
| b7fa827d1c | |||
| 7c856d957b | |||
| 3c3cd61483 | |||
| bfbb959cf8 | |||
| 0c653e2692 | |||
| e7107c20b9 | |||
| 6f154234b3 | |||
| 0b268b8654 | |||
| 708d4de228 | |||
| 3469704e1b | |||
| 649be52829 | |||
| 04d3e099cb | |||
| b76734fe25 | |||
| 7126678bac | |||
| d23cd1fd9b | |||
| b38df5ce37 | |||
| ede8ac1bcb | |||
| e0acc55670 | |||
| 8b1a6ea055 | |||
| e9ee0f8ce5 | |||
| a91ccf1c36 | |||
| 0b096aad6e | |||
| e9dcc57fd4 | |||
| b400c79d42 | |||
| 506a8758b9 | |||
| 95f5de8e4d | |||
| c9e6a1639c | |||
| 25d7fdfcaf | |||
| 4924e71361 | |||
| 0ce932c8d5 | |||
| 16f9d4afca | |||
| f27d1a8dad | |||
| 408825f004 | |||
| a2a2dc97c0 | |||
| d55c1bf238 | |||
| be42dcfc05 | |||
| 7d945f2bf4 | |||
| ad13b8b127 | |||
| 2d82dbf3c2 |
@ -18,11 +18,11 @@ Tools used:
|
||||
* [jQuery](https://jquery.com/)
|
||||
* [fancybox 3](https://fancyapps.com/fancybox/3/)
|
||||
* [Chart.js](https://www.chartjs.org/)
|
||||
* [Pagination.js](https://pagination.js.org/)
|
||||
|
||||
Fonts used:
|
||||
* Rubik
|
||||
* Commissioner
|
||||
* Hot August Night
|
||||
* [Rubik](https://github.com/googlefonts/Rubik)
|
||||
* [Commissioner](https://github.com/kosbarts/Commissioner)
|
||||
|
||||
### Export Excel spreadsheet to JSON
|
||||
|
||||
|
||||
@ -8,22 +8,25 @@
|
||||
<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="plugins/jquery-3.5.1.min.js"></script>
|
||||
<script src="scripts/menu.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<nav>
|
||||
<img src="styles/icons/ginou.svg" class="ginou-icon">
|
||||
<div id="hamburger">
|
||||
<div class="container" onclick="mobilemenu()"><div class="bar1"></div><div class="bar2"></div><div class="bar3"></div></div>
|
||||
<div class="container"><div class="bar1"></div><div class="bar2"></div><div class="bar3"></div></div>
|
||||
</div>
|
||||
<ul>
|
||||
<li class="title">Ginou</li>
|
||||
<li><a href="index.html">Accueil</a></li>
|
||||
<li class="selected"><a href="biographie.html">Biographie</a></li>
|
||||
<li><a href="exposition.html">Exposition</a></li>
|
||||
<li><a href="explorer.html">Explorer</a></li>
|
||||
<li><a href="divers.html">Divers</a></li>
|
||||
<li><a href="informations.html">Informations</a></li>
|
||||
<div class="hidden">
|
||||
<li><a href="index.html">Accueil</a></li>
|
||||
<li class="selected"><a href="biographie.html">Biographie</a></li>
|
||||
<li><a href="exposition.html">Exposition</a></li>
|
||||
<li><a href="explorer.html">Explorer</a></li>
|
||||
<li><a href="divers.html">Divers</a></li>
|
||||
<li><a href="informations.html">Informations</a></li>
|
||||
</div>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
@ -31,21 +34,26 @@
|
||||
<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>
|
||||
<img src="images/ginou50.jpg" class="bio-img" alt="Ginou, peignant dans les années 50">
|
||||
<p>Ginou, née Geneviève Collignon, était une artiste-peintre qui a vécu la plus grande partie de sa vie à Dugny-sur-Meuse, village de la vallée de la Meuse où elle trouvera de nombreux sujets d’inspiration.</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 : « 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 l'écrit Ginou en 2016 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, et en garde des souvenirs très précis, même 75 ans après. Après avoir passé le certificat d'études avec succès, Geneviève apprend le métier de couturière de son père Eugène, tailleur installé dans le bas du petit village isolé dans la forêt meusienne, dans une maison sur les berges du petit ruisseau qui serpente au fond d'une vallée accrochée aux contreforts des côtes de Meuse.</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>Dans ce petit village blotti dans la forêt domaniale des Éparges, elle passe beaucoup de temps dans la nature environnante, accompagnant son père quand il allait dans les bois chercher des champignons ou bien pour aller jouer et se promener avec ses copains et copines du village. Elle se souvient : « j'ai appris à reconnaître girolles et 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 ». 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>« 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 ». Ainsi est née Ginou !</p>
|
||||
<p>Ginou a commencé très tôt à montrer un goût prononcé pour les arts graphiques. Comme elle le relate elle-même : « 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 peint ses premières aquarelles. Elle réalise aussi de nombreux portraits au fusain d'artistes célèbres des années 50 et 60 : Grace Kelly, Marlon Brando, Zsa Zsa Gabor, Humphrey Bogart, etc.</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 écrit ensuite : « 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>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>Geneviève peindra ainsi plus de 385 tableaux (huile sur toile, bois et carton), la grande majorité recensés dans un tout petit carnet où elle notait leurs caractéristiques, leurs acquéreurs et destinataires. Ces tableaux sont maintenant disséminés aux quatre coins de la France, voire du monde !</p>
|
||||
|
||||
<p><img src="images/genevievedugny.jpg"></p>
|
||||
<p>Il ne faut pas oublier qu'elle n'aurait pas été Ginou sans le « Jeannot », son mari. Le Jeannot a toujours accompagné cette passion, plus encore en retraite, en s'occupant de toute la logistique (trépieds, support, table, etc) lorsque qu'elle s'est décidée à participer aux expositions de peinture et autres foires artisanales locales.</p>
|
||||
|
||||
<p>Hasard 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. Elle laissa également deux tableaux inachevés : deux esquisses au fusain représentant une 54ème « Vieille Église » (Église romane de Dugny-sur-Meuse) et un paysage asiatique.</p>
|
||||
|
||||
<p class="signature">Pour en découvrir plus sur la vie de Ginou, visitez notre section <a href="divers.html">Divers</a>.</p>
|
||||
|
||||
<p><img src="images/genevievedugny.jpg" alt="Geneviève Marchal, Dugny"></p>
|
||||
</article>
|
||||
</body>
|
||||
</html>
|
||||
132
divers.html
132
divers.html
@ -8,8 +8,8 @@
|
||||
<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/menu.js"></script>
|
||||
<link href="plugins/jquery.fancybox.min.css" rel="stylesheet">
|
||||
<script src="plugins/jquery.fancybox.min.js"></script>
|
||||
<link href="plugins/chart.min.css" rel="stylesheet">
|
||||
@ -20,118 +20,154 @@
|
||||
<body>
|
||||
<header>
|
||||
<nav>
|
||||
<img src="styles/icons/ginou.svg" class="ginou-icon">
|
||||
<div id="hamburger">
|
||||
<div class="container" onclick="mobilemenu()"><div class="bar1"></div><div class="bar2"></div><div class="bar3"></div></div>
|
||||
<div class="container"><div class="bar1"></div><div class="bar2"></div><div class="bar3"></div></div>
|
||||
</div>
|
||||
<ul>
|
||||
<li class="title">Ginou</li>
|
||||
<li><a href="index.html">Accueil</a></li>
|
||||
<li><a href="biographie.html">Biographie</a></li>
|
||||
<li><a href="exposition.html">Exposition</a></li>
|
||||
<li><a href="explorer.html">Explorer</a></li>
|
||||
<li class="selected"><a href="divers.html">Divers</a></li>
|
||||
<li><a href="informations.html">Informations</a></li>
|
||||
<div class="hidden">
|
||||
<li><a href="index.html">Accueil</a></li>
|
||||
<li><a href="biographie.html">Biographie</a></li>
|
||||
<li><a href="exposition.html">Exposition</a></li>
|
||||
<li><a href="explorer.html">Explorer</a></li>
|
||||
<li class="selected"><a href="divers.html">Divers</a></li>
|
||||
<li><a href="informations.html">Informations</a></li>
|
||||
</div>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<article class="divers">
|
||||
<h1>Divers</h1>
|
||||
|
||||
<p class="center">Pour voir une photo en haute résolution et ses informations, veuillez cliquer sur celle-ci.</p>
|
||||
|
||||
<h2>Petit carnet</h2>
|
||||
|
||||
<p>Ce site est né grâce à ce petit carnet appartenant à Ginou et dans lequel elle a consigné les informations de quasiment l'intégralité de ses tableaux (nous avons retrouvé quatre inédits). Il nous a permis de faire un index complet de ses œuvres à travers les années.
|
||||
</p>
|
||||
|
||||
<div class="gallery">
|
||||
<a data-fancybox="divers" href="photos/divers/normal/carnet.png" data-caption="Couverture du petit carnet qui nous a permis de lister l'intégralité des tableaux.">
|
||||
<img src="photos/divers/mini/carnet.jpg" alt="Couverture du petit carnet qui nous a permis de lister l'intégralité des tableaux.">
|
||||
</a>
|
||||
|
||||
<a data-fancybox="divers" href="photos/divers/normal/carnetpremierepage.png" data-caption="Première page du petit carnet et les premiers tableaux à l’huile de Ginou.">
|
||||
<img src="photos/divers/mini/carnetpremierepage.jpg" alt="Première page du petit carnet et les premiers tableaux à l’huile de Ginou.">
|
||||
</a>
|
||||
|
||||
<a data-fancybox="divers" href="photos/divers/normal/carnetpage.png" data-caption="Pages du petit carnet dans les années 2001.">
|
||||
<img src="photos/divers/mini/carnetpage.jpg" alt="Pages du petit carnet dans les années 2001.">
|
||||
</a>
|
||||
|
||||
<a data-fancybox="divers" href="photos/divers/normal/carnetdernierepage.png" data-caption="Dernière page du petit carnet et derniers tableaux de Ginou.">
|
||||
<img src="photos/divers/mini/carnetdernierepage.jpg" alt="Dernière page du petit carnet et derniers tableaux de Ginou.">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
<h2>Atelier</h2>
|
||||
|
||||
<p>Voici quelques photos du dernier atelier que Ginou utilisait, chez elle, entre 2011 et 2017.</p>
|
||||
|
||||
<div id="gallery">
|
||||
<a data-fancybox="divers" href="photos/divers/normal/atelier.jpg" data-caption="L'atelier dans lequel Ginou peignait (vers 2012).">
|
||||
<img src="photos/divers/mini/atelier.jpg">
|
||||
<div class="gallery">
|
||||
<a data-fancybox="divers" href="photos/divers/normal/atelier.jpg" data-caption="Atelier dans lequel Ginou peignait (vers 2012).">
|
||||
<img src="photos/divers/mini/atelier.jpg" alt="L'atelier dans lequel Ginou peignait (vers 2012).">
|
||||
</a>
|
||||
|
||||
<a data-fancybox="divers" href="photos/divers/normal/atelier2.jpg" data-caption="L'atelier dans lequel Ginou peignait (2015).">
|
||||
<img src="photos/divers/mini/atelier2.jpg">
|
||||
<a data-fancybox="divers" href="photos/divers/normal/atelier2.jpg" data-caption="Trépied et tableau (nº375, Venise, le Cannareggio) dans l’atelier de Ginou (2015).">
|
||||
<img src="photos/divers/mini/atelier2.jpg" alt="Trépied et tableau (nº375, Venise, le Cannareggio) dans l’atelier de Ginou (2015).">
|
||||
</a>
|
||||
|
||||
<a data-fancybox="divers" href="photos/divers/normal/palette.jpg" data-caption="La palette utilisée (vers 2012).">
|
||||
<img src="photos/divers/mini/palette.jpg">
|
||||
<a data-fancybox="divers" href="photos/divers/normal/palette.jpg" data-caption="La palette de Ginou !">
|
||||
<img src="photos/divers/mini/palette.jpg" alt="La palette de Ginou !">
|
||||
</a>
|
||||
|
||||
<a data-fancybox="divers" href="photos/divers/normal/palettezoom.jpg" data-caption="Zoom sur la palette utilisée (vers 2012).">
|
||||
<img src="photos/divers/mini/palettezoom.jpg">
|
||||
<a data-fancybox="divers" href="photos/divers/normal/palettezoom.jpg" data-caption="Zoom sur la palette.">
|
||||
<img src="photos/divers/mini/palettezoom.jpg" alt="Zoom sur la palette.">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<h2>Expositions</h2>
|
||||
|
||||
<p>Ginou a participé à de nombreuses foires et expositions en Lorraine, principalement dans la Meuse : à Bar-le-Duc, Étain, Verdun et ses alentours, ou encore à Vigneulles.<br>
|
||||
<p>Ginou a participé à de nombreuses foires et expositions en Lorraine, principalement dans la Meuse : à Bar-le-Duc, Étain, Verdun et ses alentours, ou encore à Vigneulles-les Hattonchâtel.<br>
|
||||
Voici une sélection de quelques photos issues de ces événements.</p>
|
||||
|
||||
<div id="gallery">
|
||||
<div class="gallery">
|
||||
<a data-fancybox="divers" href="photos/divers/normal/expodugny.jpg" data-caption="Exposition à Dugny-sur-Meuse (1996).">
|
||||
<img src="photos/divers/mini/expodugny.jpg">
|
||||
<img src="photos/divers/mini/expodugny.jpg" alt="Exposition à Dugny-sur-Meuse (1996).">
|
||||
</a>
|
||||
|
||||
<a data-fancybox="divers" href="photos/divers/normal/exposaintjean.jpg" data-caption="À la fête du collège Saint-Jean de Verdun (2005).">
|
||||
<img src="photos/divers/mini/exposaintjean.jpg">
|
||||
<a data-fancybox="divers" href="photos/divers/normal/exposaintjean.jpg" data-caption="Fête du collège Saint-Jean de Verdun (2005).">
|
||||
<img src="photos/divers/mini/exposaintjean.jpg" alt="Fête du collège Saint-Jean de Verdun (2005).">
|
||||
</a>
|
||||
|
||||
<a data-fancybox="divers" href="photos/divers/normal/expojeannot.jpg" data-caption="Exposition à la foire aux puces de Dugny, avec le Jeannot (1995).">
|
||||
<img src="photos/divers/mini/expojeannot.jpg" alt="Exposition à la foire aux puces de Dugny, avec le Jeannot (1995).">
|
||||
</a>
|
||||
|
||||
<a data-fancybox="divers" href="photos/divers/normal/foiredugny.jpg" data-caption="À la foire aux puces de Dugny-sur-Meuse (2004).">
|
||||
<img src="photos/divers/mini/foiredugny.jpg">
|
||||
<a data-fancybox="divers" href="photos/divers/normal/foiredugny.jpg" data-caption="Foire aux puces de Dugny-sur-Meuse (2004).">
|
||||
<img src="photos/divers/mini/foiredugny.jpg" alt="Foire aux puces de Dugny-sur-Meuse (2004).">
|
||||
</a>
|
||||
|
||||
<a data-fancybox="divers" href="photos/divers/normal/foirethierville.jpg" data-caption="À la foire de Thierville-sur-Meuse (2002).">
|
||||
<img src="photos/divers/mini/foirethierville.jpg">
|
||||
<a data-fancybox="divers" href="photos/divers/normal/foirethierville.jpg" data-caption="Foire de Thierville-sur-Meuse (2002).">
|
||||
<img src="photos/divers/mini/foirethierville.jpg" alt="Foire de Thierville-sur-Meuse (2002).">
|
||||
</a>
|
||||
|
||||
<a data-fancybox="divers" href="photos/divers/normal/expobarleduc.jpg" data-caption="Exposition au siège du Conseil Général de Bar-le-Duc (1994).">
|
||||
<img src="photos/divers/mini/expobarleduc.jpg" alt="Exposition au siège du Conseil Général de Bar-le-Duc (1994).">
|
||||
</a>
|
||||
|
||||
<a data-fancybox="divers" href="photos/divers/normal/derniereexpo.jpg" data-caption="La dernière exposition où les tableaux de Ginou ont été présentés (2017).">
|
||||
<img src="photos/divers/mini/derniereexpo.jpg">
|
||||
<a data-fancybox="divers" href="photos/divers/normal/derniereexpo.jpg" data-caption="Dernière exposition où les tableaux de Ginou ont été présentés à titre posthume (2017).">
|
||||
<img src="photos/divers/mini/derniereexpo.jpg" alt="Dernière exposition où les tableaux de Ginou ont été présentés à titre posthume (2017).">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<h2>Presse</h2>
|
||||
|
||||
<p>Ginou a eu plusieurs articles à son propos dans le journal local, cependant nous n'en avons qu'un seul. N'hésitez pas <a href="informations.html">à nous contacter</a> si vous avez un en votre possession.</p>
|
||||
<div id="gallery">
|
||||
<a data-fancybox="divers" href="photos/divers/normal/ainesdugny.jpg" data-caption="todo">
|
||||
<img src="photos/divers/mini/ainesdugny.jpg">
|
||||
<p>Ginou a eu plusieurs articles à son propos dans le journal local, cependant nous n'en possédons qu'un seul. N'hésitez pas <a href="informations.html">à nous contacter</a> si vous avez un en votre possession.</p>
|
||||
<div class="gallery">
|
||||
<a data-fancybox="divers" href="photos/divers/normal/ainesdugny.jpg" data-caption="Ginou était engagée dans des œuvres caritatives, comme le montre cette coupure de presse.">
|
||||
<img src="photos/divers/mini/ainesdugny.jpg" alt="Ginou était engagée dans des œuvres caritatives, comme le montre cette coupure de presse.">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<h2>Divers</h2>
|
||||
<h2>Autres</h2>
|
||||
|
||||
<div id="gallery">
|
||||
<div class="gallery">
|
||||
<a data-fancybox="divers" href="photos/divers/normal/ginouchloe.jpg" data-caption="Ginou posant à côté d'un de ses tableaux (vers 2011).">
|
||||
<img src="photos/divers/mini/ginouchloe.jpg">
|
||||
<img src="photos/divers/mini/ginouchloe.jpg" alt="Ginou posant à côté d'un de ses tableaux (vers 2011).">
|
||||
</a>
|
||||
|
||||
<a data-fancybox="divers" href="photos/divers/normal/ginou.jpg" data-caption="Ginou en voyage en Argentine (2012).">
|
||||
<img src="photos/divers/mini/ginou.jpg">
|
||||
<img src="photos/divers/mini/ginou.jpg" alt="Ginou en voyage en Argentine (2012).">
|
||||
</a>
|
||||
|
||||
<a data-fancybox="divers" href="photos/divers/normal/carnet.png" data-caption="Le carnet qui nous a permis de lister l'intégralité des tableaux.">
|
||||
<img src="photos/divers/mini/carnet.jpg">
|
||||
<a data-fancybox="divers" href="photos/divers/normal/nature2.jpg" data-caption="Ginou observe les fleurs dans les bois de Dugny-sur-Meuse (2016).">
|
||||
<img src="photos/divers/mini/nature2.jpg" alt="Ginou observe les fleurs dans les bois de Dugny-sur-Meuse (2016).">
|
||||
</a>
|
||||
|
||||
<a data-fancybox="divers" href="photos/divers/normal/carnetouvert.jpg" data-caption="Le carnet qui nous a permis de lister l'intégralité des tableaux.">
|
||||
<img src="photos/divers/mini/carnetouvert.jpg">
|
||||
<a data-fancybox="divers" href="photos/divers/normal/nature1.jpg" data-caption="Ginou dans son jardin, au milieu des fleurs (2002).">
|
||||
<img src="photos/divers/mini/nature1.jpg" alt="Ginou dans son jardin, au milieu des fleurs (2002).">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<h2>Statistiques</h2>
|
||||
<p>
|
||||
De 1956 à 2016, soit sur une période de 60 ans, Ginou a peint un total de 383 tableaux.<br>
|
||||
De 1956 à 2016, soit sur une période de 60 ans, Ginou a peint plus de de 385 tableaux.<br>
|
||||
Parmi ceux-ci, elle a le plus souvent aimé travailler à la lumière printanière du mois de mai avec un total de 50 tableaux.<br>
|
||||
Son année la plus active fut 1988 où elle réalisa 23 œuvres. Enfin, le format qu'elle privilégia fut le <em>55x46</em>, utilisé pour 53 toiles.
|
||||
Son année la plus active fut 1988 où elle réalisa 23 œuvres. Enfin, le genre de tableau qu’elle préféra peindre était des paysages, plus particulièrement à la campagne.
|
||||
</p>
|
||||
|
||||
<div id="stats">
|
||||
<div id="stat">
|
||||
<div class="stat">
|
||||
<canvas id="month" width="400" height="200"></canvas>
|
||||
</div>
|
||||
<div id="stat">
|
||||
<canvas id="month2" width="400" height="200"></canvas>
|
||||
<div class="stat">
|
||||
<canvas id="year" width="400" height="200"></canvas>
|
||||
</div>
|
||||
<div id="stat">
|
||||
<canvas id="month3" width="400" height="200"></canvas>
|
||||
<div class="stat">
|
||||
<canvas id="dimension" width="400" height="200"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
150
explorer.html
150
explorer.html
@ -8,63 +8,68 @@
|
||||
<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="plugins/jquery-3.5.1.min.js"></script>
|
||||
<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="plugins/pagination.min.js"></script>
|
||||
<link rel="stylesheet" href="plugins/pagination.css" media="screen">
|
||||
<link rel="stylesheet" href="styles/pagination.css" media="screen">
|
||||
<script src="scripts/explorer.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<nav>
|
||||
<img src="styles/icons/ginou.svg" class="ginou-icon">
|
||||
<div id="hamburger">
|
||||
<div class="container" onclick="mobilemenu()"><div class="bar1"></div><div class="bar2"></div><div class="bar3"></div></div>
|
||||
<div class="container"><div class="bar1"></div><div class="bar2"></div><div class="bar3"></div></div>
|
||||
</div>
|
||||
<ul>
|
||||
<li class="title">Ginou</li>
|
||||
<li><a href="index.html">Accueil</a></li>
|
||||
<li><a href="biographie.html">Biographie</a></li>
|
||||
<li><a href="exposition.html">Exposition</a></li>
|
||||
<li class="selected"><a href="explorer.html">Explorer</a></li>
|
||||
<li><a href="divers.html">Divers</a></li>
|
||||
<li><a href="informations.html">Informations</a></li>
|
||||
<div class="hidden">
|
||||
<li><a href="index.html">Accueil</a></li>
|
||||
<li><a href="biographie.html">Biographie</a></li>
|
||||
<li><a href="exposition.html">Exposition</a></li>
|
||||
<li class="selected"><a href="explorer.html">Explorer</a></li>
|
||||
<li><a href="divers.html">Divers</a></li>
|
||||
<li><a href="informations.html">Informations</a></li>
|
||||
</div>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<article class="explorer">
|
||||
<h1>Explorer</h1>
|
||||
<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'œuvre de Ginou, y compris les tableaux dont nous ne possédons pas de photo.<br>
|
||||
Une ☆ étoile vide dans la colonne photo signifie que nous n'avons pas de photo pour un tableau ; une ★ étoile qu'elle est de mauvaise qualité ; deux ★★ étoiles qu'elle est acceptable ; et trois ★★★ étoiles qu'elle est tout à fait satisfaisante.<br>
|
||||
Le symbole ‼︎ 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="intro" style="text-align:justify;">
|
||||
<p>Cette section permet de générer une <img width="14rem" src="styles/icons/list.svg" alt="liste"> <strong>liste</strong> (aussi visible sous la forme d'une <img width="16.5rem" src="styles/icons/frame.svg" alt="galerie"> <strong>galerie</strong>) en fonction de différents paramètres, listés ci-dessous. Elle permet d'explorer l'œuvre de Ginou, y compris les tableaux dont nous ne possédons pas de photo, grâce aux informations du petit carnet (voir la section <a href="divers.html">Divers</a>).</p>
|
||||
|
||||
<p>En mode <img width="14rem" src="styles/icons/list.svg" alt="liste"> liste, l'<strong>icône <img width="16.5rem" src="styles/icons/eye-black.svg" alt="œil"> œil</strong> permet de voir la photo du tableau ; en mode <img width="16.5rem" src="styles/icons/frame.svg" alt="galerie"> galerie, il faut <strong>cliquer sur les tableaux</strong> pour accéder à leurs informations.</p>
|
||||
|
||||
<div class="style-container">
|
||||
<h2 class="active">Configuration </h2>
|
||||
<img class="style-select frame" src="styles/icons/frame.svg">
|
||||
<img class="style-select list" src="styles/icons/list.svg">
|
||||
<p>Dans la colonne photo, une ☆ <strong>étoile vide</strong> signifie que nous n'avons pas de photo pour ce tableau ; une ★ <strong>étoile</strong> que la photo est de mauvaise qualité ; ★★ <strong>deux étoiles</strong> qu'elle est acceptable ; et ★★★ <strong>trois étoiles</strong> qu'elle est tout à fait satisfaisante.</p>
|
||||
|
||||
<p>Le symbole <img width="5rem" src="styles/icons/exclamation-mark.svg" alt="double point d'exclamation"> 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>
|
||||
|
||||
<p>Une fois cette liste générée, les options de configuration seront repliées, il suffit alors de cliquer sur la <img width="12rem" src="styles/icons/triangle.svg" alt="flèche"> <strong>flèche</strong> pour les faire réapparaître.</p>
|
||||
</div>
|
||||
<form action="">
|
||||
|
||||
<h2 class="active">Configuration </h2>
|
||||
<form name="explorer" onsubmit="onSubmit();">
|
||||
<div class="container">
|
||||
<div class="box years active">
|
||||
<div class="box photos active">
|
||||
<h3>Photo / État </h3>
|
||||
<div class="item-cont">
|
||||
<span><input type="checkbox" id="photos" name="photos" value="all">
|
||||
<label for="photos">Tout état</label></span>
|
||||
<div class="generated"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box years">
|
||||
<h3>Années </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 class="generated"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box months">
|
||||
@ -72,37 +77,15 @@
|
||||
<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 class="generated"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box dimensions">
|
||||
<h3>Dimensions </h3>
|
||||
<div class="box genres">
|
||||
<h3>Genres </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="genres" name="genres" value="all">
|
||||
<label for="genres">Tous</label></span>
|
||||
<div class="generated"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box themes">
|
||||
@ -110,13 +93,7 @@
|
||||
<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 categories">
|
||||
<h3>Catégories </h3>
|
||||
<div class="item-cont">
|
||||
<span><input type="checkbox" id="categories" name="categories" value="all">
|
||||
<label for="categories">Toutes</label></span>
|
||||
<div class="generated"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box places">
|
||||
@ -124,6 +101,7 @@
|
||||
<div class="item-cont">
|
||||
<span><input type="checkbox" id="places" name="places" value="all">
|
||||
<label for="places">Tous</label></span>
|
||||
<span><span class="inline">※ </span><select name="place"></select></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box tags">
|
||||
@ -131,21 +109,15 @@
|
||||
<div class="item-cont">
|
||||
<span><input type="checkbox" id="tags" name="tags" value="all">
|
||||
<label for="tags">Tous</label></span>
|
||||
<span class="first"><span class="inline">※ </span><select name="tag"></select></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box photos">
|
||||
<h3>État photo </h3>
|
||||
<div class="box dimensions">
|
||||
<h3>Dimensions </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">☆ aucune</label></span>
|
||||
<span><input type="checkbox" id="bad" name="photo" value="bad">
|
||||
<label for="bad">★ mauvaise</label></span>
|
||||
<span><input type="checkbox" id="ok" name="photo" value="ok">
|
||||
<label for="ok">★★ acceptable</label></span>
|
||||
<span><input type="checkbox" id="good" name="photo" value="good">
|
||||
<label for="good">★★★ bonne</label></span>
|
||||
<span><input type="checkbox" id="dimensions" name="dimensions" value="all">
|
||||
<label for="dimensions">Toutes</label></span>
|
||||
<div class="generated"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box help">
|
||||
@ -153,17 +125,24 @@
|
||||
<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">‼︎ Oui</label></span>
|
||||
<div class="generated"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<input type="submit" value="Générer">
|
||||
<div class="button-cont">
|
||||
<input type="submit" value="Générer">
|
||||
<input type="button" value="Réinitialiser" class="reinit">
|
||||
</div>
|
||||
</form>
|
||||
<p class="no-result"><strong>Aucun résultat.</strong> Veuillez réessayer avec d'autres paramètres.</p>
|
||||
<div id="gallery"></div>
|
||||
<div id="style-container">
|
||||
<img class="style-select frame" src="styles/icons/frame.svg" alt="galerie">
|
||||
<img class="style-select list" src="styles/icons/list.svg" alt="liste">
|
||||
</div>
|
||||
<div id="gallery">
|
||||
<div id="pagination" style="display:table; text-align:center; margin:auto;"></div>
|
||||
<div class="gallery"></div>
|
||||
</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
@ -171,8 +150,8 @@
|
||||
<th>Titre</th>
|
||||
<th>Année</th>
|
||||
<th>Dimension</th>
|
||||
<th>Genre</th>
|
||||
<th>Thème</th>
|
||||
<th>Catégorie</th>
|
||||
<th>Lieu</th>
|
||||
<th>Tags</th>
|
||||
<th>Photo</th>
|
||||
@ -181,6 +160,7 @@
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
<p class="result center"></p>
|
||||
</article>
|
||||
</body>
|
||||
</html>
|
||||
@ -8,34 +8,44 @@
|
||||
<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>
|
||||
<link rel="stylesheet" href="styles/fancybox.css" media="screen">
|
||||
<link rel="stylesheet" href="styles/pagination.css" media="screen">
|
||||
<script src="plugins/jquery-3.5.1.min.js"></script>
|
||||
<script src="scripts/menu.js"></script>
|
||||
<link href="plugins/jquery.fancybox.min.css" rel="stylesheet">
|
||||
<script src="plugins/jquery.fancybox.min.js"></script>
|
||||
<script src="plugins/pagination.min.js"></script>
|
||||
<link rel="stylesheet" href="plugins/pagination.css" media="screen">
|
||||
<script src="scripts/exposition.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<nav>
|
||||
<img src="styles/icons/ginou.svg" class="ginou-icon">
|
||||
<div id="hamburger">
|
||||
<div class="container" onclick="mobilemenu()"><div class="bar1"></div><div class="bar2"></div><div class="bar3"></div></div>
|
||||
<div class="container"><div class="bar1"></div><div class="bar2"></div><div class="bar3"></div></div>
|
||||
</div>
|
||||
<ul>
|
||||
<li class="title">Ginou</li>
|
||||
<li><a href="index.html">Accueil</a></li>
|
||||
<li><a href="biographie.html">Biographie</a></li>
|
||||
<li class="selected"><a href="exposition.html">Exposition</a></li>
|
||||
<li><a href="explorer.html">Explorer</a></li>
|
||||
<li><a href="divers.html">Divers</a></li>
|
||||
<li><a href="informations.html">Informations</a></li>
|
||||
<div class="hidden">
|
||||
<li><a href="index.html">Accueil</a></li>
|
||||
<li><a href="biographie.html">Biographie</a></li>
|
||||
<li class="selected"><a href="exposition.html">Exposition</a></li>
|
||||
<li><a href="explorer.html">Explorer</a></li>
|
||||
<li><a href="divers.html">Divers</a></li>
|
||||
<li><a href="informations.html">Informations</a></li>
|
||||
</div>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<article class="exposition">
|
||||
<h1>Exposition</h1>
|
||||
<div id="gallery"></div>
|
||||
<div class="intro center">
|
||||
<p>Cette section présente une sélection de tableaux représentatifs de l'œuvre de Ginou. La section <a href="explorer.html">Explorer</a> permet de tous les consulter.</p>
|
||||
<p>Pour voir un tableau en haute résolution ainsi que ses informations, veuillez cliquer sur celui-ci.</p>
|
||||
</div>
|
||||
<div id="pagination" style="display:table; text-align:center; margin:auto;"></div>
|
||||
<div class="gallery"></div>
|
||||
</article>
|
||||
</body>
|
||||
</html>
|
||||
BIN
images/ginou50.jpg
Normal file
BIN
images/ginou50.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 162 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 799 KiB After Width: | Height: | Size: 604 KiB |
29
index.html
29
index.html
@ -8,35 +8,40 @@
|
||||
<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="plugins/jquery-3.5.1.min.js"></script>
|
||||
<script src="scripts/menu.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<nav>
|
||||
<img src="styles/icons/ginou.svg" class="ginou-icon">
|
||||
<div id="hamburger">
|
||||
<div class="container" onclick="mobilemenu()"><div class="bar1"></div><div class="bar2"></div><div class="bar3"></div></div>
|
||||
<div class="container"><div class="bar1"></div><div class="bar2"></div><div class="bar3"></div></div>
|
||||
</div>
|
||||
<ul>
|
||||
<li class="title">Ginou</li>
|
||||
<li class="selected"><a href="index.html">Accueil</a></li>
|
||||
<li><a href="biographie.html">Biographie</a></li>
|
||||
<li><a href="exposition.html">Exposition</a></li>
|
||||
<li><a href="explorer.html">Explorer</a></li>
|
||||
<li><a href="divers.html">Divers</a></li>
|
||||
<li><a href="informations.html">Informations</a></li>
|
||||
<div class="hidden">
|
||||
<li class="selected"><a href="index.html">Accueil</a></li>
|
||||
<li><a href="biographie.html">Biographie</a></li>
|
||||
<li><a href="exposition.html">Exposition</a></li>
|
||||
<li><a href="explorer.html">Explorer</a></li>
|
||||
<li><a href="divers.html">Divers</a></li>
|
||||
<li><a href="informations.html">Informations</a></li>
|
||||
</div>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<article class="main">
|
||||
<h1>L'art de Ginou</h1>
|
||||
<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>Ginou était une artiste peintre autodidacte très appréciée dans son entourage et dans un cercle plus élargi grâce aux expositions de peinture annuelles dans sa région. Elle a réalisé de nombreuses œuvres, principalement des <strong>peintures à l’huile</strong>, plus rarement des <strong>aquarelles</strong>. Elle a également réalisé de nombreuses <strong>peintures sur soie</strong> et plus occasionnellement <strong>sur bois</strong>. Elle illustrait aussi ses <strong>cahiers de poèmes</strong>.</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>
|
||||
<p>Tout au long de sa vie, Ginou a tenu à jour un petit carnet où elle consignait ses tableaux. Elle leur attribuait un numéro et un titre. Elle notait leurs dimensions ainsi que le nom de leur destinataires ou acheteurs. De <strong>de 1958 à 2017</strong> sont référencés 383 tableaux. Deux d'entre eux (nº33 et nº49) ont été recouverts par Ginou elle-même. Nous avons pour l'instant retrouvé quatre tableaux inédits, non listés dans ce carnet. Ginou a commencé à prendre en photos certains tableaux dans les années 1980 puis plus systématiquement à partir des années 2000. Pour compléter et améliorer cette base iconographique, nous avons photographié en haute résolution les tableaux en notre possession.
|
||||
|
||||
<p>Ce site comprend actuellement <strong>249 tableaux</strong> sur les <strong>385 peints à l'huile</strong>. Il est conçu pour présenter un aperçu de son talent et pour que tout le monde puisse apprécier son œuvre.</p>
|
||||
|
||||
<p>Ce site est conçu pour présenter un aperçu de son talent et pour que tout le monde puisse apprécier son œuvre.</p>
|
||||
<p>Vous pouvez commencer votre visite par la section <a href="exposition.html">Exposition</a>.</p>
|
||||
|
||||
<p class="signature">Ses enfants et ses petits-enfants</p>
|
||||
<p class="signature center">Ses enfants, Denis et Laurence, et ses petits-enfants, Théo, Chloé et Maxime</p>
|
||||
|
||||
<p><img src="images/ginoupainting.jpg" alt="Ginou peignant"></p>
|
||||
</article>
|
||||
|
||||
@ -8,24 +8,28 @@
|
||||
<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/mail.js"></script>
|
||||
<link href="plugins/chart.min.css" rel="stylesheet">
|
||||
<script src="plugins/chart.bundle.min.js"></script>
|
||||
<script src="scripts/menu.js"></script>
|
||||
<script src="scripts/informations.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<nav>
|
||||
<img src="styles/icons/ginou.svg" class="ginou-icon">
|
||||
<div id="hamburger">
|
||||
<div class="container" onclick="mobilemenu()"><div class="bar1"></div><div class="bar2"></div><div class="bar3"></div></div>
|
||||
<div class="container"><div class="bar1"></div><div class="bar2"></div><div class="bar3"></div></div>
|
||||
</div>
|
||||
<ul>
|
||||
<li class="title">Ginou</li>
|
||||
<li><a href="index.html">Accueil</a></li>
|
||||
<li><a href="biographie.html">Biographie</a></li>
|
||||
<li><a href="exposition.html">Exposition</a></li>
|
||||
<li><a href="explorer.html">Explorer</a></li>
|
||||
<li><a href="divers.html">Divers</a></li>
|
||||
<li class="selected"><a href="informations.html">Informations</a></li>
|
||||
<div class="hidden">
|
||||
<li><a href="index.html">Accueil</a></li>
|
||||
<li><a href="biographie.html">Biographie</a></li>
|
||||
<li><a href="exposition.html">Exposition</a></li>
|
||||
<li><a href="explorer.html">Explorer</a></li>
|
||||
<li><a href="divers.html">Divers</a></li>
|
||||
<li class="selected"><a href="informations.html">Informations</a></li>
|
||||
</div>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
@ -33,30 +37,40 @@
|
||||
<article class="main infos">
|
||||
<h1>Informations</h1>
|
||||
|
||||
<h2>Contact</h2>
|
||||
<p>Ce site dédié à la mémoire de Ginou n'est pas complet, et ne le sera peut-être malheureusement jamais. Cependant, si vous êtes en possession d'une de ses œuvres qui n'est pas réportorié ou dont la photo est manquante, vous pouvez nous contacter pour que nous puissions l'intégrer. Nous vous en serions extrêmement reconnaissants !</p>
|
||||
<h2>Nous aider à compléter le site - contact</h2>
|
||||
<p>Ce site dédié à la mémoire de Ginou n'est pas complet, et ne le sera peut-être malheureusement jamais. Cependant, si vous êtes en possession de l'une de ses œuvres qui n'est pas répertoriée ou dont la photo est manquante ou de mauvaise qualité, vous pouvez nous contacter pour que nous puissions l'ajouter. Nous vous en serions extrêmement reconnaissants !</p>
|
||||
|
||||
<p>Vous pouvez nous joindre en cliquant ici : <a href="mailto:badmail" class="mail">nous contacter</a> (cela va devrait ouvrir votre client mail par défaut).</p>
|
||||
<p>Vous pouvez nous joindre en cliquant ici : <a href="mailto:badmail" class="mail">nous contacter</a> (cela devrait ouvrir votre client mail par défaut).</p>
|
||||
|
||||
<div class="stat">
|
||||
<canvas id="photo"></canvas>
|
||||
<span class="legend-cont"><span class="legend none"></span><span>Photo manquante</span></span>
|
||||
<span class="legend-cont"><span class="legend bad"></span><span>Photo de mauvaise qualité</span></span>
|
||||
<span class="legend-cont"><span class="legend ok"></span><span>Photo de qualité acceptable</span></span>
|
||||
<span class="legend-cont"><span class="legend good"></span><span>Photo de bonne qualité</span></span>
|
||||
</div>
|
||||
|
||||
<p>Certains noms de famille ont été remplacé par leurs initiales afin de respecter la vie privée des personnes dont Ginou a réalisé un portrait. Si ces personnes ou leur famille nous autorisent à publier le nom de famille complet en nous contactant, nous le feront avec plaisir.</p>
|
||||
|
||||
<h2>Notice d'utilisation</h2>
|
||||
<p>Le site est constitué autour de deux rubriques majeures : <em>Exposition</em> et <em>Explorer</em>.<br></p>
|
||||
|
||||
<h4>Exposition</h4>
|
||||
<p>Cette rubrique présente sous la forme d'une galerie qualitative. Seuls les tableaux dont nous possédons une photo de qualité un minimum correct sont affichés. Ceci la rend incomplet, mais c'est le meilleur moyen de découvrir de manière agréable l'œuvre de Ginou. En cliquant sur une photo d'un tableau, une galerie interactive s'ouvre. Il est alors possible de se déplacer à l'intérieur (avec les flèches de son clavier ou en glissant sur l'écran de son téléphone) pour voir la photo du tableau en grand. En bas, se trouve un cartel avec les informations essentiels du tableau. En appuyant sur le <strong>ℹ︎</strong> situé en haut à droite du cartel, on accède à une page incluant également les méta-données du tableau. Il est ainsi possible de voir la photo dans sa qualité maximale, par exemple.</p>
|
||||
<p>Cette rubrique se présente sous la forme d'une galerie de tableaux représentatifs dont nous possédons une photo de qualité correcte. Ceci la rend incomplète, mais c'est le meilleur moyen de découvrir de manière agréable l'œuvre de Ginou. En cliquant sur la photo d'un tableau, une galerie interactive s'ouvre. Il est alors possible de se déplacer à l'intérieur de cette galerie (avec les flèches de son clavier ou en glissant son doigt sur l'écran de son téléphone ou tablette) tout en visualisant les tableaux en haute résolution. Dans ce mode, au bas du tableau se trouve un cartel avec ses informations essentielles. En appuyant sur le <strong>ℹ︎</strong> situé en haut à droite du cartel, on accède à une page incluant également les méta-données du tableau. Il est ainsi possible de voir la photo dans sa qualité maximale, par exemple, ou encore son thème, le lieu représenté, etc.</p>
|
||||
|
||||
<h4>Explorer</h4>
|
||||
<p>Cette rubrique quant à elle est interactive et permet de visualiser l'entièreté des créations de Ginou. En effet, elle regorge d'options pour pouvoir choisir précisément les tableaux à afficher. Par exemple, tous les tableaux de chiens dont la photo est de bonne qualité réalisés un mois de février : il suffit de sélectionner ces options et de cliquer sur le bouton <strong>Générer</strong>. Évidemment, il est possible qu'il n'en existe pas, ce qui sera alors indiqué.<br>
|
||||
Le résultat affiché sera sous la forme d'un tableau, mais il est également possible de l'afficher de la même manière que dans la rubrique Exposition en cliquant sur le bouton en haut à gauche (seulement, il risque d'y avoir un certain nombre de tableaux dont la photo est indisponible, en fonction des critères de sélection).</p>
|
||||
<p>Cette rubrique quant à elle est interactive et permet de visualiser l'ensemble des créations de Ginou. En effet, elle regorge d'options pour pouvoir choisir précisément les tableaux à afficher. Par exemple, il est possible de créer un filtre pour voir tous les tableaux de chiens dont la photo est de bonne qualité réalisés un mois de février : il suffit de sélectionner ces options et de cliquer sur le bouton <strong>Générer</strong>. Bien évidemment, il est possible qu'il n'existe pas de tableau réunissant ces critères, ce qui sera alors indiqué.<br>
|
||||
Le résultat affiché sera sous la forme d'une liste, mais il est également possible de l'afficher sous forme d'une galerie (comme dans la rubrique Exposition) en cliquant sur le bouton en haut à droite. Dans ce mode, les tableaux n’ayant pas de photo disponible montreront une icône indiquant que la photo est manquante.</p>
|
||||
|
||||
<h4>Divers</h4>
|
||||
<p>Cette page regroupe diverses photos et informations : une vue de l'atelier que Ginou utilisait ses dernières années, des photos d'exposition, des coupures de presse, ainsi que des statistiques intéressante (on peut remarquer que le printemps l'inspirait !). N'hésitez pas à nous contacter si vous avez du contenu intéressant, notamment pour les coupures de presse.</p>
|
||||
<p>Cette page regroupe diverses photos et informations en complément de la biographie : une vue de son atelier, des photos d'expositions, des coupures de presse, ainsi que des statistiques intéressantes (on peut remarquer que le printemps l'inspirait !). N'hésitez pas à nous contacter si vous avez un document, une photo, des coupures de presse, tout ce qui peut être en relation avec l’art de Ginou.</p>
|
||||
|
||||
<h2>Informations technique</h2>
|
||||
<p>Ce site a été développé à l'aide de la librairie <a href="https://jquery.com/">jQuery</a>, ainsi que du plugin <a href="https://fancyapps.com/fancybox/3/">FancyBox 3</a> et <a href="https://www.chartjs.org/">Chart.js</a>. Les polices de caractères utilisées sont <a href="https://github.com/googlefonts/Rubik">Rubik</a>, <a href="https://github.com/kosbarts/Commissioner">Commissioner</a> et <a href="https://www.1001fonts.com/hot-august-night-font.html">Hot August Night</a>. Emoji "tableau" par <a href="https://openmoji.org/">OpenMoji</a>.</p>
|
||||
<p>Ce site a été développé à l'aide de la librairie <a href="https://jquery.com/">jQuery</a>, ainsi que des plugins <a href="https://fancyapps.com/fancybox/3/">fancybox 3</a>, <a href="https://www.chartjs.org/">Chart.js</a> et <a href="https://pagination.js.org/">Pagination.js</a>. Les polices de caractères utilisées sont <a href="https://github.com/googlefonts/Rubik">Rubik</a> et <a href="https://github.com/kosbarts/Commissioner">Commissioner</a>. Emoji "tableau" par <a href="https://openmoji.org/">OpenMoji</a>.</p>
|
||||
|
||||
<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>Site réalisé par <a href="https://theo.marchal.dev">Théo</a> et Denis Marchal avec la participation de toute la famille. Dernière mise à jour en avril 2021.</p>
|
||||
</article>
|
||||
</body>
|
||||
</html>
|
||||
@ -2,30 +2,32 @@
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Ginou • tableau nº</title>
|
||||
<title>Ginou • tableau </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/menu.js"></script>
|
||||
<script src="scripts/painting.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<nav>
|
||||
<img src="styles/icons/ginou.svg" class="ginou-icon">
|
||||
<div id="hamburger">
|
||||
<div class="container" onclick="mobilemenu()"><div class="bar1"></div><div class="bar2"></div><div class="bar3"></div></div>
|
||||
<div class="container"><div class="bar1"></div><div class="bar2"></div><div class="bar3"></div></div>
|
||||
</div>
|
||||
<ul>
|
||||
<li class="title">Ginou</li>
|
||||
<li><a href="index.html">Accueil</a></li>
|
||||
<li><a href="biographie.html">Biographie</a></li>
|
||||
<li><a href="exposition.html">Exposition</a></li>
|
||||
<li><a href="explorer.html">Explorer</a></li>
|
||||
<li><a href="divers.html">Divers</a></li>
|
||||
<li><a href="informations.html">Informations</a></li>
|
||||
<div class="hidden">
|
||||
<li><a href="index.html">Accueil</a></li>
|
||||
<li><a href="biographie.html">Biographie</a></li>
|
||||
<li><a href="exposition.html">Exposition</a></li>
|
||||
<li><a href="explorer.html">Explorer</a></li>
|
||||
<li><a href="divers.html">Divers</a></li>
|
||||
<li><a href="informations.html">Informations</a></li>
|
||||
</div>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
@ -46,13 +48,14 @@
|
||||
<li><span class="title">date :</span><span class="content date"> </span></li>
|
||||
<li><span class="title">format :</span><span class="content dimension"> </span></li>
|
||||
<li><span class="title">support :</span><span class="content support"> </span></li>
|
||||
<li><span class="title">genre :</span><span class="content genre"> </span></li>
|
||||
<li><span class="title">thème :</span><span class="content theme"> </span></li>
|
||||
<li><span class="title">lieu :</span><span class="content place"> </span></li>
|
||||
<li><span class="title">catégorie :</span><span class="content category"> </span></li>
|
||||
<li><span class="title">état photo :</span><span class="content photo"> </span></li>
|
||||
<li><span class="title">aide requise :</span><span class="content help"> </span></li>
|
||||
<li><span class="title">tags :</span><span class="content tag"> </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>
|
||||
<li><span class="content original"><a href="photos/paintings/original/42.jpg">photo originale <img src="styles/icons/arrow.svg"></a></span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
2
photos
2
photos
Submodule photos updated: 76435953fc...64e7a332b3
1
plugins/pagination.css
Normal file
1
plugins/pagination.css
Normal file
File diff suppressed because one or more lines are too long
11
plugins/pagination.min.js
vendored
Normal file
11
plugins/pagination.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
@ -1,3 +1,24 @@
|
||||
// remove place and tag from url when unnecessary
|
||||
function onSubmit() {
|
||||
$("select[name=place]").each(function() {
|
||||
if ($(this).val() == "")
|
||||
$(this).remove();
|
||||
});
|
||||
|
||||
$("select[name=tag]").each(function() {
|
||||
if ($(this).val() == "")
|
||||
$(this).remove();
|
||||
});
|
||||
return true;
|
||||
}
|
||||
|
||||
function removeFromArray(array, item)
|
||||
{
|
||||
index = array.indexOf(item);
|
||||
if (index > -1)
|
||||
array.splice(index, 1);
|
||||
}
|
||||
|
||||
jQuery(document).ready(function($)
|
||||
{
|
||||
// get URL parameters
|
||||
@ -5,12 +26,13 @@ jQuery(document).ready(function($)
|
||||
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'));
|
||||
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'));
|
||||
params = { "year": paramYear, "month": paramMonth, "dimension": paramDimension, "genre": paramGenre, "theme": paramTheme, "place": paramPlace, "tag": paramTag, "photo": paramPhoto, "help": paramHelp }
|
||||
|
||||
$.getJSON("data.json", function(data)
|
||||
{
|
||||
@ -19,24 +41,118 @@ jQuery(document).ready(function($)
|
||||
/** MENU **/
|
||||
/**********/
|
||||
|
||||
var dimensions = [];
|
||||
var themes = [];
|
||||
var categories = [];
|
||||
var places = [];
|
||||
var tags = [];
|
||||
var availableOptions = [];
|
||||
var selectedOptions = [];
|
||||
|
||||
function generateMenu()
|
||||
// filter data depending of parameters
|
||||
function filterData(selectedOptions)
|
||||
{
|
||||
function CheckItem(name, selectedElements)
|
||||
{
|
||||
return function(item)
|
||||
{
|
||||
if (selectedElements.length == 0)
|
||||
return true;
|
||||
for (elem of selectedElements)
|
||||
{
|
||||
if (elem == "all")
|
||||
return true;
|
||||
if (item[name] == elem)
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
function CheckTag(item)
|
||||
{
|
||||
for (tag of selectedOptions.tags)
|
||||
{
|
||||
if (tag == "all")
|
||||
return true;
|
||||
if (!item.tags.includes(tag))
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
function CheckDimension(item)
|
||||
{
|
||||
if (selectedOptions.dimensions.length == 0)
|
||||
return true;
|
||||
for (dimension of selectedOptions.dimensions)
|
||||
{
|
||||
if (dimension == "all")
|
||||
return true;
|
||||
if (item.dimension.split("x")[0] == dimension)
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
data = data.filter(CheckTag);
|
||||
data = data.filter(CheckDimension);
|
||||
data = data.filter(CheckItem("year", selectedOptions.years));
|
||||
data = data.filter(CheckItem("photo", selectedOptions.photos));
|
||||
data = data.filter(CheckItem("month", selectedOptions.months));
|
||||
data = data.filter(CheckItem("genre", selectedOptions.genres));
|
||||
data = data.filter(CheckItem("theme", selectedOptions.themes));
|
||||
data = data.filter(CheckItem("place", selectedOptions.places));
|
||||
data = data.filter(CheckItem("help", selectedOptions.helps));
|
||||
}
|
||||
|
||||
// gather data from json to make form
|
||||
function gatherData()
|
||||
{
|
||||
var photos = []; var years = []; var months = []; var genres = [];
|
||||
var themes = []; var places = []; var tags = []; var dimensions = []; var helps = [];
|
||||
|
||||
function makeItem(item, array, displayName, min, max)
|
||||
{
|
||||
if (item >= min && item <= max)
|
||||
{
|
||||
if (array.indexOf(displayName) === -1)
|
||||
array.push(displayName);
|
||||
}
|
||||
}
|
||||
|
||||
for (i of data)
|
||||
{
|
||||
if (dimensions.indexOf(i.dimension) === -1 && i.dimension != "" && i.dimension != "—")
|
||||
dimensions.push(i.dimension);
|
||||
if (photos.indexOf(i.photo) === -1 && i.photo != "" && i.photo != "—")
|
||||
photos.push(i.photo);
|
||||
if (months.indexOf(i.month) === -1 && i.month != "" && i.month != "—")
|
||||
months.push(i.month);
|
||||
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 (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 (helps.indexOf(i.help) === -1 && i.help != "" && i.help != "—")
|
||||
helps.push(i.help);
|
||||
if (i.year != "" && i.year != "—")
|
||||
{
|
||||
makeItem(i.year, years, "50s", 1956, 1959);
|
||||
makeItem(i.year, years, "60s", 1960, 1969);
|
||||
makeItem(i.year, years, "70s", 1970, 1979);
|
||||
makeItem(i.year, years, "80s", 1980, 1989);
|
||||
makeItem(i.year, years, "90s", 1990, 1999);
|
||||
makeItem(i.year, years, "00s", 2000, 2009);
|
||||
makeItem(i.year, years, "10s", 2010, 2016);
|
||||
}
|
||||
if (i.dimension != "" && i.dimension != "—")
|
||||
{
|
||||
makeItem(i.dimension.split("x")[0], dimensions, "18", 0, 19);
|
||||
makeItem(i.dimension.split("x")[0], dimensions, "20", 20, 29);
|
||||
makeItem(i.dimension.split("x")[0], dimensions, "30", 30, 39);
|
||||
makeItem(i.dimension.split("x")[0], dimensions, "40", 40, 49);
|
||||
makeItem(i.dimension.split("x")[0], dimensions, "50", 50, 59);
|
||||
makeItem(i.dimension.split("x")[0], dimensions, "60", 60, 69);
|
||||
makeItem(i.dimension.split("x")[0], dimensions, "70", 70, 79);
|
||||
makeItem(i.dimension.split("x")[0], dimensions, "80", 80, 89);
|
||||
makeItem(i.dimension.split("x")[0], dimensions, "90", 90, 99);
|
||||
makeItem(i.dimension.split("x")[0], dimensions, "100", 100, 109);
|
||||
}
|
||||
if (tags.indexOf(i.tags) === -1 && i.tags != "" && i.tags != "—")
|
||||
{
|
||||
splitTags = i.tags.split(", ");
|
||||
@ -49,242 +165,247 @@ jQuery(document).ready(function($)
|
||||
}
|
||||
}
|
||||
|
||||
dimensions.sort();
|
||||
genres.sort();
|
||||
themes.sort();
|
||||
categories.sort();
|
||||
places.sort();
|
||||
tags.sort();
|
||||
helps.sort();
|
||||
places.sort(Intl.Collator().compare);
|
||||
tags.sort(Intl.Collator().compare);
|
||||
dimensions.sort(function(a, b) { return a - b; });
|
||||
var targetMonths = ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"];
|
||||
months.sort(function(a, b) { return targetMonths.indexOf(a) - targetMonths.indexOf(b); });
|
||||
var targetPhotos = ["none", "bad", "ok", "good"];
|
||||
photos.sort(function(a, b) { return targetPhotos.indexOf(a) - targetPhotos.indexOf(b); });
|
||||
|
||||
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 (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);
|
||||
}
|
||||
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 .item-cont").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 .item-cont").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 .item-cont").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);
|
||||
return {"photos": photos, "years": years, "months": months, "genres": genres, "themes": themes, "places": places, "tags": tags, "dimensions": dimensions, "helps": helps};
|
||||
}
|
||||
|
||||
// if "all" is selected, check all other options and disable them
|
||||
function AllCheckBoxSelector(names, name)
|
||||
// gather data from url to check available options
|
||||
function gatherURLdata()
|
||||
{
|
||||
$('input[id="' + names + '"]').click(function()
|
||||
selectedYears = [];
|
||||
selectedDimensions = [];
|
||||
selectedPhotos = params.photo;
|
||||
if (selectedPhotos.includes("exist"))
|
||||
{
|
||||
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);
|
||||
}
|
||||
});
|
||||
if (selectedPhotos.indexOf("bad") === -1) selectedPhotos.push("bad");
|
||||
if (selectedPhotos.indexOf("ok") === -1) selectedPhotos.push("ok");
|
||||
if (selectedPhotos.indexOf("good") === -1) selectedPhotos.push("good");
|
||||
}
|
||||
selectedMonths = params.month;
|
||||
selectedGenres = params.genre;
|
||||
selectedThemes = params.theme;
|
||||
selectedPlaces = params.place;
|
||||
selectedTags = params.tag;
|
||||
selectedHelps = params.help;
|
||||
for (p of params.year)
|
||||
{
|
||||
if (p == "50s") for (i = 1956; i <= 1959; i++) selectedYears.push(i);
|
||||
if (p == "60s") for (i = 1960; i <= 1969; i++) selectedYears.push(i);
|
||||
if (p == "70s") for (i = 1970; i <= 1979; i++) selectedYears.push(i);
|
||||
if (p == "80s") for (i = 1980; i <= 1989; i++) selectedYears.push(i);
|
||||
if (p == "90s") for (i = 1990; i <= 1999; i++) selectedYears.push(i);
|
||||
if (p == "00s") for (i = 2000; i <= 2009; i++) selectedYears.push(i);
|
||||
if (p == "10s") for (i = 2010; i <= 2016; i++) selectedYears.push(i);
|
||||
}
|
||||
for (p of params.dimension)
|
||||
{
|
||||
if (p == "18") for (i = 18; i <= 19; i++) selectedDimensions.push(i);
|
||||
if (p == "20") for (i = 20; i <= 29; i++) selectedDimensions.push(i);
|
||||
if (p == "30") for (i = 30; i <= 39; i++) selectedDimensions.push(i);
|
||||
if (p == "40") for (i = 40; i <= 49; i++) selectedDimensions.push(i);
|
||||
if (p == "50") for (i = 50; i <= 59; i++) selectedDimensions.push(i);
|
||||
if (p == "60") for (i = 60; i <= 69; i++) selectedDimensions.push(i);
|
||||
if (p == "70") for (i = 70; i <= 79; i++) selectedDimensions.push(i);
|
||||
if (p == "80") for (i = 80; i <= 89; i++) selectedDimensions.push(i);
|
||||
if (p == "90") for (i = 90; i <= 99; i++) selectedDimensions.push(i);
|
||||
if (p == "100") for (i = 100; i <= 109; i++) selectedDimensions.push(i);
|
||||
}
|
||||
return {"photos": selectedPhotos, "years": selectedYears, "months": selectedMonths, "genres": selectedGenres, "themes": selectedThemes,
|
||||
"places": selectedPlaces, "tags": selectedTags, "dimensions": selectedDimensions, "helps": selectedHelps};
|
||||
}
|
||||
|
||||
$("input").prop("checked", false); // by default, uncheck all options
|
||||
var originalData = data;
|
||||
var originalAvailableOptions = gatherData();
|
||||
|
||||
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()
|
||||
selectedOptions = gatherURLdata();
|
||||
filterData(selectedOptions);
|
||||
|
||||
$("input.reinit").click(function()
|
||||
{
|
||||
if ($(this).hasClass("active"))
|
||||
{
|
||||
$(this).removeClass("active");
|
||||
$("form").slideUp(200);
|
||||
}
|
||||
else
|
||||
{
|
||||
$(this).addClass("active");
|
||||
$("form").slideDown(200);
|
||||
}
|
||||
$('input').prop("disabled", false);
|
||||
$('input').prop("checked", false);
|
||||
$('select').val("");
|
||||
data = originalData;
|
||||
availableOptions = originalAvailableOptions;
|
||||
params = {};
|
||||
updateMenu(availableOptions);
|
||||
});
|
||||
|
||||
// menu configurer child on mobile show/hide
|
||||
if ($(window).width() <= 600)
|
||||
// menu initial generation
|
||||
$.getScript("scripts/explorer_menu.js", function()
|
||||
{
|
||||
$("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);
|
||||
}
|
||||
});
|
||||
}
|
||||
generateMenu(originalAvailableOptions);
|
||||
availableOptions = gatherData();
|
||||
|
||||
userActionHandle(availableOptions);
|
||||
URLGeneration(originalAvailableOptions);
|
||||
updateMenu(availableOptions);
|
||||
|
||||
function handleVisualFilterChanges()
|
||||
{
|
||||
function makeFilterChanges()
|
||||
{
|
||||
selectedOptions = gatherURLdata();
|
||||
data = originalData;
|
||||
filterData(selectedOptions);
|
||||
availableOptions = [];
|
||||
availableOptions = gatherData();
|
||||
updateMenu(availableOptions);
|
||||
}
|
||||
|
||||
// handle tags
|
||||
function handleTags()
|
||||
{
|
||||
$('input[name="tags"]').change(function()
|
||||
{
|
||||
params["tag"] = []; // remove filter
|
||||
if (this.checked)
|
||||
{
|
||||
$('select[name="tag"] option[value=""]').prop('selected', true);
|
||||
$('select[name="tag"]').attr('disabled', 'disabled');
|
||||
$(".box.tags span:not(.first) select").parent().remove();
|
||||
}
|
||||
else
|
||||
$('select[name="tag"]').removeAttr('disabled');
|
||||
|
||||
makeFilterChanges();
|
||||
});
|
||||
|
||||
$('.box.tags .item-cont').delegate('select[name="tag"]', 'change', function()
|
||||
{
|
||||
params.tag = []; // collect all tags from all dropdowns
|
||||
$('.box.tags .item-cont select[name="tag"]').each(function()
|
||||
{
|
||||
if (params.tag.indexOf(this.value) === -1 && this.value != "")
|
||||
params.tag.push(this.value);
|
||||
});
|
||||
|
||||
if (this.value != "")
|
||||
{
|
||||
createNewElem = true; // if we modify an existing element to a value, we don't delete it
|
||||
$('.box.tags select').each(function()
|
||||
{
|
||||
if ($(this).val() == "")
|
||||
createNewElem = false;
|
||||
});
|
||||
if (createNewElem)
|
||||
{
|
||||
html = '<span><span class="inline">※ </span><select name="tag">';
|
||||
html += '<option value="">Aucun filtre</option>';
|
||||
for (a of originalAvailableOptions.tags)
|
||||
html += '<option value="' + a + '">' + a + '</option>';
|
||||
html += '</select></span>';
|
||||
$(".box.tags .item-cont").append(html);
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
// if the element has no value, we delete it
|
||||
$(this).parent().remove();
|
||||
}
|
||||
|
||||
makeFilterChanges();
|
||||
});
|
||||
}
|
||||
handleTags();
|
||||
|
||||
function visualFilterCheckboxItem(name)
|
||||
{
|
||||
$('input[name="' + name + 's"]').change(function()
|
||||
{
|
||||
params[name] = []; // remove filter
|
||||
makeFilterChanges();
|
||||
});
|
||||
|
||||
$('input[name="' + name + '"]').change(function()
|
||||
{
|
||||
if (this.checked)
|
||||
{
|
||||
if (this.id == "exist") // photos special case
|
||||
{
|
||||
params[name].push("bad");
|
||||
params[name].push("ok");
|
||||
params[name].push("good");
|
||||
}
|
||||
params[name].push(this.id);
|
||||
}
|
||||
else
|
||||
{
|
||||
if (this.id == "exist") // photos special case
|
||||
{
|
||||
removeFromArray(params[name], "bad");
|
||||
removeFromArray(params[name], "ok");
|
||||
removeFromArray(params[name], "good");
|
||||
}
|
||||
removeFromArray(params[name], this.id);
|
||||
}
|
||||
|
||||
makeFilterChanges();
|
||||
});
|
||||
}
|
||||
|
||||
function visualFilterListItem(name)
|
||||
{
|
||||
$('input[name="' + name + 's"]').change(function()
|
||||
{
|
||||
params[name] = []; // remove filter
|
||||
if (this.checked)
|
||||
{
|
||||
$('select[name="' + name + '"] option[value=""]').prop('selected', true);
|
||||
$('select[name="' + name + '"]').attr('disabled', 'disabled');
|
||||
}
|
||||
else
|
||||
$('select[name="' + name + '"]').removeAttr('disabled');
|
||||
|
||||
makeFilterChanges();
|
||||
});
|
||||
|
||||
$('select[name="' + name + '"]').change(function()
|
||||
{
|
||||
if (this.value == "" && name == "place")
|
||||
params[name].pop();
|
||||
else
|
||||
params[name].push(this.value);
|
||||
|
||||
makeFilterChanges();
|
||||
});
|
||||
}
|
||||
|
||||
visualFilterCheckboxItem("photo");
|
||||
visualFilterCheckboxItem("year");
|
||||
visualFilterCheckboxItem("month");
|
||||
visualFilterCheckboxItem("genre");
|
||||
visualFilterCheckboxItem("theme");
|
||||
visualFilterCheckboxItem("dimension");
|
||||
visualFilterCheckboxItem("help");
|
||||
visualFilterListItem("place");
|
||||
}
|
||||
handleVisualFilterChanges();
|
||||
});
|
||||
|
||||
/*********************/
|
||||
/** 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(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;
|
||||
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;
|
||||
}
|
||||
// gallery vars
|
||||
window.pageSize = 14;
|
||||
window.paintingList = [];
|
||||
|
||||
function generateTable()
|
||||
{
|
||||
hasResult = false;
|
||||
numberOfItem = 0;
|
||||
canDisplay = true;
|
||||
|
||||
for (i of data)
|
||||
{
|
||||
@ -293,21 +414,11 @@ jQuery(document).ready(function($)
|
||||
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;
|
||||
numberOfItem++;
|
||||
|
||||
// table
|
||||
$("table").css("display", "block");
|
||||
@ -315,10 +426,10 @@ jQuery(document).ready(function($)
|
||||
result = "<tr>";
|
||||
result += "<td>" + i.number + "</td>";
|
||||
result += "<td>" + i.title + "</td>";
|
||||
result += "<td>" + i.year + "</td>";
|
||||
result += "<td>" + (i.month != "—" ? i.month + " " : "") + i.year + "</td>";
|
||||
result += "<td>" + i.dimension + "</td>";
|
||||
result += "<td>" + i.genre + "</td>";
|
||||
result += "<td>" + i.theme + "</td>";
|
||||
result += "<td>" + i.category + "</td>";
|
||||
result += "<td>" + i.place + "</td>";
|
||||
result += "<td>" + i.tags + "</td>";
|
||||
|
||||
@ -332,35 +443,60 @@ jQuery(document).ready(function($)
|
||||
result += '<td class="photo">☆</td>';
|
||||
|
||||
if (i.help == "yes")
|
||||
result += '<td class="help">‼︎</td>'
|
||||
result += '<td class="help"><img width="5rem" src="styles/icons/exclamation-mark.svg" alt="Oui"></td>'
|
||||
else
|
||||
result += '<td> </td>'
|
||||
|
||||
result += '<td><a href="painting.html?number=' + i.number + '"><img src="styles/icons/eye.svg"></a></td>';
|
||||
result += '<td><a data-fancybox="exposition-list" href="';
|
||||
if (i.photo == "none")
|
||||
result += 'images/unknown.jpg';
|
||||
else
|
||||
result += 'photos/paintings/normal/' + i.number + '.jpg'
|
||||
result += '" data-fancybox-index="' + i.number + '"><img src="styles/icons/eye.svg"></a></td>';
|
||||
result += "</tr>";
|
||||
|
||||
$("table").append(result);
|
||||
|
||||
|
||||
// gallery
|
||||
paintingList.push(i.number);
|
||||
if (paintingList.length % (pageSize + 1) == 0)
|
||||
canDisplay = false;
|
||||
|
||||
paintingHtml = '<div class="gallery-item ';
|
||||
if (canDisplay)
|
||||
paintingHtml += 'active">';
|
||||
else
|
||||
paintingHtml += 'inactive">';
|
||||
|
||||
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>'
|
||||
paintingHtml += '<a data-fancybox="exposition" href="images/unknown.jpg" data-fancybox-index="' + i.number + '">'
|
||||
paintingHtml += '<img src="images/unknown.jpg" alt="Tableau ' + i.number + '"></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>'
|
||||
paintingHtml += '<a data-fancybox="exposition" href="photos/paintings/normal/' + i.number + '.jpg" data-fancybox-index="' + i.number + '">'
|
||||
paintingHtml += '<img src="photos/paintings/mini/" alt="Tableau ' + i.number + '"></a>'
|
||||
}
|
||||
$("#gallery").append(paintingHtml);
|
||||
|
||||
paintingHtml += '<span class="item-title">' + i.title;
|
||||
if (i.year != '—')
|
||||
paintingHtml += ' (' + i.year + ')';
|
||||
paintingHtml += '</span></div>';
|
||||
$(".gallery").append(paintingHtml);
|
||||
}
|
||||
$(".explorer .result").append("La recherche donne un résultat de <strong>" + numberOfItem + " élément" + (numberOfItem > 1 ? "s" : "") + "</strong>.");
|
||||
return hasResult;
|
||||
}
|
||||
|
||||
$("#gallery").hide();
|
||||
$(".style-select").hide();
|
||||
|
||||
generateMenu();
|
||||
var targetPage = 0;
|
||||
if (urlParams.get('page') != "")
|
||||
targetPage = urlParams.get('page');
|
||||
|
||||
var res = generateTable();
|
||||
|
||||
if (res) // display table or no result depending of computed result
|
||||
@ -368,61 +504,28 @@ jQuery(document).ready(function($)
|
||||
$(".style-select").show();
|
||||
$("article.explorer h2").removeClass("active")
|
||||
$("form").slideUp(200);
|
||||
}
|
||||
else
|
||||
$("article.explorer p.no-result").css("display", "block");
|
||||
$("article.explorer p.result").css("display", "block");
|
||||
|
||||
// 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);
|
||||
}
|
||||
// pagination configuration
|
||||
window.currentPage = 0;
|
||||
window.previousArray = []
|
||||
$.getScript("scripts/pagination.js", function() {
|
||||
paginationInit(data, paintingList, true);
|
||||
|
||||
if (targetPage > 0)
|
||||
$("#pagination").pagination('go', targetPage);
|
||||
});
|
||||
}
|
||||
|
||||
// change display: gallery/table
|
||||
$(".style-select.frame").click(function()
|
||||
else
|
||||
{
|
||||
$("table").hide();
|
||||
$("#gallery").show();
|
||||
})
|
||||
$(".style-select.list").click(function()
|
||||
{
|
||||
$("#gallery").hide();
|
||||
$("table").show();
|
||||
})
|
||||
$("article.explorer p.no-result").css("display", "block");
|
||||
$("article.explorer p.result").css("display", "none");
|
||||
}
|
||||
|
||||
|
||||
// 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
|
||||
return '\
|
||||
<div id="info">\
|
||||
<span class="info"><a href="painting.html?number=' + data[idx].number + '">ℹ︎</span></a></span>\
|
||||
<span class="title">' + data[idx].title + '</span><span class="year">' + (data[idx].month != '—' ? data[idx].month + ' ' : '') + 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>\
|
||||
';
|
||||
}
|
||||
$.getScript("scripts/fancybox.js", function() {
|
||||
fancyboxInit(data, true);
|
||||
});
|
||||
});
|
||||
});
|
||||
350
scripts/explorer_menu.js
Normal file
350
scripts/explorer_menu.js
Normal file
@ -0,0 +1,350 @@
|
||||
function generateMenu(availableOptions)
|
||||
{
|
||||
function createPhotoName(photo)
|
||||
{
|
||||
if (photo == "none") return "☆ manquant";
|
||||
if (photo == "bad") return "★ mauvais";
|
||||
if (photo == "ok") return "★★ acceptable";
|
||||
if (photo == "good") return "★★★ bon";
|
||||
}
|
||||
|
||||
function createYearName(year)
|
||||
{
|
||||
if (year == "50s") return "1956 - 1959";
|
||||
if (year == "60s") return "1960 - 1969";
|
||||
if (year == "70s") return "1970 - 1979";
|
||||
if (year == "80s") return "1980 - 1989";
|
||||
if (year == "90s") return "1990 - 1999";
|
||||
if (year == "00s") return "2000 - 2009";
|
||||
if (year == "10s") return "2010 - 2016";
|
||||
}
|
||||
|
||||
function createDimensionName(dimension)
|
||||
{
|
||||
if (dimension == "18") return "< 20cm";
|
||||
if (dimension == "20") return "20cm - 29cm";
|
||||
if (dimension == "30") return "30cm - 39cm";
|
||||
if (dimension == "40") return "40cm - 49cm";
|
||||
if (dimension == "50") return "50cm - 59cm";
|
||||
if (dimension == "60") return "60cm - 69cm";
|
||||
if (dimension == "70") return "70cm - 79cm";
|
||||
if (dimension == "80") return "80cm - 89cm";
|
||||
if (dimension == "90") return "90cm - 99cm";
|
||||
if (dimension == "100") return ">= 100cm";
|
||||
}
|
||||
|
||||
function createHelpName(photo)
|
||||
{
|
||||
if (photo == "yes") return '<img width="5rem" src="styles/icons/exclamation-mark.svg" alt="Oui"> Oui';
|
||||
if (photo == "no") return "Non";
|
||||
}
|
||||
|
||||
hasExist = false;
|
||||
for (photo of availableOptions.photos)
|
||||
{
|
||||
if (!hasExist && (photo == "bad" || photo == "ok" || photo == "good"))
|
||||
{
|
||||
html = '<span><input type="checkbox" id="exist" name="photo" value="exist"></input>\n';
|
||||
html += '<label for="exist">Disponible</label></span>';
|
||||
$(".box.photos .item-cont .generated").append(html);
|
||||
hasExist = true;
|
||||
}
|
||||
html = '<span><input type="checkbox" id="' + photo + '" name="photo" value="' + photo + '"></input>\n';
|
||||
html += '<label for="' + photo + '">' + createPhotoName(photo) + '</label></span>';
|
||||
$(".box.photos .item-cont .generated").append(html);
|
||||
}
|
||||
|
||||
for (year of availableOptions.years)
|
||||
{
|
||||
html = '<span><input type="checkbox" id="' + year + '" name="year" value="' + year + '"></input>\n';
|
||||
html += '<label for="' + year + '">' + createYearName(year) + '</label></span>';
|
||||
$(".box.years .item-cont .generated").append(html);
|
||||
}
|
||||
|
||||
for (month of availableOptions.months)
|
||||
{
|
||||
html = '<span><input type="checkbox" id="' + month + '" name="month" value="' + month + '"></input>\n';
|
||||
html += '<label for="' + month + '">' + month + '</label></span>';
|
||||
$(".box.months .item-cont .generated").append(html);
|
||||
}
|
||||
|
||||
for (genre of availableOptions.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 .generated").append(html);
|
||||
}
|
||||
|
||||
for (theme of availableOptions.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 .generated").append(html);
|
||||
}
|
||||
|
||||
for (dimension of availableOptions.dimensions)
|
||||
{
|
||||
html = '<span><input type="checkbox" id="' + dimension + '" name="dimension" value="' + dimension + '"></input>\n';
|
||||
html += '<label for="' + dimension + '">' + createDimensionName(dimension) + '</label></span>';
|
||||
$(".box.dimensions .item-cont .generated").append(html);
|
||||
}
|
||||
|
||||
for (help of availableOptions.helps)
|
||||
{
|
||||
html = '<span><input type="checkbox" id="' + help + '" name="help" value="' + help + '"></input>\n';
|
||||
html += '<label for="' + help + '">' + createHelpName(help) + '</label></span>';
|
||||
$(".box.help .item-cont .generated").append(html);
|
||||
}
|
||||
|
||||
$(".box.places select").append('<option value="">Aucun filtre</option');
|
||||
for (place of availableOptions.places)
|
||||
$(".box.places select").append('<option value="' + place + '">' + place + '</option');
|
||||
|
||||
$(".box.tags select").append('<option value="">Aucun filtre</option');
|
||||
for (tag of availableOptions.tags)
|
||||
$(".box.tags select").append('<option value="' + tag + '">' + tag + '</option');
|
||||
}
|
||||
|
||||
|
||||
function updateMenu(availableOptions)
|
||||
{
|
||||
function checkItem(name, array)
|
||||
{
|
||||
$('.' + name + ' .item-cont span input').each(function()
|
||||
{
|
||||
if (!array.includes($(this).prop("value")))
|
||||
{
|
||||
if ($(this).prop("value") != "all" && $(this).prop("value") != "exist")
|
||||
$(this).parent().addClass("filter");
|
||||
if ($(this).prop("value") == "exist") // special case for "exist" in photos
|
||||
{
|
||||
if (array.includes("none") && !array.includes("bad") && !array.includes("ok") && !array.includes("good"))
|
||||
$(this).parent().addClass("filter");
|
||||
else
|
||||
$(this).parent().removeClass("filter");
|
||||
}
|
||||
}
|
||||
else
|
||||
$(this).parent().removeClass("filter");
|
||||
});
|
||||
}
|
||||
|
||||
function checkListItem(name, array)
|
||||
{
|
||||
$('.' + name + ' select option').each(function()
|
||||
{
|
||||
if (!array.includes($(this).prop("value")))
|
||||
{
|
||||
if ($(this).prop("value") != "")
|
||||
{
|
||||
$(this).hide();
|
||||
$(this).attr('disabled', 'disabled'); // for iOS
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
$(this).show();
|
||||
$(this).removeAttr('disabled'); // for iOS
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
checkItem("photos", availableOptions.photos);
|
||||
checkItem("years", availableOptions.years);
|
||||
checkItem("months", availableOptions.months);
|
||||
checkItem("genres", availableOptions.genres);
|
||||
checkItem("themes", availableOptions.themes);
|
||||
checkItem("dimensions", availableOptions.dimensions);
|
||||
checkItem("help", availableOptions.helps);
|
||||
|
||||
checkListItem("places", availableOptions.places);
|
||||
checkListItem("tags", availableOptions.tags);
|
||||
}
|
||||
|
||||
|
||||
function URLGeneration(availableOptions)
|
||||
{
|
||||
// populate checkboxes depending on URL
|
||||
function URLcheckBoxSelector(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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// populate list depending on URL
|
||||
function URLlistSelector(selector, name, param, names)
|
||||
{
|
||||
if (param.length >= 1)
|
||||
$(selector + ' select').parent().remove();
|
||||
for (a of param)
|
||||
{
|
||||
html = '<span><span class="inline">※ </span><select name="' + name + '">';
|
||||
html += '<option value="">Aucun filtre</option>';
|
||||
for (i of names)
|
||||
{
|
||||
if (i == a)
|
||||
html += '<option value="' + i + '" selected>' + i + '</option>';
|
||||
else
|
||||
html += '<option value="' + i + '">' + i + '</option>';
|
||||
}
|
||||
html += '</select></span>';
|
||||
$(selector + ' .item-cont').append(html);
|
||||
}
|
||||
if (!param.includes("all") && param.length >= 1 && name != "place")
|
||||
{
|
||||
html = '<span><span class="inline">※ </span><select name="' + name + '">';
|
||||
html += '<option value="">Aucun filtre</option>';
|
||||
for (i of names)
|
||||
html += '<option value="' + i + '">' + i + '</option>';
|
||||
html += '</select></span>';
|
||||
$(selector + ' .item-cont').append(html);
|
||||
}
|
||||
}
|
||||
|
||||
URLcheckBoxSelector("years", "year", paramYear)
|
||||
URLcheckBoxSelector("months", "month", paramMonth);
|
||||
URLcheckBoxSelector("dimensions", "dimension", paramDimension);
|
||||
URLcheckBoxSelector("genres", "genre", paramGenre);
|
||||
URLcheckBoxSelector("themes", "theme", paramTheme);
|
||||
URLcheckBoxSelector("places", "place", paramPlace);
|
||||
URLcheckBoxSelector("tags", "tag", paramTag);
|
||||
URLcheckBoxSelector("photos", "photo", paramPhoto);
|
||||
URLcheckBoxSelector("helps", "help", paramHelp);
|
||||
URLlistSelector(".box.places", "place", paramPlace, availableOptions.places);
|
||||
URLlistSelector(".box.tags", "tag", paramTag, availableOptions.tags);
|
||||
|
||||
// URL special case for photos with "exist"
|
||||
if (paramPhoto.includes("exist"))
|
||||
{
|
||||
$('input[id="exist"]').prop("checked", true);
|
||||
$('input[id="bad"]').prop("checked", true); $('input[id="bad"]').prop("disabled", true);
|
||||
$('input[id="ok"]').prop("checked", true); $('input[id="ok"]').prop("disabled", true);
|
||||
$('input[id="good"]').prop("checked", true); $('input[id="good"]').prop("disabled", true);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function userActionHandle(availableOptions)
|
||||
{
|
||||
// if "all" is selected, check all other options and disable them
|
||||
function allCheckBoxSelected(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
|
||||
allCheckBoxSelected("years", "year");
|
||||
allCheckBoxSelected("months", "month");
|
||||
allCheckBoxSelected("dimensions", "dimension");
|
||||
allCheckBoxSelected("genres", "genre");
|
||||
allCheckBoxSelected("themes", "theme");
|
||||
allCheckBoxSelected("places", "place");
|
||||
allCheckBoxSelected("tags", "tag");
|
||||
allCheckBoxSelected("photos", "photo");
|
||||
allCheckBoxSelected("helps", "help");
|
||||
|
||||
// special case for photos with "exist"
|
||||
$('input[id="exist"]').click(function()
|
||||
{
|
||||
if ($(this).prop("checked") == true)
|
||||
{
|
||||
$('input[id="bad"]').prop("checked", true); $('input[id="bad"]').prop("disabled", true);
|
||||
$('input[id="ok"]').prop("checked", true); $('input[id="ok"]').prop("disabled", true);
|
||||
$('input[id="good"]').prop("checked", true); $('input[id="good"]').prop("disabled", true);
|
||||
}
|
||||
else
|
||||
{
|
||||
$('input[id="bad"]').prop("checked", false); $('input[id="bad"]').prop("disabled", false);
|
||||
$('input[id="ok"]').prop("checked", false); $('input[id="ok"]').prop("disabled", false);
|
||||
$('input[id="good"]').prop("checked", false); $('input[id="good"]').prop("disabled", false);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
// 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);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
// 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();
|
||||
});
|
||||
}
|
||||
@ -2,41 +2,55 @@ jQuery(document).ready(function($)
|
||||
{
|
||||
$.getJSON("data.json", function(data)
|
||||
{
|
||||
window.pageSize = 14;
|
||||
var paintingList = [];
|
||||
|
||||
canDisplay = true;
|
||||
for (i of data)
|
||||
{
|
||||
if (i.photo == "ok" || i.photo == "good")
|
||||
if (i.expo == "yes")
|
||||
{
|
||||
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);
|
||||
paintingList.push(i.number);
|
||||
if (paintingList.length % (pageSize + 1) == 0)
|
||||
canDisplay = false;
|
||||
|
||||
paintingHtml = '<div class="gallery-item ';
|
||||
if (canDisplay)
|
||||
{
|
||||
paintingHtml += 'active"><a data-fancybox="exposition" href="photos/paintings/normal/' + i.number + '.jpg" data-fancybox-index="' + i.number + '">'
|
||||
paintingHtml += '<img src="photos/paintings/mini/" alt="Tableau ' + i.number + '"></a>';
|
||||
}
|
||||
else
|
||||
{
|
||||
paintingHtml += 'inactive"><a data-fancybox="exposition" href="photos/paintings/normal/' + i.number + '.jpg" data-fancybox-index="' + i.number + '">'
|
||||
paintingHtml += '<img src="photos/paintings/mini/" alt="Tableau ' + i.number + '"></a>';
|
||||
}
|
||||
paintingHtml += '<span class="item-title">' + i.title;
|
||||
if (i.year != '—')
|
||||
paintingHtml += ' (' + i.year + ')';
|
||||
paintingHtml += '</span></div>';
|
||||
$(".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',
|
||||
mobile: {
|
||||
preventCaptionOverlap: true,
|
||||
},
|
||||
var targetPage = 0;
|
||||
urlParams = new URLSearchParams(window.location.search);
|
||||
if (urlParams.get('page') != "")
|
||||
targetPage = urlParams.get('page');
|
||||
|
||||
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 + '">ℹ︎</span></a></span>\
|
||||
<span class="title">' + data[idx].title + '</span><span class="year">' + (data[idx].month != '—' ? data[idx].month + ' ' : '') + 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>\
|
||||
';
|
||||
}
|
||||
// pagination configuration
|
||||
window.currentPage = 0;
|
||||
window.previousArray = [];
|
||||
$.getScript("scripts/pagination.js", function() {
|
||||
paginationInit(data, paintingList, false);
|
||||
|
||||
if (targetPage > 0)
|
||||
$("#pagination").pagination('go', targetPage);
|
||||
});
|
||||
|
||||
// fancybox configuration
|
||||
$.getScript("scripts/fancybox.js", function() {
|
||||
fancyboxInit(data, false);
|
||||
});
|
||||
});
|
||||
});
|
||||
71
scripts/fancybox.js
Normal file
71
scripts/fancybox.js
Normal file
@ -0,0 +1,71 @@
|
||||
function fancyboxInit(data, explorer)
|
||||
{
|
||||
$('[data-fancybox="exposition"], [data-fancybox="exposition-list"]').fancybox(
|
||||
{
|
||||
selector: '.gallery a',
|
||||
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 = 0; // search the index of the painting of filtered data
|
||||
for (i = 0; i < data.length; i++)
|
||||
{
|
||||
if (data[i].number == item.opts.fancyboxIndex)
|
||||
idx = i;
|
||||
}
|
||||
|
||||
function generateCartel()
|
||||
{
|
||||
cartel = '<div id="info"><span class="info">';
|
||||
cartel += '<a href="painting.html?number=' + data[idx].number + '">ℹ︎</span></a></span>';
|
||||
cartel += '<span class="title">' + data[idx].title + '</span><span class="year">';
|
||||
if (data[idx].month != '—')
|
||||
cartel += data[idx].month + ' ';
|
||||
if (data[idx].year != '—')
|
||||
cartel += data[idx].year;
|
||||
cartel += ' </span><span class="format">' + data[idx].paint + ' sur ' + data[idx].support.toLowerCase();
|
||||
if (data[idx].dimension != '—')
|
||||
cartel += ' (' + data[idx].dimension + ')';
|
||||
cartel += '</span>';
|
||||
if (data[idx].comment != '—')
|
||||
cartel += '<span class="comment">' + data[idx].comment + '</span>';
|
||||
cartel += '</div>';
|
||||
return cartel;
|
||||
}
|
||||
|
||||
return generateCartel();
|
||||
},
|
||||
|
||||
beforeShow : function(instance, current)
|
||||
{
|
||||
if (current.opts.fancyboxIndex > previousArray[previousArray.length - 1])
|
||||
$('#pagination').pagination('next');
|
||||
|
||||
if (current.opts.fancyboxIndex < previousArray[0])
|
||||
$('#pagination').pagination('previous');
|
||||
},
|
||||
|
||||
afterClose : function(instance)
|
||||
{
|
||||
// after closing, changing the URL again. I guess there's no better way except by changing fancybox code...
|
||||
// (apparently fancybox changes back to the original url it had when starting)
|
||||
if (explorer)
|
||||
{
|
||||
urlParams = new URLSearchParams(window.location.search)
|
||||
trimSearch = window.location.search.substr(0, window.location.search.lastIndexOf('&'));
|
||||
window.history.replaceState('', '', window.location.pathname + trimSearch + '&page=' + currentPage + window.location.hash);
|
||||
}
|
||||
else
|
||||
window.history.replaceState('', '', window.location.pathname + '?page=' + currentPage + window.location.hash);
|
||||
}
|
||||
});
|
||||
}
|
||||
118
scripts/informations.js
Normal file
118
scripts/informations.js
Normal file
@ -0,0 +1,118 @@
|
||||
jQuery(document).ready(function($)
|
||||
{
|
||||
// a n t i s p a m (hopefully)
|
||||
$('a.mail').on('click', function()
|
||||
{
|
||||
var href = $(this).attr('href');
|
||||
var a1 = "hoo";
|
||||
var a2 = "den" ;
|
||||
var a3 = "@";
|
||||
var a4 = "marc";
|
||||
var a5 = "ya";
|
||||
var a6 = ".c";
|
||||
var a7 = "hal";
|
||||
var a8 = "om";
|
||||
var a9 = "is_";
|
||||
var goodMail = a2 + a9 + a4 + a7 + a3 + a5 + a1 + a6 + a8;
|
||||
$(this).attr('href', href.replace('badmail', goodMail + '?subject=[Ginou] Contact'));
|
||||
});
|
||||
|
||||
// photos stats
|
||||
fifties = {"none": 0, "bad": 0, "ok": 0, "good": 0};
|
||||
sixties = {"none": 0, "bad": 0, "ok": 0, "good": 0};
|
||||
seventies = {"none": 0, "bad": 0, "ok": 0, "good": 0};
|
||||
eighties = {"none": 0, "bad": 0, "ok": 0, "good": 0};
|
||||
nineties = {"none": 0, "bad": 0, "ok": 0, "good": 0};
|
||||
zeroes = {"none": 0, "bad": 0, "ok": 0, "good": 0};
|
||||
tens = {"none": 0, "bad": 0, "ok": 0, "good": 0};
|
||||
|
||||
$.getJSON("data.json", function(data)
|
||||
{
|
||||
function gatherYear(array, min, max)
|
||||
{
|
||||
if (i.year >= min && i.year <= max)
|
||||
{
|
||||
if (i.photo == "none") array.none++;
|
||||
if (i.photo == "bad") array.bad++;
|
||||
if (i.photo == "ok") array.ok++;
|
||||
if (i.photo == "good") array.good++;
|
||||
}
|
||||
}
|
||||
|
||||
for (i of data)
|
||||
{
|
||||
gatherYear(fifties, 1950, 1959);
|
||||
gatherYear(sixties, 1960, 1969);
|
||||
gatherYear(seventies, 1970, 1979);
|
||||
gatherYear(eighties, 1980, 1989);
|
||||
gatherYear(nineties, 1990, 1999);
|
||||
gatherYear(zeroes, 2000, 2009);
|
||||
gatherYear(tens, 2010, 2020);
|
||||
}
|
||||
|
||||
var canvasDimension = document.getElementById("photo").getContext('2d');
|
||||
var chartDimension = new Chart(canvasDimension, {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: ["1956 - 1959", "1960 - 1969", "1970 - 1979", "1980 - 1989", "1990 - 1999", "2000 - 2009", "2010 - 2016"],
|
||||
datasets: [{
|
||||
label: 'Pas de photo',
|
||||
backgroundColor: '#FB6962',
|
||||
data: [
|
||||
fifties.none, sixties.none, seventies.none, eighties.none, nineties.none, zeroes.none, tens.none
|
||||
]
|
||||
}, {
|
||||
label: 'Photo de mauvaise qualité',
|
||||
backgroundColor: '#FCFC99',
|
||||
data: [
|
||||
fifties.bad, sixties.bad, seventies.bad, eighties.bad, nineties.bad, zeroes.bad, tens.bad
|
||||
]
|
||||
}, {
|
||||
label: 'Photo de qualité acceptable',
|
||||
backgroundColor: '#79DE79',
|
||||
data: [
|
||||
fifties.ok, sixties.ok, seventies.ok, eighties.ok, nineties.ok, zeroes.ok, tens.ok
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Photo de bonne qualité',
|
||||
backgroundColor: '#0CC078',
|
||||
data: [
|
||||
fifties.good, sixties.good, seventies.good, eighties.good, nineties.good, zeroes.good, tens.good
|
||||
]
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
tooltips: {
|
||||
mode: 'index',
|
||||
intersect: false
|
||||
},
|
||||
responsive: true,
|
||||
scales: {
|
||||
yAxes: [{
|
||||
ticks: {
|
||||
beginAtZero: true
|
||||
}, gridLines: {
|
||||
display: true
|
||||
},
|
||||
scaleLabel: {
|
||||
display: true,
|
||||
labelString: 'Tableaux'
|
||||
},
|
||||
stacked: true,
|
||||
}],
|
||||
xAxes: [{
|
||||
gridLines: {
|
||||
display: false
|
||||
},
|
||||
stacked: true,
|
||||
}]
|
||||
},
|
||||
legend: {
|
||||
display: false,
|
||||
position: "bottom",
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
@ -1,20 +0,0 @@
|
||||
jQuery(document).ready(function($)
|
||||
{
|
||||
// a n t i s p a m (hopefully)
|
||||
$('a.mail').on('click', function()
|
||||
{
|
||||
var href = $(this).attr('href');
|
||||
var a1 = "hoo";
|
||||
var a2 = "den" ;
|
||||
var a3 = "@";
|
||||
var a4 = "marc";
|
||||
var a5 = "ya";
|
||||
var a6 = ".c";
|
||||
var a7 = "hal";
|
||||
var a8 = "om";
|
||||
var a9 = "is_";
|
||||
var goodMail = a2 + a9 + a4 + a7 + a3 + a5 + a1 + a6 + a8;
|
||||
console.log(goodMail + '?subject=[Ginou] Contact');
|
||||
$(this).attr('href', href.replace('badmail', goodMail + '?subject=[Ginou] Contact'));
|
||||
});
|
||||
});
|
||||
@ -1,8 +1,37 @@
|
||||
function mobilemenu()
|
||||
document.addEventListener("DOMContentLoaded", function(event)
|
||||
{
|
||||
var navmenu = document.getElementsByTagName("nav");
|
||||
if (navmenu[0].classList.contains("active"))
|
||||
navmenu[0].classList.remove("active");
|
||||
else
|
||||
navmenu[0].classList.add("active");
|
||||
}
|
||||
function isIE()
|
||||
{
|
||||
user_agent = navigator.userAgent;
|
||||
return (user_agent.indexOf("MSIE") > -1 || user_agent.indexOf("Trident/") > -1);
|
||||
}
|
||||
|
||||
if (isIE())
|
||||
{
|
||||
var IEheader = document.createElement("div");
|
||||
IEheader.className = "IE-header"
|
||||
var textnode = document.createTextNode("Votre navigateur est obsolète. Veuillez utiliser Edge (inclus avec Microsoft Windows), Safari (inclus avec macOS), Firefox ou Chrome.");
|
||||
IEheader.appendChild(textnode);
|
||||
|
||||
document.getElementsByTagName("header")[0].insertBefore(IEheader, document.getElementsByTagName("nav")[0]);
|
||||
};
|
||||
});
|
||||
|
||||
jQuery(document).ready(function($)
|
||||
{
|
||||
$("#hamburger").click(function()
|
||||
{
|
||||
if ($("nav").hasClass("active"))
|
||||
{
|
||||
$(".hidden").slideUp(200, function()
|
||||
{
|
||||
$("nav").removeClass("active");
|
||||
});
|
||||
}
|
||||
else
|
||||
{
|
||||
$("nav").addClass("active");
|
||||
$(".hidden").slideDown(200);
|
||||
}
|
||||
});
|
||||
});
|
||||
78
scripts/pagination.js
Normal file
78
scripts/pagination.js
Normal file
@ -0,0 +1,78 @@
|
||||
function paginationInit(data, paintingList, explorer)
|
||||
{
|
||||
function getPageRange()
|
||||
{
|
||||
if (window.innerWidth >= 600)
|
||||
return explorer ? 6 : null;
|
||||
else if (window.innerWidth < 600 && window.innerWidth > 450)
|
||||
return 4;
|
||||
else
|
||||
return 1;
|
||||
}
|
||||
|
||||
var options =
|
||||
{
|
||||
dataSource: paintingList,
|
||||
pageSize: pageSize,
|
||||
pageRange: getPageRange(),
|
||||
className: 'paginationjs-theme-ginou',
|
||||
hideWhenLessThanOnePage: true,
|
||||
callback: function (response, pagination)
|
||||
{
|
||||
currentPage = pagination.pageNumber;
|
||||
// url handling
|
||||
if (explorer)
|
||||
{
|
||||
urlParams = new URLSearchParams(window.location.search)
|
||||
if (urlParams.get('page') == undefined)
|
||||
{
|
||||
window.history.replaceState('', '', window.location.pathname + window.location.search + '&page=' + currentPage + window.location.hash);
|
||||
}
|
||||
else
|
||||
{
|
||||
trimSearch = window.location.search.substr(0, window.location.search.lastIndexOf('&'));
|
||||
window.history.replaceState('', '', window.location.pathname + trimSearch + '&page=' + currentPage + window.location.hash);
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
window.history.replaceState('', '', window.location.pathname + '?page=' + currentPage + window.location.hash);
|
||||
}
|
||||
|
||||
if (previousArray.length > 0)
|
||||
{
|
||||
for (i of previousArray)
|
||||
$('[data-fancybox-index="'+i+'"]').parent().removeClass("active").addClass("inactive");
|
||||
}
|
||||
|
||||
previousArray = response;
|
||||
|
||||
infoArray = []
|
||||
for (a of response)
|
||||
{
|
||||
for (d of data)
|
||||
{
|
||||
if (a == d.number)
|
||||
infoArray.push({"number": d.number, "photo": d.photo});
|
||||
}
|
||||
}
|
||||
|
||||
$.each(response, function(index, item)
|
||||
{
|
||||
for (i of infoArray)
|
||||
{
|
||||
if (i.number == item)
|
||||
{
|
||||
$('[data-fancybox="exposition"][data-fancybox-index="' + item + '"]').parent().removeClass("inactive").addClass("active");
|
||||
if (i.photo != "none")
|
||||
$('[data-fancybox="exposition"][data-fancybox-index="' + item + '"] img').attr("src", "photos/paintings/mini/" + item + ".jpg");
|
||||
else
|
||||
$('[data-fancybox="exposition"][data-fancybox-index="' + item + '"] img').attr("src", "images/unknown.jpg");
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
$('#pagination').pagination(options);
|
||||
}
|
||||
@ -2,52 +2,95 @@ 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)
|
||||
{
|
||||
var idx = 0; // search the index of the painting of filtered data
|
||||
for (i = 0; i < data.length; i++)
|
||||
{
|
||||
if (data[i].number == pageId)
|
||||
idx = i;
|
||||
}
|
||||
|
||||
if (!data[idx]) // the number specified in URL does not exist
|
||||
{
|
||||
$(".container").css("display", "none");
|
||||
$("#info").css("display", "none");
|
||||
$("article").append('<p class="center">Aucun tableau n\'existe pour cet index.</p>');
|
||||
}
|
||||
|
||||
function GetNumber()
|
||||
{
|
||||
if (data[idx].number > 1000)
|
||||
return "Inédit";
|
||||
return data[idx].number;
|
||||
}
|
||||
|
||||
// page title
|
||||
$("head title").append(data[i].number);
|
||||
$("head title").append(GetNumber());
|
||||
|
||||
// photo
|
||||
if (data[i].photo != "none")
|
||||
$(".photo img").attr("src", "photos/paintings/normal/" + data[i].number + ".jpg");
|
||||
if (data[idx].photo != "none")
|
||||
$(".photo img").attr("src", "photos/paintings/normal/" + data[idx].number + ".jpg");
|
||||
else
|
||||
$(".photo img").attr("src", "images/unknown.jpg");
|
||||
$(".photo img").attr("src", "images/unknown.jpg");
|
||||
$(".photo img").attr("alt", "Tableau " + data[idx].number);
|
||||
|
||||
// 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);
|
||||
$(".metadata .content.number").append(GetNumber());
|
||||
if (data[idx].month != "—")
|
||||
$(".metadata .content.date").append(data[idx].month + " " + data[idx].year);
|
||||
else
|
||||
$(".metadata .content.date").append(data[idx].year);
|
||||
|
||||
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.dimension").append(data[idx].dimension);
|
||||
$(".metadata .content.support").append(data[idx].support);
|
||||
$(".metadata .content.genre").append(data[idx].genre);
|
||||
$(".metadata .content.theme").append(data[idx].theme);
|
||||
$(".metadata .content.place").append(data[idx].place);
|
||||
|
||||
if (data[idx].photo == "none") photoState = "aucune";
|
||||
if (data[idx].photo == "bad") photoState = "mauvais";
|
||||
if (data[idx].photo == "ok") photoState = "acceptable";
|
||||
if (data[idx].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");
|
||||
if (data[idx].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[idx].tags != "—")
|
||||
$(".metadata .content.tag").append(data[idx].tags);
|
||||
else
|
||||
$(".metadata .content.tag").parent().css("display", "none");
|
||||
|
||||
if (data[i].photo != "none")
|
||||
$(".metadata .content.original a").attr("href", "photos/paintings/original/" + data[i].number + ".jpg");
|
||||
if (data[idx].comment != "—")
|
||||
$(".metadata .content.comment").append(data[idx].comment);
|
||||
else
|
||||
$(".metadata .content.comment").parent().css("display", "none");
|
||||
|
||||
if (data[idx].photo != "none")
|
||||
$(".metadata .content.original a").attr("href", "photos/paintings/original/" + data[idx].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 .title").append(data[idx].title);
|
||||
if (data[idx].month != "—")
|
||||
$("#info .year").append(data[idx].month + " " + data[idx].year);
|
||||
else
|
||||
$("#info .year").append(data[idx].year);
|
||||
|
||||
format = data[idx].paint + " sur " + data[idx].support.toLowerCase();
|
||||
|
||||
if (data[idx].dimension != "—")
|
||||
format += " (" + data[idx].dimension + ")";
|
||||
$("#info .format").append(format);
|
||||
$("#info .comment").prepend(data[i].comment);
|
||||
|
||||
if (data[idx].comment != "—")
|
||||
$("#info .comment").prepend(data[idx].comment);
|
||||
else
|
||||
$("#info .comment").css("display", "none");
|
||||
});
|
||||
});
|
||||
@ -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
|
||||
@ -17,9 +17,9 @@ jQuery(document).ready(function($)
|
||||
scales: {
|
||||
yAxes: [{
|
||||
ticks: {
|
||||
beginAtZero:true
|
||||
beginAtZero: true
|
||||
}, gridLines: {
|
||||
display:false
|
||||
display: false
|
||||
},
|
||||
scaleLabel: {
|
||||
display: true,
|
||||
@ -28,7 +28,7 @@ jQuery(document).ready(function($)
|
||||
}],
|
||||
xAxes: [{
|
||||
gridLines: {
|
||||
display:false
|
||||
display: false
|
||||
}
|
||||
}]
|
||||
},
|
||||
@ -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
|
||||
@ -55,9 +55,9 @@ jQuery(document).ready(function($)
|
||||
scales: {
|
||||
yAxes: [{
|
||||
ticks: {
|
||||
beginAtZero:true
|
||||
beginAtZero: true
|
||||
}, gridLines: {
|
||||
display:false
|
||||
display: false
|
||||
},
|
||||
scaleLabel: {
|
||||
display: true,
|
||||
@ -66,7 +66,7 @@ jQuery(document).ready(function($)
|
||||
}],
|
||||
xAxes: [{
|
||||
gridLines: {
|
||||
display:false
|
||||
display: false
|
||||
}
|
||||
}]
|
||||
},
|
||||
@ -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: ["Histoire", "Nature morte", "Paysage", "Portrait", "Scène"],
|
||||
datasets: [{
|
||||
label: 'nombre de tableaux',
|
||||
data: [13, 30, 40, 34, 50, 33, 27, 23, 18, 24, 35, 19],
|
||||
data: [2, 42, 173, 59, 107],
|
||||
backgroundColor: '#2589BD',
|
||||
borderColor: '#187795',
|
||||
borderWidth: 1
|
||||
@ -93,9 +93,9 @@ jQuery(document).ready(function($)
|
||||
scales: {
|
||||
yAxes: [{
|
||||
ticks: {
|
||||
beginAtZero:true
|
||||
beginAtZero: true
|
||||
}, gridLines: {
|
||||
display:false
|
||||
display: false
|
||||
},
|
||||
scaleLabel: {
|
||||
display: true,
|
||||
@ -104,7 +104,7 @@ jQuery(document).ready(function($)
|
||||
}],
|
||||
xAxes: [{
|
||||
gridLines: {
|
||||
display:false
|
||||
display: false
|
||||
}
|
||||
}]
|
||||
},
|
||||
|
||||
Binary file not shown.
BIN
styles/fonts/CommissionerFlair-Regular.ttf
Normal file
BIN
styles/fonts/CommissionerFlair-Regular.ttf
Normal file
Binary file not shown.
BIN
styles/fonts/Rubik-Regular.woff
Normal file
BIN
styles/fonts/Rubik-Regular.woff
Normal file
Binary file not shown.
BIN
styles/fonts/Rubik-Regular.woff2
Normal file
BIN
styles/fonts/Rubik-Regular.woff2
Normal file
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
9
styles/icons/arrow.svg
Normal file
9
styles/icons/arrow.svg
Normal file
@ -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="21.08 187.43 154.57 154.57">
|
||||
<!--Unicode Character 'NORTH EAST TRIANGLE-HEADED ARROW' (U+2B67)-->
|
||||
<defs id="genericDefs"/>
|
||||
<g>
|
||||
<g>
|
||||
<path d="M175.6406 261 L146.25 231.6094 L35.8594 342 L21.0938 327.2344 L131.4844 216.8438 L102.0938 187.4531 L175.6406 187.4531 L175.6406 261 Z" stroke="none"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 819 B |
9
styles/icons/exclamation-mark.svg
Normal file
9
styles/icons/exclamation-mark.svg
Normal file
@ -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="24.47 179.7 87.07 206.18">
|
||||
<!--Unicode Character 'DOUBLE EXCLAMATION MARK' (U+203C)-->
|
||||
<defs id="genericDefs"/>
|
||||
<g>
|
||||
<g>
|
||||
<path d="M111.5156 225.4219 L104.2031 334.5469 L87.8906 334.5469 L80.0156 225.4219 L80.0156 179.7188 L111.5156 179.7188 L111.5156 225.4219 ZM55.8281 225.4219 L48.6562 334.5469 L32.2031 334.5469 L24.4688 225.4219 L24.4688 179.7188 L55.8281 179.7188 L55.8281 225.4219 ZM109.9688 385.875 L81.2812 385.875 L81.2812 357.0469 L109.9688 357.0469 L109.9688 385.875 ZM54.4219 385.875 L25.5938 385.875 L25.5938 357.0469 L54.4219 357.0469 L54.4219 385.875 Z" stroke="none"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
9
styles/icons/eye-black.svg
Normal file
9
styles/icons/eye-black.svg
Normal file
@ -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="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>
|
||||
|
After Width: | Height: | Size: 2.0 KiB |
22
styles/icons/ginou.svg
Normal file
22
styles/icons/ginou.svg
Normal file
@ -0,0 +1,22 @@
|
||||
<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" version="1.1" id="svg52" sodipodi:docname="ginou.svg" inkscape:version="1.0.2 (e86c870879, 2021-01-15, custom)" viewBox="1.82 1.52 289.15 146.13">
|
||||
<metadata id="metadata58">
|
||||
<rdf:RDF>
|
||||
<cc:Work rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
|
||||
<dc:title/>
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<defs id="defs56"/>
|
||||
<sodipodi:namedview pagecolor="#ffffff" bordercolor="#666666" borderopacity="1" objecttolerance="10" gridtolerance="10" guidetolerance="10" inkscape:pageopacity="0" inkscape:pageshadow="2" inkscape:window-width="1920" inkscape:window-height="1017" id="namedview54" showgrid="false" inkscape:zoom="2.8284271" inkscape:cx="105.70332" inkscape:cy="30.086436" inkscape:window-x="-8" inkscape:window-y="-8" inkscape:window-maximized="1" inkscape:current-layer="svg52"/>
|
||||
<g id="cvpage1_top" width="2115px" height="1531px" transform="matrix(0.21874614,0,0,0.21874614,-81.303809,-83.352205)">
|
||||
<path d="m 617.834,445.367 c -3.87,-7.793 -10.141,-14.66 -19.11,-20.929 -8.969,-6.269 -20.055,-11.096 -33.785,-14.709 -13.73,-3.613 -26.663,-2.011 -39.415,4.884 -12.752,6.894 -28.229,19.654 -47.169,38.888 -18.94,19.233 -34.745,39.475 -48.166,61.688 -13.422,22.214 -24.569,45.435 -33.974,70.769 -9.404,25.333 -13.637,49.503 -12.902,73.659 0.735,24.157 5.068,43.206 13.206,58.055 8.138,14.849 18.882,27.613 32.744,38.9 13.863,11.288 29.771,19.647 48.482,25.475 18.712,5.828 31.831,9.896 39.984,12.398 8.153,2.502 13.306,7.141 15.704,14.139 2.399,6.997 10.031,8.334 23.261,4.074 13.23,-4.26 24.341,-8.935 33.863,-14.247 9.521,-5.312 18.39,-8.413 27.028,-9.451 8.639,-1.037 16.261,-2.259 23.229,-3.723 6.968,-1.464 12.768,-5.758 17.676,-13.086 4.908,-7.329 2.908,-13.947 -6.096,-20.169 -9.004,-6.222 -13.945,-14.692 -15.058,-25.813 -1.113,-11.121 0.223,-26.909 4.071,-48.114 3.849,-21.206 5.286,-36.532 4.379,-46.708 -0.907,-10.177 -2.377,-18.628 -4.479,-25.759 -2.102,-7.13 -6.046,-10.795 -12.021,-11.171 -5.975,-0.375 -16.626,1.299 -32.461,5.103 -15.834,3.804 -30.427,5.902 -44.474,6.395 -14.047,0.493 -23.925,3.744 -30.106,9.91 -6.181,6.166 -10.766,12.509 -13.974,19.329 -3.209,6.821 -5.444,13.969 -6.813,21.783 -1.369,7.814 0.142,13.414 4.605,17.066 4.462,3.651 10.057,5.861 17.051,6.733 6.994,0.871 13.443,0.73 19.653,-0.43 6.21,-1.161 14.083,-1.666 23.995,-1.541 9.911,0.125 18.349,-0.888 25.714,-3.088 7.366,-2.2 10.528,1.828 9.637,12.277 -0.891,10.448 -3.377,19.781 -7.579,28.441 -4.202,8.66 -9.423,14.891 -15.913,18.99 -6.49,4.098 -14.791,6.577 -25.298,7.556 -10.508,0.978 -23.009,0.492 -38.101,-1.48 -15.091,-1.972 -29.882,-8.103 -45.076,-18.684 -15.194,-10.581 -25.126,-20.122 -30.269,-29.077 -5.143,-8.955 -8.133,-18.46 -9.111,-28.967 -0.979,-10.507 -0.091,-24.184 2.706,-41.682 2.796,-17.497 7.019,-32.622 12.869,-46.094 5.85,-13.473 13.72,-25.468 23.984,-36.556 10.265,-11.088 18.865,-20.137 26.208,-27.575 7.344,-7.439 16.92,-12.711 29.186,-16.066 12.266,-3.355 24.344,-6.811 36.809,-10.534 12.464,-3.723 19.421,-4.144 21.202,-1.281 1.78,2.862 7.102,5.04 16.219,6.637 9.117,1.597 15.121,-0.498 18.3,-6.385 3.179,-5.886 4.832,-11.955 5.038,-18.497 0.207,-6.541 -1.583,-13.541 -5.453,-21.333" fill="#187795" fill-rule="evenodd" stroke="none" id="path37"/>
|
||||
<path d="m 800.121,526.53 c 1.747,-8.066 1.543,-13.141 -0.621,-15.468 -2.165,-2.326 -8.674,-2.261 -19.837,0.198 -11.163,2.459 -23.869,8.973 -38.725,19.854 -14.856,10.881 -23.504,21.095 -26.356,31.128 -2.853,10.033 -2.451,17.409 1.225,22.48 3.675,5.072 5.628,14.604 5.95,29.052 0.322,14.448 -1.593,30.37 -5.838,48.524 -4.245,18.154 -5.978,36.059 -5.283,54.566 0.696,18.508 1.512,34.398 2.488,48.427 0.976,14.03 3.878,22.191 8.844,24.873 4.966,2.681 11.864,1.508 21.024,-3.576 9.159,-5.084 14.943,-12.699 17.625,-23.21 2.683,-10.511 5.892,-25.734 9.781,-46.395 3.888,-20.662 6.886,-40.521 9.136,-60.524 2.25,-20.003 4.933,-39.279 8.176,-58.745 3.243,-19.467 5.644,-33.929 7.319,-44.076 1.674,-10.146 3.345,-19.041 5.092,-27.108" fill="#187795" fill-rule="evenodd" stroke="none" id="path39"/>
|
||||
<path d="m 986.156,456.14 c -5.209,-0.912 -15.415,-1.782 -31.102,-2.651 -15.688,-0.868 -25.343,1.111 -29.427,6.034 -4.084,4.922 -7.426,12.4 -10.186,22.79 -2.759,10.389 -5.464,19.372 -8.241,27.376 -2.778,8.003 -7.82,25.935 -15.367,54.648 -7.546,28.712 -12.633,46.62 -15.503,54.573 -2.869,7.955 -5.493,15.821 -7.995,23.973 -2.502,8.153 -7.023,18.243 -13.778,30.752 -6.755,12.509 -11.426,21.589 -14.237,27.674 -2.811,6.085 -3.149,11.008 -1.03,15.004 2.119,3.995 4.358,8.337 6.822,13.232 2.465,4.895 5.448,8.826 9.09,11.981 3.642,3.155 9.081,5.976 16.575,8.598 7.494,2.621 14.753,4.22 22.122,4.873 7.369,0.654 13.846,-0.49 19.74,-3.484 5.894,-2.995 10.221,-12.726 13.187,-29.657 2.965,-16.931 5.283,-35.405 7.064,-56.302 1.782,-20.896 5.44,-38.415 11.15,-53.388 5.711,-14.974 9.376,-26.918 11.172,-36.403 1.795,-9.484 6.363,-12.355 13.919,-8.75 7.557,3.606 14.672,9.769 21.684,18.783 7.012,9.013 12.151,14.109 15.66,15.529 13.6,15.075 5.642,43.191 3.087,61.077 -3.51,22.339 -5.178,40.468 -5.082,55.251 0.095,14.782 3.056,25.199 9.023,31.748 5.967,6.549 16.061,8.055 30.763,4.59 14.701,-3.466 24.398,-8.208 29.553,-14.453 5.154,-6.245 9.988,-11.757 14.73,-16.799 4.742,-5.042 11.376,-18.401 20.218,-40.712 8.841,-22.312 15.504,-41.392 20.306,-58.151 4.803,-16.759 7.985,-32.213 9.699,-47.1 1.714,-14.886 3.593,-26.235 5.727,-34.586 2.134,-8.351 4.538,-17.96 7.327,-29.284 2.789,-11.324 4.644,-23.783 5.652,-37.969 1.008,-14.187 1.275,-28.431 0.811,-43.412 -0.463,-14.981 -0.976,-24.773 -1.565,-29.843 -0.588,-5.07 -2.202,-8.958 -4.917,-11.85 -2.715,-2.892 -9.125,-2.247 -19.536,1.964 -10.41,4.212 -17.967,9.181 -23.031,15.146 -5.064,5.964 -8.18,11.895 -9.497,18.074 -1.318,6.179 -2.956,11.792 -4.995,17.106 -2.038,5.314 -2.789,11.755 -2.289,19.628 0.5,7.873 0.518,16.005 0.054,24.783 -0.463,8.778 -1.818,19.882 -4.129,33.84 -2.311,13.959 -5.402,30.855 -9.42,51.494 -6.865,39.492 -12.7,52.661 -16.296,22.319 -0.868,-8.072 -3.211,-14.907 -7.14,-20.83 -3.929,-5.923 -10.394,-12.431 -19.701,-19.834 -9.308,-7.402 -16.229,-13.924 -21.093,-19.877 -4.863,-5.953 -8.809,-14.117 -12.024,-24.882 -3.215,-10.765 -3.991,-20.931 -2.365,-30.982 1.627,-10.051 0.804,-15.833 -2.507,-17.621 -3.311,-1.788 -7.473,-3.107 -12.682,-4.02" fill="#187795" fill-rule="evenodd" stroke="none" id="path41"/>
|
||||
<path d="m 746.58,499.577 c 4.168,1.486 8.476,0.078 13.129,-4.291 4.653,-4.369 9.502,-11.273 14.777,-21.041 5.275,-9.768 11.237,-17.005 18.17,-22.055 6.932,-5.05 11.689,-9.016 14.495,-12.089 2.806,-3.072 4.437,-8.166 4.97,-15.525 0.533,-7.359 0.784,-13.011 0.767,-17.227 -0.018,-4.215 -4.086,-8.092 -12.397,-11.816 -8.312,-3.724 -15.899,-5.58 -23.121,-5.657 -7.223,-0.077 -13.859,2.874 -20.223,8.996 -6.364,6.121 -11.12,10.088 -14.495,12.089 -3.374,2.001 -5.181,5.693 -5.507,11.252 -0.326,5.559 -0.132,11.078 0.59,16.821 0.722,5.742 0.667,14.488 -0.168,26.654 -0.835,12.166 -0.578,20.334 0.783,24.892 1.362,4.559 4.062,7.511 8.23,8.997" fill="#187795" fill-rule="evenodd" stroke="none" id="path43"/>
|
||||
<path d="m 1543.368,587.308 c 0.691,-10.08 1.691,-24.393 3.045,-43.62 1.354,-19.226 2.902,-34.709 4.717,-47.184 1.814,-12.476 1.908,-21.244 0.285,-26.722 -1.623,-5.478 -5.901,-7.715 -13.039,-6.818 -7.137,0.898 -13.321,2.896 -18.847,6.089 -5.526,3.193 -10.32,10.351 -14.61,21.815 -4.29,11.464 -8.844,25.482 -13.877,42.722 -5.033,17.24 -8.037,31.398 -9.156,43.149 -1.119,11.75 -3.196,25.481 -6.331,41.845 -3.135,16.365 -4.716,31.755 -4.82,46.906 -0.103,15.15 1.002,27.637 3.369,38.056 2.366,10.419 4.679,19.381 7.048,27.313 2.369,7.932 11.545,14.225 27.963,19.177 16.418,4.953 29.539,7.806 39.987,8.697 10.449,0.89 21.168,-0.051 32.669,-2.869 11.501,-2.818 22.914,-5.473 34.782,-8.092 11.869,-2.619 20.572,-6.274 26.525,-11.137 5.953,-4.864 10.941,-12.381 15.201,-22.911 4.261,-10.529 7.082,-21.769 8.598,-34.256 1.516,-12.487 4.039,-28.761 7.689,-49.599 3.65,-20.838 6.231,-36.978 7.867,-49.188 1.635,-12.211 3.116,-24.627 4.514,-37.841 1.398,-13.214 1.976,-24.841 1.762,-35.434 -0.214,-10.594 -1.735,-23.03 -4.633,-37.9 -2.899,-14.871 -6.568,-23.118 -11.181,-25.134 -4.614,-2.017 -10.92,-1.941 -19.22,0.229 -8.3,2.171 -13.798,8.484 -16.757,19.242 -2.958,10.757 -5.269,23.201 -7.042,37.925 -1.774,14.723 -2.497,28.953 -2.203,43.368 0.294,14.414 -0.762,30.552 -3.22,49.183 -2.458,18.63 -4.442,35.196 -6.047,50.486 -1.604,15.291 -4.037,25.812 -7.415,32.066 -3.377,6.255 -6.356,10.912 -9.079,14.193 -2.722,3.282 -7.911,5.585 -15.814,7.02 -7.903,1.435 -15.209,1.668 -22.266,0.712 -7.057,-0.956 -12.158,-5.701 -15.547,-14.459 -3.388,-8.758 -5.378,-18.421 -6.065,-29.449 -0.687,-11.028 -0.835,-22.347 -0.452,-34.495 0.383,-12.148 0.908,-23.004 1.6,-33.085" fill="#187795" fill-rule="evenodd" stroke="none" id="path45"/>
|
||||
<path d="m 1195.972,614.631 c 0.244,-13.649 0.919,-23.495 2.06,-30.007 1.141,-6.512 1.944,-13.156 2.448,-20.249 0.335,-4.717 9.962,-34.82 13.645,-41.639 12.22,-22.199 11.035,-19.897 20.619,-42.764 3.973,-7.358 8.007,-15.042 12.293,-23.419 0.085,-0.165 0.171,-0.329 0.259,-0.492 4.388,-8.125 13.41,-14.075 27.477,-18.126 14.348,-4.131 25.075,-5.3 32.69,-3.564 10.819,2.923 20.143,8.675 30.5,12.935 8.76,4.018 13.862,7.635 20.517,7.19 6.656,-0.445 15.983,0.763 28.425,3.68 6.857,1.608 12.217,3.457 16.139,5.575 11.95,10.104 11.405,16.81 18.729,29.682 4.043,5.272 5.426,18.17 7.924,24.983 2.498,6.814 3.042,14.186 1.658,22.467 -1.858,12.147 -2.993,24.363 -5.186,36.453 -0.966,4.596 -2.794,9.369 -5.547,14.467 -4.733,10.302 -6.056,15.1 -9.233,25.998 -3.087,11.876 -10.75,28.624 -15.875,39.874 -1.717,3.77 -3.471,7.314 -5.272,10.648 -3.573,6.617 -7.331,12.41 -11.348,17.508 -6.041,7.667 -12.815,16.773 -20.644,27.751 -7.829,10.978 -17.05,19.459 -28.102,25.845 -11.052,6.387 -22.785,10.494 -35.757,12.517 -12.633,1.97 -20.714,1.907 -24.605,-0.193 -0.104,-0.057 -0.206,-0.115 -0.304,-0.174 -3.764,-2.27 -8.427,-6.529 -14.21,-12.978 -5.783,-6.45 -11.82,-12.031 -18.398,-17.008 -6.578,-4.978 -12.669,-11.749 -18.562,-20.634 -5.894,-8.885 -9.881,-17.187 -12.151,-25.303 -2.269,-8.116 -4.555,-16.777 -6.964,-26.394 -2.41,-9.617 -3.468,-20.979 -3.225,-34.629 m 152.179,-90.914 c -2.284,-1.233 -15.975,-2.646 -19.198,-2.384 -9.929,1.543 -8.101,6.117 -18.064,7.539 -5.438,0.39 -10.564,2.147 -15.623,5.355 -5.058,3.208 -9.579,7.497 -13.777,13.071 -5.113,7.352 -10.033,14.686 -14.341,22.552 -3.703,6.858 -6.435,13.453 -8.302,20.032 -2.105,7.417 -2.349,15.176 -0.745,23.645 1.603,8.469 4.056,16.175 7.473,23.485 3.418,7.311 6.061,11.871 8.055,13.898 1.994,2.027 4.423,6.124 7.403,12.485 2.377,5.075 5.882,8.842 10.63,11.406 7.806,3.838 15.926,4.656 24.48,5.433 7.108,0.037 13.312,-1.138 18.908,-3.581 5.596,-2.443 10.561,-7.768 15.13,-16.23 4.57,-8.461 7.989,-16.942 10.421,-25.845 2.021,-7.4 4.849,-14.441 8.581,-21.352 5.236,-9.206 8.661,-17.825 10.804,-28.297 0.718,-7.928 0.271,-15.48 -1.363,-23.014 -1.633,-7.535 -2.39,-17.363 -6.308,-20.667 -9.587,-14.051 -6.409,-8.319 -24.164,-17.531" fill="#187795" fill-rule="evenodd" stroke="none" id="path47"/>
|
||||
<path d="m 516.693,948.759 c -18.555,11.586 -31.766,20.77 -40.263,27.99 -8.496,7.22 -16.074,11.919 -23.093,14.321 -4.327,1.48 -8.904,2.132 -13.815,1.956 -3.057,-0.109 -6.243,-0.539 -9.58,-1.288 -3.959,-0.889 -8.458,-1.424 -13.549,-1.606 -6.096,-0.218 -13.041,0.07 -20.921,0.862 -2.719,0.273 -5.078,0.374 -7.078,0.303 -5.703,-0.204 -8.485,-1.815 -8.376,-4.858 0.056,-1.563 0.874,-3.504 2.452,-5.827 5.725,-8.428 22.768,-18.773 51.939,-31.526 29.172,-12.754 58.458,-27.287 89.254,-44.293 30.795,-17.006 61.275,-28.488 92.892,-34.992 31.616,-6.505 70.636,-14.89 118.916,-25.555 48.28,-10.665 95.595,-18.428 144.198,-23.658 48.602,-5.23 88.959,-10.011 122.993,-14.569 34.034,-4.559 68.888,-6.404 106.222,-5.622 27.918,0.584 55.931,1.381 84.784,2.413 9.732,0.348 19.559,0.723 29.51,1.125 1.329,0.054 2.655,0.105 3.979,0.152 37.971,1.358 73.716,0.076 108.827,-3.899 15.973,-1.808 30.446,-2.876 43.558,-3.845 16.714,-1.233 31.216,-2.304 43.794,-4.535 14.329,-2.543 22.78,-2.894 37,-3.485 8.053,-0.335 17.956,-0.747 31.823,-1.677 8.34,-0.559 17.127,-0.526 26.437,-0.492 17.314,0.065 36.434,0.136 57.839,-3.581 32.913,-5.716 59.92,-12.098 82.307,-19.449 11.967,-3.93 21.344,-5.771 28.228,-5.525 5.993,0.214 10.095,2.011 12.372,5.39 1.724,2.558 2.547,4.975 2.465,7.264 -0.15,4.208 -3.359,7.982 -9.657,11.402 -9.725,5.282 -30.218,12.947 -62.455,23.36 -14.43,4.662 -27.988,7.731 -42.349,9.834 -7.729,3.274 -18.96,6.954 -34.246,10.977 -36.502,9.607 -79.239,16.55 -127.179,24.339 -10.45,1.698 -21.147,3.436 -32.081,5.25 -61.094,10.139 -122.109,24.449 -185.951,43.611 -63.842,19.163 -123.194,35.253 -180.881,49.035 -57.687,13.783 -109.933,26.731 -159.224,39.461 -49.292,12.73 -97.724,27.51 -147.604,45.044 -11.941,4.198 -21.78,7.739 -29.993,10.695 -26.095,9.391 -35.773,12.875 -44.283,12.731 -0.985,-0.016 -2.039,-0.043 -3.138,-0.082 -10.307,-0.368 -24.656,-1.885 -24.461,-7.34 0.02,-0.573 0.201,-1.19 0.564,-1.853 4.187,-7.65 21.708,-17.63 53.399,-30.415 31.691,-12.784 62.516,-23.389 93.945,-32.319 31.43,-8.93 60.195,-17.804 87.665,-27.045 27.47,-9.241 56.273,-17.834 87.78,-26.188 31.507,-8.354 53.11,-13.615 65.838,-16.035 12.727,-2.42 25.659,-4.855 39.411,-7.423 13.752,-2.567 42.017,-11.369 86.14,-26.825 28.567,-10.007 61.227,-15.125 101.848,-21.49 22.119,-3.466 46.6,-7.303 74.065,-12.5 35.081,-6.637 64.001,-12.829 90.466,-18.733 -19.782,3.103 -32.889,3.337 -48.628,3.619 -8.272,0.147 -17.271,0.308 -28.349,0.905 -15.59,0.841 -29.733,2.203 -42.516,3.434 -16.136,1.554 -30.105,2.899 -42.083,2.723 -9.003,-0.132 -30.21,0.257 -55.011,0.712 -34.334,0.63 -75.556,1.386 -100.83,1.06 -43.53,-0.561 -71.703,2.888 -115.522,8.724 -11.852,1.578 -23.56,3.181 -35.059,4.756 -31.012,4.246 -60.504,8.284 -87.208,11.072 -31.861,3.326 -61.703,7.621 -94.419,12.329 -4.87,0.701 -9.804,1.411 -14.817,2.129 -20.951,2.997 -35.399,7.466 -48.752,11.596 -11.308,3.498 -21.832,6.753 -34.855,8.666 -28.401,4.171 -52.902,10.448 -74.67,19.128 -21.768,8.68 -41.46,18.577 -60.014,30.162" fill="#187795" fill-rule="evenodd" stroke="none" id="path49"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 14 KiB |
9
styles/icons/triangle.svg
Normal file
9
styles/icons/triangle.svg
Normal file
@ -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="39.23 217.12 115.2 121.52">
|
||||
<!--Unicode Character 'BLACK RIGHT-POINTING TRIANGLE' (U+25B6)-->
|
||||
<defs id="genericDefs"/>
|
||||
<g>
|
||||
<g>
|
||||
<path d="M154.4062 277.875 L39.2344 338.625 L39.2344 217.125 L154.4062 277.875 Z" stroke="none"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 750 B |
415
styles/main.css
415
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 {
|
||||
@ -18,13 +19,30 @@ body {
|
||||
margin:auto;
|
||||
display:block;
|
||||
font-family:'Rubik', Helvetica;
|
||||
-webkit-text-size-adjust:none;
|
||||
}
|
||||
|
||||
a {
|
||||
color:#38686A;
|
||||
}
|
||||
|
||||
.gallery a, nav a {
|
||||
text-decoration:none;
|
||||
}
|
||||
|
||||
article .center {
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
nav .hidden {
|
||||
display:inline;
|
||||
}
|
||||
|
||||
.IE-header {
|
||||
font-size: 1.5rem;
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
header {
|
||||
border-top:.2rem solid #187795;
|
||||
box-shadow:0 .4rem .4rem 0 rgba(0,0,0,.04);
|
||||
@ -32,6 +50,23 @@ header {
|
||||
margin-bottom:1.5rem;
|
||||
}
|
||||
|
||||
nav {
|
||||
display:flex;
|
||||
flex-direction:row;
|
||||
justify-content:center;
|
||||
align-items:flex-end;
|
||||
text-align:center;
|
||||
height:3rem;
|
||||
}
|
||||
|
||||
.ginou-icon {
|
||||
padding:0;
|
||||
margin:0;
|
||||
margin-bottom:0.4rem;
|
||||
margin-right:2rem;
|
||||
width:4rem;
|
||||
}
|
||||
|
||||
header nav ul {
|
||||
padding:0;
|
||||
margin:0.6rem;
|
||||
@ -44,13 +79,6 @@ header nav ul li {
|
||||
padding:0;
|
||||
}
|
||||
|
||||
header nav ul li.title {
|
||||
font-weight:bold;
|
||||
font-size:1.8rem;
|
||||
font-family:'HotAugust', 'Comic Sans MS';
|
||||
color:#187795;
|
||||
}
|
||||
|
||||
header nav ul li a:hover,
|
||||
header nav ul li.selected a {
|
||||
color:#2589BD;
|
||||
@ -60,10 +88,18 @@ header nav ul li a {
|
||||
padding:0;
|
||||
}
|
||||
|
||||
@media only screen and (min-width:500px) and (max-width: 1200px) {
|
||||
header nav ul li.title {
|
||||
@media only screen and (min-width:600px) and (max-width:1200px) {
|
||||
header nav {
|
||||
display:block;
|
||||
height:auto;
|
||||
}
|
||||
|
||||
header nav .ginou-icon {
|
||||
display:block;
|
||||
text-align:center;
|
||||
margin:auto;
|
||||
margin-bottom:0.5rem;
|
||||
margin-top:0.5rem;
|
||||
}
|
||||
|
||||
header nav ul li {
|
||||
@ -71,22 +107,34 @@ header nav ul li a {
|
||||
}
|
||||
}
|
||||
|
||||
header nav .mobile-menu-open,
|
||||
header nav .mobile-menu-close {
|
||||
display:none;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 600px) {
|
||||
@media only screen and (max-width:600px) {
|
||||
header nav {
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
margin:0;
|
||||
display:block;
|
||||
height:auto;
|
||||
}
|
||||
|
||||
header nav .ginou-icon {
|
||||
margin:0;
|
||||
margin-top:0.5rem;
|
||||
margin-bottom:0.2rem;
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
header nav ul {
|
||||
margin:0;
|
||||
}
|
||||
|
||||
header nav ul .hidden {
|
||||
margin:0.6rem;
|
||||
}
|
||||
|
||||
header nav #hamburger {
|
||||
display:block;
|
||||
right:1rem;
|
||||
font-size:1.5rem;
|
||||
position:absolute;
|
||||
display: inline-block;
|
||||
right: 1rem;
|
||||
font-size: 1.5rem;
|
||||
position: absolute;
|
||||
margin-top: 0.35rem;
|
||||
}
|
||||
|
||||
header nav #hamburger .container {
|
||||
@ -116,7 +164,7 @@ header nav .mobile-menu-close {
|
||||
transform:rotate(45deg) translate(-6px, -9.5px);
|
||||
}
|
||||
|
||||
header nav ul li {
|
||||
nav .hidden {
|
||||
display:none;
|
||||
}
|
||||
|
||||
@ -125,18 +173,6 @@ header nav .mobile-menu-close {
|
||||
font-size:1.2rem;
|
||||
padding:0.2rem;
|
||||
}
|
||||
|
||||
header nav.active ul li:nth-child(2) {
|
||||
padding-top:1rem;
|
||||
}
|
||||
|
||||
header nav ul li.title {
|
||||
font-size:1.8rem;
|
||||
}
|
||||
|
||||
header nav ul li.title {
|
||||
display:inline;
|
||||
}
|
||||
}
|
||||
|
||||
article {
|
||||
@ -146,18 +182,24 @@ article {
|
||||
text-align:left;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1200px) {
|
||||
article {
|
||||
width:95vw;
|
||||
}
|
||||
}
|
||||
|
||||
article h1 {
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
article p {
|
||||
font-family: 'Commissioner', Helvetica;
|
||||
font-family:'Commissioner', Helvetica;
|
||||
}
|
||||
|
||||
article .intro {
|
||||
width:75vw;
|
||||
margin:auto;
|
||||
margin-bottom:2rem;
|
||||
line-height:1rem;
|
||||
}
|
||||
|
||||
article .intro p {
|
||||
margin-bottom:0.5rem;
|
||||
margin-top:0;
|
||||
}
|
||||
|
||||
article.main {
|
||||
@ -172,7 +214,7 @@ article.main img {
|
||||
display:block;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1200px) {
|
||||
@media only screen and (max-width:1200px) {
|
||||
article.main {
|
||||
width:85vw;
|
||||
}
|
||||
@ -189,33 +231,84 @@ article.main p.signature {
|
||||
}
|
||||
|
||||
|
||||
article.main .bio-img {
|
||||
float:right;
|
||||
padding:1rem;
|
||||
padding-top:0.25rem;
|
||||
padding-right:0;
|
||||
max-width:25vw;
|
||||
}
|
||||
|
||||
@media only screen and (max-width:1200px) {
|
||||
article.main .bio-img {
|
||||
float:none;
|
||||
padding:0;
|
||||
max-width:90vw;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Exposition */
|
||||
|
||||
article #gallery {
|
||||
display:inline-block;
|
||||
article #pagination {
|
||||
display:table;
|
||||
text-align:center;
|
||||
margin:auto;
|
||||
}
|
||||
|
||||
article .gallery .gallery-item.active {
|
||||
display:initial;
|
||||
}
|
||||
|
||||
article .gallery .gallery-item.inactive {
|
||||
display:none;
|
||||
}
|
||||
|
||||
article .gallery {
|
||||
position:relative;
|
||||
display:flex;
|
||||
flex-direction:row;
|
||||
justify-content:space-around;
|
||||
align-self:flex-end;
|
||||
flex-wrap:wrap;
|
||||
|
||||
margin:auto;
|
||||
margin-top:0;
|
||||
}
|
||||
|
||||
article.exposition #gallery {
|
||||
article.exposition .gallery {
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
article #gallery img {
|
||||
article .gallery .gallery-item {
|
||||
display:inline-block;
|
||||
position:relative;
|
||||
margin:0.75rem;
|
||||
margin-top:0.75rem;
|
||||
margin-top:1.6rem;
|
||||
}
|
||||
|
||||
article .gallery .item-title {
|
||||
font-size:0.9rem;
|
||||
margin:0rem;
|
||||
padding:0rem;
|
||||
padding-top:0rem;
|
||||
display:block;
|
||||
}
|
||||
|
||||
article .gallery img {
|
||||
max-height:30vh;
|
||||
max-width:40vw;
|
||||
margin:0.5rem;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1000px) {
|
||||
article #gallery img {
|
||||
@media only screen and (max-width:1000px) {
|
||||
article .gallery img {
|
||||
max-height:85vh;
|
||||
max-width:85vw;
|
||||
}
|
||||
|
||||
article #gallery {
|
||||
article .gallery {
|
||||
display:grid;
|
||||
text-align:center;
|
||||
}
|
||||
@ -238,7 +331,7 @@ article #gallery img {
|
||||
margin-bottom:1.5rem;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 600px) {
|
||||
@media only screen and (max-width:600px) {
|
||||
#info {
|
||||
min-width:280px;
|
||||
}
|
||||
@ -247,11 +340,15 @@ article #gallery img {
|
||||
#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;
|
||||
@ -275,7 +372,7 @@ article.painting .container {
|
||||
display:flex;
|
||||
flex-direction:row;
|
||||
justify-content:center;
|
||||
align-self: flex-end;
|
||||
align-self:flex-end;
|
||||
position:relative;
|
||||
margin-bottom:1.8rem;
|
||||
}
|
||||
@ -295,7 +392,7 @@ article.painting .container ul.metadata {
|
||||
margin-left:0;
|
||||
position:absolute;
|
||||
bottom:0;
|
||||
list-style-type: square;
|
||||
list-style-type:square;
|
||||
}
|
||||
|
||||
article.painting .container .metadata span.title {
|
||||
@ -306,7 +403,12 @@ article.painting .container .metadata span.content {
|
||||
font-size:0.9em;
|
||||
}
|
||||
|
||||
@media only screen and (min-width:800px) and (max-width: 1200px) {
|
||||
article.painting .container .metadata span.content img {
|
||||
display:inline-block;
|
||||
width:0.6rem;
|
||||
}
|
||||
|
||||
@media only screen and (min-width:800px) and (max-width:1200px) {
|
||||
article.painting .container {
|
||||
display:block;
|
||||
}
|
||||
@ -337,19 +439,18 @@ article.painting .container .metadata span.content {
|
||||
|
||||
/* Explorer */
|
||||
|
||||
article.explorer #gallery {
|
||||
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 .intro {
|
||||
width:90vw;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1200px) {
|
||||
article.explorer p {
|
||||
@media only screen and (max-width:1640px) {
|
||||
article.explorer {
|
||||
width:90vw;
|
||||
}
|
||||
}
|
||||
@ -381,14 +482,20 @@ article.explorer h2.active::after {
|
||||
transform:rotate(0);
|
||||
}
|
||||
|
||||
article.explorer img.style-select {
|
||||
article.explorer #style-container {
|
||||
display:block;
|
||||
text-align:right;
|
||||
margin-bottom:0;
|
||||
}
|
||||
|
||||
article.explorer img.style-select {
|
||||
display:inline;
|
||||
max-height:2rem;
|
||||
max-width:2rem;
|
||||
margin:0;
|
||||
margin-bottom:0.25rem;
|
||||
margin-right:0.5rem;
|
||||
margin-left:0.5rem;
|
||||
margin-right:0.4rem;
|
||||
margin-left:0.4rem;
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
@ -401,7 +508,6 @@ article.explorer form h3, article.explorer form span {
|
||||
}
|
||||
|
||||
article.explorer form .container {
|
||||
/*max-width:80vw;*/
|
||||
margin:auto;
|
||||
display:flex;
|
||||
align-self:flex-start;
|
||||
@ -409,44 +515,75 @@ article.explorer form .container {
|
||||
flex-wrap:wrap;
|
||||
}
|
||||
|
||||
article.explorer .container .box {
|
||||
padding-left:0.25rem;
|
||||
padding-right:0.25rem;
|
||||
}
|
||||
|
||||
article.explorer form {
|
||||
margin-bottom:1rem;
|
||||
}
|
||||
|
||||
article.explorer form select {
|
||||
display:block;
|
||||
margin-right:0.75rem;
|
||||
display:inline;
|
||||
margin-top:0.1rem;
|
||||
margin-bottom:0.2rem;
|
||||
}
|
||||
|
||||
/* does not seem to work */
|
||||
article.explorer form .box {
|
||||
margin:1rem;
|
||||
article.explorer form .inline {
|
||||
display:inline;
|
||||
margin:0.1rem;
|
||||
}
|
||||
|
||||
.button-cont {
|
||||
margin:auto;
|
||||
margin-top:1.5rem;
|
||||
display:flex;
|
||||
justify-content:center;
|
||||
align-items:flex-end;
|
||||
width:-moz-fit-content;
|
||||
width:fit-content;
|
||||
}
|
||||
|
||||
article.explorer input[type = submit] {
|
||||
display:block;
|
||||
margin:auto;
|
||||
text-align:center;
|
||||
border: none;
|
||||
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;
|
||||
margin-right:1rem;
|
||||
}
|
||||
|
||||
article.explorer input[type = button] {
|
||||
margin:auto;
|
||||
text-align:center;
|
||||
border:none;
|
||||
padding:0.4rem;
|
||||
border-radius:5%;
|
||||
background:grey;
|
||||
text-decoration:none;
|
||||
font-size:1.1rem;
|
||||
cursor:pointer;
|
||||
color:white;
|
||||
}
|
||||
|
||||
input:checked + label {
|
||||
font-weight:bold;
|
||||
}
|
||||
|
||||
.item-cont span.filter {
|
||||
color:gray;
|
||||
}
|
||||
|
||||
@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;
|
||||
justify-content:left;
|
||||
}
|
||||
|
||||
article.explorer form .container h3 {
|
||||
@ -466,12 +603,6 @@ article.explorer input[type = submit] {
|
||||
}
|
||||
}
|
||||
|
||||
@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;
|
||||
@ -484,7 +615,6 @@ article.explorer table {
|
||||
border-collapse:separate;
|
||||
border-spacing:0;
|
||||
width:100%;
|
||||
margin-top:1rem;
|
||||
margin-bottom:1rem;
|
||||
overflow-x:auto;
|
||||
}
|
||||
@ -530,7 +660,6 @@ article.explorer tr td:first-child {
|
||||
}
|
||||
|
||||
article.explorer tr td:nth-child(2) {
|
||||
width:25%;
|
||||
white-space:nowrap;
|
||||
}
|
||||
|
||||
@ -567,6 +696,14 @@ article.explorer table .photo {
|
||||
|
||||
/* Divers */
|
||||
|
||||
article.divers .gallery {
|
||||
justify-content:flex-start;
|
||||
}
|
||||
|
||||
article.divers .gallery img {
|
||||
margin:0.7rem;
|
||||
}
|
||||
|
||||
article #stats {
|
||||
margin-top:2.5rem;
|
||||
margin-bottom:1.5rem;
|
||||
@ -576,18 +713,24 @@ article #stats {
|
||||
justify-content:center;
|
||||
}
|
||||
|
||||
article #stats #stat {
|
||||
article #stats .stat {
|
||||
width:28vw;
|
||||
margin-right:4vw;
|
||||
margin-left:4vw;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1000px) {
|
||||
@media only screen and (max-width:600px) {
|
||||
article.divers .gallery {
|
||||
justify-content:center;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width:1000px) {
|
||||
article #stats {
|
||||
display:block;
|
||||
}
|
||||
|
||||
article #stats #stat {
|
||||
article #stats .stat {
|
||||
width:85vw;
|
||||
text-align:center;
|
||||
margin:auto;
|
||||
@ -595,12 +738,12 @@ article #stats #stat {
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1001px) and (max-width: 1200px) {
|
||||
@media only screen and (min-width:1001px) and (max-width:1200px) {
|
||||
article #stats {
|
||||
display:block;
|
||||
}
|
||||
|
||||
article #stats #stat {
|
||||
article #stats .stat {
|
||||
width:55vw;
|
||||
text-align:center;
|
||||
margin:auto;
|
||||
@ -613,9 +756,87 @@ article #stats #stat {
|
||||
|
||||
article.infos .mail {
|
||||
font-weight:bold;
|
||||
font-size:1.2rem;
|
||||
font-size:1.4rem;
|
||||
}
|
||||
|
||||
article.infos .stat {
|
||||
width:40vw;
|
||||
margin:auto;
|
||||
margin-top:2rem;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
@media only screen and (max-width:600px) {
|
||||
article.infos .stat {
|
||||
width:90vw;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width:601px) and (max-width:1000px) {
|
||||
article.infos .stat {
|
||||
width:70vw;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width:1001px) and (max-width:1200px) {
|
||||
article.infos .stat {
|
||||
width:60vw;
|
||||
}
|
||||
}
|
||||
|
||||
article.infos .stat canvas {
|
||||
margin-bottom:1rem;
|
||||
}
|
||||
|
||||
article.infos .stat .legend-cont {
|
||||
display:inline-block;
|
||||
text-align:center;
|
||||
white-space:nowrap;
|
||||
}
|
||||
|
||||
article.main.infos .stat .legend {
|
||||
width:25px;
|
||||
height:10px;
|
||||
border:1px solid black;
|
||||
display:inline-block;
|
||||
margin-right:0.4em;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
article.main.infos .stat .legend + span {
|
||||
margin-right:0.8em;
|
||||
}
|
||||
|
||||
article.infos .stat .none {
|
||||
background:#FB6962;
|
||||
}
|
||||
|
||||
article.infos .stat .bad {
|
||||
background:#FCFC99;
|
||||
}
|
||||
|
||||
article.infos .stat .ok {
|
||||
background:#79DE79;
|
||||
}
|
||||
|
||||
article.infos .stat .good {
|
||||
background:#0CC078;
|
||||
}
|
||||
|
||||
article.infos h4 + p {
|
||||
margin-left:1rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@media only screen and (max-width:1200px) {
|
||||
article, article.main {
|
||||
width:95vw;
|
||||
}
|
||||
|
||||
article .center {
|
||||
text-align:left;
|
||||
}
|
||||
}
|
||||
|
||||
28
styles/pagination.css
Normal file
28
styles/pagination.css
Normal file
@ -0,0 +1,28 @@
|
||||
.paginationjs.paginationjs-theme-ginou {
|
||||
font-family:'Commissioner', Helvetica;
|
||||
font-size:1rem;
|
||||
line-height:0.2rem;
|
||||
}
|
||||
|
||||
.paginationjs.paginationjs-theme-ginou .paginationjs-go-input > input[type="text"], .paginationjs.paginationjs-theme-ginou .paginationjs-pages li {
|
||||
border-color:#187795;
|
||||
}
|
||||
|
||||
.paginationjs.paginationjs-theme-ginou .paginationjs-pages li > a:hover {
|
||||
background:#D0E4E9;
|
||||
}
|
||||
|
||||
.paginationjs.paginationjs-theme-ginou .paginationjs-pages li.active > a {
|
||||
background:#187795;
|
||||
color:#D0E4E9;
|
||||
line-height:1.7rem;
|
||||
}
|
||||
|
||||
.paginationjs.paginationjs-theme-ginou .paginationjs-pages li > a {
|
||||
color:#187795;
|
||||
line-height:1.7rem;
|
||||
}
|
||||
|
||||
.paginationjs.paginationjs-theme-ginou .paginationjs-pages li.disabled > a:hover {
|
||||
background:0 0;
|
||||
}
|
||||
Reference in New Issue
Block a user