add bulma and references in the footer

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 = [];
+let ibac = 0, tit = {}, titre = "", fond = [];
-var mode_saisie = "true"  				 // mode saisie true, mode modification false
+let mode_saisie = "true"  				 // mode saisie true, mode modification false
-var image = document.getElementById('ima_fond');
+let image = document.getElementById('ima_fond');
-var cercle = document.getElementById("cirsvg");
+const cercle = document.getElementById("circle_svg");
-var menu = document.getElementById("menu_modif");
+let menu = document.getElementById("menu_modif");
-var modif_titre = document.getElementById("nouveau_titre");
+let modif_titre = document.getElementById("nouveau_titre");
-var canevas_photo = document.createElement("canvas");
+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++) {
+    for (let i = 0; i < nb_pers; i++) {
-        var id = "can" + 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) {
+    document.getElementById('circle_svg').addEventListener('contextmenu', function (e) {
-        menu_modif(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.left = cercle.offsetLeft + 10 + "px";
-    menu.style.top = parseFloat(cercle.getAttribute("cy")) + 40 + "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;
+    let x, i;
-    var txt = "";
+    let txt = "";
-    var text = "<photo>" +
+    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
+    let nomform = nom_face
-    var nomjfform = ""
+    let nomjfform = ""
-    var prenomform = ""
+    let prenomform = ""
-    var anneeform = ""
+    let anneeform = ""
-    var noteform = ""
+    let noteform = ""
-    var posxx = fx + fw / 2
+    let posxx = fx + fw / 2
-    var posyy = fy + fh / 2
+    let posyy = fy + fh / 2
-    var etxx = fx + 10
+    let etxx = fx + 10
-    var etyy = fy + fh * 2
+    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");
+    let personne_ = data_xml.createElement("personne");
-    var nom_ = data_xml.createElement("nom");
+    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,
+        x: evt.screenX - rect.left ,
-        y: evt.clientY - rect.top
+        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;
+    let pos_x = position_souris(ima_fond, e).x;
-    var pos_y = position_souris(ima_fond, e).y;
+    let pos_y = position_souris(ima_fond, e).y;
-    for (var i = 0; i < nb_pers; i++) {
+    for (let i = 0; i < nb_pers; i++) {
-        var dx = posx[i] - pos_x;
+        let dx = posx[i] - pos_x;
-        var dy = posy[i] - pos_y;
+        let dy = posy[i] - pos_y;
-        var dist2 = dx * dx + dy * dy;
+        let dist2 = dx * dx + dy * dy;
-        var rayon2 = rayon * rayon;
+        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')
+    let formulaire_ajout = document.getElementById('ajout')
-    var circle_svg = document.getElementById('circle_svg')
+    let highlight_circle = document.getElementById('circle_svg')
-    souris_x = position_souris(ima_fond, e).x;
+    souris_x = e.clientX;
-    souris_y = position_souris(ima_fond, e).y;
+    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', "");
+        vider_formulaire();
-        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', "");
     }
     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;
+    let decalx = 5 + image.offsetLeft;
-    var decaly = 29 + image.offsetTop;
+    let decaly = 29 + image.offsetTop;
-    var can_imf = document.createElement("canvas");
+    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++) {
+    for (let i = 0; i < nb_pers; i++) {
-        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);
         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);

photo_mem.html

@@ -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>
+    <section class="hero">
-</header>
+        <div class="hero-body">
-<main>
+            <p class="title">
-    <div id="actions">
+                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" ;>
+    <div id="circle_svg" class="invisible animate__pulse" style="left: 0; top:0;"></div>
-        <circle id="cirsvg" cx="30" cy="30" r="28"/>
-    </svg>
 
     <!--    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">
+        <form class="content" name="ajout_personne" id="ajout_personne" onsubmit="envoi_formulaire_ajout">
-            <h2 class="title is-2">
+            <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="reset" type="reset" value="Annuler"
-            <input  id="enreg" type="reset"value="Ajouter"
+                   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>

style_photomem.css

@@ -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;
+    background: rgba(255, 255, 255, 0.6);
-    top: 11em;
+    border-radius: 100%;
-    z-index: -1;
+    -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
 }