Subversion Repositories eFlore/Applications.cel

Rev

Rev 2877 | Go to most recent revision | Show entire file | Ignore whitespace | Details | Blame | Last modification | View Log | RSS feed

Rev 2877 Rev 2880
Line 194... Line 194...
194
								</button>
194
								</button>
195
							</p>
195
							</p>
196
						</div>
196
						</div>
197
					</div>
197
					</div>
198
				</div>
198
				</div>
199
 
199
				
-
 
200
				<!-- Bloc Observateur -->
200
				<div class="span6">
201
				<div class="span6">
201
					<div class="well">
202
					<div class="well">
202
						<h2>Observateur</h2>
203
						<h2>Observateur</h2>
-
 
204
						<hr>
203
						<form id="form-observateur" action="#" class="" autocomplete="on">
205
						<form id="form-observateur" action="#" class="" autocomplete="on">
204
							<div class="row-fluid">
206
							<div class="row-fluid">
205
								<div class="span6 has-tooltip" data-placement="right"
207
								<div class="span6 has-tooltip" data-placement="right"
206
									title="Saisissez le courriel avec lequel vous êtes inscrit à Tela Botanica.
208
									title="Saisissez le courriel avec lequel vous êtes inscrit à Tela Botanica.
207
										Si vous n'êtes pas inscrit, ce n'est pas grave, vous pourrez le faire
209
										Si vous n'êtes pas inscrit, ce n'est pas grave, vous pourrez le faire
208
										ultérieurement. Des informations complémentaires vont vous être
210
										ultérieurement. Des informations complémentaires vont vous être
209
										demandées : prénom et nom.">
211
										demandées : prénom et nom.">
210
									<label for="courriel"
212
									<label for="courriel"
211
										class="pointer"
213
										class="pointer"
212
										title="Veuillez saisir votre adresse courriel.">
214
										title="Veuillez saisir votre adresse courriel.">
213
										<strong class="obligatoire">*</strong> Courriel
215
										<strong class="obligatoire">*Courriel</strong>
214
									</label>
216
									</label>
215
									<div class="input-prepend">
217
									<div class="input-prepend">
216
										<span class="add-on">
218
										<span class="add-on">
217
											<i class="icon-envelope"></i>
219
											<i class="icon-envelope"></i>
218
										</span><input id="courriel" class="input-large" name="courriel" type="text" />
220
										</span><input id="courriel" class="input-large" name="courriel" type="text" />
Line 220... Line 222...
220
									</div>
222
									</div>
221
								</div>
223
								</div>
222
								<div id="zone-courriel-confirmation" class="span6 hidden">
224
								<div id="zone-courriel-confirmation" class="span6 hidden">
223
									<label for="courriel_confirmation"
225
									<label for="courriel_confirmation"
224
										title="Veuillez saisir confirmer le courriel.">
226
										title="Veuillez saisir confirmer le courriel.">
225
										<strong class="obligatoire">*</strong> Courriel (confirmation)
227
										<strong class="obligatoire">*Courriel (confirmation)</strong>
226
									</label>
228
									</label>
227
									<div class="input-prepend">
229
									<div class="input-prepend">
228
										<span class="add-on">
230
										<span class="add-on">
229
											<i class="icon-envelope"></i>
231
											<i class="icon-envelope"></i>
230
										</span><input id="courriel_confirmation" class="input-large" name="courriel_confirmation" type="text"/>
232
										</span><input id="courriel_confirmation" class="input-large" name="courriel_confirmation" type="text"/>
231
									</div>
233
									</div>
232
								</div>
234
								</div>
233
							</div>
235
							</div>
234
							<div id="zone-prenom-nom" class="row-fluid hidden">
236
							<div id="zone-prenom-nom" class="row-fluid hidden">
235
								<div class="span6">
237
								<div class="span6">
236
									<label for="prenom">Prénom</label>
238
									<label for="prenom">
-
 
239
										<strong>Prénom</strong>
-
 
240
									</label>
237
									<div class="input-prepend">
241
									<div class="input-prepend">
238
										<span class="add-on">
242
										<span class="add-on">
239
											<i class="icon-user"></i>
243
											<i class="icon-user"></i>
240
										</span><input id="prenom" name="prenom" class="input-large" type="text"/>
244
										</span><input id="prenom" name="prenom" class="input-large" type="text"/>
241
									</div>
245
									</div>
242
								</div>
246
								</div>
243
								<div class="span6">
247
								<div class="span6">
244
									<label for="nom">Nom</label>
248
									<label for="nom">
-
 
249
										<strong>Nom</strong>
-
 
250
									</label>
245
									<div class="input-prepend">
251
									<div class="input-prepend">
246
										<span class="add-on">
252
										<span class="add-on">
247
											<i class="icon-user"></i>
253
											<i class="icon-user"></i>
248
										</span><input id="nom" name="nom"  class="input-large" type="text"/>
254
										</span><input id="nom" name="nom"  class="input-large" type="text"/>
249
									</div>
255
									</div>
Line 281... Line 287...
281
					</div>
287
					</div>
282
				</div>
288
				</div>
283
			</div>
289
			</div>
284
			<div class="row-fluid">
290
			<div class="row-fluid">
285
				<div class="span12">
291
				<div class="span12">
-
 
292
					<div class="row-fluid">
286
					<div class="well">
293
						<div class="span6">
287
						<div class="row-fluid">
294
							<div class="well">
288
							<!-- 1e colonne : date, lieu, geoloc -->
295
							<!-- 1e colonne : date, lieu, geoloc -->
289
							<div class="span6">
296
								<div class="row-fluid">
290
								<div>
-
 
291
									<div class="row-fluid">
297
									<h2>Relevé</h2><hr>
292
										<!-- DATE-->
298
									<!-- DATE -->
293
										<h2>Date du relevé</h2>
-
 
294
										<div class="control-group">
299
									<div class="control-group">
295
											<form id="form-date" action="#" autocomplete="on">
300
										<form id="form-date" action="#" autocomplete="on">
296
												<label for="date">
301
											<label for="date">
297
													<span class="has-tooltip pointer"
302
												<span class="has-tooltip pointer"
298
													title="Veuillez indiquer la date du relevé au format jj/mm/aaaa. Vous pouvez
303
												title="Veuillez indiquer la date du relevé au format jj/mm/aaaa. Vous pouvez
299
													cliquer sur l'icône de calendrier pour sélectionner une date">
304
												cliquer sur l'icône de calendrier pour sélectionner une date">
300
														<strong class="obligatoire">*</strong>
305
													<strong class="obligatoire">*Date du relevé</strong>
-
 
306
												</span>
-
 
307
											</label>
-
 
308
											<div class="input-prepend">
-
 
309
												<span id="date-icone" class="add-on"></span><input id="date"
-
 
310
													class="input-small" name="date" type="text"
-
 
311
													placeholder="jj/mm/aaaa" />
-
 
312
											</div>
-
 
313
										</form>
-
 
314
									</div>
-
 
315
									<hr>
-
 
316
									<!-- Type de culture -->
-
 
317
									<div class="control-group">
-
 
318
										<span class="row-fluid">
-
 
319
											<span class="span3 has-tooltip" 
-
 
320
												title="Vous pouvez sélectionner un type de culture parmi la liste ou en saisir un manuellement via l'option Autres">
-
 
321
													<label class="pointer">
-
 
322
														<strong>Type de culture</strong>
301
														Date du relevé
323
													</label>
302
													</span>
324
											</span>
-
 
325
											<span class="span9">
-
 
326
												<!-- Céréale -->										
-
 
327
												<label for="culture-cereale-radio" class="radio culture pointer">
-
 
328
													<input type="radio" id="culture-cereale-radio" name="type-culture" value="cereale" data-titre="céréale" />
-
 
329
													Céréale
-
 
330
													<i class="icon-question-sign cursor-pointer" data-toggle="popover" data-trigger="hover">
-
 
331
													</i>
-
 
332
													<input type="text" id="culture-cereale-input" name="type-culture-detail" placeholder='ex : "Maïs"' style="display: none;" />
-
 
333
												</label>
-
 
334
												<div class="popover-html-content" data-for="culture-cereale-radio">
-
 
335
													<h5>Céréale</h5>
-
 
336
													Une description du champ de céréales<br/>
-
 
337
													...
-
 
338
												</div>
-
 
339
												<!-- Friche -->										
-
 
340
												<label for="culture-friche-radio" class="radio culture pointer">
-
 
341
													<input type="radio" id="culture-friche-radio" name="type-culture" value="friche" data-titre="friche" />
-
 
342
													Friche
-
 
343
													<i class="icon-question-sign cursor-pointer" data-toggle="popover" data-trigger="hover">
-
 
344
													</i>
-
 
345
													<input type="text" id="culture-friche-input" name="type-culture-detail" placeholder='ex : "Friche"' style="display: none;" />
-
 
346
												</label>
-
 
347
												<div class="popover-html-content" data-for="culture-friche-radio">
-
 
348
													<h5>Friche</h5>
-
 
349
													Une description du champ de Friche<br/>
-
 
350
													...
-
 
351
												</div>
-
 
352
												<!-- Maraichère -->										
-
 
353
												<label for="culture-maraichere-radio" class="radio culture pointer">
-
 
354
													<input type="radio" id="culture-maraichere-radio" name="type-culture" value="maraichere" data-titre="maraichère" />
-
 
355
													Maraichère
-
 
356
													<i class="icon-question-sign cursor-pointer" data-toggle="popover" data-trigger="hover">
-
 
357
													</i>
-
 
358
													<input type="text" id="culture-maraichere-input" name="type-culture-detail" placeholder='ex : "Pois"' style="display: none;" />
-
 
359
												</label>
-
 
360
												<div class="popover-html-content" data-for="culture-maraichere-radio">
-
 
361
													<h5>Maraichère</h5>
-
 
362
													Une description du champ de Maraichère<br/>
-
 
363
													...
-
 
364
												</div>
-
 
365
												<!-- Vigne -->										
-
 
366
												<label for="culture-vigne-radio" class="radio culture pointer">
-
 
367
													<input type="radio" id="culture-vigne-radio" name="type-culture" value="vigne" data-titre="vigne" />
-
 
368
													Vigne
-
 
369
													<i class="icon-question-sign cursor-pointer" data-toggle="popover" data-trigger="hover">
-
 
370
													</i>
-
 
371
													<input type="text" id="culture-vigne-input" name="type-culture-detail" placeholder='ex : "Sauterne"' style="display: none;" />
-
 
372
												</label>
-
 
373
												<div class="popover-html-content" data-for="culture-vigne-radio">
-
 
374
													<h5>Vigne</h5>
-
 
375
													Une description du champ de Vigne<br/>
-
 
376
													...
-
 
377
												</div>
-
 
378
												<!-- Verger -->										
-
 
379
												<label for="culture-verger-radio" class="radio culture pointer">
-
 
380
													<input type="radio" id="culture-verger-radio" name="type-culture" value="verger" data-titre="verger" />
-
 
381
													Verger
-
 
382
													<i class="icon-question-sign cursor-pointer" data-toggle="popover" data-trigger="hover">
-
 
383
													</i>
-
 
384
													<input type="text" id="culture-verger-input" name="type-culture-detail" placeholder='ex : "Pommier"' style="display: none;" />
303
												</label>
385
												</label>
-
 
386
												<div class="popover-html-content" data-for="culture-verger-radio">
-
 
387
													<h5>Verger</h5>
-
 
388
													Une description du champ de Verger<br/>
-
 
389
													...
-
 
390
												</div>
-
 
391
												<!-- Plantes à parfum, aromatiques et médicinales -->										
-
 
392
												<label for="culture-aromatique-radio" class="radio culture pointer">
-
 
393
													<input type="radio" id="culture-aromatique-radio" name="type-culture" value="aromatique" data-titre="plantes à parfum, aromatiques et médicinales" />
-
 
394
													Plantes à parfum, aromatiques et médicinales
-
 
395
													<i class="icon-question-sign cursor-pointer" data-toggle="popover" data-trigger="hover">
-
 
396
													</i>
-
 
397
													<input type="text" id="culture-aromatique-input" name="type-culture-detail" placeholder='ex : "Lavande"' style="display: none;" />
-
 
398
												</label>
-
 
399
												<div class="popover-html-content" data-for="culture-aromatique-radio">
-
 
400
													<h5>Plantes à parfum, aromatiques et médicinales</h5>
-
 
401
													Une description du champ de Plantes à parfum, aromatiques et médicinales<br/>
-
 
402
													...
-
 
403
												</div>
-
 
404
												<!-- Autres -->										
-
 
405
												<label for="culture-autres-radio" class="radio culture pointer">
-
 
406
													<input type="radio" id="culture-autres-radio" name="type-culture" value="autres" data-titre="autres" />
-
 
407
													Autres
-
 
408
													<input type="text" id="culture-autres-input" name="culture-autres" style="display: none;" />
-
 
409
												</label>
-
 
410
											</span>
-
 
411
										</span>
-
 
412
									</div>
-
 
413
									<hr>
-
 
414
									<!-- Géolocalisation -->
-
 
415
									<div class="row-fluid">
-
 
416
										<div class="span4">
-
 
417
											<strong>Géolocalisation</strong>
-
 
418
										</div>
-
 
419
										<div class="span8 droite">
-
 
420
											<form id="form-carte-recherche" class="form-search form-horizontal" action="#" >
304
												<div class="input-prepend">
421
												<div class="control-group">
-
 
422
													<label for="carte-recherche" class="pointer">Rechercher</label>
305
													<span id="date-icone" class="add-on"></span><input id="date"
423
													<input id="carte-recherche" class="search-query has-tooltip" type="text" value=""
306
														class="input-small" name="date" type="text"
424
														title="Permet de centrer la carte sur le lieu recherché."
307
														placeholder="jj/mm/aaaa" />
425
														placeholder="Ex: France, Paris, Rue de Rivoli..."/>
308
												</div>
426
												</div>
309
											</form>
427
											</form>
310
										</div>
428
										</div>
311
										<!-- LIEU -->
429
									</div>
-
 
430
									<div class="row-fluid">
-
 
431
										<div class="span12">
-
 
432
											<div id="map-canvas" class="has-tooltip"
-
 
433
												title="Vous pouvez cliquer sur la carte pour déplacer le marqueur
-
 
434
													représentant votre station ou bien le glisser-déposer sur
312
										<h2>Lieu du relevé</h2>
435
													le lieu souhaité."></div>
-
 
436
										</div>
-
 
437
									</div>
313
										<!-- Type de culture -->
438
									<!-- Coordonnées -->
314
										<div class="control-group">
439
									<div class="row-fluid">
-
 
440
										<label for="coordonnees-geo" class="span7">
-
 
441
											<a href="#" class="afficher-coord">Afficher</a>
-
 
442
											<a href="#" class="afficher-coord" style="display:none;">Cacher</a>
-
 
443
											les coordonnées géographiques
-
 
444
											<span id="lat-lon-info" class="info has-tooltip"
-
 
445
												title="Système géodésique mondial, révision de 1984 - Coordonnées non projetées">
-
 
446
												(WGS84)
-
 
447
											</span>
-
 
448
										</label>
-
 
449
										<div id="info-commune" class="span5">
-
 
450
											<span for="marqueur-commune">Commune : </span>
-
 
451
											<span id="marqueur-commune">
-
 
452
												<span id="commune-nom" class="commune-info"></span>
-
 
453
												(<span id="commune-code-insee" class="commune-info has-tooltip"
-
 
454
													title="Code INSEE de la commune"></span>)
-
 
455
											</span>
-
 
456
										</div>
-
 
457
									</div>
-
 
458
									<!-- Formulaire Station -->
-
 
459
									<form id="form-station" class="control-group" action="#" enctype="multipart/form-data" autocomplete="on">
-
 
460
										<div id="coordonnees-geo" class="well" style="display:none;">
-
 
461
											<div class="row-fluid form-inline">
-
 
462
												<div id="coord-lat" class="span4">
-
 
463
													<label for="latitude" class="pointer">Latitude</label>
-
 
464
													<input id="latitude" class="input-mini" name="latitude" type="text" value=""/>
-
 
465
												</div>
-
 
466
												<div id="coord-lng" class="span4">
-
 
467
													<label for="longitude" class="pointer">Longitude</label>
-
 
468
													<input id="longitude" class="input-mini" name="longitude" type="text" value=""/>
-
 
469
												</div>
-
 
470
												<div class="span4 droite">
-
 
471
													<input class="btn btn-primary" id="geolocaliser" type="button" value="Voir sur la carte"
-
 
472
														class="has-tooltip"
-
 
473
														title="Centre la carte sur les coordonnées de latitude et longitude saisies."/>
-
 
474
												</div>
-
 
475
											</div>
-
 
476
										</div>
315
											<span class="row-fluid">
477
										<div class="row-fluid">
316
												<span class="span3 has-tooltip" 
478
											<div class="span4 has-tooltip centre"
317
													title="Vous pouvez sélectionner un type de culture parmi la liste ou en saisir un manuellement via l'option Autres">
479
												title="Toponyme plus précis que la commune, utilisé localement et se trouvant souvent sur les cartes au 1/25 000." >
-
 
480
												<label for="lieudit" class="pointer">Lieu-dit</label>
-
 
481
												<div>
-
 
482
													<input type="text" id="lieudit" class="span2" name="lieudit"/>
-
 
483
												</div>
-
 
484
											</div>
-
 
485
											<div class="span4 has-tooltip centre"
-
 
486
												title="Lieu précis de l'observation définissant une unité écologique homogène (ex: le pré derrière la maison)." >
-
 
487
												<label for="station" class="pointer">Station</label>
-
 
488
												<div>
-
 
489
													<input type="text" id="station" class="span2" name="station"/>
-
 
490
												</div>
-
 
491
											</div>
-
 
492
											<div class="span4 has-tooltip centre"
-
 
493
												title="Type d'habitat plus ou moins standardisé dans les codes Corine ou Catminat (ex: prairie humide).">
318
														<label class="pointer">Type de culture</label>
494
												<label for="milieu" class="pointer">Milieu</label>
-
 
495
												<div>
-
 
496
													<input type="text" id="milieu" class="span2" name="milieu" />
319
												</span>
497
												</div>
-
 
498
											</div>
-
 
499
										</div>
-
 
500
									</form>
-
 
501
								</div>
-
 
502
							</div>
-
 
503
						</div>
-
 
504
						<!-- 2e colonne : observation -->
-
 
505
						<div class="span6">
-
 
506
							<div class="well">
-
 
507
								<div class="row-fluid">
320
												<span class="span9">
508
									<div class="span12">
-
 
509
										<form id="form-obs" action="#" autocomplete="on">
321
													<!-- Céréale -->										
510
											<h2>Observation</h2>
-
 
511
											<hr>
-
 
512
											<div class="row-fluid">
322
													<label for="culture-cereale-radio" class="radio culture pointer">
513
												<div id="taxon-liste-input-groupe" class="control-group">
-
 
514
													<label for="taxon-liste">
-
 
515
														<span class="has-tooltip pointer"
323
														<input type="radio" id="culture-cereale-radio" name="type-culture" value="cereale" data-titre="céréale" />
516
														title="Sélectionnez une espèce dans la liste déroulante par son nom latin
-
 
517
														ou commun. Si une espèce est absente, sélectionner «Autre espèce»." 
324
														Céréale
518
														>
325
														<i class="icon-question-sign cursor-pointer" data-toggle="popover" data-trigger="hover">
519
															<strong class="obligatoire">*Espèces</strong>
326
														</i>
520
														</span>
327
													</label>
521
													</label>
-
 
522
													<span class="input-prepend">
-
 
523
														<span id="espece-icone" class="add-on">
-
 
524
															<i class="icon-leaf"></i>
-
 
525
														</span>
-
 
526
													</span>
328
													<div class="popover-html-content" data-for="culture-cereale-radio">
527
													<select id="taxon-liste" name="taxon-liste" class="form-control">
-
 
528
														<option value="" selected>Sélectionner une espèce</option>
-
 
529
														<optgroup id="taxon-liste-noms">
-
 
530
															<?php foreach ($taxons['sci-et-fr'] as $taxon) :?>
-
 
531
																<option
-
 
532
																	class="<?=$taxon['nom_type'] ?>"
-
 
533
																	value="<?=$taxon['num_nom'] ?>"
-
 
534
																	title="<?=$taxon['nom_title'] ?>"
-
 
535
																	data-nom-a-sauver="<?=$taxon['nom_a_sauver'] ?>"
-
 
536
																	>
-
 
537
																	<?=$taxon['nom_a_afficher']?>
-
 
538
																</option>
329
														<h5>Céréale</h5>
539
															<?php endforeach; ?>
-
 
540
														</optgroup>
-
 
541
														<optgroup id="taxon-liste-special">
330
														Une description du champ de céréales<br/>
542
															<?php foreach ($taxons['speciaux'] as $taxon) :?>
-
 
543
																<option
-
 
544
																	class="<?=$taxon['nom_type'] ?>"
-
 
545
																	value="<?=$taxon['num_nom'] ?>"
-
 
546
																	title="<?=$taxon['nom_title'] ?>"
-
 
547
																	data-nom-a-sauver="<?=$taxon['nom_a_sauver'] ?>"
331
														...
548
																	>
-
 
549
																	<?=$taxon['nom_a_afficher']?>
-
 
550
																</option>
-
 
551
															<?php endforeach; ?>
-
 
552
														</optgroup>
-
 
553
														<option id="taxon-option-autre" value="?">Autre espèce</option>
-
 
554
													</select>
-
 
555
												</div>
-
 
556
											</div>
-
 
557
											<div class="row-fluid">
-
 
558
												<div class="span12">
-
 
559
													<div id="taxon-input-groupe" class="" hidden>
-
 
560
														<label for="taxon" title="Choisissez une espèce">
-
 
561
															<span class="has-tooltip pointer" title="Sélectionnez une espèce dans la liste déroulante pour lier
-
 
562
															votre nom au référentiel selectionné. Si vous
-
 
563
															le désirez vous pouvez aussi saisir un nom absent du référentiel
-
 
564
															(Ex. : 'fleur violette' ou 'viola sinensis???').">
-
 
565
																<strong>Espèce <?= $referentiel_impose ? '('.$ns_referentiel.')' : '' ?> <em>(ou indication sur la plante)</em></strong>
-
 
566
															</span>
-
 
567
														</label>
-
 
568
														<div class="row-fluid">
-
 
569
															<div class="span12">
-
 
570
																<span class="input-prepend">
-
 
571
																	<span class="add-on">
-
 
572
																		<i class="icon-leaf"></i>
-
 
573
																	</span>
-
 
574
																	<input class="span6" type="text" id="taxon" name="taxon" value="<?= $nom_sci_espece_defaut; ?>" data="numNomSel" />
-
 
575
																</span>
-
 
576
															</div>
-
 
577
														</div>
332
													</div>
578
													</div>
333
													<!-- Friche -->										
579
												</div>
334
													<label for="culture-friche-radio" class="radio culture pointer">
580
												<p class="alert alert-warning" id="avertissement-non-messicole" style="display: none;">
335
														<input type="radio" id="culture-friche-radio" name="type-culture" value="friche" data-titre="friche" />
581
													<strong>Attention :</strong> cette espèce ne fait pas partie de la liste des messicoles du plan national d'action pour les messicoles. L'espèce que vous observez pourrait ne pas être une messicole.
-
 
582
												</p>
336
														Friche
583
											</div>
-
 
584
											<hr>
-
 
585
											<!-- Certitude -->
-
 
586
											<div class="row-fluid">
-
 
587
												<div class="span12">
-
 
588
													<label for="identification-liste">
-
 
589
														<span class="has-tooltip pointer" 
337
														<i class="icon-question-sign cursor-pointer" data-toggle="popover" data-trigger="hover">
590
														title="Indiquez votre certitude vis-à-vis du nom d'espèce indiqué">
-
 
591
															<strong>Certitude</strong>
338
														</i>
592
														</span>
339
													</label>
593
													</label>
-
 
594
													<span class="input-prepend">
-
 
595
														<span id="identification-icone" class="add-on">
-
 
596
															<i class="icon-eye-open"></i>
-
 
597
														</span>
-
 
598
													</span>
-
 
599
													<select name="identification-liste" id="identification-liste">
-
 
600
														<option value="" selected>Indiquez votre certitude</option>
340
													<div class="popover-html-content" data-for="culture-friche-radio">
601
														<option value="certaine" data-titre="certaine">Certaine</option>
-
 
602
														<option value="douteuse" data-titre="douteuse">Douteuse</option>
-
 
603
														<option value="adeterminer" data-titre="à déterminer">A déterminer</option>
341
														<h5>Friche</h5>
604
													</select>
-
 
605
												</div>
-
 
606
											</div>
-
 
607
											<hr>
-
 
608
											<!-- Abondance -->
-
 
609
											<div class="row-fluid">
-
 
610
												<div class="span12">
342
														Une description du champ de Friche<br/>
611
													<label for="abondance-liste">
-
 
612
														<span class="has-tooltip pointer" 
-
 
613
														title="Indiquez le nombre d'individus observés, toutes zones du champ confondues">
-
 
614
															<strong class="obligatoire">*Abondance</strong>
-
 
615
														</span>
-
 
616
													</label>
-
 
617
													<span class="input-prepend">
-
 
618
														<span id="abondance-icone" class="add-on">
-
 
619
															<i class="icon-signal"></i>
343
														...
620
														</span>
-
 
621
													</span>
-
 
622
													<select name="abondance-liste" id="abondance-liste">
-
 
623
														<option value="" class="a-masquer" selected>Sélectionner une abondance</option>
-
 
624
														<option value="1" data-titre="1 à 10 individus">1 à 10 individus</option>
-
 
625
														<option value="10" data-titre="10 à 100 individus">10 à 100 individus</option>
-
 
626
														<option value="100" data-titre="100 à 1000 individus">100 à 1000 individus</option>
-
 
627
													</select>
344
													</div>
628
												</div>
-
 
629
											</div>
-
 
630
											<hr>
-
 
631
											<!-- Zone du champ -->
-
 
632
											<div class="row-fluid">
-
 
633
												<span class="span3 control-group">
-
 
634
													<label>
-
 
635
														<span class="has-tooltip pointer" 
-
 
636
														title="Sélectionnez une ou plusieurs zones dans lesquelles l'espèce indiquée est présente">
-
 
637
															<strong class="obligatoire">*Zone du champ</strong>
-
 
638
														</span>
-
 
639
													</label>
-
 
640
												</span>
-
 
641
												<span class="span9 control-group">
345
													<!-- Légumineuse -->										
642
													<!-- Bord -->										
346
													<label for="culture-legumineuse-radio" class="radio culture pointer">
643
													<label for="bordure" class="checkbox pointer">
347
														<input type="radio" id="culture-legumineuse-radio" name="type-culture" value="legumineuse" data-titre="légumineuse" />
644
														<input type="checkbox" id="bordure" name="zone-champ[]" value="bord" data-titre="bord" />
348
														Légumineuse
645
														Bord de champ
349
														<i class="icon-question-sign cursor-pointer" data-toggle="popover" data-trigger="hover">
646
														<i class="icon-question-sign cursor-pointer" data-toggle="popover" data-trigger="hover">
350
														</i>
647
														</i>
351
													</label>
648
													</label>
352
													<div class="popover-html-content" data-for="culture-legumineuse-radio">
649
													<div class="popover-html-content" data-for="bordure">
353
														<h5>Légumineuse</h5>
650
														<h5>Bordure</h5>
354
														Une description du champ de Légumineuse<br/>
651
														Une description de la zone Bord<br/>
355
														...
652
														...
356
													</div>
653
													</div>
357
													<!-- Vigne -->										
654
													<!-- Cœur du champ -->										
358
													<label for="culture-vigne-radio" class="radio culture pointer">
655
													<label for="coeur-champ" class="checkbox pointer">
359
														<input type="radio" id="culture-vigne-radio" name="type-culture" value="vigne" data-titre="vigne" />
656
														<input type="checkbox" id="coeur-champ" name="zone-champ[]" value="coeur" data-titre="cœur" />
360
														Vigne
657
														Cœur du champ
361
														<i class="icon-question-sign cursor-pointer" data-toggle="popover" data-trigger="hover">
658
														<i class="icon-question-sign cursor-pointer" data-toggle="popover" data-trigger="hover">
362
														</i>
659
														</i>
363
													</label>
660
													</label>
364
													<div class="popover-html-content" data-for="culture-vigne-radio">
661
													<div class="popover-html-content" data-for="coeur-champ">
365
														<h5>Vigne</h5>
662
														<h5>Cœur du champ</h5>
366
														Une description du champ de Vigne<br/>
663
														Une description de la zone Cœur du champ<br/>
367
														...
664
														...
368
													</div>
665
													</div>
369
													<!-- Verger -->										
666
													<!-- Zone délaissée -->										
370
													<label for="culture-verger-radio" class="radio culture pointer">
667
													<label for="zone-delaissee" class="checkbox pointer">
371
														<input type="radio" id="culture-verger-radio" name="type-culture" value="verger" data-titre="verger" />
668
														<input type="checkbox" id="zone-delaissee" name="zone-champ[]" value="zone-delaissee" data-titre="zone délaissée" />
372
														Verger
669
														Zone délaissée
373
														<i class="icon-question-sign cursor-pointer" data-toggle="popover" data-trigger="hover">
670
														<i class="icon-question-sign cursor-pointer" data-toggle="popover" data-trigger="hover">
374
														</i>
671
														</i>
375
													</label>
672
													</label>
376
													<div class="popover-html-content" data-for="culture-verger-radio">
673
													<div class="popover-html-content" data-for="zone-delaissee">
377
														<h5>Verger</h5>
674
														<h5>Zone délaissée</h5>
378
														Une description du champ de Verger<br/>
675
														Une description de la Zone délaissée<br/>
379
														...
676
														...
380
													</div>
677
													</div>
381
													<!-- Autres -->										
-
 
382
													<label for="culture-autres-radio" class="radio culture pointer">
-
 
383
														<input type="radio" id="culture-autres-radio" name="type-culture" value="autres" data-titre="autres" />
-
 
384
														Autres
-
 
385
														<input type="text" id="culture-autres-input" name="culture-autres" style="display: none;" />
-
 
386
													</label>
-
 
387
												</span>
678
												</span>
388
											</span>
-
 
389
										</div>
-
 
390
										<!-- Géolocalisation -->
-
 
391
										<div class="row-fluid">
-
 
392
											<div class="span4">
-
 
393
												<h2>Géolocalisation</h2>
-
 
394
											</div>
-
 
395
											<div class="span8 droite">
-
 
396
												<form id="form-carte-recherche" class="form-search form-horizontal" action="#" >
-
 
397
													<div class="control-group">
-
 
398
														<label for="carte-recherche" class="pointer">Rechercher</label>
-
 
399
														<input id="carte-recherche" class="search-query has-tooltip" type="text" value=""
-
 
400
															title="Permet de centrer la carte sur le lieu recherché."
-
 
401
															placeholder="Ex: France, Paris, Rue de Rivoli..."/>
-
 
402
													</div>
-
 
403
												</form>
-
 
404
											</div>
-
 
405
										</div>
-
 
406
										<div class="row-fluid">
-
 
407
											<div class="span12">
-
 
408
												<div id="map-canvas" class="has-tooltip"
-
 
409
													title="Vous pouvez cliquer sur la carte pour déplacer le marqueur
-
 
410
														représentant votre station ou bien le glisser-déposer sur
-
 
411
														le lieu souhaité."></div>
-
 
412
											</div>
-
 
413
										</div>
-
 
414
										<!-- Coordonnées -->
-
 
415
										<div class="row-fluid">
-
 
416
											<label for="coordonnees-geo" class="span7">
-
 
417
												<a href="#" class="afficher-coord">Afficher</a>
-
 
418
												<a href="#" class="afficher-coord" style="display:none;">Cacher</a>
-
 
419
												les coordonnées géographiques
-
 
420
												<span id="lat-lon-info" class="info has-tooltip"
-
 
421
													title="Système géodésique mondial, révision de 1984 - Coordonnées non projetées">
-
 
422
													(WGS84)
-
 
423
												</span>
-
 
424
											</label>
-
 
425
											<div id="info-commune" class="span5">
-
 
426
												<span for="marqueur-commune">Commune : </span>
-
 
427
												<span id="marqueur-commune">
-
 
428
													<span id="commune-nom" class="commune-info"></span>
-
 
429
													(<span id="commune-code-insee" class="commune-info has-tooltip"
-
 
430
														title="Code INSEE de la commune"></span>)
-
 
431
												</span>
-
 
432
											</div>
-
 
433
										</div>
-
 
434
										<!-- Formulaire Station -->
-
 
435
										<form id="form-station" class="control-group" action="#" enctype="multipart/form-data" autocomplete="on">
-
 
436
											<div id="coordonnees-geo" class="well" style="display:none;">
-
 
437
												<div class="row-fluid form-inline">
-
 
438
													<div id="coord-lat" class="span4">
-
 
439
														<label for="latitude" class="pointer">Latitude</label>
-
 
440
														<input id="latitude" class="input-mini" name="latitude" type="text" value=""/>
-
 
441
													</div>
-
 
442
													<div id="coord-lng" class="span4">
-
 
443
														<label for="longitude" class="pointer">Longitude</label>
-
 
444
														<input id="longitude" class="input-mini" name="longitude" type="text" value=""/>
-
 
445
													</div>
-
 
446
													<div class="span4 droite">
-
 
447
														<input class="btn btn-primary" id="geolocaliser" type="button" value="Voir sur la carte"
-
 
448
															class="has-tooltip"
-
 
449
															title="Centre la carte sur les coordonnées de latitude et longitude saisies."/>
-
 
450
													</div>
-
 
451
												</div>
-
 
452
											</div>
679
											</div>
-
 
680
											<hr>
453
											<div class="row-fluid">
681
											<div class="row-fluid">
454
												<div class="span4 has-tooltip centre"
682
												<div class="span6">
455
													title="Toponyme plus précis que la commune, utilisé localement et se trouvant souvent sur les cartes au 1/25 000." >
-
 
456
													<label for="lieudit" class="pointer">Lieu-dit</label>
683
													<label for="notes" class="pointer">
457
													<div>
-
 
458
														<input type="text" id="lieudit" class="span2" name="lieudit"/>
-
 
459
													</div>
684
														<strong>Notes</strong>
460
												</div>
-
 
461
												<div class="span4 has-tooltip centre"
-
 
462
													title="Lieu précis de l'observation définissant une unité écologique homogène (ex: le pré derrière la maison)." >
-
 
463
													<label for="station" class="pointer">Station</label>
-
 
464
													<div>
-
 
465
														<input type="text" id="station" class="span2" name="station"/>
-
 
466
													</div>
685
													</label>
467
												</div>
-
 
468
												<div class="span4 has-tooltip centre"
-
 
469
													title="Type d'habitat plus ou moins standardisé dans les codes Corine ou Catminat (ex: prairie humide).">
-
 
470
													<label for="milieu" class="pointer">Milieu</label>
-
 
471
													<div>
686
													<div>
472
														<input type="text" id="milieu" class="span2" name="milieu" />
687
														<textarea id="notes" class="span5" rows="6" name="notes"
-
 
688
															placeholder="Vous pouvez éventuellement ajouter des informations complémentaires à votre observation (altitude, taille de la plante...)"></textarea>
473
													</div>
689
													</div>
474
												</div>
690
												</div>
475
											</div>
691
											</div>
476
										</form>
692
										</form>
477
									</div>
693
										<hr>
478
								</div>
-
 
479
							</div>
-
 
480
							<!-- 2e colonne : observation -->
-
 
481
							<div class="span6">
-
 
482
								<form id="form-obs" action="#" autocomplete="on">
694
										<form id="form-upload" class="form-horizontal" action="<?= $url_ws_upload ?>"
483
									<h2>Observation</h2>
-
 
484
									<div class="row-fluid">
-
 
485
										<div id="taxon-liste-input-groupe" class="control-group">
695
											method="post" enctype="multipart/form-data">
486
											<label for="taxon-liste">
696
											<h3>Image(s) de cette plante</h3>
487
												<span class="has-tooltip pointer"
-
 
488
												title="Sélectionnez une espèce dans la liste déroulante par son nom latin
-
 
489
												ou commun. Si une espèce est absente, sélectionner «Autre espèce»." 
-
 
490
												>
-
 
491
													<strong class="obligatoire">*</strong>
-
 
492
													Espèces
-
 
493
												</span>
-
 
494
											</label>
-
 
495
											<span class="input-prepend">
-
 
496
												<span id="espece-icone" class="add-on">
-
 
497
													<i class="icon-leaf"></i>
-
 
498
												</span>
-
 
499
											</span>
-
 
500
											<select id="taxon-liste" name="taxon-liste" class="form-control">
-
 
501
												<option value="" selected>Sélectionner une espèce</option>
-
 
502
												<optgroup id="taxon-liste-noms">
-
 
503
													<?php foreach ($taxons['sci-et-fr'] as $taxon) :?>
-
 
504
														<option
-
 
505
															class="<?=$taxon['nom_type'] ?>"
-
 
506
															value="<?=$taxon['num_nom'] ?>"
-
 
507
															title="<?=$taxon['nom_title'] ?>"
-
 
508
															data-nom-a-sauver="<?=$taxon['nom_a_sauver'] ?>"
-
 
509
															>
-
 
510
															<?=$taxon['nom_a_afficher']?>
-
 
511
														</option>
-
 
512
													<?php endforeach; ?>
-
 
513
												</optgroup>
-
 
514
												<optgroup id="taxon-liste-special">
-
 
515
													<?php foreach ($taxons['speciaux'] as $taxon) :?>
-
 
516
														<option
-
 
517
															class="<?=$taxon['nom_type'] ?>"
-
 
518
															value="<?=$taxon['num_nom'] ?>"
-
 
519
															title="<?=$taxon['nom_title'] ?>"
-
 
520
															data-nom-a-sauver="<?=$taxon['nom_a_sauver'] ?>"
-
 
521
															>
-
 
522
															<?=$taxon['nom_a_afficher']?>
-
 
523
														</option>
-
 
524
													<?php endforeach; ?>
-
 
525
												</optgroup>
-
 
526
												<option id="taxon-option-autre" value="?">Autre espèce</option>
-
 
527
											</select>
-
 
528
										</div>
-
 
529
									</div>
-
 
530
									<div class="row-fluid">
-
 
531
										<div id="taxon-input-groupe" class="span8" hidden>
-
 
532
											<label for="taxon" title="Choisissez une espèce">
-
 
533
												<span class="has-tooltip pointer" title="Sélectionnez une espèce dans la liste déroulante pour lier
-
 
534
												votre nom au référentiel selectionné. Si vous
-
 
535
												le désirez vous pouvez aussi saisir un nom absent du référentiel
-
 
536
												(Ex. : 'fleur violette' ou 'viola sinensis???').">
-
 
537
													<strong class="obligatoire">*</strong>
697
											<strong>Ajouter une image</strong>
538
													Espèce <?= $referentiel_impose ? '('.$ns_referentiel.')' : '' ?> <em>(ou indication sur la plante)</em>
-
 
539
												</span>
-
 
540
											</label>
-
 
541
											<span class="input-prepend">
-
 
542
												<span class="add-on">
-
 
543
													<i class="icon-leaf"></i>
-
 
544
												</span>
-
 
545
												<input class="input-large" type="text" id="taxon" name="taxon" value="<?= $nom_sci_espece_defaut; ?>" data="numNomSel" />
698
											<p class="miniature-info" class="discretion help-inline">Les photos doivent être au format JPEG et ne doivent pas excéder 5Mo chacune.</p>
546
											</span>
-
 
547
										</div>
-
 
548
										<p class="alert alert-warning" id="avertissement-non-messicole" style="display: none;">
699
											<div id="image-obligatoire" class="alert alert-error alert-block" style="display: none;">
549
											<strong>Attention:</strong> cette espèce n'est
-
 
550
											pas considérée comme messicole !
-
 
551
										</p>
-
 
552
									</div>
-
 
553
									<!-- Certitude -->
-
 
554
									<div class="row-fluid">
-
 
555
										<div class="span12">
-
 
556
											<label for="identification-liste">
-
 
557
												<span class="has-tooltip pointer" 
-
 
558
												title="Indiquez votre certitude vis-à-vis du nom d'espèce indiqué">
-
 
559
													Certitude
-
 
560
												</span>
-
 
561
											</label>
-
 
562
											<span class="input-prepend">
-
 
563
												<span id="identification-icone" class="add-on">
-
 
564
													<i class="icon-eye-open"></i>
700
												<a class="close">×</a>
565
												</span>
-
 
566
											</span>
-
 
567
											<select name="identification-liste" id="identification-liste">
-
 
568
												<option value="" selected>Indiquez votre certitude</option>
-
 
569
												<option value="certaine" data-titre="certaine">Certaine</option>
701
												<h4 class="alert-heading">Information : image obligatoire</h4>
570
												<option value="douteuse" data-titre="douteuse">Douteuse</option>
-
 
571
												<option value="adeterminer" data-titre="à déterminer">A déterminer</option>
-
 
572
											</select>
-
 
573
										</div>
-
 
574
									</div>
-
 
575
									<!-- Abondance -->
-
 
576
									<div class="row-fluid">
-
 
577
										<div class="span12">
-
 
578
											<label for="abondance-liste">
-
 
579
												<span class="has-tooltip pointer" 
-
 
580
												title="Indiquez l'abondance de l'espèce indiquée">
-
 
581
													<strong class="obligatoire">*</strong>
-
 
582
													Abondance
-
 
583
												</span>
-
 
584
											</label>
-
 
585
											<span class="input-prepend">
-
 
586
												<span id="abondance-icone" class="add-on">
-
 
587
													<i class="icon-signal"></i>
-
 
588
												</span>
-
 
589
											</span>
-
 
590
											<select name="abondance-liste" id="abondance-liste">
-
 
591
												<option value="" class="a-masquer" selected>Sélectionner une abondance</option>
-
 
592
												<option value="1" data-titre="1 à 10 espèces">1 à 10 espèces</option>
-
 
593
												<option value="10" data-titre="10 à 100 espèces">10 à 100 espèces</option>
-
 
594
												<option value="100" data-titre="100 à 1000 espèces">100 à 1000 espèces</option>
-
 
595
											</select>
-
 
596
										</div>
-
 
597
									</div>
-
 
598
									<!-- Zone du champ -->
-
 
599
									<div class="row-fluid">
-
 
600
										<span class="span3 control-group">
-
 
601
											<label>
-
 
602
												<span class="has-tooltip pointer" 
-
 
603
												title="Sélectionnez une ou plusieurs zones dans lesquelles l'espèce indiquée est présente">
-
 
604
													<strong class="obligatoire">*</strong>
-
 
605
													Zone du champ
-
 
606
												</span>
-
 
607
											</label>
-
 
608
										</span>
-
 
609
										<span class="span9 control-group">
-
 
610
											<!-- Bordure -->										
-
 
611
											<label for="bordure" class="checkbox pointer">
-
 
612
												<input type="checkbox" id="bordure" name="zone-champ[]" value="bordure" data-titre="bordure" />
-
 
613
												Bordure
-
 
614
												<i class="icon-question-sign cursor-pointer" data-toggle="popover" data-trigger="hover">
-
 
615
												</i>
702
												<p>
616
											</label>
-
 
617
											<div class="popover-html-content" data-for="bordure">
-
 
618
												<h5>Bordure</h5>
-
 
619
												Une description de la zone Bordure<br/>
703
													Votre identification n'est pas certaine.
620
												...
-
 
621
											</div>
-
 
622
											<!-- Cœur du champ -->										
-
 
623
											<label for="coeur-champ" class="checkbox pointer">
-
 
624
												<input type="checkbox" id="coeur-champ" name="zone-champ[]" value="coeur" data-titre="cœur" />
-
 
625
												Cœur du champ
-
 
626
												<i class="icon-question-sign cursor-pointer" data-toggle="popover" data-trigger="hover">
-
 
627
												</i>
704
													<br>
628
											</label>
-
 
629
											<div class="popover-html-content" data-for="coeur-champ">
-
 
630
												<h5>Cœur du champ</h5>
-
 
631
												Une description de la zone Cœur du champ<br/>
705
													Veuillez ajouter au moins une image.
632
												...
-
 
633
											</div>
-
 
634
											<!-- Zone délaissée -->										
-
 
635
											<label for="zone-delaissee" class="checkbox pointer">
-
 
636
												<input type="checkbox" id="zone-delaissee" name="zone-champ[]" value="zone-delaissee" data-titre="zone délaissée" />
-
 
637
												Zone délaissée
-
 
638
												<i class="icon-question-sign cursor-pointer" data-toggle="popover" data-trigger="hover">
-
 
639
												</i>
706
												</p>
640
											</label>
-
 
641
											<div class="popover-html-content" data-for="zone-delaissee">
-
 
642
												<h5>Zone délaissée</h5>
-
 
643
												Une description de la Zone délaissée<br/>
-
 
644
												...
-
 
645
											</div>
707
											</div>
646
										</span>
708
											<div id ="photos-conteneur">
647
									</div>
-
 
648
									<div class="row-fluid">
709
												<input class="pointer" type="file" id="fichier" name="fichier" accept="image/jpeg" />
649
										<div class="span12">
710
												<input type="hidden" name="MAX_FILE_SIZE" value="5242880"/>
650
											<label for="notes" class="pointer">Notes</label>
711
												<div id="miniatures">
651
											<div>
712
												</div>
652
												<textarea id="notes" class="span6" rows="7" name="notes"
713
												<p class="miniature-msg" class="span12">&nbsp;</p>
653
													placeholder="Vous pouvez éventuellement ajouter des informations complémentaires à votre observation (altitude, taille de la plante...)"></textarea>
-
 
654
											</div>
714
											</div>
655
										</div>
715
										</form>
656
									</div>
716
									</div>
657
								</form>
-
 
658
								<form id="form-upload" class="form-horizontal" action="<?= $url_ws_upload ?>"
-
 
659
									method="post" enctype="multipart/form-data">
717
									<div class="row-fluid">
660
									<h2>Image(s) de cette plante</h2>
718
										<div class="span12 centre has-tooltip"
661
									<strong>Ajouter une image</strong>
-
 
662
									<p class="miniature-info" class="discretion help-inline">Les photos doivent être au format JPEG et ne doivent pas excéder 5Mo chacune.</p>
-
 
663
									<div id="image-obligatoire" class="alert alert-error alert-block" style="display: none;">
719
											title="Une fois les champs remplis, vous pouvez cliquer sur ce bouton pour
664
										<a class="close">×</a>
-
 
665
										<h4 class="alert-heading">Information : image obligatoire</h4>
720
												ajouter votre observation à la liste à transmettre.">
666
										<p>
-
 
667
											Votre identification n'est pas certaine.
721
											<button id="ajouter-obs" class="btn btn-primary btn-large" type="button">
668
											<br>
722
												Créer
669
											Veuillez ajouter au moins une image.
-
 
670
										</p>
723
											</button>
671
									</div>
-
 
672
									<div id ="photos-conteneur">
-
 
673
										<input class="pointer" type="file" id="fichier" name="fichier" accept="image/jpeg" />
-
 
674
										<input type="hidden" name="MAX_FILE_SIZE" value="5242880"/>
-
 
675
										<div id="miniatures">
-
 
676
										</div>
724
										</div>
677
										<p class="miniature-msg" class="span12">&nbsp;</p>
-
 
678
									</div>
725
									</div>
679
								</form>
-
 
680
							</div>
-
 
681
							<div class="row-fluid">
-
 
682
								<div class="span12 centre has-tooltip"
-
 
683
									title="Une fois les champs remplis, vous pouvez cliquer sur ce bouton pour
-
 
684
										ajouter votre observation à la liste à transmettre.">
-
 
685
									<button id="ajouter-obs" class="btn btn-primary btn-large" type="button">
-
 
686
										Créer
-
 
687
									</button>
-
 
688
								</div>
726
								</div>
689
							</div>
727
							</div>
690
						</div>
728
						</div>
691
					</div>
729
					</div>
692
				</div>
730
				</div>