Subversion Repositories eFlore/Applications.cel

Rev

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