Subversion Repositories eFlore/Applications.cel

Rev

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