Subversion Repositories eFlore/Applications.cel

Rev

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

<?php echo "<noscript>Activer javascript et recharger la page</noscript>";?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title><?php echo $mode;?> de widget de saisie 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="robots" content="noindex, nofollow, noarchive, nosnippet, noodp">
    <meta name="author" content="Tela Botanica" />
    <meta name="keywords" content="Tela Botanica, CEL" />
    <meta name="description" content="Gestion des widgets de saisie du carnet en ligne" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

    <!-- Favicones -->
    <link rel="shortcut icon" type="image/x-icon" href="https://resources.tela-botanica.org/tb/img/16x16/favicon.ico" />
    <!-- Jquery-ui custom css-->
    <link href="https://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">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous" />
    <!-- <link rel="stylesheet" type="text/css" href="https://resources.tela-botanica.org/bootstrap/3.1.0/css/bootstrap.min.css" /> -->
    <!-- Fontawesome -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ" crossorigin="anonymous" />
    <!-- Carto -->
    <link href="<?php echo $url_base; ?>modules/manager/squelettes/js/tb-geoloc/styles.css" rel="stylesheet" type="text/css" media="screen" />
    <!-- STYLE MANAGER CREATION -->
    <link rel="stylesheet" type="text/css" href="<?php echo $url_base;?>modules/manager/squelettes/css/manager.css" media="screen" />

    <!--  Google Analytics -->
    <?php if ( $prod ) : ?>
      <?php include "analytics.html";?>
    <?php endif;?>
    <!-- <link rel="icon" type="image/x-icon" href="favicon.ico" /> -->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
  </head>

  <body>
    <div id="zone-appli" class="container">
      <h1 id="widget-titre" class="widget-titre"><?php echo ucfirst( $mode );?> de widget de saisie du CEL</h1>
      <div id="register-page">
        <div id="group-settings-form">

          <div id="left-block" class="widget-blocks">

            <p class="message">
              <?php if ( $mode === 'modification' ) : ?>
                Attention vous modifiez un widget déjà existant, le tag et la langue ne peuvent pas être changés.
                S'il s'agit d'un projet type, en modifiant ce widget vous modifiez tous les widgets de ce type.
              <?php else : ?>
                Vous créez un widget, si vous choississez de le mettre dans un type, certains champs deviendront
                obligatoires et la localisation (point ou rue) sera automatiquement déterminée.
              <?php endif;?>
            </p>

            <form action="<?php echo $url_base;?>manager?mode=<?php echo $mode.$params;?>" id="basic-widget-form" method="post" enctype="multipart/form-data">

              <div class="register-section row" id="basic-details-section">
                <h2>Meta-données</h2>

                <input type="text" name="email" id="email" placeholder="Your email" title="laisser ce champ vide" autocomplete="off" tabindex="-1" />

                <div class="col-sm-12 mb-3">
                  <label for="projet">Projet&nbsp;*</label>
                  <input type="text" name="projet" id="projet" class="form-control" pattern="^[a-z][a-z0-9-]{2,24}" <?php echo ( $mode === 'modification' ) ? 'value="' . $widget['projet'] . '" readonly' : 'required';?> title="Champ obligatoire : Pas d'espaces, de majuscules, de caractères spéciaux, ou d'accents. Caractères acceptés : 1er une lettre de a à z, ensuite : lettres, chiffres, tirets &quot; - &quot;.">
                </div>

                <div class="col-sm-12 mb-3">
                  <label for="motscles">Autres mots-clés</label>
                  <input type="text" name="motscles" id="motscles" class="form-control" <?php echo ( $mode === 'modification' ) ? 'value="' . $widget['motscles'] . '"' : "";?> />
                </div>

                <div class="col-sm-12 mb-3">
                  <label for="type">Type de widget</label>
                  <select  id="type" name="type" class="form-control custom-select">
                    <option value=""> ----</option>
                    <?php foreach ( $type as $id => $projet ) : ?>
                      <option <?php echo ( isset( $widget['projet'] ) && $projet['projet'] === $widget['projet'] ) ? 'selected="selected"' : '';?> value="<?php echo $projet['projet'];?>"><?php echo $projet['projet'];?></option>
                    <?php endforeach;?>
                  </select>
                </div>


                  <div class="col-sm-12 radio mb-3">
                    <label for="est_type" class="radio-label">
                      <input type="checkbox" name="est_type" id="est_type" <?php echo ( isset( $widget['est_type'] ) && $projet['est_type'] === '1' ) ? 'checked="checked"' : '';?>>
                      Ce widget est un widget type
                    </label>
                  </div>

                <div class="col-sm-12 mb-3">
                  <label for="langue">Langue</label>
                  <?php if ( $mode === 'modification' ) : ?>
                    <input id="langue" name="langue" class="form-control" readonly value="<?php echo $widget['langue'];?>">
                  <?php else : ?>
                    <select id="langue" name="langue" class="form-control custom-select">
                    <?php foreach ( $langues as $code => $langue ) : ?>
                      <option value="<?php echo $code;?>" <?php echo ( $code === 'fr' ) ? 'selected' : '';?>><?php echo $langue['nom'];?></option>
                    <?php endforeach;?>
                    </select>
                  <?php endif;?>
                </div>
              </div><!-- end #basic-details-section -->


              <div class="register-section row" id="profile-details-description-section">
                <h2>Description</h2>
                <div class="col-sm-12 mb-3">
                  <label for="titre">Titre</label>
                  <input type="text" name="titre" id="titre" class="form-control" value="<?php echo isset( $widget['titre'] ) ? htmlspecialchars( $widget['titre']) : '';?>">
                </div>

                <div class="input-file-row row">
                  <div class="input-file-container col-sm-10">

                    <?php
                      if( isset( $widget['info'] ) ) :
                        $info_file_name = 'info.' . preg_replace( '/(?:imag)?e\/?/','',$widget['info']);
                        $info_src       = $chemin_images . $widget['projet'] . '/' . $info_file_name;
                        $info_img       =
                          '<img id="pre-existent-info" src="' . $info_src . '" width="50%"><br>Pour changer, télécharger un nouveau fichier.';
                        $info_hidden    = '';
                      else :
                        $info_file_name = [];
                        $info_src       = '';
                        $info_img       = '';
                        $info_hidden    = ' hidden';
                      endif;
                    ?>

                    <input type="file" class="input-file" name="info" id="info" accept="image/*">
                    <label for="info" class="label-file "><i class="fas fa-download"></i> Aide dans le titre</label>
                  </div>
                  <div class="btn btn-danger btn-sm remove-file" name="remove-file" title="Supprimer le fichier"><i class="fas fa-times" aria-hidden="true"></i></div>
                  <div class="file-return info <?php echo $info_hidden;?>">
                    <?php echo $info_file_name;?>
                    <?php echo $info_img;?>
                  </div>
                </div>

                <div class="col-sm-12 mb-3">
                  <label for="description">Description</label>
                  <textarea name="description" id="description" class="form-control"><?php echo isset( $widget['description'] ) ? htmlspecialchars( $widget['description'] ) : '';?></textarea>
                </div>

                <div class="input-file-row row">
                  <div class="input-file-container col-sm-10">

                    <?php
                      if( isset( $widget['logo'] ) ) :
                        $logo_file_name = 'logo.' . preg_replace( '/(?:imag)?e\/?/','',$widget['logo']);
                        $logo_src       = $chemin_images . $widget['projet'] . '/' . $logo_file_name;
                        $logo_img       =
                          '<img id="pre-existent-logo" src="' . $logo_src . '" width="50%"><br>Pour changer, télécharger un nouveau fichier.';
                        $logo_hidden    = '';
                      else :
                        $logo_file_name = [];
                        $logo_src       = '';
                        $logo_img       = '';
                        $logo_hidden    = ' hidden';
                      endif;
                    ?>

                    <input type="file" class="input-file" name="logo" id="logo"  accept="image/*" value="">
                    <label for="logo" class="label-file"><i class="fas fa-download"></i> Logo</label>
                  </div>
                  <div class="btn btn-danger btn-sm remove-file" name="remove-file" title="Supprimer le fichier">
                    <i class="fas fa-times" aria-hidden="true"></i>
                  </div>
                  <div class="file-return logo<?php echo $logo_hidden;?>">
                    <?php echo $logo_file_name;?>
                    <?php echo $logo_img;?>
                  </div>
                </div>

                <div class="input-file-row row">
                  <div class="input-file-container col-sm-10">

                    <?php
                      if( isset( $widget['image_fond'] ) ) :
                        $image_fond_file_name = 'image_fond.' . preg_replace( '/(?:imag)?e\/?/','',$widget['image_fond']);
                        $image_fond_src       = $chemin_images . $widget['projet'] . '/' . $image_fond_file_name;
                        $image_fond_img       =
                          '<img id="pre-existent-image_fond" src="' . $image_fond_src . '" width="50%"><br>Pour changer, télécharger un nouveau fichier.';
                        $image_fond_hidden    = '';
                      else :
                        $image_fond_file_name = [];
                        $image_fond_src       = '';
                        $image_fond_img       = '';
                        $image_fond_hidden    = ' hidden';
                      endif;
                    ?>

                    <input type="file" class="input-file" name="image_fond" id="image_fond" accept="image/*">
                    <label for="image_fond" class="label-file"><i class="fas fa-download"></i> Image de fond</label>
                  </div>
                  <div class="btn btn-danger btn-sm remove-file" name="remove-file" title="Supprimer le fichier"><i class="fas fa-times" aria-hidden="true"></i></div>
                  <div class="file-return image_fond <?php echo $image_fond_hidden;?>">
                    <?php echo $image_fond_file_name;?>
                    <?php echo $image_fond_img;?>
                  </div>
                </div>

              </div><!-- end #profile-details-description-section -->

              <div class="register-section row" id="profile-details-fields-section">
                <h2>Champs</h2>

                <div class="col-sm-12 mb-3">
                  <label for="type_localisation">Type de localisation</label>
                  <select  id="type_localisation" name="type_localisation" class="form-control custom-select">
                    <option value="<?php echo ( isset( $widget['type_localisation'] ) ) ? $widget['type_localisation'] : 'point';?>"><?php echo ( isset( $widget['type_localisation'] ) ) ? $widget['type_localisation'] : 'point';?></option>
                    <option value="<?php echo ( isset( $widget['type_localisation'] ) && $widget['type_localisation'] === 'rue' ) ? 'point' : 'rue';?>"><?php echo ( isset( $widget['type_localisation'] ) && $widget['type_localisation'] === 'rue') ? 'point' : 'rue';?></option>
                  </select>
                </div>

                <div class="col-sm-12 mb-3">
                  <label for="milieux">Milieux</label>
                  <p class="message">
                    Liste de milieux séparés par un ";".
                    <br>
                    <i class="fas fa-pen"></i>&nbsp;Pour ajouter une option "autre" ajoutez le mot "autre" dans votre liste de milieux.
                    <br>
                    <i class="fas fa-check-double"></i>&nbsp;Pour autoriser la sélection de plusieurs milieux ajouter "multimilieux" dans votre liste de milieux (sans fautes&nbsp;!&nbsp;<i class="far fa-smile-beam"></i>&nbsp;).
                    <br>
                    <i class="fa fa-exclamation-triangle" aria-hidden="true" style="color:#ff5d55"></i>&nbsp;Les options apparaitront dans l'ordre de saisie de cette liste.
                  </p>
                  <input type="text" name="milieux" id="milieux" class="form-control" value="<?php echo isset( $widget['milieux'] ) ? $widget['milieux'] : '';?>">
                </div>

                <div class="col-sm-12 mb-3">
                  <label for="type_especes">Type liste espèce&nbsp;*</label>
                  <?php
                    $types_espece = [
                      'referentiel' => 'Référentiel',
                      'liste' => 'Liste',
                      'liste+autre' => 'Liste + autres',
                      'fixe' => 'Espèce fixée',
                    ];
                  ?>
                  <select  id="type_especes" name="type_especes" required class="form-control custom-select">
                    <?php foreach( $types_espece as $type_espece => $affichage_type_espece ): ?>
                      <option <?php echo (!isset($widget['type_especes']) && 'referentiel' === $type_espece) || $type_espece === $widget['type_especes']? 'selected="selected" ' : '';?>value="<?php echo $type_espece;?>"><?php echo $affichage_type_espece;?></option>
                    <?php endforeach;?>
                  </select>
                </div>

                <div class="col-sm-12 mb-3">
                  <label for="referentiel">Référentiel&nbsp;*</label>
                  <p class="message">
                    Pour une espèce fixée renseigner le num_nom après le référentiel, séparés de ":" suivant le schéma&nbsp;:
                    <br>
                    <code>référentiel:num_nom</code>
                    <br>
                    ex&nbsp;: <code>bdtfx:182</code>
                  </p>
                  <input type="text" name="referentiel" id="referentiel" class="form-control" required pattern="^[a-z]+(:[0-9]+)?$" title="Nom du référentiel ex. bdtfx" value="<?php echo isset( $widget['referentiel'] ) ? $widget['referentiel'] : '';?>">
                </div>

                <!-- Bouton fichier-type à compléter -->
                <div class="input-file-row row">
                  <div class="input-file-container col-sm-10">
                    <input type="file" class="input-file" name="especes" id="especes">
                    <label for="especes"class="label-file"><i class="fas fa-download"></i> Espèces</label>
                    <p class="message mt-2">
                      <i class="fa fa-exclamation-triangle" aria-hidden="true" style="color:#ff5d55"></i>
                      &nbsp;Format&nbsp;: CSV ou TSV UTF-8.
                      <br>
                      Séparateur&nbsp;: Tabulation.
                    </p>
                  </div>
                  <div class="btn btn-danger btn-sm remove-file" name="remove-file" title="Supprimer le fichier"><i class="fas fa-times" aria-hidden="true"></i></div>
                  <div class="file-return especes hidden"></div>
                </div>
                <div class="col-sm-12 mb-3">
                  <a href="<?php echo $url_base;?>modules/manager/squelettes/img/fichier_type/especes.csv" class="button fichier-type" download><i class="fas fa-file-alt" aria-hidden="true"></i> Fichier type</a>
                </div>
              </div><!-- end #profile-details-fields-section -->

              <!--localisation-->
              <input type="hidden" name="localisation" id="localisation" value="<?php echo isset($widget['localisation']) ? htmlspecialchars($widget['localisation']) : '';?>">
              <!--Submit-->
              <div class="submit complete-registration" id="submit-button">
                <button href="#" type="submit" name="signup_submit" id="signup_submit" class="button" target="" title="Soumettre le nouveau widget" disabled="disabled"><i class="fas fa-trophy" aria-hidden="true"></i>&nbsp;Terminer</button>
              </div>
              <!--Submit-->

            </form><!-- end #new-widget-form -->

            <form id="form-geolocalisation" autocomplete="off">
              <div class="row mb-3">
                <label for="geolocalisation" class="obligatoire has-tooltip col-sm-12" data-toggle="tooltip" title="">
                  Geolocalisation&nbsp: Déterminer un point gps (facultatif)
                </label>
              </div>
              <div id="geoloc" class="geoloc">
                <tb-geolocation-element
                  id="tb-geolocation"
                  layer='osm'
                  zoom_init="4"
                  lat_init="46.5"
                  lng_init="2.9"
                  marker="true"
                  polyline="false"
                  polygon="false"
                  show_lat_lng_elevation_inputs="true"
                  osm_class_filter=""
                  geometry_filter="point"
                  elevation_provider="mapquest"
                  map_quest_api_key="mG6oU5clZHRHrOSnAV0QboFI7ahnGg34"
                  height="400px"
                >
                </tb-geolocation-element>
              </div>
              <div class="control-group mt-3 mb-3">
                <div class="row">
                  <div id="geoloc-datas" class="col-sm-12 row">
                    <div class="col-sm-6 mb-3">
                      <label for="latitude">Latitude</label>
                      <input type="text" class="form-control latitude" id="latitude" name="latitude" pattern="-?(8[0-5]|[1-7]?[0-9])(,|.)[0-9]{5}" title="Nombre décimal de 6 à 8 chiffres au total, dont exactement 5 chiffres après la virgule" placeholder="+/- 0.00000 à 90.00000" value="">
                    </div>
                    <div class="col-sm-6 mb-3">
                      <label for="longitude">Longitude</label>
                      <input type="text" class="form-control longitude" id="longitude" name="longitude" pattern="-?(1(80|[0-7][0-9])|([1-9]?[0-9]))(,|.)[0-9]{5}" title="Nombre décimal de 6 à 8 chiffres au total, dont exactement 5 chiffres après la virgule" placeholder="+/- 0.00000 à 180.00000" value="">
                    </div>
                    <div class="col-sm-12 mb-3">
                      <label for="zoom">Zoom (indépendant des coordonnées)</label>
                      <p class="message">
                        Quelques exemples de précision zoom&nbsp;:<br>
                        Europe&nbsp;:&nbsp;4, France&nbsp;:&nbsp;5, région&nbsp;:&nbsp;7, département&nbsp;:&nbsp;9, ville&nbsp;:&nbsp;12, lieu-dit/quartier&nbsp;:&nbsp;15, rue&nbsp;:&nbsp;18 (=&nbsp;max).
                      </p>
                      <input type="text" name="zoom" id="zoom" class="form-control" pattern="(0?[1-9]|(1[0-8]))" title="Nombre de 1 à 18" placeholder="1 à 18" value=""  />
                    </div>
                    <div class="col-sm-12 mb-3">
                                <label for="fond_carte">Fond de carte</label>
                                <select  id="fond_carte" name="fond_carte" class="form-control custom-select">
                        <?php
                          $affichage_fonds_carte = [
                            'osm' => 'OSM (carte par défaut)',
                            'googleHybrid' => 'Photos aériennes',
                          ];
                          $fond_carte = isset($widget['fond_carte']) && isset($affichage_fonds_carte[$widget['fond_carte']]) ? $widget['fond_carte'] : 'osm';
                        ?>
                        <?php foreach($affichage_fonds_carte  as $nom_base => $nom_affiche) :?>
                          <option value="<?php echo $nom_base;?>"<?php echo $nom_base === $fond_carte ? ' selected="selected"' : '';?>><?php echo $nom_affiche;?></option>
                                <?php endforeach;?>

                                </select>
                        </div>
                         <div class="col-sm-12 mb-3">
                                <label for="adresse">Adresse obligatoire</label>
                                <select  id="adresse" name="adresse" class="form-control custom-select">
                                <option value="0" <?php echo ( isset( $widget['adresse'] ) && $widget['adresse'] === '0' ) ? 'selected' : '';?>>Non</option>
                                <option value="1" <?php echo ( isset( $widget['adresse'] ) && $widget['adresse'] === '1' ) ? 'selected' : '';?>>Oui</option>
                                </select>
                        </div>
                        <div class="col-sm-12 mb-3">
                                <label for="photo_obligatoire">Photo obligatoire</label>
                                <select  id="photo_obligatoire" name="photo_obligatoire" class="form-control custom-select">
                                <option value="0" <?php echo ( isset( $widget['photo_obligatoire'] ) && $widget['photo_obligatoire'] === '0' ) ? 'selected' : '';?>>Non</option>
                                <option value="1" <?php echo ( isset( $widget['photo_obligatoire'] ) && $widget['photo_obligatoire'] === '1' ) ? 'selected' : '';?>>Oui</option>
                                </select>
                        </div>
                  </div>
                </div>
              </div>
            </form><!-- end #form-geolocalisation -->

            <form id="new-fields" autocomplete="off">
              <h2>Ajouter des champs</h2>
              <p class="message">
                <i class="fa fa-exclamation-triangle" aria-hidden="true" style="color:#ff5d55"></i>
                &nbsp;Attention&nbsp;:
                <br>
                <i class="fa fa-bolt" aria-hidden="true"  style="color:#B3C954"></i>
                &nbsp;Le bouton "Valider" sert à valider les champs supplémentaires uniquement
                <br>
                <i class="fas fa-trophy" aria-hidden="true"  style="color:#B3C954"></i>
                &nbsp;Le bouton "Terminer" sert à envoyer la totalité du nouveau widget
              </p>
            </form><!-- #new-fields = fomulaire oû viennent s'insérer les champs supplémentaires -->

            <div id="new-fields-buttons" class="row">
              <div class="col-md-4 col-sm-4 col-xs-4 buttons">
                <label class="add-fields">Ajouter</label>
                <div class="button" id="add-fields" title="Ajouter un champ"><i class="fa fa-plus" aria-hidden="true"></i></div>
              </div>
              <div class="col-md-4 col-sm-4 col-xs-4 buttons">
                <label for="preview-field">Prévisualiser</label>
                <div class="button" id="preview-field" name="preview-field" title="prévisualiser"><i class="fa fa-magic" aria-hidden="true"></i></div>
              </div>
              <div class="col-md-4 col-sm-4 col-xs-4 buttons">
                <label class="validate-new-fields">Valider</label>
                <div class="button" id="validate-new-fields" title="Valider les champs supplémentaires"><i class="fa fa-bolt" aria-hidden="true"></i></div>
              </div>
            </div>

          </div><!-- end .widget-blocks = tout le bloc de gauche-->

          <div id="right-block" class="widget-blocks">
            <div class="widget-renderer">
              <div id="preview-background"></div>

              <div id="preview-header" class="row">
                  <div id="preview-logo" class="col-md-4"></div>
                  <div id="preview-title" class="col-md-8">
                    <h1></h1>
                    <p class="message"><i class="fas fa-info-circle" style="color:#009fb8"></i> Les liens et autres balises html fonctionneront dans le widget</p>
                  </div>
              </div>

              <div id="preview-messages" class="row">

                <div id="preview-description" class="col-md-6">
                  <div class="">
                    <p class="preview-description"></p>
                  </div>

                </div><!-- end #preview-description -->

                <div id="preview-aide" class="col-md-6">
                  <div class="">
                    <h3>Aide</h3>
                    <p>
                      Cet outil vous permet de partager simplement vos observations avec
                      le <a target="_blank" href="https://www.tela-botanica.org/site:accueil">réseau Tela Botanica</a>
                      (<a target="_blank" href="https://www.tela-botanica.org/page:licence">licence CC-BY-SA</a>).
                      Identifiez-vous bien pour ensuite retrouver et gérer vos données dans votre
                      <a target="_blank" href="https://www.tela-botanica.org/appli:cel"> 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 target="_blank" href="https://www.tela-botanica.org/site:botanique">cartes et galeries photos </a> du site.
                    </p>
                    <p class="discretion">
                      Pour toute question ou remarque,
                      <a href="https://www.tela-botanica.org/widget:reseau:remarques?service=cel&pageSource=<?php echo $url_base;?>manager?mode=<?php echo $mode . $params;?>" 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>
                  </div>
                </div>
              </div><!-- end #preview-aide -->

              <div id="preview-formulaire" class="row">

                <form id="preview-form-observateur" role="form" autocomplete="on">

                  <h2>Observateur</h2>

                  <div class="row">
                    <div id="bouton-connexion" class="col-md-6 col-sm-8">
                      <label for="bouton-connexion">Je me connecte à mon compte&nbsp;:</label>
                      <div class="btn btn-success mr-1 mb-1">Connexion</div>
                      <div class="btn btn-success mr-1 mb-1">Inscription</div>
                    </div>
                    <div id="creation-compte" class="col-md-6 col-sm-8">
                      <label for="creation-compte">Je ne souhaite pas m'inscrire&nbsp;:</label>
                      <div class="btn btn-info mr-1 mb-1">Observation sans inscription</div>
                    </div>

                  </div>

                </form>

                <form id="form-observation" role="form" autocomplete="on">

                  <h2>Observation</h2>

                  <div id="zone-observation" class="row">

                    <div class="col-md-6 row">
                      <div class="col-md-12">
                        <label for="geolocalisation-previs" id="label-geolocalisation" title="Veuillez saisir votre adresse courriel.">
                          <i class="fa fa-envelope"></i>&nbsp;Geolocalisation
                        </label>
                        <div id="geolocalisation-previs">
                          <img src="<?php echo $url_base;?>modules/manager/squelettes/img/geoloc/geoloc.png" alt="geolocalisation" width="90%">
                        </div>
                      </div>

                      <div class="col-md-12">
                        <label for="milieu" id="label-milieu">
                          <i class="fa fa-street-view"></i>&nbsp;Milieu
                        </label>
                        <input type="text" id="milieu" name="milieu" class="form-control" placeholder="bois, champ, falaise, ...">
                      </div>
                    </div>

                    <div class="col-md-6 row">
                      <div class="col-md-12">
                        <label for="date" id="label-date" title="">
                          <i class="fa fa-calendar"></i>&nbsp;Date de relevé
                        </label>
                        <div class="date">
                          <input type="date" id="date" class="form-control" name="date" title="jj/mm/aaaa" required>
                        </div>
                      </div>

                      <div class="col-md-12">
                        <label for="taxon" id="label-taxon" title="">
                          <i class="fa fa-leaf"></i>&nbsp;Espèce<span></span>
                        </label>
                        <div class="taxon">
                          <input type="text" name="taxon" id="taxon" class="form-control">
                        </div>
                      </div>

                      <div class="col-md-12">
                        <label for="certitude" id="label-certitude" title="">
                          <i class="fa fa-question"></i>&nbsp;Certitude
                        </label>
                        <select id="certitude" name="certitude" class="form-control custom-select" required>
                          <option value="" >À déterminer</option>
                          <option value="" >Douteuse</option>
                          <option value="" selected="selected" >Certaine</option>
                        </select>
                      </div>

                      <div class="col-md-12">
                        <label for="notes" id="label-notes" title="">
                          <i class="fa fa-pen" aria-hidden="true"></i>&nbsp;Notes
                        </label>
                        <div class="notes">
                            <textarea id="notes" name="notes" class="form-control" placeholder="Vous pouvez éventuellement ajouter des informations complémentaires à votre observation."></textarea>
                        </div>
                      </div>
                    </div>

                  </div>

                </form>

                <!-- formulaire d'affichage des bouveaux champs -->
                <form id="form-supp" role="form" autocomplete="on">
                  <div id="zone-supp" class="row align-items-center">
                    <div class="col-md-6 preview-container row"></div>
                  </div>
                </form>

                <!-- formulaire d'upload d'images -->
                <form id="form-upload" class="" action="" method="" enctype="multipart/form-data">
                  <h2>Image(s) de cette plante</h2>
                  <p class="miniature-info" class="discretion help-inline">
                    Les photos doivent être au format JPEG et ne doivent pas excéder 5Mo chacunes.
                  </p>
                  <div>
                      <div class="btn btn-large btn-info mb-3">
                        <span class=""><i class="fas fa-download"></i>&nbsp;Ajouter une image</span>
                      </div>
                  </div>
                </form>

              </div><!-- end #preview-formulaire -->

            </div><!-- end #widget-renderer-->

          </div><!-- #widget-blocks = tout le bloc de droite-->

        </div>
      </div>
    </div>
    <div id="help-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="help-modal-label" style="display: none;" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="help-modal-label"></h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body" id="print_content"></div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Fermer</button>
          </div>
        </div>
      </div>
    </div>
    <!-- carto -->
    <script type="text/javascript" src="<?php echo $url_base; ?>modules/manager/squelettes/js/tb-geoloc/tb-geoloc-lib-app.js"></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.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 src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    <script type="text/javascript" src="<?php echo $url_base;?>modules/manager/squelettes/js/manager.js"></script>
      <!-- Barre de navigation -->
    <?php if ( $bar !== false ) : ?>
      <script src="<?php echo $url_script_navigation;?>"></script>
    <?php endif;?>
  </body>
</html>