Subversion Repositories eFlore/Applications.cel

Rev

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