Subversion Repositories eFlore/Applications.cel

Rev

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

Rev Author Line No. Line
2406 jpm 1
<!DOCTYPE html>
2
<html lang="fr">
3
	<head>
4
		<?php if (isset($_GET['mission'])) :?>
2408 jpm 5
			<?php if (isset($titre)) :?>
6
				<title><?=$titre ?></title>
2406 jpm 7
			<?php endif; ?>
8
		<?php else : ?>
9
			<title>Mission flore inconnue !</title>
10
		<?php endif; ?>
11
 
12
		<meta charset="utf-8">
13
 
14
		<meta name="revisit-after" content="15 days" />
15
		<meta name="robots" content="index,follow" />
16
		<meta name="author" content="Jean-Pascal MILCENT" />
17
		<meta name="keywords" content="Tela Botanica, CEL" />
18
		<meta name="description" content="Projet Ambrosia - Widget de saisie simplifiée pour le CEL" />
19
 
20
		<!-- Viewport Mobile -->
21
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
22
 
23
		<!-- Favicones -->
24
		<link rel="shortcut icon" type="image/x-icon" href="http://resources.tela-botanica.org/tb/img/16x16/favicon.ico" />
25
 
26
		<!-- Javascript : bibliothèques -->
27
		<!-- Google Map v3 -->
28
		<!--<script type="text/javascript" src="https://getfirebug.com/firebug-lite.js"></script>-->
29
		<script src="http://maps.google.com/maps/api/js?sensor=true&amp;language=fr&amp;region=FR"></script>
30
 
31
		<!-- Jquery -->
32
		<script src="http://resources.tela-botanica.org/jquery/1.7.1/jquery-1.7.1.min.js"></script>
33
		<!-- Jquery UI : nécessaire pour le mini-calendrier et l'auto-complétion -->
34
		<script src="http://resources.tela-botanica.org/jquery/jquery-ui/1.8.18/js/jquery-ui-1.8.18.custom.min.js"></script>
35
		<script src="http://resources.tela-botanica.org/jquery/jquery-ui/1.8.18/js/jquery.ui.datepicker-fr.js"></script>
36
		<!-- Jquery Plugins -->
37
		<!-- Jquery Validate : nécessaire pour la validation des formulaires -->
38
		<script src="http://resources.tela-botanica.org/jquery/validate/1.9.0/jquery.validate.min.js"></script>
39
		<script src="http://resources.tela-botanica.org/jquery/validate/1.9.0/messages_fr.js"></script>
40
		<!-- Jquery Form :nécessaire pour l'upload des images -->
41
		<script src="http://resources.tela-botanica.org/jquery/form/2.95/jquery.form.min.js"></script>
42
 
43
		<!-- Bootstrap -->
44
		<script src="http://resources.tela-botanica.org/bootstrap/2.3.2/js/bootstrap.min.js"></script>
45
		<script src="http://resources.tela-botanica.org/bootstrap/modal/2.2.5/js/bootstrap-modalmanager.js"></script>
46
		<script src="http://resources.tela-botanica.org/bootstrap/modal/2.2.5/js/bootstrap-modal.js"></script>
47
 
48
		<!-- Javascript : appli saisie -->
49
		<script>
50
		//<![CDATA[
51
			// Précharger le formulaire avec les infos d'une observation
52
			var OBS_ID = "<?=isset($_GET['id-obs']) ? $_GET['id-obs'] : ''?>";
53
			// La présence du parametre 'debug' dans l'URL enclenche le dégogage
54
			var DEBUG = <?=isset($_GET['debug']) ? 'true' : 'false'?>;
55
 
56
			// Mot-clé du widget/projet
57
			var TAG_PROJET = "WidgetSaisie,Ambrosia";
58
			// Mots-clés à ajouter aux images
59
			var TAG_IMG = "<?=isset($_GET['tag-img']) ? $_GET['tag-img'] : ''?>";
60
			var SEPARATION_TAG_IMG = "<?= isset($_GET['motcle']) && isset($_GET['tag-img']) ? ',' : '' ?>";
61
			TAG_IMG = <?=isset($_GET['motcle']) ? "'".$_GET['motcle']."' + SEPARATION_TAG_IMG + TAG_IMG" : 'TAG_IMG' ?>;
62
			// Mots-clés à ajouter aux observations
63
			var TAG_OBS = "<?=isset($_GET['tag-obs']) ? $_GET['tag-obs'] : ''?>";
64
			var SEPARATION_TAG_OBS = "<?= isset($_GET['projet']) && isset($_GET['tag-obs']) ? ',' : '' ?>";
65
			TAG_OBS = <?=isset($_GET['projet']) ? "'".$_GET['projet']."' + SEPARATION_TAG_OBS + TAG_OBS" : 'TAG_OBS' ?>;
66
 
67
 
2408 jpm 68
			// Code du référentiel utilisé pour les nom scientifiques.
2406 jpm 69
			var NOM_SCI_REFERENTIEL = "<?=$ns_referentiel?>";
70
 
71
			// Indication de la présence d'une espèce imposée
72
			var ESPECE_IMPOSEE = "<?=$espece_imposee; ?>";
73
			// Tableau d'informations sur l'espèce imposée
74
			var INFOS_ESPECE_IMPOSEE = <?=$infos_espece; ?>;
75
 
76
			// Nombre d'élément dans les listes d'auto-complétion
77
			var AUTOCOMPLETION_ELEMENTS_NBRE = 20;
78
			// URL du web service permettant l'auto-complétion des noms scientifiques.
79
			var SERVICE_AUTOCOMPLETION_NOM_SCI_URL_TPL = "<?=$url_ws_autocompletion_ns_tpl?>?"+
80
					"masque={masque}&"+
81
					"recherche=etendue&"+
82
					"retour.champs=famille,nom_retenu,nom_retenu_complet,num_taxonomique,nom_retenu.id&"+
83
					"retour.tri=alpharet&"+ // tri "à la CeL"
84
					"ns.structure=au"+"&"+
85
					"navigation.limite="+AUTOCOMPLETION_ELEMENTS_NBRE;
86
 
87
			// Nombre d'observations max autorisé avant transmission
88
			var OBS_MAX_NBRE = 10;
89
			// Durée d'affichage en milliseconde des messages d'informations
90
			var DUREE_MESSAGE = 15000;
91
 
92
			// URL du web service permettant de récupérer les infos d'une observation du CEL.
93
			var SERVICE_OBS_URL = "<?=$url_ws_obs?>";
94
			// URL du web service réalisant l'insertion des données dans la base du CEL.
95
			var SERVICE_SAISIE_URL = "<?=$url_ws_saisie?>";
96
			// Squelette d'URL du web service de l'annuaire.
97
			var SERVICE_ANNUAIRE_ID_URL = "<?=$url_ws_annuaire?>";
98
			// Squelette d'URL du web service d'eFlore fournissant les noms de communes.
99
			var SERVICE_NOM_COMMUNE_URL = "http://api.tela-botanica.org/service:eflore:0.1/osm/nom-commune?lon={lon}&lat={lat}";
100
			// URL du marqueur à utiliser dans la carte Google Map
101
 
102
			var GOOGLE_MAP_MARQUEUR_URL = "<?=$url_base?>modules/saisie/squelettes/ambrosia/img/marqueurs/epingle.png";
103
			// URL de l'icône du chargement en cours
104
			var CHARGEMENT_ICONE_URL = "<?=$url_base?>modules/saisie/squelettes/ambrosia/img/icones/chargement.gif";
105
			// URL de l'icône du chargement en cours d'une image
106
			var CHARGEMENT_IMAGE_URL = "<?=$url_base?>modules/saisie/squelettes/ambrosia/img/icones/chargement-image.gif";
107
			// URL de l'icône du calendrier
108
			var CALENDRIER_ICONE_URL = "<?=$url_base?>modules/saisie/squelettes/ambrosia/img/icones/calendrier.png";
109
			// URL de l'icône du calendrier
110
			var PAS_DE_PHOTO_ICONE_URL = "<?=$url_base?>modules/saisie/squelettes/ambrosia/img/icones/pasdephoto.png";
111
 
112
		//]]>
113
		</script>
114
		<script src="<?=$url_base?>modules/saisie/squelettes/ambrosia/js/ambrosia.js"></script>
115
 
116
		<!-- CSS -->
117
		<link rel="stylesheet" media="screen" href="http://resources.tela-botanica.org/jquery/jquery-ui/1.8.18/css/smoothness/jquery-ui-1.8.18.custom.css" />
118
		<link rel="stylesheet" media="screen" href="http://resources.tela-botanica.org/bootstrap/2.3.2/css/bootstrap.min.css" />
119
		<link rel="stylesheet" media="screen" href="http://resources.tela-botanica.org/bootstrap/2.3.2/css/bootstrap-responsive.min.css" />
120
		<link rel="stylesheet" media="screen" href="http://resources.tela-botanica.org/bootstrap/modal/2.2.5/css/bootstrap-modal.css" />
121
		<link rel="stylesheet" media="screen" href="<?=$url_base?>modules/saisie/squelettes/ambrosia/css/<?=isset($_GET['style']) ? $_GET['style'] : 'ambrosia'?>.css"/>
122
 
123
	</head>
124
 
125
	<body data-spy="scroll">
126
		<div class="container">
127
			<div class="row-fluid  page-header">
128
				<div>
129
					<h1>
130
						<?php if (isset($_GET['mission'])) :?>
2408 jpm 131
							<?php if (file_exists('./modules/saisie/squelettes/missions-flore/squelettes/'.$_GET['mission'].'/titre.tpl.html')) :?>
132
								<?php include_once './modules/saisie/squelettes/missions-flore/squelettes/'.$_GET['mission'].'/titre.tpl.html'; ?>
2406 jpm 133
							<?php endif; ?>
134
						<?php else : ?>
135
							<img id="logo-titre" class="span1" src="<?=$url_base?>/modules/saisie/squelettes/missions-flore/img/logos/tela_botanica.png" alt="Tela Botanica" />
136
							Mission flore inconnue !
137
						<?php endif; ?>
138
					</h1>
139
				</div>
140
			</div>
141
			<div class="row-fluid">
142
				<div class="span6">
143
					<div class="row-fluid">
144
						<div id="intro" class ="well collapse in">
145
							<a class="fermer" data-toggle="collapse" data-target="#intro">
146
								<h3 class="titre">
147
									Le projet
148
									<i class="icone icon-plus-sign"></i>
149
								</h3>
150
							</a>
151
							<?php if (isset($_GET['mission'])) :?>
2408 jpm 152
								<?php if (file_exists('./modules/saisie/squelettes/missions-flore/squelettes/'.$_GET['mission'].'/projet.tpl.html')) :?>
153
									<?php include_once './modules/saisie/squelettes/missions-flore/squelettes/'.$_GET['mission'].'/projet.tpl.html'; ?>
2406 jpm 154
								<?php endif; ?>
155
							<?php else : ?>
156
								<p>Mission flore inconnue !</p>
157
							<?php endif; ?>
158
						</div>
159
					</div>
160
				</div>
161
 
162
				<div class="span6">
163
					<div class="row-fluid">
164
						<div id="aide" class="well collapse in">
165
							<a class="fermer" data-toggle="collapse" data-target="#aide">
166
								<h3 class="titre">
167
									Aide
168
									<i class="icone icon-plus-sign"></i>
169
								</h3>
170
							</a>
171
							<p>
172
								Cet outil vous permet de partager simplement vos observations avec le
173
								<a href="http://www.tela-botanica.org/site:accueil">réseau Tela Botanica</a> (sous <a href="http://www.tela-botanica.org/page:licence?langue=fr">licence CC-BY-SA</a>).
174
								Identifiez-vous bien pour ensuite retrouver et gérer vos données dans
175
								<a href="http://www.tela-botanica.org/appli:cel">votre Carnet en ligne</a>.
176
								Créez jusqu'à 10 observations (avec 10Mo max d'images) puis partagez-les avec le bouton 'transmettre'.
177
								Elles apparaissent immédiatement sur les <a href="http://www.tela-botanica.org/site:botanique">cartes et galeries photos </a> du site.
178
							</p>
179
							<p class="discretion">
180
								Pour toute question ou remarque,
181
								<a href="<?= $url_remarques ?>?email=cel_remarques@tela-botanica.org&pageSource=<?php echo urlencode('http://'.$_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF'].'?'.$_SERVER['QUERY_STRING']); ?>"
182
									target="_blank"
183
									onclick="javascript:window.open(this.getAttribute('href'), 'Tela Botanica - Remarques', config='height=700, width=640, scrollbars=yes, resizable=yes'); return false;">
184
									contactez-nous</a>
185
							</p>
186
							<p class="discretion">
187
								Une fois familiarisé avec l'interface vous pouvez cliquer sur ce bouton pour désactiver l'aide.
188
								<button id="btn-aide" class="btn btn-mini btn-success">
189
									<span class="icon-question-sign icon-white"></span>
190
									<span id="btn-aide-txt" >Désactiver l'aide</span>
191
								</button>
192
							</p>
193
						</div>
194
					</div>
195
				</div>
196
			</div>
197
			<div class="row-fluid">
198
				<div class="well">
199
					<h2>Observateur</h2>
200
					<form id="form-observateur" action="#" class="" autocomplete="on">
201
						<div class="row-fluid">
202
							<div class="span6 control-group has-tooltip" data-placement="right"
203
								title="Saisissez le courriel avec lequel vous être inscrit à Tela Botanica.
204
									Si vous n'êtes pas inscrit, ce n'est pas grave, vous pourrez le faire
205
									ultérieurement. Des informations complémentaires vont vous être
206
									demandées : prénom et nom.">
207
								<label for="courriel"  class="control-label"
208
									title="Veuillez saisir votre adresse courriel.">
209
									<strong class="obligatoire">*</strong> Courriel
210
								</label>
211
								<div class="input-prepend">
212
									<span class="add-on">
213
										<i class="icon-envelope"></i>
214
									</span>
215
									<input id="courriel" name="courriel" type="text"/>
216
									<input id="id_utilisateur" name="id_utilisateur" type="hidden"/>
217
								</div>
218
							</div>
219
							<div id="zone-courriel-confirmation" class="span6 control-group hidden">
220
								<label for="courriel_confirmation" class="control-label"
221
									title="Veuillez saisir confirmer le courriel.">
222
									<strong class="obligatoire">*</strong> Courriel (confirmation)
223
								</label>
224
								<div class="input-prepend">
225
									<span class="add-on">
226
										<i class="icon-envelope"></i>
227
									</span>
228
									<input id="courriel_confirmation" name="courriel_confirmation" type="text"/>
229
								</div>
230
							</div>
231
						</div>
232
						<div id="zone-prenom-nom" class="row-fluid hidden">
233
							<div class="span6">
234
								<label for="prenom">Prénom</label>
235
								<div>
236
									<input id="prenom" name="prenom" type="text"/>
237
								</div>
238
							</div>
239
							<div class="span6">
240
								<label for="nom">Nom</label>
241
								<div>
242
									<input id="nom" name="nom"  type="text"/>
243
								</div>
244
							</div>
245
						</div>
246
					</form>
247
				</div>
248
			</div>
249
			<!-- Messages d'erreur du formulaire-->
250
			<div class="row">
251
				<div class="zone-alerte span6 offset3">
252
					<div id="dialogue-bloquer-copier-coller" class="alert alert-info alert-block" style="display:none;">
253
						<a class="close">×</a>
254
						<h4 class="alert-heading">Information : copier/coller</h4>
255
						<p>
256
							Merci de ne pas copier/coller votre courriel.<br/>
257
							La double saisie permet de vérifier l'absence d'erreurs.
258
						</p>
259
					</div>
260
					<div id="dialogue-courriel-introuvable" class="alert alert-info alert-block" style="display:none;">
261
						<a class="close">×</a>
262
						<h4 class="alert-heading">Information : courriel introuvable</h4>
263
						<p>
264
							Vous n'êtes pas inscrit à Tela Botanica avec ce courriel.<br/>
265
							Veuillez compléter les champs supplémentaires ou indiquer votre courriel d'inscription.<br/>
266
							Pour retrouver vos observations dans le <a href="http://www.tela-botanica.org/appli:cel">Carnet en ligne</a>,
267
							il sera nécesaire de <a href="http://www.tela-botanica.org/page:inscription">vous inscrire à Tela Botanica</a>.
268
						</p>
269
					</div>
270
					<div id="dialogue-google-map" class="alert alert-info alert-block" style="display: none;">
271
						<a class="close">×</a>
272
						<h4 class="alert-heading">Information sur Google Map</h4>
273
						<div class="contenu"></div>
274
					</div>
275
				</div>
276
			</div>
277
			<div class="row-fluid">
278
				<div class="span12">
279
					<div class="well">
280
						<div class="row-fluid">
281
							<div class="span6">
282
								<div>
283
									<div class="row-fluid">
284
										<div class="span12">
285
											<h2>Lieu du relevé</h2>
286
										</div>
287
									</div>
288
									<div class="row-fluid">
289
										<div class="span4">
290
											<label for="map_canvas" title="Veuillez localiser l'observation">
291
												Géolocalisation
292
											</label>
293
										</div>
294
										<div class="span8 droite">
295
											<form id="form-carte-recherche" class="form-search form-horizontal" action="#" >
296
												<div class="control-group">
297
													<label for="carte-recherche">Rechercher</label>
298
													<input id="carte-recherche" class="search-query has-tooltip" type="text" value=""
299
														title="Permet de centrer la carte sur le lieu recherché."
300
														placeholder="Centrer la carte sur un lieu..."/>
301
												</div>
302
											</form>
303
										</div>
304
									</div>
305
									<div class="row-fluid">
306
										<div class="span12">
307
											<div id="map-canvas" class="has-tooltip"
308
												title="Vous pouvez cliquer sur la carte pour déplacer le marqueur
309
													représentant votre station ou bien le glisser-déposer sur
310
													le lieu souhaité."></div>
311
										</div>
312
									</div>
313
									<div class="row-fluid">
314
										<label class="span7 control-label">
315
											<a href="#" class="afficher-coord">Afficher</a>
316
											<a href="#" class="afficher-coord" style="display:none;">Cacher</a>
317
											les coordonnées géographiques
318
											<span id="lat-lon-info" class="info has-tooltip"
319
												title="Système géodésique mondial, révision de 1984 - Coordonnées non projetées">
320
												(WGS84)
321
											</span>
322
										</label>
323
										<div id="info-commune" class="span5">
324
								    		<span for="marqueur-commune">Commune : </span>
325
								    		<span id="marqueur-commune">
326
								    			<span id="commune-nom" class="commune-info"></span>
327
								    			(<span id="commune-code-insee" class="commune-info has-tooltip"
328
								    				title="Code INSEE de la commune"></span>)
329
								    		</span>
330
							    		</div>
331
									</div>
332
									<form id="form-station" action="#" enctype="multipart/form-data" autocomplete="on">
333
										<div id="coordonnees-geo" class="well" style="display:none;">
334
											<div class="row-fluid form-inline">
335
												<div id="coord-lat" class="span4">
336
													<label for="latitude">Latitude</label>
337
													<div>
338
														<input id="latitude" class="input-mini" name="latitude" type="text" value=""/>
339
													</div>
340
												</div>
341
												<div id="coord-lng" class="span4">
342
													<label for="longitude">Longitude</label>
343
													<div>
344
														<input id="longitude" class="input-mini" name="longitude" type="text" value=""/>
345
													</div>
346
												</div>
347
												<div class="span1">
348
													<div>
349
														<input id="geolocaliser" type="button" value="Voir sur la carte"
350
															class="has-tooltip"
351
															title="Centre la carte sur les coordonnées de latitude et longitude saisies."/>
352
													</div>
353
												</div>
354
									    	</div>
355
										</div>
356
										<div class="row-fluid">
357
											<div class="span6 control-group has-tooltip"
358
												title="Toponyme plus précis que la commune, utilisé localement et se trouvant souvent sur les cartes au 1/25 000." >
359
												<label class="control-label">
360
													Lieu-dit
361
													<input type="text" id="lieudit" class="" name="lieudit"/>
362
												</label>
363
											</div>
364
											<div class="span6 control-group has-tooltip"
365
												title="Lieu précis de l'observation définissant une unité écologique homogène (ex: le pré derrière la maison)." >
366
												<label class="control-label">
367
													Station
368
													<input type="text" id="station" class="" name="station"/>
369
												</label>
370
											</div>
371
										</div>
372
 
373
										<div class="row-fluid">
374
											<div class="span12 control-group has-tooltip"
375
												title="Indiquez la surface en m² de la station au sein de laquelle la plante est présente.">
376
												<label class="span12 control-label">
377
													<strong class="obligatoire">*</strong>
378
													Surface de la station
379
													<select id="station-surface" class="span8 obs-chp-etendu" name="stationSurface"
380
															data-label="Surface couverte dans la station">
381
														<option selected value="">Sélectionnez une surface</option>
382
														<option value="0-5">&lt;5 m²</option>
383
														<option value="5-10">5-10 m²</option>
384
														<option value="10-50">10-50 m²</option>
385
														<option value="50-100">50-100 m²</option>
386
														<option value="100-500">100-500 m²</option>
387
														<option value="500-1000">500-1000 m²</option>
388
														<option value="1000+">&gt; 1000 m²</option>
389
													</select>
390
												</label>
391
											</div>
392
										</div>
393
 
394
										<div class="row-fluid">
395
											<div class="span12 control-group" >
396
												<label class="span12 control-label">
397
													<strong class="obligatoire">*</strong>
398
													Milieu
399
													<select id="milieu" class="span8" name="milieu">
400
														<option selected value="">Sélectionnez un milieu</option>
401
														<?php foreach ($milieux as $milieu => $description) : ?>
402
														<option value="<?=strtolower($milieu)?>">
403
															<?=$milieu?> <?=($description != '') ? "($description)" : '' ?>
404
														</option>
405
														<?php endforeach; ?>
406
														<option value="">Autre : préciser dans les commentaires.</option>
407
													</select>
408
												</label>
409
											</div>
410
										</div>
411
 
412
										<div class="row-fluid">
413
											<div class="span12">
414
												<label for="milieuCommentaire">Commentaires sur le milieu</label>
415
												<div>
416
													<textarea id="milieu-commentaire" class="span12 obs-chp-etendu" rows="7"
417
														name="milieuCommentaire" data-label="Commentaires sur le milieu"
418
														placeholder="Vous pouvez éventuellement ajouter des informations complémentaires concernant le milieu"></textarea>
419
												</div>
420
											</div>
421
										</div>
422
									</form>
423
								</div>
424
							</div>
425
							<div class="span6">
426
								<form id="form-obs" action="#" autocomplete="on">
427
									<h2>Observation</h2>
428
									<input id="referentiel" type="hidden" value="bdtfx" />
429
 
430
									<div class="row-fluid">
431
										<div id="taxon-input-groupe" class="span8 has-tooltip"
432
											title="Sélectionnez une espèce dans la liste déroulante pour lier
433
												votre nom au référentiel selectionné. Si vous
434
												le désirez vous pouvez aussi saisir un nom absent du référentiel
435
												(Ex. : 'fleur violette' ou 'viola sinensis???')." >
436
											<label class="span12 control-label">Espèce
437
												<div class="input-prepend input-append">
438
													<span class="add-on"><i class="icon-leaf"></i></span>
439
													<input type="text" id="taxon" name="taxon" value="<?= $nom_sci_espece_defaut; ?>" />
440
													<a href="#plte-description" role="button" class="btn btn-success add-on" data-toggle="modal">Voir la description</a>
441
												</div>
442
											</label>
443
										</div>
444
									</div>
445
 
446
									<div class="row-fluid">
447
										<div class="span12 control-group has-tooltip"
448
												title="Vous pouvez cliquer sur l'icône de calendrier pour
449
													sélectionner une date dans un calendrier.">
450
											<label class="span12 control-label"  title="Veuillez indiquer la date du relevé au format jj/mm/aaaa">
451
												<strong class="obligatoire">*</strong>
452
												Date du relevé
453
												<div class="input-prepend">
454
													<span id="date-icone" class="add-on"></span>
455
													<input id="date" name="date" type="text" placeholder="jj/mm/aaaa" />
456
												</div>
457
											</label>
458
										</div>
459
									</div>
460
 
461
									<div class="row-fluid">
462
										<div class="span12 control-group has-tooltip"
463
												title="Indiquez ici le pourcentage de recouvrement par la plante sur la surface de la station.">
464
											<label class="span12 control-label">
465
												<strong class="obligatoire">*</strong>
466
												Recouvrement par la plante de la surface de la station
467
												<select id="recouvrement" class="span8 obs-chp-etendu" name="recouvrement"
468
														data-label="Recouvrement au sein de la surface couverte dans la station">
469
													<option selected value="">Sélectionnez un recouvrement</option>
470
													<option value="+">&lt;1 %</option>
471
													<option value="1">1-5 %</option>
472
													<option value="2">5-25 %</option>
473
													<option value="3">25-50 %</option>
474
													<option value="4">50-75 %</option>
475
													<option value="5">75-100 %</option>
476
												</select>
477
											</label>
478
										</div>
479
									</div>
480
 
481
									<div class="row-fluid">
482
										<div class="span12">
483
											<label for="notes">Notes</label>
484
											<div>
485
												<textarea id="notes" class="span12" rows="7" name="notes"
486
													placeholder="vous pouvez éventuellement ajouter des informations complémentaires à votre observation (altitude, taille de la plante...)"></textarea>
487
											</div>
488
										</div>
489
									</div>
490
 
491
								</form>
492
								<form id="form-upload" class="form-horizontal" action="<?= $url_ws_upload ?>?projet=<?=isset($_GET['projet']) ? $_GET['projet'] : 'defaut'?>"
493
									method="post" enctype="multipart/form-data">
494
									<h2>Image(s) de cette plante</h2>
495
									<strong>Ajouter une image</strong>
496
									<p class="miniature-info" class="discretion help-inline">Les photos doivent être au format JPEG et ne doivent pas excéder 5Mo chacunes.</p>
497
									<div id ="photos-conteneur">
498
										<input type="file" id="fichier" name="fichier" accept="image/jpeg" />
499
										<input type="hidden" name="MAX_FILE_SIZE" value="5242880"/>
500
										<div id="miniatures">
501
										</div>
502
										<p class="miniature-msg" class="span12">&nbsp;</p>
503
									</div>
504
								</form>
505
							</div>
506
							<div class="row-fluid">
507
								<div class="span12 centre has-tooltip"
508
									title="Une fois les champs remplis, vous pouvez cliquer sur ce bouton pour
509
										ajouter votre observation à la liste à transmettre.">
510
									<button id="ajouter-obs" class="btn btn-primary btn-large" type="button">
511
										Créer
512
									</button>
513
								</div>
514
							</div>
515
						</div>
516
					</div>
517
				</div>
518
			</div>
519
 
520
			<!-- Messages d'erreur du formulaire-->
521
			<div class="row">
522
				<div class="zone-alerte span6 offset3">
523
					<div id="dialogue-bloquer-creer-obs" class="alert alert-warning alert-block" style="display: none;">
524
						<a class="close">×</a>
525
						<h4 class="alert-heading">Information : 10 observations maximum</h4>
526
						<p>
527
							Vous venez d'ajouter votre 10ème observation.<br/>
528
							Pour en ajouter de nouvelles, il est nécessaire de les transmettre en cliquant sur le bouton ci-dessous.
529
						</p>
530
					</div>
531
				</div>
532
				<div class="zone-alerte span6 offset3">
533
					<div id="dialogue-form-invalide" class="alert alert-warning alert-block" style="display: none;">
534
						<a class="close">×</a>
535
						<h4 class="alert-heading">Information : champs en erreur</h4>
536
						<p>
537
							Certains champs du formulaire sont mal remplis.<br/>
538
							Veuillez vérifier vos données.
539
						</p>
540
					</div>
541
				</div>
542
			</div>
543
 
544
			<!-- Affiche le tableau récapitulatif des observations ajoutées -->
545
			<div id="zone-liste-obs" class="row-fluid">
546
				<div class="span12">
547
					<div class="well">
548
						<div class="row-fluid">
549
							<div class="span8">
550
								<h2>Observations à transmettre : <span class="obs-nbre">0</span></h2>
551
							</div>
552
							<div class="span4 droite">
553
								<button id="transmettre-obs" class="btn btn-primary btn-large has-tooltip"
554
									type="button" disabled="disabled"
555
									title="Ajoute les observations ci-dessous à votre Carnet en Ligne et les rend publiques.">
556
									Transmettre
557
								</button>
558
							</div>
559
						</div>
560
						<div id="liste-obs" ></div>
561
						<div class="row">
562
							<div class="zone-alerte span6 offset3">
563
								<div id="dialogue-zero-obs" class="alert alert-block" style="display: none;">
564
									<a class="close">×</a>
565
									<h4 class="alert-heading">Attention : aucune observation</h4>
566
									<p>Veuillez saisir des observations pour les transmettres.</p>
567
								</div>
568
 
569
								<div id="dialogue-obs-transaction-ok" class="alert alert-success alert-block" style="display: none;"">
570
									<a class="close">×</a>
571
									<h4 class="alert-heading">Information : transmission des observations</h4>
572
									<div class="alert-txt"></div>
573
								</div>
574
 
575
								<div id="dialogue-obs-transaction-ko" class="alert alert-error alert-block" style="display: none;">
576
									<a class="close">×</a>
577
									<h4 class="alert-heading">Erreur : transmission des observations</h4>
578
									<div class="alert-txt"></div>
579
								</div>
580
							</div>
581
						</div>
582
 
583
					</div>
584
				</div>
585
			</div>
586
 
587
			<footer class="row-fluid">
588
				<p class="span12">&copy; Tela Botanica 2014</p>
589
			</footer>
590
 
591
			<!-- Fenêtres modales -->
592
			<div id="chargement" class="modal-fenetre" style="display:none;">
593
				<div id="chargement-centrage" class="modal-contenu">
594
					<div class="progress progress-striped active">
595
			 			<div id="barre-progression-upload" class="bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="10" style="">
596
			    			<span class="sr-only">0/10 observations transmises</span>
597
			  			</div>
598
					</div>
599
					<p id="chargement-txt" style="color:white;font-size:1.5em;">
600
						Transfert des observations en cours...<br />
601
						Cela peut prendre plusieurs minutes en fonction de la taille des images et du nombre
602
						d'observations à transférer.
603
					</p>
604
				</div>
605
			</div>
606
 
607
			<!-- Templates HTML -->
608
			<div id="tpl-transmission-ok" style="display:none;">
609
				<p class="msg">
610
					Vos observations ont bien été transmises.<br />
611
					Elles sont désormais consultables à travers les différents outils de visualisation
612
					du réseau (<a href="http://www.tela-botanica.org/site:botanique">eFlore</a>,
613
					<a href="http://www.tela-botanica.org/page:cel_galerie">galeries d'images</a>,
614
					<a href="http://www.tela-botanica.org/appli:test:del">identiplante</a>,
615
					<a href="http://www.tela-botanica.org/widget:cel:cartoPoint">cartographie (widget)</a>...)<br />
616
					Si vous souhaitez les modifier ou les supprimer, vous pouvez les retrouver en vous
617
					connectant à votre <a href="http://www.tela-botanica.org/appli:cel">Carnet en ligne</a>.<br />
618
					N'oubliez pas qu'il est nécessaire de
619
					<a href="http://www.tela-botanica.org/page:inscription">s'inscrire à Tela Botanica</a>
620
					au préalable, si ce n'est pas déjà fait.
621
				</p>
622
			</div>
623
			<div id="tpl-transmission-ko" style="display:none;">
624
				<p class="msg">
625
					Une erreur est survenue lors de la transmission d'une observation (indiquée en rouge).<br />
626
					Vous pouvez tenter de la retransmettre en cliquant à nouveau sur le bouton transmettre ou bien la supprimer
627
					et transmettre les suivantes.<br />
628
					Néanmoins, les observations n'apparaissant plus dans la liste "observations à transmettre", ont bien été transmises lors de votre précédente tentative. <br />
629
					Si le problème persiste, vous pouvez signaler le dysfonctionnement sur
630
					<a href="<?= $url_remarques ?>?email=cel_remarques@tela-botanica.org&pageSource=<?php echo urlencode('http://'.$_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF'].'?'.$_SERVER['QUERY_STRING']); ?>"
631
								  target="_blank"
632
								  onclick="javascript:window.open(this.getAttribute('href'), 'Tela Botanica - Remarques', config='height=700, width=640, scrollbars=yes, resizable=yes'); return false;">
633
								  le formulaire de signalement d'erreurs</a>.
634
				</p>
635
			</div>
636
 
637
			<!-- Fenêtres modales -->
638
			<div id="plte-description" class="modal hide fade modal-fullscreen" tabindex="-1" role="dialog"
639
				 aria-labelledby="plte-description-titre" aria-hidden="true">
640
				<div class="modal-header">
641
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
642
					<h1 id="plte-description-titre"><i>Ambrosia psilostachya</i> DC. (Ambroisie à épis lisses)</h1>
643
				</div>
644
				<div class="modal-body">
645
					<div class="dsc-imgs">
646
						<img src="<?=$url_base?>/modules/saisie/squelettes/ambrosia/img/dsc/allure_generale.jpg" alt="Allure générale"/>
647
						<img src="<?=$url_base?>/modules/saisie/squelettes/ambrosia/img/dsc/feuille.jpg" alt="Feuille"/>
648
						<img src="<?=$url_base?>/modules/saisie/squelettes/ambrosia/img/dsc/fruit.jpg" alt="Fruit"/>
649
						<img src="<?=$url_base?>/modules/saisie/squelettes/ambrosia/img/dsc/racine.jpg" alt="Racine"/>
650
					</div>
651
					<div class="dsc-infos">
652
						<p><b>Floraison :</b> de fin mai à septembre.</p>
653
						<p>
654
							<b>Plante vivace</b> de 10-60(80) cm à <b>rhizome grêle</b> d’où naissent des drageons (voir <b>photo 4</b>) . <b class="text-error">Attention: en
655
							arrachant la plante la tige casse facilement au ras du rhizome et la portion enfouie de la tige ressemble à une racine
656
							pivotante (=confusion possible avec une espèce annuelle) !</b>
657
						</p>
658
						<p><b>Tiges</b> simples ou à rameaux courts, souvent nues au-dessous du collet.</p>
659
						<p>
660
							<b>Feuilles</b> médianes 1 à 2 fois découpées, à bande médiane > 2 mm entre les 2 premières divisions (voir <b>photo 2</b>).<br />
661
							Morphologie des feuilles généralement uniforme au sein d’un même colonie.
662
						</p>
663
						<p><b>Inflorescence</b> mâle (au sommet) dépassant rarement 10 cm (6-20 cm chez <i>A. artemisiifolia</i>).</p>
664
						<p>
665
							<b>Fruits</b> (rarement produits en France) de plus 3,5 mm à bec de moins de 1 mm (>1 mm chez <i>A. artemisiifolia</i>) et
666
							épines obtuses courtes <0,3 mm (épines aiguës > 0,3 mm chez <i>A. artemisiifolia</i>) : voir <b>photo 3</b>.
667
						</p>
668
						<p class="muted">
669
							<b>Références :</b> Tison et al. (2014) Flore de la France méditerranéenne continentale ; Tison & De Foucault (2014) Flora Gallica ; Jauzein (1995)
670
							Flore des champs cultivés
671
						</p>
672
						<div class="well">
673
							<p>Vous pouvez télécharger plusieurs documents au format PDF :</p>
674
							<ul>
675
								<li>
676
									<a href="<?=$url_base?>/modules/saisie/squelettes/ambrosia/doc/ambrosia_psilostachya.pdf" target="_blank">
677
										cette description (173 Ko)
678
									</a>
679
								</li>
680
								<li>
681
									<a href="<?=$url_base?>/modules/saisie/squelettes/ambrosia/doc/cle_ambrosia.pdf" target="_blank">
682
										une clé de détermination du genre <i>Ambrosia</i> (ambroisies) (635 Ko)
683
									</a>
684
								</li>
685
							</ul>
686
						</div>
687
					</div>
688
				</div>
689
				<div class="modal-footer dsc-clean">
690
					<button class="btn" data-dismiss="modal" aria-hidden="true">Fermer</button>
691
				</div>
692
			</div>
693
 
694
			<!-- Stats : Google Analytics-->
695
			<script type="text/javascript">
696
				//<![CDATA[
697
				var _gaq = _gaq || [];
698
				_gaq.push(['_setAccount', 'UA-20092557-1']);
699
				_gaq.push(['_trackPageview']);
700
 
701
				(function() {
702
				  var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
703
				  ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
704
				  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
705
				})();
706
				//]]>
707
			</script>
708
		</div>
709
	</body>
710
</html>