Subversion Repositories eFlore/Applications.cel

Rev

Rev 1260 | Go to most recent revision | Blame | Compare with Previous | Last modification | View Log | RSS feed

<!DOCTYPE html>
<html>
        <head>
                <title>Saisie simplifiée du CEL</title>
                
                <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
                <meta http-equiv="Content-style-type" content="text/css" />
                <meta http-equiv="Content-script-type" content="text/javascript" />
                <meta http-equiv="Content-language" content="fr" />
                
                <meta name="revisit-after" content="15 days" />
        <meta name="robots" content="index,follow" />
        <meta name="author" content="Jean-Pascal MILCENT" />
        <meta name="keywords" content="Tela Botanica, CEL" />
        <meta name="description" content="Widget de saisie simplifiée pour le CEL" />

                <!-- Viewport Mobile -->
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                
                <!-- Favicones -->
                <link rel="shortcut icon" type="image/x-icon" href="<?=$url_base?>/modules/saisie/squelettes/defaut/img/favicon.ico" />
                
                <!-- Javascript : bibliothèques -->
                <!-- Google Map v3 -->
                <!--<script type="text/javascript" src="https://getfirebug.com/firebug-lite.js"></script>-->
                <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&amp;language=fr&amp;region=FR"></script>     
                
                <!-- Jquery -->
                <script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/1.7.1/jquery-1.7.1.js"></script>
                <!-- Jquery UI : nécessaire pour le minicalendrier et l'auto-complétion -->
                <script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/jquery-ui/1.8.18/js/jquery-ui-1.8.18.custom.min.js"></script>
                <script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/jquery-ui/1.8.18/js/jquery.ui.datepicker-fr.js"></script>
                <!-- Jquery Plugins -->
                <!-- Jquery Validate : nécessaire pour la validation des formulaires -->
                <script type="text/javascript" src="http://www.tela-botanica.org/commun/bootstrap/2.0.2/js/validate/1.9.0/jquery.validate.min.js"></script>
                <script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/validate/1.9.0/messages_fr.js"></script>
                <!-- Jquery Form :nécessaire pour l'upload des images -->
                <script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/form/2.95/jquery.form.min.js"></script>
                
                <!-- Bootstrap -->
                <script type="text/javascript" src="http://www.tela-botanica.org/commun/bootstrap/2.0.2/js/bootstrap.min.js"></script>
                
                <!-- Javascript : appli saisie -->
                <script type="text/javascript">
                //<![CDATA[
                        // La présence du parametre 'debug' dans l'URL enclenche le dégogage
                        var DEBUG = <?=isset($_GET['debug']) ? 'true' : 'false'?>;
                        // La présence du parametre 'html5' dans l'URL enclenche les fonctions avancées HTML5
                        var HTML5 = <?=isset($_GET['html5']) ? 'true' : 'false'?>;
                        // Mot-clé du widget/projet
                        var TAG_PROJET = "WidgetSaisie";
                        // Mots-clés à ajouter aux images
                        var TAG_IMG = "<?=isset($_GET['tag-img']) ? $_GET['tag-img'] : ''?>";
                        // Mots-clés à ajouter aux observations
                        var TAG_OBS = "<?=isset($_GET['tag-obs']) ? $_GET['tag-obs'] : ''?>";
                        // URL du web service réalisant l'insertion des données dans la base du CEL.
                        var SERVICE_SAISIE_URL = "<?=$url_ws_saisie?>";
                        // Code du référentiel utilisé pour les nom scientifiques.
                        var NOM_SCI_REFERENTIEL = "<?=$ns_referentiel?>";
                        // Code de la version du référentiel utilisé pour les nom scientifiques.
                        var NOM_SCI_VERSION = "<?=$ns_version?>";
                        // Nombre d'élément dans les listes d'auto-complétion
                        var AUTOCOMPLETION_ELEMENTS_NBRE = 20;
                        // URL du web service permettant l'auto-complétion des noms scientifiques.
                        var SERVICE_AUTOCOMPLETION_NOM_SCI_URL = "<?=$url_ws_autocompletion_ns?>?"+
                                        "masque={masque}&"+
                                        "recherche=etendue&"+
                                        "retour.champs=famille,nom_retenu,nom_retenu_complet,num_taxonomique,nom_retenu.id&"+
                                        "version.projet="+NOM_SCI_VERSION+"&"+
                                        "ns.structure=au"+"&"+
                                        "navigation.limite="+AUTOCOMPLETION_ELEMENTS_NBRE;
                        // Nombre d'observations max autorisé avant transmission
                        var OBS_MAX_NBRE = 10;
                        // Durée d'affichage en milliseconde des messages d'informations
                        var DUREE_MESSAGE = 15000;
                        // Squelette d'URL du web service d'eFlore fournissant les noms de communes.
                        var SERVICE_NOM_COMMUNE_URL = "http://www.tela-botanica.org/service:eflore:0.1/osm/nom-commune?lon={lon}&lat={lat}";
                        // URL du marqueur à utiliser dans la carte Google Map
                        var GOOGLE_MAP_MARQUEUR_URL = "<?=$url_base?>modules/saisie/squelettes/defaut/img/marqueurs/epingle.png";
                        // URL de l'icône du chargement en cours
                        var CHARGEMENT_ICONE_URL = "<?=$url_base?>modules/saisie/squelettes/defaut/img/icones/chargement.gif";
                        // URL de l'icône du calendrier
                        var CALENDRIER_ICONE_URL = "<?=$url_base?>modules/saisie/squelettes/defaut/img/icones/calendrier.png";
                        // URL de l'icône du calendrier
                        var PAS_DE_PHOTO_ICONE_URL = "<?=$url_base?>modules/saisie/squelettes/defaut/img/icones/pasdephoto.png";
                //]]>
                </script>
                <script type="text/javascript" src="<?=$url_base?>modules/saisie/squelettes/defaut/js/defaut.js"></script>
                        
                <!-- CSS -->
                <link href="http://www.tela-botanica.org/commun/jquery/jquery-ui/1.8.18/css/smoothness/jquery-ui-1.8.18.custom.css" rel="stylesheet" type="text/css" media="screen" />
                <link href="http://www.tela-botanica.org/commun/bootstrap/2.0.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" media="screen" />
                <link href="http://www.tela-botanica.org/commun/bootstrap/2.0.2/css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css" media="screen" />
                <link href="<?=$url_base?>modules/saisie/squelettes/defaut/css/<?=isset($_GET['style']) ? $_GET['style'] : 'defaut'?>.css" rel="stylesheet" type="text/css" media="screen" />
        </head>

        <body data-spy="scroll">
                <div class="container">
                        <div class="row-fluid">
                                <div class="span6 page-header">
                                        <div class="row">
                                                <div class="span6">
                                                        <h1><img class="span1" src="<?=$url_base?>/modules/saisie/squelettes/defaut/img/logos/tela_botanica.png" alt="Tela Botanica" /> Outil de saisie simplifiée (CEL)</h1>
                                                </div>
                                        </div>
                                        <div class="row">
                                                <div class="span6">
                                                        <p>
                                                                Ce widget de saisie vous permet de partager simplement vos observations avec le 
                                                                <a href="http://www.tela-botanica.org/site:accueil">réseau Tela Botanica</a>.
                                                                Complétez les champs, créez jusqu'à 10 observations (bouton "créer") puis partagez-les (bouton "transmettre"). 
                                                                Retrouvez ensuite facilement ces observations dans 
                                                                <a href="http://www.tela-botanica.org/appli:cel">votre Carnet en ligne</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>
                                
                                <div class="span6">
                                        <div class="well">
                                                <h2>Observateur</h2>
                                                <form id="form-observateur" action="#" class="" autocomplete="on">
                                                        <div class="row-fluid">
                                                                <div class="span6" rel="tooltip" data-placement="right"
                                                                        title="Saisissez votre courriel avec lequel vous être 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.">
                                                                        <label for="courriel"  
                                                                                title="Veuillez saisir votre adresse courriel.">
                                                                                <strong class="obligatoire">*</strong> Courriel
                                                                        </label>
                                                                        <div class="input-prepend">
                                                                                <span class="add-on">
                                                                                        <i class="icon-envelope"></i>
                                                                                </span><input id="courriel" class="input-medium" name="courriel" type="text"/>
                                                                        </div>
                                                                </div>
                                                                <div id="zone-courriel-confirmation" class="span6 hidden">
                                                                        <label for="courriel_confirmation"  
                                                                                title="Veuillez saisir confirmer votre adresse courriel.">
                                                                                <strong class="obligatoire">*</strong> Courriel (confirmation)
                                                                        </label>
                                                                        <div class="input-prepend">
                                                                                <span class="add-on">
                                                                                        <i class="icon-envelope"></i>
                                                                                </span><input id="courriel_confirmation" class="input-medium" name="courriel_confirmation" type="text"/>
                                                                        </div>
                                                                </div>
                                                        </div>
                                                        <div id="zone-prenom-nom" class="row-fluid hidden">
                                                                <div class="span6">
                                                                        <label for="prenom">Prénom</label>
                                                                        <div>
                                                                                <input id="prenom" name="prenom" class="span3" type="text"/>
                                                                        </div>
                                                                </div>
                                                                <div class="span6">
                                                                        <label for="nom">Nom</label>
                                                                        <div>
                                                                                <input id="nom" name="nom"  class="span3" type="text"/>
                                                                        </div>
                                                                </div>
                                                        </div>
                                                </form>
                                        </div>
                                </div>
                        </div>
                        <!-- Messages d'erreur du formulaire-->
                        <div class="row">
                                <div class="zone-alerte span6 offset3">
                                        <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>
                        </div>
                        <div class="row-fluid">
                                <div class="span12">
                                        <div class="well">
                                                <div class="row-fluid">
                                                        <div class="span6">
                                                                <div>
                                                                        <div class="row-fluid">
                                                                                <div class="span12">
                                                                                        <h2>Lieu du relevé</h2>
                                                                                </div>
                                                                        </div>
                                                                        <div class="row-fluid">
                                                                                <div class="span4">
                                                                                        <label for="map_canvas" title="Veuillez localiser l'observation">
                                                                                                <strong class="obligatoire">*</strong> 
                                                                                                Géolocalisation
                                                                                        </label>
                                                                                </div>
                                                                                <div class="span8 droite">
                                                                                        <form id="form-carte-recherche" class="form-search form-horizontal" action="#" >
                                                                                                <div class="control-group">
                                                                                                        <label for="carte-recherche">Rechercher</label>
                                                                                                        <input id="carte-recherche" class="search-query" type="text" value=""
                                                                                                                rel="tooltip"
                                                                                                                title="Permet de centrer la carte sur le lieu recherché."
                                                                                                                placeholder="Centrer la carte sur un lieu..."/>
                                                                                                </div>
                                                                                        </form>
                                                                                </div>
                                                                        </div>
                                                                        <div class="row-fluid">
                                                                                <div class="span12">
                                                                                        <div id="map-canvas" rel="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>
                                                                        <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" 
                                                                                                rel="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" 
                                                                                                rel="tooltip" 
                                                                                                title="Code INSEE de la commune"></span>)
                                                                                </span>
                                                                        </div>
                                                                        </div>
                                                                        <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">Latitude</label>
                                                                                                        <div>
                                                                                                                <input id="latitude" class="input-mini" name="latitude" type="text" value=""/>
                                                                                                        </div>
                                                                                                </div>
                                                                                                <div id="coord-lng" class="span4">
                                                                                                        <label for="longitude">Longitude</label>
                                                                                                        <div>
                                                                                                                <input id="longitude" class="input-mini" name="longitude" type="text" value=""/>
                                                                                                        </div>
                                                                                                </div>
                                                                                                <div class="span1">
                                                                                                        <div>
                                                                                                                <input id="geolocaliser" type="button" value="Voir sur la carte" 
                                                                                                                        rel="tooltip"
                                                                                                                        title="Centre la carte sur les coordonnées de latitude et longitude saisies."/>
                                                                                                        </div>
                                                                                                </div>
                                                                                </div>
                                                                                </div>
                                                                                <div class="row-fluid">
                                                                                        <div class="span4" rel="tooltip" 
                                                                                                title="Le lieu-dit est la dénomination administrative du lieu 
                                                                                                        que l’on peut trouver sur une carte au 1/25 000, sur le 
                                                                                                        cadastre ou au dire des habitants locaux." >
                                                                                                <label for="lieudit">Lieu-dit</label>
                                                                                                <div>
                                                                                                        <input type="text" id="lieudit" class="span2" name="lieudit"/>
                                                                                                </div>
                                                                                        </div>
                                                                                        <div class="span4" rel="tooltip" 
                                                                                                title="La station est la dénomination qui caractérise le lieu 
                                                                                                        de la collecte d’un point de vue écologique. Il est 
                                                                                                        recommandéde choisir une station qui soit homogène dans 
                                                                                                        sa compositionfloristique afin de refléter le plus 
                                                                                                        fidèlement possible son identité sous l’angle 
                                                                                                        phytosociologique. Exemple : zone humide située au centre 
                                                                                                        du près. " >
                                                                                                <label for="station">Station</label>
                                                                                                <div>
                                                                                                        <input type="text" id="station" class="span2" name="station"/>
                                                                                                </div>
                                                                                        </div>
                                                                                        <div class="span4" rel="tooltip" 
                                                                                                title="Le milieu est un terme générique caractérisant la 
                                                                                                        station. On peut se référer pour cela à des codes comme 
                                                                                                        Corine Biotope ou le nom d’une unité phytosociologique. 
                                                                                                        Exemple : prairie humide">
                                                                                                <label for="milieux">Milieu</label>
                                                                                                <div>
                                                                                                        <input type="text" id="milieu" class="span2" name="milieu" />
                                                                                                </div>
                                                                                        </div>
                                                                                </div>
                                                                        </form>
                                                                </div>
                                                        </div>
                                                        <div class="span6">
                                                                <form id="form-obs" action="#" autocomplete="on">
                                                                        <h2>Observations</h2> 
                                                                        <div class="row-fluid">
                                                                                <div class="span4" rel="tooltip" 
                                                                                        title="Vous pouvez cliquer sur l'icône de calendrier pour 
                                                                                                sélectionner un date dans un calendrier.">
                                                                                        <label for="date" title="Veuillez indiquer la date du relevé au format jj/mm/aaaa">
                                                                                                <strong class="obligatoire">*</strong> Date du relevé
                                                                                        </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 id="taxon-input-groupe" class="span8" rel="tooltip" 
                                                                                        title="Sélectionnez une espèce dans la liste déroulante pour lier 
                                                                                                votre nom au référentiel <?=$ns_referentiel?>. Si vous recharger 
                                                                                                la page le nom présent dans le champ ne sera plus lié au référentiel, il sera 
                                                                                                nécessaire de le sélectionner à nouveau dans la liste. Si vous
                                                                                                le désirez vous pouvez aussi saisir un nom abscent du référentiel 
                                                                                                (Ex. : Rosa sp.)." >
                                                                                        <label for="taxon" title="Choisissez une espèce">
                                                                                                <strong class="obligatoire">*</strong> 
                                                                                                Espèce
                                                                                        </label>
                                                                                        <div class="input-prepend">
                                                                                                <span class="add-on">
                                                                                                        <i class="icon-leaf"></i>
                                                                                                </span><input type="text" id="taxon" name="taxon" />
                                                                                        </div>
                                                                                </div>
                                                                        </div>
                                                                        <div class="row-fluid">
                                                                                <div class="span12">
                                                                                        <label for="notes">Commentaires</label>
                                                                                        <div>
                                                                                                <textarea id="notes" class="span6" rows="7" 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_base?>saisie?projet=sauvages&amp;service=upload-image" 
                                                                        method="post" enctype="multipart/form-data">
                                                                        <div rel="tooltip" 
                                                                                title="Ajouter une photo de votre observation. Elle doit être au 
                                                                                        format JPEG et ne doit pas excéder 5Mo.">
                                                                                <label>Photo</label>
                                                                                <input type="file" id="fichier" name="fichier" accept="image/jpeg" />
                                                                                <input type="hidden" name="MAX_FILE_SIZE" value="5242880"/>
                                                                                <p id="miniature-info" class="discretion help-inline">La photo doit être au format JPEG et ne doit pas excéder 5Mo.</p>
                                                                                <div id="miniature"></div>
                                                                                <button id="effacer-miniature" type="button" style="display:none;">Effacer</button>
                                                                                <p id="miniature-msg" class="span12">&nbsp;</p>
                                                                        </div>
                                                                </form>
                                                        </div>
                                                        <div class="row-fluid">
                                                                <div class="span12 centre" rel="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>
                                                </div>
                                        </div>
                                </div>  
                        </div>
                        <!-- Messages d'erreur du formulaire-->
                        <div class="row">
                                <div class="zone-alerte span6 offset3">
                                        <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 observations.<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 span6 offset3">
                                        <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>
                        <!-- 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" 
                                                                        type="button" disabled="disabled" rel="tooltip"
                                                                        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 2012</p>
                        </footer>
                
                        <!-- Fenêtres modales -->
                        <div id="chargement" class="modal-fenetre" style="display:none;">                       
                                <div id="chargement-centrage" class="modal-contenu">
                                        <img id="chargement-img" 
                                                src="<?=$url_base?>modules/saisie/squelettes/sauvages/images/chargement_arbre.gif" 
                                                alt="Transfert en cours..."/>
                                        <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'observation à 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/page:cel_galerie">galerie d'images</a>, 
                                        <a href="http://www.tela-botanica.org/widget:cel:carto">cartographie (widget)</a>...)<br />
                                        Si vous souhaitez les modifier ou les supprimer, vous pouvez les retrouvez 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 de vos observations.<br />
                                        Vous pouvez signaler le dysfonctionnement à 
                                        <a class="courriel-erreur" href="mailto:">cel@tela-botanica.org</a>.
                                </p>
                        </div>
                        
                        <!-- Stats : Google Analytics-->
                        <script type="text/javascript">
                                //<![CDATA[
                                var _gaq = _gaq || [];
                                _gaq.push(['_setAccount', 'UA-20092557-1']);
                                _gaq.push(['_trackPageview']);
                                
                                (function() {
                                  var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
                                  ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
                                  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
                                })();
                                //]]>
                        </script>
                </div>
        </body>
</html>