photo_mem/photo_mem.html

123 lines
4.8 KiB
HTML
Raw Normal View History

<!DOCTYPE HTML>
2021-06-12 19:57:59 +02:00
<!-- Photo_mem Version 2.1
Copyright © 2017-2021 J. PLISSON
Licence AGPL v3.0+
2.0 mai 2021 ajout détection de visages
2.1 juin 2021 refonte en une seule application
amélioration saisie des fichiers
ajout fonction modification des personnes
-->
<html>
2021-10-04 10:09:58 +02:00
<head>
<meta charset="utf-8"/>
2021-10-04 10:09:58 +02:00
<title>Photo mem</title>
<link rel="stylesheet" type="text/css" href="styles/bulma.min.css"></link>
<link rel="stylesheet" type="text/css" href="styles/style_photomem.css"></link>
2021-10-04 10:09:58 +02:00
</head>
2021-10-04 12:43:54 +02:00
<body onload="init()">
2021-10-04 10:09:58 +02:00
<header>
2021-10-04 11:57:09 +02:00
<section class="hero">
<div class="hero-body">
<p class="title">
Photo Mem
</p>
<p class="subtitle">
Nommer des personnes sur des photos et les partager
</p>
<div id="actions">
2021-10-04 12:43:54 +02:00
<input id="fichiers" multiple type="file" class="cotecote button is-primary" value="assets/zizou.png"/>
<button class="button is-secondary" id="bouton_image" onclick="fichiers.click()"
title="Charger une image et le XML associé">
Choix de la
photo
</button>
<input class="button is-secondary" id="save_file" type="button" class=cotecote value="Enregistrer le xml"
onclick="enregistrer_fichier(enreg_xml)"/>
<input class="button is-secondary" id="file" type="button" class=cotecote value="Enregistrer l'image "
onclick="image_finale()"/>
</div>
2021-10-04 11:57:09 +02:00
</div>
</section>
2021-10-04 10:09:58 +02:00
</header>
2021-10-04 12:43:54 +02:00
<main class="section is-medium" id="main">
2021-10-04 10:09:58 +02:00
<!-- cercle indiquant la position où on a cliqué-->
2021-10-04 11:57:09 +02:00
<div id="circle_svg" class="invisible animate__pulse" style="left: 0; top:0;"></div>
2021-10-04 10:09:58 +02:00
<!-- formulaire d'ajout ou de modification d'une personne-->
<div id="ajout" class="invisible" style="position: absolute; z-index: 1;">
2021-10-04 12:10:56 +02:00
<form class="content " name="ajout_personne" id="ajout_personne" onsubmit="envoi_formulaire_ajout">
2021-10-04 11:57:09 +02:00
<h2 class="title">
2021-10-04 10:09:58 +02:00
NOUVELLE PERSONNE
</h2>
2021-10-04 12:10:56 +02:00
<div class="field is-horizontal">
2021-10-04 12:43:54 +02:00
<label for="nom">Nom : </label><input class="input" type="text" name="nom" id="nom" autofocus>
2021-10-04 12:10:56 +02:00
</div>
<div class="field is-horizontal">
2021-10-04 12:43:54 +02:00
<label for="nom_jeune_fille">Née : </label><input class="input" type="text" name="nom_jf"
id="nom_jeune_fille">
2021-10-04 12:10:56 +02:00
</div>
<div class="field is-horizontal">
2021-10-04 12:43:54 +02:00
<label for="prenom">Prénom : </label><input class="input" type="text" name="prénom" id="prenom">
2021-10-04 12:10:56 +02:00
</div>
<div class="field is-horizontal">
<label for="annee">Année : </label><input class="input" type="text" name="année" id="annee">
</div>
<div class="field is-horizontal">
<label for="note">Note : </label><input class="input" type="text" name="note" id="note">
</div>
<div class="field is-horizontal">
<label for="titre">Titre photo : </label><input class="input" type="text" name="titre" id="titre">
</div>
<div class="columns">
<div class="column">
<input class="button is-warning" id="reset" type="reset" value="Annuler"
onClick=document.getElementById("ajout").className="invisible";>
</div>
<div class="column has-text-right">
2021-10-04 12:43:54 +02:00
<input class="button is-primary" id="enreg" type="reset" value="Ajouter"
2021-10-04 12:10:56 +02:00
onClick=envoi_formulaire_ajout()>
</div>
</div>
2021-10-04 10:09:58 +02:00
</form>
</div>
<!-- photo de fond-->
2021-10-04 12:43:54 +02:00
<img src="assets/zizou.png" id="ima_fond"/>
<article class="message is-info">
<div class="message-header">
<p>Info</p>
</div>
<div class="message-body">
Sélectionnez une nouvelle photo pour la marquer. Vous pouvez aussi importer une photo et son fichier xml d'information en même temps. </div>
</article>
2021-10-04 10:09:58 +02:00
<div id="menu_modif" class="invisible">
<div id="modifier" onClick="modifier_personne();">modifier</div>
2021-10-04 12:43:54 +02:00
<div id="supprimer" onClick="supprimer_personne()">supprimer</div>
<div id="annuler" onClick="menu.style.visibility='hidden';">annuler</div>
2021-10-04 10:09:58 +02:00
</div>
</main>
<footer>
2021-10-04 11:57:09 +02:00
<div class="container">
2021-10-04 12:43:54 +02:00
Photo mem - J plisson -
<a href="https://forge.chapril.org/Liness/photo_mem">
sources et documentation</a> - GULL liness
2021-10-04 11:57:09 +02:00
</div>
2021-10-04 10:09:58 +02:00
</footer>
2021-10-04 12:43:54 +02:00
<script type="application/javascript" src="scripts/main.js"></script>
2021-10-04 10:09:58 +02:00
</body>
</html>