Subversion Repositories eFlore/Applications.cel

Rev

Rev 2709 | Details | Compare with Previous | Last modification | View Log | RSS feed

Rev Author Line No. Line
1526 jpm 1 
<!DOCTYPE html>
2 
<html lang="fr">
3 
	<head>
1537 jpm 4 
		<title>Florilèges</title>
1526 jpm 5 
		<meta charset="utf-8">
2408 jpm 6 
 
1526 jpm 7 
		<meta name="author" content="Jean-Pascal MILCENT, Aurélien PERONNET" />
8 
		<meta name="keywords" content="Florilege, Tela Botanica, CEL" />
9 
		<meta name="description" content="Widget de saisie du projet Florilege" />
10 
 
11 
		<!-- Viewport Mobile -->
12 
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
2408 jpm 13 
 
1526 jpm 14 
		<!-- Favicones -->
1537 jpm 15 
		<link rel="shortcut icon" type="image/x-icon" href="<?=$url_base?>/modules/saisie/squelettes/florileges/img/favicon.ico" />
2408 jpm 16 
 
1526 jpm 17 
		<!-- Javascript : bibliothèques -->
18 
		<!-- Google Map v3 -->
19 
		<!--<script type="text/javascript" src="https://getfirebug.com/firebug-lite.js"></script>-->
2408 jpm 20 
		<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&amp;language=fr&amp;region=FR"></script>
1526 jpm 21 
		<!-- Jquery -->
2707 mathias 22 
		<script type="text/javascript" src="http://resources.tela-botanica.org/jquery/1.11.1/jquery-1.11.1.min.js"></script>
1526 jpm 23 
		<!-- Jquery UI : nécessaire pour le minicalendrier et l'auto-complétion -->
2707 mathias 24 
		<script type="text/javascript" src="http://resources.tela-botanica.org/jquery/jquery-ui/1.11.0/js/jquery-ui.min.js"></script>
25 
		<script type="text/javascript" src="http://resources.tela-botanica.org/jquery/jquery-ui/1.11.0/js/datepicker-fr.js"></script>
1526 jpm 26 
		<!-- Jquery Plugins -->
27 
		<!-- Jquery Validate : nécessaire pour la validation des formulaires -->
2707 mathias 28 
		<script type="text/javascript" src="http://resources.tela-botanica.org/jquery/validate/1.11.1/jquery.validate.min.js"></script>
29 
		<script type="text/javascript" src="http://resources.tela-botanica.org/jquery/validate/1.11.1/additional-methods.min.js"></script>
30 
		<script type="text/javascript" src="http://resources.tela-botanica.org/jquery/validate/1.11.1/messages_fr.js"></script>
1526 jpm 31 
		<!-- Jquery Form :nécessaire pour l'upload des images -->
2707 mathias 32 
		<script type="text/javascript" src="http://resources.tela-botanica.org/jquery/form/3.51/jquery.form.min.js"></script>
2408 jpm 33 
 
1526 jpm 34 
		<!-- Bootstrap -->
2707 mathias 35 
		<script type="text/javascript" src="http://resources.tela-botanica.org/bootstrap/2.3.2/js/bootstrap.min.js"></script>
2408 jpm 36 
 
1526 jpm 37 
		<!-- Javascript : appli saisie -->
2707 mathias 38 
		<script type="text/javascript" src="<?=$url_base?>modules/saisie/squelettes/defaut/js/WidgetSaisie.js"></script>
2708 mathias 39 
		<script type="text/javascript" src="<?=$url_base?>modules/saisie/squelettes/sauvages/js/WidgetSaisieSauvages.js"></script>
2707 mathias 40 
		<script type="text/javascript" src="<?=$url_base?>modules/saisie/squelettes/florileges/js/WidgetSaisieFlorileges.js"></script>
1955 jpm 41 
		<script src="<?=$url_base?>saisie?projet=florileges&amp;service=taxons" type="text/javascript"></script>
1526 jpm 42 
		<script type="text/javascript">
43 
		//<![CDATA[
2707 mathias 44 
           $(document).ready(function() {
45 
				// Héritage !!
46 
				var widget = new WidgetSaisieFlorileges();
2408 jpm 47 
 
2709 mathias 48 
				// la variable "taxons" chargée par "service=taxons" ci-dessus n'est pas accessible dans le contexte objet
49 
				widget.taxons = taxons;
50 
 
2707 mathias 51 
				// La présence du parametre 'debug' dans l'URL enclenche le débogage
52 
				widget.debug = <?=isset($_GET['debug']) ? 'true' : 'false'?>;
53 
				// La présence du parametre 'html5' dans l'URL enclenche les fonctions avancées HTML5
54 
				widget.html5 = <?=isset($_GET['html5']) ? 'true' : 'false'?>;
55 
				// Mot-clé du widget/projet
56 
				widget.tagProjet = "Florileges,WidgetFlorileges,Sauvages";
57 
				// Mots-clés à ajouter aux images
58 
				widget.tagImg = "<?=isset($_GET['tag-img']) ? $_GET['tag-img'] : ''?>";
59 
				widget.separationTagImg = "<?= isset($_GET['motcle']) && isset($_GET['tag-img']) ? ',' : '' ?>";
60 
				widget.tagImg = <?=isset($_GET['motcle']) ? "'".$_GET['motcle']."' + widget.separationTagImg + widget.tagImg" : 'widget.tagImg' ?>;
61 
				// Mots-clés à ajouter aux observations
62 
				widget.tagObs = "<?=isset($_GET['tag-obs']) ? $_GET['tag-obs'] : ''?>";
63 
				widget.separationTagObs = "<?= isset($_GET['projet']) && isset($_GET['tag-obs']) ? ',' : '' ?>";
64 
				widget.tagObs = <?=isset($_GET['projet']) ? "'".$_GET['projet']."' + widget.separationTagObs + widget.tagObs" : 'widget.tagObs' ?>;
65 
				// Précharger le formulaire avec les infos d'une observation
66 
				widget.obsId = "<?=isset($_GET['id-obs']) ? $_GET['id-obs'] : ''?>";
67 
				// URL du web service réalisant l'insertion des données dans la base du CEL.
68 
				widget.serviceSaisieUrl = "<?=$url_ws_saisie?>";
69 
				// URL du web service permettant de récupérer les infos d'une observation du CEL.
70 
				widget.serviceObsUrl = "<?=$url_ws_obs?>";
71 
				// Code du référentiel utilisé pour les nom scientifiques.
72 
				widget.nomSciReferentiel = "<?=$ns_referentiel?>";
73 
				// Indication de la présence d'une espèce imposée
74 
				widget.especeImposee = "<?=$espece_imposee; ?>";
75 
				// Tableau d'informations sur l'espèce imposée
76 
				widget.infosEspeceImposee = <?=$infos_espece; ?>;
77 
				// Nombre d'élément dans les listes d'auto-complétion
78 
				widget.autocompletionElementsNbre = 20;
79 
				// Indication de la présence d'un référentiel imposé
80 
				widget.referentielImpose = "<?=$referentiel_impose; ?>";
81 
				// URL du web service permettant l'auto-complétion des noms scientifiques
82 
				widget.serviceAutocompletionNomSciUrl = "<?=$url_ws_autocompletion_ns?>?"+
1526 jpm 83 
					"masque={masque}&"+
84 
					"recherche=etendue&"+
85 
					"retour.champs=famille,nom_retenu,nom_retenu_complet,num_taxonomique,nom_retenu.id&"+
86 
					"ns.structure=au"+"&"+
2707 mathias 87 
					"navigation.limite=" + widget.autocompletionElementsNbre;
88 
				// Squelette d'URL du web service permettant l'auto-complétion des noms scientifiques
89 
				widget.serviceAutocompletionNomSciUrlTpl = "<?=$url_ws_autocompletion_ns_tpl?>?"+
1526 jpm 90 
					"masque={masque}&"+
91 
					"recherche=etendue&"+
92 
					"retour.champs=famille,nom_retenu,nom_retenu_complet,num_taxonomique,nom_retenu.id&"+
2707 mathias 93 
					"retour.tri=alpharet&"+ // tri "à la CeL"
1526 jpm 94 
					"ns.structure=au"+"&"+
2707 mathias 95 
					"navigation.limite=" + widget.autocompletionElementsNbre;
96 
				// Nombre d'observations max autorisé avant transmission
97 
				widget.obsMaxNbre = 10;
98 
				// Durée d'affichage en milliseconde des messages d'informations
99 
				widget.dureeMessage = 15000;
100 
				// Squelette d'URL du web service de l'annuaire.
101 
				widget.serviceAnnuaireIdUrl = "<?=$url_ws_annuaire?>";
102 
				// Squelette d'URL du web service d'eFlore fournissant les noms de communes.
103 
				widget.serviceNomCommuneUrl = "http://api.tela-botanica.org/service:eflore:0.1/osm/nom-commune?lon={lon}&lat={lat}";
104 
				// Squelette d'URL du web service d'eFlore fournissant les noms de communes hors de France (localisation approximative).
105 
				widget.serviceNomCommuneUrlAlt = "http://api.tela-botanica.org/service:eflore:0.1/wikipedia/nom-commune?lon={lon}&lat={lat}&nbre=1";
106 
				// URL des marqueurs à utiliser dans la carte Google Map
107 
				widget.googleMapMarqueurDebutUrl = "<?=$url_base?>modules/saisie/squelettes/florileges/img/marqueurs/debut.png";
108 
				widget.googleMapMarqueurFinUrl = "<?=$url_base?>modules/saisie/squelettes/florileges/img/marqueurs/fin.png";
109 
				// URL de l'icône du chargement en cours
110 
				widget.chargementIconeUrl = "<?=$url_base?>modules/saisie/squelettes/florileges/img/icones/chargement.gif";
111 
				// URL de l'icône du chargement en cours d'une image
112 
				widget.chargementImageIconeUrl = "<?=$url_base?>modules/saisie/squelettes/florileges/img/icones/chargement-image.gif";
113 
				// URL de l'icône du calendrier
114 
				widget.calendrierIconeUrl = "<?=$url_base?>modules/saisie/squelettes/florileges/img/icones/calendrier.png";
115 
				// URL de l'icône pour une photo manquante
116 
				widget.pasDePhotoIconeUrl = "<?=$url_base?>modules/saisie/squelettes/florileges/img/icones/pas_de_photo.png";
117 
 
118 
				// et BIM
119 
				widget.init();
120 
           });
1526 jpm 121 
		//]]>
122 
		</script>
2408 jpm 123 
 
1526 jpm 124 
		<!-- CSS -->
2707 mathias 125 
		<link href="http://resources.tela-botanica.org/jquery/jquery-ui/1.11.0/css/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" media="screen" />
126 
		<link href="http://resources.tela-botanica.org/bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" media="screen" />
127 
		<link href="http://resources.tela-botanica.org/bootstrap/2.3.2/css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css" media="screen" />
1537 jpm 128 
		<link href="<?=$url_base?>modules/saisie/squelettes/florileges/css/<?=isset($_GET['style']) ? $_GET['style'] : 'florileges'?>.css" rel="stylesheet" type="text/css" media="screen" />
2678 aurelien 129 
 
130 
 
131 
		<script>
132 
		  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
133 
		  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
134 
		  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
135 
		  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
136 
 
137 
		  ga('create', 'UA-20092557-1', 'auto');
138 
		  ga('require', 'displayfeatures');
139 
		  ga('send', 'pageview');
140 
 
141 
		</script>
1526 jpm 142 
	</head>
143 
 
144 
	<body data-spy="scroll">
145 
		<div class="container">
1564 jpm 146 
			<div class="row-fluid entete">
1540 jpm 147 
				<div class="span7">
1537 jpm 148 
					<div class="well intro">
149 
						<h1>Florilèges</h1>
150 
						<p>
151 
							Bienvenue sur l'interface de saisie en ligne des données
152 
							"Florilèges"-RUES. Cette interface vous permet d'enregistrer vos
2408 jpm 153 
							observations de terrain et de les partager simplement
1537 jpm 154 
							(sous <a href="http://creativecommons.org/licenses/by-sa/2.0/fr/">licence CC-BY-SA</a>)
2408 jpm 155 
							avec <a href="http://www.plante-et-cite.fr">Plante &amp; Cité</a>,
1537 jpm 156 
							<a href="http://www.tela-botanica.org/site:accueil">le réseau Tela Botanica</a>
157 
							et <a href="http://sauvagesdemarue.mnhn.fr">le programme Sauvage de ma Rue</a>.
158 
						</p>
159 
						<p>
160 
							En vous identifiant, vous pourrez retrouver et consulter l'ensemble de
161 
							vos observations dans <a href="http://www.tela-botanica.org/appli:cel">le Carnet en ligne</a>.<br />
2408 jpm 162 
							Renseignez tout d'abord les caractéristiques et l'itinéraire technique mis en place
163 
							sur le site des relevés, puis détaillez ensuite les espèces observées sur ce site.
164 
							Ajoutez chaque observation à la liste à transmettre à l'aide du bouton
1537 jpm 165 
							«&nbsp;Créer&nbsp;».
166 
						</p>
167 
						<p>
168 
							L'interface de saisie vous permet de renseigner jusqu'à 10 observations à des dates
169 
							différentes pour un même site.
170 
							Partagez-les avec le bouton «&nbsp;Transmettre&nbsp;».
2408 jpm 171 
							Elles apparaissent immédiatement sur
172 
							<a href="http://www.tela-botanica.org/site:botanique?langue=fr">la carte</a> et
173 
							<a href="http://www.tela-botanica.org/site:botanique?langue=fr">la galerie photos</a>
1537 jpm 174 
							du projet.
175 
						</p>
176 
						<p>
177 
							Pour toute question, <a href="mailto:contact@florileges.info">contactez les animateurs du programme Florilèges</a>.
178 
						</p>
179 
						<p class="discretion">
1608 jpm 180 
							Un aide interactive est à votre disposition sur l'interface.
1537 jpm 181 
							Une fois familiarisé, vous pouvez cliquer sur le bouton suivant pour la désactiver :
182 
							<button id="btn-aide" class="btn btn-mini btn-success">
183 
								<span class="icon-question-sign icon-white"></span>
184 
								<span id="btn-aide-txt" >Désactiver l'aide</span>
2408 jpm 185 
							</button>
1537 jpm 186 
						</p>
1526 jpm 187 
					</div>
188 
				</div>
2408 jpm 189 
 
1540 jpm 190 
				<div class="span5">
191 
					<div class="well forcer-colonne">
1526 jpm 192 
						<h2>Observateur</h2>
193 
						<form id="form-observateur" action="#" class="" autocomplete="on">
194 
							<div class="row-fluid">
1608 jpm 195 
								<div class="span6 control-group has-tooltip" data-placement="bottom"
1526 jpm 196 
									title="Saisissez le courriel avec lequel vous être inscrit à Tela Botanica.
2408 jpm 197 
										Si vous n'êtes pas inscrit, ce n'est pas grave, vous pourrez le faire
198 
										ultérieurement. Des informations complémentaires vont vous être
1526 jpm 199 
										demandées : prénom et nom.">
1540 jpm 200 
										<label class="control-label" for="courriel">
2408 jpm 201 
											<strong class="obligatoire">*</strong>
1540 jpm 202 
											Courriel
203 
										</label>
204 
										<div class="controls">
205 
											<div class="input-prepend">
206 
												<span class="add-on">
207 
													<i class="icon-envelope"></i>
208 
												</span>
209 
												<input id="courriel" name="courriel" class="span11" type="text"/>
210 
												<input id="id_utilisateur" name="id_utilisateur" type="hidden"/>
211 
											</div>
212 
										</div>
2408 jpm 213 
 
1526 jpm 214 
								</div>
1608 jpm 215 
								<div id="zone-courriel-confirmation" class="span6 hidden control-group has-tooltip"
2408 jpm 216 
									data-placement="bottom"
217 
									title="Saisissez à nouveau votre courriel afin de le confirmer. Le
1608 jpm 218 
										copier/coller est désactivé pour éviter les erreurs.">
1540 jpm 219 
									<label class="control-label" for="courriel_confirmation">
1537 jpm 220 
										<strong class="obligatoire">*</strong>
221 
										Courriel (confirmation)
1526 jpm 222 
									</label>
1540 jpm 223 
									<div class="controls">
224 
										<div class="input-prepend">
225 
											<span class="add-on">
226 
												<i class="icon-envelope"></i>
227 
											</span>
2408 jpm 228 
											<input id="courriel_confirmation" name="courriel_confirmation"
1540 jpm 229 
											 	class="span11" type="text"/>
230 
										</div>
1526 jpm 231 
									</div>
232 
								</div>
233 
							</div>
234 
							<div id="zone-prenom-nom" class="row-fluid hidden">
1560 jpm 235 
								<div class="span6 control-group">
1563 jpm 236 
									<label for="prenom" class="control-label">
1560 jpm 237 
										<strong class="obligatoire">*</strong>
1540 jpm 238 
										Prénom
239 
									</label>
240 
									<input id="prenom" name="prenom" class="span12" type="text"/>
1526 jpm 241 
								</div>
1560 jpm 242 
								<div class="span6 control-group">
1563 jpm 243 
									<label for="nom" class="control-label">
1560 jpm 244 
										<strong class="obligatoire">*</strong>
1540 jpm 245 
										Nom
246 
									</label>
1560 jpm 247 
									<div class="controls">
248 
										<input id="nom" name="nom"  class="span12" type="text"/>
249 
									</div>
1526 jpm 250 
								</div>
251 
							</div>
1540 jpm 252 
							<div id="zone-personne-complement" class="forcer-colonne">
1537 jpm 253 
								<div class="row-fluid">
2408 jpm 254 
									<div class="span6 control-group has-tooltip"
255 
										title="Précisez l'entreprise, l'association, l'école, ... au nom de
1608 jpm 256 
										laquelle vous participez.">
1560 jpm 257 
										<label for="structure" class="control-label">
258 
											<strong class="obligatoire">*</strong>
1540 jpm 259 
											Structure
260 
										</label>
1560 jpm 261 
										<div class="controls">
2408 jpm 262 
											<input id="structure" name="personneStructure" class="span12 obs-chp-etendu"
1567 jpm 263 
												type="text" data-label="Structure de l'observateur"/>
1560 jpm 264 
										</div>
1537 jpm 265 
									</div>
2408 jpm 266 
									<div class="span6 control-group has-tooltip"
1608 jpm 267 
										title="Précisez le service de la structure au nom de laquelle vous participez.">
1560 jpm 268 
										<label for="service" class="control-label">
269 
											<strong class="obligatoire">*</strong>
1540 jpm 270 
											Service
271 
										</label>
1560 jpm 272 
										<div class="controls">
2408 jpm 273 
											<input id="service" name="personneService" class="span12 obs-chp-etendu"
1567 jpm 274 
												type="text" data-label="Service de l'observateur"/>
1560 jpm 275 
										</div>
1537 jpm 276 
									</div>
277 
								</div>
278 
								<div class="row-fluid">
1608 jpm 279 
									<div class="span12 has-tooltip" title="Indiquez l'intitulé de votre poste
280 
										ou votre mission principale.">
1540 jpm 281 
										<label for="fonction">
282 
											Fonction
283 
										</label>
2408 jpm 284 
										<input id="fonction" name="personneFonction" class="span12 obs-chp-etendu"
1567 jpm 285 
											type="text" data-label="Fonction de l'observateur"/>
1537 jpm 286 
									</div>
287 
								</div>
288 
							</div>
1526 jpm 289 
						</form>
290 
					</div>
291 
				</div>
292 
			</div>
293 
			<!-- Messages d'erreur du formulaire-->
1537 jpm 294 
			<div class="row-fluid">
1526 jpm 295 
				<div class="zone-alerte span6 offset3">
296 
					<div id="dialogue-bloquer-copier-coller" class="alert alert-info alert-block" style="display:none;">
297 
						<a class="close">×</a>
298 
						<h4 class="alert-heading">Information : copier/coller</h4>
299 
						<p>
300 
							Merci de ne pas copier/coller votre courriel.<br/>
301 
							La double saisie permet de vérifier l'absence d'erreurs.
302 
						</p>
303 
					</div>
304 
					<div id="dialogue-courriel-introuvable" class="alert alert-info alert-block" style="display:none;">
305 
						<a class="close">×</a>
306 
						<h4 class="alert-heading">Information : courriel introuvable</h4>
307 
						<p>
308 
							Vous n'êtes pas inscrit à Tela Botanica avec ce courriel.<br/>
309 
							Veuillez compléter les champs supplémentaires ou indiquer votre courriel d'inscription.<br/>
2408 jpm 310 
							Pour retrouver vos observations dans le <a href="http://www.tela-botanica.org/appli:cel">Carnet en ligne</a>,
1526 jpm 311 
							il sera nécesaire de <a href="http://www.tela-botanica.org/page:inscription">vous inscrire à Tela Botanica</a>.
312 
						</p>
313 
					</div>
1577 jpm 314 
					<div id="dialogue-google-map" class="alert alert-info alert-block" style="display: none;">
315 
						<a class="close">×</a>
316 
						<h4 class="alert-heading">Information sur Google Map</h4>
317 
						<div class="contenu"></div>
318 
					</div>
1526 jpm 319 
				</div>
320 
			</div>
321 
			<div class="row-fluid">
322 
				<div class="span12">
1560 jpm 323 
					<form id="form-site">
324 
						<div class="well">
325 
							<div class="row-fluid">
326 
								<div class="span4">
327 
									<div class="row-fluid">
328 
										<div class="span12">
329 
											<h2>Site</h2>
1526 jpm 330 
										</div>
331 
									</div>
332 
									<div class="row-fluid">
2408 jpm 333 
										<div class="span12 control-group has-tooltip"
1608 jpm 334 
											title="Nom du site d'étude (quartier, rue, ...)." >
1560 jpm 335 
											<label for="station" class="control-label">
336 
												<strong class="obligatoire">*</strong>
337 
												Nom
1526 jpm 338 
											</label>
1560 jpm 339 
											<div class="controls">
340 
												<input id="station" class="span12" name="station" type="text"/>
341 
											</div>
1526 jpm 342 
										</div>
1560 jpm 343 
									</div>
344 
									<div class="forcer-colonne well control-group">
345 
										<div class="row-fluid">
346 
											<div class="span12">
2408 jpm 347 
												<label for="map_canvas" class="control-label"
1560 jpm 348 
														title="Veuillez localiser l'observation">
349 
													<strong class="obligatoire">*</strong>
350 
													Géolocalisation
351 
												</label>
1577 jpm 352 
												<div class="row-fluid">
353 
													<div class="span12">
354 
														<ul class="unstyled liste_indication_geolocalisation">
355 
															<li class="indication_geolocalisation">Étape 1/4 : Entrez le nom de la rue et de la ville dans l'espace de recherche ci-dessous</li>
356 
															<li class="indication_geolocalisation">Étape 2/4 : Placez le drapeau vert au début de la portion de rue étudiée</li>
357 
															<li class="indication_geolocalisation">Étape 3/4 : Placez le drapeau rouge à la fin de la portion de rue étudiée, si vous vous êtes trompé, vous pouvez redéplacer le drapeau vert</li>
358 
															<li class="indication_geolocalisation">Étape 4/4 : Voilà ! Votre zone d'étude est localisée ! Vous pouvez passer à la saisie de l'observation.</li>
359 
														</ul>
360 
													</div>
361 
												</div>
1560 jpm 362 
												<div class="form-search form-horizontal">
363 
													<div class="control-group">
2408 jpm 364 
														<input id="carte-recherche"
1608 jpm 365 
															class="search-query span12 obs-chp-etendu has-tooltip"
1587 jpm 366 
															type="text"
1560 jpm 367 
															title="Permet de centrer la carte sur le lieu recherché. Il est nécessaire de sélectionner le lieu dans la liste déroulante."
1577 jpm 368 
															placeholder="Entrez un nom de ville, de lieu ou de rue..."
369 
															name="adresse"
370 
															data-label="Adresse"
371 
															value=""/>
1560 jpm 372 
													</div>
373 
												</div>
374 
											</div>
375 
										</div>
376 
										<div class="row-fluid">
377 
											<div class="span12">
2408 jpm 378 
												<div id="map-canvas" class="has-tooltip"
1560 jpm 379 
													title="Vous pouvez cliquer sur la carte pour déplacer le marqueur
2408 jpm 380 
														représentant votre station ou bien le glisser-déposer sur
1560 jpm 381 
														le lieu souhaité."></div>
382 
											</div>
383 
										</div>
384 
										<div id="coordonnees-geo-affichage" class="row-fluid">
385 
											<label for="coordonnees-geo" class="span6">
386 
												<a class="afficher-coord btn">
387 
													<span class="afficher-coord-action">Afficher</span>
388 
													<span class="afficher-coord-action" style="display:none;">Cacher</span>
389 
													coordonnées
2408 jpm 390 
													<span id="lat-lon-info" class="info has-tooltip"
1560 jpm 391 
														title="Système géodésique mondial, révision de 1984 - Coordonnées non projetées">
392 
														(WGS84)
393 
													</span>
394 
												</a>
395 
											</label>
396 
											<div id="info-commune" class="span6">
397 
												<span for="marqueur-commune">Commune : </span>
398 
												<span id="marqueur-commune">
399 
													<span id="commune-nom" class="commune-info"></span>
2408 jpm 400 
													(<span id="commune-code-insee" class="commune-info has-tooltip"
1560 jpm 401 
														title="Code INSEE de la commune"></span>)
402 
												</span>
403 
											</div>
404 
										</div>
405 
										<div id="coordonnees-geo" class="row-fluid" style="display:none;">
406 
											<div class="form-inline">
407 
												<div id="coord-lat" class="span4 control-group">
408 
													<label for="latitude" class="control-label">
409 
														<strong class="obligatoire">*</strong>
410 
														Latitude
411 
													</label>
412 
													<div class="controls">
413 
														<input id="latitude" class="input-mini" name="latitude" type="text" value=""/>
414 
													</div>
415 
												</div>
416 
												<div id="coord-lng" class="span4">
417 
													<label for="longitude" class="control-label">
418 
														<strong class="obligatoire">*</strong>
419 
														Longitude
420 
													</label>
421 
													<div class="controls">
422 
														<input id="longitude" class="input-mini" name="longitude" type="text" value=""/>
423 
													</div>
424 
												</div>
425 
												<div class="span4">
1608 jpm 426 
													<button id="geolocaliser" class="btn has-tooltip"
1560 jpm 427 
														title="Centre la carte sur les coordonnées de latitude et longitude saisies.">
428 
														Voir sur la carte
429 
													</button>
1526 jpm 430 
												</div>
1560 jpm 431 
											</div>
1526 jpm 432 
										</div>
433 
									</div>
1560 jpm 434 
								</div>
435 
								<div class="span4">
1526 jpm 436 
									<div class="row-fluid">
437 
										<div class="span12">
1560 jpm 438 
											<h2>Typologie du site</h2>
1526 jpm 439 
										</div>
440 
									</div>
1560 jpm 441 
									<div class="row-fluid">
2408 jpm 442 
										<div class="span12 control-group has-tooltip"
1608 jpm 443 
											title="Précisez la typologie du site." >
1560 jpm 444 
											<label for="typo-urbaine" class="control-label">
445 
												<strong class="obligatoire">*</strong>
446 
												Typologie
447 
											</label>
448 
											<div class="controls">
1567 jpm 449 
												<select id="typo-urbaine" class="span12 obs-chp-etendu" name="typoUrbaine"
450 
													data-label="Typologie">
1560 jpm 451 
													<option selected value="">Sélectionnez une typologie</option>
452 
													<option>centre ville</option>
453 
													<option>faubourg</option>
454 
													<option>quartier résidentiel</option>
455 
													<option>zone commerciale</option>
456 
													<option>zone d'activités</option>
457 
												</select>
458 
											</div>
1537 jpm 459 
										</div>
1526 jpm 460 
									</div>
1560 jpm 461 
									<div class="row-fluid">
2408 jpm 462 
										<div class="span12 control-group has-tooltip"
1608 jpm 463 
											title="Indiquez le type de revêtement au sol." >
1560 jpm 464 
											<label for="revetement-sol" class="control-label">
465 
												<strong class="obligatoire">*</strong>
1614 jpm 466 
												Revêtement au sol
1560 jpm 467 
											</label>
468 
											<div class="controls">
1567 jpm 469 
												<select id="revetement-sol" class="span12 obs-chp-etendu" name="revetementSol"
1614 jpm 470 
													data-label="Revêtement au sol">
471 
													<option selected value="">Sélectionnez le revêtement au sol</option>
1560 jpm 472 
													<option>asphalte et enrobés</option>
473 
													<option>pavés</option>
474 
													<option>stabilisés, aires sablées</option>
475 
													<option>graviers</option>
476 
													<option>terre</option>
477 
												</select>
1537 jpm 478 
											</div>
1560 jpm 479 
										</div>
1540 jpm 480 
									</div>
1560 jpm 481 
									<div class="row-fluid">
2408 jpm 482 
										<div class="span12 has-tooltip"
1608 jpm 483 
											title="Évaluez la densité de zones végétalisés autour du site (haie, aménagement paysager, parcs et jardins, ...)." >
1560 jpm 484 
											<label>
485 
												Présence de zones végétalisés
2408 jpm 486 
												<select id="presence-zone-vegetalise" class="obs-chp-etendu slider"
1567 jpm 487 
													name="presenceZoneVegetalise" data-label="Présence de zones végétalisés">
1560 jpm 488 
													<option selected value=""></option>
1580 jpm 489 
													<option value="nulle">nulle</option>
490 
													<option value="faible">faible</option>
491 
													<option value="moyenne">moyenne</option>
492 
													<option value="importante">importante</option>
1560 jpm 493 
												</select>
494 
											</label>
495 
										</div>
1537 jpm 496 
									</div>
1560 jpm 497 
									<div class="row-fluid">
2408 jpm 498 
										<div class="span12 has-tooltip"
1608 jpm 499 
											title="Indiquez la hauteur des bâtiments avoisinants (en étages)." >
1560 jpm 500 
											<label>
501 
												Hauteur des bâtiments
2408 jpm 502 
												<select id="hauteur-batiment-avoisinant" class="obs-chp-etendu slider"
1567 jpm 503 
													name="hauteurBatimentAvoisinant" data-label="Hauteur des bâtiments">
1560 jpm 504 
													<option selected value=""></option>
1580 jpm 505 
													<option value="0">0</option>
506 
													<option value="1">1</option>
507 
													<option value="2">2</option>
508 
													<option value="3">3</option>
509 
													<option value="4">4</option>
510 
													<option value="5 et +">5 et +</option>
1560 jpm 511 
												</select>
512 
											</label>
513 
										</div>
1537 jpm 514 
									</div>
515 
								</div>
1560 jpm 516 
								<div class="span4">
517 
									<div class="row-fluid">
518 
										<div class="span12">
519 
											<h2>Itinéraire technique</h2>
520 
										</div>
1537 jpm 521 
									</div>
1560 jpm 522 
									<div class="row-fluid">
2408 jpm 523 
										<div class="span12 control-group has-tooltip"
1614 jpm 524 
											title="Évaluez l'intensité de gestion du site." >
1560 jpm 525 
											<label for="intensite-gestion" class="control-label">
526 
												<strong class="obligatoire">*</strong>
527 
												Intensité de gestion
528 
											</label>
529 
											<div class="controls">
2408 jpm 530 
												<select id="intensite-gestion" class="span12 obs-chp-etendu"
1567 jpm 531 
													name="intensiteGestion" data-label="Intensité de gestion">
1560 jpm 532 
													<option selected value="">Sélectionnez l'intensité</option>
533 
													<option>extensive</option>
534 
													<option>intermédiaire</option>
535 
													<option>intensive</option>
536 
												</select>
1526 jpm 537 
											</div>
1537 jpm 538 
										</div>
1560 jpm 539 
									</div>
540 
									<div class="row-fluid">
541 
										<div class="span12">
542 
											<div class="row-fluid">
2408 jpm 543 
												<div class="span12 control-group has-tooltip"
1608 jpm 544 
													title="Évaluez la fréquence d'utilisation de produits phytosanitaires sur le site." >
1560 jpm 545 
													<label for="periodicite-traitement-phyto" class="control-label">
546 
														<strong class="obligatoire">*</strong>
547 
														Utilisation de produits phytosanitaires
548 
													</label>
549 
													<div class="controls">
2408 jpm 550 
														<select id="periodicite-traitement-phyto"
551 
															class="obs-chp-etendu slider"
1567 jpm 552 
															name="periodiciteTraitementPhyto"
553 
															data-label="Utilisation de produits phytosanitaires">
1560 jpm 554 
															<option selected value=""></option>
555 
															<option value="régulière">régulière</option>
556 
															<option value="occasionnelle">occasionnelle</option>
557 
															<option value="rare">rare</option>
558 
															<option value="jamais">jamais</option>
559 
														</select>
1537 jpm 560 
													</div>
1560 jpm 561 
												</div>
1526 jpm 562 
											</div>
1560 jpm 563 
											<div id="datp-zone" class="row-fluid hidden">
2408 jpm 564 
												<div class="span12 has-tooltip"
565 
														title="Indiquez la date approximative de l'arrêt des traitements.
566 
														Vous pouvez cliquer sur l'icône de calendrier pour
1560 jpm 567 
														sélectionner une date dans un calendrier.">
568 
													<label title="Veuillez indiquer la date du relevé au format jj/mm/aaaa">
569 
														Date d'arrêt des traitements
570 
														<div class="input-prepend">
571 
															<span id="date-arret-traitement-phyto-icone" class="add-on"></span>
2408 jpm 572 
															<input id="date-arret-traitement-phyto" class="input-small obs-chp-etendu"
1567 jpm 573 
																name="dateArretTraitementPhyto" type="text"
2408 jpm 574 
																placeholder="jj/mm/aaaa"
1567 jpm 575 
																data-label="Date d'arrêt des traitements"/>
1560 jpm 576 
														</div>
577 
													</label>
578 
												</div>
579 
											</div>
1537 jpm 580 
										</div>
581 
									</div>
1560 jpm 582 
									<div class="row-fluid">
2408 jpm 583 
										<div class="span12 control-group has-tooltip"
584 
											title="Description de l'itinéraire de gestion (type de traitement,
1567 jpm 585 
											matériel utilisé, fréquence de passage, ...)." >
1560 jpm 586 
											<label for="itineraire-gestion" class="control-label">
587 
												<strong class="obligatoire">*</strong>
588 
												Description de l'itinéraire de gestion
589 
											</label>
590 
											<div class="controls">
2408 jpm 591 
												<textarea id="itineraire-gestion" class="span12 obs-chp-etendu"
592 
													rows="7" name="itineraireGestion"
1567 jpm 593 
													data-label="Description de l'itinéraire de gestion"></textarea>
1560 jpm 594 
											</div>
595 
										</div>
1537 jpm 596 
									</div>
597 
								</div>
598 
							</div>
599 
						</div>
1560 jpm 600 
					</form>
1537 jpm 601 
				</div>
602 
			</div>
603 
			<div class="row-fluid">
604 
				<div class="span12 well">
605 
					<div class="row-fluid">
1560 jpm 606 
						<div class="span3">
1537 jpm 607 
							<h2 id="obs-titre">Observations</h2>
608 
						</div>
1560 jpm 609 
						<div class="span9">
1540 jpm 610 
							<form id="form-date" class="form-inline">
2408 jpm 611 
								<div class="span5 control-group has-tooltip"
612 
									title="Vous pouvez cliquer sur l'icône de calendrier pour
613 
									sélectionner une date dans un calendrier. La date doit être au format :
1560 jpm 614 
									jj/mm/aaaa">
615 
									<label class="control-label">
616 
										<strong class="obligatoire">*</strong>
2408 jpm 617 
										Date du relevé
1540 jpm 618 
										<div class="input-prepend">
619 
											<span id="date-icone" class="add-on"></span>
2408 jpm 620 
											<input id="date" class="input-small" name="date" type="text"
1540 jpm 621 
												placeholder="jj/mm/aaaa" />
622 
										</div>
623 
									</label>
624 
								</div>
2408 jpm 625 
								<div class="span7 control-group has-tooltip"
1540 jpm 626 
									title="Date approximative de la dernière intervention." >
1560 jpm 627 
									<label class="span12 control-label">
628 
										<strong class="obligatoire">*</strong>
1540 jpm 629 
										Dernière intervention
2408 jpm 630 
										<select id="date-derniere-intervention" class="span8 obs-chp-etendu"
1567 jpm 631 
											name="dateDerniereIntervention" data-label="Dernière intervention">
1560 jpm 632 
											<option selected value="">Sélectionnez la date d'intervention</option>
1540 jpm 633 
											<option value="inconnue">ne sais pas</option>
634 
											<option>plus de 3 ans</option>
635 
											<option>entre 1 et 3 ans</option>
636 
											<option>moins d'1 an</option>
637 
											<option>au cours du dernier semestre</option>
638 
											<option>au cours du dernier trimestre</option>
639 
											<option>au cours des 30 derniers jours</option>
640 
											<option>au cours des 7 derniers jours</option>
641 
										</select>
642 
									</label>
643 
								</div>
644 
							</form>
645 
						</div>
1537 jpm 646 
					</div>
1540 jpm 647 
					<form id="form-obs" autocomplete="on">
1537 jpm 648 
						<div class="row-fluid">
1577 jpm 649 
							<div class="span6">
650 
								<div class="well">
651 
									<div class="row-fluid">
652 
										<div class="span12">
1608 jpm 653 
											<div id="taxon-liste-input-groupe" class="control-group has-tooltip"
2408 jpm 654 
												title="Sélectionnez une espèce dans la liste déroulante par son nom latin
1608 jpm 655 
												ou commun. Si une espèce est absente, sélectionner «Autre espèce»." >
1577 jpm 656 
												<label class="control-label" for="taxon-liste" title="Choisissez l'espèce rencontrée.">
2408 jpm 657 
													<strong class="obligatoire">*</strong>
1577 jpm 658 
													Espèces les plus communes
659 
												</label>
660 
												<div class="controls">
661 
													<div class="input-prepend ">
662 
														<span class="add-on">
663 
															<i class="icon-leaf"></i>
664 
														</span>
2408 jpm 665 
 
1577 jpm 666 
														<select id="taxon-liste" class="span10" name="taxon-liste">
667 
															<option value="" selected>Sélectionner une espèce</option>
2408 jpm 668 
 
1613 jpm 669 
															<optgroup id="taxon-liste-noms">
670 
																<?php foreach ($taxons['sci-et-fr'] as $taxon) :?>
2408 jpm 671 
																	<option
672 
																		class="<?=$taxon['nom_type'] ?>"
673 
																		value="<?=$taxon['num_nom'] ?>"
1613 jpm 674 
																		title="<?=$taxon['nom_title'] ?>"
675 
																		data-nom-a-sauver="<?=$taxon['nom_a_sauver'] ?>"
676 
																		>
677 
																		<?=$taxon['nom_a_afficher']?>
678 
																	</option>
679 
																<?php endforeach; ?>
680 
															</optgroup>
681 
															<optgroup id="taxon-liste-special">
682 
																<?php foreach ($taxons['speciaux'] as $taxon) :?>
2408 jpm 683 
																	<option
684 
																		class="<?=$taxon['nom_type'] ?>"
685 
																		value="<?=$taxon['num_nom'] ?>"
1613 jpm 686 
																		title="<?=$taxon['nom_title'] ?>"
687 
																		data-nom-a-sauver="<?=$taxon['nom_a_sauver'] ?>"
688 
																		>
689 
																		<?=$taxon['nom_a_afficher']?>
690 
																	</option>
691 
																<?php endforeach; ?>
692 
																<option value="?">Autre espèce</option>
693 
															</optgroup>
1577 jpm 694 
														</select>
695 
													</div>
1526 jpm 696 
												</div>
1540 jpm 697 
											</div>
1537 jpm 698 
										</div>
699 
									</div>
1577 jpm 700 
									<div id="taxon-input-groupe" class="row-fluid hidden">
701 
										<div class="span12">
2408 jpm 702 
											<div class="control-group has-tooltip"
703 
												title="Sélectionnez une espèce dans la liste déroulante pour lier
704 
													votre nom au référentiel. Si vous le désirez vous pouvez aussi saisir
1608 jpm 705 
													un nom absent du référentiel (Ex. : 'fleur violette' ou 'Viola sp.1')." >
1577 jpm 706 
												<label for="taxon" class="control-label" title="Choisissez l'espèce rencontrée.">
707 
													Autre espèce
708 
												</label>
709 
												<div class="controls">
710 
													<input id="taxon" name="taxon" type="text" class="span12"
2408 jpm 711 
														placeholder="Autre espèce (ou indication sur la plante)"
1577 jpm 712 
														value="<?= $nom_sci_espece_defaut; ?>" />
713 
												</div>
1540 jpm 714 
											</div>
1537 jpm 715 
										</div>
716 
									</div>
1577 jpm 717 
									<div class="row-fluid">
2408 jpm 718 
										<div class="span12 control-group has-tooltip"
1608 jpm 719 
											title="Sélectionnez un ou plusieurs milieux dans lesquels l'espèce est présente sur le site.">
1577 jpm 720 
											<label class="span2 control-label">
721 
												<strong class="obligatoire">*</strong>
722 
												Milieux
723 
											</label>
724 
											<div id="milieux-controls" class="controls">
725 
												<div class="input-prepend">
726 
													<div class="btn-group">
727 
														<button class="btn dropdown-toggle" data-toggle="dropdown">
728 
															<i class="icon-globe"></i>
729 
															Sélectionner un ou plusieurs milieux
730 
															<span class="caret"></span>
731 
														</button>
732 
														<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
733 
															<li>
734 
																<label class="checkbox">
735 
																	<input name="milieux[]" class="cb-milieux" type="checkbox" value="chemin"/>
736 
																	chemin
737 
																</label>
738 
															</li>
739 
															<li>
740 
																<label class="checkbox">
741 
																	<input name="milieux[]" class="cb-milieux" type="checkbox" value="fissures"/>
742 
																	fissures
743 
																</label>
744 
															</li>
745 
															<li>
746 
																<label class="checkbox">
747 
																	<input name="milieux[]" class="cb-milieux" type="checkbox" value="haie"/>
748 
																	haie
749 
																</label>
750 
															</li>
751 
															<li>
752 
																<label class="checkbox">
753 
																	<input name="milieux[]" class="cb-milieux" type="checkbox" value="mur"/>
754 
																	mur
755 
																</label>
756 
															</li>
757 
															<li>
758 
																<label class="checkbox">
759 
																	<input name="milieux[]" class="cb-milieux" type="checkbox" value="pelouse"/>
760 
																	pelouse
761 
																</label>
762 
															</li>
763 
															<li>
764 
																<label class="checkbox">
765 
																	<input name="milieux[]" class="cb-milieux" type="checkbox" value="pied d'arbre"/>
766 
																	pied d'arbre
767 
																</label>
768 
															</li>
769 
															<li>
770 
																<label class="checkbox">
771 
																	<input name="milieux[]" class="cb-milieux" type="checkbox" value="plate bande"/>
772 
																	plate bande
773 
																</label>
774 
															</li>
775 
														</ul>
776 
													</div>
1560 jpm 777 
												</div>
1526 jpm 778 
											</div>
779 
										</div>
1537 jpm 780 
									</div>
2408 jpm 781 
 
1577 jpm 782 
									<div class="row-fluid">
1608 jpm 783 
										<div class="span12 control-group has-tooltip"
784 
											title="Indiquez la hauteur maximum en centimètre de la plante sur le site.">
1577 jpm 785 
											<label class="control-label">
786 
												<strong class="obligatoire">*</strong>
2408 jpm 787 
												Hauteur max. (en cm) de la plante
788 
												<input id="hauteur-plante" class="span2 obs-chp-etendu"
789 
													name="hauteurPlante"
790 
													type="number" min="0" step="5"
1577 jpm 791 
													data-label="Hauteur max. (en cm) de la plante"/>
792 
											</label>
793 
										</div>
1537 jpm 794 
									</div>
2408 jpm 795 
 
1577 jpm 796 
									<div class="row-fluid">
797 
										<div class="span12">
798 
											<label for="notes">Commentaires</label>
799 
											<div>
2408 jpm 800 
												<textarea id="notes" class="span12" rows="7" name="notes"
1577 jpm 801 
													placeholder="vous pouvez éventuellement ajouter des informations complémentaires à votre observation (altitude, taille de la plante...)"></textarea>
802 
											</div>
1537 jpm 803 
										</div>
804 
									</div>
805 
								</div>
1526 jpm 806 
							</div>
807 
							<div class="span6">
1537 jpm 808 
								<div class="well">
809 
									<div class="row-fluid">
2408 jpm 810 
										<div class="span12 control-group has-tooltip"
1608 jpm 811 
											title="Évaluez la résistance/résilience de l'espèce face aux traitements utilisés sur ce site." >
1560 jpm 812 
											<label class="control-label">
813 
												<strong class="obligatoire">*</strong>
1537 jpm 814 
												Résistance/Résilience
1560 jpm 815 
											</label>
816 
											<div class="controls">
2408 jpm 817 
												<select id="resistance-traitement-phyto"
818 
													class="obs-chp-etendu slider"
819 
													name="resistanceTraitementPhyto"
1580 jpm 820 
													data-label="Résistance/Résilience">
1560 jpm 821 
													<option selected value=""></option>
1580 jpm 822 
													<option value="pas de traitement">pas de traitement</option>
823 
													<option value="faible">faible</option>
824 
													<option value="intermédiaire">intermédiaire</option>
825 
													<option value="forte">forte</option>
826 
													<option value="très forte">très forte</option>
1537 jpm 827 
												</select>
1560 jpm 828 
											</div>
1526 jpm 829 
										</div>
1537 jpm 830 
									</div>
2408 jpm 831 
 
1526 jpm 832 
									<div class="row-fluid">
2408 jpm 833 
										<div class="span12 has-tooltip"
1608 jpm 834 
											title="Évaluez la vitesse de croissance de l'espèce sur ce site." >
1537 jpm 835 
											<label>
836 
												Croissance
2408 jpm 837 
												<select id="vitesse-croissance"
838 
													class="obs-chp-etendu slider"
1580 jpm 839 
													name="vitesseCroissance"
1567 jpm 840 
												 	data-label="Croissance">
1560 jpm 841 
													<option selected value=""></option>
1580 jpm 842 
													<option value="nulle">nulle</option>
843 
													<option value="lente">lente</option>
844 
													<option value="moyenne">moyenne</option>
845 
													<option value="rapide">rapide</option>
846 
													<option value="trop rapide">trop rapide</option>
1537 jpm 847 
												</select>
1526 jpm 848 
											</label>
849 
										</div>
1537 jpm 850 
									</div>
851 
								</div>
852 
								<div class="well">
853 
									<div class="row-fluid">
2408 jpm 854 
										<div class="span12 has-tooltip"
1537 jpm 855 
											title="Perception globale de l'espèce par l'équipe technique.">
856 
											<label class="span4">
857 
												Perceptions par l'équipe
1526 jpm 858 
											</label>
859 
											<div class="input-prepend">
1537 jpm 860 
												<div class="btn-group">
861 
													<button class="btn dropdown-toggle" data-toggle="dropdown">
1540 jpm 862 
														<i class="icon-eye-open"></i>
1537 jpm 863 
														Sélectionner une ou plusieurs perceptions
864 
														<span class="caret"></span>
865 
													</button>
866 
													<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
867 
														<li>
868 
															<label class="checkbox">
1577 jpm 869 
																<input name="perceptionTechnicien[]" class="cb-perception-technicien" type="checkbox" value="inconnue"/>
1537 jpm 870 
																ne connaissais pas la plante avant l'étude
871 
															</label>
872 
														</li>
873 
														<li>
874 
															<label class="checkbox">
1577 jpm 875 
																<input name="perceptionTechnicien[]" class="cb-perception-technicien" type="checkbox" value="discrète"/>
1537 jpm 876 
																discrète ne pose pas de problème
877 
															</label>
878 
														</li>
879 
														<li>
880 
															<label class="checkbox">
1577 jpm 881 
																<input name="perceptionTechnicien[]" class="cb-perception-technicien" type="checkbox" value="esthétique"/>
1537 jpm 882 
																visible et esthétique
883 
															</label>
884 
														</li>
885 
														<li>
886 
															<label class="checkbox">
1577 jpm 887 
																<input name="perceptionTechnicien[]" class="cb-perception-technicien" type="checkbox" value="gênante"/>
1537 jpm 888 
																gênante, difficile à gérer
889 
															</label>
890 
														</li>
891 
														<li>
892 
															<label class="checkbox">
1577 jpm 893 
																<input name="perceptionTechnicien[]" class="cb-perception-technicien" type="checkbox" value="envahissante"/>
1537 jpm 894 
																envahissante, cause des dégâts
895 
															</label>
896 
														</li>
897 
													</ul>
898 
												</div>
1526 jpm 899 
											</div>
900 
										</div>
901 
									</div>
2408 jpm 902 
 
1526 jpm 903 
									<div class="row-fluid">
2408 jpm 904 
										<div class="span12 has-tooltip"
1608 jpm 905 
											title="Évaluez la mauvaise perception des riverains vis à vis de cette espèce." >
1537 jpm 906 
											<label>
907 
												Mauvaise perception par les riverains ?
2408 jpm 908 
												<select id="perception-riverain-mauvaise" class="obs-chp-etendu"
1567 jpm 909 
													name="perceptionRiverainMauvaise" data-label="Mauvaise perception par les riverains ?">
1537 jpm 910 
													<option>inconnue</option>
911 
													<option>oui</option>
912 
													<option>non</option>
913 
												</select>
914 
											</label>
1526 jpm 915 
										</div>
916 
									</div>
1537 jpm 917 
								</div>
918 
							</div>
919 
						</div>
1560 jpm 920 
					</form>
2408 jpm 921 
 
922 
					<form id="form-upload" class="form-horizontal" action="<?= $url_ws_upload ?>"
1560 jpm 923 
						method="post" enctype="multipart/form-data">
924 
						<div class="row-fluid">
925 
							<div class="span12 well">
2408 jpm 926 
								<strong>Ajoutez des images</strong>
1560 jpm 927 
								<p class="miniature-info" class="discretion help-inline">Les photos doivent être au format JPEG et ne doivent pas excéder 5Mo chacunes.</p>
928 
								<div id ="photos-conteneur">
1577 jpm 929 
									<input type="file" id="fichier" name="fichier" accept="image/jpeg" />
2408 jpm 930 
									<input type="hidden" name="MAX_FILE_SIZE" value="5242880"/>
1562 jpm 931 
									<div id="miniatures"></div>
932 
									<p class="miniature-msg" class="span12">&nbsp;</p>
1537 jpm 933 
								</div>
1526 jpm 934 
							</div>
1537 jpm 935 
						</div>
1560 jpm 936 
					</form>
937 
					<div class="row-fluid">
2408 jpm 938 
						<div class="span12 centre has-tooltip"
939 
							title="Une fois les champs remplis, vous pouvez cliquer sur ce bouton pour
1560 jpm 940 
								ajouter votre observation à la liste à transmettre.">
941 
							<button id="ajouter-obs" class="btn btn-primary btn-large" type="button">
942 
								Créer
943 
							</button>
944 
						</div>
1537 jpm 945 
					</div>
2408 jpm 946 
 
1537 jpm 947 
				</div>
1560 jpm 948 
			</div>
2408 jpm 949 
 
1560 jpm 950 
			<!-- Messages d'erreur du formulaire-->
951 
			<div class="row-fluid">
952 
				<div class="zone-alerte span6 offset3">
953 
					<div id="dialogue-bloquer-creer-obs" class="alert alert-warning alert-block" style="display: none;">
954 
						<a class="close">×</a>
955 
						<h4 class="alert-heading">Information : 10 observations maximum</h4>
956 
						<p>
957 
							Vous venez d'ajouter votre 10ème observation.<br/>
958 
							Pour en ajouter de nouvelles, il est nécessaire de les transmettre en cliquant sur le bouton ci-dessous.
959 
						</p>
1540 jpm 960 
					</div>
1560 jpm 961 
				</div>
962 
				<div class="zone-alerte span6 offset3">
963 
					<div id="dialogue-form-invalide" class="alert alert-warning alert-block" style="display: none;">
964 
						<a class="close">×</a>
965 
						<h4 class="alert-heading">Information : champs en erreur</h4>
966 
						<p>
967 
							Certains champs du formulaire sont mal remplis.<br/>
968 
							Veuillez vérifier vos données.
969 
						</p>
1540 jpm 970 
					</div>
971 
				</div>
1577 jpm 972 
				<div class="zone-alerte span6 offset3">
973 
					<div id="dialogue-form-invalide-rue" class="alert alert-warning alert-block" style="display: none;">
974 
						<a class="close">×</a>
975 
						<h4 class="alert-heading">Information : champs en erreur</h4>
976 
						<p>
977 
							Le coordonnées du début et de la fin de la rue n'ont pas été géoréférencé.<br/>
978 
							Veuillez suivre les étapes indiquées dans le champ « Géolocalisation ».
979 
						</p>
980 
					</div>
981 
				</div>
1560 jpm 982 
			</div>
2408 jpm 983 
 
1560 jpm 984 
			<!-- Affiche le tableau récapitualif des observations ajoutées -->
1564 jpm 985 
			<div id="zone-liste-obs" class="row-fluid hidden">
1560 jpm 986 
				<div class="span12">
987 
					<div class="well">
988 
						<div class="row-fluid">
989 
							<div class="span8">
990 
								<h2>Observations à transmettre : <span class="obs-nbre">0</span></h2>
991 
							</div>
992 
							<div class="span4 droite">
2408 jpm 993 
								<button id="transmettre-obs" class="btn btn-primary btn-large has-tooltip"
1608 jpm 994 
									type="button" disabled="disabled"
2408 jpm 995 
									title="Ajoute les observations ci-dessous à votre Carnet en Ligne et les rend publiques.">
1560 jpm 996 
									Transmettre
997 
								</button>
998 
							</div>
999 
						</div>
1000 
						<div id="liste-obs" ></div>
1526 jpm 1001 
					</div>
1537 jpm 1002 
				</div>
1526 jpm 1003 
			</div>
2408 jpm 1004 
 
1567 jpm 1005 
			<div class="row-fluid">
1006 
				<div class="zone-alerte span6 offset3">
1007 
					<div id="dialogue-zero-obs" class="alert alert-block" style="display: none;">
1008 
						<a class="close">×</a>
1009 
						<h4 class="alert-heading">Attention : aucune observation</h4>
1010 
						<p>Veuillez saisir des observations pour les transmettres.</p>
1011 
					</div>
2408 jpm 1012 
 
1922 jpm 1013 
					<div id="dialogue-obs-transaction-ok" class="alert alert-success alert-block" style="display: none;">
1567 jpm 1014 
						<a class="close">×</a>
1015 
						<h4 class="alert-heading">Information : transmission des observations</h4>
1016 
						<div class="alert-txt"></div>
1017 
					</div>
2408 jpm 1018 
 
1567 jpm 1019 
					<div id="dialogue-obs-transaction-ko" class="alert alert-error alert-block" style="display: none;">
1020 
						<a class="close">×</a>
1021 
						<h4 class="alert-heading">Erreur : transmission des observations</h4>
1022 
						<div class="alert-txt"></div>
1023 
					</div>
1024 
				</div>
1025 
			</div>
1026 
 
2408 jpm 1027 
 
1560 jpm 1028 
			<footer class="row-fluid">
1029 
				<p class="span12">&copy; Tela Botanica 2013</p>
1030 
			</footer>
1031 
		</div>
2408 jpm 1032 
 
1560 jpm 1033 
		<!-- Fenêtres modales -->
2408 jpm 1034 
		<div id="chargement" class="modal-fenetre" style="display:none;">
1560 jpm 1035 
			<div id="chargement-centrage" class="modal-contenu">
2118 aurelien 1036 
				<div class="progress progress-striped active">
1037 
		 			<div id="barre-progression-upload" class="bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="10" style="">
1038 
		    			<span class="sr-only">0/10 observations transmises</span>
1039 
		  			</div>
1040 
				</div>
1560 jpm 1041 
				<p id="chargement-txt" style="color:white;font-size:1.5em;">
1042 
					Transfert des observations en cours...<br />
2408 jpm 1043 
					Cela peut prendre plusieurs minutes en fonction de la taille des images et du nombre
1560 jpm 1044 
					d'observations à transférer.
1526 jpm 1045 
				</p>
1046 
			</div>
1560 jpm 1047 
		</div>
2408 jpm 1048 
 
1560 jpm 1049 
		<!-- Templates HTML -->
1050 
		<div id="tpl-transmission-ok" style="display:none;">
1051 
			<p class="msg">
1052 
				Vos observations ont bien été transmises.<br />
2408 jpm 1053 
				Elles sont désormais consultables à travers les différents outils de visualisation
1054 
				du réseau Tela Botanica (<a href="http://www.tela-botanica.org/site:botanique">eFlore</a>,
1055 
				<a href="http://www.tela-botanica.org/appli:pictoflora">galeries d'images</a>,
1560 jpm 1056 
				<a href="http://www.tela-botanica.org/appli:identiplante">identiplante</a>,
1057 
				<a href="http://www.tela-botanica.org/widget:cel:cartoPoint">cartographie (widget)</a>...)<br />
2408 jpm 1058 
				Si vous souhaitez les modifier ou les supprimer, vous pouvez les retrouver en vous
1560 jpm 1059 
				connectant à votre <a href="http://www.tela-botanica.org/appli:cel">Carnet en ligne</a>.<br />
2408 jpm 1060 
				N'oubliez pas qu'il est nécessaire de
1560 jpm 1061 
				<a href="http://www.tela-botanica.org/page:inscription">s'inscrire à Tela Botanica</a>
1062 
				au préalable, si ce n'est pas déjà fait.
1063 
			</p>
1064 
		</div>
1065 
		<div id="tpl-transmission-ko" style="display:none;">
1066 
			<p class="msg">
2118 aurelien 1067 
				Une erreur est survenue lors de la transmission d'une observation (indiquée en rouge).<br />
2408 jpm 1068 
				Vous pouvez tenter de la retransmettre en cliquant à nouveau sur le bouton transmettre ou bien la supprimer
2118 aurelien 1069 
				et transmettre les suivantes.<br />
1070 
				Néanmoins, les observations n'apparaissant plus dans la liste "observations à transmettre", ont bien été transmises lors de votre précédente tentative. <br />
2408 jpm 1071 
				Si le problème persiste, vous pouvez signaler le dysfonctionnement sur
2601 mathias 1072 
				<a href="<?= $url_remarques ?>?service=cel&pageSource=<?php echo urlencode('http://'.$_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF'].'?'.$_SERVER['QUERY_STRING']); ?>"
2118 aurelien 1073 
							  target="_blank"
1074 
							  onclick="javascript:window.open(this.getAttribute('href'), 'Tela Botanica - Remarques', config='height=700, width=640, scrollbars=yes, resizable=yes'); return false;">
1075 
							  le formulaire de signalement d'erreurs</a>.
1560 jpm 1076 
			</p>
1077 
		</div>
1526 jpm 1078 
	</body>
1079 
</html>