Théo Marchal
7d945f2bf4
Also optimized fonts, after discovering (when having all photos in one page) they were too heavy.
213 lines
12 KiB
HTML
213 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Ginou • explorer</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>
|
|
<link rel="stylesheet" href="styles/fancybox.css" media="screen">
|
|
<script src="plugins/jquery-3.5.1.min.js"></script>
|
|
<link href="plugins/jquery.fancybox.min.css" rel="stylesheet">
|
|
<script src="plugins/jquery.fancybox.min.js"></script>
|
|
<script src="scripts/explorer.js"></script>
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<nav>
|
|
<div id="hamburger">
|
|
<div class="container" onclick="mobilemenu()"><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>
|
|
</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="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">
|
|
</div>
|
|
<form action="">
|
|
<div class="container">
|
|
<div class="box years active">
|
|
<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>
|
|
</div>
|
|
<div class="box months">
|
|
<h3>Mois </h3>
|
|
<div class="item-cont">
|
|
<span><input type="checkbox" id="months" name="months" value="all">
|
|
<label for="months">Tous</label></span>
|
|
<span><input type="checkbox" id="01" name="month" value="01">
|
|
<label for="01">Janvier</label></span>
|
|
<span><input type="checkbox" id="02" name="month" value="02">
|
|
<label for="02">Février</label></span>
|
|
<span><input type="checkbox" id="03" name="month" value="03">
|
|
<label for="03">Mars</label></span>
|
|
<span><input type="checkbox" id="04" name="month" value="04">
|
|
<label for="04">Avril</label></span>
|
|
<span><input type="checkbox" id="05" name="month" value="05">
|
|
<label for="05">Mai</label></span>
|
|
<span><input type="checkbox" id="06" name="month" value="06">
|
|
<label for="06">Juin</label></span>
|
|
<span><input type="checkbox" id="07" name="month" value="07">
|
|
<label for="07">Juillet</label></span>
|
|
<span><input type="checkbox" id="08" name="month" value="08">
|
|
<label for="08">Août</label></span>
|
|
<span><input type="checkbox" id="09" name="month" value="09">
|
|
<label for="09">Septembre</label></span>
|
|
<span><input type="checkbox" id="10" name="month" value="10">
|
|
<label for="10">Octobre</label></span>
|
|
<span><input type="checkbox" id="11" name="month" value="11">
|
|
<label for="11">Novembre</label></span>
|
|
<span><input type="checkbox" id="12" name="month" value="12">
|
|
<label for="12">Décembre</label></span>
|
|
</div>
|
|
</div>
|
|
<div class="box dimensions">
|
|
<h3>Dimensions </h3>
|
|
<div class="item-cont">
|
|
<span><input type="checkbox" id="dimensions" name="dimensions" value="all">
|
|
<label for="dimensions">Toutes</label></span>
|
|
<span><input type="checkbox" id="18" name="dimension" value="18">
|
|
<label for="18">< 20cm</label></span>
|
|
<span><input type="checkbox" id="20" name="dimension" value="20">
|
|
<label for="20">20cm - 29cm</label></span>
|
|
<span><input type="checkbox" id="30" name="dimension" value="30">
|
|
<label for="30">30cm - 39cm</label></span>
|
|
<span><input type="checkbox" id="40" name="dimension" value="40">
|
|
<label for="40">40cm - 49cm</label></span>
|
|
<span><input type="checkbox" id="50" name="dimension" value="50">
|
|
<label for="50">50cm - 59cm</label></span>
|
|
<span><input type="checkbox" id="60" name="dimension" value="60">
|
|
<label for="60">60cm - 69cm</label></span>
|
|
<span><input type="checkbox" id="70" name="dimension" value="70">
|
|
<label for="70">70cm - 79cm</label></span>
|
|
<span><input type="checkbox" id="80" name="dimension" value="80">
|
|
<label for="80">80cm - 89cm</label></span>
|
|
<span><input type="checkbox" id="90" name="dimension" value="90">
|
|
<label for="90">90cm - 99cm</label></span>
|
|
<span><input type="checkbox" id="100" name="dimension" value="100">
|
|
<label for="100">>= 100cm</label></span>
|
|
</div>
|
|
</div>
|
|
<div class="box genres">
|
|
<h3>Genres </h3>
|
|
<div class="item-cont">
|
|
<span><input type="checkbox" id="genres" name="genres" value="all">
|
|
<label for="genres">Tous</label></span>
|
|
</div>
|
|
</div>
|
|
<div class="box themes">
|
|
<h3>Thèmes </h3>
|
|
<div class="item-cont">
|
|
<span><input type="checkbox" id="themes" name="themes" value="all">
|
|
<label for="themes">Tous</label></span>
|
|
</div>
|
|
</div>
|
|
<div class="box places">
|
|
<h3>Lieux </h3>
|
|
<div class="item-cont">
|
|
<span><input type="checkbox" id="places" name="places" value="all">
|
|
<label for="places">Tous</label></span>
|
|
|
|
<!--<input type="checkbox" id="place1" name="place1" value="all"><select style="display:inline;"></select>-->
|
|
</div>
|
|
</div>
|
|
<div class="box tags">
|
|
<h3>Tags </h3>
|
|
<div class="item-cont">
|
|
<span><input type="checkbox" id="tags" name="tags" value="all">
|
|
<label for="tags">Tous</label></span>
|
|
|
|
<!--<input type="checkbox" id="tag1" name="tag1" value="all"><select style="display:inline;"></select>-->
|
|
</div>
|
|
</div>
|
|
<div class="box photos">
|
|
<h3>État photo </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="exist" name="photo" value="exist">
|
|
<label for="exist">Existante</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>
|
|
</div>
|
|
</div>
|
|
<div class="box help">
|
|
<h3>Aide requise </h3>
|
|
<div class="item-cont">
|
|
<span><input type="checkbox" id="helps" name="helps" value="all">
|
|
<label for="helps">Toute</label></span>
|
|
<span><input type="checkbox" id="no" name="help" value="no">
|
|
<label for="no">Non</label></span>
|
|
<span><input type="checkbox" id="yes" name="help" value="yes">
|
|
<label for="yes">‼︎ Oui</label></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<input type="submit" value="Générer">
|
|
</form>
|
|
<p class="no-result"><strong>Aucun résultat.</strong> Veuillez réessayer avec d'autres paramètres.</p>
|
|
<div id="gallery"></div>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>№</th>
|
|
<th>Titre</th>
|
|
<th>Année</th>
|
|
<th>Dimension</th>
|
|
<th>Genre</th>
|
|
<th>Thème</th>
|
|
<th>Lieu</th>
|
|
<th>Tags</th>
|
|
<th>Photo</th>
|
|
<th>Aide</th>
|
|
<th>Voir</th>
|
|
</tr>
|
|
</thead>
|
|
</table>
|
|
<p class="result" style="text-align:center;"></p>
|
|
</article>
|
|
</body>
|
|
</html> |