Subversion Repositories eFlore/Applications.cel

Rev

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