167 lines
8.8 KiB
HTML
167 lines
8.8 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">
|
|
<link rel="stylesheet" href="styles/fancybox.css" media="screen">
|
|
<link rel="stylesheet" href="styles/pagination.css" media="screen">
|
|
<link rel="stylesheet" href="plugins/jquery.fancybox.min.css" media="screen">
|
|
<link rel="stylesheet" href="plugins/pagination.css" media="screen">
|
|
<script src="plugins/jquery-3.6.0.min.js"></script>
|
|
<script src="plugins/jquery.fancybox.min.js"></script>
|
|
<script src="plugins/pagination.min.js"></script>
|
|
<script src="scripts/menu.js"></script>
|
|
<script src="scripts/fancybox.js"></script>
|
|
<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"><div class="bar1"></div><div class="bar2"></div><div class="bar3"></div></div>
|
|
</div>
|
|
<ul>
|
|
<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>
|
|
<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>
|
|
|
|
<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>
|
|
|
|
<h2 class="active">Configuration </h2>
|
|
<form name="explorer" onsubmit="onSubmit();">
|
|
<div class="container">
|
|
<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>
|
|
<div class="generated"></div>
|
|
</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>
|
|
<div class="generated"></div>
|
|
</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 class="generated"></div>
|
|
</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 class="generated"></div>
|
|
</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>
|
|
<span><span class="inline">※ </span><select name="place"></select></span>
|
|
</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>
|
|
<span class="first"><span class="inline">※ </span><select name="tag"></select></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>
|
|
<div class="generated"></div>
|
|
</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>
|
|
<div class="generated"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<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="style-container">
|
|
<img class="style-select list active" src="styles/icons/list.svg" alt="liste">
|
|
<img class="style-select frame" src="styles/icons/frame.svg" alt="galerie">
|
|
</div>
|
|
<div id="gallery">
|
|
<div id="pagination"></div>
|
|
<div class="gallery"></div>
|
|
<div id="pagination-sec"></div>
|
|
</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 center"></p>
|
|
</article>
|
|
</body>
|
|
</html> |