Subversion Repositories eFlore/Applications.cel

Rev

Go to most recent revision | Details | Last modification | View Log | RSS feed

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