add bulma and references in the footer
This commit is contained in:
tykayn
parent
8913f6458a
commit
df37fd2b63
1
bulma.min.css
vendored
Normal file
1
bulma.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
191
main.js
191
main.js
@ -1,16 +1,17 @@
|
||||
/**
|
||||
* définition des constantes
|
||||
*/
|
||||
var personnes = [], nom = [], nomjf = [], prenom = [], annee = [], note = [], posx = [], posy = [], etx = [], ety = [],
|
||||
let personnes = [], nom = [], nomjf = [], prenom = [], annee = [], note = [], posx = [], posy = [], etx = [], ety = [],
|
||||
can_etiq = [];
|
||||
var ibac = 0, tit = {}, titre = "", fond = [];
|
||||
var mode_saisie = "true" // mode saisie true, mode modification false
|
||||
var image = document.getElementById('ima_fond');
|
||||
var cercle = document.getElementById("cirsvg");
|
||||
var menu = document.getElementById("menu_modif");
|
||||
var modif_titre = document.getElementById("nouveau_titre");
|
||||
var canevas_photo = document.createElement("canvas");
|
||||
let ibac = 0, tit = {}, titre = "", fond = [];
|
||||
let mode_saisie = "true" // mode saisie true, mode modification false
|
||||
let image = document.getElementById('ima_fond');
|
||||
const cercle = document.getElementById("circle_svg");
|
||||
let menu = document.getElementById("menu_modif");
|
||||
let modif_titre = document.getElementById("nouveau_titre");
|
||||
let canevas_photo = document.createElement("canvas");
|
||||
document.body.appendChild(canevas_photo);
|
||||
let nb_pers = 0;
|
||||
|
||||
/**
|
||||
* écoute du changement de l'input fichier pour charger la photo
|
||||
@ -23,13 +24,13 @@ inputElement.addEventListener('change', (e) => {
|
||||
|
||||
function lecture_photo(fichier) {
|
||||
nb_fichier = fichier.length
|
||||
var i_xml = 1, i_img = 0;
|
||||
let i_xml = 1, i_img = 0;
|
||||
if (fichier[0].name.split('.').pop() == "xml") {
|
||||
i_xml = 0;
|
||||
i_img = 1
|
||||
}
|
||||
|
||||
var src = fichier[i_img].name.substring(0, fichier[i_img].name.indexOf("."));
|
||||
let src = fichier[i_img].name.substring(0, fichier[i_img].name.indexOf("."));
|
||||
enreg_xml = src + ".xml"
|
||||
enreg_noms = src + "_noms.png"
|
||||
fichier_xml = fichier[i_xml];
|
||||
@ -51,14 +52,14 @@ function lecture_photo(fichier) {
|
||||
}
|
||||
|
||||
// deux fichiers selectionnés : l'image et le xml du même nom
|
||||
var reader = new FileReader();
|
||||
let reader = new FileReader();
|
||||
reader.onload = function (evt) {
|
||||
lecture(evt.target.result);
|
||||
};
|
||||
reader.readAsText(fichier_xml);
|
||||
|
||||
function lecture(text) {
|
||||
var parser = new DOMParser();
|
||||
let parser = new DOMParser();
|
||||
data_xml = parser.parseFromString(text, "text/xml");
|
||||
lecture_xml();
|
||||
};
|
||||
@ -68,7 +69,7 @@ function lecture_photo(fichier) {
|
||||
* Chargement et affichage de l'image background
|
||||
*/
|
||||
function affiche_fond() {
|
||||
var read_fond = new FileReader();
|
||||
let read_fond = new FileReader();
|
||||
read_fond.addEventListener("load", function (evt) {
|
||||
image.src = evt.target.result;
|
||||
|
||||
@ -85,7 +86,7 @@ function lecture_xml() {
|
||||
|
||||
console.log('image', image, image.offsetLeft, image.offsetTop);
|
||||
|
||||
for (var i = 0; i < nb_pers; i++) {
|
||||
for (let i = 0; i < nb_pers; i++) {
|
||||
nom[i] = personnes[i].getElementsByTagName("nom")[0].textContent;
|
||||
if (personnes[i].getElementsByTagName("nom_jeune_fille")[0]) {
|
||||
nomjf[i] = personnes[i].getElementsByTagName("nom_jeune_fille")[0].textContent;
|
||||
@ -107,7 +108,7 @@ function lecture_xml() {
|
||||
function affiche_titre(titre_photo) {
|
||||
canevas_photo.className = "titre";
|
||||
canevas_photo.height = 23;
|
||||
var taille = titre_photo.length;
|
||||
let taille = titre_photo.length;
|
||||
canevas_photo.width = taille * 12;
|
||||
tx = parseFloat(tit.attributes['titx'].value + image.offsetLeft);
|
||||
ty = parseFloat(tit.attributes['tity'].value + image.offsetTop);
|
||||
@ -123,10 +124,10 @@ function affiche_titre(titre_photo) {
|
||||
*/
|
||||
function affiche_etiquette() {
|
||||
rayon = 28
|
||||
for (var i = 0; i < nb_pers; i++) {
|
||||
var id = "can" + i;
|
||||
for (let i = 0; i < nb_pers; i++) {
|
||||
let id = "can" + i;
|
||||
if (document.getElementById(id)) continue;
|
||||
var canv = document.createElement("canvas");
|
||||
let canv = document.createElement("canvas");
|
||||
canv.id = id;
|
||||
canv.setAttribute('class', 'people_label')
|
||||
document.body.appendChild(canv);
|
||||
@ -134,7 +135,7 @@ function affiche_etiquette() {
|
||||
can_etiq[i].className = "etiq";
|
||||
can_etiq[i].height = 30;
|
||||
etiq_ctx = can_etiq[i].getContext("2d");
|
||||
var taille = Math.max(nom[i].length, prenom[i].length, nomjf[i].length + 5);
|
||||
let taille = Math.max(nom[i].length, prenom[i].length, nomjf[i].length + 5);
|
||||
can_etiq[i].width = taille * 7 + 10
|
||||
if (nomjf[i].replace(/\t/g, '').length > 1) {
|
||||
can_etiq[i].height = 45
|
||||
@ -147,12 +148,15 @@ function affiche_etiquette() {
|
||||
if (nomjf[i].length > 1) {
|
||||
etiq_ctx.fillText("née : " + nomjf[i], 7, 38)
|
||||
}
|
||||
;
|
||||
}
|
||||
;
|
||||
gestion_souris();
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
gestion_souris();
|
||||
}
|
||||
|
||||
/**
|
||||
* mettre en place les évènements de clic sur la photo
|
||||
*/
|
||||
function gestion_souris() {
|
||||
// pour déplacer le titre
|
||||
if (titre !== '') {
|
||||
@ -164,7 +168,7 @@ function gestion_souris() {
|
||||
});
|
||||
}
|
||||
// pour déplacer les étiquettes nom,prénom ...
|
||||
for (var i = 0; i < nb_pers; i++) {
|
||||
for (let i = 0; i < nb_pers; i++) {
|
||||
can_etiq[i].addEventListener("mousedown", function (e) {
|
||||
this.addEventListener("mousemove", deplace_etiquette);
|
||||
});
|
||||
@ -175,9 +179,9 @@ function gestion_souris() {
|
||||
;
|
||||
ima_fond.addEventListener('mousedown', afficher_formulaire); // pour afficher le formulaire de saisie personne
|
||||
ima_fond.addEventListener('mousemove', tracer_cercle); // pour afficher cercle personne
|
||||
cercle.addEventListener('contextmenu', function (e) {
|
||||
menu_modif(e);
|
||||
document.getElementById('circle_svg').addEventListener('contextmenu', function (e) {
|
||||
e.preventDefault();
|
||||
menu_modif(e);
|
||||
}, false); // menu modif personne
|
||||
};
|
||||
|
||||
@ -187,8 +191,8 @@ function deplace_etiquette(e) {
|
||||
};
|
||||
|
||||
function menu_modif() {
|
||||
menu.style.left = parseFloat(cercle.getAttribute("cx")) + 10 + "px";
|
||||
menu.style.top = parseFloat(cercle.getAttribute("cy")) + 40 + "px";
|
||||
menu.style.left = cercle.offsetLeft + 10 + "px";
|
||||
menu.style.top = cercle.offsetTop + 40 + "px";
|
||||
menu.style.visibility = "visible";
|
||||
}
|
||||
|
||||
@ -196,26 +200,25 @@ function supprimer_personne() {
|
||||
misajour_xml();
|
||||
x = data_xml.getElementsByTagName("personne")[ibac];
|
||||
x.parentNode.removeChild(x);
|
||||
for (var i = 0; i < nb_pers; i++) {
|
||||
for (let i = 0; i < nb_pers; i++) {
|
||||
x = can_etiq[i];
|
||||
x.parentNode.removeChild(x);
|
||||
}
|
||||
;
|
||||
cercle.style.visibility = "hidden";
|
||||
lecture_xml();
|
||||
}
|
||||
|
||||
function creation_data_xml() {
|
||||
var x, i;
|
||||
var txt = "";
|
||||
var text = "<photo>" +
|
||||
let x, i;
|
||||
let txt = "";
|
||||
let text = "<photo>" +
|
||||
"<titre titx='50px' tity='50px'>Titre " + fond.name + "</titre>" +
|
||||
"<date> </date>" +
|
||||
"<lieu> </lieu>" +
|
||||
"<commentaire> </commentaire>" +
|
||||
"</photo>";
|
||||
|
||||
var parser_face = new DOMParser();
|
||||
let parser_face = new DOMParser();
|
||||
data_xml = parser_face.parseFromString(text, "text/xml");
|
||||
// documentElement always represents the root node
|
||||
x = data_xml.documentElement.childNodes;
|
||||
@ -227,19 +230,21 @@ function creation_data_xml() {
|
||||
function envoi_formulaire_ajout() {
|
||||
|
||||
ajouter_personne_xml("", souris_x, souris_y, "", "");
|
||||
|
||||
document.getElementById('circle_svg').setAttribute('class', 'invisible');
|
||||
lecture_xml();
|
||||
}
|
||||
|
||||
function ajouter_personne_xml(nom_face, fx, fy, fw, fh) {
|
||||
var nomform = nom_face
|
||||
var nomjfform = ""
|
||||
var prenomform = ""
|
||||
var anneeform = ""
|
||||
var noteform = ""
|
||||
var posxx = fx + fw / 2
|
||||
var posyy = fy + fh / 2
|
||||
var etxx = fx + 10
|
||||
var etyy = fy + fh * 2
|
||||
let nomform = nom_face
|
||||
let nomjfform = ""
|
||||
let prenomform = ""
|
||||
let anneeform = ""
|
||||
let noteform = ""
|
||||
let posxx = fx + fw / 2
|
||||
let posyy = fy + fh / 2
|
||||
let etxx = fx + 10
|
||||
let etyy = fy + fh * 2
|
||||
document.getElementById('ajout').className = 'invisible';
|
||||
|
||||
if (!nom_face) {
|
||||
@ -254,18 +259,18 @@ function ajouter_personne_xml(nom_face, fx, fy, fw, fh) {
|
||||
noteform = document.getElementById("note").value
|
||||
}
|
||||
// création d'un nouvel élément <personne> dans data_xml
|
||||
var personne_ = data_xml.createElement("personne");
|
||||
var nom_ = data_xml.createElement("nom");
|
||||
let personne_ = data_xml.createElement("personne");
|
||||
let nom_ = data_xml.createElement("nom");
|
||||
nom_.appendChild(data_xml.createTextNode(nomform));
|
||||
var nom_jf_ = data_xml.createElement("nom_jeune_fille");
|
||||
let nom_jf_ = data_xml.createElement("nom_jeune_fille");
|
||||
nom_jf_.appendChild(data_xml.createTextNode(nomjfform));
|
||||
var prenom_ = data_xml.createElement("prenom");
|
||||
let prenom_ = data_xml.createElement("prenom");
|
||||
prenom_.appendChild(data_xml.createTextNode(prenomform));
|
||||
var annee_ = data_xml.createElement("annee_naiss");
|
||||
let annee_ = data_xml.createElement("annee_naiss");
|
||||
annee_.appendChild(data_xml.createTextNode(anneeform));
|
||||
var note_ = data_xml.createElement("note");
|
||||
let note_ = data_xml.createElement("note");
|
||||
note_.appendChild(data_xml.createTextNode(noteform));
|
||||
var position_ = data_xml.createElement("position");
|
||||
let position_ = data_xml.createElement("position");
|
||||
position_.setAttribute("posx", posxx);
|
||||
position_.setAttribute("posy", posyy);
|
||||
position_.setAttribute("etx", etxx);
|
||||
@ -294,23 +299,23 @@ function modifier_personne() {
|
||||
};
|
||||
|
||||
function position_souris(canvas, evt) {
|
||||
var rect = canvas.getBoundingClientRect();
|
||||
let rect = canvas.getBoundingClientRect();
|
||||
return {
|
||||
x: evt.clientX - rect.left,
|
||||
y: evt.clientY - rect.top
|
||||
x: evt.screenX - rect.left ,
|
||||
y: evt.screenY - rect.top
|
||||
};
|
||||
};
|
||||
|
||||
function tracer_cercle(e) {
|
||||
document.getElementsByTagName("svg")[0].setAttribute('height', image.naturalHeight);
|
||||
document.getElementsByTagName("svg")[0].setAttribute('width', image.naturalWidth);
|
||||
var pos_x = position_souris(ima_fond, e).x;
|
||||
var pos_y = position_souris(ima_fond, e).y;
|
||||
for (var i = 0; i < nb_pers; i++) {
|
||||
var dx = posx[i] - pos_x;
|
||||
var dy = posy[i] - pos_y;
|
||||
var dist2 = dx * dx + dy * dy;
|
||||
var rayon2 = rayon * rayon;
|
||||
let pos_x = position_souris(ima_fond, e).x;
|
||||
let pos_y = position_souris(ima_fond, e).y;
|
||||
for (let i = 0; i < nb_pers; i++) {
|
||||
let dx = posx[i] - pos_x;
|
||||
let dy = posy[i] - pos_y;
|
||||
let dist2 = dx * dx + dy * dy;
|
||||
let rayon2 = rayon * rayon;
|
||||
|
||||
if (dist2 < rayon2) {
|
||||
ibac = i
|
||||
@ -335,37 +340,45 @@ function tracer_cercle(e) {
|
||||
* @param e
|
||||
*/
|
||||
function afficher_formulaire(e) {
|
||||
var formulaire_ajout = document.getElementById('ajout')
|
||||
var circle_svg = document.getElementById('circle_svg')
|
||||
souris_x = position_souris(ima_fond, e).x;
|
||||
souris_y = position_souris(ima_fond, e).y;
|
||||
let formulaire_ajout = document.getElementById('ajout')
|
||||
let highlight_circle = document.getElementById('circle_svg')
|
||||
souris_x = e.clientX;
|
||||
souris_y = e.clientY;
|
||||
if (souris_y - document.getElementById('ajout').height < 0) {
|
||||
sourisy = 50
|
||||
}
|
||||
;
|
||||
formulaire_ajout.style.left = souris_x + 20 + "px";
|
||||
formulaire_ajout.style.top = souris_y + 40 + "px";
|
||||
formulaire_ajout.style.left = souris_x - (formulaire_ajout.offsetWidth /2) + "px";
|
||||
formulaire_ajout.className = 'visible';
|
||||
setTimeout(function () {
|
||||
document.getElementById("nom").focus();
|
||||
}, 10);
|
||||
formulaire_ajout.className = 'visible';
|
||||
circle_svg.className = 'visible';
|
||||
|
||||
highlight_circle.style.left = souris_x - circle_svg.offsetWidth /2 + 'px';
|
||||
highlight_circle.style.top = souris_y - circle_svg.offsetHeight/2 + 'px';
|
||||
highlight_circle.setAttribute('class', 'visible animate__pulse');
|
||||
if (mode_saisie) {
|
||||
document.getElementById('nom').setAttribute('value', "");
|
||||
document.getElementById('nom').focus();
|
||||
document.getElementById('nom_jeune_fille').setAttribute('value', "");
|
||||
document.getElementById('prenom').setAttribute('value', "");
|
||||
document.getElementById('annee').setAttribute('value', "");
|
||||
document.getElementById('note').setAttribute('value', "");
|
||||
vider_formulaire();
|
||||
}
|
||||
mode_saisie = "true";
|
||||
};
|
||||
|
||||
function vider_formulaire() {
|
||||
document.getElementById('nom').setAttribute('value', "");
|
||||
document.getElementById('nom').focus();
|
||||
document.getElementById('nom_jeune_fille').setAttribute('value', "");
|
||||
document.getElementById('prenom').setAttribute('value', "");
|
||||
document.getElementById('annee').setAttribute('value', "");
|
||||
document.getElementById('note').setAttribute('value', "");
|
||||
|
||||
}
|
||||
|
||||
function misajour_xml() {
|
||||
|
||||
document.getElementById('circle_svg').setAttribute('class', 'invisible');
|
||||
tit.setAttribute("titx", canevas_photo.style.left);
|
||||
tit.setAttribute("tity", canevas_photo.style.top);
|
||||
for (var i = 0; i < nb_pers; i++) {
|
||||
for (let i = 0; i < nb_pers; i++) {
|
||||
position = data_xml.getElementsByTagName("position")[i];
|
||||
position.setAttribute("etx", can_etiq[i].style.left);
|
||||
position.setAttribute("ety", can_etiq[i].style.top);
|
||||
@ -377,13 +390,13 @@ function misajour_xml() {
|
||||
|
||||
function enregistrer_fichier(fichier) {
|
||||
misajour_xml()
|
||||
var texte_xml = (new XMLSerializer()).serializeToString(data_xml)
|
||||
let texte_xml = (new XMLSerializer()).serializeToString(data_xml)
|
||||
texte_xml = formatXml(texte_xml)
|
||||
var blob = new Blob([texte_xml], {type: "text/plain;charset=utf-8"});
|
||||
let blob = new Blob([texte_xml], {type: "text/plain;charset=utf-8"});
|
||||
if (navigator.msSaveBlob) {
|
||||
navigator.msSaveBlob(blob, fichier);
|
||||
} else {
|
||||
var a = document.createElement('a');
|
||||
let a = document.createElement('a');
|
||||
if (a.download === '') ;
|
||||
a.setAttribute('download', fichier);
|
||||
a.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(texte_xml));
|
||||
@ -395,7 +408,7 @@ function enregistrer_fichier(fichier) {
|
||||
}
|
||||
|
||||
function formatXml(xml, tab) { // tab = optional indent value, default is tab (\t)
|
||||
var formatted = '', indent = '';
|
||||
let formatted = '', indent = '';
|
||||
tab = tab || '\t';
|
||||
xml.split(/>\s*</).forEach(function (node) {
|
||||
if (node.match(/^\/\w/)) indent = indent.substring(tab.length); // decrease indent by one 'tab'
|
||||
@ -407,23 +420,23 @@ function formatXml(xml, tab) { // tab = optional indent value, default is tab (\
|
||||
|
||||
function image_finale() {
|
||||
misajour_xml()
|
||||
var decalx = 5 + image.offsetLeft;
|
||||
var decaly = 29 + image.offsetTop;
|
||||
var can_imf = document.createElement("canvas");
|
||||
let decalx = 5 + image.offsetLeft;
|
||||
let decaly = 29 + image.offsetTop;
|
||||
let can_imf = document.createElement("canvas");
|
||||
document.body.appendChild(can_imf);
|
||||
imf_ctx = can_imf.getContext("2d");
|
||||
can_imf.width = ima_fond.width;
|
||||
can_imf.height = ima_fond.height;
|
||||
imf_ctx.drawImage(ima_fond, 0, 0)
|
||||
if (titre !== '') {
|
||||
var taille = titre.length;
|
||||
let taille = titre.length;
|
||||
hauteur = 25
|
||||
roundedRect(imf_ctx, tx - decalx, ty - decaly, taille * 11, hauteur, 5, 'lightyellow', 'yellow');
|
||||
imf_ctx.drawImage(canevas_photo, tx - decalx, ty - decaly)
|
||||
}
|
||||
|
||||
for (var i = 0; i < nb_pers; i++) {
|
||||
var taille = Math.max(nom[i].length, prenom[i].length, nomjf[i].length + 5);
|
||||
for (let i = 0; i < nb_pers; i++) {
|
||||
let taille = Math.max(nom[i].length, prenom[i].length, nomjf[i].length + 5);
|
||||
hauteur = 30
|
||||
if (nomjf[i].replace(/\t/g, '').length > 1) {
|
||||
hauteur = 45
|
||||
@ -431,7 +444,7 @@ function image_finale() {
|
||||
roundedRect(imf_ctx, etx[i] - decalx, ety[i] - decaly, taille * 7 + 10, hauteur, 15, 'oldlace', 'blue');
|
||||
imf_ctx.drawImage(can_etiq[i], etx[i] - decalx, ety[i] - decaly)
|
||||
}
|
||||
var a = document.createElement('a');
|
||||
let a = document.createElement('a');
|
||||
if (a.download === '') ;
|
||||
a.setAttribute('download', enreg_noms);
|
||||
a.setAttribute('href', can_imf.toDataURL("image/png").replace("image/png", "image/octet-stream"));
|
||||
@ -465,6 +478,8 @@ function image_finale() {
|
||||
******************************************/
|
||||
function onOpenCvReady() {
|
||||
console.info('OpenCV.js est chargé !');
|
||||
document.getElementById('status').remove()
|
||||
gestion_souris();
|
||||
}
|
||||
|
||||
function detection_de_visages() {
|
||||
@ -475,7 +490,7 @@ function detection_de_visages() {
|
||||
}
|
||||
|
||||
function chargement_haarcascade() {
|
||||
var reader_haar = new FileReader();
|
||||
let reader_haar = new FileReader();
|
||||
reader_haar.onload = function (ev) {
|
||||
function str2ab(text) {
|
||||
return new TextEncoder().encode(text);
|
||||
|
||||
@ -13,36 +13,49 @@ Licence AGPL v3.0+
|
||||
<meta charset="utf-8"/>
|
||||
<title>Photo mem</title>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="/bulma.min.css"></link>
|
||||
<link rel="stylesheet" type="text/css" href="/style_photomem.css"></link>
|
||||
</head>
|
||||
<body>
|
||||
<link rel="stylesheet" type="text/css" href="/style_photomem.css"></link>
|
||||
<header>
|
||||
<h1>Photo Mem</h1>
|
||||
</header>
|
||||
<main>
|
||||
<div id="actions">
|
||||
<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="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>
|
||||
<button class="button is-secondary" id="detection" onclick="detection_de_visages()"
|
||||
title="Détecter les visages">détection visages
|
||||
</button>
|
||||
<input class="button is-secondary" id="save_file" type="button" class=cotecote value="Enregistrer xml"
|
||||
onclick="enregistrer_fichier(enreg_xml)"/>
|
||||
<input class="button is-secondary" id="file" type="button" class=cotecote value="Enregistrer image "
|
||||
onclick="image_finale()"/>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</header>
|
||||
<main class="section is-large">
|
||||
|
||||
<input id="fichiers" multiple type="file" class="cotecote" value="zizou.png"/>
|
||||
<button id="bouton_image" onclick="fichiers.click()" title="Charger une image et le XML associé">Choix de la
|
||||
photo
|
||||
</button>
|
||||
<button id="detection" onclick="detection_de_visages()" title="Détecter les visages">détection visages
|
||||
</button>
|
||||
<input id="save_file" type="button" class=cotecote value="Enregistrer xml"
|
||||
onclick="enregistrer_fichier(enreg_xml)"/>
|
||||
<input id="file" type="button" class=cotecote value="Enregistrer image " onclick="image_finale()"/>
|
||||
<p id="status" class=cotecote>OpenCV.js chargement en cours...</p>
|
||||
</div>
|
||||
|
||||
<!-- cercle indiquant la position où on a cliqué-->
|
||||
<svg id="circle_svg" class="invisible" style="position: absolute" ;>
|
||||
<circle id="cirsvg" cx="30" cy="30" r="28"/>
|
||||
</svg>
|
||||
<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 name="ajout_personne" id="ajout_personne" onsubmit="envoi_formulaire_ajout">
|
||||
<h2 class="title is-2">
|
||||
<form class="content" name="ajout_personne" id="ajout_personne" onsubmit="envoi_formulaire_ajout">
|
||||
<h2 class="title">
|
||||
NOUVELLE PERSONNE
|
||||
</h2>
|
||||
<label for="nom">Nom : </label><input type="text" name="nom" id="nom" autofocus><BR>
|
||||
@ -51,25 +64,29 @@ Licence AGPL v3.0+
|
||||
<label for="annee">Année : </label><input type="text" name="année" id="annee"><BR>
|
||||
<label for="note">Note : </label><input type="text" name="note" id="note"><BR>
|
||||
<label for="titre">Titre photo : </label><input type="text" name="titre" id="titre"><BR>
|
||||
|
||||
<input id="enreg" type="reset"value="Ajouter"
|
||||
<input id="reset" type="reset" value="Annuler"
|
||||
onClick=document.getElementById("ajout").className="invisible";>
|
||||
<input id="enreg" type="reset" value="Ajouter"
|
||||
onClick=envoi_formulaire_ajout()>
|
||||
<input id="reset" type="reset" value="Annuler" onClick=document.getElementById("ajout").className="invisible";>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- photo de fond-->
|
||||
<img src="" id="ima_fond" >
|
||||
<img src="zizou.png" id="ima_fond" />
|
||||
<div id="menu_modif" class="invisible">
|
||||
<div id="modifier" onClick="modifier_personne();">modifier</div>
|
||||
<div id="supprimer" onClick="supprimer_personne();menu.style.visibility='hidden';">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
|
||||
<p id="status" class=cotecote>OpenCV.js chargement en cours...</p>
|
||||
</div>
|
||||
</footer>
|
||||
<script type="application/javascript" src="main.js"></script>
|
||||
<script src="opencv.js" onload="onOpenCvReady();" type="text/javascript"></script>
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
body {
|
||||
background: #ccc;
|
||||
font-family: Arial, SansSerif, "DejaVu Sans";
|
||||
}
|
||||
|
||||
main {
|
||||
@ -41,6 +42,7 @@ circle {
|
||||
padding-left: 1em;
|
||||
background-color: Azure;
|
||||
width: 24em;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
#ajout label {
|
||||
@ -51,6 +53,8 @@ circle {
|
||||
|
||||
#ajout input[type=text] {
|
||||
border: solid 1px cadetblue;
|
||||
padding: 0.5em;
|
||||
margin-bottom: 0.25em;
|
||||
}
|
||||
|
||||
#ajout input:focus {
|
||||
@ -86,32 +90,78 @@ circle {
|
||||
top: 100px;
|
||||
}
|
||||
|
||||
#actions button,
|
||||
#actions input,
|
||||
#ajout button,
|
||||
#enreg, #reset {
|
||||
background: cadetblue;
|
||||
border-radius: 3px;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
padding: 1em 2em;
|
||||
}
|
||||
|
||||
#actions button:hover,
|
||||
#actions input:hover,
|
||||
#ajout button:hover,
|
||||
#enreg:hover, #reset:hover {
|
||||
background: #275d5f;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#fichiers {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#ima_fond {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#circle_svg {
|
||||
z-index: 2;
|
||||
box-shadow: 0 0 2em #222;
|
||||
width: 5em;
|
||||
height: 5em;
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 2em;
|
||||
top: 11em;
|
||||
z-index: -1;
|
||||
background: rgba(255, 255, 255, 0.6);
|
||||
border-radius: 100%;
|
||||
-webkit-border-radius: 50%;
|
||||
-moz-border-radius: 50%;
|
||||
border-radius: 50%;
|
||||
|
||||
-webkit-box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2), inset 0px 10px 30px 5px rgba(255, 255, 255, 1);
|
||||
-moz-box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2), inset 0px 10px 30px 5px rgba(255, 255, 255, 1);
|
||||
box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2), inset 0px 10px 30px 5px rgba(255, 255, 255, 1);
|
||||
|
||||
}
|
||||
#circle_svg:after {
|
||||
background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 70%); /* FF3.6+ */
|
||||
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,0.5)), color-stop(70%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
|
||||
background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 70%); /* Chrome10+,Safari5.1+ */
|
||||
background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 70%); /* Opera 12+ */
|
||||
background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 70%); /* IE10+ */
|
||||
background: radial-gradient(ellipse at center, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 70%); /* W3C */
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
|
||||
|
||||
-webkit-border-radius: 50%;
|
||||
-moz-border-radius: 50%;
|
||||
border-radius: 50%;
|
||||
|
||||
-webkit-box-shadow: inset 0 20px 30px rgba(255, 255, 255, 0.3);
|
||||
-moz-box-shadow: inset 0 20px 30px rgba(255, 255, 255, 0.3);
|
||||
box-shadow: inset 0 20px 30px rgba(255, 255, 255, 0.3);
|
||||
|
||||
content: "";
|
||||
width: 4em;
|
||||
height: 4em;
|
||||
left: 10px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
-webkit-transform:scaleX(1);
|
||||
transform:scaleX(1);
|
||||
opacity:0;
|
||||
}
|
||||
50% {
|
||||
opacity:50;
|
||||
-webkit-transform:scale3d(1.05,1.05,1.05);
|
||||
|
||||
transform:scale3d(1.05,1.05,1.05)
|
||||
}
|
||||
to {
|
||||
opacity:100%;
|
||||
-webkit-transform:scaleX(1);
|
||||
transform:scaleX(1)
|
||||
}
|
||||
}
|
||||
.animate__pulse {
|
||||
-webkit-animation-name:pulse;
|
||||
animation-name:pulse;
|
||||
-webkit-animation-timing-function:ease-in-out;
|
||||
animation-timing-function:ease-in-out
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user