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