Subversion Repositories eFlore/Applications.cel

Rev

Go to most recent revision | Details | 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>
24
 
25
		<!-- Jquery -->
2372 jpm 26
		<script src="http://resources.tela-botanica.org/jquery/1.11.1/jquery-1.11.1.min.js"></script>
2360 jpm 27
		<!-- Jquery UI : nécessaire pour le mini-calendrier et l'auto-complétion -->
2372 jpm 28
		<script src="http://resources.tela-botanica.org/jquery/jquery-ui/1.11.0/js/jquery-ui.min.js"></script>
29
		<script src="http://resources.tela-botanica.org/jquery/jquery-ui/1.11.0/js/datepicker-fr.js"></script>
2360 jpm 30
		<!-- Jquery Plugins -->
31
		<!-- Jquery Validate : nécessaire pour la validation des formulaires -->
2372 jpm 32
		<script src="http://resources.tela-botanica.org/jquery/validate/1.13.0/jquery.validate.min.js"></script>
33
		<script src="http://resources.tela-botanica.org/jquery/validate/1.13.0/localization/messages_fr.js"></script>
2360 jpm 34
		<!-- Jquery Form :nécessaire pour l'upload des images -->
2372 jpm 35
		<script src="http://resources.tela-botanica.org/jquery/form/3.51/jquery.form.min.js"></script>
2360 jpm 36
 
37
		<!-- Bootstrap -->
2372 jpm 38
		<script src="http://resources.tela-botanica.org/bootstrap/3.2.0/js/bootstrap.min.js"></script>
2360 jpm 39
		<script src="http://resources.tela-botanica.org/bootstrap/modal/2.2.5/js/bootstrap-modalmanager.js"></script>
40
		<script src="http://resources.tela-botanica.org/bootstrap/modal/2.2.5/js/bootstrap-modal.js"></script>
41
 
2366 jpm 42
		<!-- Proj4js -->
43
		<script type="text/javascript" src="http://resources.tela-botanica.org/proj4js/2.2.1/proj4.js"></script>
44
 
2360 jpm 45
		<!-- Javascript : appli saisie -->
2366 jpm 46
		<script src="<?=$url_base?>saisie?projet=arbres-tetards&amp;service=taxons" type="text/javascript"></script>
2360 jpm 47
		<script>
48
		//<![CDATA[
49
			// Précharger le formulaire avec les infos d'une observation
50
			var OBS_ID = "<?=isset($_GET['id-obs']) ? $_GET['id-obs'] : ''?>";
51
			// La présence du parametre 'debug' dans l'URL enclenche le dégogage
52
			var DEBUG = <?=isset($_GET['debug']) ? 'true' : 'false'?>;
53
 
54
			// Mot-clé du widget/projet
55
			var TAG_PROJET = "WidgetSaisie,ArbresTetards";
56
			// Mots-clés à ajouter aux images
57
			var TAG_IMG = "<?=isset($_GET['tag-img']) ? $_GET['tag-img'] : ''?>";
58
			var SEPARATION_TAG_IMG = "<?= isset($_GET['motcle']) && isset($_GET['tag-img']) ? ',' : '' ?>";
59
			TAG_IMG = <?=isset($_GET['motcle']) ? "'".$_GET['motcle']."' + SEPARATION_TAG_IMG + TAG_IMG" : 'TAG_IMG' ?>;
60
			// Mots-clés à ajouter aux observations
61
			var TAG_OBS = "<?=isset($_GET['tag-obs']) ? $_GET['tag-obs'] : ''?>";
62
			var SEPARATION_TAG_OBS = "<?= isset($_GET['projet']) && isset($_GET['tag-obs']) ? ',' : '' ?>";
63
			TAG_OBS = <?=isset($_GET['projet']) ? "'".$_GET['projet']."' + SEPARATION_TAG_OBS + TAG_OBS" : 'TAG_OBS' ?>;
64
 
65
			// Code du référentiel utilisé pour les nom scientifiques (de la forme nom:code).
66
			var NOM_SCI_REFERENTIEL = "<?=$ns_referentiel?>";
67
			// Nom du référentiel utilisé pour les nom scientifiques.
68
			var NOM_SCI_PROJET = "<?=$ns_projet?>";
69
 
70
			// Indication de la présence d'une espèce imposée
71
			var ESPECE_IMPOSEE = "<?=$espece_imposee; ?>";
72
			// Tableau d'informations sur l'espèce imposée
73
			var INFOS_ESPECE_IMPOSEE = <?=$infos_espece; ?>;
74
 
75
			// Indication des version utilisées de chaque référentiel
76
			var PROJETS_VERSIONS = <?=json_encode($projets_versions)?>;
77
			// Nombre d'élément dans les listes d'auto-complétion
78
			var AUTOCOMPLETION_ELEMENTS_NBRE = 20;
79
			// URL du web service permettant l'auto-complétion des noms scientifiques.
80
			var SERVICE_AUTOCOMPLETION_NOM_SCI_URL_TPL = "<?=$url_ws_autocompletion_ns_tpl?>?"+
81
					"masque={masque}&"+
82
					"recherche=etendue&"+
83
					"retour.champs=famille,nom_retenu,nom_retenu_complet,num_taxonomique,nom_retenu.id&"+
84
					"retour.tri=alpharet&"+ // tri "à la CeL"
85
					"ns.structure=au"+"&"+
86
					"navigation.limite="+AUTOCOMPLETION_ELEMENTS_NBRE;
87
 
88
			// Nombre d'observations max autorisé avant transmission
89
			var OBS_MAX_NBRE = 10;
90
			// Durée d'affichage en milliseconde des messages d'informations
91
			var DUREE_MESSAGE = 15000;
92
 
93
			// URL du web service permettant de récupérer les infos d'une observation du CEL.
94
			var SERVICE_OBS_URL = "<?=$url_ws_obs?>";
95
			// URL du web service réalisant l'insertion des données dans la base du CEL.
96
			var SERVICE_SAISIE_URL = "<?=$url_ws_saisie?>";
97
			// Squelette d'URL du web service de l'annuaire.
98
			var SERVICE_ANNUAIRE_ID_URL = "<?=$url_ws_annuaire?>";
99
			// Squelette d'URL du web service d'eFlore fournissant les noms de communes.
100
			var SERVICE_NOM_COMMUNE_URL = "http://api.tela-botanica.org/service:eflore:0.1/osm/nom-commune?lon={lon}&lat={lat}";
2366 jpm 101
			// Squelette d'URL du web service d'eFlore fournissant l'altitude
102
			var SERVICE_ALTITUDE_URL = "http://api.tela-botanica.org/service:eflore:0.1/nasa-srtm/altitude?lon={lon}&lat={lat}";
2360 jpm 103
 
104
			// URL du marqueur à utiliser dans la carte Google Map
105
			var GOOGLE_MAP_MARQUEUR_URL = "<?=$url_base?>modules/saisie/squelettes/arbres-tetards/img/marqueurs/epingle.png";
106
			// URL de l'icône du chargement en cours
107
			var CHARGEMENT_ICONE_URL = "<?=$url_base?>modules/saisie/squelettes/arbres-tetards/img/icones/chargement.gif";
108
			// URL de l'icône du chargement en cours d'une image
109
			var CHARGEMENT_IMAGE_URL = "<?=$url_base?>modules/saisie/squelettes/arbres-tetards/img/icones/chargement-image.gif";
110
			// URL de l'icône du calendrier
111
			var CALENDRIER_ICONE_URL = "<?=$url_base?>modules/saisie/squelettes/arbres-tetards/img/icones/calendrier.png";
112
			// URL de l'icône du calendrier
113
			var PAS_DE_PHOTO_ICONE_URL = "<?=$url_base?>modules/saisie/squelettes/arbres-tetards/img/icones/pasdephoto.png";
114
 
115
		//]]>
116
		</script>
117
		<script src="<?=$url_base?>modules/saisie/squelettes/arbres-tetards/js/arbres-tetards.js"></script>
118
 
119
		<!-- CSS -->
2372 jpm 120
		<link rel="stylesheet" href="http://resources.tela-botanica.org/jquery/jquery-ui/1.11.0/css/themes/smoothness/jquery-ui.min.css" />
121
		<link rel="stylesheet" href="http://resources.tela-botanica.org/jquery/jquery-ui/1.11.0/css/themes/smoothness/theme.css" />
122
		<link rel="stylesheet" href="http://resources.tela-botanica.org/bootstrap/3.2.0/css/bootstrap.min.css" />
123
		<link rel="stylesheet" href="http://resources.tela-botanica.org/bootstrap/3.2.0/css/bootstrap-theme.min.css" />
2360 jpm 124
		<link rel="stylesheet" href="http://resources.tela-botanica.org/bootstrap/modal/2.2.5/css/bootstrap-modal.css" />
125
		<link rel="stylesheet" href="<?=$url_base?>modules/saisie/squelettes/arbres-tetards/css/<?=isset($_GET['style']) ? $_GET['style'] : 'arbres-tetards'?>.css" />
126
 
127
	</head>
128
 
129
	<body data-spy="scroll">
130
		<div class="container">
2372 jpm 131
			<div class="page-header">
132
				<h1>
133
					<img id="logo-titre" src="<?=$url_base?>/modules/saisie/squelettes/arbres-tetards/img/logos/gentiana.png" alt="Gentiana" />
134
					 Arbres têtards de l'Isère
135
				</h1>
2360 jpm 136
			</div>
2372 jpm 137
			<div class="row">
138
				<div class="col-md-6">
139
					<div id="intro" class="well well-lg">
140
						<a class="fermer" data-toggle="collapse" data-target="#intro-txt">
141
							<h3 class="titre">
142
								Le projet
143
								<span class="glyphicon glyphicon-plus-sign"></span>
144
							</h3>
145
						</a>
146
						<div id="intro-txt" class="collapse in">
2360 jpm 147
							<p>
148
								Les arbres têtards (trognes), sont des arbres taillés exploités depuis des siècles
149
								pour leurs branches ou leurs feuilles.
150
							</p>
151
							<p>
152
								La taille consiste à couper la tête de l’arbre à environ 2m du sol. Les branches
153
								repoussent en couronne au sommet du tronc et sont taillées au même endroit tous
154
								les 5 à 12 ans. De nombreuses espèces de feuillus peuvent être taillées en têtard,
155
								les plus fréquentes sont les saules, les frênes, les peupliers et aussi les muriers.
156
							</p>
157
							<p>
158
								Ces arbres, témoins d’anciennes pratiques agricoles, embellissent le paysage,
159
								retiennent les berges, participent au maintien des zones humides et abritent de
160
								nombreuses espèces végétales et animales dont beaucoup sont menacées.<br />
161
								Victimes de la modernisation de l’agriculture et de l’urbanisation des zones
162
								rurales, ces arbres remarquables disparaissent !
163
							</p>
164
							<p>
165
								C’est pourquoi <a href="http://www.gentiana.org/" target="_blank">Gentiana</a>
166
								a lancé un programme de suivi, de sauvegarde et de restauration des arbres têtards
167
								en Isère. Ce projet a pour but de mieux faire connaître ces arbres, de les entretenir,
168
								de restaurer les arbres à l’abandon et d’en replanter.
169
							</p>
170
							<p>
171
								La première chose à faire est un état des lieux des arbres têtards sur tout le
172
								département de l’Isère.<br />
173
								<strong>Nous avons besoin de vous pour améliorer notre connaissance !</strong><br />
174
								Vous pouvez nous aider en nous signalant les arbres têtards que vous connaissez
175
								à l’aide du formulaire suivant.
176
							</p>
177
						</div>
178
					</div>
179
				</div>
180
 
2372 jpm 181
				<div class="col-md-6">
182
					<div id="aide" class="well well-lg">
183
						<a class="fermer" data-toggle="collapse" data-target="#aide-txt">
184
							<h3 class="titre">
185
								Aide
186
								<span class="glyphicon glyphicon-plus-sign"></span>
187
							</h3>
188
						</a>
189
						<div id="aide-txt" class="collapse in">
2360 jpm 190
							<p>
191
								Cet outil vous permet de partager simplement vos observations avec
192
								<a href="http://www.gentiana.org/" target="_blank">Gentiana</a> et le
193
								<a href="http://www.tela-botanica.org/site:accueil">réseau Tela Botanica</a>
194
								(sous <a href="http://www.tela-botanica.org/page:licence?langue=fr">licence CC-BY-SA</a>).
195
								Identifiez-vous bien pour ensuite retrouver et gérer vos données dans
196
								<a href="http://www.tela-botanica.org/appli:cel">votre Carnet en ligne</a>.
197
								Créez jusqu'à 10 observations (avec 10Mo max d'images) puis partagez-les avec le bouton 'transmettre'.
198
								Elles apparaissent immédiatement sur les
199
								<a href="http://www.tela-botanica.org/site:botanique">cartes et galeries photos </a> du site.
200
							</p>
201
							<p class="discretion">
202
								Pour toute question ou remarque,
203
								<a href="<?= $url_remarques ?>?email=cel_remarques@tela-botanica.org&pageSource=<?php echo urlencode('http://'.$_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF'].'?'.$_SERVER['QUERY_STRING']); ?>"
204
									target="_blank"
205
									onclick="javascript:window.open(this.getAttribute('href'), 'Tela Botanica - Remarques', config='height=700, width=640, scrollbars=yes, resizable=yes'); return false;">
206
									contactez-nous</a>
207
							</p>
208
							<p class="discretion">
2372 jpm 209
								Une fois familiarisé avec l'interface vous pouvez cliquer sur le bouton suivant pour désactiver l'aide&nbsp;:
210
								<button id="btn-aide" class="btn btn-xs btn-success">
211
									<span class="glyphicon glyphicon-question-sign icon-white"></span>
212
									<span id="btn-aide-txt">Désactiver l'aide</span>
2360 jpm 213
								</button>
214
							</p>
215
						</div>
216
					</div>
217
				</div>
218
			</div>
2372 jpm 219
 
220
			<div class="well well-lg">
221
				<h2>Observateur</h2>
222
				<form id="form-observateur" role="form" autocomplete="on">
223
					<div class="row">
224
						<div class="col-md-6 form-group has-tooltip" data-placement="right"
225
							title="Saisissez le courriel avec lequel vous être inscrit à Tela Botanica.
226
								Si vous n'êtes pas inscrit, ce n'est pas grave, vous pourrez le faire
227
								ultérieurement. Des informations complémentaires vont vous être
228
								demandées : prénom et nom.">
229
							<label for="courriel"  title="Veuillez saisir votre adresse courriel.">
230
								<strong class="obligatoire">*</strong>
231
								Courriel
232
							</label>
233
							<div class="input-group">
234
								<span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span>
235
								<input id="courriel" name="courriel" class="form-control" type="text"/>
236
								<input id="id_utilisateur" name="id_utilisateur" type="hidden"/>
2360 jpm 237
							</div>
2372 jpm 238
						</div>
239
						<div id="zone-courriel-confirmation" class="col-md-6 form-group has-feedback hidden">
240
							<label for="courriel_confirmation" title="Veuillez saisir confirmer le courriel.">
241
								<strong class="obligatoire">*</strong> Courriel (confirmation)
242
							</label>
243
							<div class="input-group">
244
								<span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span>
245
								<input id="courriel_confirmation" name="courriel_confirmation" class="form-control" type="text"/>
2360 jpm 246
							</div>
247
						</div>
2372 jpm 248
					</div>
249
					<div id="zone-prenom-nom" class="row hidden">
250
						<div class="col-md-6 form-group">
251
							<label for="prenom">Prénom</label>
252
							<div class="input-group">
253
								<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
254
								<input id="prenom" name="prenom" class="form-control" type="text"/>
2360 jpm 255
							</div>
2372 jpm 256
						</div>
257
						<div class="col-md-6 form-group">
258
							<label for="nom">Nom</label>
259
							<div class="input-group">
260
								<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
261
								<input id="nom" name="nom" class="form-control" type="text"/>
2360 jpm 262
							</div>
263
						</div>
2372 jpm 264
					</div>
265
				</form>
2360 jpm 266
			</div>
2372 jpm 267
 
2360 jpm 268
			<!-- Messages d'erreur du formulaire-->
269
			<div class="row">
2372 jpm 270
				<div class="zone-alerte col-md-6 col-md-offset-3">
2360 jpm 271
					<div id="dialogue-bloquer-copier-coller" class="alert alert-info alert-block" style="display:none;">
2372 jpm 272
						<button type="button" class="close"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
2360 jpm 273
						<h4 class="alert-heading">Information : copier/coller</h4>
274
						<p>
275
							Merci de ne pas copier/coller votre courriel.<br/>
276
							La double saisie permet de vérifier l'absence d'erreurs.
277
						</p>
278
					</div>
279
					<div id="dialogue-courriel-introuvable" class="alert alert-info alert-block" style="display:none;">
2372 jpm 280
						<button type="button" class="close"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
2360 jpm 281
						<h4 class="alert-heading">Information : courriel introuvable</h4>
282
						<p>
283
							Vous n'êtes pas inscrit à Tela Botanica avec ce courriel.<br/>
284
							Veuillez compléter les champs supplémentaires ou indiquer votre courriel d'inscription.<br/>
285
							Pour retrouver vos observations dans le <a href="http://www.tela-botanica.org/appli:cel">Carnet en ligne</a>,
286
							il sera nécesaire de <a href="http://www.tela-botanica.org/page:inscription">vous inscrire à Tela Botanica</a>.
287
						</p>
288
					</div>
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>
2360 jpm 291
						<h4 class="alert-heading">Information sur Google Map</h4>
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>
2372 jpm 309
							<div class="col-md-8 text-right">
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>
313
										<div class="input-group">
314
											<input id="carte-recherche" class="form-control has-tooltip" type="search" value=""
2366 jpm 315
													title="Permet de centrer la carte sur le lieu recherché."
316
													placeholder="Centrer la carte sur un lieu..."/>
2372 jpm 317
											<span class="input-group-addon"><span class="glyphicon glyphicon-search"></span></span>
318
										</div>
2366 jpm 319
									</div>
2372 jpm 320
								</form>
321
							</div>
322
						</div>
323
						<div class="row">
324
							<div class="col-md-12">
325
								<div id="map-canvas" class="has-tooltip"
326
									title="Vous pouvez cliquer sur la carte pour déplacer le marqueur
327
										représentant votre station ou bien le glisser-déposer sur
328
										le lieu souhaité."></div>
329
							</div>
330
						</div>
331
						<div class="row">
332
							<div id="info-altitude" class="col-md-5">
333
								<span>Altitude : </span>
334
								<span id="marqueur-altitude"><span id="altitude"></span> m</span>
335
							</div>
336
 
337
							<div id="info-commune" class="col-md-7">
338
								<span>Commune : </span>
339
								<span id="marqueur-commune">
340
									<span id="commune-nom" class="commune-info"></span>
341
									(<span id="commune-code-insee" class="commune-info has-tooltip"
342
										title="Code INSEE de la commune"></span>)
343
								</span>
344
							</div>
345
						</div>
346
					</div>
347
					<div class="col-md-6">
348
						<form id="form-station" class="form-horizontal" role="form" autocomplete="on">
349
							<div class="form-group has-tooltip"
350
								title="Toponyme plus précis que la commune, utilisé localement et se trouvant souvent sur les cartes au 1/25 000." >
351
								<label for="lieudit" class="col-sm-2 control-label">
352
									<strong class="obligatoire">*</strong>
353
									Lieu-dit
354
								</label>
355
								<div class="col-sm-10">
356
									<input id="lieudit" name="lieudit" class="form-control" type="text" />
2366 jpm 357
								</div>
2372 jpm 358
							</div>
2366 jpm 359
 
2372 jpm 360
							<div class="form-group has-tooltip"
361
								title="Sélectionnez une ou plusieurs situations correspondant au site.">
362
								<label for="milieux[]"class="col-sm-2 control-label">Situation(s)</label>
363
								<div id="milieux-controls" class="col-sm-10">
364
									<div class="btn-group dropdown">
365
										<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
366
											<span class="glyphicon glyphicon-globe"></span>
367
											Sélectionner une ou plusieurs situations
368
											<span class="caret"></span>
369
										</button>
370
										<ul class="dropdown-menu col-sm-12" role="menu" aria-labelledby="dLabel">
371
											<li class="checkbox" role="presentation">
372
												<a role="menuitem">
373
													<label>
374
														<input name="milieux[]" class="cb-milieux" type="checkbox" value="séparation de parcelle"/>
375
														Séparation de parcelle
376
													</label>
377
												</a>
378
											</li>
379
											<li class="checkbox" role="presentation">
380
												<a role="menuitem">
381
													<label>
382
														<input name="milieux[]" class="cb-milieux" type="checkbox" value="proximité de bâtiment"/>
383
														Proximité de bâtiment
384
													</label>
385
												</a>
386
											</li>
387
											<li class="checkbox" role="presentation">
388
												<a role="menuitem">
389
													<label>
390
														<input name="milieux[]" class="cb-milieux" type="checkbox" value="plein champ"/>
391
														Plein champ
392
													</label>
393
												</a>
394
											</li>
395
											<li class="checkbox" role="presentation">
396
												<a role="menuitem">
397
													<label>
398
														<input name="milieux[]" class="cb-milieux" type="checkbox" value="jardin de particulier"/>
399
														Jardin de particulier
400
													</label>
401
												</a>
402
											</li>
403
											<li class="checkbox" role="presentation">
404
												<a role="menuitem">
405
													<label>
406
														<input name="milieux[]" class="cb-milieux" type="checkbox" value="bord de cours d'eau"/>
407
														Bord de cours d'eau
408
													</label>
409
												</a>
410
											</li>
411
											<li class="checkbox" role="presentation">
412
												<a role="menuitem">
413
													<label>
414
														<input name="milieux[]" class="cb-milieux" type="checkbox" value="bord de chemin"/>
415
														Bord de chemin
416
													</label>
417
												</a>
418
											</li>
419
											<li class="checkbox" role="presentation">
420
												<a role="menuitem">
421
													<label>
422
														<input name="milieux[]" class="cb-milieux" type="checkbox" value="intégré à une haie"/>
423
														Intégré à une haie
424
													</label>
425
												</a>
426
											</li>
427
											<li class="checkbox" role="presentation">
428
												<a role="menuitem">
429
													<label>
430
														<input name="milieux[]" class="cb-milieux" type="checkbox" value="en forêt"/>
431
														En forêt
432
													</label>
433
												</a>
434
											</li>
435
											<li class="checkbox" role="presentation">
436
												<a role="menuitem">
437
													<label>
438
														<input name="milieux[]" class="cb-milieux" type="checkbox" value="en zone humide"/>
439
														En zone humide
440
													</label>
441
												</a>
442
											</li>
443
										</ul>
2366 jpm 444
									</div>
445
								</div>
446
							</div>
447
 
2372 jpm 448
							<div class="row">
449
								<div class="col-md-12">
450
									<button class="afficher-coord btn-coord btn btn-default"
451
											data-toggle-text="Cacher les coordonnées (WGS 84 et Lambert 93)">
452
										Afficher les coordonnées (WGS 84 et Lambert 93)
453
									</button>
454
									<div id="coordonnees-geo" class="well hidden">
455
										<div class="row">
456
											<div class="col-md-4">
457
												<div id="coord-lat" class="form-group form-group-sm">
458
													<label for="latitude" class="col-sm-4 control-label">Latitude</label>
459
													<div class="col-sm-8">
460
														<input id="latitude" class="form-control" name="latitude" type="text"
461
															title="Latitude (WGS 84)" value=""/>
2366 jpm 462
													</div>
2360 jpm 463
												</div>
2366 jpm 464
											</div>
2372 jpm 465
											<div class="col-md-5">
466
												<div id="coord-lng" class="form-group form-group-sm">
467
													<label for="latitude" class="col-sm-4 control-label">Longitude</label>
468
													<div class="col-sm-8">
469
														<input id="longitude" class="form-control" name="longitude" type="text"
470
															title="Longitude (WGS 84)" value=""/>
471
													</div>
472
												</div>
2360 jpm 473
											</div>
2372 jpm 474
											<div class="col-md-2">
475
												<div id="coord-lng" class="form-group form-group-sm">
476
													<input type="button" id="geolocaliser"
477
														class="btn btn-default btn-sm has-tooltip"
478
														title="Centre la carte sur les coordonnées de latitude et longitude saisies."
479
														value="Voir sur la carte"/>
480
												</div>
2360 jpm 481
											</div>
482
										</div>
2372 jpm 483
 
484
										<div class="row">
485
											<div class="col-md-6">
486
												<div id="coord-l93-x" class="form-group">
487
													<label for="l93-x" class="col-sm-6 control-label">X Lambert 93</label>
488
													<div class="col-sm-5">
489
														<input id="l93-x" disabled type="text" class="input-sm form-control obs-chp-etendu"
490
																name="coordonneeLambert93X"
491
																data-label="Lambert 93 X"
492
																value=""/>
493
													</div>
494
												</div>
2360 jpm 495
											</div>
2372 jpm 496
											<div class="col-md-6">
497
												<div id="coord-l93-y" class="form-group">
498
													<label for="l93-y" class="col-sm-6 control-label">Y Lambert 93</label>
499
													<div class="col-sm-5">
500
														<input id="l93-y" disabled type="text" class="input-sm form-control obs-chp-etendu"
501
																name="coordonneeLambert93Y"
502
																data-label="Lambert 93 Y"
503
																value=""/>
504
													</div>
505
												</div>
2366 jpm 506
											</div>
2360 jpm 507
										</div>
2366 jpm 508
									</div>
2372 jpm 509
								</div>
2366 jpm 510
							</div>
2372 jpm 511
						</form>
512
					</div>
513
				</div>
2360 jpm 514
 
2372 jpm 515
				<div class="row">
516
					<div class="col-md-6">
517
						<form id="form-obs" class="form-horizontal" role="form" autocomplete="on">
518
							<h2>Arbre observé</h2>
519
							<input id="referentiel" type="hidden" value="bdtfx" />
2360 jpm 520
 
2372 jpm 521
							<div class="form-group has-tooltip"
522
									title="Vous pouvez cliquer sur l'icône de calendrier pour
523
										sélectionner une date dans un calendrier.">
524
								<label for="date" class=" col-sm-4 control-label"
525
									   title="Veuillez indiquer la date du relevé au format jj/mm/aaaa">
526
									<strong class="obligatoire">*</strong>
527
									Date du relevé
528
								</label>
529
								<div class="col-sm-8">
530
									<div class="input-group">
531
										<span id="date-icone" class="input-group-addon"></span>
532
										<input id="date" name="date" class="form-control" type="text" placeholder="jj/mm/aaaa" />
2366 jpm 533
									</div>
2372 jpm 534
								</div>
535
							</div>
2360 jpm 536
 
2372 jpm 537
							<div id="taxon-liste-input-groupe" class="form-group has-tooltip"
538
								title="Sélectionnez une espèce dans la liste déroulante par son nom latin
539
								ou commun. Si une espèce est absente, sélectionner «Autre espèce»." >
540
								<label for="taxon-liste" class="col-sm-4 control-label" title="Choisissez l'espèce rencontrée.">
541
									<strong class="obligatoire">*</strong>
542
									Espèces
543
								</label>
544
								<div class="col-sm-8">
545
									<div class="input-group">
546
										<span class="input-group-addon">
547
											<span class="glyphicon glyphicon-leaf"></span>
548
										</span>
2360 jpm 549
 
2372 jpm 550
										<select id="taxon-liste" name="taxon-liste" class="form-control">
551
											<option value="" selected>Sélectionner une espèce</option>
2366 jpm 552
 
2372 jpm 553
											<optgroup id="taxon-liste-noms">
554
												<?php foreach ($taxons['sci-et-fr'] as $taxon) :?>
555
													<option
556
														class="<?=$taxon['nom_type'] ?>"
557
														value="<?=$taxon['num_nom'] ?>"
558
														title="<?=$taxon['nom_title'] ?>"
559
														data-nom-a-sauver="<?=$taxon['nom_a_sauver'] ?>"
560
														>
561
														<?=$taxon['nom_a_afficher']?>
562
													</option>
563
												<?php endforeach; ?>
564
											</optgroup>
565
											<optgroup id="taxon-liste-special">
566
												<?php foreach ($taxons['speciaux'] as $taxon) :?>
567
													<option
568
														class="<?=$taxon['nom_type'] ?>"
569
														value="<?=$taxon['num_nom'] ?>"
570
														title="<?=$taxon['nom_title'] ?>"
571
														data-nom-a-sauver="<?=$taxon['nom_a_sauver'] ?>"
572
														>
573
														<?=$taxon['nom_a_afficher']?>
574
													</option>
575
												<?php endforeach; ?>
576
												<option value="?">Autre espèce</option>
577
											</optgroup>
578
										</select>
2366 jpm 579
									</div>
2372 jpm 580
								</div>
581
							</div>
2360 jpm 582
 
2372 jpm 583
							<div id="taxon-input-groupe" class="form-group has-tooltip hidden"
584
								title="Sélectionnez une espèce dans la liste déroulante pour lier
585
									votre nom au référentiel. Si vous le désirez vous pouvez aussi saisir
586
									un nom absent du référentiel (Ex. : 'fleur violette' ou 'Viola sp.1')." >
587
								<label for="taxon" class="col-sm-4 control-label" title="Choisissez l'espèce rencontrée.">
588
									<strong class="obligatoire">*</strong>
589
									Autre espèce
590
								</label>
591
								<div class="col-sm-8">
592
									<input id="taxon" name="taxon" type="text" class="form-control"
593
										placeholder="Autre espèce (ou indication sur la plante)"
594
										value="<?= $nom_sci_espece_defaut; ?>" />
595
								</div>
596
							</div>
2360 jpm 597
 
2372 jpm 598
							<div class="form-group has-tooltip"
599
									title="Indiquez la certitude de votre détermination.">
600
								<label for="certitude" class="col-sm-4 control-label">
601
									<strong class="obligatoire">*</strong>
602
									Identification de l'arbre
603
								</label>
604
								<div class="col-sm-8">
605
									<select id="certitude" class="form-control" name="certitude">
606
										<option selected value="">Sélectionnez une certitude</option>
607
										<option value="certaine">Certaine</option>
608
										<option value="douteuse">Douteuse</option>
609
										<option value="A déterminer">À déterminer</option>
610
									</select>
611
								</div>
612
							</div>
2366 jpm 613
 
2372 jpm 614
							<div class="form-group has-tooltip"
615
									title="Indiquez le type de formation de l'arbre ou des arbres têtards.">
616
								<label for="formation" class="col-sm-4 control-label">
617
									<strong class="obligatoire">*</strong>
618
									Formation
619
								</label>
620
								<div class="col-sm-8 select-container">
621
									<select id="formation" class="form-control obs-chp-etendu"
622
											name="arbreTetardFormation"
623
											data-label="Type de formation">
624
										<option selected value="">Sélectionnez une formation</option>
625
										<option value="alignement">Arbres d'alignement</option>
626
										<option value="isolé">Arbre isolé</option>
627
									</select>
628
								</div>
629
							</div>
2360 jpm 630
 
2372 jpm 631
							<div id="aligne-nbre-groupe" class="form-group has-tooltip hidden"
632
								title="Indiquez le nombre d'arbres têtards alignés." >
633
								<label for="aligne-nbre" class="col-sm-4 control-label">
634
									<strong class="obligatoire">*</strong>
635
									Nombre d'arbres
636
								</label>
637
								<div class="col-sm-4">
638
									<input id="aligne-nbre" type="number" class="form-control obs-chp-etendu"
639
										min="2"
640
										name="arbreTetardAligneNbre"
641
										data-label="Nombre d'arbres d'alignement"
642
										value="" />
643
								</div>
644
							</div>
2366 jpm 645
 
2372 jpm 646
							<div class="form-group has-tooltip"
647
									title="Indiquez si des cavités sont présentes sur l'arbre.">
648
								<label for="cavites" class="col-sm-4 control-label">
649
									Cavités
650
								</label>
651
								<div class="col-sm-8">
652
									<select id="cavites" class="form-control obs-chp-etendu"
653
											name="arbreTetardPresenceCavite"
654
											data-label="Présence de cavités">
655
										<option selected value="">Sélectionnez la présence de cavités</option>
656
										<option value="aucune">Aucune</option>
657
										<option value="petite">Oui, petite(s)</option>
658
										<option value="grande">Oui, grande(s)</option>
659
									</select>
660
								</div>
661
							</div>
2360 jpm 662
 
2372 jpm 663
							<div class="form-group has-tooltip"
664
									title="Indiquez la circonférence à 1m du sol.">
665
								<label for="circonference" class="col-sm-4 control-label">
666
									Circonférence
667
								</label>
668
								<div class="col-sm-8">
669
									<select id="circonference" class="form-control obs-chp-etendu"
670
											name="arbreTetardCirconferenceA1m"
671
											data-label="Circonférence à 1 m du sol">
672
										<option selected value="">Sélectionnez la circonférence (à 1m du sol)</option>
673
										<option value="0-0,5">0 à 0,5m</option>
674
										<option value="0,5-2">0,5 à 2m</option>
675
										<option value="2-3">2 à 3m</option>
676
										<option value="+3">&gt; à 3m</option>
677
									</select>
678
								</div>
2366 jpm 679
							</div>
2360 jpm 680
 
2372 jpm 681
							<div class="form-group has-tooltip"
682
									title="Indiquez la hauteur de la tête.">
683
								<label for="hauteur-tete" class="col-sm-4 control-label">
684
									Hauteur de la tête
685
								</label>
686
								<div class="col-sm-8">
687
									<select id="hauteur-tete" class="form-control obs-chp-etendu"
688
											name="arbreTetardHauteurTete"
689
											data-label="Hauteur de la tête">
690
										<option selected value="">Sélectionnez la hauteur</option>
691
										<option value="0-1,5">0 à 1,5m</option>
692
										<option value="1,5-3">1,5 à 3m</option>
693
										<option value="+3">&gt; à 3m</option>
694
									</select>
695
								</div>
696
							</div>
2366 jpm 697
 
2372 jpm 698
							<div class="form-group">
699
								<label for="presence-sp" class="col-sm-12 control-label">Espèces présentes sur l'arbre (végétale ou animale)</label>
700
								<div class="col-sm-12">
701
									<textarea id="presence-sp" class="form-control obs-chp-etendu" rows="7"
702
										name="arbreTetardPresenceSp"
703
										data-label="Présence d'espèces sur l'arbre"
704
										placeholder="Vous pouvez éventuellement indiquez 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>
705
								</div>
706
							</div>
707
						</form>
708
					</div>
2366 jpm 709
 
2372 jpm 710
					<div class="col-md-6">
711
						<form id="form-gestion" class="form-horizontal" role="form" autocomplete="on">
712
							<h2>Gestion de l'arbre</h2>
2366 jpm 713
 
2372 jpm 714
							<div class="form-group has-tooltip"
715
									title="Indiquez le type de taille de l'arbre.">
716
								<label for="taille-type" class="col-sm-4 control-label">
717
									Type de taille
718
								</label>
719
								<div class="col-sm-8">
720
									<select id="taille-type" class="form-control obs-chp-etendu"
721
											name="arbreTetardTailleType"
722
											data-label="Type de taille">
723
										<option selected value="">Sélectionnez le type de taille</option>
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>
2366 jpm 729
								</div>
2372 jpm 730
							</div>
2366 jpm 731
 
2372 jpm 732
							<div class="form-group has-tooltip"
733
									title="Indiquez le type d’entretient de l'arbre, en précisant la périodicité des coupes.">
734
								<label for="entretient" class="col-sm-4 control-label">
735
									Type d'entretient
736
								</label>
737
								<div class="col-sm-8">
738
									<select id="entretient" class="form-control obs-chp-etendu"
739
											name="arbreTetardEntretientCoupe"
740
											data-label="Type d'entretient">
741
										<option selected value="">Sélectionnez la périodicité des coupes d'entretient</option>
742
										<option value="récente">Coupe récente (< 5 ans ; branches de diamètre < 10cm)</option>
743
										<option value="ancienne">Ancienne (5 à 10 ans ; diamètre des branches entre 10 et 15 cm )</option>
744
										<option value="non entretenu">Non entretenu ( diamètre des branches > 15 cm)</option>
745
									</select>
746
								</div>
2360 jpm 747
							</div>
2366 jpm 748
 
2372 jpm 749
							<div class="form-group has-tooltip"
750
									title="Indiquez l'état sanitaire de l'arbre têtard.">
751
								<label for="etat-sanitaire" class="col-sm-4 control-label">
752
									État sanitaire
753
								</label>
754
								<div class="col-sm-8">
755
									<select id="etat-sanitaire" class="form-control obs-chp-etendu"
756
											name="arbreTetardEtatSanitaire"
757
											data-label="État sanitaire">
758
										<option selected value="">Sélectionnez l'état sanitaire</option>
759
										<option value="mort">Mort</option>
760
										<option value="dépérissant">Dépérissant</option>
761
										<option value="bon">Bon état général</option>
762
									</select>
763
								</div>
764
							</div>
765
						</form>
2366 jpm 766
 
2372 jpm 767
						<div class="row">
768
							<div class="col-md-12">
769
								<h2>Notes</h2>
770
								<textarea id="notes" form="form-obs" class="form-control col-md-12" rows="7" name="notes"
771
									placeholder="vous pouvez éventuellement ajouter des informations complémentaires à votre observation"></textarea>
772
							</div>
2366 jpm 773
						</div>
774
 
2372 jpm 775
						<div class="row">
776
							<form id="form-upload" class="form form-horizontal" role="form" action="<?= $url_ws_upload ?>"
777
								method="post" enctype="multipart/form-data">
778
								<div class="col-md-12">
779
									<h2>Image(s) de l'arbre</h2>
780
									<strong>Ajouter une image</strong>
781
									<p class="miniature-info discretion help-inline">Les photos doivent être au format JPEG et ne doivent pas excéder 5Mo chacunes.</p>
782
									<div id ="photos-conteneur" class="form-group">
783
										<div class="col-sm-12">
784
											<input type="file" id="fichier" name="fichier" class="form-control" accept="image/jpeg" />
785
											<input type="hidden" name="MAX_FILE_SIZE" value="5242880"/>
786
										</div>
787
										<div id="miniatures"></div>
788
										<p class="miniature-msg col-md-12">&nbsp;</p>
789
									</div>
790
								</div>
791
							</form>
2360 jpm 792
						</div>
793
					</div>
794
				</div>
2372 jpm 795
 
796
				<div class="row">
797
					<div class="col-md-12 centre has-tooltip"
798
						title="Une fois les champs remplis, vous pouvez cliquer sur ce bouton pour
799
							ajouter votre observation à la liste à transmettre.">
800
						<button id="ajouter-obs" class="btn btn-primary btn-large" type="button">
801
							Créer
802
						</button>
803
					</div>
804
				</div>
2360 jpm 805
			</div>
806
 
807
			<!-- Messages d'erreur du formulaire-->
808
			<div class="row">
2372 jpm 809
				<div class="zone-alerte col-md-6 col-md-offset-3">
2360 jpm 810
					<div id="dialogue-bloquer-creer-obs" class="alert alert-warning alert-block" style="display: none;">
811
						<a class="close">×</a>
812
						<h4 class="alert-heading">Information : 10 observations maximum</h4>
813
						<p>
814
							Vous venez d'ajouter votre 10ème observation.<br/>
815
							Pour en ajouter de nouvelles, il est nécessaire de les transmettre en cliquant sur le bouton ci-dessous.
816
						</p>
817
					</div>
818
				</div>
2372 jpm 819
				<div class="zone-alerte col-md-6 col-md-offset-3">
2360 jpm 820
					<div id="dialogue-form-invalide" class="alert alert-warning alert-block" style="display: none;">
821
						<a class="close">×</a>
822
						<h4 class="alert-heading">Information : champs en erreur</h4>
823
						<p>
824
							Certains champs du formulaire sont mal remplis.<br/>
825
							Veuillez vérifier vos données.
826
						</p>
827
					</div>
828
				</div>
829
			</div>
830
 
831
			<!-- Affiche le tableau récapitulatif des observations ajoutées -->
2372 jpm 832
			<div id="zone-liste-obs" class="row">
833
				<div class="col-md-12">
834
					<div class="well well-lg">
835
						<div class="row">
836
							<div class="col-md-8">
2360 jpm 837
								<h2>Observations à transmettre : <span class="obs-nbre">0</span></h2>
838
							</div>
2372 jpm 839
							<div class="col-md-4 text-right">
2360 jpm 840
								<button id="transmettre-obs" class="btn btn-primary btn-large has-tooltip"
841
									type="button" disabled="disabled"
842
									title="Ajoute les observations ci-dessous à votre Carnet en Ligne et les rend publiques.">
843
									Transmettre
844
								</button>
845
							</div>
846
						</div>
847
						<div id="liste-obs" ></div>
848
						<div class="row">
2372 jpm 849
							<div class="zone-alerte col-md-6 col-md-offset-3">
2360 jpm 850
								<div id="dialogue-zero-obs" class="alert alert-block" style="display: none;">
851
									<a class="close">×</a>
852
									<h4 class="alert-heading">Attention : aucune observation</h4>
853
									<p>Veuillez saisir des observations pour les transmettres.</p>
854
								</div>
855
 
856
								<div id="dialogue-obs-transaction-ok" class="alert alert-success alert-block" style="display: none;"">
857
									<a class="close">×</a>
858
									<h4 class="alert-heading">Information : transmission des observations</h4>
859
									<div class="alert-txt"></div>
860
								</div>
861
 
862
								<div id="dialogue-obs-transaction-ko" class="alert alert-error alert-block" style="display: none;">
863
									<a class="close">×</a>
864
									<h4 class="alert-heading">Erreur : transmission des observations</h4>
865
									<div class="alert-txt"></div>
866
								</div>
867
							</div>
868
						</div>
869
 
870
					</div>
871
				</div>
872
			</div>
873
 
2372 jpm 874
			<footer class="row">
875
				<p class="col-md-12">&copy; Tela Botanica 2014</p>
2360 jpm 876
			</footer>
877
 
878
			<!-- Fenêtres modales -->
879
			<div id="chargement" class="modal-fenetre" style="display:none;">
880
				<div id="chargement-centrage" class="modal-contenu">
881
					<div class="progress progress-striped active">
882
						<div id="barre-progression-upload" class="bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="10" style="">
883
							<span class="sr-only">0/10 observations transmises</span>
884
						</div>
885
					</div>
886
					<p id="chargement-txt" style="color:white;font-size:1.5em;">
887
						Transfert des observations en cours...<br />
888
						Cela peut prendre plusieurs minutes en fonction de la taille des images et du nombre
889
						d'observations à transférer.
890
					</p>
891
				</div>
892
			</div>
893
 
894
			<!-- Templates HTML -->
895
			<div id="tpl-transmission-ok" style="display:none;">
896
				<p class="msg">
897
					Vos observations ont bien été transmises.<br />
898
					Elles sont désormais consultables à travers les différents outils de visualisation
899
					du réseau (<a href="http://www.tela-botanica.org/site:botanique">eFlore</a>,
900
					<a href="http://www.tela-botanica.org/page:cel_galerie">galeries d'images</a>,
901
					<a href="http://www.tela-botanica.org/appli:test:del">identiplante</a>,
902
					<a href="http://www.tela-botanica.org/widget:cel:cartoPoint">cartographie (widget)</a>...)<br />
903
					Si vous souhaitez les modifier ou les supprimer, vous pouvez les retrouver en vous
904
					connectant à votre <a href="http://www.tela-botanica.org/appli:cel">Carnet en ligne</a>.<br />
905
					N'oubliez pas qu'il est nécessaire de
906
					<a href="http://www.tela-botanica.org/page:inscription">s'inscrire à Tela Botanica</a>
907
					au préalable, si ce n'est pas déjà fait.
908
				</p>
909
			</div>
910
			<div id="tpl-transmission-ko" style="display:none;">
911
				<p class="msg">
912
					Une erreur est survenue lors de la transmission d'une observation (indiquée en rouge).<br />
913
					Vous pouvez tenter de la retransmettre en cliquant à nouveau sur le bouton transmettre ou bien la supprimer
914
					et transmettre les suivantes.<br />
915
					Néanmoins, les observations n'apparaissant plus dans la liste "observations à transmettre", ont bien été transmises lors de votre précédente tentative. <br />
916
					Si le problème persiste, vous pouvez signaler le dysfonctionnement sur
917
					<a href="<?= $url_remarques ?>?email=cel_remarques@tela-botanica.org&pageSource=<?php echo urlencode('http://'.$_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF'].'?'.$_SERVER['QUERY_STRING']); ?>"
918
								  target="_blank"
919
								  onclick="javascript:window.open(this.getAttribute('href'), 'Tela Botanica - Remarques', config='height=700, width=640, scrollbars=yes, resizable=yes'); return false;">
920
								  le formulaire de signalement d'erreurs</a>.
921
				</p>
922
			</div>
923
 
924
			<!-- Fenêtres modales -->
925
			<div id="projet-description" class="modal hide fade modal-fullscreen" tabindex="-1" role="dialog"
926
				 aria-labelledby="projet-description-titre" aria-hidden="true">
927
				<div class="modal-header">
928
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
929
					<h1 id="projet-description-titre">Les arbres têtards</h1>
930
				</div>
931
				<div class="modal-body">
932
 
933
				</div>
934
				<div class="modal-footer dsc-clean">
935
					<button class="btn" data-dismiss="modal" aria-hidden="true">Fermer</button>
936
				</div>
937
			</div>
938
 
939
			<!-- Stats : Google Analytics-->
940
			<script>
941
				//<![CDATA[
942
				var _gaq = _gaq || [];
943
				_gaq.push(['_setAccount', 'UA-20092557-1']);
944
				_gaq.push(['_trackPageview']);
945
 
946
				(function() {
947
				  var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
948
				  ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
949
				  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
950
				})();
951
				//]]>
952
			</script>
953
		</div>
954
	</body>
955
</html>