123 lines
4.8 KiB
HTML
123 lines
4.8 KiB
HTML
<!DOCTYPE HTML>
|
|
<!-- 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>
|
|
<head>
|
|
<meta charset="utf-8"/>
|
|
<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>
|
|
</head>
|
|
<body onload="init()">
|
|
<header>
|
|
<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">
|
|
|
|
<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>
|
|
|
|
</div>
|
|
</section>
|
|
</header>
|
|
<main class="section is-medium" id="main">
|
|
|
|
|
|
<!-- cercle indiquant la position où on a cliqué-->
|
|
<div id="circle_svg" class="invisible animate__pulse" style="left: 0; top:0;"></div>
|
|
|
|
<!-- formulaire d'ajout ou de modification d'une personne-->
|
|
<div id="ajout" class="invisible" style="position: absolute; z-index: 1;">
|
|
<form class="content " name="ajout_personne" id="ajout_personne" onsubmit="envoi_formulaire_ajout">
|
|
<h2 class="title">
|
|
NOUVELLE PERSONNE
|
|
</h2>
|
|
<div class="field is-horizontal">
|
|
<label for="nom">Nom : </label><input class="input" type="text" name="nom" id="nom" autofocus>
|
|
</div>
|
|
<div class="field is-horizontal">
|
|
<label for="nom_jeune_fille">Née : </label><input class="input" type="text" name="nom_jf"
|
|
id="nom_jeune_fille">
|
|
</div>
|
|
<div class="field is-horizontal">
|
|
<label for="prenom">Prénom : </label><input class="input" type="text" name="prénom" id="prenom">
|
|
</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">
|
|
<input class="button is-primary" id="enreg" type="reset" value="Ajouter"
|
|
onClick=envoi_formulaire_ajout()>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</form>
|
|
</div>
|
|
|
|
<!-- photo de fond-->
|
|
<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>
|
|
|
|
<div id="menu_modif" class="invisible">
|
|
<div id="modifier" onClick="modifier_personne();">modifier</div>
|
|
<div id="supprimer" onClick="supprimer_personne()">supprimer</div>
|
|
<div id="annuler" onClick="menu.style.visibility='hidden';">annuler</div>
|
|
</div>
|
|
</main>
|
|
<footer>
|
|
<div class="container">
|
|
|
|
Photo mem - J plisson -
|
|
<a href="https://forge.chapril.org/Liness/photo_mem">
|
|
sources et documentation</a> - GULL liness
|
|
</div>
|
|
</footer>
|
|
|
|
<script type="application/javascript" src="scripts/main.js"></script>
|
|
</body>
|
|
</html>
|