Subversion Repositories eFlore/Applications.cel

Rev

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

Rev Author Line No. Line
2360 jpm 1
<!DOCTYPE html>
2
<html lang="fr">
3
	<head>
4
		<title>Arbres têtards : saisie d'observations</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="Jean-Pascal MILCENT" />
11
		<meta name="keywords" content="Arbres têtards, projet, saisie, observation, Gentiana, CEL" />
12
		<meta name="description" content="Projet Arbres têtards de Gentiana - 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-tetards/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?sensor=true&amp;language=fr&amp;region=FR"></script>
2373 jpm 24
		<!-- Proj4js -->
25
		<script type="text/javascript" src="http://resources.tela-botanica.org/proj4js/2.2.1/proj4.js"></script>
2360 jpm 26
 
27
		<!-- Jquery -->
2372 jpm 28
		<script src="http://resources.tela-botanica.org/jquery/1.11.1/jquery-1.11.1.min.js"></script>
2360 jpm 29
		<!-- Jquery UI : nécessaire pour le mini-calendrier et l'auto-complétion -->
2372 jpm 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>
2360 jpm 32
		<!-- Jquery Plugins -->
33
		<!-- Jquery Validate : nécessaire pour la validation des formulaires -->
2372 jpm 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>
2360 jpm 36
		<!-- Jquery Form :nécessaire pour l'upload des images -->
2372 jpm 37
		<script src="http://resources.tela-botanica.org/jquery/form/3.51/jquery.form.min.js"></script>
2360 jpm 38
		<!-- Bootstrap -->
2372 jpm 39
		<script src="http://resources.tela-botanica.org/bootstrap/3.2.0/js/bootstrap.min.js"></script>
2360 jpm 40
 
41
		<!-- Javascript : appli saisie -->
2711 mathias 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-tetards/js/WidgetSaisieArbresTetards.js"></script>
2366 jpm 44
		<script src="<?=$url_base?>saisie?projet=arbres-tetards&amp;service=taxons" type="text/javascript"></script>
2360 jpm 45
		<script>
46
		//<![CDATA[
2711 mathias 47
           $(document).ready(function() {
48
				// OMG un modèle objet !!
49
				var widget = new WidgetSaisieArbresTetards();
2360 jpm 50
 
2711 mathias 51
				// la variable "taxons" chargée par "service=taxons" ci-dessus n'est pas accessible dans le contexte objet
52
				widget.taxons = taxons;
2360 jpm 53
 
2711 mathias 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,ArbresTetards";
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;
2360 jpm 82
 
2711 mathias 83
				// Squelette d'URL du web service permettant l'auto-complétion des noms scientifiques
84
				widget.serviceAutocompletionNomSciUrlTpl = "<?=$url_ws_autocompletion_ns_tpl?>?"+
2360 jpm 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"+"&"+
2711 mathias 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-tetards/img/marqueurs/epingle.png";
105
				// URL de l'icône du chargement en cours
106
				widget.chargementIconeUrl = "<?=$url_base?>modules/saisie/squelettes/arbres-tetards/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-tetards/img/icones/chargement-image.gif";
109
				// URL de l'icône du calendrier
110
				widget.calendrierIconeUrl = "<?=$url_base?>modules/saisie/squelettes/arbres-tetards/img/icones/calendrier.png";
111
				// URL de l'icône pour une photo manquante
112
				widget.pasDePhotoIconeUrl = "<?=$url_base?>modules/saisie/squelettes/arbres-tetards/img/icones/pasdephoto.png";
2360 jpm 113
 
2711 mathias 114
				// Initialisation du bousin
115
				widget.init();
116
			});
2360 jpm 117
		//]]>
118
		</script>
119
 
120
		<!-- CSS -->
2372 jpm 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" />
2360 jpm 125
		<link rel="stylesheet" href="<?=$url_base?>modules/saisie/squelettes/arbres-tetards/css/<?=isset($_GET['style']) ? $_GET['style'] : 'arbres-tetards'?>.css" />
2678 aurelien 126
 
127
		<script>
128
		  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
129
		  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
130
		  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
131
		  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
132
 
133
		  ga('create', 'UA-20092557-1', 'auto');
134
		  ga('require', 'displayfeatures');
135
		  ga('send', 'pageview');
136
 
137
		</script>
2360 jpm 138
	</head>
139
 
140
	<body data-spy="scroll">
141
		<div class="container">
2372 jpm 142
			<div class="page-header">
143
				<h1>
144
					<img id="logo-titre" src="<?=$url_base?>/modules/saisie/squelettes/arbres-tetards/img/logos/gentiana.png" alt="Gentiana" />
145
					 Arbres têtards de l'Isère
146
				</h1>
2360 jpm 147
			</div>
2372 jpm 148
			<div class="row">
149
				<div class="col-md-6">
150
					<div id="intro" class="well well-lg">
151
						<a class="fermer" data-toggle="collapse" data-target="#intro-txt">
152
							<h3 class="titre">
2373 jpm 153
								Le Projet «&nbsp;Arbres Têtards&nbsp;»
2372 jpm 154
								<span class="glyphicon glyphicon-plus-sign"></span>
155
							</h3>
156
						</a>
157
						<div id="intro-txt" class="collapse in">
2360 jpm 158
							<p>
2373 jpm 159
								Les <a data-toggle="modal" data-target="#projet-description">arbres têtards ou trognes</a>,
2530 mathias 160
								sont des arbres taillés exploités depuis des siècles. Par leur histoire et
161
								leur richesse écologique, ils font partie de notre patrimoine.<br />
2373 jpm 162
								Victimes des changements de pratiques agricoles et de l’urbanisation des zones
2360 jpm 163
								rurales, ces arbres remarquables disparaissent !
164
							</p>
165
							<p>
166
								C’est pourquoi <a href="http://www.gentiana.org/" target="_blank">Gentiana</a>
167
								a lancé un programme de suivi, de sauvegarde et de restauration des arbres têtards
168
								en Isère. Ce projet a pour but de mieux faire connaître ces arbres, de les entretenir,
2373 jpm 169
								de restaurer ceux à l’abandon et d’en replanter.
2360 jpm 170
							</p>
171
							<p>
172
								La première chose à faire est un état des lieux des arbres têtards sur tout le
2373 jpm 173
								département de l’Isère.
2360 jpm 174
								<strong>Nous avons besoin de vous pour améliorer notre connaissance !</strong><br />
175
								Vous pouvez nous aider en nous signalant les arbres têtards que vous connaissez
176
								à l’aide du formulaire suivant.
177
							</p>
178
						</div>
179
					</div>
180
				</div>
181
 
2372 jpm 182
				<div class="col-md-6">
183
					<div id="aide" class="well well-lg">
184
						<a class="fermer" data-toggle="collapse" data-target="#aide-txt">
185
							<h3 class="titre">
186
								Aide
187
								<span class="glyphicon glyphicon-plus-sign"></span>
188
							</h3>
189
						</a>
190
						<div id="aide-txt" class="collapse in">
2360 jpm 191
							<p>
192
								Cet outil vous permet de partager simplement vos observations avec
193
								<a href="http://www.gentiana.org/" target="_blank">Gentiana</a> et le
194
								<a href="http://www.tela-botanica.org/site:accueil">réseau Tela Botanica</a>
195
								(sous <a href="http://www.tela-botanica.org/page:licence?langue=fr">licence CC-BY-SA</a>).
196
								Identifiez-vous bien pour ensuite retrouver et gérer vos données dans
197
								<a href="http://www.tela-botanica.org/appli:cel">votre Carnet en ligne</a>.
198
								Créez jusqu'à 10 observations (avec 10Mo max d'images) puis partagez-les avec le bouton 'transmettre'.
199
								Elles apparaissent immédiatement sur les
200
								<a href="http://www.tela-botanica.org/site:botanique">cartes et galeries photos </a> du site.
201
							</p>
202
							<p class="discretion">
203
								Pour toute question ou remarque,
2601 mathias 204
								<a href="<?= $url_remarques ?>?service=cel&pageSource=<?php echo urlencode('http://'.$_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF'].'?'.$_SERVER['QUERY_STRING']); ?>"
2360 jpm 205
									target="_blank"
206
									onclick="javascript:window.open(this.getAttribute('href'), 'Tela Botanica - Remarques', config='height=700, width=640, scrollbars=yes, resizable=yes'); return false;">
207
									contactez-nous</a>
208
							</p>
209
							<p class="discretion">
2372 jpm 210
								Une fois familiarisé avec l'interface vous pouvez cliquer sur le bouton suivant pour désactiver l'aide&nbsp;:
211
								<button id="btn-aide" class="btn btn-xs btn-success">
212
									<span class="glyphicon glyphicon-question-sign icon-white"></span>
213
									<span id="btn-aide-txt">Désactiver l'aide</span>
2360 jpm 214
								</button>
215
							</p>
216
						</div>
217
					</div>
218
				</div>
219
			</div>
2372 jpm 220
 
221
			<div class="well well-lg">
222
				<h2>Observateur</h2>
223
				<form id="form-observateur" role="form" autocomplete="on">
224
					<div class="row">
225
						<div class="col-md-6 form-group has-tooltip" data-placement="right"
2530 mathias 226
							title="Saisissez le courriel avec lequel vous êtes inscrit à Tela Botanica.
227
								Si vous n'êtes pas inscrit ce n'est pas grave, vous pourrez le faire
2372 jpm 228
								ultérieurement. Des informations complémentaires vont vous être
229
								demandées : prénom et nom.">
230
							<label for="courriel"  title="Veuillez saisir votre adresse courriel.">
231
								<strong class="obligatoire">*</strong>
232
								Courriel
233
							</label>
234
							<div class="input-group">
235
								<span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span>
236
								<input id="courriel" name="courriel" class="form-control" type="text"/>
237
								<input id="id_utilisateur" name="id_utilisateur" type="hidden"/>
2360 jpm 238
							</div>
2372 jpm 239
						</div>
240
						<div id="zone-courriel-confirmation" class="col-md-6 form-group has-feedback hidden">
2530 mathias 241
							<label for="courriel_confirmation" title="Veuillez confirmer le courriel.">
2372 jpm 242
								<strong class="obligatoire">*</strong> Courriel (confirmation)
243
							</label>
244
							<div class="input-group">
245
								<span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span>
246
								<input id="courriel_confirmation" name="courriel_confirmation" class="form-control" type="text"/>
2360 jpm 247
							</div>
248
						</div>
2372 jpm 249
					</div>
250
					<div id="zone-prenom-nom" class="row hidden">
251
						<div class="col-md-6 form-group">
252
							<label for="prenom">Prénom</label>
253
							<div class="input-group">
254
								<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
255
								<input id="prenom" name="prenom" class="form-control" type="text"/>
2360 jpm 256
							</div>
2372 jpm 257
						</div>
258
						<div class="col-md-6 form-group">
259
							<label for="nom">Nom</label>
260
							<div class="input-group">
261
								<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
262
								<input id="nom" name="nom" class="form-control" type="text"/>
2360 jpm 263
							</div>
264
						</div>
2372 jpm 265
					</div>
266
				</form>
2360 jpm 267
			</div>
2372 jpm 268
 
2360 jpm 269
			<!-- Messages d'erreur du formulaire-->
270
			<div class="row">
2372 jpm 271
				<div class="zone-alerte col-md-6 col-md-offset-3">
2360 jpm 272
					<div id="dialogue-bloquer-copier-coller" class="alert alert-info alert-block" style="display:none;">
2372 jpm 273
						<button type="button" class="close"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
2360 jpm 274
						<h4 class="alert-heading">Information : copier/coller</h4>
275
						<p>
276
							Merci de ne pas copier/coller votre courriel.<br/>
277
							La double saisie permet de vérifier l'absence d'erreurs.
278
						</p>
279
					</div>
280
					<div id="dialogue-courriel-introuvable" class="alert alert-info alert-block" style="display:none;">
2372 jpm 281
						<button type="button" class="close"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
2360 jpm 282
						<h4 class="alert-heading">Information : courriel introuvable</h4>
283
						<p>
284
							Vous n'êtes pas inscrit à Tela Botanica avec ce courriel.<br/>
285
							Veuillez compléter les champs supplémentaires ou indiquer votre courriel d'inscription.<br/>
286
							Pour retrouver vos observations dans le <a href="http://www.tela-botanica.org/appli:cel">Carnet en ligne</a>,
2530 mathias 287
							il sera nécessaire de <a href="http://www.tela-botanica.org/page:inscription">vous inscrire à Tela Botanica</a>.
2360 jpm 288
						</p>
289
					<div id="dialogue-google-map" class="alert alert-info alert-block" style="display: none;">
2372 jpm 290
						<button type="button" class="close"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
2530 mathias 291
						<h4 class="alert-heading">Information sur Google Maps</h4>
2360 jpm 292
						<div class="contenu"></div>
293
					</div>
294
				</div>
295
			</div>
2372 jpm 296
 
297
			<div class="well well-lg">
298
				<div class="row">
299
					<div class="col-md-12">
300
						<h2>Lieu du relevé</h2>
301
					</div>
302
				</div>
303
				<div class="row">
304
					<div class="col-md-6">
305
						<div class="row">
306
							<div class="col-md-3">
307
								<strong title="Veuillez localiser l'observation">Géolocalisation</strong>
2366 jpm 308
							</div>
2373 jpm 309
							<div class="col-md-9 text-right">
2372 jpm 310
								<form id="form-carte-recherche" class="form-horizontal" role="form">
311
									<div class="form-group">
312
										<label for="carte-recherche" class="sr-only">Rechercher</label>
2373 jpm 313
										<div class="col-md-12">
314
											<div class="input-group">
315
												<input id="carte-recherche" class="form-control has-tooltip" type="search" value=""
316
														title="Permet de centrer la carte sur le lieu recherché."
317
														placeholder="Centrer la carte sur un lieu..."/>
318
												<span class="input-group-addon"><span class="glyphicon glyphicon-search"></span></span>
319
											</div>
2372 jpm 320
										</div>
2366 jpm 321
									</div>
2372 jpm 322
								</form>
323
							</div>
324
						</div>
325
						<div class="row">
326
							<div class="col-md-12">
327
								<div id="map-canvas" class="has-tooltip"
328
									title="Vous pouvez cliquer sur la carte pour déplacer le marqueur
329
										représentant votre station ou bien le glisser-déposer sur
330
										le lieu souhaité."></div>
331
							</div>
332
						</div>
333
						<div class="row">
334
							<div id="info-altitude" class="col-md-5">
335
								<span>Altitude : </span>
336
								<span id="marqueur-altitude"><span id="altitude"></span> m</span>
337
							</div>
338
 
339
							<div id="info-commune" class="col-md-7">
340
								<span>Commune : </span>
341
								<span id="marqueur-commune">
342
									<span id="commune-nom" class="commune-info"></span>
343
									(<span id="commune-code-insee" class="commune-info has-tooltip"
344
										title="Code INSEE de la commune"></span>)
345
								</span>
346
							</div>
347
						</div>
348
					</div>
349
					<div class="col-md-6">
350
						<form id="form-station" class="form-horizontal" role="form" autocomplete="on">
351
							<div class="form-group has-tooltip"
352
								title="Toponyme plus précis que la commune, utilisé localement et se trouvant souvent sur les cartes au 1/25 000." >
353
								<label for="lieudit" class="col-sm-2 control-label">
354
									Lieu-dit
355
								</label>
356
								<div class="col-sm-10">
357
									<input id="lieudit" name="lieudit" class="form-control" type="text" />
2366 jpm 358
								</div>
2372 jpm 359
							</div>
2366 jpm 360
 
2372 jpm 361
							<div class="form-group has-tooltip"
362
								title="Sélectionnez une ou plusieurs situations correspondant au site.">
363
								<label for="milieux[]"class="col-sm-2 control-label">Situation(s)</label>
364
								<div id="milieux-controls" class="col-sm-10">
365
									<div class="btn-group dropdown">
366
										<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
367
											<span class="glyphicon glyphicon-globe"></span>
368
											Sélectionner une ou plusieurs situations
369
											<span class="caret"></span>
370
										</button>
371
										<ul class="dropdown-menu col-sm-12" role="menu" aria-labelledby="dLabel">
372
											<li class="checkbox" role="presentation">
373
												<a role="menuitem">
374
													<label>
375
														<input name="milieux[]" class="cb-milieux" type="checkbox" value="séparation de parcelle"/>
376
														Séparation de parcelle
377
													</label>
378
												</a>
379
											</li>
380
											<li class="checkbox" role="presentation">
381
												<a role="menuitem">
382
													<label>
383
														<input name="milieux[]" class="cb-milieux" type="checkbox" value="proximité de bâtiment"/>
384
														Proximité de bâtiment
385
													</label>
386
												</a>
387
											</li>
388
											<li class="checkbox" role="presentation">
389
												<a role="menuitem">
390
													<label>
391
														<input name="milieux[]" class="cb-milieux" type="checkbox" value="plein champ"/>
392
														Plein champ
393
													</label>
394
												</a>
395
											</li>
396
											<li class="checkbox" role="presentation">
397
												<a role="menuitem">
398
													<label>
399
														<input name="milieux[]" class="cb-milieux" type="checkbox" value="jardin de particulier"/>
400
														Jardin de particulier
401
													</label>
402
												</a>
403
											</li>
404
											<li class="checkbox" role="presentation">
405
												<a role="menuitem">
406
													<label>
407
														<input name="milieux[]" class="cb-milieux" type="checkbox" value="bord de cours d'eau"/>
408
														Bord de cours d'eau
409
													</label>
410
												</a>
411
											</li>
412
											<li class="checkbox" role="presentation">
413
												<a role="menuitem">
414
													<label>
415
														<input name="milieux[]" class="cb-milieux" type="checkbox" value="bord de chemin"/>
416
														Bord de chemin
417
													</label>
418
												</a>
419
											</li>
420
											<li class="checkbox" role="presentation">
421
												<a role="menuitem">
422
													<label>
423
														<input name="milieux[]" class="cb-milieux" type="checkbox" value="intégré à une haie"/>
424
														Intégré à une haie
425
													</label>
426
												</a>
427
											</li>
428
											<li class="checkbox" role="presentation">
429
												<a role="menuitem">
430
													<label>
431
														<input name="milieux[]" class="cb-milieux" type="checkbox" value="en forêt"/>
432
														En forêt
433
													</label>
434
												</a>
435
											</li>
436
											<li class="checkbox" role="presentation">
437
												<a role="menuitem">
438
													<label>
439
														<input name="milieux[]" class="cb-milieux" type="checkbox" value="en zone humide"/>
440
														En zone humide
441
													</label>
442
												</a>
443
											</li>
444
										</ul>
2366 jpm 445
									</div>
446
								</div>
447
							</div>
448
 
2372 jpm 449
							<div class="row">
450
								<div class="col-md-12">
451
									<button class="afficher-coord btn-coord btn btn-default"
452
											data-toggle-text="Cacher les coordonnées (WGS 84 et Lambert 93)">
453
										Afficher les coordonnées (WGS 84 et Lambert 93)
454
									</button>
455
									<div id="coordonnees-geo" class="well hidden">
456
										<div class="row">
457
											<div class="col-md-4">
458
												<div id="coord-lat" class="form-group form-group-sm">
459
													<label for="latitude" class="col-sm-4 control-label">Latitude</label>
460
													<div class="col-sm-8">
461
														<input id="latitude" class="form-control" name="latitude" type="text"
462
															title="Latitude (WGS 84)" value=""/>
2366 jpm 463
													</div>
2360 jpm 464
												</div>
2366 jpm 465
											</div>
2372 jpm 466
											<div class="col-md-5">
467
												<div id="coord-lng" class="form-group form-group-sm">
468
													<label for="latitude" class="col-sm-4 control-label">Longitude</label>
469
													<div class="col-sm-8">
470
														<input id="longitude" class="form-control" name="longitude" type="text"
471
															title="Longitude (WGS 84)" value=""/>
472
													</div>
473
												</div>
2360 jpm 474
											</div>
2372 jpm 475
											<div class="col-md-2">
476
												<div id="coord-lng" class="form-group form-group-sm">
477
													<input type="button" id="geolocaliser"
478
														class="btn btn-default btn-sm has-tooltip"
479
														title="Centre la carte sur les coordonnées de latitude et longitude saisies."
480
														value="Voir sur la carte"/>
481
												</div>
2360 jpm 482
											</div>
483
										</div>
2372 jpm 484
 
485
										<div class="row">
486
											<div class="col-md-6">
487
												<div id="coord-l93-x" class="form-group">
488
													<label for="l93-x" class="col-sm-6 control-label">X Lambert 93</label>
489
													<div class="col-sm-5">
490
														<input id="l93-x" disabled type="text" class="input-sm form-control obs-chp-etendu"
491
																name="coordonneeLambert93X"
492
																data-label="Lambert 93 X"
493
																value=""/>
494
													</div>
495
												</div>
2360 jpm 496
											</div>
2372 jpm 497
											<div class="col-md-6">
498
												<div id="coord-l93-y" class="form-group">
499
													<label for="l93-y" class="col-sm-6 control-label">Y Lambert 93</label>
500
													<div class="col-sm-5">
501
														<input id="l93-y" disabled type="text" class="input-sm form-control obs-chp-etendu"
502
																name="coordonneeLambert93Y"
503
																data-label="Lambert 93 Y"
504
																value=""/>
505
													</div>
506
												</div>
2366 jpm 507
											</div>
2360 jpm 508
										</div>
2366 jpm 509
									</div>
2372 jpm 510
								</div>
2366 jpm 511
							</div>
2372 jpm 512
						</form>
513
					</div>
514
				</div>
2360 jpm 515
 
2372 jpm 516
				<div class="row">
517
					<div class="col-md-6">
518
						<form id="form-obs" class="form-horizontal" role="form" autocomplete="on">
519
							<h2>Arbre observé</h2>
520
							<input id="referentiel" type="hidden" value="bdtfx" />
2360 jpm 521
 
2372 jpm 522
							<div class="form-group has-tooltip"
523
									title="Vous pouvez cliquer sur l'icône de calendrier pour
524
										sélectionner une date dans un calendrier.">
525
								<label for="date" class=" col-sm-4 control-label"
526
									   title="Veuillez indiquer la date du relevé au format jj/mm/aaaa">
527
									<strong class="obligatoire">*</strong>
528
									Date du relevé
529
								</label>
530
								<div class="col-sm-8">
531
									<div class="input-group">
2711 mathias 532
										<span id="date-icone" class="input-group-addon add-on"></span>
2372 jpm 533
										<input id="date" name="date" class="form-control" type="text" placeholder="jj/mm/aaaa" />
2366 jpm 534
									</div>
2372 jpm 535
								</div>
536
							</div>
2360 jpm 537
 
2372 jpm 538
							<div id="taxon-liste-input-groupe" class="form-group has-tooltip"
539
								title="Sélectionnez une espèce dans la liste déroulante par son nom latin
2543 mathias 540
								ou commun. Si une espèce est absente, sélectionnez «Autre espèce»." >
2372 jpm 541
								<label for="taxon-liste" class="col-sm-4 control-label" title="Choisissez l'espèce rencontrée.">
542
									<strong class="obligatoire">*</strong>
543
									Espèces
544
								</label>
545
								<div class="col-sm-8">
546
									<div class="input-group">
547
										<span class="input-group-addon">
548
											<span class="glyphicon glyphicon-leaf"></span>
549
										</span>
2360 jpm 550
 
2372 jpm 551
										<select id="taxon-liste" name="taxon-liste" class="form-control">
552
											<option value="" selected>Sélectionner une espèce</option>
2366 jpm 553
 
2372 jpm 554
											<optgroup id="taxon-liste-noms">
555
												<?php foreach ($taxons['sci-et-fr'] 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
											</optgroup>
566
											<optgroup id="taxon-liste-special">
567
												<?php foreach ($taxons['speciaux'] as $taxon) :?>
568
													<option
569
														class="<?=$taxon['nom_type'] ?>"
570
														value="<?=$taxon['num_nom'] ?>"
571
														title="<?=$taxon['nom_title'] ?>"
572
														data-nom-a-sauver="<?=$taxon['nom_a_sauver'] ?>"
573
														>
574
														<?=$taxon['nom_a_afficher']?>
575
													</option>
576
												<?php endforeach; ?>
577
												<option value="?">Autre espèce</option>
578
											</optgroup>
579
										</select>
2366 jpm 580
									</div>
2372 jpm 581
								</div>
582
							</div>
2360 jpm 583
 
2372 jpm 584
							<div id="taxon-input-groupe" class="form-group has-tooltip hidden"
2543 mathias 585
								title="Vous pouvez saisir ici un nom absent du référentiel (Ex. : 'fleur violette' ou 'Viola sp.1')." >
2372 jpm 586
								<label for="taxon" class="col-sm-4 control-label" title="Choisissez l'espèce rencontrée.">
587
									<strong class="obligatoire">*</strong>
588
									Autre espèce
589
								</label>
590
								<div class="col-sm-8">
591
									<input id="taxon" name="taxon" type="text" class="form-control"
592
										placeholder="Autre espèce (ou indication sur la plante)"
593
										value="<?= $nom_sci_espece_defaut; ?>" />
594
								</div>
595
							</div>
2360 jpm 596
 
2372 jpm 597
							<div class="form-group has-tooltip"
598
									title="Indiquez la certitude de votre détermination.">
599
								<label for="certitude" class="col-sm-4 control-label">
600
									<strong class="obligatoire">*</strong>
601
									Identification de l'arbre
602
								</label>
603
								<div class="col-sm-8">
604
									<select id="certitude" class="form-control" name="certitude">
2543 mathias 605
										<option selected value="">Sélectionner une certitude</option>
2378 jpm 606
										<option value="Certaine">Certaine</option>
607
										<option value="Douteuse">Douteuse</option>
2372 jpm 608
										<option value="A déterminer">À déterminer</option>
609
									</select>
610
								</div>
611
							</div>
2366 jpm 612
 
2372 jpm 613
							<div class="form-group has-tooltip"
614
									title="Indiquez le type de formation de l'arbre ou des arbres têtards.">
615
								<label for="formation" class="col-sm-4 control-label">
616
									<strong class="obligatoire">*</strong>
617
									Formation
618
								</label>
619
								<div class="col-sm-8 select-container">
620
									<select id="formation" class="form-control obs-chp-etendu"
621
											name="arbreTetardFormation"
622
											data-label="Type de formation">
2543 mathias 623
										<option selected value="">Sélectionner une formation</option>
2372 jpm 624
										<option value="alignement">Arbres d'alignement</option>
625
										<option value="isolé">Arbre isolé</option>
626
									</select>
627
								</div>
628
							</div>
2360 jpm 629
 
2372 jpm 630
							<div id="aligne-nbre-groupe" class="form-group has-tooltip hidden"
631
								title="Indiquez le nombre d'arbres têtards alignés." >
632
								<label for="aligne-nbre" class="col-sm-4 control-label">
633
									<strong class="obligatoire">*</strong>
634
									Nombre d'arbres
635
								</label>
636
								<div class="col-sm-4">
637
									<input id="aligne-nbre" type="number" class="form-control obs-chp-etendu"
638
										min="2"
639
										name="arbreTetardAligneNbre"
640
										data-label="Nombre d'arbres d'alignement"
641
										value="" />
642
								</div>
643
							</div>
2366 jpm 644
 
2372 jpm 645
							<div class="form-group has-tooltip"
646
									title="Indiquez si des cavités sont présentes sur l'arbre.">
647
								<label for="cavites" class="col-sm-4 control-label">
648
									Cavités
649
								</label>
650
								<div class="col-sm-8">
651
									<select id="cavites" class="form-control obs-chp-etendu"
652
											name="arbreTetardPresenceCavite"
653
											data-label="Présence de cavités">
2543 mathias 654
										<option selected value="">Sélectionner la présence de cavités</option>
2372 jpm 655
										<option value="aucune">Aucune</option>
656
										<option value="petite">Oui, petite(s)</option>
657
										<option value="grande">Oui, grande(s)</option>
658
									</select>
659
								</div>
660
							</div>
2360 jpm 661
 
2372 jpm 662
							<div class="form-group has-tooltip"
2379 jpm 663
									title="Indiquez la classe de circonférence de l'arbre à 1m du sol.">
2372 jpm 664
								<label for="circonference" class="col-sm-4 control-label">
665
									Circonférence
666
								</label>
667
								<div class="col-sm-8">
668
									<select id="circonference" class="form-control obs-chp-etendu"
2379 jpm 669
											name="arbreTetardClasseCirconferenceA1m"
670
											data-label="Classe de circonférence à 1 m du sol (en m)">
2543 mathias 671
										<option selected value="">Sélectionner la circonférence (à 1m du sol)</option>
2372 jpm 672
										<option value="0-0,5">0 à 0,5m</option>
673
										<option value="0,5-2">0,5 à 2m</option>
674
										<option value="2-3">2 à 3m</option>
675
										<option value="+3">&gt; à 3m</option>
676
									</select>
677
								</div>
2366 jpm 678
							</div>
2360 jpm 679
 
2372 jpm 680
							<div class="form-group has-tooltip"
681
									title="Indiquez la hauteur de la tête.">
682
								<label for="hauteur-tete" class="col-sm-4 control-label">
683
									Hauteur de la tête
684
								</label>
685
								<div class="col-sm-8">
686
									<select id="hauteur-tete" class="form-control obs-chp-etendu"
687
											name="arbreTetardHauteurTete"
2376 jpm 688
											data-label="Hauteur de la tête (en m)">
2543 mathias 689
										<option selected value="">Sélectionner la hauteur</option>
2372 jpm 690
										<option value="0-1,5">0 à 1,5m</option>
691
										<option value="1,5-3">1,5 à 3m</option>
692
										<option value="+3">&gt; à 3m</option>
693
									</select>
694
								</div>
695
							</div>
2366 jpm 696
 
2372 jpm 697
							<div class="form-group">
698
								<label for="presence-sp" class="col-sm-12 control-label">Espèces présentes sur l'arbre (végétale ou animale)</label>
699
								<div class="col-sm-12">
700
									<textarea id="presence-sp" class="form-control obs-chp-etendu" rows="7"
701
										name="arbreTetardPresenceSp"
702
										data-label="Présence d'espèces sur l'arbre"
2543 mathias 703
										placeholder="Vous pouvez éventuellement indiquer des informations du type : Champignons ; Lierre ; Mousses ; Lichens ; Autre plante... Larve d'insecte saproxylique ; Galerie dans le bois ; Pelote de réjection ; Nid ; Crotte ; Trou"></textarea>
2372 jpm 704
								</div>
705
							</div>
706
						</form>
707
					</div>
2366 jpm 708
 
2372 jpm 709
					<div class="col-md-6">
710
						<form id="form-gestion" class="form-horizontal" role="form" autocomplete="on">
711
							<h2>Gestion de l'arbre</h2>
2366 jpm 712
 
2372 jpm 713
							<div class="form-group has-tooltip"
714
									title="Indiquez le type de taille de l'arbre.">
715
								<label for="taille-type" class="col-sm-4 control-label">
716
									Type de taille
717
								</label>
718
								<div class="col-sm-8">
2373 jpm 719
									<div class="input-group">
720
										<select id="taille-type" class="form-control obs-chp-etendu"
721
												name="arbreTetardTailleType"
722
												data-label="Type de taille">
2543 mathias 723
											<option selected value="">Sélectionner le type de taille</option>
2373 jpm 724
											<option value="trogne">Trogne</option>
725
											<option value="tête de chat">Tête de chat</option>
726
											<option value="émonde">Émonde</option>
727
											<option value="autre">Autre, précisez le type de taille dans les notes</option>
728
										</select>
729
										<div class="input-group-btn">
730
											<button class="btn btn-default" type="button" data-toggle="modal" data-target="#taille-description">
731
												<span class="glyphicon glyphicon-info-sign"></span> Aide
732
											</button>
733
										</div>
734
									</div>
2366 jpm 735
								</div>
2372 jpm 736
							</div>
2366 jpm 737
 
2372 jpm 738
							<div class="form-group has-tooltip"
2391 jpm 739
									title="Indiquez le type d’entretien de l'arbre, en précisant la périodicité des coupes.">
740
								<label for="entretien" class="col-sm-4 control-label">
741
									Type d'entretien
2372 jpm 742
								</label>
743
								<div class="col-sm-8">
2391 jpm 744
									<select id="entretien" class="form-control obs-chp-etendu"
745
											name="arbreTetardEntretienCoupe"
746
											data-label="Coupe d'entretien">
2543 mathias 747
										<option selected value="">Sélectionner la périodicité des coupes</option>
748
										<option value="récente">Coupe récente (< 5 ans ; diamètre des branches < 10cm)</option>
2372 jpm 749
										<option value="ancienne">Ancienne (5 à 10 ans ; diamètre des branches entre 10 et 15 cm )</option>
750
										<option value="non entretenu">Non entretenu ( diamètre des branches > 15 cm)</option>
751
									</select>
752
								</div>
2360 jpm 753
							</div>
2366 jpm 754
 
2372 jpm 755
							<div class="form-group has-tooltip"
756
									title="Indiquez l'état sanitaire de l'arbre têtard.">
757
								<label for="etat-sanitaire" class="col-sm-4 control-label">
758
									État sanitaire
759
								</label>
760
								<div class="col-sm-8">
761
									<select id="etat-sanitaire" class="form-control obs-chp-etendu"
762
											name="arbreTetardEtatSanitaire"
763
											data-label="État sanitaire">
2543 mathias 764
										<option selected value="">Sélectionner l'état sanitaire</option>
2372 jpm 765
										<option value="mort">Mort</option>
766
										<option value="dépérissant">Dépérissant</option>
767
										<option value="bon">Bon état général</option>
768
									</select>
769
								</div>
770
							</div>
771
						</form>
2366 jpm 772
 
2372 jpm 773
						<div class="row">
774
							<div class="col-md-12">
775
								<h2>Notes</h2>
776
								<textarea id="notes" form="form-obs" class="form-control col-md-12" rows="7" name="notes"
777
									placeholder="vous pouvez éventuellement ajouter des informations complémentaires à votre observation"></textarea>
778
							</div>
2366 jpm 779
						</div>
780
 
2372 jpm 781
						<div class="row">
782
							<form id="form-upload" class="form form-horizontal" role="form" action="<?= $url_ws_upload ?>"
783
								method="post" enctype="multipart/form-data">
784
								<div class="col-md-12">
785
									<h2>Image(s) de l'arbre</h2>
786
									<strong>Ajouter une image</strong>
2530 mathias 787
									<p class="miniature-info discretion help-inline">Les photos doivent être au format JPEG et ne doivent pas excéder 5Mo chacune.</p>
2372 jpm 788
									<div id ="photos-conteneur" class="form-group">
789
										<div class="col-sm-12">
790
											<input type="file" id="fichier" name="fichier" class="form-control" accept="image/jpeg" />
791
											<input type="hidden" name="MAX_FILE_SIZE" value="5242880"/>
792
										</div>
793
										<div id="miniatures"></div>
794
										<p class="miniature-msg col-md-12">&nbsp;</p>
795
									</div>
796
								</div>
797
							</form>
2360 jpm 798
						</div>
799
					</div>
800
				</div>
2372 jpm 801
 
802
				<div class="row">
803
					<div class="col-md-12 centre has-tooltip"
2543 mathias 804
						title="Une fois les champs remplis, cliquez sur ce bouton pour
2372 jpm 805
							ajouter votre observation à la liste à transmettre.">
806
						<button id="ajouter-obs" class="btn btn-primary btn-large" type="button">
807
							Créer
808
						</button>
809
					</div>
810
				</div>
2360 jpm 811
			</div>
812
 
813
			<!-- Messages d'erreur du formulaire-->
814
			<div class="row">
2372 jpm 815
				<div class="zone-alerte col-md-6 col-md-offset-3">
2360 jpm 816
					<div id="dialogue-bloquer-creer-obs" class="alert alert-warning alert-block" style="display: none;">
817
						<a class="close">×</a>
818
						<h4 class="alert-heading">Information : 10 observations maximum</h4>
819
						<p>
820
							Vous venez d'ajouter votre 10ème observation.<br/>
821
							Pour en ajouter de nouvelles, il est nécessaire de les transmettre en cliquant sur le bouton ci-dessous.
822
						</p>
823
					</div>
824
				</div>
2372 jpm 825
				<div class="zone-alerte col-md-6 col-md-offset-3">
2360 jpm 826
					<div id="dialogue-form-invalide" class="alert alert-warning alert-block" style="display: none;">
827
						<a class="close">×</a>
828
						<h4 class="alert-heading">Information : champs en erreur</h4>
829
						<p>
830
							Certains champs du formulaire sont mal remplis.<br/>
831
							Veuillez vérifier vos données.
832
						</p>
833
					</div>
834
				</div>
835
			</div>
836
 
837
			<!-- Affiche le tableau récapitulatif des observations ajoutées -->
2372 jpm 838
			<div id="zone-liste-obs" class="row">
839
				<div class="col-md-12">
840
					<div class="well well-lg">
841
						<div class="row">
842
							<div class="col-md-8">
2360 jpm 843
								<h2>Observations à transmettre : <span class="obs-nbre">0</span></h2>
844
							</div>
2372 jpm 845
							<div class="col-md-4 text-right">
2360 jpm 846
								<button id="transmettre-obs" class="btn btn-primary btn-large has-tooltip"
847
									type="button" disabled="disabled"
848
									title="Ajoute les observations ci-dessous à votre Carnet en Ligne et les rend publiques.">
849
									Transmettre
850
								</button>
851
							</div>
852
						</div>
853
						<div id="liste-obs" ></div>
854
						<div class="row">
2372 jpm 855
							<div class="zone-alerte col-md-6 col-md-offset-3">
2360 jpm 856
								<div id="dialogue-zero-obs" class="alert alert-block" style="display: none;">
857
									<a class="close">×</a>
858
									<h4 class="alert-heading">Attention : aucune observation</h4>
2530 mathias 859
									<p>Veuillez saisir des observations pour les transmettre.</p>
2360 jpm 860
								</div>
861
 
862
								<div id="dialogue-obs-transaction-ok" class="alert alert-success alert-block" style="display: none;"">
863
									<a class="close">×</a>
864
									<h4 class="alert-heading">Information : transmission des observations</h4>
865
									<div class="alert-txt"></div>
866
								</div>
867
 
868
								<div id="dialogue-obs-transaction-ko" class="alert alert-error alert-block" style="display: none;">
869
									<a class="close">×</a>
870
									<h4 class="alert-heading">Erreur : transmission des observations</h4>
871
									<div class="alert-txt"></div>
872
								</div>
873
							</div>
874
						</div>
875
 
876
					</div>
877
				</div>
878
			</div>
879
 
2372 jpm 880
			<footer class="row">
2374 jpm 881
				<p class="col-md-12 ">Réalisation &amp; hébergement : <a href="http://www.tela-botanica.org" target="_blank">Tela Botanica</a> 2014</p>
2360 jpm 882
			</footer>
883
 
884
			<!-- Templates HTML -->
885
			<div id="tpl-transmission-ok" style="display:none;">
886
				<p class="msg">
887
					Vos observations ont bien été transmises.<br />
888
					Elles sont désormais consultables à travers les différents outils de visualisation
889
					du réseau (<a href="http://www.tela-botanica.org/site:botanique">eFlore</a>,
2531 mathias 890
					<a href="http://www.tela-botanica.org/appli:pictoflora">Pictoflora</a>,
891
					<a href="http://www.tela-botanica.org/appli:del">Identiplante</a>,
2360 jpm 892
					<a href="http://www.tela-botanica.org/widget:cel:cartoPoint">cartographie (widget)</a>...)<br />
893
					Si vous souhaitez les modifier ou les supprimer, vous pouvez les retrouver en vous
2530 mathias 894
					connectant à votre <a href="http://www.tela-botanica.org/appli:cel">Carnet en Ligne</a>.<br />
2360 jpm 895
					N'oubliez pas qu'il est nécessaire de
896
					<a href="http://www.tela-botanica.org/page:inscription">s'inscrire à Tela Botanica</a>
897
					au préalable, si ce n'est pas déjà fait.
898
				</p>
899
			</div>
900
			<div id="tpl-transmission-ko" style="display:none;">
901
				<p class="msg">
902
					Une erreur est survenue lors de la transmission d'une observation (indiquée en rouge).<br />
903
					Vous pouvez tenter de la retransmettre en cliquant à nouveau sur le bouton transmettre ou bien la supprimer
904
					et transmettre les suivantes.<br />
905
					Néanmoins, les observations n'apparaissant plus dans la liste "observations à transmettre", ont bien été transmises lors de votre précédente tentative. <br />
906
					Si le problème persiste, vous pouvez signaler le dysfonctionnement sur
2601 mathias 907
					<a href="<?= $url_remarques ?>?service=cel&pageSource=<?php echo urlencode('http://'.$_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF'].'?'.$_SERVER['QUERY_STRING']); ?>"
2360 jpm 908
								  target="_blank"
909
								  onclick="javascript:window.open(this.getAttribute('href'), 'Tela Botanica - Remarques', config='height=700, width=640, scrollbars=yes, resizable=yes'); return false;">
910
								  le formulaire de signalement d'erreurs</a>.
911
				</p>
912
			</div>
913
 
914
			<!-- Fenêtres modales -->
2373 jpm 915
			<div id="chargement" class="modal-fenetre" style="display:none;">
916
				<div id="chargement-centrage" class="modal-contenu">
2377 jpm 917
					<div class="progress">
918
						<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="">
2373 jpm 919
							<span class="sr-only">0/10 observations transmises</span>
920
						</div>
921
					</div>
2377 jpm 922
 
2373 jpm 923
					<p id="chargement-txt" style="color:white;font-size:1.5em;">
924
						Transfert des observations en cours...<br />
925
						Cela peut prendre plusieurs minutes en fonction de la taille des images et du nombre
926
						d'observations à transférer.
927
					</p>
928
				</div>
929
			</div>
930
 
931
			<div id="projet-description" class="modal fade" tabindex="-1" role="dialog"
2360 jpm 932
				 aria-labelledby="projet-description-titre" aria-hidden="true">
2373 jpm 933
				<div class="modal-dialog">
934
					<div class="modal-content">
935
						<div class="modal-header">
936
							<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
937
								<span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
938
							</button>
939
							<h1 id="projet-description-titre" class="modal-title">Les arbres têtards</h1>
940
						</div>
941
						<div class="modal-body">
942
							<div class="dsc-imgs">
943
								<img src="<?=$url_base?>/modules/saisie/squelettes/arbres-tetards/img/dsc/tetard_simple.png" alt="Illustration d'un arbre tétârd"/>
944
							</div>
945
							<div class="dsc-infos text-justify">
946
								<h2>Qu'est-ce qu'un arbre têtard&nbsp;?</h2>
947
								<p>
948
									Les arbres taillés en têtard présentent une morphologie particulière du fait de l’entretien
949
									qu'ils ont connu au fil des ans. Leur tronc, plus ou moins tortueux, supporte une « tête »
950
									présentant de nombreux renflements. Cette partie de l’arbre s’est formée à la suite d’une
951
									taille répétée, créant ainsi des bourrelets cicatriciels et donnant un aspect très
952
									caractéristique à ces arbres.<br />
953
									De nombreuses essences d’arbres peuvent être conduites en têtard. En Isère, les plus
954
									fréquentes sont les saules, les frênes, les peupliers et aussi les mûriers.
955
								</p>
956
 
957
								<h2>Patrimoine naturel</h2>
958
								<p>
959
									Au fur et à mesure de la croissance et de la taille des arbres têtards, des <strong>cavités</strong> plus
960
									ou moins importantes s’ouvrent au cœur du tronc. Ces abris naturels sont occupés par de
961
									<strong>nombreuses espèces d’oiseaux et d’insectes</strong> s'y installant pour les conditions particulières
962
									que ces cavités procurent.<br/>
2530 mathias 963
									Outre leurs qualités de gîte et de source de nourriture, les trognes jouent
2373 jpm 964
									<strong>d'autres rôles écologiques</strong> en retenant les berges des
965
									cours d'eau, limitant les crues, protégeant les cultures des vents, etc.
966
								</p>
967
 
968
								<h2>Patrimoine culturel</h2>
969
								<p>
970
									Ces arbres sont les témoins de pratiques agricoles ancestrales. Ils produisent la matière
971
									première pour la <strong>vannerie</strong>, des <strong>liens flexibles</strong>
972
									pour l'agriculture (lier les fagots, attacher la vigne et les fruitiers,...),
973
									du <strong>fourrage</strong>, du <strong>bois de chauffage</strong>. De plus
974
									ils étaient largement utilisés pour marquer le bornage des parcelles agricoles ainsi
975
									que pour la <strong>sériciculture</strong>, afin de nourrir les vers à soie.<br />
976
									Enfin ce sont aujourd'hui des <strong>éléments remarquables de nos paysages</strong>
2530 mathias 977
									qui participent à l'identité culturelle de nos territoires.
2373 jpm 978
								</p>
979
								<p class="bg-success text-center">
980
									<strong>
981
										Afin d’œuvrer à leur conservation, nous avons besoin de vous :
2530 mathias 982
										transmettez-nous vos observations.
2373 jpm 983
									</strong>
984
								</p>
985
							</div>
986
						</div>
987
						<div class="modal-footer dsc-clean">
988
							<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Fermer</button>
989
						</div>
990
					</div>
2360 jpm 991
				</div>
2373 jpm 992
			</div>
2360 jpm 993
 
2373 jpm 994
			<div id="taille-description" class="modal fade" tabindex="-1" role="dialog"
995
				 aria-labelledby="taille-description-titre" aria-hidden="true">
996
				<div class="modal-dialog">
997
					<div class="modal-content">
998
						<div class="modal-header">
999
							<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
1000
								<span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
1001
							</button>
1002
							<h1 id="taille-description-titre" class="modal-title">Les types de taille les plus courants</h1>
1003
						</div>
1004
						<div class="modal-body text-center">
1005
							<div class="taille-img thumbnail">
2402 jpm 1006
								<div class="taille-img-alignement">
1007
									<img src="<?=$url_base?>/modules/saisie/squelettes/arbres-tetards/img/dsc/taille_tetard.png"
1008
										 alt="Illustration d'un arbre tétârd taillé en têtard ou trogne"/>
1009
									<div class="caption"><h3>En têtard ou trogne</h3></div>
1010
								</div>
2373 jpm 1011
							</div>
1012
							<div class="taille-img thumbnail">
2402 jpm 1013
								<div class="taille-img-alignement">
1014
									<img src="<?=$url_base?>/modules/saisie/squelettes/arbres-tetards/img/dsc/taille_tete_de_chat.png"
1015
										 alt="Illustration d'un arbre tétârd taillé en têtard de chat"/>
1016
									<div class="caption"><h3>En tête de chat</h3></div>
1017
								</div>
2373 jpm 1018
							</div>
1019
							<div class="taille-img thumbnail">
2402 jpm 1020
								<div class="taille-img-alignement">
1021
									<img src="<?=$url_base?>/modules/saisie/squelettes/arbres-tetards/img/dsc/taille_ragosse.png"
1022
										 alt="Illustration d'un arbre tétârd taillé en ragosse"/>
1023
									<div class="caption"><h3>En ragosse</h3></div>
1024
								</div>
2373 jpm 1025
							</div>
1026
						</div>
1027
						<div class="modal-footer dsc-clean">
1028
							<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Fermer</button>
1029
						</div>
1030
					</div>
2360 jpm 1031
				</div>
1032
			</div>
1033
		</div>
1034
	</body>
1035
</html>