Subversion Repositories eFlore/Applications.cel

Rev

Rev 2996 | Go to most recent revision | Blame | Last modification | View Log | RSS feed

<!DOCTYPE html>
<html>
        <head>
                <title>Saisie simplifiée du CEL - messicoles</title>

                <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>

                <meta name="revisit-after" content="15 days" />
                <meta name="robots" content="index,follow" />
                <meta name="author" content="Tela Botanica" />
                <meta name="keywords" content="Tela Botanica, CEL" />
                <meta name="description" content="Widget de saisie simplifiée pour le CEL" />

                <!-- OpenGraph pour Facebook, Pinterest, Google+ -->
                <meta property="og:type" content="website" />
                <meta property="og:title" content="Saisie rapide d'observations - messicoles" />
                <meta property="og:site_name" content="Tela Botanica" />
                <meta property="og:description" content="Saisissez et partagez facilement vos observations de plantes sauvages grâce au Widget de saisie du Carnet en Ligne (Licence CC-BY-SA)" />
                <meta property="og:image" content="https://resources.tela-botanica.org/tb/img/256x256/carre_englobant.png" />
                <meta property="og:image:type" content="image/png" /> 
                <meta property="og:image:width" content="256" /> 
                <meta property="og:image:height" content="256" />
                <meta property="og:locale" content="fr_FR" />

                <!-- Viewport Mobile -->
                <meta name="viewport" content="width=device-width, initial-scale=1.0">

                <!-- Favicones -->
                <link rel="shortcut icon" type="image/x-icon" href="https://resources.tela-botanica.org/tb/img/16x16/favicon.ico" />

                <!-- Javascript : bibliothèques -->
                <!-- Google Map v3 -->
                <script type="text/javascript" src="https://maps.google.com/maps/api/js?key=<?php echo $cleGoogleMaps; ?>&language=fr&amp;region=FR"></script>
                <!-- Jquery -->
                <script type="text/javascript" src="https://resources.tela-botanica.org/jquery/1.11.1/jquery-1.11.1.min.js"></script>
                <!-- Jquery UI : nécessaire pour le minicalendrier et l'auto-complétion -->
                <script type="text/javascript" src="https://resources.tela-botanica.org/jquery/jquery-ui/1.11.0/js/jquery-ui.min.js"></script>
                <script type="text/javascript" src="https://resources.tela-botanica.org/jquery/jquery-ui/1.11.0/js/datepicker-fr.js"></script>
                <!-- Jquery Plugins -->
                <!-- Jquery Validate : nécessaire pour la validation des formulaires -->
                <script type="text/javascript" src="https://resources.tela-botanica.org/jquery/validate/1.11.1/jquery.validate-patched.min.js"></script>
                <script type="text/javascript" src="https://resources.tela-botanica.org/jquery/validate/1.11.1/additional-methods.min.js"></script>
                <script type="text/javascript" src="https://resources.tela-botanica.org/jquery/validate/1.11.1/messages_fr.js"></script>
                <!-- Jquery Form :nécessaire pour l'upload des images -->
                <script type="text/javascript" src="https://resources.tela-botanica.org/jquery/form/3.51/jquery.form.min.js"></script>
                <!-- Bootstrap -->
                <script type="text/javascript" src="https://resources.tela-botanica.org/bootstrap/2.3.2/js/bootstrap.min.js"></script>

                <!-- Javascript : appli saisie -->
                <script type="text/javascript" src="<?=$url_base?>modules/saisie/squelettes/defaut/js/WidgetSaisie.js"></script>
                <script type="text/javascript" src="<?=$url_base?>modules/saisie/squelettes/messicoles/js/WidgetSaisieMessicoles.js"></script>
                <script src="<?=$url_base?>saisie?projet=messicoles&amp;service=taxons" type="text/javascript"></script>
                <script type="text/javascript" src="<?=$url_base?>modules/saisie/configurations/messicoles_nnr.js"></script>
                <script type="text/javascript">
                //<![CDATA[
           $(document).ready(function() {
                                // Un objet sauvage apparaît
                                var widget = new WidgetSaisieMessicoles();

                                // la variable "taxons" chargée par "service=taxons" ci-dessus n'est pas accessible dans le contexte objet
                                widget.taxons = taxons;

                                // La présence du parametre 'debug' dans l'URL enclenche le débogage
                                widget.debug = <?=isset($_GET['debug']) ? 'true' : 'false'?>;
                                // La présence du parametre 'html5' dans l'URL enclenche les fonctions avancées HTML5
                                widget.html5 = <?=isset($_GET['html5']) ? 'true' : 'false'?>;
                                // Mot-clé du widget/projet
                                widget.tagProjet = "WidgetSaisie";
                                // Mots-clés à ajouter aux images
                                widget.tagImg = "<?=isset($_GET['tag-img']) ? $_GET['tag-img'] : ''?>";
                                widget.separationTagImg = "<?= isset($_GET['motcle']) && isset($_GET['tag-img']) ? ',' : '' ?>";
                                widget.tagImg = <?=isset($_GET['motcle']) ? "'".$_GET['motcle']."' + widget.separationTagImg + widget.tagImg" : 'widget.tagImg' ?>;
                                // Mots-clés à ajouter aux observations
                                widget.tagObs = "<?=isset($_GET['tag-obs']) ? $_GET['tag-obs'] : ''?>";
                                widget.separationTagObs = "<?= isset($_GET['projet']) && isset($_GET['tag-obs']) ? ',' : '' ?>";
                                widget.tagObs = <?=isset($_GET['projet']) ? "'".$_GET['projet']."' + widget.separationTagObs + widget.tagObs" : 'widget.tagObs' ?>;
                                // Précharger le formulaire avec les infos d'une observation
                                widget.obsId = "<?=isset($_GET['id-obs']) ? $_GET['id-obs'] : ''?>";
                                // URL du web service réalisant l'insertion des données dans la base du CEL.
                                widget.serviceSaisieUrl = "<?=$url_ws_saisie?>";
                                // URL du web service permettant de récupérer les infos d'une observation du CEL.
                                widget.serviceObsUrl = "<?=$url_ws_obs?>";
                                // Code du référentiel utilisé pour les nom scientifiques.
                                widget.nomSciReferentiel = "<?=$ns_referentiel?>";
                                // Indication de la présence d'une espèce imposée
                                widget.especeImposee = "<?=$espece_imposee; ?>";
                                // Tableau d'informations sur l'espèce imposée
                                widget.infosEspeceImposee = <?=$infos_espece; ?>;
                                // Nombre d'élément dans les listes d'auto-complétion
                                widget.autocompletionElementsNbre = 20;
                                // Indication de la présence d'un référentiel imposé
                                widget.referentielImpose = "<?=$referentiel_impose; ?>";
                                // URL du web service permettant l'auto-complétion des noms scientifiques
                                widget.serviceAutocompletionNomSciUrl = "<?=$url_ws_autocompletion_ns?>?"+
                                        "masque={masque}&"+
                                        "recherche=etendue&"+
                                        "retour.champs=famille,nom_retenu,nom_retenu_complet,num_taxonomique,nom_retenu.id&"+
                                        "ns.structure=au"+"&"+
                                        "navigation.limite=" + widget.autocompletionElementsNbre;
                                // Squelette d'URL du web service permettant l'auto-complétion des noms scientifiques
                                widget.serviceAutocompletionNomSciUrlTpl = "<?=$url_ws_autocompletion_ns_tpl?>?"+
                                        "masque={masque}&"+
                                        "recherche=etendue&"+
                                        "retour.champs=famille,nom_retenu,nom_retenu_complet,num_taxonomique,nom_retenu.id&"+
                                        "retour.tri=alpharet&"+ // tri "à la CeL"
                                        "ns.structure=au"+"&"+
                                        "navigation.limite=" + widget.autocompletionElementsNbre;
                                // Nombre d'observations max autorisé avant transmission
                                widget.obsMaxNbre = 10;
                                // Durée d'affichage en milliseconde des messages d'informations
                                widget.dureeMessage = 15000;
                                // Squelette d'URL du web service de l'annuaire.
                                widget.serviceAnnuaireIdUrl = "<?=$url_ws_annuaire?>";
                                // Squelette d'URL du web service d'eFlore fournissant les noms de communes.
                                widget.serviceNomCommuneUrl = "https://api.tela-botanica.org/service:eflore:0.1/osm/nom-commune?lon={lon}&lat={lat}";
                                // Squelette d'URL du web service d'eFlore fournissant les noms de communes hors de France (localisation approximative).
                                widget.serviceNomCommuneUrlAlt = "https://api.tela-botanica.org/service:eflore:0.1/wikipedia/nom-commune?lon={lon}&lat={lat}&nbre=1";
                                // URL du marqueur à utiliser dans la carte Google Map
                                widget.googleMapMarqueurUrl = "<?=$url_base?>modules/saisie/squelettes/messicoles/img/marqueurs/debut.png";
                                // URL de l'icône du chargement en cours
                                widget.chargementIconeUrl = "<?=$url_base?>modules/saisie/squelettes/messicoles/img/icones/chargement.gif";
                                // URL de l'icône du chargement en cours d'une image
                                widget.chargementImageIconeUrl = "<?=$url_base?>modules/saisie/squelettes/messicoles/img/icones/chargement-image.gif";
                                // URL de l'icône du calendrier
                                widget.calendrierIconeUrl = "<?=$url_base?>modules/saisie/squelettes/messicoles/img/icones/calendrier.png";
                                // URL de l'icône pour une photo manquante
                                widget.pasDePhotoIconeUrl = "<?=$url_base?>modules/saisie/squelettes/messicoles/img/icones/pasdephoto.png";

                                // Initialisation du bousin
                                widget.init();
                        });
                //]]>
                </script>

                <!-- CSS -->
                <link href="https://resources.tela-botanica.org/jquery/jquery-ui/1.11.0/css/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" media="screen" />
                <link href="https://resources.tela-botanica.org/bootstrap/2.0.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" media="screen" />
                <link href="https://resources.tela-botanica.org/bootstrap/2.0.2/css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css" media="screen" />
                <link href="<?=$url_base?>modules/saisie/squelettes/messicoles/css/<?=isset($_GET['style']) ? $_GET['style'] : 'messicoles'?>.css" rel="stylesheet" type="text/css" media="screen" />

                <!--  Google Analytics -->
                <?php if($prod): ?>
                        <?php include "analytics.html"; ?>
                <?php endif; ?>
        </head>

        <body data-spy="scroll">
                <div class="container">
                        <div class="row-fluid">
                                <div class="span12 page-header">
                                        <div class="row">
                                                <div class="span12">
                                                        <h1>
                                                                <?php if($logo != 'defaut' && $logo != '0') { ?>
                                                                        <img id="logo-titre" class="span1" src="<?= $logo ?>" alt="Logo" />
                                                                <?php } else if($logo == 'defaut') { ?>
                                                                        <img id="logo-titre" class="span1" src="https://resources.tela-botanica.org/tb/img/256x256/logo_sans_mots.png" alt="Tela Botanica" />
                                                                <?php } ?>
                                                                <span id="titre-projet">
                                                                <?php if($titre != 'defaut') { ?>
                                                                        <?= $titre; ?>
                                                                </span>
                                                                <?php } else { ?>
                                                                        Ajout rapide d'observations
                                                                <?php } ?>
                                                                <img id="logo-messicoles" src="<?=$url_base?>modules/saisie/squelettes/messicoles/img/icones/logo.jpg" />
                                                        </h1>
                                                </div>
                                        </div>
                                </div>
                        </div>
                        <div class="row-fluid">
                                <div class="span6">
                                        <div class="row">
                                                <div class="span6">
                                                        <p>
                                                                Cet outil vous permet de partager simplement vos observations avec le
                                                                <a href="http://www.tela-botanica.org/site:accueil">réseau Tela Botanica</a> (sous <a href="http://www.tela-botanica.org/page:licence?langue=fr">licence CC-BY-SA</a>).
                                                                Identifiez-vous bien pour ensuite retrouver et gérer vos données dans
                                                                <a href="http://www.tela-botanica.org/appli:cel">votre Carnet en ligne</a>.
                                                                Créez jusqu'à 10 observations (avec 10Mo max d'images) puis partagez-les avec le bouton 'transmettre'.
                                                                Elles apparaissent immédiatement sur les <a href="http://www.tela-botanica.org/site:botanique">cartes et galeries photos </a> du site.
                                                        </p>
                                                        <p class="discretion">
                                                                Pour toute question ou remarque,
                                                                <a href="<?= $url_remarques ?>?service=cel&pageSource=<?php echo urlencode('http://'.$_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF'].'?'.$_SERVER['QUERY_STRING']); ?>"
                                                                  target="_blank"
                                                                  onclick="javascript:window.open(this.getAttribute('href'), 'Tela Botanica - Remarques', config='height=700, width=640, scrollbars=yes, resizable=yes'); return false;">
                                                                  contactez-nous</a>

                                                        </p>
                                                        <p class="discretion">
                                                                Une fois familiarisé avec l'interface vous pouvez cliquer sur ce bouton pour désactiver l'aide.
                                                                <button id="btn-aide" class="btn btn-mini btn-success">
                                                                        <span class="icon-question-sign icon-white"></span>
                                                                        <span id="btn-aide-txt" >Désactiver l'aide</span>
                                                                </button>
                                                        </p>
                                                </div>
                                        </div>
                                </div>
                                
                                <!-- Bloc Observateur -->
                                <div class="span6">
                                        <div class="well">
                                                <h2>Observateur</h2>
                                                <hr>
                                                <form id="form-observateur" action="#" class="" autocomplete="on">
                                                        <div class="row-fluid">
                                                                <div class="span6" data-placement="right">
                                                                        <label for="courriel">
                                                                                <span class="has-tooltip pointer"
                                                                                title="Saisissez le courriel avec lequel vous êtes inscrit à Tela Botanica.
                                                                                Si vous n'êtes pas inscrit, ce n'est pas grave, vous pourrez le faire
                                                                                ultérieurement. Des informations complémentaires vont vous être
                                                                                demandées : prénom et nom.">
                                                                                        <strong class="obligatoire">*Courriel</strong>
                                                                                </span>
                                                                        </label>
                                                                        <div class="input-prepend">
                                                                                <span class="add-on">
                                                                                        <i class="icon-envelope"></i>
                                                                                </span>
                                                                                <input id="courriel" class="input-large" name="courriel" type="text" />
                                                                                <input id="id_utilisateur" name="id_utilisateur" type="hidden"/>
                                                                        </div>
                                                                </div>
                                                                <div id="zone-courriel-confirmation" class="span6 hidden">
                                                                        <label for="courriel_confirmation"
                                                                                title="Veuillez saisir confirmer le courriel.">
                                                                                <strong class="obligatoire">*Courriel (confirmation)</strong>
                                                                        </label>
                                                                        <div class="input-prepend">
                                                                                <span class="add-on">
                                                                                        <i class="icon-envelope"></i>
                                                                                </span><input id="courriel_confirmation" class="input-large" name="courriel_confirmation" type="text"/>
                                                                        </div>
                                                                </div>
                                                        </div>
                                                        <div id="zone-prenom-nom" class="row-fluid hidden">
                                                                <div class="span6">
                                                                        <label for="prenom">
                                                                                <strong>Prénom</strong>
                                                                        </label>
                                                                        <div class="input-prepend">
                                                                                <span class="add-on">
                                                                                        <i class="icon-user"></i>
                                                                                </span><input id="prenom" name="prenom" class="input-large" type="text"/>
                                                                        </div>
                                                                </div>
                                                                <div class="span6">
                                                                        <label for="nom">
                                                                                <strong>Nom</strong>
                                                                        </label>
                                                                        <div class="input-prepend">
                                                                                <span class="add-on">
                                                                                        <i class="icon-user"></i>
                                                                                </span><input id="nom" name="nom"  class="input-large" type="text"/>
                                                                        </div>
                                                                </div>
                                                        </div>
                                                </form>
                                        </div>
                                </div>
                        </div>
                        <!-- Messages d'erreur du formulaire-->
                        <div class="row">
                                <div class="zone-alerte span6 offset6">
                                        <div id="dialogue-bloquer-copier-coller" class="alert alert-info alert-block" style="display:none;">
                                                <a class="close">×</a>
                                                <h4 class="alert-heading">Information : copier/coller</h4>
                                                <p>
                                                        Merci de ne pas copier/coller votre courriel.<br/>
                                                        La double saisie permet de vérifier l'absence d'erreurs.
                                                </p>
                                        </div>
                                        <div id="dialogue-courriel-introuvable" class="alert alert-info alert-block" style="display:none;">
                                                <a class="close">×</a>
                                                <h4 class="alert-heading">Information : courriel introuvable</h4>
                                                <p>
                                                        Vous n'êtes pas inscrit à Tela Botanica avec ce courriel.<br/>
                                                        Veuillez compléter les champs supplémentaires ou indiquer votre courriel d'inscription.<br/>
                                                        Pour retrouver vos observations dans le <a href="http://www.tela-botanica.org/appli:cel">Carnet en ligne</a>,
                                                        il sera nécesaire de <a href="http://www.tela-botanica.org/page:inscription">vous inscrire à Tela Botanica</a>.
                                                </p>
                                        </div>
                                        <div id="dialogue-google-map" class="alert alert-info alert-block" style="display: none;">
                                                <a class="close">×</a>
                                                <h4 class="alert-heading">Information sur Google Maps</h4>
                                                <div class="contenu"></div>
                                        </div>
                                </div>
                        </div>
                        <div class="row-fluid">
                                <div class="span12">
                                        <div class="row-fluid">
                                                <div class="span6">
                                                        <div class="well">
                                                        <!-- 1e colonne : date, lieu, geoloc -->
                                                                <div class="row-fluid">
                                                                        <h2>Relevé</h2>
                                                                        <hr>
                                                                        <form id="form-releve" class="control-group" action="#" autocomplete="on">
                                                                                <!-- DATE -->
                                                                                <div class="row-fluid">
                                                                                        <div class="control-group">
                                                                                                <label for="date">
                                                                                                        <span class="has-tooltip pointer"
                                                                                                        title="Veuillez indiquer la date du relevé au format jj/mm/aaaa. Vous pouvez
                                                                                                        cliquer sur l'icône de calendrier pour sélectionner une date">
                                                                                                                <strong class="obligatoire">*Date du relevé</strong>
                                                                                                        </span>
                                                                                                </label>
                                                                                                <div class="input-prepend">
                                                                                                        <span id="date-icone" class="add-on"></span><input id="date"
                                                                                                                class="input-small" name="date" type="text"
                                                                                                                placeholder="jj/mm/aaaa" />
                                                                                                </div>
                                                                                        </div>
                                                                                </div>
                                                                                <!-- Type de culture -->
                                                                                <div class="row-fluid">
                                                                                        <div class="span3 control-group"> 
                                                                                                <label class="pointer">
                                                                                                        <span class="has-tooltip pointer"
                                                                                                                title="Vous pouvez sélectionner un type de culture parmi la liste ou en saisir un manuellement via l'option Autres"
                                                                                                        >
                                                                                                                <strong class="obligatoire">*Type de culture</strong>
                                                                                                        </span>
                                                                                                </label>
                                                                                        </div>
                                                                                        <div class="span9 control-group">
                                                                                                <!-- Céréale -->                                                                              
                                                                                                <label for="culture-cereale-radio" class="radio culture pointer">
                                                                                                        <input type="radio" id="culture-cereale-radio" name="type-culture" value="cereale" data-titre="céréale" />
                                                                                                        <i class="icon-question-sign cursor-pointer" data-toggle="popover" data-trigger="hover"></i>
                                                                                                        Céréale
                                                                                                        <input class="has-tooltip" type="text" id="culture-cereale-input" name="type-culture-details" 
                                                                                                                placeholder="Ex : Blé" 
                                                                                                                style="display: none;" 
                                                                                                                title="Si vous la connaissez, indiquez quelle plante est cultivée sur le champ" 
                                                                                                        />
                                                                                                </label>
                                                                                                <div class="popover-html-content" data-for="culture-cereale-radio">
                                                                                                        <h5>Céréale</h5>
                                                                                                        <p class="texte-infobulle">
                                                                                                                Plante cultivée principalement pour ses grains, c'est-à-dire ses fruits 
                                                                                                                (caryopses), utilisés dans l'alimentation de l'Homme et des animaux 
                                                                                                                domestiques, souvent moulus sous forme de farine raffinée ou plus ou 
                                                                                                                moins complète, mais aussi en grains entiers (ces plantes sont aussi 
                                                                                                                parfois consommées sous forme de fourrage). En botanique, les céréales 
                                                                                                                regroupent des plantes de la famille des <i>Poacées</i> (ou <i>Graminées</i>). 
                                                                                                                Certaines graines d'autres familles botaniques sont parfois communément 
                                                                                                                appelées céréales, telles que le sarrasin (<i>Polygonacées</i>), le quinoa et 
                                                                                                                l'amarante (<i>Chénopodiacées</i>) ou le sésame (<i>Pédaliacées</i>). Toutefois, 
                                                                                                                n'étant pas des <i>Poacées</i>, ces dernières ne sont pas des céréales au sens 
                                                                                                                strict, et on leur donne souvent le nom de pseudo-céréales.
                                                                                                        </p>
                                                                                                        <img 
                                                                                                                class="image-infobulle" 
                                                                                                                src="<?=$url_base?>modules/saisie/squelettes/messicoles/img/photos/cereale.png"
                                                                                                        />
                                                                                                </div>
                                                                                                <!-- Friche -->                                                                         
                                                                                                <label for="culture-friche-radio" class="radio culture pointer">
                                                                                                        <input type="radio" id="culture-friche-radio" name="type-culture" value="friche" data-titre="friche" />
                                                                                                        <i class="icon-question-sign cursor-pointer" data-toggle="popover" data-trigger="hover"></i>
                                                                                                        Friche
                                                                                                        <input class="has-tooltip" type="text" id="culture-friche-input" name="type-culture-details" 
                                                                                                                placeholder="Ex : Pissenlit" 
                                                                                                                style="display: none;" 
                                                                                                                title="Si vous la connaissez, indiquez quelle plante est cultivée sur le champ" 
                                                                                                        />
                                                                                                </label>
                                                                                                <div class="popover-html-content" data-for="culture-friche-radio">
                                                                                                        <h5>Friche</h5>
                                                                                                        <p class="texte-infobulle">
                                                                                                                Zone, terrain ou une propriété qui n'est pas ou plus cultivée ni entretenue. 
                                                                                                                Des activités marginales peuvent cependant s’y étendre si ses parties restent 
                                                                                                                bien sûr accessibles : pâturage, cueillette, braconnage, chasse ou pêche et 
                                                                                                                autres activités de loisirs.
                                                                                                        </p>
                                                                                                        <img 
                                                                                                                class="image-infobulle" 
                                                                                                                src="<?=$url_base?>modules/saisie/squelettes/messicoles/img/photos/friche.png"
                                                                                                        />
                                                                                                </div>
                                                                                                <!-- Maraichère -->                                                                            
                                                                                                <label for="culture-maraichere-radio" class="radio culture pointer">
                                                                                                        <input type="radio" id="culture-maraichere-radio" name="type-culture" value="maraichere" data-titre="maraichère" />
                                                                                                        <i class="icon-question-sign cursor-pointer" data-toggle="popover" data-trigger="hover"></i>
                                                                                                        Maraichère
                                                                                                        <input class="has-tooltip" type="text" id="culture-maraichere-input" name="type-culture-details" 
                                                                                                                placeholder="Ex : Pois" 
                                                                                                                style="display: none;" 
                                                                                                                title="Si vous la connaissez, indiquez quelle plante est cultivée sur le champ" 
                                                                                                        />
                                                                                                </label>
                                                                                                <div class="popover-html-content" data-for="culture-maraichere-radio">
                                                                                                        <h5>Maraichère</h5>
                                                                                                        <p class="texte-infobulle">
                                                                                                                La culture maraîchère concerne les légumes, les petits fruits, les fines 
                                                                                                                herbes et fleurs à usage alimentaire, de manière professionnelle.
                                                                                                        </p>
                                                                                                        <img 
                                                                                                                class="image-infobulle" 
                                                                                                                src="<?=$url_base?>modules/saisie/squelettes/messicoles/img/photos/maraichere.jpg"
                                                                                                        />
                                                                                                </div>
                                                                                                <!-- Vigne -->                                                                          
                                                                                                <label for="culture-vigne-radio" class="radio culture pointer">
                                                                                                        <input type="radio" id="culture-vigne-radio" name="type-culture" value="vigne" data-titre="vigne" />
                                                                                                        <i class="icon-question-sign cursor-pointer" data-toggle="popover" data-trigger="hover"></i>
                                                                                                        Vigne
                                                                                                        <input class="has-tooltip" type="text" id="culture-vigne-input" name="type-culture-details" 
                                                                                                                placeholder="Ex : Sauterne" 
                                                                                                                style="display: none;" 
                                                                                                                title="Si vous la connaissez, indiquez quelle plante est cultivée sur le champ" 
                                                                                                        />
                                                                                                </label>
                                                                                                <div class="popover-html-content" data-for="culture-vigne-radio">
                                                                                                        <h5>Vigne</h5>
                                                                                                        <p class="texte-infobulle">
                                                                                                                Plantes grimpantes de la famille des <i>Vitaceae</i>, du genre <i>Vitis</i>. 
                                                                                                                Elles sont largement cultivées pour leur fruit en grappes, le raisin, 
                                                                                                                dont on tire un jus, le moût, qui devient du vin après fermentation.
                                                                                                        </p>
                                                                                                        <img 
                                                                                                                class="image-infobulle" 
                                                                                                                src="<?=$url_base?>modules/saisie/squelettes/messicoles/img/photos/vigne.png"
                                                                                                        />
                                                                                                </div>
                                                                                                <!-- Verger -->                                                                         
                                                                                                <label for="culture-verger-radio" class="radio culture pointer">
                                                                                                        <input type="radio" id="culture-verger-radio" name="type-culture" value="verger" data-titre="verger" />
                                                                                                        <i class="icon-question-sign cursor-pointer" data-toggle="popover" data-trigger="hover"></i>
                                                                                                        Verger
                                                                                                        <input class="has-tooltip" type="text" id="culture-verger-input" name="type-culture-details" 
                                                                                                                placeholder="Ex : Pommier" 
                                                                                                                style="display: none;" 
                                                                                                                title="Si vous la connaissez, indiquez quelle plante est cultivée sur le champ" 
                                                                                                        />
                                                                                                </label>
                                                                                                <div class="popover-html-content" data-for="culture-verger-radio">
                                                                                                        <h5>Verger</h5>
                                                                                                        <p class="texte-infobulle">
                                                                                                                Espace de terrain dévolu à la culture d'arbres fruitiers, appelée 
                                                                                                                arboriculture fruitière. Il en existe différents types : les vergers 
                                                                                                                conservatoires, les prés-vergers, les vergers commerciaux et de jardin 
                                                                                                                potager.
                                                                                                        </p>
                                                                                                        <img 
                                                                                                                class="image-infobulle" 
                                                                                                                src="<?=$url_base?>modules/saisie/squelettes/messicoles/img/photos/verger.png"
                                                                                                        />
                                                                                                </div>
                                                                                                <!-- Plantes à parfum, aromatiques et médicinales -->                                                                         
                                                                                                <label for="culture-aromatique-radio" class="radio culture pointer">
                                                                                                        <input type="radio" id="culture-aromatique-radio" name="type-culture" value="aromatique" data-titre="plantes à parfum, aromatiques et médicinales" />
                                                                                                        <i class="icon-question-sign cursor-pointer" data-toggle="popover" data-trigger="hover"></i>
                                                                                                        Plantes à parfum, aromatiques et médicinales
                                                                                                        <input class="has-tooltip" type="text" id="culture-aromatique-input" name="type-culture-details" 
                                                                                                                placeholder="Ex : Lavande" 
                                                                                                                style="display: none;" 
                                                                                                                title="Si vous la connaissez, indiquez quelle plante est cultivée sur le champ" 
                                                                                                        />
                                                                                                </label>
                                                                                                <div class="popover-html-content" data-for="culture-aromatique-radio">
                                                                                                        <h5>Plantes à parfum, aromatiques et médicinales</h5>
                                                                                                        <img 
                                                                                                                class="image-infobulle" 
                                                                                                                src="<?=$url_base?>modules/saisie/squelettes/messicoles/img/photos/aromatique.jpg"
                                                                                                        />
                                                                                                </div>
                                                                                                <!-- Autres -->                                                                         
                                                                                                <label for="culture-autres-radio" class="radio culture pointer">
                                                                                                        <input type="radio" id="culture-autres-radio" name="type-culture" value="autres" data-titre="autres" />
                                                                                                        Autres
                                                                                                        <input type="text" id="culture-autres-input" name="type-culture-details" 
                                                                                                                style="display: none;" 
                                                                                                        />
                                                                                                </label>
                                                                                        </div>
                                                                                </div>
                                                                        </form>
                                                                        <!-- Géolocalisation -->
                                                                        <div class="row-fluid">
                                                                                <div class="span4">
                                                                                        <strong>Géolocalisation</strong>
                                                                                </div>
                                                                                <div class="span8 droite">
                                                                                        <form id="form-carte-recherche" class="form-search form-horizontal" action="#" >
                                                                                                <div class="control-group">
                                                                                                        <label for="carte-recherche" class="pointer">Rechercher</label>
                                                                                                        <input id="carte-recherche" class="search-query has-tooltip" type="text" value=""
                                                                                                                title="Permet de centrer la carte sur le lieu recherché."
                                                                                                                placeholder="Ex : France, Paris, Rue de Rivoli..."/>
                                                                                                </div>
                                                                                        </form>
                                                                                </div>
                                                                        </div>
                                                                        <div class="row-fluid">
                                                                                <div class="span12">
                                                                                        <div id="map-canvas" class="has-tooltip"
                                                                                                title="Vous pouvez cliquer sur la carte pour déplacer le marqueur
                                                                                                        représentant votre station ou bien le glisser-déposer sur
                                                                                                        le lieu souhaité."></div>
                                                                                </div>
                                                                        </div>
                                                                        <!-- Coordonnées -->
                                                                        <div class="row-fluid">
                                                                                <label for="coordonnees-geo" class="span7">
                                                                                        <a href="#" class="afficher-coord">Afficher</a>
                                                                                        <a href="#" class="afficher-coord" style="display:none;">Cacher</a>
                                                                                        les coordonnées géographiques
                                                                                        <span id="lat-lon-info" class="info has-tooltip"
                                                                                                title="Système géodésique mondial, révision de 1984 - Coordonnées non projetées">
                                                                                                (WGS84)
                                                                                        </span>
                                                                                </label>
                                                                                <div id="info-commune" class="span5">
                                                                                        <span for="marqueur-commune">Commune : </span>
                                                                                        <span id="marqueur-commune">
                                                                                                <span id="commune-nom" class="commune-info"></span>
                                                                                                (<span id="commune-code-insee" class="commune-info has-tooltip"
                                                                                                        title="Code INSEE de la commune"></span>)
                                                                                        </span>
                                                                                </div>
                                                                        </div>
                                                                        <!-- Formulaire Station -->
                                                                        <form id="form-station" class="control-group" action="#" enctype="multipart/form-data" autocomplete="on">
                                                                                <div id="coordonnees-geo" class="well" style="display:none;">
                                                                                        <div class="row-fluid form-inline">
                                                                                                <div id="coord-lat" class="span4">
                                                                                                        <label for="latitude" class="pointer">Latitude</label>
                                                                                                        <input id="latitude" class="input-mini" name="latitude" type="text" value=""/>
                                                                                                </div>
                                                                                                <div id="coord-lng" class="span4">
                                                                                                        <label for="longitude" class="pointer">Longitude</label>
                                                                                                        <input id="longitude" class="input-mini" name="longitude" type="text" value=""/>
                                                                                                </div>
                                                                                                <div class="span4 droite">
                                                                                                        <input class="btn btn-primary" id="geolocaliser" type="button" value="Voir sur la carte"
                                                                                                                class="has-tooltip"
                                                                                                                title="Centre la carte sur les coordonnées de latitude et longitude saisies."/>
                                                                                                </div>
                                                                                        </div>
                                                                                </div>
                                                                                <div class="row-fluid">
                                                                                        <div class="span4 has-tooltip centre"
                                                                                                title="Toponyme plus précis que la commune, utilisé localement et se trouvant souvent sur les cartes au 1/25 000." >
                                                                                                <label for="lieudit" class="pointer">Lieu-dit</label>
                                                                                                <div>
                                                                                                        <input type="text" id="lieudit" class="span2" name="lieudit"/>
                                                                                                </div>
                                                                                        </div>
                                                                                        <div class="span4 has-tooltip centre"
                                                                                                title="Lieu précis de l'observation définissant une unité écologique homogène (ex: le pré derrière la maison)." >
                                                                                                <label for="station" class="pointer">Station</label>
                                                                                                <div>
                                                                                                        <input type="text" id="station" class="span2" name="station"/>
                                                                                                </div>
                                                                                        </div>
                                                                                        <div class="span4 has-tooltip centre"
                                                                                                title="Type d'habitat plus ou moins standardisé dans les codes Corine ou Catminat (ex: prairie humide).">
                                                                                                <label for="milieu" class="pointer">Milieu</label>
                                                                                                <div>
                                                                                                        <input type="text" id="milieu" class="span2" name="milieu" />
                                                                                                </div>
                                                                                        </div>
                                                                                </div>
                                                                        </form>
                                                                </div>
                                                        </div>
                                                </div>
                                                <!-- 2e colonne : observation -->
                                                <div class="span6">
                                                        <div class="well">
                                                                <div class="row-fluid">
                                                                        <div class="span12">
                                                                                <form id="form-obs" action="#" autocomplete="on">
                                                                                        <h2>Observation</h2>
                                                                                        <hr>
                                                                                        <div class="row-fluid">
                                                                                                <div id="taxon-liste-input-groupe" class="control-group">
                                                                                                        <label for="taxon-liste">
                                                                                                                <span class="has-tooltip pointer"
                                                                                                                title="Sélectionnez une espèce dans la liste déroulante par son nom latin
                                                                                                                ou commun. Si une espèce est absente, sélectionner «Autre espèce»." 
                                                                                                                >
                                                                                                                        <strong class="obligatoire">*Espèces</strong>
                                                                                                                </span>
                                                                                                        </label>
                                                                                                        <span class="input-prepend">
                                                                                                                <span id="espece-icone" class="add-on">
                                                                                                                        <i class="icon-leaf"></i>
                                                                                                                </span>
                                                                                                        </span>
                                                                                                        <select id="taxon-liste" name="taxon-liste" class="form-control">
                                                                                                                <option value="" selected>Sélectionner une espèce</option>
                                                                                                                <optgroup id="taxon-liste-noms">
                                                                                                                        <?php foreach ($taxons['sci-et-fr'] as $taxon) :?>
                                                                                                                                <option
                                                                                                                                        class="<?=$taxon['nom_type'] ?>"
                                                                                                                                        value="<?=$taxon['num_nom'] ?>"
                                                                                                                                        title="<?=$taxon['nom_title'] ?>"
                                                                                                                                        data-nom-a-sauver="<?=$taxon['nom_a_sauver'] ?>"
                                                                                                                                        >
                                                                                                                                        <?=$taxon['nom_a_afficher']?>
                                                                                                                                </option>
                                                                                                                        <?php endforeach; ?>
                                                                                                                </optgroup>
                                                                                                                <optgroup id="taxon-liste-special">
                                                                                                                        <?php foreach ($taxons['speciaux'] as $taxon) :?>
                                                                                                                                <option
                                                                                                                                        class="<?=$taxon['nom_type'] ?>"
                                                                                                                                        value="<?=$taxon['num_nom'] ?>"
                                                                                                                                        title="<?=$taxon['nom_title'] ?>"
                                                                                                                                        data-nom-a-sauver="<?=$taxon['nom_a_sauver'] ?>"
                                                                                                                                        >
                                                                                                                                        <?=$taxon['nom_a_afficher']?>
                                                                                                                                </option>
                                                                                                                        <?php endforeach; ?>
                                                                                                                </optgroup>
                                                                                                                <option id="taxon-option-autre" value="?">Autre espèce</option>
                                                                                                        </select>
                                                                                                </div>
                                                                                        </div>
                                                                                        <div class="row-fluid">
                                                                                                <div class="span12">
                                                                                                        <div id="taxon-input-groupe" class="" hidden>
                                                                                                                <label for="taxon" title="Choisissez une espèce">
                                                                                                                        <span class="has-tooltip pointer" title="Sélectionnez une espèce dans la liste déroulante pour lier
                                                                                                                        votre nom au référentiel selectionné. Si vous
                                                                                                                        le désirez vous pouvez aussi saisir un nom absent du référentiel
                                                                                                                        (Ex. : 'fleur violette' ou 'viola sinensis???').">
                                                                                                                                <strong>Espèce <?= $referentiel_impose ? '('.$ns_referentiel.')' : '' ?> <em>(ou indication sur la plante)</em></strong>
                                                                                                                        </span>
                                                                                                                </label>
                                                                                                                <div class="row-fluid">
                                                                                                                        <div class="span12">
                                                                                                                                <span class="input-prepend">
                                                                                                                                        <span class="add-on">
                                                                                                                                                <i class="icon-leaf"></i>
                                                                                                                                        </span>
                                                                                                                                        <input type="text" id="taxon" name="taxon" value="<?= $nom_sci_espece_defaut; ?>" data="numNomSel" />
                                                                                                                                </span>
                                                                                                                        </div>
                                                                                                                </div>
                                                                                                        </div>
                                                                                                </div>
                                                                                                <p class="alert alert-warning" id="avertissement-non-messicole" style="display: none;">
                                                                                                        <strong>Attention :</strong> cette espèce ne fait pas partie de la liste des messicoles du plan national d'action pour les messicoles. L'espèce que vous observez pourrait ne pas être une messicole.
                                                                                                </p>
                                                                                        </div>
                                                                                        <!-- Certitude -->
                                                                                        <div class="row-fluid">
                                                                                                <div class="span12 control-group">
                                                                                                        <label for="identification-liste">
                                                                                                                <span class="has-tooltip pointer" 
                                                                                                                title="Indiquez votre certitude vis-à-vis du nom d'espèce indiqué">
                                                                                                                        <strong>Certitude</strong>
                                                                                                                </span>
                                                                                                        </label>
                                                                                                        <span class="input-prepend">
                                                                                                                <span id="identification-icone" class="add-on">
                                                                                                                        <i class="icon-eye-open"></i>
                                                                                                                </span>
                                                                                                        </span>
                                                                                                        <select name="identification-liste" id="identification-liste">
                                                                                                                <option value="" selected>Indiquez votre certitude</option>
                                                                                                                <option value="certaine" data-titre="certaine">Certaine</option>
                                                                                                                <option value="douteuse" data-titre="douteuse">Douteuse</option>
                                                                                                                <option value="adeterminer" data-titre="à déterminer">A déterminer</option>
                                                                                                        </select>
                                                                                                </div>
                                                                                        </div>
                                                                                        <!-- Abondance -->
                                                                                        <div class="row-fluid">
                                                                                                <div class="control-group">
                                                                                                        <label for="abondance-liste">
                                                                                                                <span class="has-tooltip pointer" 
                                                                                                                title="Indiquez le nombre d'individus observés, toutes zones du champ confondues">
                                                                                                                        <strong class="obligatoire">*Abondance</strong>
                                                                                                                </span>
                                                                                                        </label>
                                                                                                        <span class="input-prepend">
                                                                                                                <span id="abondance-icone" class="add-on">
                                                                                                                        <i class="icon-signal"></i>
                                                                                                                </span>
                                                                                                        </span>
                                                                                                        <select name="abondance-liste" id="abondance-liste">
                                                                                                                <option value="" class="a-masquer" selected>Sélectionner une abondance</option>
                                                                                                                <option value="1" data-titre="1 à 10 individus">1 à 10 individus</option>
                                                                                                                <option value="10" data-titre="10 à 100 individus">10 à 100 individus</option>
                                                                                                                <option value="100" data-titre="100 à 1000 individus">100 à 1000 individus</option>
                                                                                                                <option value="1000" data-titre="plus de 1000 individus">> 1000 individus</option>
                                                                                                        </select>
                                                                                                </div>
                                                                                        </div>
                                                                                        <!-- Zone du champ -->
                                                                                        <div class="row-fluid">
                                                                                                <div class="span3 control-group">
                                                                                                        <label>
                                                                                                                <span class="has-tooltip pointer" 
                                                                                                                title="Sélectionnez une ou plusieurs zones dans lesquelles l'espèce indiquée est présente">
                                                                                                                        <strong class="obligatoire">*Zone du champ</strong>
                                                                                                                </span>
                                                                                                        </label>
                                                                                                </div>
                                                                                                <div class="span9 control-group">
                                                                                                        <!-- Bord -->                                                                           
                                                                                                        <label for="bordure" class="checkbox pointer">
                                                                                                                <input type="checkbox" id="bordure" name="zone-champ[]" value="bord" data-titre="bord" />
                                                                                                                <i class="icon-question-sign cursor-pointer" data-toggle="popover" data-trigger="hover"></i>
                                                                                                                Bord du champ
                                                                                                        </label>
                                                                                                        <div class="popover-html-content" data-for="bordure">
                                                                                                                <h5>Bord du champ</h5>
                                                                                                                <img 
                                                                                                                        class="image-verticale-infobulle" 
                                                                                                                        src="<?=$url_base?>modules/saisie/squelettes/messicoles/img/photos/bord2.png"
                                                                                                                />
                                                                                                                <p class="texte-infobulle">
                                                                                                                        Le bord du champ à inventorier prend en compte la zone terreuse entre le bord enherbé 
                                                                                                                        de la route et un mètre dans la zone cultivée (dès les premières plantes cultivées du 
                                                                                                                        bord vers le cœur du champ. Le bord du champs ne prend pas en compte la zone enherbée 
                                                                                                                        qui peut se trouver en bord de route.
                                                                                                                </p>
                                                                                                                
                                                                                                                <img 
                                                                                                                        class="image-infobulle" id="bord1"
                                                                                                                        src="<?=$url_base?>modules/saisie/squelettes/messicoles/img/photos/bord1.png"
                                                                                                                />
                                                                                                                
                                                                                                        </div>
                                                                                                        <!-- Cœur du champ -->                                                                         
                                                                                                        <label for="coeur-champ" class="checkbox pointer">
                                                                                                                <input type="checkbox" id="coeur-champ" name="zone-champ[]" value="coeur" data-titre="cœur" />
                                                                                                                <i class="icon-question-sign cursor-pointer" data-toggle="popover" data-trigger="hover"></i>
                                                                                                                Cœur du champ
                                                                                                        </label>
                                                                                                        <div class="popover-html-content" data-for="coeur-champ">
                                                                                                                <h5>Cœur du champ</h5>
                                                                                                                <p class="texte-infobulle">
                                                                                                                        Le cœur du champ concerne la zone cultivée. Il exclut 1m de bord de champ cultivé, et les 
                                                                                                                        zones délaissées/oubliées par l'agriculteur lors du semi.
                                                                                                                </p>
                                                                                                                <img 
                                                                                                                        class="image-infobulle" 
                                                                                                                        src="<?=$url_base?>modules/saisie/squelettes/messicoles/img/photos/coeur.png"
                                                                                                                />
                                                                                                        </div>
                                                                                                        <!-- Zone délaissée -->                                                                               
                                                                                                        <label for="zone-delaissee" class="checkbox pointer">
                                                                                                                <input type="checkbox" id="zone-delaissee" name="zone-champ[]" value="zone-delaissee" data-titre="zone délaissée" />
                                                                                                                <i class="icon-question-sign cursor-pointer" data-toggle="popover" data-trigger="hover"></i>
                                                                                                                Zone délaissée
                                                                                                        </label>
                                                                                                        <div class="popover-html-content" data-for="zone-delaissee">
                                                                                                                <h5>Zone délaissée</h5>
                                                                                                                <p class="texte-infobulle">
                                                                                                                        Les zones délaissées sont les zones où l'agriculteur n'a pas réalisé de semi, ce qui semblerait 
                                                                                                                        être un oubli de sa part. Cette zone ne prend pas en compte le bord du champ.
                                                                                                                </p>
                                                                                                                <img 
                                                                                                                        class="image-infobulle" 
                                                                                                                        src="<?=$url_base?>modules/saisie/squelettes/messicoles/img/photos/delaissee.png"
                                                                                                                />
                                                                                                        </div>
                                                                                                </div>
                                                                                        </div>
                                                                                        <div class="row-fluid">
                                                                                                <div class="span6">
                                                                                                        <label for="notes" class="pointer">
                                                                                                                <strong>Notes</strong>
                                                                                                        </label>
                                                                                                        <div>
                                                                                                                <textarea id="notes" class="span5" rows="6" name="notes"
                                                                                                                        placeholder="Vous pouvez éventuellement ajouter des informations complémentaires à votre observation (altitude, taille de la plante...)"></textarea>
                                                                                                        </div>
                                                                                                </div>
                                                                                        </div>
                                                                                </form>
                                                                                <form id="form-upload" class="form-horizontal" action="<?= $url_ws_upload ?>"
                                                                                        method="post" enctype="multipart/form-data">
                                                                                        <h3>Image(s) de cette plante</h3>
                                                                                        <strong>Ajouter une image</strong>
                                                                                        <p class="miniature-info" class="discretion help-inline">Les photos doivent être au format JPEG et ne doivent pas excéder 5Mo chacune.</p>
                                                                                        <div id="image-obligatoire" class="alert alert-error alert-block" style="display: none;">
                                                                                                <a class="close">×</a>
                                                                                                <h4 class="alert-heading">Information : image obligatoire</h4>
                                                                                                <p>
                                                                                                        Votre identification n'est pas certaine.
                                                                                                        <br>
                                                                                                        Veuillez ajouter au moins une image.
                                                                                                </p>
                                                                                        </div>
                                                                                        <div id ="photos-conteneur">
                                                                                                <input class="pointer" type="file" id="fichier" name="fichier" accept="image/jpeg" />
                                                                                                <input type="hidden" name="MAX_FILE_SIZE" value="5242880"/>
                                                                                                <div id="miniatures">
                                                                                                </div>
                                                                                                <p class="miniature-msg" class="span12">&nbsp;</p>
                                                                                        </div>
                                                                                </form>
                                                                        </div>
                                                                        <div class="row-fluid">
                                                                                <div class="span12 centre has-tooltip"
                                                                                        title="Une fois les champs remplis, vous pouvez cliquer sur ce bouton pour
                                                                                                ajouter votre observation à la liste à transmettre.">
                                                                                        <button id="ajouter-obs" class="btn btn-primary btn-large" type="button">
                                                                                                Créer
                                                                                        </button>
                                                                                </div>
                                                                        </div>
                                                                        <!-- Messages d'erreur du formulaire-->
                                                                        <div class="row-fluid">
                                                                                <div class="zone-alerte">
                                                                                        <div id="dialogue-bloquer-creer-obs" class="alert alert-warning alert-block" style="display: none;">
                                                                                                <a class="close">×</a>
                                                                                                <h4 class="alert-heading">Information : 10 observations maximum</h4>
                                                                                                <p>
                                                                                                        Vous venez d'ajouter votre 10ème observation.<br/>
                                                                                                        Pour en ajouter de nouvelles, il est nécessaire de les transmettre en cliquant sur le bouton ci-dessous.
                                                                                                </p>
                                                                                        </div>
                                                                                </div>
                                                                                <div class="zone-alerte">
                                                                                        <div id="dialogue-form-invalide" class="alert alert-warning alert-block" style="display: none;">
                                                                                                <a class="close">×</a>
                                                                                                <h4 class="alert-heading">Information : champs en erreur</h4>
                                                                                                <p>
                                                                                                        Certains champs du formulaire sont mal remplis.<br/>
                                                                                                        Veuillez vérifier vos données.
                                                                                                </p>
                                                                                        </div>
                                                                                </div>
                                                                        </div>
                                                                </div>
                                                        </div>
                                                </div>
                                        </div>
                                </div>
                        </div>
                        <!-- Affiche le tableau récapitualif des observations ajoutées -->
                        <div id="zone-liste-obs" class="row-fluid">
                                <div class="span12">
                                        <div class="well">
                                                <div class="row-fluid">
                                                        <div class="span8">
                                                                <h2>Observations à transmettre : <span class="obs-nbre">0</span></h2>
                                                        </div>
                                                        <div class="span4 droite">
                                                                <button id="transmettre-obs" class="btn btn-primary btn-large has-tooltip"
                                                                        type="button" disabled="disabled"
                                                                        title="Ajoute les observations ci-dessous à votre Carnet en Ligne et les rend publiques.">
                                                                        Transmettre
                                                                </button>
                                                        </div>
                                                </div>
                                                <div id="liste-obs" ></div>
                                                <div class="row">
                                                        <div class="zone-alerte span6 offset3">
                                                                <div id="dialogue-zero-obs" class="alert alert-block" style="display: none;">
                                                                        <a class="close">×</a>
                                                                        <h4 class="alert-heading">Attention : aucune observation</h4>
                                                                        <p>Veuillez saisir des observations pour les transmettres.</p>
                                                                </div>

                                                                <div id="dialogue-obs-transaction-ok" class="alert alert-success alert-block" style="display: none;"">
                                                                        <a class="close">×</a>
                                                                        <h4 class="alert-heading">Information : transmission des observations</h4>
                                                                        <div class="alert-txt"></div>
                                                                </div>

                                                                <div id="dialogue-obs-transaction-ko" class="alert alert-error alert-block" style="display: none;">
                                                                        <a class="close">×</a>
                                                                        <h4 class="alert-heading">Erreur : transmission des observations</h4>
                                                                        <div class="alert-txt"></div>
                                                                </div>
                                                        </div>
                                                </div>

                                        </div>
                                </div>
                        </div>

                        <footer class="row-fluid">
                                <p class="span12">&copy; Tela Botanica 2015</p>
                        </footer>

                        <!-- Fenêtres modales -->
                        <div id="chargement" class="modal-fenetre" style="display:none;">
                                <div id="chargement-centrage" class="modal-contenu">
                                        <div class="progress progress-striped active">
                                                <div id="barre-progression-upload" class="bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="10" style="">
                                                <span class="sr-only">0/10 observations transmises</span>
                                                </div>
                                        </div>
                                        <p id="chargement-txt" style="color:white;font-size:1.5em;">
                                                Transfert des observations en cours...<br />
                                                Cela peut prendre plusieurs minutes en fonction de la taille des images et du nombre
                                                d'observations à transférer.
                                        </p>
                                </div>
                        </div>

                        <!-- Templates HTML -->
                        <div id="tpl-transmission-ok" style="display:none;">
                                <p class="msg">
                                        Vos observations ont bien été transmises.<br />
                                        Elles sont désormais consultables à travers les différents outils de visualisation
                                        du réseau (<a href="http://www.tela-botanica.org/site:botanique">eFlore</a>,
                                        <a href="http://www.tela-botanica.org/appli:pictoflora">galeries d'images</a>,
                                        <a href="http://www.tela-botanica.org/appli:identiplante">identiplante</a>,
                                        <a href="http://www.tela-botanica.org/widget:cel:cartoPoint">cartographie (widget)</a>...)<br />
                                        Si vous souhaitez les modifier ou les supprimer, vous pouvez les retrouver en vous
                                        connectant à votre <a href="http://www.tela-botanica.org/appli:cel">Carnet en ligne</a>.<br />
                                        N'oubliez pas qu'il est nécessaire de
                                        <a href="http://www.tela-botanica.org/page:inscription">s'inscrire à Tela Botanica</a>
                                        au préalable, si ce n'est pas déjà fait.
                                </p>
                        </div>
                        <div id="tpl-transmission-ko" style="display:none;">
                                <p class="msg">
                                        Une erreur est survenue lors de la transmission d'une observation (indiquée en rouge).<br />
                                        Vous pouvez tenter de la retransmettre en cliquant à nouveau sur le bouton transmettre ou bien la supprimer
                                        et transmettre les suivantes.<br />
                                        Néanmoins, les observations n'apparaissant plus dans la liste "observations à transmettre", ont bien été transmises lors de votre précédente tentative. <br />
                                        Si le problème persiste, vous pouvez signaler le dysfonctionnement sur
                                        <a href="<?= $url_remarques ?>?service=cel&pageSource=<?php echo urlencode('http://'.$_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF'].'?'.$_SERVER['QUERY_STRING']); ?>"
                                                                  target="_blank"
                                                                  onclick="javascript:window.open(this.getAttribute('href'), 'Tela Botanica - Remarques', config='height=700, width=640, scrollbars=yes, resizable=yes'); return false;">
                                                                  le formulaire de signalement d'erreurs</a>.
                                </p>
                        </div>
                </div>
        </body>
</html>