Subversion Repositories eFlore/Applications.cel

Rev

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