Subversion Repositories eFlore/Applications.cel

Rev

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

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