Subversion Repositories eFlore/Applications.cel

Rev

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