Subversion Repositories eFlore/Applications.cel

Rev

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

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