Subversion Repositories eFlore/Applications.cel

Rev

Rev 2945 | Go to most recent revision | Details | Compare with Previous | Last modification | View Log | RSS feed

Rev Author Line No. Line
2943 delphine 1
<!DOCTYPE html>
2
<html lang="fr">
3
	<head>
4
		<title>Les arbres remarquables de Grenoble-Alpes Métropole</title>
5
 
6
		<meta charset="utf-8">
7
 
8
		<meta name="revisit-after" content="15 days" />
9
		<meta name="robots" content="index,follow" />
10
		<meta name="author" content="Delphine CAUQUIL" />
11
		<meta name="keywords" content="Arbres remarquables, projet, saisie, observation, Frapna CEL" />
12
		<meta name="description" content="Projet Arbres remarquables de Grenoble-Alpes Métropole - Widget de saisie simplifiée pour le CEL" />
13
 
14
		<!-- Viewport Mobile -->
15
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
16
 
17
		<!-- Favicones -->
18
		<link rel="shortcut icon" type="image/x-icon" href="<?=$url_base?>modules/saisie/squelettes/arbres-remarquables/img/favicon.ico" />
19
 
20
		<!-- Javascript : bibliothèques -->
21
		<!-- Google Map v3 -->
22
		<!--<script type="text/javascript" src="https://getfirebug.com/firebug-lite.js"></script>-->
23
		<script type="text/javascript" src="http://maps.google.com/maps/api/js?language=fr&amp;region=FR"></script>
24
		<!-- Proj4js -->
25
		<script type="text/javascript" src="http://resources.tela-botanica.org/proj4js/2.2.1/proj4.js"></script>
26
 
27
		<!-- Jquery -->
28
		<script src="http://resources.tela-botanica.org/jquery/1.11.1/jquery-1.11.1.min.js"></script>
29
		<!-- Jquery UI : nécessaire pour le mini-calendrier et l'auto-complétion -->
30
		<script src="http://resources.tela-botanica.org/jquery/jquery-ui/1.11.0/js/jquery-ui.min.js"></script>
31
		<script src="http://resources.tela-botanica.org/jquery/jquery-ui/1.11.0/js/datepicker-fr.js"></script>
32
		<!-- Jquery Plugins -->
33
		<!-- Jquery Validate : nécessaire pour la validation des formulaires -->
34
		<script src="http://resources.tela-botanica.org/jquery/validate/1.13.0/jquery.validate.min.js"></script>
35
		<script src="http://resources.tela-botanica.org/jquery/validate/1.13.0/localization/messages_fr.js"></script>
36
		<!-- Jquery Form :nécessaire pour l'upload des images -->
37
		<script src="http://resources.tela-botanica.org/jquery/form/3.51/jquery.form.min.js"></script>
38
		<!-- Bootstrap -->
39
		<script src="http://resources.tela-botanica.org/bootstrap/3.2.0/js/bootstrap.min.js"></script>
40
 
41
		<!-- Javascript : appli saisie -->
42
		<script type="text/javascript" src="<?=$url_base?>modules/saisie/squelettes/defaut/js/WidgetSaisie.js"></script>
43
		<script src="<?=$url_base?>modules/saisie/squelettes/arbres-remarquables/js/WidgetSaisieArbresRemarquables.js"></script>
44
		<script src="<?=$url_base?>saisie?projet=arbres-remarquables&amp;service=taxons" type="text/javascript"></script>
45
		<script>
46
		//<![CDATA[
47
           $(document).ready(function() {
48
				// OMG un modèle objet !!
49
				var widget = new WidgetSaisieArbresRemarquables();
50
 
51
				// la variable "taxons" chargée par "service=taxons" ci-dessus n'est pas accessible dans le contexte objet
52
				widget.taxons = taxons;
53
 
54
				// La présence du parametre 'debug' dans l'URL enclenche le débogage
55
				widget.debug = <?=isset($_GET['debug']) ? 'true' : 'false'?>;
56
				// La présence du parametre 'html5' dans l'URL enclenche les fonctions avancées HTML5
57
				widget.html5 = <?=isset($_GET['html5']) ? 'true' : 'false'?>;
58
				// Mot-clé du widget/projet
59
				widget.tagProjet = "WidgetSaisie,ArbresRemarquables";
60
				// Mots-clés à ajouter aux images
61
				widget.tagImg = "<?=isset($_GET['tag-img']) ? $_GET['tag-img'] : ''?>";
62
				widget.separationTagImg = "<?= isset($_GET['motcle']) && isset($_GET['tag-img']) ? ',' : '' ?>";
63
				widget.tagImg = <?=isset($_GET['motcle']) ? "'".$_GET['motcle']."' + widget.separationTagImg + widget.tagImg" : 'widget.tagImg' ?>;
64
				// Mots-clés à ajouter aux observations
65
				widget.tagObs = "<?=isset($_GET['tag-obs']) ? $_GET['tag-obs'] : ''?>";
66
				widget.separationTagObs = "<?= isset($_GET['projet']) && isset($_GET['tag-obs']) ? ',' : '' ?>";
67
				widget.tagObs = <?=isset($_GET['projet']) ? "'".$_GET['projet']."' + widget.separationTagObs + widget.tagObs" : 'widget.tagObs' ?>;
68
				// Précharger le formulaire avec les infos d'une observation
69
				widget.obsId = "<?=isset($_GET['id-obs']) ? $_GET['id-obs'] : ''?>";
70
				// URL du web service réalisant l'insertion des données dans la base du CEL.
71
				widget.serviceSaisieUrl = "<?=$url_ws_saisie?>";
72
				// URL du web service permettant de récupérer les infos d'une observation du CEL.
73
				widget.serviceObsUrl = "<?=$url_ws_obs?>";
74
				// Code du référentiel utilisé pour les nom scientifiques.
75
				widget.nomSciReferentiel = "<?=$ns_referentiel?>";
76
				// Indication de la présence d'une espèce imposée
77
				widget.especeImposee = "<?=$espece_imposee; ?>";
78
				// Tableau d'informations sur l'espèce imposée
79
				widget.infosEspeceImposee = <?=$infos_espece; ?>;
80
				// Nombre d'élément dans les listes d'auto-complétion
81
				widget.autocompletionElementsNbre = 20;
82
 
83
				// Squelette d'URL du web service permettant l'auto-complétion des noms scientifiques
84
				widget.serviceAutocompletionNomSciUrlTpl = "<?=$url_ws_autocompletion_ns_tpl?>?"+
85
					"masque={masque}&"+
86
					"recherche=etendue&"+
87
					"retour.champs=famille,nom_retenu,nom_retenu_complet,num_taxonomique,nom_retenu.id&"+
88
					"retour.tri=alpharet&"+ // tri "à la CeL"
89
					"ns.structure=au"+"&"+
90
					"navigation.limite=" + widget.autocompletionElementsNbre;
91
				// Nombre d'observations max autorisé avant transmission
92
				widget.obsMaxNbre = 10;
93
				// Durée d'affichage en milliseconde des messages d'informations
94
				widget.dureeMessage = 15000;
95
				// Squelette d'URL du web service de l'annuaire.
96
				widget.serviceAnnuaireIdUrl = "<?=$url_ws_annuaire?>";
97
				// Squelette d'URL du web service d'eFlore fournissant les noms de communes.
98
				widget.serviceNomCommuneUrl = "http://api.tela-botanica.org/service:eflore:0.1/osm/nom-commune?lon={lon}&lat={lat}";
99
				// Squelette d'URL du web service d'eFlore fournissant les noms de communes hors de France (localisation approximative).
100
				widget.serviceNomCommuneUrlAlt = "http://api.tela-botanica.org/service:eflore:0.1/wikipedia/nom-commune?lon={lon}&lat={lat}&nbre=1";
101
				// Squelette d'URL du web service d'eFlore fournissant l'altitude
102
				widget.serviceAltitudeUrl = "http://api.tela-botanica.org/service:eflore:0.1/nasa-srtm/altitude?lon={lon}&lat={lat}";
103
				// URL du marqueur à utiliser dans la carte Google Map
104
				widget.googleMapMarqueurUrl = "<?=$url_base?>modules/saisie/squelettes/arbres-remarquables/img/marqueurs/epingle.png";
105
				// URL de l'icône du chargement en cours
106
				widget.chargementIconeUrl = "<?=$url_base?>modules/saisie/squelettes/arbres-remarquables/img/icones/chargement.gif";
107
				// URL de l'icône du chargement en cours d'une image
108
				widget.chargementImageIconeUrl = "<?=$url_base?>modules/saisie/squelettes/arbres-remarquables/img/icones/chargement-image.gif";
109
				// URL de l'icône du calendrier
110
				widget.calendrierIconeUrl = "<?=$url_base?>modules/saisie/squelettes/arbres-remarquables/img/icones/calendrier.png";
111
				// URL de l'icône pour une photo manquante
112
				widget.pasDePhotoIconeUrl = "<?=$url_base?>modules/saisie/squelettes/arbres-remarquables/img/icones/pasdephoto.png";
113
 
114
				// Initialisation du bousin
115
				widget.init();
116
			});
117
		//]]>
118
		</script>
119
 
120
		<!-- CSS -->
121
		<link rel="stylesheet" href="http://resources.tela-botanica.org/jquery/jquery-ui/1.11.0/css/themes/smoothness/jquery-ui.min.css" />
122
		<link rel="stylesheet" href="http://resources.tela-botanica.org/jquery/jquery-ui/1.11.0/css/themes/smoothness/theme.css" />
123
		<link rel="stylesheet" href="http://resources.tela-botanica.org/bootstrap/3.2.0/css/bootstrap.min.css" />
124
		<link rel="stylesheet" href="http://resources.tela-botanica.org/bootstrap/3.2.0/css/bootstrap-theme.min.css" />
125
		<link rel="stylesheet" href="<?=$url_base?>modules/saisie/squelettes/arbres-remarquables/css/<?=isset($_GET['style']) ? $_GET['style'] : 'arbres-remarquables'?>.css" />
126
 
127
		<!--  Google Analytics -->
128
		<?php if($prod): ?>
129
			<?php include "analytics.html"; ?>
130
		<?php endif; ?>
131
	</head>
132
 
133
	<body data-spy="scroll">
134
		<div class="container">
135
			<div class="page-header">
136
				<h1>
137
					<img id="logo-titre" src="<?=$url_base?>/modules/saisie/squelettes/arbres-remarquables/img/logos/frapna.jpg" alt="Frapna" />
138
					 Les arbres remarquables de Grenoble-Alpes Métropole
139
				</h1>
140
			</div>
141
			<div class="row">
142
				<div class="col-md-6">
143
					<div id="intro" class="well well-lg">
144
						<a class="fermer" data-toggle="collapse" data-target="#intro-txt">
145
							<h3 class="titre">
146
								Le Projet «&nbsp;Inventaire des arbres remarquables&nbsp;»
147
								<span class="glyphicon glyphicon-plus-sign"></span>
148
							</h3>
149
						</a>
150
						<div id="intro-txt" class="collapse in">
151
							<p>
152
								Les <a data-toggle="modal" data-target="#projet-description">arbres remarquables</a>,
153
								sont pour nous, humains, à la croisée de la nature et de la culture.
154
								De la nature ils sont une émanation puissante et intemporelle ; leur présence nous rend
155
								palpable le rythme des saisons, des années et nous ouvre, jusque dans les villes,
156
								une fenêtre sur le sauvage. Leur longévité, qui peut traverser les siècles et à coté de laquelle
157
								nos vies humaines paraissent bien modestes, jalonne notre histoire comme les tilleuls de Sully
158
								ou certains genévriers millénaires.
159
							</p>
160
							<p>
161
								La <a href="http://www.frapna-38.org/" target="_blank">FRAPNA</a> propose ce premier
162
								inventaire participatif sur les communes de l'agglomération grenobloise avec le soutien de la Métro.
163
								Il a deux objectifs principaux :<br />
164
								- la <strong>sensibilisation</strong> à ce patrimoine irremplaçable encore trop souvent ignoré ou méconnu,<br />
165
								- la <strong>connaissance</strong>, car leur identification est indispensable pour qu'ils puissent être préservés.
166
							</p>
167
							<p>
168
								Participez à cet inventaire en recensant les arbres remarquables sur tout le territoire de la
169
								Métro à l'aide du formulaire de saisie ci-dessous.
170
							</p>
171
						</div>
172
					</div>
173
				</div>
174
 
175
				<div class="col-md-6">
176
					<div id="aide" class="well well-lg">
177
						<a class="fermer" data-toggle="collapse" data-target="#aide-txt">
178
							<h3 class="titre">
179
								Aide
180
								<span class="glyphicon glyphicon-plus-sign"></span>
181
							</h3>
182
						</a>
183
						<div id="aide-txt" class="collapse in">
184
							<p>
185
								Cet outil vous permet de partager simplement vos observations avec
186
								<a href="http://www.frapna-38.org/" target="_blank">Frapna</a> et le
187
								<a href="http://www.tela-botanica.org/site:accueil">réseau Tela Botanica</a>
188
								(sous <a href="http://www.tela-botanica.org/page:licence?langue=fr">licence CC-BY-SA</a>).
189
								Identifiez-vous bien pour ensuite retrouver et gérer vos données dans
190
								<a href="http://www.tela-botanica.org/appli:cel">votre Carnet en ligne</a>.
191
								Créez jusqu'à 10 observations (avec 10Mo max d'images) puis partagez-les avec le bouton 'transmettre'.
192
								Elles apparaissent immédiatement sur les
193
								<a href="http://www.tela-botanica.org/site:botanique">cartes et galeries photos </a> du site.
194
							</p>
195
							<p class="discretion">
196
								Pour toute question ou remarque,
197
								<a href="<?= $url_remarques ?>?service=cel&pageSource=<?php echo urlencode('http://'.$_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF'].'?'.$_SERVER['QUERY_STRING']); ?>"
198
									target="_blank"
199
									onclick="javascript:window.open(this.getAttribute('href'), 'Tela Botanica - Remarques', config='height=700, width=640, scrollbars=yes, resizable=yes'); return false;">
200
									contactez-nous</a>
201
							</p>
202
							<p class="discretion">
203
								Une fois familiarisé avec l'interface vous pouvez cliquer sur le bouton suivant pour désactiver l'aide&nbsp;:
204
								<button id="btn-aide" class="btn btn-xs btn-success">
205
									<span class="glyphicon glyphicon-question-sign icon-white"></span>
206
									<span id="btn-aide-txt">Désactiver l'aide</span>
207
								</button>
208
							</p>
209
						</div>
210
					</div>
211
				</div>
212
			</div>
213
 
214
 
215
 
216
 
217
 
218
			<div class="well well-lg">
219
				<h2>Observateur</h2>
220
				<form id="form-observateur" role="form" autocomplete="on">
221
					<div class="row">
222
						<div class="col-md-6 form-group has-tooltip" data-placement="right"
223
							title="Saisissez le courriel avec lequel vous êtes inscrit à Tela Botanica.
224
								Si vous n'êtes pas inscrit ce n'est pas grave, vous pourrez le faire
225
								ultérieurement. Des informations complémentaires vont vous être
226
								demandées : prénom et nom.">
227
							<label for="courriel"  title="Veuillez saisir votre adresse courriel.">
228
								<strong class="obligatoire">*</strong>
229
								Courriel
230
							</label>
231
							<div class="input-group">
232
								<span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span>
233
								<input id="courriel" name="courriel" class="form-control" type="text"/>
234
								<input id="id_utilisateur" name="id_utilisateur" type="hidden"/>
235
							</div>
236
						</div>
237
						<div id="zone-courriel-confirmation" class="col-md-6 form-group has-feedback hidden">
238
							<label for="courriel_confirmation" title="Veuillez confirmer le courriel.">
239
								<strong class="obligatoire">*</strong> Courriel (confirmation)
240
							</label>
241
							<div class="input-group">
242
								<span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span>
243
								<input id="courriel_confirmation" name="courriel_confirmation" class="form-control" type="text"/>
244
							</div>
245
						</div>
246
					</div>
247
					<div id="zone-prenom-nom" class="row hidden">
248
						<div class="col-md-6 form-group">
249
							<label for="prenom">Prénom</label>
250
							<div class="input-group">
251
								<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
252
								<input id="prenom" name="prenom" class="form-control" type="text"/>
253
							</div>
254
						</div>
255
						<div class="col-md-6 form-group">
256
							<label for="nom">Nom</label>
257
							<div class="input-group">
258
								<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
259
								<input id="nom" name="nom" class="form-control" type="text"/>
260
							</div>
261
						</div>
262
					</div>
263
				</form>
264
			</div>
265
			<!-- Messages d'erreur du formulaire-->
266
			<div class="row">
267
				<div class="zone-alerte col-md-6 col-md-offset-3">
268
					<div id="dialogue-bloquer-copier-coller" class="alert alert-info alert-block" style="display:none;">
269
						<button type="button" class="close"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
270
						<h4 class="alert-heading">Information : copier/coller</h4>
271
						<p>
272
							Merci de ne pas copier/coller votre courriel.<br/>
273
							La double saisie permet de vérifier l'absence d'erreurs.
274
						</p>
275
					</div>
276
					<div id="dialogue-courriel-introuvable" class="alert alert-info alert-block" style="display:none;">
277
						<button type="button" class="close"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
278
						<h4 class="alert-heading">Information : courriel introuvable</h4>
279
						<p>
280
							Vous n'êtes pas inscrit à Tela Botanica avec ce courriel.<br/>
281
							Veuillez compléter les champs supplémentaires ou indiquer votre courriel d'inscription.<br/>
282
							Pour retrouver vos observations dans le <a href="http://www.tela-botanica.org/appli:cel">Carnet en ligne</a>,
283
							il sera nécessaire de <a href="http://www.tela-botanica.org/page:inscription">vous inscrire à Tela Botanica</a>.
284
						</p>
285
					<div id="dialogue-google-map" class="alert alert-info alert-block" style="display: none;">
286
						<button type="button" class="close"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
287
						<h4 class="alert-heading">Information sur Google Maps</h4>
288
						<div class="contenu"></div>
289
					</div>
290
				</div>
291
			</div>
292
 
293
 
294
 
295
 
296
 
297
 
298
			<div class="well well-lg">
299
				<div class="row">
300
					<div class="col-md-12">
301
						<h2>Lieu du relevé</h2>
302
					</div>
303
				</div>
304
				<div class="row">
305
					<div class="col-md-6">
306
						<div class="row">
307
							<div class="col-md-3">
308
								<strong title="Veuillez localiser l'observation">Géolocalisation</strong>
309
							</div>
310
							<div class="col-md-9 text-right">
311
								<form id="form-carte-recherche" class="form-horizontal" role="form">
312
									<div class="form-group">
313
										<label for="carte-recherche" class="sr-only">Rechercher</label>
314
										<div class="col-md-12">
315
											<div class="input-group">
316
												<input id="carte-recherche" class="form-control has-tooltip" type="search" value=""
317
														title="Permet de centrer la carte sur le lieu recherché."
318
														placeholder="Centrer la carte sur un lieu..."/>
319
												<span class="input-group-addon"><span class="glyphicon glyphicon-search"></span></span>
320
											</div>
321
										</div>
322
									</div>
323
								</form>
324
							</div>
325
						</div>
326
						<div class="row">
327
							<div class="col-md-12">
328
								<div id="map-canvas" class="has-tooltip"
329
									title="Vous pouvez cliquer sur la carte pour déplacer le marqueur
330
										représentant votre station ou bien le glisser-déposer sur
331
										le lieu souhaité."></div>
332
							</div>
333
						</div>
334
						<div class="row">
335
							<div id="info-altitude" class="col-md-5">
336
								<span>Altitude : </span>
337
								<span id="marqueur-altitude"><span id="altitude"></span> m</span>
338
							</div>
339
 
340
							<div id="info-commune" class="col-md-7">
341
								<span>Commune : </span>
342
								<span id="marqueur-commune">
343
									<span id="commune-nom" class="commune-info"></span>
344
									(<span id="commune-code-insee" class="commune-info has-tooltip"
345
										title="Code INSEE de la commune"></span>)
346
								</span>
347
							</div>
348
						</div>
349
					</div>
350
					<div class="col-md-6">
351
						<form id="form-station" class="form-horizontal" role="form" autocomplete="on">
352
							<div class="form-group has-tooltip"
353
									title="Vous pouvez cliquer sur l'icône de calendrier pour
354
										sélectionner une date dans un calendrier.">
355
								<label for="date" class=" col-sm-4 control-label"
356
									   title="Veuillez indiquer la date du relevé au format jj/mm/aaaa">
357
									<strong class="obligatoire">*</strong>
358
									Date du relevé
359
								</label>
360
								<div class="col-sm-8">
361
									<div class="input-group">
362
										<span id="date-icone" class="input-group-addon add-on"></span>
363
										<input id="date" name="date" class="form-control" type="text" placeholder="jj/mm/aaaa" />
364
									</div>
365
								</div>
366
							</div>
367
 
368
 
369
							<div class="row">
370
								<div class="col-md-12">
371
									<button class="afficher-coord btn-coord btn btn-default"
372
											data-toggle-text="Cacher les coordonnées (WGS 84 et Lambert 93)">
373
										Afficher les coordonnées (WGS 84 et Lambert 93)
374
									</button>
375
									<div id="coordonnees-geo" class="well hidden">
376
										<div class="row">
377
											<div class="col-md-4">
378
												<div id="coord-lat" class="form-group form-group-sm">
379
													<label for="latitude" class="col-sm-4 control-label">Latitude</label>
380
													<div class="col-sm-8">
381
														<input id="latitude" class="form-control" name="latitude" type="text"
382
															title="Latitude (WGS 84)" value=""/>
383
													</div>
384
												</div>
385
											</div>
386
											<div class="col-md-5">
387
												<div id="coord-lng" class="form-group form-group-sm">
388
													<label for="latitude" class="col-sm-4 control-label">Longitude</label>
389
													<div class="col-sm-8">
390
														<input id="longitude" class="form-control" name="longitude" type="text"
391
															title="Longitude (WGS 84)" value=""/>
392
													</div>
393
												</div>
394
											</div>
395
											<div class="col-md-2">
396
												<div id="coord-lng" class="form-group form-group-sm">
397
													<input type="button" id="geolocaliser"
398
														class="btn btn-default btn-sm has-tooltip"
399
														title="Centre la carte sur les coordonnées de latitude et longitude saisies."
400
														value="Voir sur la carte"/>
401
												</div>
402
											</div>
403
										</div>
404
 
405
										<div class="row">
406
											<div class="col-md-6">
407
												<div id="coord-l93-x" class="form-group">
408
													<label for="l93-x" class="col-sm-6 control-label">X Lambert 93</label>
409
													<div class="col-sm-5">
410
														<input id="l93-x" disabled type="text" class="input-sm form-control obs-chp-etendu"
411
																name="coordonneeLambert93X"
412
																data-label="Lambert 93 X"
413
																value=""/>
414
													</div>
415
												</div>
416
											</div>
417
											<div class="col-md-6">
418
												<div id="coord-l93-y" class="form-group">
419
													<label for="l93-y" class="col-sm-6 control-label">Y Lambert 93</label>
420
													<div class="col-sm-5">
421
														<input id="l93-y" disabled type="text" class="input-sm form-control obs-chp-etendu"
422
																name="coordonneeLambert93Y"
423
																data-label="Lambert 93 Y"
424
																value=""/>
425
													</div>
426
												</div>
427
											</div>
428
										</div>
429
									</div>
430
								</div>
431
							</div>
432
						</form>
433
					</div>
434
				</div>
435
 
436
				<div class="row">
437
					<div class="col-md-6">
2947 mathias 438
						<form id="form-situation" class="form-horizontal" role="form" autocomplete="on">
2943 delphine 439
							<div class="form-group has-tooltip"
440
									title="Indiquez la situation de l'arbre remarquable.">
2947 mathias 441
								<label for="situation" class="col-sm-4 control-label">
2943 delphine 442
									<strong class="obligatoire">*</strong>
443
									Contexte, situation :
444
								</label>
445
								<div id="situation-controls" class="col-sm-8">
446
									<div class="btn-group dropdown">
447
										<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
448
											Sélectionner une ou plusieurs situations
449
											<span class="caret"></span>
450
										</button>
451
 
452
										<ul class="dropdown-menu col-sm-12" role="menu" aria-labelledby="dLabel">
453
											<li class="checkbox" role="presentation">
454
												<a role="menuitem">
455
													<label>
2945 delphine 456
														<input name="situation[]" class="cb-situation obs-chp-etendu" type="checkbox" value="Arbre isolé"/>
2943 delphine 457
														Arbre isolé
458
													</label>
459
												</a>
460
											</li>
461
											<li class="checkbox" role="presentation">
462
												<a role="menuitem">
463
													<label>
2945 delphine 464
														<input name="situation[]" class="cb-situation obs-chp-etendu" type="checkbox" value="Arbre dans l'espace public"/>
2943 delphine 465
														Arbre dans l'espace public
466
													</label>
467
												</a>
468
											</li>
469
											<li class="checkbox" role="presentation">
470
												<a role="menuitem">
471
													<label>
2945 delphine 472
														<input name="situation[]" class="cb-situation obs-chp-etendu" type="checkbox" value="Arbre dans un jardin privé"/>
2943 delphine 473
														Arbre dans un jardin privé
474
													</label>
475
												</a>
476
											</li>
477
											<li class="checkbox" role="presentation">
478
												<a role="menuitem">
479
													<label>
2945 delphine 480
														<input name="situation[]" class="cb-situation obs-chp-etendu" type="checkbox" value="Arbre en forêt"/>
2943 delphine 481
														Arbre en forêt
482
													</label>
483
												</a>
484
											</li>
485
											<li class="checkbox" role="presentation">
486
												<a role="menuitem">
487
													<label>
2945 delphine 488
														<input name="situation[]" class="cb-situation obs-chp-etendu" type="checkbox" value="Arbre en espace agricole (champ, haie...)"/>
2943 delphine 489
														Arbre en espace agricole (champ, haie...)
490
													</label>
491
												</a>
492
											</li>
493
											<li class="checkbox" role="presentation">
494
												<a role="menuitem">
495
													<label>
2945 delphine 496
														<input name="situation[]" class="cb-situation obs-chp-etendu" type="checkbox" value="Arbre en falaise, terrain escarpé"/>
2943 delphine 497
														Arbre en falaise, terrain escarpé
498
													</label>
499
												</a>
500
											</li>
501
											<li class="checkbox" role="presentation">
502
												<a role="menuitem">
503
													<label>
2945 delphine 504
														<input id="situation-autre" name="situation[]" class="cb-situation obs-chp-etendu" type="checkbox" value="Autre"/>
2943 delphine 505
														Autre
506
													</label>
507
												</a>
508
											</li>
509
										</ul>
510
									</div>
511
								</div>
512
							</div>
513
 
514
							<div id="autre-situation-id" class="form-group has-tooltip hidden" >
515
								<label for="autre-situation" class="col-sm-4 control-label">
516
									Autre :
517
								</label>
518
								<div class="col-sm-4">
519
									<input id="autre-situation" type="text" class="form-control obs-chp-etendu"
2945 delphine 520
										name="arbreRemarquableSituationAutre"
2944 mathias 521
										data-label=""
2943 delphine 522
										value="" />
523
								</div>
524
							</div>
2947 mathias 525
						</form>
526
						<form id="form-obs" class="form-horizontal" role="form" autocomplete="on">
527
							<h2>Données biologiques</h2>
528
 
529
							<input id="referentiel" type="hidden" value="bdtfx" />
530
							<div id="taxon-liste-input-groupe" class="form-group has-tooltip"
531
								title="Sélectionnez une espèce dans la liste déroulante par son nom latin
532
								ou commun. Si une espèce est absente, sélectionnez «Autre espèce»." >
533
								<label for="taxon-liste" class="col-sm-4 control-label" title="Choisissez l'espèce rencontrée.">
534
									<strong class="obligatoire">*</strong>
535
									Espèce
536
								</label>
537
								<div class="col-sm-8">
538
									<div class="input-group">
539
										<select id="taxon-liste" name="taxon-liste" class="form-control">
540
											<option value="" selected>Sélectionner une espèce</option>
2943 delphine 541
 
2947 mathias 542
											<optgroup id="taxon-liste-noms">
543
												<?php foreach ($taxons['sci-et-fr'] as $taxon) :?>
544
													<option
545
														class="<?=$taxon['nom_type'] ?>"
546
														value="<?=$taxon['num_nom'] ?>"
547
														title="<?=$taxon['nom_title'] ?>"
548
														data-nom-a-sauver="<?=$taxon['nom_a_sauver'] ?>"
549
														>
550
														<?=$taxon['nom_a_afficher']?>
551
													</option>
552
												<?php endforeach; ?>
553
											</optgroup>
554
											<optgroup id="taxon-liste-special">
555
												<?php foreach ($taxons['speciaux'] as $taxon) :?>
556
													<option
557
														class="<?=$taxon['nom_type'] ?>"
558
														value="<?=$taxon['num_nom'] ?>"
559
														title="<?=$taxon['nom_title'] ?>"
560
														data-nom-a-sauver="<?=$taxon['nom_a_sauver'] ?>"
561
														>
562
														<?=$taxon['nom_a_afficher']?>
563
													</option>
564
												<?php endforeach; ?>
565
												<option value="?">Autre espèce</option>
566
											</optgroup>
567
										</select>
568
									</div>
569
								</div>
570
							</div>
2943 delphine 571
 
2947 mathias 572
							<div id="taxon-input-groupe" class="form-group has-tooltip hidden"
573
								title="Vous pouvez saisir ici un nom absent du référentiel (Ex. : 'fleur violette' ou 'Viola sp.1')." >
574
								<label for="taxon" class="col-sm-4 control-label" title="Choisissez l'espèce rencontrée.">
575
									<strong class="obligatoire">*</strong>
576
									Autre espèce
577
								</label>
578
								<div class="col-sm-8">
579
									<input id="taxon" name="taxon" type="text" class="form-control"
580
										placeholder="Autre espèce (ou indication sur la plante)"
581
										value="<?= $nom_sci_espece_defaut; ?>" />
582
								</div>
583
							</div>
584
 
2943 delphine 585
							<div class="form-group has-tooltip"
2947 mathias 586
									title="Êtes-vous sûre de l’identification de l’espèce ?">
587
								<label for="certitude" class="col-sm-4 control-label">
588
									<strong class="obligatoire">*</strong>
589
									Identification de l'espèce
590
								</label>
591
								<div class="col-sm-8">
592
									<select id="certitude" class="form-control" name="certitude">
593
										<option selected value="">Sélectionner une certitude</option>
594
										<option value="Certaine">Oui</option>
595
										<option value="Douteuse">À confirmer</option>
596
									</select>
597
								</div>
598
							</div>
599
 
600
 
601
							<div class="form-group has-tooltip"
2943 delphine 602
									title="Indiquez la classe de circonférence de l'arbre à 1,30m du sol.">
603
								<label for="circonference" class="col-sm-4 control-label">
604
									<strong class="obligatoire">*</strong>
605
									Circonférence
606
								</label>
607
								<div class="col-sm-8">
608
									<select id="circonference" class="form-control obs-chp-etendu"
2945 delphine 609
											name="arbreRemarquableClasseCirconference"
2943 delphine 610
											data-label="Classe de circonférence à 1,30 m du sol (en m)">
611
										<option selected value="">Sélectionner la circonférence (à 1,30m du sol)</option>
2945 delphine 612
										<option value="Inférieure à 1 mètre">Inférieure à 1 mètre</option>
613
										<option value="Entre 1 et 2 mètres">Entre 1 et 2 mètres</option>
614
										<option value="Entre 2 et 3 mètres">Entre 2 et 3 mètres</option>
615
										<option value="Supérieure à 3m">Supérieure à 3m</option>
616
										<option value="Je ne sais pas">Je ne sais pas</option>
2943 delphine 617
									</select>
618
								</div>
619
							</div>
620
 
621
							<div class="form-group has-tooltip"
622
									title="Indiquez la hauteur.">
623
								<label for="hauteur" class="col-sm-4 control-label">
624
									Hauteur (m)
625
								</label>
626
								<div class="col-sm-8 input-group" id="hauteur">
627
									<span class="col-sm-4">
2945 delphine 628
										<input id="hauteurNbr" type="number" step="0.01" min="0" class="form-control obs-chp-etendu"
2943 delphine 629
											name="arbreRemarquableHauteur"
630
											data-label="Hauteur de l'arbre"
631
											value="" />
632
									</span>
633
									<div class="col-sm-8">
634
										<select id="hauteurPrec" class="form-control obs-chp-etendu "
635
												name="arbreRemarquableHauteurPrecision">
636
											<option selected value="">Préciser le mode d'évaluation</option>
637
											<option value="Évaluée">Évaluée</option>
638
											<option value="Mesurée">Mesurée</option>
639
										</select>
640
									</div>
641
								</div>
642
							</div>
643
 
644
							<div class="form-group has-tooltip"
645
									title="Indiquez l'âge.">
646
								<label for="age" class="col-sm-4 control-label">
647
									Âge
648
								</label>
649
								<div class="col-sm-8">
650
									<div class="input-group">
651
										<select id="age" class="form-control obs-chp-etendu col-sm-6"
652
												name="arbreRemarquableAge"
653
												data-label="Age">
654
											<option selected value="">Sélectionner l'âge</option>
2945 delphine 655
											<option value="Très vieux">Très vieux</option>
2943 delphine 656
											<option value="Vieux">Vieux</option>
657
											<option value="Adulte">Adulte</option>
658
										</select>
659
										<div class="input-group-btn">
660
											<button class="btn btn-default" type="button" data-toggle="modal" data-target="#age-description">
661
												<span class="glyphicon glyphicon-info-sign"></span> Aide
662
											</button>
663
										</div>
664
									</div>
665
								</div>
666
							</div>
667
 
668
							<div class="form-group has-tooltip" title="Indiquez la santé de l'arbre.">
669
								<label for="sante" class="col-sm-4 control-label">
670
									<strong class="obligatoire">*</strong>
671
									Santé
672
								</label>
673
								<div class="col-sm-8">
674
									<div class="input-group">
2945 delphine 675
										<select id="sante" class="form-control obs-chp-etendu col-sm-6"
2943 delphine 676
												name="arbreRemarquableSante"
677
												data-label="sante">
678
											<option selected value="">Sélectionner l'état de santé</option>
2945 delphine 679
											<option value="En très bonne santé">En très bonne santé</option>
680
											<option value="En bonne santé">En bonne santé</option>
681
											<option value="État moyen">État moyen</option>
682
											<option value="Fin de vie">Fin de vie</option>
2943 delphine 683
										</select>
684
										<div class="input-group-btn">
685
											<button class="btn btn-default" type="button" data-toggle="modal" data-target="#sante-description">
686
												<span class="glyphicon glyphicon-info-sign"></span> Aide
687
											</button>
688
										</div>
689
									</div>
690
								</div>
691
							</div>
692
 
693
							<div class="form-group has-tooltip"
694
									title="Indiquez si des cavités sont présentes sur l'arbre.">
695
								<label for="cavites" class="col-sm-4 control-label">
696
									<strong class="obligatoire">*</strong>
697
									Cavités
698
								</label>
699
								<div class="col-sm-8">
700
									<select id="cavites" class="form-control obs-chp-etendu"
701
											name="arbreRemarquablePresenceCavite"
702
											data-label="Présence de cavités">
703
										<option selected value="">Sélectionner la présence de cavités</option>
2945 delphine 704
										<option value="Absence">Absence</option>
705
										<option value="Présence de cavités">Présence de cavités</option>
706
										<option value="Je ne sais pas">Je ne sais pas</option>
2943 delphine 707
									</select>
708
								</div>
709
							</div>
2945 delphine 710
							<div class="row">
711
								<div class="col-md-12">
712
									<h2 class="input-group">Notes<span class="input-group-btn">
713
											<button class="btn btn-default" type="button" data-toggle="modal" data-target="#notes-description">
714
												<span class="glyphicon glyphicon-info-sign"></span> Aide
715
											</button>
716
										</span></h2>
717
									<textarea id="notes" form="form-obs" class="form-control col-md-12" rows="7" name="notes"
718
										placeholder="Observation d’espèces de faune ou de flore (notamment épiphytes), ressources potentielles pour la biodiversité."></textarea>
719
								</div>
720
							</div>
2943 delphine 721
						</form>
2947 mathias 722
 
723
 
724
 
2943 delphine 725
					</div>
726
 
727
 
2945 delphine 728
 
729
 
2943 delphine 730
 
731
					<div class="col-md-6">
732
						<form id="form-criteres" class="form-horizontal" role="form" autocomplete="on">
733
							<h2>Critères ressentis</h2>
734
 
735
							<div class="form-group has-tooltip"
736
									title="Indiquez la situation de l'arbre remarquable.">
737
								<label for="esthetique[]" class="col-sm-4 control-label">
738
									Intérêt esthétique
739
								</label>
740
								<div id="situation-controls" class="col-sm-8">
741
									<div class="btn-group dropdown">
742
										<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
743
											Sélectionner le(s) type(s) d'intérêt esthétique
744
											<span class="caret"></span>
745
										</button>
746
 
747
										<ul class="dropdown-menu col-sm-12" role="menu" aria-labelledby="dLabel">
748
											<li class="checkbox" role="presentation">
749
												<a role="menuitem">
750
													<label>
2944 mathias 751
														<input name="esthetique[]" class="cb-esthetique" type="checkbox" value="Forme humaine ou animale"/>
2943 delphine 752
														Forme humaine ou animale
753
													</label>
754
												</a>
755
											</li>
756
											<li class="checkbox" role="presentation">
757
												<a role="menuitem">
758
													<label>
2944 mathias 759
														<input name="esthetique[]" class="cb-esthetique" type="checkbox" value="Arbre têtard"/>
2943 delphine 760
														Arbre têtard
761
													</label>
762
												</a>
763
											</li>
764
											<li class="checkbox" role="presentation">
765
												<a role="menuitem">
766
													<label>
2944 mathias 767
														<input name="esthetique[]" class="cb-esthetique" type="checkbox" value="Forme d’abri ou de voûte"/>
2943 delphine 768
														Forme d’abri ou de voûte
769
													</label>
770
												</a>
771
											</li>
772
											<li class="checkbox" role="presentation">
773
												<a role="menuitem">
774
													<label>
2944 mathias 775
														<input name="esthetique[]" class="cb-esthetique" type="checkbox" value="Aspect enlacé, soudé"/>
2943 delphine 776
														Aspect enlacé, soudé
777
													</label>
778
												</a>
779
											</li>
780
											<li class="checkbox" role="presentation">
781
												<a role="menuitem">
782
													<label>
2944 mathias 783
														<input name="esthetique[]" class="cb-esthetique" type="checkbox" value="Aspect tortueux, tourmenté"/>
2943 delphine 784
														Aspect tortueux, tourmenté
785
													</label>
786
												</a>
787
											</li>
788
											<li class="checkbox" role="presentation">
789
												<a role="menuitem">
790
													<label>
2944 mathias 791
														<input name="esthetique[]" class="cb-esthetique" type="checkbox" value="Port pleureur"/>
2943 delphine 792
														Port pleureur
793
													</label>
794
												</a>
795
											</li>
796
											<li class="checkbox" role="presentation">
797
												<a role="menuitem">
798
													<label>
2944 mathias 799
														<input id="esthetique-autre" name="esthetique[]" class="cb-esthetique" type="checkbox" value="Autre"/>
2943 delphine 800
														Autre
801
													</label>
802
												</a>
803
											</li>
804
										</ul>
805
									</div>
806
								</div>
807
							</div>
2944 mathias 808
 
809
							<div id="autre-esthetique-id" class="form-group has-tooltip hidden" >
810
								<label for="autre-esthetique" class="col-sm-4 control-label">
811
									Autre :
812
								</label>
813
								<div class="col-sm-4">
814
									<input id="autre-esthetique" type="text" class="form-control obs-chp-etendu"
815
										name="arbreRemarquableEsthetique"
816
										data-label=""
817
										value="" />
818
								</div>
819
							</div>
2943 delphine 820
 
821
 
822
							<div class="form-group">
823
								<label for="historique" class="col-sm-4 control-label">
824
								L’arbre a-t-il un intérêt historique / patrimonial ?
825
								</label>
826
									<textarea id="historique" class="col-sm-7" rows="2" name="arbreRemarquableHistorique"
827
										placeholder="Laisser vide si inconnu."></textarea>
828
 
829
							</div>
2944 mathias 830
 
2945 delphine 831
							<!-- Type remarquable -->
2944 mathias 832
							<div class="row-fluid">
2945 delphine 833
								<div class="form-group">
834
									<label class="col-sm-4 control-label pointer">
835
										<span class="has-tooltip pointer">
2944 mathias 836
											<strong class="obligatoire">*Pourquoi cet individu vous semble-t-il remarquable ?</strong>
2943 delphine 837
										</span>
838
									</label>
2945 delphine 839
									<div class="col-sm-8 control-group">
840
										<!-- Intérêt esthétique -->
841
										<div class="input-group">
842
											<label for="remarquable-esthetique">
843
												<input type="checkbox" id="remarquable-esthetique" class="cb-remarquable obs-chp-etendu" name="remarquable[]" value="esthétique" data-titre="esthétique" />
844
												Intérêt esthétique
845
												<input class="has-tooltip hidden" type="text" id="remarquable-esthetique-commentaire"
846
													placeholder="commentaire optionnel"
847
												/>
848
											</label>
849
										</div>
850
										<!-- Intérêt historique local -->
851
										<div class="input-group">
852
											<label for="remarquable-historique">
853
												<input type="checkbox" id="remarquable-historique" class="cb-remarquable obs-chp-etendu" name="remarquable[]" value="historique" data-titre="historique" />
854
												Intérêt historique local
855
												<input class="has-tooltip hidden" type="text" id="remarquable-historique-commentaire"
856
													placeholder="commentaire optionnel"
857
												/>
858
											</label>
859
										</div>
860
										<!-- Intérêt biologique, refuge de biodiversité -->
861
										<div class="input-group">
862
											<label for="remarquable-biologique">
863
												<input type="checkbox" id="remarquable-biologique" class="cb-remarquable obs-chp-etendu" name="remarquable[]" value="biologique" data-titre="biologique" />
864
												Intérêt biologique, refuge de biodiversité
865
												<input class="has-tooltip hidden" type="text" id="remarquable-biologique-commentaire"
866
													placeholder="commentaire optionnel"
867
												/>
868
											</label>
869
										</div>
870
										<!-- Grand âge -->
871
										<div class="input-group">
872
											<label for="remarquable-age">
873
												<input type="checkbox" id="remarquable-age" class="cb-remarquable obs-chp-etendu" name="remarquable[]" value="age" data-titre="age" />
874
												Grand âge
875
												<input class="has-tooltip hidden" type="text" id="remarquable-age-commentaire"
876
													placeholder="commentaire optionnel"
877
												/>
878
											</label>
879
										</div>
880
										<!-- Taille importante -->
881
										<div class="input-group">
882
											<label for="remarquable-taille">
883
												<input type="checkbox" id="remarquable-taille" class="cb-remarquable obs-chp-etendu" name="remarquable[]" value="taille" data-titre="taille" />
884
												Taille importante
885
												<input class="has-tooltip hidden" type="text" id="remarquable-taille-commentaire"
886
													placeholder="commentaire optionnel"
887
												/>
888
											</label>
889
										</div>
890
										<!-- Autre -->
891
										<div class="input-group">
892
											<label for="remarquable-autre">
893
												<input type="checkbox" id="remarquable-autre" class="cb-remarquable obs-chp-etendu" name="remarquable[]" value="autre" data-titre="autre" />
894
												Autre
895
												<input class="has-tooltip hidden" type="text" id="remarquable-autre-commentaire"
896
													placeholder="commentaire optionnel"
897
												/>
898
											</label>
899
										</div>
2944 mathias 900
									</div>
2943 delphine 901
								</div>
902
							</div>
903
 
904
							<div class="form-group has-tooltip"
905
									title="Quel est le degré de remarquabilité de cet arbre ?">
906
								<label for="remarquabilite" class="col-sm-4 control-label">
907
									<strong class="obligatoire">*</strong>
908
									Selon vous, quel est le degré de remarquabilité de cet arbre ?
909
								</label>
910
								<div class="col-sm-8">
911
									<div class="input-group">
912
										<select id="remarquabilite" class="form-control obs-chp-etendu"
913
												name="arbreRemarquableRemarquabilite"
914
												data-label="Remarquabilite">
915
											<option selected value="">Sélectionner le degré de remarquabilité</option>
916
											<option value="Arbre exceptionnel">Arbre exceptionnel</option>
917
											<option value="Arbre remarquable">Arbre remarquable</option>
918
											<option value="Arbre d'intérêt local">Arbre d'intérêt local</option>
919
										</select>
920
										<div class="input-group-btn">
921
											<button class="btn btn-default" type="button" data-toggle="modal" data-target="#remarq-description">
922
												<span class="glyphicon glyphicon-info-sign"></span> Aide
923
											</button>
924
										</div>
925
									</div>
926
								</div>
927
							</div>
928
 
929
 
930
						</form>
931
 
932
						<div class="row">
933
							<form id="form-upload" class="form form-horizontal" role="form" action="<?= $url_ws_upload ?>"
934
								method="post" enctype="multipart/form-data">
935
								<div class="col-md-12">
936
									<h2>Image(s) de l'arbre</h2>
937
									<strong>Ajouter une image</strong>
938
									<p class="miniature-info discretion help-inline">Les photos doivent être au format JPEG et ne doivent pas excéder 5Mo chacune.</p>
939
									<div id ="photos-conteneur" class="form-group">
940
										<div class="col-sm-12">
941
											<input type="file" id="fichier" name="fichier" class="form-control" accept="image/jpeg" />
942
											<input type="hidden" name="MAX_FILE_SIZE" value="5242880"/>
943
										</div>
944
										<div id="miniatures"></div>
945
										<p class="miniature-msg col-md-12">&nbsp;</p>
946
									</div>
947
								</div>
948
							</form>
949
						</div>
950
					</div>
951
				</div>
952
 
953
				<div class="row">
954
					<div class="col-md-12 centre has-tooltip"
955
						title="Une fois les champs remplis, cliquez sur ce bouton pour
2945 delphine 956
							ajouter votre observation à la liste à transmettre. N'oubliez pas de cliquer sur le bouton transmettre pour envoyer vos observations.">
2943 delphine 957
						<button id="ajouter-obs" class="btn btn-primary btn-large" type="button">
958
							Créer
959
						</button>
960
					</div>
961
				</div>
962
			</div>
963
 
964
			<!-- Messages d'erreur du formulaire-->
965
			<div class="row">
966
				<div class="zone-alerte col-md-6 col-md-offset-3">
967
					<div id="dialogue-bloquer-creer-obs" class="alert alert-warning alert-block" style="display: none;">
968
						<a class="close">×</a>
969
						<h4 class="alert-heading">Information : 10 observations maximum</h4>
970
						<p>
971
							Vous venez d'ajouter votre 10ème observation.<br/>
972
							Pour en ajouter de nouvelles, il est nécessaire de les transmettre en cliquant sur le bouton ci-dessous.
973
						</p>
974
					</div>
975
				</div>
976
				<div class="zone-alerte col-md-6 col-md-offset-3">
977
					<div id="dialogue-form-invalide" class="alert alert-warning alert-block" style="display: none;">
978
						<a class="close">×</a>
979
						<h4 class="alert-heading">Information : champs en erreur</h4>
980
						<p>
981
							Certains champs du formulaire sont mal remplis.<br/>
982
							Veuillez vérifier vos données.
983
						</p>
984
					</div>
985
				</div>
986
			</div>
987
 
988
			<!-- Affiche le tableau récapitulatif des observations ajoutées -->
989
			<div id="zone-liste-obs" class="row">
990
				<div class="col-md-12">
991
					<div class="well well-lg">
992
						<div class="row">
993
							<div class="col-md-8">
994
								<h2>Observations à transmettre : <span class="obs-nbre">0</span></h2>
995
							</div>
996
							<div class="col-md-4 text-right">
997
								<button id="transmettre-obs" class="btn btn-primary btn-large has-tooltip"
998
									type="button" disabled="disabled"
999
									title="Ajoute les observations ci-dessous à votre Carnet en Ligne et les rend publiques.">
1000
									Transmettre
1001
								</button>
1002
							</div>
1003
						</div>
1004
						<div id="liste-obs" ></div>
1005
						<div class="row">
1006
							<div class="zone-alerte col-md-6 col-md-offset-3">
1007
								<div id="dialogue-zero-obs" class="alert alert-block" style="display: none;">
1008
									<a class="close">×</a>
1009
									<h4 class="alert-heading">Attention : aucune observation</h4>
1010
									<p>Veuillez saisir des observations pour les transmettre.</p>
1011
								</div>
1012
 
1013
								<div id="dialogue-obs-transaction-ok" class="alert alert-success alert-block" style="display: none;"">
1014
									<a class="close">×</a>
1015
									<h4 class="alert-heading">Information : transmission des observations</h4>
1016
									<div class="alert-txt"></div>
1017
								</div>
1018
 
1019
								<div id="dialogue-obs-transaction-ko" class="alert alert-error alert-block" style="display: none;">
1020
									<a class="close">×</a>
1021
									<h4 class="alert-heading">Erreur : transmission des observations</h4>
1022
									<div class="alert-txt"></div>
1023
								</div>
1024
							</div>
1025
						</div>
1026
 
1027
					</div>
1028
				</div>
1029
			</div>
1030
 
1031
			<footer class="row">
1032
				<p class="col-md-12 ">Réalisation &amp; hébergement : <a href="http://www.tela-botanica.org" target="_blank">Tela Botanica</a> 2014</p>
1033
			</footer>
1034
 
1035
			<!-- Templates HTML -->
1036
			<div id="tpl-transmission-ok" style="display:none;">
1037
				<p class="msg">
1038
					Vos observations ont bien été transmises.<br />
1039
					Elles sont désormais consultables à travers les différents outils de visualisation
1040
					du réseau (<a href="http://www.tela-botanica.org/site:botanique">eFlore</a>,
1041
					<a href="http://www.tela-botanica.org/appli:pictoflora">Pictoflora</a>,
1042
					<a href="http://www.tela-botanica.org/appli:del">Identiplante</a>,
1043
					<a href="http://www.tela-botanica.org/widget:cel:cartoPoint">cartographie (widget)</a>...)<br />
1044
					Si vous souhaitez les modifier ou les supprimer, vous pouvez les retrouver en vous
1045
					connectant à votre <a href="http://www.tela-botanica.org/appli:cel">Carnet en Ligne</a>.<br />
1046
					N'oubliez pas qu'il est nécessaire de
1047
					<a href="http://www.tela-botanica.org/page:inscription">s'inscrire à Tela Botanica</a>
1048
					au préalable, si ce n'est pas déjà fait.
1049
				</p>
1050
			</div>
1051
			<div id="tpl-transmission-ko" style="display:none;">
1052
				<p class="msg">
1053
					Une erreur est survenue lors de la transmission d'une observation (indiquée en rouge).<br />
1054
					Vous pouvez tenter de la retransmettre en cliquant à nouveau sur le bouton transmettre ou bien la supprimer
1055
					et transmettre les suivantes.<br />
1056
					Néanmoins, les observations n'apparaissant plus dans la liste "observations à transmettre", ont bien été transmises lors de votre précédente tentative. <br />
1057
					Si le problème persiste, vous pouvez signaler le dysfonctionnement sur
1058
					<a href="<?= $url_remarques ?>?service=cel&pageSource=<?php echo urlencode('http://'.$_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF'].'?'.$_SERVER['QUERY_STRING']); ?>"
1059
								  target="_blank"
1060
								  onclick="javascript:window.open(this.getAttribute('href'), 'Tela Botanica - Remarques', config='height=700, width=640, scrollbars=yes, resizable=yes'); return false;">
1061
								  le formulaire de signalement d'erreurs</a>.
1062
				</p>
1063
			</div>
1064
 
1065
			<!-- Fenêtres modales -->
1066
			<div id="chargement" class="modal-fenetre" style="display:none;">
1067
				<div id="chargement-centrage" class="modal-contenu">
1068
					<div class="progress">
1069
						<div id="barre-progression-upload" class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="10" style="">
1070
							<span class="sr-only">0/10 observations transmises</span>
1071
						</div>
1072
					</div>
1073
 
1074
					<p id="chargement-txt" style="color:white;font-size:1.5em;">
1075
						Transfert des observations en cours...<br />
1076
						Cela peut prendre plusieurs minutes en fonction de la taille des images et du nombre
1077
						d'observations à transférer.
1078
					</p>
1079
				</div>
1080
			</div>
1081
 
1082
			<div id="projet-description" class="modal fade" tabindex="-1" role="dialog"
1083
				 aria-labelledby="projet-description-titre" aria-hidden="true">
1084
				<div class="modal-dialog">
1085
					<div class="modal-content">
1086
						<div class="modal-header">
1087
							<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
1088
								<span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
1089
							</button>
1090
							<h1 id="projet-description-titre" class="modal-title">Les arbres remarquables</h1>
1091
						</div>
1092
						<div class="modal-body">
1093
							<div class="dsc-imgs">
1094
								<img src="<?=$url_base?>/modules/saisie/squelettes/arbres-remarquables/img/dsc/arbre_1.jpg" alt="Illustration d'un arbre remarquable"/>
1095
							</div>
1096
							<div class="dsc-infos text-justify">
1097
								<h2>Qu'est-ce qu'un arbre remarquable&nbsp;?</h2>
1098
								<p>
1099
									Parmi les arbres que nous côtoyons, certains sujets suscitent une émotion particulière de par
1100
									leur taille imposante, leur forme, leur grand âge, leur rareté botanique, leur capacité à offrir
1101
									des refuges à la faune, leur histoire… <br />
1102
									La notion de « remarquabilité » comporte une part de subjectivité liée à l’appréciation
1103
									personnelle et une part de relativité (un arbre paraît d'autant plus remarquable que son
1104
									environnement est banal).
1105
								</p>
1106
 
1107
								<h2>Des rescapés de la gestion humaine</h2>
1108
								<p>
1109
									Ces « anciens » nous rappellent que les arbres ont une capacité à vivre beaucoup plus longtemps
1110
									que les limites que nous leur imposons généralement. Des rescapés en quelque sorte !<br />
1111
									Les forestiers récoltent les arbres alors qu'ils n'ont pas atteint la moitié de leur vie ;
1112
									hors de forêts, l'arrachement des haies et l'urbanisation laissent peu d'occasion aux arbres de
1113
									vieillir.
1114
								</p>
1115
 
1116
								<h2>Pourquoi est-il important de les recenser&nbsp;?</h2>
1117
								<p>
1118
									Outre les considérations morales et philosophiques qui doivent nous inciter à les protéger,
1119
									les vieux arbres représentent un écosystème particulier : écorces décollées, branches mortes,
1120
									cavités sont autant de milieux de vie pour des espèces d'insectes, champignons, oiseaux,
1121
									de mammifères…<br />
1122
									Les gestions agricoles et forestières plus intensives ont pour conséquence la raréfaction des
1123
									arbres âgés ; elles menacent toute la vie qui leur est associée.<br />
1124
									Pour la biodiversité, l'identification et la protection des vieux arbres est cruciale ; d'un
1125
									point de vu paysager, ces arbres représentent des éléments remarquables auxquels les habitants
1126
									sont attachés.
1127
								</p>
1128
								<p class="bg-success text-center">
1129
									<strong>
1130
										Merci de transmettre vos observations
1131
									</strong>
1132
								</p>
1133
							</div>
1134
						</div>
1135
						<div class="modal-footer dsc-clean">
1136
							<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Fermer</button>
1137
						</div>
1138
					</div>
1139
				</div>
1140
			</div>
1141
 
1142
			<div id="age-description" class="modal fade" tabindex="-1" role="dialog"
1143
				 aria-labelledby="age-description-titre" aria-hidden="true">
1144
				<div class="modal-dialog">
1145
					<div class="modal-content">
1146
						<div class="modal-header">
1147
							<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
1148
								<span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
1149
							</button>
1150
						</div>
1151
						<div class="modal-body">
1152
							<p>
1153
								Le comptage des cernes de croissance est une manière aisée de connaître l'âge d'un arbre une fois abattu
1154
								mais sur un individu vivant c'est beaucoup plus difficile à estimer.<br />
1155
								La taille, notamment, n'est pas toujours un critère (les genévriers thurifères qui poussent en falaise
1156
								n’atteignent pas de grandes dimension tout en pouvant être âgés). <br />
1157
								Quelques signes peuvent vous aider :
1158
							</p>
1159
							<table class="table table-bordered">
1160
								<tr>
1161
									<td>Très vieux</td>
1162
									<td><strong>Période de retraite</strong><br />
1163
										Porte-t-il des signes de grand âge ?<br />
1164
										<i>Ex : contreforts marqués, dessèchement des feuilles à la cime</i>
1165
									</td>
1166
								</tr>
1167
								<tr>
1168
									<td>Vieux</td>
1169
									<td><strong>Période de sénescence - Post reproduction</strong><br />
1170
										Porte-t-il des signes de vieillissement ?<br />
1171
										<i>Ex : arrêt de fructification, apparition de contreforts</i>
1172
									</td>
1173
								</tr>
1174
								<tr>
1175
									<td>Adulte</td>
1176
									<td><strong>Période de maturité</strong><br />
1177
										Porte-t-il des fruits ?
1178
									</td>
1179
								</tr>
1180
							</table>
1181
						</div>
1182
						<div class="modal-footer dsc-clean">
1183
							<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Fermer</button>
1184
						</div>
1185
					</div>
1186
				</div>
1187
			</div>
1188
 
1189
			<div id="sante-description" class="modal fade" tabindex="-1" role="dialog"
1190
				 aria-labelledby="age-description-titre" aria-hidden="true">
1191
				<div class="modal-dialog">
1192
					<div class="modal-content">
1193
						<div class="modal-header">
1194
							<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
1195
								<span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
1196
							</button>
1197
						</div>
1198
						<div class="modal-body">
1199
							<table class="table table-bordered">
1200
								<tr>
1201
									<td>En très bonne santé</td>
1202
									<td>Arbre sain et vigoureux.</td>
1203
								</tr>
1204
								<tr>
1205
									<td>En bonne santé</td>
1206
									<td>Au plus quelques atteintes (petites blessures, petites branches sèches).</td>
1207
								</tr>
1208
								<tr>
1209
									<td>État moyen</td>
1210
									<td>L'arbre a subi la foudre, des élagages, des brûlures, des gerçures de froid, la maladie…</td>
1211
								</tr>
1212
								<tr>
1213
									<td>Fin de vie</td>
1214
									<td>Atteintes pouvant affecter la solidité : cavité(s) importante(s), grande proportion de branches mortes ; système racinaire fortement endommagé...</td>
1215
								</tr>
1216
							</table>
1217
						</div>
1218
						<div class="modal-footer dsc-clean">
1219
							<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Fermer</button>
1220
						</div>
1221
					</div>
1222
				</div>
1223
			</div>
1224
 
1225
			<div id="remarq-description" class="modal fade" tabindex="-1" role="dialog"
1226
				 aria-labelledby="age-description-titre" aria-hidden="true">
1227
				<div class="modal-dialog">
1228
					<div class="modal-content">
1229
						<div class="modal-header">
1230
							<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
1231
								<span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
1232
							</button>
1233
						</div>
1234
						<div class="modal-body">
1235
							<table class="table table-bordered">
1236
								<tr>
1237
									<td>Arbre exceptionnel</td>
1238
									<td>Le caractère exceptionnel de l'arbre le place à une échelle nationale.</td>
1239
								</tr>
1240
								<tr>
1241
									<td>Arbre remarquable </td>
1242
									<td>L'arbre est remarquable à une échelle régionale.</td>
1243
								</tr>
1244
								<tr>
1245
									<td>Arbre exceptionnel</td>
1246
									<td>Arbre d’intérêt principalement local (histoire locale, légende locale, paysage local...)</td>
1247
								</tr>
1248
							</table>
1249
						</div>
1250
						<div class="modal-footer dsc-clean">
1251
							<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Fermer</button>
1252
						</div>
1253
					</div>
1254
				</div>
1255
			</div>
2945 delphine 1256
 
1257
			<div id="notes-description" class="modal fade" tabindex="-1" role="dialog"
1258
				 aria-labelledby="projet-description-titre" aria-hidden="true">
1259
				<div class="modal-dialog">
1260
					<div class="modal-content">
1261
						<div class="modal-header">
1262
							<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
1263
								<span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
1264
							</button>
1265
							<h1 id="projet-description-titre" class="modal-title">Notes</h1>
1266
							<p>Observation d’espèces de faune ou de flore (notamment épiphytes), ressources potentielles pour la biodiversité. </p>
1267
						</div>
1268
						<div class="modal-body">
1269
							<div class="dsc-infos text-justify">
1270
								<h2>Qu'est-ce qu'une plante épiphyte&nbsp;?</h2>
1271
								<p>
1272
									Il s'agit d'une plante qui pousse en se servant d'autres plantes comme support. Il ne s'agit
1273
									pas de plantes parasites mais de plantes qui trouvent un substrat favorable sur l'arbre, soit dans
1274
									des cavités remplies de terreau, soit sur l'écorce du tronc.
1275
								</p>
1276
							</div>
1277
							<div class="dsc-imgs">
1278
								<img src="<?=$url_base?>/modules/saisie/squelettes/arbres-remarquables/img/dsc/arbre_2.jpg"
1279
								alt="Plantes épiphytes By pfly (flickr.com) [CC BY-SA 2.0 (http://creativecommons.org/licenses/by-sa/2.0)], via Wikimedia Commons"/>
1280
								<p>By pfly (flickr.com) [CC BY-SA 2.0 (http://creativecommons.org/licenses/by-sa/2.0)], via Wikimedia Commons</p>
1281
							</div>
1282
						</div>
1283
						<div class="modal-footer dsc-clean">
1284
							<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Fermer</button>
1285
						</div>
1286
					</div>
1287
				</div>
1288
			</div>
2943 delphine 1289
 
1290
 
1291
		</div>
1292
	</body>
1293
</html>