Subversion Repositories eFlore/Applications.cel

Rev

Rev 2900 | Go to most recent revision | Only display areas with differences | Ignore whitespace | Details | Blame | Last modification | View Log | RSS feed

Rev 2900 Rev 2902
1
<!DOCTYPE html>
1
<!DOCTYPE html>
2
<html>
2
<html>
3
	<head>
3
	<head>
4
		<title>Saisie simplifiée du CEL - messicoles</title>
4
		<title>Saisie simplifiée du CEL - messicoles</title>
5
 
5
 
6
		<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
6
		<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
7
 
7
 
8
		<meta name="revisit-after" content="15 days" />
8
		<meta name="revisit-after" content="15 days" />
9
		<meta name="robots" content="index,follow" />
9
		<meta name="robots" content="index,follow" />
10
		<meta name="author" content="Tela Botanica" />
10
		<meta name="author" content="Tela Botanica" />
11
		<meta name="keywords" content="Tela Botanica, CEL" />
11
		<meta name="keywords" content="Tela Botanica, CEL" />
12
		<meta name="description" content="Widget de saisie simplifiée pour le CEL" />
12
		<meta name="description" content="Widget de saisie simplifiée pour le CEL" />
13
 
13
 
14
		<!-- OpenGraph pour Facebook, Pinterest, Google+ -->
14
		<!-- OpenGraph pour Facebook, Pinterest, Google+ -->
15
		<meta property="og:type" content="website" />
15
		<meta property="og:type" content="website" />
16
		<meta property="og:title" content="Saisie rapide d'observations - messicoles" />
16
		<meta property="og:title" content="Saisie rapide d'observations - messicoles" />
17
		<meta property="og:site_name" content="Tela Botanica" />
17
		<meta property="og:site_name" content="Tela Botanica" />
18
		<meta property="og:description" content="Saisissez et partagez facilement vos observations de plantes sauvages grâce au Widget de saisie du Carnet en Ligne (Licence CC-BY-SA)" />
18
		<meta property="og:description" content="Saisissez et partagez facilement vos observations de plantes sauvages grâce au Widget de saisie du Carnet en Ligne (Licence CC-BY-SA)" />
19
		<meta property="og:image" content="http://resources.tela-botanica.org/tb/img/256x256/carre_englobant.png" />
19
		<meta property="og:image" content="http://resources.tela-botanica.org/tb/img/256x256/carre_englobant.png" />
20
		<meta property="og:image:type" content="image/png" /> 
20
		<meta property="og:image:type" content="image/png" /> 
21
		<meta property="og:image:width" content="256" /> 
21
		<meta property="og:image:width" content="256" /> 
22
		<meta property="og:image:height" content="256" />
22
		<meta property="og:image:height" content="256" />
23
		<meta property="og:locale" content="fr_FR" />
23
		<meta property="og:locale" content="fr_FR" />
24
 
24
 
25
		<!-- Viewport Mobile -->
25
		<!-- Viewport Mobile -->
26
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
26
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
27
 
27
 
28
		<!-- Favicones -->
28
		<!-- Favicones -->
29
		<link rel="shortcut icon" type="image/x-icon" href="http://resources.tela-botanica.org/tb/img/16x16/favicon.ico" />
29
		<link rel="shortcut icon" type="image/x-icon" href="http://resources.tela-botanica.org/tb/img/16x16/favicon.ico" />
30
 
30
 
31
		<!-- Javascript : bibliothèques -->
31
		<!-- Javascript : bibliothèques -->
32
		<!-- Google Map v3 -->
32
		<!-- Google Map v3 -->
33
		<script type="text/javascript" src="http://maps.google.com/maps/api/js?language=fr&amp;region=FR"></script>
33
		<script type="text/javascript" src="http://maps.google.com/maps/api/js?language=fr&amp;region=FR"></script>
34
		<!-- Jquery -->
34
		<!-- Jquery -->
35
		<script type="text/javascript" src="http://resources.tela-botanica.org/jquery/1.11.1/jquery-1.11.1.min.js"></script>
35
		<script type="text/javascript" src="http://resources.tela-botanica.org/jquery/1.11.1/jquery-1.11.1.min.js"></script>
36
		<!-- Jquery UI : nécessaire pour le minicalendrier et l'auto-complétion -->
36
		<!-- Jquery UI : nécessaire pour le minicalendrier et l'auto-complétion -->
37
		<script type="text/javascript" src="http://resources.tela-botanica.org/jquery/jquery-ui/1.11.0/js/jquery-ui.min.js"></script>
37
		<script type="text/javascript" src="http://resources.tela-botanica.org/jquery/jquery-ui/1.11.0/js/jquery-ui.min.js"></script>
38
		<script type="text/javascript" src="http://resources.tela-botanica.org/jquery/jquery-ui/1.11.0/js/datepicker-fr.js"></script>
38
		<script type="text/javascript" src="http://resources.tela-botanica.org/jquery/jquery-ui/1.11.0/js/datepicker-fr.js"></script>
39
		<!-- Jquery Plugins -->
39
		<!-- Jquery Plugins -->
40
		<!-- Jquery Validate : nécessaire pour la validation des formulaires -->
40
		<!-- Jquery Validate : nécessaire pour la validation des formulaires -->
41
		<script type="text/javascript" src="http://resources.tela-botanica.org/jquery/validate/1.11.1/jquery.validate.min.js"></script>
41
		<script type="text/javascript" src="http://resources.tela-botanica.org/jquery/validate/1.11.1/jquery.validate.min.js"></script>
42
		<script type="text/javascript" src="http://resources.tela-botanica.org/jquery/validate/1.11.1/additional-methods.min.js"></script>
42
		<script type="text/javascript" src="http://resources.tela-botanica.org/jquery/validate/1.11.1/additional-methods.min.js"></script>
43
		<script type="text/javascript" src="http://resources.tela-botanica.org/jquery/validate/1.11.1/messages_fr.js"></script>
43
		<script type="text/javascript" src="http://resources.tela-botanica.org/jquery/validate/1.11.1/messages_fr.js"></script>
44
		<!-- Jquery Form :nécessaire pour l'upload des images -->
44
		<!-- Jquery Form :nécessaire pour l'upload des images -->
45
		<script type="text/javascript" src="http://resources.tela-botanica.org/jquery/form/3.51/jquery.form.min.js"></script>
45
		<script type="text/javascript" src="http://resources.tela-botanica.org/jquery/form/3.51/jquery.form.min.js"></script>
46
		<!-- Bootstrap -->
46
		<!-- Bootstrap -->
47
		<script type="text/javascript" src="http://resources.tela-botanica.org/bootstrap/2.3.2/js/bootstrap.min.js"></script>
47
		<script type="text/javascript" src="http://resources.tela-botanica.org/bootstrap/2.3.2/js/bootstrap.min.js"></script>
48
 
48
 
49
		<!-- Javascript : appli saisie -->
49
		<!-- Javascript : appli saisie -->
50
		<script type="text/javascript" src="<?=$url_base?>modules/saisie/squelettes/defaut/js/WidgetSaisie.js"></script>
50
		<script type="text/javascript" src="<?=$url_base?>modules/saisie/squelettes/defaut/js/WidgetSaisie.js"></script>
51
		<script type="text/javascript" src="<?=$url_base?>modules/saisie/squelettes/messicoles/js/WidgetSaisieMessicoles.js"></script>
51
		<script type="text/javascript" src="<?=$url_base?>modules/saisie/squelettes/messicoles/js/WidgetSaisieMessicoles.js"></script>
52
		<script src="<?=$url_base?>saisie?projet=messicoles&amp;service=taxons" type="text/javascript"></script>
52
		<script src="<?=$url_base?>saisie?projet=messicoles&amp;service=taxons" type="text/javascript"></script>
53
		<script type="text/javascript" src="<?=$url_base?>modules/saisie/configurations/messicoles_nnr.js"></script>
53
		<script type="text/javascript" src="<?=$url_base?>modules/saisie/configurations/messicoles_nnr.js"></script>
54
		<script type="text/javascript">
54
		<script type="text/javascript">
55
		//<![CDATA[
55
		//<![CDATA[
56
           $(document).ready(function() {
56
           $(document).ready(function() {
57
				// Un objet sauvage apparaît
57
				// Un objet sauvage apparaît
58
				var widget = new WidgetSaisieMessicoles();
58
				var widget = new WidgetSaisieMessicoles();
59
 
59
 
60
				// la variable "taxons" chargée par "service=taxons" ci-dessus n'est pas accessible dans le contexte objet
60
				// la variable "taxons" chargée par "service=taxons" ci-dessus n'est pas accessible dans le contexte objet
61
				widget.taxons = taxons;
61
				widget.taxons = taxons;
62
 
62
 
63
				// La présence du parametre 'debug' dans l'URL enclenche le débogage
63
				// La présence du parametre 'debug' dans l'URL enclenche le débogage
64
				widget.debug = <?=isset($_GET['debug']) ? 'true' : 'false'?>;
64
				widget.debug = <?=isset($_GET['debug']) ? 'true' : 'false'?>;
65
				// La présence du parametre 'html5' dans l'URL enclenche les fonctions avancées HTML5
65
				// La présence du parametre 'html5' dans l'URL enclenche les fonctions avancées HTML5
66
				widget.html5 = <?=isset($_GET['html5']) ? 'true' : 'false'?>;
66
				widget.html5 = <?=isset($_GET['html5']) ? 'true' : 'false'?>;
67
				// Mot-clé du widget/projet
67
				// Mot-clé du widget/projet
68
				widget.tagProjet = "WidgetSaisie";
68
				widget.tagProjet = "WidgetSaisie";
69
				// Mots-clés à ajouter aux images
69
				// Mots-clés à ajouter aux images
70
				widget.tagImg = "<?=isset($_GET['tag-img']) ? $_GET['tag-img'] : ''?>";
70
				widget.tagImg = "<?=isset($_GET['tag-img']) ? $_GET['tag-img'] : ''?>";
71
				widget.separationTagImg = "<?= isset($_GET['motcle']) && isset($_GET['tag-img']) ? ',' : '' ?>";
71
				widget.separationTagImg = "<?= isset($_GET['motcle']) && isset($_GET['tag-img']) ? ',' : '' ?>";
72
				widget.tagImg = <?=isset($_GET['motcle']) ? "'".$_GET['motcle']."' + widget.separationTagImg + widget.tagImg" : 'widget.tagImg' ?>;
72
				widget.tagImg = <?=isset($_GET['motcle']) ? "'".$_GET['motcle']."' + widget.separationTagImg + widget.tagImg" : 'widget.tagImg' ?>;
73
				// Mots-clés à ajouter aux observations
73
				// Mots-clés à ajouter aux observations
74
				widget.tagObs = "<?=isset($_GET['tag-obs']) ? $_GET['tag-obs'] : ''?>";
74
				widget.tagObs = "<?=isset($_GET['tag-obs']) ? $_GET['tag-obs'] : ''?>";
75
				widget.separationTagObs = "<?= isset($_GET['projet']) && isset($_GET['tag-obs']) ? ',' : '' ?>";
75
				widget.separationTagObs = "<?= isset($_GET['projet']) && isset($_GET['tag-obs']) ? ',' : '' ?>";
76
				widget.tagObs = <?=isset($_GET['projet']) ? "'".$_GET['projet']."' + widget.separationTagObs + widget.tagObs" : 'widget.tagObs' ?>;
76
				widget.tagObs = <?=isset($_GET['projet']) ? "'".$_GET['projet']."' + widget.separationTagObs + widget.tagObs" : 'widget.tagObs' ?>;
77
				// Précharger le formulaire avec les infos d'une observation
77
				// Précharger le formulaire avec les infos d'une observation
78
				widget.obsId = "<?=isset($_GET['id-obs']) ? $_GET['id-obs'] : ''?>";
78
				widget.obsId = "<?=isset($_GET['id-obs']) ? $_GET['id-obs'] : ''?>";
79
				// URL du web service réalisant l'insertion des données dans la base du CEL.
79
				// URL du web service réalisant l'insertion des données dans la base du CEL.
80
				widget.serviceSaisieUrl = "<?=$url_ws_saisie?>";
80
				widget.serviceSaisieUrl = "<?=$url_ws_saisie?>";
81
				// URL du web service permettant de récupérer les infos d'une observation du CEL.
81
				// URL du web service permettant de récupérer les infos d'une observation du CEL.
82
				widget.serviceObsUrl = "<?=$url_ws_obs?>";
82
				widget.serviceObsUrl = "<?=$url_ws_obs?>";
83
				// Code du référentiel utilisé pour les nom scientifiques.
83
				// Code du référentiel utilisé pour les nom scientifiques.
84
				widget.nomSciReferentiel = "<?=$ns_referentiel?>";
84
				widget.nomSciReferentiel = "<?=$ns_referentiel?>";
85
				// Indication de la présence d'une espèce imposée
85
				// Indication de la présence d'une espèce imposée
86
				widget.especeImposee = "<?=$espece_imposee; ?>";
86
				widget.especeImposee = "<?=$espece_imposee; ?>";
87
				// Tableau d'informations sur l'espèce imposée
87
				// Tableau d'informations sur l'espèce imposée
88
				widget.infosEspeceImposee = <?=$infos_espece; ?>;
88
				widget.infosEspeceImposee = <?=$infos_espece; ?>;
89
				// Nombre d'élément dans les listes d'auto-complétion
89
				// Nombre d'élément dans les listes d'auto-complétion
90
				widget.autocompletionElementsNbre = 20;
90
				widget.autocompletionElementsNbre = 20;
91
				// Indication de la présence d'un référentiel imposé
91
				// Indication de la présence d'un référentiel imposé
92
				widget.referentielImpose = "<?=$referentiel_impose; ?>";
92
				widget.referentielImpose = "<?=$referentiel_impose; ?>";
93
				// URL du web service permettant l'auto-complétion des noms scientifiques
93
				// URL du web service permettant l'auto-complétion des noms scientifiques
94
				widget.serviceAutocompletionNomSciUrl = "<?=$url_ws_autocompletion_ns?>?"+
94
				widget.serviceAutocompletionNomSciUrl = "<?=$url_ws_autocompletion_ns?>?"+
95
					"masque={masque}&"+
95
					"masque={masque}&"+
96
					"recherche=etendue&"+
96
					"recherche=etendue&"+
97
					"retour.champs=famille,nom_retenu,nom_retenu_complet,num_taxonomique,nom_retenu.id&"+
97
					"retour.champs=famille,nom_retenu,nom_retenu_complet,num_taxonomique,nom_retenu.id&"+
98
					"ns.structure=au"+"&"+
98
					"ns.structure=au"+"&"+
99
					"navigation.limite=" + widget.autocompletionElementsNbre;
99
					"navigation.limite=" + widget.autocompletionElementsNbre;
100
				// Squelette d'URL du web service permettant l'auto-complétion des noms scientifiques
100
				// Squelette d'URL du web service permettant l'auto-complétion des noms scientifiques
101
				widget.serviceAutocompletionNomSciUrlTpl = "<?=$url_ws_autocompletion_ns_tpl?>?"+
101
				widget.serviceAutocompletionNomSciUrlTpl = "<?=$url_ws_autocompletion_ns_tpl?>?"+
102
					"masque={masque}&"+
102
					"masque={masque}&"+
103
					"recherche=etendue&"+
103
					"recherche=etendue&"+
104
					"retour.champs=famille,nom_retenu,nom_retenu_complet,num_taxonomique,nom_retenu.id&"+
104
					"retour.champs=famille,nom_retenu,nom_retenu_complet,num_taxonomique,nom_retenu.id&"+
105
					"retour.tri=alpharet&"+ // tri "à la CeL"
105
					"retour.tri=alpharet&"+ // tri "à la CeL"
106
					"ns.structure=au"+"&"+
106
					"ns.structure=au"+"&"+
107
					"navigation.limite=" + widget.autocompletionElementsNbre;
107
					"navigation.limite=" + widget.autocompletionElementsNbre;
108
				// Nombre d'observations max autorisé avant transmission
108
				// Nombre d'observations max autorisé avant transmission
109
				widget.obsMaxNbre = 10;
109
				widget.obsMaxNbre = 10;
110
				// Durée d'affichage en milliseconde des messages d'informations
110
				// Durée d'affichage en milliseconde des messages d'informations
111
				widget.dureeMessage = 15000;
111
				widget.dureeMessage = 15000;
112
				// Squelette d'URL du web service de l'annuaire.
112
				// Squelette d'URL du web service de l'annuaire.
113
				widget.serviceAnnuaireIdUrl = "<?=$url_ws_annuaire?>";
113
				widget.serviceAnnuaireIdUrl = "<?=$url_ws_annuaire?>";
114
				// Squelette d'URL du web service d'eFlore fournissant les noms de communes.
114
				// Squelette d'URL du web service d'eFlore fournissant les noms de communes.
115
				widget.serviceNomCommuneUrl = "http://api.tela-botanica.org/service:eflore:0.1/osm/nom-commune?lon={lon}&lat={lat}";
115
				widget.serviceNomCommuneUrl = "http://api.tela-botanica.org/service:eflore:0.1/osm/nom-commune?lon={lon}&lat={lat}";
116
				// Squelette d'URL du web service d'eFlore fournissant les noms de communes hors de France (localisation approximative).
116
				// Squelette d'URL du web service d'eFlore fournissant les noms de communes hors de France (localisation approximative).
117
				widget.serviceNomCommuneUrlAlt = "http://api.tela-botanica.org/service:eflore:0.1/wikipedia/nom-commune?lon={lon}&lat={lat}&nbre=1";
117
				widget.serviceNomCommuneUrlAlt = "http://api.tela-botanica.org/service:eflore:0.1/wikipedia/nom-commune?lon={lon}&lat={lat}&nbre=1";
118
				// URL du marqueur à utiliser dans la carte Google Map
118
				// URL du marqueur à utiliser dans la carte Google Map
119
				widget.googleMapMarqueurUrl = "<?=$url_base?>modules/saisie/squelettes/messicoles/img/marqueurs/debut.png";
119
				widget.googleMapMarqueurUrl = "<?=$url_base?>modules/saisie/squelettes/messicoles/img/marqueurs/debut.png";
120
				// URL de l'icône du chargement en cours
120
				// URL de l'icône du chargement en cours
121
				widget.chargementIconeUrl = "<?=$url_base?>modules/saisie/squelettes/messicoles/img/icones/chargement.gif";
121
				widget.chargementIconeUrl = "<?=$url_base?>modules/saisie/squelettes/messicoles/img/icones/chargement.gif";
122
				// URL de l'icône du chargement en cours d'une image
122
				// URL de l'icône du chargement en cours d'une image
123
				widget.chargementImageIconeUrl = "<?=$url_base?>modules/saisie/squelettes/messicoles/img/icones/chargement-image.gif";
123
				widget.chargementImageIconeUrl = "<?=$url_base?>modules/saisie/squelettes/messicoles/img/icones/chargement-image.gif";
124
				// URL de l'icône du calendrier
124
				// URL de l'icône du calendrier
125
				widget.calendrierIconeUrl = "<?=$url_base?>modules/saisie/squelettes/messicoles/img/icones/calendrier.png";
125
				widget.calendrierIconeUrl = "<?=$url_base?>modules/saisie/squelettes/messicoles/img/icones/calendrier.png";
126
				// URL de l'icône pour une photo manquante
126
				// URL de l'icône pour une photo manquante
127
				widget.pasDePhotoIconeUrl = "<?=$url_base?>modules/saisie/squelettes/messicoles/img/icones/pasdephoto.png";
127
				widget.pasDePhotoIconeUrl = "<?=$url_base?>modules/saisie/squelettes/messicoles/img/icones/pasdephoto.png";
128
 
128
 
129
				// Initialisation du bousin
129
				// Initialisation du bousin
130
				widget.init();
130
				widget.init();
131
			});
131
			});
132
		//]]>
132
		//]]>
133
		</script>
133
		</script>
134
 
134
 
135
		<!-- CSS -->
135
		<!-- CSS -->
136
		<link href="http://resources.tela-botanica.org/jquery/jquery-ui/1.11.0/css/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" media="screen" />
136
		<link href="http://resources.tela-botanica.org/jquery/jquery-ui/1.11.0/css/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" media="screen" />
137
		<link href="http://resources.tela-botanica.org/bootstrap/2.0.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" media="screen" />
137
		<link href="http://resources.tela-botanica.org/bootstrap/2.0.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" media="screen" />
138
		<link href="http://resources.tela-botanica.org/bootstrap/2.0.2/css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css" media="screen" />
138
		<link href="http://resources.tela-botanica.org/bootstrap/2.0.2/css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css" media="screen" />
139
		<link href="<?=$url_base?>modules/saisie/squelettes/messicoles/css/<?=isset($_GET['style']) ? $_GET['style'] : 'messicoles'?>.css" rel="stylesheet" type="text/css" media="screen" />
139
		<link href="<?=$url_base?>modules/saisie/squelettes/messicoles/css/<?=isset($_GET['style']) ? $_GET['style'] : 'messicoles'?>.css" rel="stylesheet" type="text/css" media="screen" />
140
 
140
 
141
		<!--  Google Analytics -->
141
		<!--  Google Analytics -->
142
		<?php if($prod): ?>
142
		<?php if($prod): ?>
143
			<?php include "analytics.html"; ?>
143
			<?php include "analytics.html"; ?>
144
		<?php endif; ?>
144
		<?php endif; ?>
145
	</head>
145
	</head>
146
 
146
 
147
	<body data-spy="scroll">
147
	<body data-spy="scroll">
148
		<div class="container">
148
		<div class="container">
149
			<div class="row-fluid">
149
			<div class="row-fluid">
150
				<div class="span12 page-header">
150
				<div class="span12 page-header">
151
					<div class="row">
151
					<div class="row">
152
						<div class="span12">
152
						<div class="span12">
153
							<h1>
153
							<h1>
154
								<?php if($logo != 'defaut' && $logo != '0') { ?>
154
								<?php if($logo != 'defaut' && $logo != '0') { ?>
155
									<img id="logo-titre" class="span1" src="<?= $logo ?>" alt="Logo" />
155
									<img id="logo-titre" class="span1" src="<?= $logo ?>" alt="Logo" />
156
								<?php } else if($logo == 'defaut') { ?>
156
								<?php } else if($logo == 'defaut') { ?>
157
									<img id="logo-titre" class="span1" src="http://resources.tela-botanica.org/tb/img/256x256/logo_sans_mots.png" alt="Tela Botanica" />
157
									<img id="logo-titre" class="span1" src="http://resources.tela-botanica.org/tb/img/256x256/logo_sans_mots.png" alt="Tela Botanica" />
158
								<?php } ?>
158
								<?php } ?>
159
								<span id="titre-projet">
159
								<span id="titre-projet">
160
								<?php if($titre != 'defaut') { ?>
160
								<?php if($titre != 'defaut') { ?>
161
									<?= $titre; ?>
161
									<?= $titre; ?>
162
								</span>
162
								</span>
163
								<?php } else { ?>
163
								<?php } else { ?>
164
									Ajout rapide d'observations
164
									Ajout rapide d'observations
165
								<?php } ?>
165
								<?php } ?>
166
								<img id="logo-messicoles" src="<?=$url_base?>modules/saisie/squelettes/messicoles/img/icones/logo.jpg" />
166
								<img id="logo-messicoles" src="<?=$url_base?>modules/saisie/squelettes/messicoles/img/icones/logo.jpg" />
167
							</h1>
167
							</h1>
168
						</div>
168
						</div>
169
					</div>
169
					</div>
170
				</div>
170
				</div>
171
			</div>
171
			</div>
172
			<div class="row-fluid">
172
			<div class="row-fluid">
173
				<div class="span6">
173
				<div class="span6">
174
					<div class="row">
174
					<div class="row">
175
						<div class="span6">
175
						<div class="span6">
176
							<p>
176
							<p>
177
								Cet outil vous permet de partager simplement vos observations avec le
177
								Cet outil vous permet de partager simplement vos observations avec le
178
								<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>).
178
								<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>).
179
								Identifiez-vous bien pour ensuite retrouver et gérer vos données dans
179
								Identifiez-vous bien pour ensuite retrouver et gérer vos données dans
180
								<a href="http://www.tela-botanica.org/appli:cel">votre Carnet en ligne</a>.
180
								<a href="http://www.tela-botanica.org/appli:cel">votre Carnet en ligne</a>.
181
								Créez jusqu'à 10 observations (avec 10Mo max d'images) puis partagez-les avec le bouton 'transmettre'.
181
								Créez jusqu'à 10 observations (avec 10Mo max d'images) puis partagez-les avec le bouton 'transmettre'.
182
								Elles apparaissent immédiatement sur les <a href="http://www.tela-botanica.org/site:botanique">cartes et galeries photos </a> du site.
182
								Elles apparaissent immédiatement sur les <a href="http://www.tela-botanica.org/site:botanique">cartes et galeries photos </a> du site.
183
							</p>
183
							</p>
184
							<p class="discretion">
184
							<p class="discretion">
185
								Pour toute question ou remarque,
185
								Pour toute question ou remarque,
186
								<a href="<?= $url_remarques ?>?service=cel&pageSource=<?php echo urlencode('http://'.$_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF'].'?'.$_SERVER['QUERY_STRING']); ?>"
186
								<a href="<?= $url_remarques ?>?service=cel&pageSource=<?php echo urlencode('http://'.$_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF'].'?'.$_SERVER['QUERY_STRING']); ?>"
187
								  target="_blank"
187
								  target="_blank"
188
								  onclick="javascript:window.open(this.getAttribute('href'), 'Tela Botanica - Remarques', config='height=700, width=640, scrollbars=yes, resizable=yes'); return false;">
188
								  onclick="javascript:window.open(this.getAttribute('href'), 'Tela Botanica - Remarques', config='height=700, width=640, scrollbars=yes, resizable=yes'); return false;">
189
								  contactez-nous</a>
189
								  contactez-nous</a>
190
 
190
 
191
							</p>
191
							</p>
192
							<p class="discretion">
192
							<p class="discretion">
193
								Une fois familiarisé avec l'interface vous pouvez cliquer sur ce bouton pour désactiver l'aide.
193
								Une fois familiarisé avec l'interface vous pouvez cliquer sur ce bouton pour désactiver l'aide.
194
								<button id="btn-aide" class="btn btn-mini btn-success">
194
								<button id="btn-aide" class="btn btn-mini btn-success">
195
									<span class="icon-question-sign icon-white"></span>
195
									<span class="icon-question-sign icon-white"></span>
196
									<span id="btn-aide-txt" >Désactiver l'aide</span>
196
									<span id="btn-aide-txt" >Désactiver l'aide</span>
197
								</button>
197
								</button>
198
							</p>
198
							</p>
199
						</div>
199
						</div>
200
					</div>
200
					</div>
201
				</div>
201
				</div>
202
				
202
				
203
				<!-- Bloc Observateur -->
203
				<!-- Bloc Observateur -->
204
				<div class="span6">
204
				<div class="span6">
205
					<div class="well">
205
					<div class="well">
206
						<h2>Observateur</h2>
206
						<h2>Observateur</h2>
207
						<hr>
207
						<hr>
208
						<form id="form-observateur" action="#" class="" autocomplete="on">
208
						<form id="form-observateur" action="#" class="" autocomplete="on">
209
							<div class="row-fluid">
209
							<div class="row-fluid">
210
								<div class="span6" data-placement="right">
210
								<div class="span6" data-placement="right">
211
									<label for="courriel">
211
									<label for="courriel">
212
										<span class="has-tooltip pointer"
212
										<span class="has-tooltip pointer"
213
										title="Saisissez le courriel avec lequel vous êtes inscrit à Tela Botanica.
213
										title="Saisissez le courriel avec lequel vous êtes inscrit à Tela Botanica.
214
										Si vous n'êtes pas inscrit, ce n'est pas grave, vous pourrez le faire
214
										Si vous n'êtes pas inscrit, ce n'est pas grave, vous pourrez le faire
215
										ultérieurement. Des informations complémentaires vont vous être
215
										ultérieurement. Des informations complémentaires vont vous être
216
										demandées : prénom et nom.">
216
										demandées : prénom et nom.">
217
											<strong class="obligatoire">*Courriel</strong>
217
											<strong class="obligatoire">*Courriel</strong>
218
										</span>
218
										</span>
219
									</label>
219
									</label>
220
									<div class="input-prepend">
220
									<div class="input-prepend">
221
										<span class="add-on">
221
										<span class="add-on">
222
											<i class="icon-envelope"></i>
222
											<i class="icon-envelope"></i>
223
										</span>
223
										</span>
224
										<input id="courriel" class="input-large" name="courriel" type="text" />
224
										<input id="courriel" class="input-large" name="courriel" type="text" />
225
										<input id="id_utilisateur" name="id_utilisateur" type="hidden"/>
225
										<input id="id_utilisateur" name="id_utilisateur" type="hidden"/>
226
									</div>
226
									</div>
227
								</div>
227
								</div>
228
								<div id="zone-courriel-confirmation" class="span6 hidden">
228
								<div id="zone-courriel-confirmation" class="span6 hidden">
229
									<label for="courriel_confirmation"
229
									<label for="courriel_confirmation"
230
										title="Veuillez saisir confirmer le courriel.">
230
										title="Veuillez saisir confirmer le courriel.">
231
										<strong class="obligatoire">*Courriel (confirmation)</strong>
231
										<strong class="obligatoire">*Courriel (confirmation)</strong>
232
									</label>
232
									</label>
233
									<div class="input-prepend">
233
									<div class="input-prepend">
234
										<span class="add-on">
234
										<span class="add-on">
235
											<i class="icon-envelope"></i>
235
											<i class="icon-envelope"></i>
236
										</span><input id="courriel_confirmation" class="input-large" name="courriel_confirmation" type="text"/>
236
										</span><input id="courriel_confirmation" class="input-large" name="courriel_confirmation" type="text"/>
237
									</div>
237
									</div>
238
								</div>
238
								</div>
239
							</div>
239
							</div>
240
							<div id="zone-prenom-nom" class="row-fluid hidden">
240
							<div id="zone-prenom-nom" class="row-fluid hidden">
241
								<div class="span6">
241
								<div class="span6">
242
									<label for="prenom">
242
									<label for="prenom">
243
										<strong>Prénom</strong>
243
										<strong>Prénom</strong>
244
									</label>
244
									</label>
245
									<div class="input-prepend">
245
									<div class="input-prepend">
246
										<span class="add-on">
246
										<span class="add-on">
247
											<i class="icon-user"></i>
247
											<i class="icon-user"></i>
248
										</span><input id="prenom" name="prenom" class="input-large" type="text"/>
248
										</span><input id="prenom" name="prenom" class="input-large" type="text"/>
249
									</div>
249
									</div>
250
								</div>
250
								</div>
251
								<div class="span6">
251
								<div class="span6">
252
									<label for="nom">
252
									<label for="nom">
253
										<strong>Nom</strong>
253
										<strong>Nom</strong>
254
									</label>
254
									</label>
255
									<div class="input-prepend">
255
									<div class="input-prepend">
256
										<span class="add-on">
256
										<span class="add-on">
257
											<i class="icon-user"></i>
257
											<i class="icon-user"></i>
258
										</span><input id="nom" name="nom"  class="input-large" type="text"/>
258
										</span><input id="nom" name="nom"  class="input-large" type="text"/>
259
									</div>
259
									</div>
260
								</div>
260
								</div>
261
							</div>
261
							</div>
262
						</form>
262
						</form>
263
					</div>
263
					</div>
264
				</div>
264
				</div>
265
			</div>
265
			</div>
266
			<!-- Messages d'erreur du formulaire-->
266
			<!-- Messages d'erreur du formulaire-->
267
			<div class="row">
267
			<div class="row">
268
				<div class="zone-alerte span6 offset6">
268
				<div class="zone-alerte span6 offset6">
269
					<div id="dialogue-bloquer-copier-coller" class="alert alert-info alert-block" style="display:none;">
269
					<div id="dialogue-bloquer-copier-coller" class="alert alert-info alert-block" style="display:none;">
270
						<a class="close">×</a>
270
						<a class="close">×</a>
271
						<h4 class="alert-heading">Information : copier/coller</h4>
271
						<h4 class="alert-heading">Information : copier/coller</h4>
272
						<p>
272
						<p>
273
							Merci de ne pas copier/coller votre courriel.<br/>
273
							Merci de ne pas copier/coller votre courriel.<br/>
274
							La double saisie permet de vérifier l'absence d'erreurs.
274
							La double saisie permet de vérifier l'absence d'erreurs.
275
						</p>
275
						</p>
276
					</div>
276
					</div>
277
					<div id="dialogue-courriel-introuvable" class="alert alert-info alert-block" style="display:none;">
277
					<div id="dialogue-courriel-introuvable" class="alert alert-info alert-block" style="display:none;">
278
						<a class="close">×</a>
278
						<a class="close">×</a>
279
						<h4 class="alert-heading">Information : courriel introuvable</h4>
279
						<h4 class="alert-heading">Information : courriel introuvable</h4>
280
						<p>
280
						<p>
281
							Vous n'êtes pas inscrit à Tela Botanica avec ce courriel.<br/>
281
							Vous n'êtes pas inscrit à Tela Botanica avec ce courriel.<br/>
282
							Veuillez compléter les champs supplémentaires ou indiquer votre courriel d'inscription.<br/>
282
							Veuillez compléter les champs supplémentaires ou indiquer votre courriel d'inscription.<br/>
283
							Pour retrouver vos observations dans le <a href="http://www.tela-botanica.org/appli:cel">Carnet en ligne</a>,
283
							Pour retrouver vos observations dans le <a href="http://www.tela-botanica.org/appli:cel">Carnet en ligne</a>,
284
							il sera nécesaire de <a href="http://www.tela-botanica.org/page:inscription">vous inscrire à Tela Botanica</a>.
284
							il sera nécesaire de <a href="http://www.tela-botanica.org/page:inscription">vous inscrire à Tela Botanica</a>.
285
						</p>
285
						</p>
286
					</div>
286
					</div>
287
					<div id="dialogue-google-map" class="alert alert-info alert-block" style="display: none;">
287
					<div id="dialogue-google-map" class="alert alert-info alert-block" style="display: none;">
288
						<a class="close">×</a>
288
						<a class="close">×</a>
289
						<h4 class="alert-heading">Information sur Google Maps</h4>
289
						<h4 class="alert-heading">Information sur Google Maps</h4>
290
						<div class="contenu"></div>
290
						<div class="contenu"></div>
291
					</div>
291
					</div>
292
				</div>
292
				</div>
293
			</div>
293
			</div>
294
			<div class="row-fluid">
294
			<div class="row-fluid">
295
				<div class="span12">
295
				<div class="span12">
296
					<div class="row-fluid">
296
					<div class="row-fluid">
297
						<div class="span6">
297
						<div class="span6">
298
							<div class="well">
298
							<div class="well">
299
							<!-- 1e colonne : date, lieu, geoloc -->
299
							<!-- 1e colonne : date, lieu, geoloc -->
300
								<div class="row-fluid">
300
								<div class="row-fluid">
301
									<h2>Relevé</h2>
301
									<h2>Relevé</h2>
302
									<hr>
302
									<hr>
303
									<form id="form-releve" class="control-group" action="#" autocomplete="on">
303
									<form id="form-releve" class="control-group" action="#" autocomplete="on">
304
										<!-- DATE -->
304
										<!-- DATE -->
305
										<div class="row-fluid">
305
										<div class="row-fluid">
306
											<div class="control-group">
306
											<div class="control-group">
307
												<label for="date">
307
												<label for="date">
308
													<span class="has-tooltip pointer"
308
													<span class="has-tooltip pointer"
309
													title="Veuillez indiquer la date du relevé au format jj/mm/aaaa. Vous pouvez
309
													title="Veuillez indiquer la date du relevé au format jj/mm/aaaa. Vous pouvez
310
													cliquer sur l'icône de calendrier pour sélectionner une date">
310
													cliquer sur l'icône de calendrier pour sélectionner une date">
311
														<strong class="obligatoire">*Date du relevé</strong>
311
														<strong class="obligatoire">*Date du relevé</strong>
312
													</span>
312
													</span>
313
												</label>
313
												</label>
314
												<div class="input-prepend">
314
												<div class="input-prepend">
315
													<span id="date-icone" class="add-on"></span><input id="date"
315
													<span id="date-icone" class="add-on"></span><input id="date"
316
														class="input-small" name="date" type="text"
316
														class="input-small" name="date" type="text"
317
														placeholder="jj/mm/aaaa" />
317
														placeholder="jj/mm/aaaa" />
318
												</div>
318
												</div>
319
											</div>
319
											</div>
320
										</div>
320
										</div>
321
										<!-- Type de culture -->
321
										<!-- Type de culture -->
322
										<div class="row-fluid">
322
										<div class="row-fluid">
323
											<div class="span3 control-group"> 
323
											<div class="span3 control-group"> 
324
												<label class="pointer">
324
												<label class="pointer">
325
													<span class="has-tooltip pointer"
325
													<span class="has-tooltip pointer"
326
														title="Vous pouvez sélectionner un type de culture parmi la liste ou en saisir un manuellement via l'option Autres"
326
														title="Vous pouvez sélectionner un type de culture parmi la liste ou en saisir un manuellement via l'option Autres"
327
													>
327
													>
328
														<strong class="obligatoire">*Type de culture</strong>
328
														<strong class="obligatoire">*Type de culture</strong>
329
													</span>
329
													</span>
330
												</label>
330
												</label>
331
											</div>
331
											</div>
332
											<div class="span9 control-group">
332
											<div class="span9 control-group">
333
												<!-- Céréale -->										
333
												<!-- Céréale -->										
334
												<label for="culture-cereale-radio" class="radio culture pointer">
334
												<label for="culture-cereale-radio" class="radio culture pointer">
335
													<input type="radio" id="culture-cereale-radio" name="type-culture" value="cereale" data-titre="céréale" />
335
													<input type="radio" id="culture-cereale-radio" name="type-culture" value="cereale" data-titre="céréale" />
336
													<i class="icon-question-sign cursor-pointer" data-toggle="popover" data-trigger="hover"></i>
336
													<i class="icon-question-sign cursor-pointer" data-toggle="popover" data-trigger="hover"></i>
337
													Céréale
337
													Céréale
338
													<input class="has-tooltip" type="text" id="culture-cereale-input" name="type-culture-details" 
338
													<input class="has-tooltip" type="text" id="culture-cereale-input" name="type-culture-details" 
339
														placeholder="Ex : Maïs" 
339
														placeholder="Ex : Maïs" 
340
														style="display: none;" 
340
														style="display: none;" 
341
														title="Si vous la connaissez, indiquez quelle plante est cultivée sur le champ" 
341
														title="Si vous la connaissez, indiquez quelle plante est cultivée sur le champ" 
342
													/>
342
													/>
343
												</label>
343
												</label>
344
												<div class="popover-html-content" data-for="culture-cereale-radio">
344
												<div class="popover-html-content" data-for="culture-cereale-radio">
345
													<h5>Céréale</h5>
345
													<h5>Céréale</h5>
346
													<p class="texte-infobulle">
346
													<p class="texte-infobulle">
347
														Plante cultivée principalement pour ses grains, c'est-à-dire ses fruits 
347
														Plante cultivée principalement pour ses grains, c'est-à-dire ses fruits 
348
														(caryopses), utilisés dans l'alimentation de l'Homme et des animaux 
348
														(caryopses), utilisés dans l'alimentation de l'Homme et des animaux 
349
														domestiques, souvent moulus sous forme de farine raffinée ou plus ou 
349
														domestiques, souvent moulus sous forme de farine raffinée ou plus ou 
350
														moins complète, mais aussi en grains entiers (ces plantes sont aussi 
350
														moins complète, mais aussi en grains entiers (ces plantes sont aussi 
351
														parfois consommées sous forme de fourrage). En botanique, les céréales 
351
														parfois consommées sous forme de fourrage). En botanique, les céréales 
352
														regroupent des plantes de la famille des <i>Poacées</i> (ou <i>Graminées</i>). 
352
														regroupent des plantes de la famille des <i>Poacées</i> (ou <i>Graminées</i>). 
353
														Certaines graines d'autres familles botaniques sont parfois communément 
353
														Certaines graines d'autres familles botaniques sont parfois communément 
354
														appelées céréales, telles que le sarrasin (<i>Polygonacées</i>), le quinoa et 
354
														appelées céréales, telles que le sarrasin (<i>Polygonacées</i>), le quinoa et 
355
														l'amarante (<i>Chénopodiacées</i>) ou le sésame (<i>Pédaliacées</i>). Toutefois, 
355
														l'amarante (<i>Chénopodiacées</i>) ou le sésame (<i>Pédaliacées</i>). Toutefois, 
356
														n'étant pas des <i>Poacées</i>, ces dernières ne sont pas des céréales au sens 
356
														n'étant pas des <i>Poacées</i>, ces dernières ne sont pas des céréales au sens 
357
														strict, et on leur donne souvent le nom de pseudo-céréales.
357
														strict, et on leur donne souvent le nom de pseudo-céréales.
358
													</p>
358
													</p>
359
													<img 
359
													<img 
360
														class="image-infobulle" 
360
														class="image-infobulle" 
361
														src="<?=$url_base?>modules/saisie/squelettes/messicoles/img/photos/cereale.png"
361
														src="<?=$url_base?>modules/saisie/squelettes/messicoles/img/photos/cereale.png"
362
													/>
362
													/>
363
												</div>
363
												</div>
364
												<!-- Friche -->										
364
												<!-- Friche -->										
365
												<label for="culture-friche-radio" class="radio culture pointer">
365
												<label for="culture-friche-radio" class="radio culture pointer">
366
													<input type="radio" id="culture-friche-radio" name="type-culture" value="friche" data-titre="friche" />
366
													<input type="radio" id="culture-friche-radio" name="type-culture" value="friche" data-titre="friche" />
367
													<i class="icon-question-sign cursor-pointer" data-toggle="popover" data-trigger="hover"></i>
367
													<i class="icon-question-sign cursor-pointer" data-toggle="popover" data-trigger="hover"></i>
368
													Friche
368
													Friche
369
													<input class="has-tooltip" type="text" id="culture-friche-input" name="type-culture-details" 
369
													<input class="has-tooltip" type="text" id="culture-friche-input" name="type-culture-details" 
370
														placeholder="Ex : Pissenlit" 
370
														placeholder="Ex : Pissenlit" 
371
														style="display: none;" 
371
														style="display: none;" 
372
														title="Si vous la connaissez, indiquez quelle plante est cultivée sur le champ" 
372
														title="Si vous la connaissez, indiquez quelle plante est cultivée sur le champ" 
373
													/>
373
													/>
374
												</label>
374
												</label>
375
												<div class="popover-html-content" data-for="culture-friche-radio">
375
												<div class="popover-html-content" data-for="culture-friche-radio">
376
													<h5>Friche</h5>
376
													<h5>Friche</h5>
377
													<p class="texte-infobulle">
377
													<p class="texte-infobulle">
378
														Zone, terrain ou une propriété qui n'est pas ou plus cultivée ni entretenue. 
378
														Zone, terrain ou une propriété qui n'est pas ou plus cultivée ni entretenue. 
379
														Des activités marginales peuvent cependant s’y étendre si ses parties restent 
379
														Des activités marginales peuvent cependant s’y étendre si ses parties restent 
380
														bien sûr accessibles : pâturage, cueillette, braconnage, chasse ou pêche et 
380
														bien sûr accessibles : pâturage, cueillette, braconnage, chasse ou pêche et 
381
														autres activités de loisirs.
381
														autres activités de loisirs.
382
													</p>
382
													</p>
383
													<img 
383
													<img 
384
														class="image-infobulle" 
384
														class="image-infobulle" 
385
														src="<?=$url_base?>modules/saisie/squelettes/messicoles/img/photos/friche.png"
385
														src="<?=$url_base?>modules/saisie/squelettes/messicoles/img/photos/friche.png"
386
													/>
386
													/>
387
												</div>
387
												</div>
388
												<!-- Maraichère -->										
388
												<!-- Maraichère -->										
389
												<label for="culture-maraichere-radio" class="radio culture pointer">
389
												<label for="culture-maraichere-radio" class="radio culture pointer">
390
													<input type="radio" id="culture-maraichere-radio" name="type-culture" value="maraichere" data-titre="maraichère" />
390
													<input type="radio" id="culture-maraichere-radio" name="type-culture" value="maraichere" data-titre="maraichère" />
391
													<i class="icon-question-sign cursor-pointer" data-toggle="popover" data-trigger="hover"></i>
391
													<i class="icon-question-sign cursor-pointer" data-toggle="popover" data-trigger="hover"></i>
392
													Maraichère
392
													Maraichère
393
													<input class="has-tooltip" type="text" id="culture-maraichere-input" name="type-culture-details" 
393
													<input class="has-tooltip" type="text" id="culture-maraichere-input" name="type-culture-details" 
394
														placeholder="Ex : Pois" 
394
														placeholder="Ex : Pois" 
395
														style="display: none;" 
395
														style="display: none;" 
396
														title="Si vous la connaissez, indiquez quelle plante est cultivée sur le champ" 
396
														title="Si vous la connaissez, indiquez quelle plante est cultivée sur le champ" 
397
													/>
397
													/>
398
												</label>
398
												</label>
399
												<div class="popover-html-content" data-for="culture-maraichere-radio">
399
												<div class="popover-html-content" data-for="culture-maraichere-radio">
400
													<h5>Maraichère</h5>
400
													<h5>Maraichère</h5>
401
													<p class="texte-infobulle">
401
													<p class="texte-infobulle">
402
														La culture maraîchère concerne les légumes, les petits fruits, les fines 
402
														La culture maraîchère concerne les légumes, les petits fruits, les fines 
403
														herbes et fleurs à usage alimentaire, de manière professionnelle.
403
														herbes et fleurs à usage alimentaire, de manière professionnelle.
404
													</p>
404
													</p>
405
													<!-- En attente d'une image ?
-
 
406
													<img 
405
													<img 
407
														class="image-infobulle" 
406
														class="image-infobulle" 
408
														src="<?=$url_base?>modules/saisie/squelettes/messicoles/img/photos/maraichere.jpg"
407
														src="<?=$url_base?>modules/saisie/squelettes/messicoles/img/photos/maraichere.jpg"
409
													/>
408
													/>
410
													-->
-
 
411
												</div>
409
												</div>
412
												<!-- Vigne -->										
410
												<!-- Vigne -->										
413
												<label for="culture-vigne-radio" class="radio culture pointer">
411
												<label for="culture-vigne-radio" class="radio culture pointer">
414
													<input type="radio" id="culture-vigne-radio" name="type-culture" value="vigne" data-titre="vigne" />
412
													<input type="radio" id="culture-vigne-radio" name="type-culture" value="vigne" data-titre="vigne" />
415
													<i class="icon-question-sign cursor-pointer" data-toggle="popover" data-trigger="hover"></i>
413
													<i class="icon-question-sign cursor-pointer" data-toggle="popover" data-trigger="hover"></i>
416
													Vigne
414
													Vigne
417
													<input class="has-tooltip" type="text" id="culture-vigne-input" name="type-culture-details" 
415
													<input class="has-tooltip" type="text" id="culture-vigne-input" name="type-culture-details" 
418
														placeholder="Ex : Sauterne" 
416
														placeholder="Ex : Sauterne" 
419
														style="display: none;" 
417
														style="display: none;" 
420
														title="Si vous la connaissez, indiquez quelle plante est cultivée sur le champ" 
418
														title="Si vous la connaissez, indiquez quelle plante est cultivée sur le champ" 
421
													/>
419
													/>
422
												</label>
420
												</label>
423
												<div class="popover-html-content" data-for="culture-vigne-radio">
421
												<div class="popover-html-content" data-for="culture-vigne-radio">
424
													<h5>Vigne</h5>
422
													<h5>Vigne</h5>
425
													<p class="texte-infobulle">
423
													<p class="texte-infobulle">
426
														Plantes grimpantes de la famille des <i>Vitaceae</i>, du genre <i>Vitis</i>. 
424
														Plantes grimpantes de la famille des <i>Vitaceae</i>, du genre <i>Vitis</i>. 
427
														Elles sont largement cultivées pour leur fruit en grappes, le raisin, 
425
														Elles sont largement cultivées pour leur fruit en grappes, le raisin, 
428
														dont on tire un jus, le moût, qui devient du vin après fermentation.
426
														dont on tire un jus, le moût, qui devient du vin après fermentation.
429
													</p>
427
													</p>
430
													<img 
428
													<img 
431
														class="image-infobulle" 
429
														class="image-infobulle" 
432
														src="<?=$url_base?>modules/saisie/squelettes/messicoles/img/photos/vigne.png"
430
														src="<?=$url_base?>modules/saisie/squelettes/messicoles/img/photos/vigne.png"
433
													/>
431
													/>
434
												</div>
432
												</div>
435
												<!-- Verger -->										
433
												<!-- Verger -->										
436
												<label for="culture-verger-radio" class="radio culture pointer">
434
												<label for="culture-verger-radio" class="radio culture pointer">
437
													<input type="radio" id="culture-verger-radio" name="type-culture" value="verger" data-titre="verger" />
435
													<input type="radio" id="culture-verger-radio" name="type-culture" value="verger" data-titre="verger" />
438
													<i class="icon-question-sign cursor-pointer" data-toggle="popover" data-trigger="hover"></i>
436
													<i class="icon-question-sign cursor-pointer" data-toggle="popover" data-trigger="hover"></i>
439
													Verger
437
													Verger
440
													<input class="has-tooltip" type="text" id="culture-verger-input" name="type-culture-details" 
438
													<input class="has-tooltip" type="text" id="culture-verger-input" name="type-culture-details" 
441
														placeholder="Ex : Pommier" 
439
														placeholder="Ex : Pommier" 
442
														style="display: none;" 
440
														style="display: none;" 
443
														title="Si vous la connaissez, indiquez quelle plante est cultivée sur le champ" 
441
														title="Si vous la connaissez, indiquez quelle plante est cultivée sur le champ" 
444
													/>
442
													/>
445
												</label>
443
												</label>
446
												<div class="popover-html-content" data-for="culture-verger-radio">
444
												<div class="popover-html-content" data-for="culture-verger-radio">
447
													<h5>Verger</h5>
445
													<h5>Verger</h5>
448
													<p class="texte-infobulle">
446
													<p class="texte-infobulle">
449
														Espace de terrain dévolu à la culture d'arbres fruitiers, appelée 
447
														Espace de terrain dévolu à la culture d'arbres fruitiers, appelée 
450
														arboriculture fruitière. Il en existe différents types : les vergers 
448
														arboriculture fruitière. Il en existe différents types : les vergers 
451
														conservatoires, les prés-vergers, les vergers commerciaux et de jardin 
449
														conservatoires, les prés-vergers, les vergers commerciaux et de jardin 
452
														potager.
450
														potager.
453
													</p>
451
													</p>
454
													<img 
452
													<img 
455
														class="image-infobulle" 
453
														class="image-infobulle" 
456
														src="<?=$url_base?>modules/saisie/squelettes/messicoles/img/photos/verger.png"
454
														src="<?=$url_base?>modules/saisie/squelettes/messicoles/img/photos/verger.png"
457
													/>
455
													/>
458
												</div>
456
												</div>
459
												<!-- Plantes à parfum, aromatiques et médicinales -->										
457
												<!-- Plantes à parfum, aromatiques et médicinales -->										
460
												<label for="culture-aromatique-radio" class="radio culture pointer">
458
												<label for="culture-aromatique-radio" class="radio culture pointer">
461
													<input type="radio" id="culture-aromatique-radio" name="type-culture" value="aromatique" data-titre="plantes à parfum, aromatiques et médicinales" />
459
													<input type="radio" id="culture-aromatique-radio" name="type-culture" value="aromatique" data-titre="plantes à parfum, aromatiques et médicinales" />
462
													<i class="icon-question-sign cursor-pointer" data-toggle="popover" data-trigger="hover"></i>
460
													<i class="icon-question-sign cursor-pointer" data-toggle="popover" data-trigger="hover"></i>
463
													Plantes à parfum, aromatiques et médicinales
461
													Plantes à parfum, aromatiques et médicinales
464
													<input class="has-tooltip" type="text" id="culture-aromatique-input" name="type-culture-details" 
462
													<input class="has-tooltip" type="text" id="culture-aromatique-input" name="type-culture-details" 
465
														placeholder="Ex : Lavande" 
463
														placeholder="Ex : Lavande" 
466
														style="display: none;" 
464
														style="display: none;" 
467
														title="Si vous la connaissez, indiquez quelle plante est cultivée sur le champ" 
465
														title="Si vous la connaissez, indiquez quelle plante est cultivée sur le champ" 
468
													/>
466
													/>
469
												</label>
467
												</label>
470
												<div class="popover-html-content" data-for="culture-aromatique-radio">
468
												<div class="popover-html-content" data-for="culture-aromatique-radio">
471
													<h5>Plantes à parfum, aromatiques et médicinales</h5>
469
													<h5>Plantes à parfum, aromatiques et médicinales</h5>
472
													<p class="texte-infobulle">
470
													<p class="texte-infobulle">
473
														Plantes grimpantes de la famille des <i>Vitaceae</i>, du genre <i>Vitis</i>. 
471
														Plantes grimpantes de la famille des <i>Vitaceae</i>, du genre <i>Vitis</i>. 
474
														Elles sont largement cultivées pour leur fruit en grappes, le raisin, 
472
														Elles sont largement cultivées pour leur fruit en grappes, le raisin, 
475
														dont on tire un jus, le moût, qui devient du vin après fermentation.
473
														dont on tire un jus, le moût, qui devient du vin après fermentation.
476
													</p>
474
													</p>
477
													<img 
475
													<img 
478
														class="image-infobulle" 
476
														class="image-infobulle" 
479
														src="<?=$url_base?>modules/saisie/squelettes/messicoles/img/photos/aromatique.jpg"
477
														src="<?=$url_base?>modules/saisie/squelettes/messicoles/img/photos/aromatique.jpg"
480
													/>
478
													/>
481
												</div>
479
												</div>
482
												<!-- Autres -->										
480
												<!-- Autres -->										
483
												<label for="culture-autres-radio" class="radio culture pointer">
481
												<label for="culture-autres-radio" class="radio culture pointer">
484
													<input type="radio" id="culture-autres-radio" name="type-culture" value="autres" data-titre="autres" />
482
													<input type="radio" id="culture-autres-radio" name="type-culture" value="autres" data-titre="autres" />
485
													Autres
483
													Autres
486
													<input type="text" id="culture-autres-input" name="type-culture-details" 
484
													<input type="text" id="culture-autres-input" name="type-culture-details" 
487
														style="display: none;" 
485
														style="display: none;" 
488
													/>
486
													/>
489
												</label>
487
												</label>
490
											</div>
488
											</div>
491
										</div>
489
										</div>
492
									</form>
490
									</form>
493
									<!-- Géolocalisation -->
491
									<!-- Géolocalisation -->
494
									<div class="row-fluid">
492
									<div class="row-fluid">
495
										<div class="span4">
493
										<div class="span4">
496
											<strong>Géolocalisation</strong>
494
											<strong>Géolocalisation</strong>
497
										</div>
495
										</div>
498
										<div class="span8 droite">
496
										<div class="span8 droite">
499
											<form id="form-carte-recherche" class="form-search form-horizontal" action="#" >
497
											<form id="form-carte-recherche" class="form-search form-horizontal" action="#" >
500
												<div class="control-group">
498
												<div class="control-group">
501
													<label for="carte-recherche" class="pointer">Rechercher</label>
499
													<label for="carte-recherche" class="pointer">Rechercher</label>
502
													<input id="carte-recherche" class="search-query has-tooltip" type="text" value=""
500
													<input id="carte-recherche" class="search-query has-tooltip" type="text" value=""
503
														title="Permet de centrer la carte sur le lieu recherché."
501
														title="Permet de centrer la carte sur le lieu recherché."
504
														placeholder="Ex : France, Paris, Rue de Rivoli..."/>
502
														placeholder="Ex : France, Paris, Rue de Rivoli..."/>
505
												</div>
503
												</div>
506
											</form>
504
											</form>
507
										</div>
505
										</div>
508
									</div>
506
									</div>
509
									<div class="row-fluid">
507
									<div class="row-fluid">
510
										<div class="span12">
508
										<div class="span12">
511
											<div id="map-canvas" class="has-tooltip"
509
											<div id="map-canvas" class="has-tooltip"
512
												title="Vous pouvez cliquer sur la carte pour déplacer le marqueur
510
												title="Vous pouvez cliquer sur la carte pour déplacer le marqueur
513
													représentant votre station ou bien le glisser-déposer sur
511
													représentant votre station ou bien le glisser-déposer sur
514
													le lieu souhaité."></div>
512
													le lieu souhaité."></div>
515
										</div>
513
										</div>
516
									</div>
514
									</div>
517
									<!-- Coordonnées -->
515
									<!-- Coordonnées -->
518
									<div class="row-fluid">
516
									<div class="row-fluid">
519
										<label for="coordonnees-geo" class="span7">
517
										<label for="coordonnees-geo" class="span7">
520
											<a href="#" class="afficher-coord">Afficher</a>
518
											<a href="#" class="afficher-coord">Afficher</a>
521
											<a href="#" class="afficher-coord" style="display:none;">Cacher</a>
519
											<a href="#" class="afficher-coord" style="display:none;">Cacher</a>
522
											les coordonnées géographiques
520
											les coordonnées géographiques
523
											<span id="lat-lon-info" class="info has-tooltip"
521
											<span id="lat-lon-info" class="info has-tooltip"
524
												title="Système géodésique mondial, révision de 1984 - Coordonnées non projetées">
522
												title="Système géodésique mondial, révision de 1984 - Coordonnées non projetées">
525
												(WGS84)
523
												(WGS84)
526
											</span>
524
											</span>
527
										</label>
525
										</label>
528
										<div id="info-commune" class="span5">
526
										<div id="info-commune" class="span5">
529
											<span for="marqueur-commune">Commune : </span>
527
											<span for="marqueur-commune">Commune : </span>
530
											<span id="marqueur-commune">
528
											<span id="marqueur-commune">
531
												<span id="commune-nom" class="commune-info"></span>
529
												<span id="commune-nom" class="commune-info"></span>
532
												(<span id="commune-code-insee" class="commune-info has-tooltip"
530
												(<span id="commune-code-insee" class="commune-info has-tooltip"
533
													title="Code INSEE de la commune"></span>)
531
													title="Code INSEE de la commune"></span>)
534
											</span>
532
											</span>
535
										</div>
533
										</div>
536
									</div>
534
									</div>
537
									<!-- Formulaire Station -->
535
									<!-- Formulaire Station -->
538
									<form id="form-station" class="control-group" action="#" enctype="multipart/form-data" autocomplete="on">
536
									<form id="form-station" class="control-group" action="#" enctype="multipart/form-data" autocomplete="on">
539
										<div id="coordonnees-geo" class="well" style="display:none;">
537
										<div id="coordonnees-geo" class="well" style="display:none;">
540
											<div class="row-fluid form-inline">
538
											<div class="row-fluid form-inline">
541
												<div id="coord-lat" class="span4">
539
												<div id="coord-lat" class="span4">
542
													<label for="latitude" class="pointer">Latitude</label>
540
													<label for="latitude" class="pointer">Latitude</label>
543
													<input id="latitude" class="input-mini" name="latitude" type="text" value=""/>
541
													<input id="latitude" class="input-mini" name="latitude" type="text" value=""/>
544
												</div>
542
												</div>
545
												<div id="coord-lng" class="span4">
543
												<div id="coord-lng" class="span4">
546
													<label for="longitude" class="pointer">Longitude</label>
544
													<label for="longitude" class="pointer">Longitude</label>
547
													<input id="longitude" class="input-mini" name="longitude" type="text" value=""/>
545
													<input id="longitude" class="input-mini" name="longitude" type="text" value=""/>
548
												</div>
546
												</div>
549
												<div class="span4 droite">
547
												<div class="span4 droite">
550
													<input class="btn btn-primary" id="geolocaliser" type="button" value="Voir sur la carte"
548
													<input class="btn btn-primary" id="geolocaliser" type="button" value="Voir sur la carte"
551
														class="has-tooltip"
549
														class="has-tooltip"
552
														title="Centre la carte sur les coordonnées de latitude et longitude saisies."/>
550
														title="Centre la carte sur les coordonnées de latitude et longitude saisies."/>
553
												</div>
551
												</div>
554
											</div>
552
											</div>
555
										</div>
553
										</div>
556
										<div class="row-fluid">
554
										<div class="row-fluid">
557
											<div class="span4 has-tooltip centre"
555
											<div class="span4 has-tooltip centre"
558
												title="Toponyme plus précis que la commune, utilisé localement et se trouvant souvent sur les cartes au 1/25 000." >
556
												title="Toponyme plus précis que la commune, utilisé localement et se trouvant souvent sur les cartes au 1/25 000." >
559
												<label for="lieudit" class="pointer">Lieu-dit</label>
557
												<label for="lieudit" class="pointer">Lieu-dit</label>
560
												<div>
558
												<div>
561
													<input type="text" id="lieudit" class="span2" name="lieudit"/>
559
													<input type="text" id="lieudit" class="span2" name="lieudit"/>
562
												</div>
560
												</div>
563
											</div>
561
											</div>
564
											<div class="span4 has-tooltip centre"
562
											<div class="span4 has-tooltip centre"
565
												title="Lieu précis de l'observation définissant une unité écologique homogène (ex: le pré derrière la maison)." >
563
												title="Lieu précis de l'observation définissant une unité écologique homogène (ex: le pré derrière la maison)." >
566
												<label for="station" class="pointer">Station</label>
564
												<label for="station" class="pointer">Station</label>
567
												<div>
565
												<div>
568
													<input type="text" id="station" class="span2" name="station"/>
566
													<input type="text" id="station" class="span2" name="station"/>
569
												</div>
567
												</div>
570
											</div>
568
											</div>
571
											<div class="span4 has-tooltip centre"
569
											<div class="span4 has-tooltip centre"
572
												title="Type d'habitat plus ou moins standardisé dans les codes Corine ou Catminat (ex: prairie humide).">
570
												title="Type d'habitat plus ou moins standardisé dans les codes Corine ou Catminat (ex: prairie humide).">
573
												<label for="milieu" class="pointer">Milieu</label>
571
												<label for="milieu" class="pointer">Milieu</label>
574
												<div>
572
												<div>
575
													<input type="text" id="milieu" class="span2" name="milieu" />
573
													<input type="text" id="milieu" class="span2" name="milieu" />
576
												</div>
574
												</div>
577
											</div>
575
											</div>
578
										</div>
576
										</div>
579
									</form>
577
									</form>
580
								</div>
578
								</div>
581
							</div>
579
							</div>
582
						</div>
580
						</div>
583
						<!-- 2e colonne : observation -->
581
						<!-- 2e colonne : observation -->
584
						<div class="span6">
582
						<div class="span6">
585
							<div class="well">
583
							<div class="well">
586
								<div class="row-fluid">
584
								<div class="row-fluid">
587
									<div class="span12">
585
									<div class="span12">
588
										<form id="form-obs" action="#" autocomplete="on">
586
										<form id="form-obs" action="#" autocomplete="on">
589
											<h2>Observation</h2>
587
											<h2>Observation</h2>
590
											<hr>
588
											<hr>
591
											<div class="row-fluid">
589
											<div class="row-fluid">
592
												<div id="taxon-liste-input-groupe" class="control-group">
590
												<div id="taxon-liste-input-groupe" class="control-group">
593
													<label for="taxon-liste">
591
													<label for="taxon-liste">
594
														<span class="has-tooltip pointer"
592
														<span class="has-tooltip pointer"
595
														title="Sélectionnez une espèce dans la liste déroulante par son nom latin
593
														title="Sélectionnez une espèce dans la liste déroulante par son nom latin
596
														ou commun. Si une espèce est absente, sélectionner «Autre espèce»." 
594
														ou commun. Si une espèce est absente, sélectionner «Autre espèce»." 
597
														>
595
														>
598
															<strong class="obligatoire">*Espèces</strong>
596
															<strong class="obligatoire">*Espèces</strong>
599
														</span>
597
														</span>
600
													</label>
598
													</label>
601
													<span class="input-prepend">
599
													<span class="input-prepend">
602
														<span id="espece-icone" class="add-on">
600
														<span id="espece-icone" class="add-on">
603
															<i class="icon-leaf"></i>
601
															<i class="icon-leaf"></i>
604
														</span>
602
														</span>
605
													</span>
603
													</span>
606
													<select id="taxon-liste" name="taxon-liste" class="form-control">
604
													<select id="taxon-liste" name="taxon-liste" class="form-control">
607
														<option value="" selected>Sélectionner une espèce</option>
605
														<option value="" selected>Sélectionner une espèce</option>
608
														<optgroup id="taxon-liste-noms">
606
														<optgroup id="taxon-liste-noms">
609
															<?php foreach ($taxons['sci-et-fr'] as $taxon) :?>
607
															<?php foreach ($taxons['sci-et-fr'] as $taxon) :?>
610
																<option
608
																<option
611
																	class="<?=$taxon['nom_type'] ?>"
609
																	class="<?=$taxon['nom_type'] ?>"
612
																	value="<?=$taxon['num_nom'] ?>"
610
																	value="<?=$taxon['num_nom'] ?>"
613
																	title="<?=$taxon['nom_title'] ?>"
611
																	title="<?=$taxon['nom_title'] ?>"
614
																	data-nom-a-sauver="<?=$taxon['nom_a_sauver'] ?>"
612
																	data-nom-a-sauver="<?=$taxon['nom_a_sauver'] ?>"
615
																	>
613
																	>
616
																	<?=$taxon['nom_a_afficher']?>
614
																	<?=$taxon['nom_a_afficher']?>
617
																</option>
615
																</option>
618
															<?php endforeach; ?>
616
															<?php endforeach; ?>
619
														</optgroup>
617
														</optgroup>
620
														<optgroup id="taxon-liste-special">
618
														<optgroup id="taxon-liste-special">
621
															<?php foreach ($taxons['speciaux'] as $taxon) :?>
619
															<?php foreach ($taxons['speciaux'] as $taxon) :?>
622
																<option
620
																<option
623
																	class="<?=$taxon['nom_type'] ?>"
621
																	class="<?=$taxon['nom_type'] ?>"
624
																	value="<?=$taxon['num_nom'] ?>"
622
																	value="<?=$taxon['num_nom'] ?>"
625
																	title="<?=$taxon['nom_title'] ?>"
623
																	title="<?=$taxon['nom_title'] ?>"
626
																	data-nom-a-sauver="<?=$taxon['nom_a_sauver'] ?>"
624
																	data-nom-a-sauver="<?=$taxon['nom_a_sauver'] ?>"
627
																	>
625
																	>
628
																	<?=$taxon['nom_a_afficher']?>
626
																	<?=$taxon['nom_a_afficher']?>
629
																</option>
627
																</option>
630
															<?php endforeach; ?>
628
															<?php endforeach; ?>
631
														</optgroup>
629
														</optgroup>
632
														<option id="taxon-option-autre" value="?">Autre espèce</option>
630
														<option id="taxon-option-autre" value="?">Autre espèce</option>
633
													</select>
631
													</select>
634
												</div>
632
												</div>
635
											</div>
633
											</div>
636
											<div class="row-fluid">
634
											<div class="row-fluid">
637
												<div class="span12">
635
												<div class="span12">
638
													<div id="taxon-input-groupe" class="" hidden>
636
													<div id="taxon-input-groupe" class="" hidden>
639
														<label for="taxon" title="Choisissez une espèce">
637
														<label for="taxon" title="Choisissez une espèce">
640
															<span class="has-tooltip pointer" title="Sélectionnez une espèce dans la liste déroulante pour lier
638
															<span class="has-tooltip pointer" title="Sélectionnez une espèce dans la liste déroulante pour lier
641
															votre nom au référentiel selectionné. Si vous
639
															votre nom au référentiel selectionné. Si vous
642
															le désirez vous pouvez aussi saisir un nom absent du référentiel
640
															le désirez vous pouvez aussi saisir un nom absent du référentiel
643
															(Ex. : 'fleur violette' ou 'viola sinensis???').">
641
															(Ex. : 'fleur violette' ou 'viola sinensis???').">
644
																<strong>Espèce <?= $referentiel_impose ? '('.$ns_referentiel.')' : '' ?> <em>(ou indication sur la plante)</em></strong>
642
																<strong>Espèce <?= $referentiel_impose ? '('.$ns_referentiel.')' : '' ?> <em>(ou indication sur la plante)</em></strong>
645
															</span>
643
															</span>
646
														</label>
644
														</label>
647
														<div class="row-fluid">
645
														<div class="row-fluid">
648
															<div class="span12">
646
															<div class="span12">
649
																<span class="input-prepend">
647
																<span class="input-prepend">
650
																	<span class="add-on">
648
																	<span class="add-on">
651
																		<i class="icon-leaf"></i>
649
																		<i class="icon-leaf"></i>
652
																	</span>
650
																	</span>
653
																	<input type="text" id="taxon" name="taxon" value="<?= $nom_sci_espece_defaut; ?>" data="numNomSel" />
651
																	<input type="text" id="taxon" name="taxon" value="<?= $nom_sci_espece_defaut; ?>" data="numNomSel" />
654
																</span>
652
																</span>
655
															</div>
653
															</div>
656
														</div>
654
														</div>
657
													</div>
655
													</div>
658
												</div>
656
												</div>
659
												<p class="alert alert-warning" id="avertissement-non-messicole" style="display: none;">
657
												<p class="alert alert-warning" id="avertissement-non-messicole" style="display: none;">
660
													<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.
658
													<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.
661
												</p>
659
												</p>
662
											</div>
660
											</div>
663
											<!-- Certitude -->
661
											<!-- Certitude -->
664
											<div class="row-fluid">
662
											<div class="row-fluid">
665
												<div class="span12 control-group">
663
												<div class="span12 control-group">
666
													<label for="identification-liste">
664
													<label for="identification-liste">
667
														<span class="has-tooltip pointer" 
665
														<span class="has-tooltip pointer" 
668
														title="Indiquez votre certitude vis-à-vis du nom d'espèce indiqué">
666
														title="Indiquez votre certitude vis-à-vis du nom d'espèce indiqué">
669
															<strong>Certitude</strong>
667
															<strong>Certitude</strong>
670
														</span>
668
														</span>
671
													</label>
669
													</label>
672
													<span class="input-prepend">
670
													<span class="input-prepend">
673
														<span id="identification-icone" class="add-on">
671
														<span id="identification-icone" class="add-on">
674
															<i class="icon-eye-open"></i>
672
															<i class="icon-eye-open"></i>
675
														</span>
673
														</span>
676
													</span>
674
													</span>
677
													<select name="identification-liste" id="identification-liste">
675
													<select name="identification-liste" id="identification-liste">
678
														<option value="" selected>Indiquez votre certitude</option>
676
														<option value="" selected>Indiquez votre certitude</option>
679
														<option value="certaine" data-titre="certaine">Certaine</option>
677
														<option value="certaine" data-titre="certaine">Certaine</option>
680
														<option value="douteuse" data-titre="douteuse">Douteuse</option>
678
														<option value="douteuse" data-titre="douteuse">Douteuse</option>
681
														<option value="adeterminer" data-titre="à déterminer">A déterminer</option>
679
														<option value="adeterminer" data-titre="à déterminer">A déterminer</option>
682
													</select>
680
													</select>
683
												</div>
681
												</div>
684
											</div>
682
											</div>
685
											<!-- Abondance -->
683
											<!-- Abondance -->
686
											<div class="row-fluid">
684
											<div class="row-fluid">
687
												<div class="control-group">
685
												<div class="control-group">
688
													<label for="abondance-liste">
686
													<label for="abondance-liste">
689
														<span class="has-tooltip pointer" 
687
														<span class="has-tooltip pointer" 
690
														title="Indiquez le nombre d'individus observés, toutes zones du champ confondues">
688
														title="Indiquez le nombre d'individus observés, toutes zones du champ confondues">
691
															<strong class="obligatoire">*Abondance</strong>
689
															<strong class="obligatoire">*Abondance</strong>
692
														</span>
690
														</span>
693
													</label>
691
													</label>
694
													<span class="input-prepend">
692
													<span class="input-prepend">
695
														<span id="abondance-icone" class="add-on">
693
														<span id="abondance-icone" class="add-on">
696
															<i class="icon-signal"></i>
694
															<i class="icon-signal"></i>
697
														</span>
695
														</span>
698
													</span>
696
													</span>
699
													<select name="abondance-liste" id="abondance-liste">
697
													<select name="abondance-liste" id="abondance-liste">
700
														<option value="" class="a-masquer" selected>Sélectionner une abondance</option>
698
														<option value="" class="a-masquer" selected>Sélectionner une abondance</option>
701
														<option value="1" data-titre="1 à 10 individus">1 à 10 individus</option>
699
														<option value="1" data-titre="1 à 10 individus">1 à 10 individus</option>
702
														<option value="10" data-titre="10 à 100 individus">10 à 100 individus</option>
700
														<option value="10" data-titre="10 à 100 individus">10 à 100 individus</option>
703
														<option value="100" data-titre="100 à 1000 individus">100 à 1000 individus</option>
701
														<option value="100" data-titre="100 à 1000 individus">100 à 1000 individus</option>
704
													</select>
702
													</select>
705
												</div>
703
												</div>
706
											</div>
704
											</div>
707
											<!-- Zone du champ -->
705
											<!-- Zone du champ -->
708
											<div class="row-fluid">
706
											<div class="row-fluid">
709
												<div class="span3 control-group">
707
												<div class="span3 control-group">
710
													<label>
708
													<label>
711
														<span class="has-tooltip pointer" 
709
														<span class="has-tooltip pointer" 
712
														title="Sélectionnez une ou plusieurs zones dans lesquelles l'espèce indiquée est présente">
710
														title="Sélectionnez une ou plusieurs zones dans lesquelles l'espèce indiquée est présente">
713
															<strong class="obligatoire">*Zone du champ</strong>
711
															<strong class="obligatoire">*Zone du champ</strong>
714
														</span>
712
														</span>
715
													</label>
713
													</label>
716
												</div>
714
												</div>
717
												<div class="span9 control-group">
715
												<div class="span9 control-group">
718
													<!-- Bord -->										
716
													<!-- Bord -->										
719
													<label for="bordure" class="checkbox pointer">
717
													<label for="bordure" class="checkbox pointer">
720
														<input type="checkbox" id="bordure" name="zone-champ[]" value="bord" data-titre="bord" />
718
														<input type="checkbox" id="bordure" name="zone-champ[]" value="bord" data-titre="bord" />
721
														<i class="icon-question-sign cursor-pointer" data-toggle="popover" data-trigger="hover"></i>
719
														<i class="icon-question-sign cursor-pointer" data-toggle="popover" data-trigger="hover"></i>
722
														Bord du champ
720
														Bord du champ
723
													</label>
721
													</label>
724
													<div class="popover-html-content" data-for="bordure">
722
													<div class="popover-html-content" data-for="bordure">
725
														<h5>Bord du champ</h5>
723
														<h5>Bord du champ</h5>
-
 
724
														<img 
-
 
725
															class="image-verticale-infobulle" 
-
 
726
															src="<?=$url_base?>modules/saisie/squelettes/messicoles/img/photos/bord2.png"
-
 
727
														/>
726
														<p class="texte-infobulle">
728
														<p class="texte-infobulle">
727
															Le bord du champ à inventorier prend en compte la zone terreuse entre le bord enherbé 
729
															Le bord du champ à inventorier prend en compte la zone terreuse entre le bord enherbé 
728
															de la route et un mètre dans la zone cultivée (dès les premières plantes cultivées du 
730
															de la route et un mètre dans la zone cultivée (dès les premières plantes cultivées du 
729
															bord vers le cœur du champ. Le bord du champs ne prend pas en compte la zone enherbée 
731
															bord vers le cœur du champ. Le bord du champs ne prend pas en compte la zone enherbée 
730
															qui peut se trouver en bord de route.
732
															qui peut se trouver en bord de route.
731
														</p>
733
														</p>
-
 
734
														
732
														<img 
735
														<img 
733
															class="image-infobulle" 
736
															class="image-infobulle" id="bord1"
734
															src="<?=$url_base?>modules/saisie/squelettes/messicoles/img/photos/bord1.png"
737
															src="<?=$url_base?>modules/saisie/squelettes/messicoles/img/photos/bord1.png"
735
														/>
738
														/>
736
														<!--
-
 
737
														<img 
-
 
738
															class="image-infobulle" 
-
 
739
															src="<?=$url_base?>modules/saisie/squelettes/messicoles/img/photos/bord2.png"
-
 
740
														/>
-
 
741
														-->
-
 
-
 
739
														
742
													</div>
740
													</div>
743
													<!-- Cœur du champ -->										
741
													<!-- Cœur du champ -->										
744
													<label for="coeur-champ" class="checkbox pointer">
742
													<label for="coeur-champ" class="checkbox pointer">
745
														<input type="checkbox" id="coeur-champ" name="zone-champ[]" value="coeur" data-titre="cœur" />
743
														<input type="checkbox" id="coeur-champ" name="zone-champ[]" value="coeur" data-titre="cœur" />
746
														<i class="icon-question-sign cursor-pointer" data-toggle="popover" data-trigger="hover"></i>
744
														<i class="icon-question-sign cursor-pointer" data-toggle="popover" data-trigger="hover"></i>
747
														Cœur du champ
745
														Cœur du champ
748
													</label>
746
													</label>
749
													<div class="popover-html-content" data-for="coeur-champ">
747
													<div class="popover-html-content" data-for="coeur-champ">
750
														<h5>Cœur du champ</h5>
748
														<h5>Cœur du champ</h5>
751
														<p class="texte-infobulle">
749
														<p class="texte-infobulle">
752
															Le cœur du champ concerne la zone cultivée. Il exclut 1m de bord de champ cultivé, et les 
750
															Le cœur du champ concerne la zone cultivée. Il exclut 1m de bord de champ cultivé, et les 
753
															zones délaissées/oubliées par l'agriculteur lors du semi.
751
															zones délaissées/oubliées par l'agriculteur lors du semi.
754
														</p>
752
														</p>
755
														<img 
753
														<img 
756
															class="image-infobulle" 
754
															class="image-infobulle" 
757
															src="<?=$url_base?>modules/saisie/squelettes/messicoles/img/photos/coeur.png"
755
															src="<?=$url_base?>modules/saisie/squelettes/messicoles/img/photos/coeur.png"
758
														/>
756
														/>
759
													</div>
757
													</div>
760
													<!-- Zone délaissée -->										
758
													<!-- Zone délaissée -->										
761
													<label for="zone-delaissee" class="checkbox pointer">
759
													<label for="zone-delaissee" class="checkbox pointer">
762
														<input type="checkbox" id="zone-delaissee" name="zone-champ[]" value="zone-delaissee" data-titre="zone délaissée" />
760
														<input type="checkbox" id="zone-delaissee" name="zone-champ[]" value="zone-delaissee" data-titre="zone délaissée" />
763
														<i class="icon-question-sign cursor-pointer" data-toggle="popover" data-trigger="hover"></i>
761
														<i class="icon-question-sign cursor-pointer" data-toggle="popover" data-trigger="hover"></i>
764
														Zone délaissée
762
														Zone délaissée
765
													</label>
763
													</label>
766
													<div class="popover-html-content" data-for="zone-delaissee">
764
													<div class="popover-html-content" data-for="zone-delaissee">
767
														<h5>Zone délaissée</h5>
765
														<h5>Zone délaissée</h5>
768
														<p>
766
														<p class="texte-infobulle">
769
															Les zones délaissées sont les zones où l'agriculteur n'a pas réalisé de semi, ce qui semblerait 
767
															Les zones délaissées sont les zones où l'agriculteur n'a pas réalisé de semi, ce qui semblerait 
770
															être un oubli de sa part. Cette zone ne prend pas en compte le bord du champ.
768
															être un oubli de sa part. Cette zone ne prend pas en compte le bord du champ.
771
														</p>
769
														</p>
772
														<img 
770
														<img 
773
															class="image-infobulle" 
771
															class="image-infobulle" 
774
															src="<?=$url_base?>modules/saisie/squelettes/messicoles/img/photos/delaissee.png"
772
															src="<?=$url_base?>modules/saisie/squelettes/messicoles/img/photos/delaissee.png"
775
														/>
773
														/>
776
													</div>
774
													</div>
777
												</div>
775
												</div>
778
											</div>
776
											</div>
779
											<div class="row-fluid">
777
											<div class="row-fluid">
780
												<div class="span6">
778
												<div class="span6">
781
													<label for="notes" class="pointer">
779
													<label for="notes" class="pointer">
782
														<strong>Notes</strong>
780
														<strong>Notes</strong>
783
													</label>
781
													</label>
784
													<div>
782
													<div>
785
														<textarea id="notes" class="span5" rows="6" name="notes"
783
														<textarea id="notes" class="span5" rows="6" name="notes"
786
															placeholder="Vous pouvez éventuellement ajouter des informations complémentaires à votre observation (altitude, taille de la plante...)"></textarea>
784
															placeholder="Vous pouvez éventuellement ajouter des informations complémentaires à votre observation (altitude, taille de la plante...)"></textarea>
787
													</div>
785
													</div>
788
												</div>
786
												</div>
789
											</div>
787
											</div>
790
										</form>
788
										</form>
791
										<form id="form-upload" class="form-horizontal" action="<?= $url_ws_upload ?>"
789
										<form id="form-upload" class="form-horizontal" action="<?= $url_ws_upload ?>"
792
											method="post" enctype="multipart/form-data">
790
											method="post" enctype="multipart/form-data">
793
											<h3>Image(s) de cette plante</h3>
791
											<h3>Image(s) de cette plante</h3>
794
											<strong>Ajouter une image</strong>
792
											<strong>Ajouter une image</strong>
795
											<p class="miniature-info" class="discretion help-inline">Les photos doivent être au format JPEG et ne doivent pas excéder 5Mo chacune.</p>
793
											<p class="miniature-info" class="discretion help-inline">Les photos doivent être au format JPEG et ne doivent pas excéder 5Mo chacune.</p>
796
											<div id="image-obligatoire" class="alert alert-error alert-block" style="display: none;">
794
											<div id="image-obligatoire" class="alert alert-error alert-block" style="display: none;">
797
												<a class="close">×</a>
795
												<a class="close">×</a>
798
												<h4 class="alert-heading">Information : image obligatoire</h4>
796
												<h4 class="alert-heading">Information : image obligatoire</h4>
799
												<p>
797
												<p>
800
													Votre identification n'est pas certaine.
798
													Votre identification n'est pas certaine.
801
													<br>
799
													<br>
802
													Veuillez ajouter au moins une image.
800
													Veuillez ajouter au moins une image.
803
												</p>
801
												</p>
804
											</div>
802
											</div>
805
											<div id ="photos-conteneur">
803
											<div id ="photos-conteneur">
806
												<input class="pointer" type="file" id="fichier" name="fichier" accept="image/jpeg" />
804
												<input class="pointer" type="file" id="fichier" name="fichier" accept="image/jpeg" />
807
												<input type="hidden" name="MAX_FILE_SIZE" value="5242880"/>
805
												<input type="hidden" name="MAX_FILE_SIZE" value="5242880"/>
808
												<div id="miniatures">
806
												<div id="miniatures">
809
												</div>
807
												</div>
810
												<p class="miniature-msg" class="span12">&nbsp;</p>
808
												<p class="miniature-msg" class="span12">&nbsp;</p>
811
											</div>
809
											</div>
812
										</form>
810
										</form>
813
									</div>
811
									</div>
814
									<div class="row-fluid">
812
									<div class="row-fluid">
815
										<div class="span12 centre has-tooltip"
813
										<div class="span12 centre has-tooltip"
816
											title="Une fois les champs remplis, vous pouvez cliquer sur ce bouton pour
814
											title="Une fois les champs remplis, vous pouvez cliquer sur ce bouton pour
817
												ajouter votre observation à la liste à transmettre.">
815
												ajouter votre observation à la liste à transmettre.">
818
											<button id="ajouter-obs" class="btn btn-primary btn-large" type="button">
816
											<button id="ajouter-obs" class="btn btn-primary btn-large" type="button">
819
												Créer
817
												Créer
820
											</button>
818
											</button>
821
										</div>
819
										</div>
822
									</div>
820
									</div>
823
									<!-- Messages d'erreur du formulaire-->
821
									<!-- Messages d'erreur du formulaire-->
824
									<div class="row-fluid">
822
									<div class="row-fluid">
825
										<div class="zone-alerte">
823
										<div class="zone-alerte">
826
											<div id="dialogue-bloquer-creer-obs" class="alert alert-warning alert-block" style="display: none;">
824
											<div id="dialogue-bloquer-creer-obs" class="alert alert-warning alert-block" style="display: none;">
827
												<a class="close">×</a>
825
												<a class="close">×</a>
828
												<h4 class="alert-heading">Information : 10 observations maximum</h4>
826
												<h4 class="alert-heading">Information : 10 observations maximum</h4>
829
												<p>
827
												<p>
830
													Vous venez d'ajouter votre 10ème observation.<br/>
828
													Vous venez d'ajouter votre 10ème observation.<br/>
831
													Pour en ajouter de nouvelles, il est nécessaire de les transmettre en cliquant sur le bouton ci-dessous.
829
													Pour en ajouter de nouvelles, il est nécessaire de les transmettre en cliquant sur le bouton ci-dessous.
832
												</p>
830
												</p>
833
											</div>
831
											</div>
834
										</div>
832
										</div>
835
										<div class="zone-alerte">
833
										<div class="zone-alerte">
836
											<div id="dialogue-form-invalide" class="alert alert-warning alert-block" style="display: none;">
834
											<div id="dialogue-form-invalide" class="alert alert-warning alert-block" style="display: none;">
837
												<a class="close">×</a>
835
												<a class="close">×</a>
838
												<h4 class="alert-heading">Information : champs en erreur</h4>
836
												<h4 class="alert-heading">Information : champs en erreur</h4>
839
												<p>
837
												<p>
840
													Certains champs du formulaire sont mal remplis.<br/>
838
													Certains champs du formulaire sont mal remplis.<br/>
841
													Veuillez vérifier vos données.
839
													Veuillez vérifier vos données.
842
												</p>
840
												</p>
843
											</div>
841
											</div>
844
										</div>
842
										</div>
845
									</div>
843
									</div>
846
								</div>
844
								</div>
847
							</div>
845
							</div>
848
						</div>
846
						</div>
849
					</div>
847
					</div>
850
				</div>
848
				</div>
851
			</div>
849
			</div>
852
			<!-- Affiche le tableau récapitualif des observations ajoutées -->
850
			<!-- Affiche le tableau récapitualif des observations ajoutées -->
853
			<div id="zone-liste-obs" class="row-fluid">
851
			<div id="zone-liste-obs" class="row-fluid">
854
				<div class="span12">
852
				<div class="span12">
855
					<div class="well">
853
					<div class="well">
856
						<div class="row-fluid">
854
						<div class="row-fluid">
857
							<div class="span8">
855
							<div class="span8">
858
								<h2>Observations à transmettre : <span class="obs-nbre">0</span></h2>
856
								<h2>Observations à transmettre : <span class="obs-nbre">0</span></h2>
859
							</div>
857
							</div>
860
							<div class="span4 droite">
858
							<div class="span4 droite">
861
								<button id="transmettre-obs" class="btn btn-primary btn-large has-tooltip"
859
								<button id="transmettre-obs" class="btn btn-primary btn-large has-tooltip"
862
									type="button" disabled="disabled"
860
									type="button" disabled="disabled"
863
									title="Ajoute les observations ci-dessous à votre Carnet en Ligne et les rend publiques.">
861
									title="Ajoute les observations ci-dessous à votre Carnet en Ligne et les rend publiques.">
864
									Transmettre
862
									Transmettre
865
								</button>
863
								</button>
866
							</div>
864
							</div>
867
						</div>
865
						</div>
868
						<div id="liste-obs" ></div>
866
						<div id="liste-obs" ></div>
869
						<div class="row">
867
						<div class="row">
870
							<div class="zone-alerte span6 offset3">
868
							<div class="zone-alerte span6 offset3">
871
								<div id="dialogue-zero-obs" class="alert alert-block" style="display: none;">
869
								<div id="dialogue-zero-obs" class="alert alert-block" style="display: none;">
872
									<a class="close">×</a>
870
									<a class="close">×</a>
873
									<h4 class="alert-heading">Attention : aucune observation</h4>
871
									<h4 class="alert-heading">Attention : aucune observation</h4>
874
									<p>Veuillez saisir des observations pour les transmettres.</p>
872
									<p>Veuillez saisir des observations pour les transmettres.</p>
875
								</div>
873
								</div>
876
 
874
 
877
								<div id="dialogue-obs-transaction-ok" class="alert alert-success alert-block" style="display: none;"">
875
								<div id="dialogue-obs-transaction-ok" class="alert alert-success alert-block" style="display: none;"">
878
									<a class="close">×</a>
876
									<a class="close">×</a>
879
									<h4 class="alert-heading">Information : transmission des observations</h4>
877
									<h4 class="alert-heading">Information : transmission des observations</h4>
880
									<div class="alert-txt"></div>
878
									<div class="alert-txt"></div>
881
								</div>
879
								</div>
882
 
880
 
883
								<div id="dialogue-obs-transaction-ko" class="alert alert-error alert-block" style="display: none;">
881
								<div id="dialogue-obs-transaction-ko" class="alert alert-error alert-block" style="display: none;">
884
									<a class="close">×</a>
882
									<a class="close">×</a>
885
									<h4 class="alert-heading">Erreur : transmission des observations</h4>
883
									<h4 class="alert-heading">Erreur : transmission des observations</h4>
886
									<div class="alert-txt"></div>
884
									<div class="alert-txt"></div>
887
								</div>
885
								</div>
888
							</div>
886
							</div>
889
						</div>
887
						</div>
890
 
888
 
891
					</div>
889
					</div>
892
				</div>
890
				</div>
893
			</div>
891
			</div>
894
 
892
 
895
			<footer class="row-fluid">
893
			<footer class="row-fluid">
896
				<p class="span12">&copy; Tela Botanica 2015</p>
894
				<p class="span12">&copy; Tela Botanica 2015</p>
897
			</footer>
895
			</footer>
898
 
896
 
899
			<!-- Fenêtres modales -->
897
			<!-- Fenêtres modales -->
900
			<div id="chargement" class="modal-fenetre" style="display:none;">
898
			<div id="chargement" class="modal-fenetre" style="display:none;">
901
				<div id="chargement-centrage" class="modal-contenu">
899
				<div id="chargement-centrage" class="modal-contenu">
902
					<div class="progress progress-striped active">
900
					<div class="progress progress-striped active">
903
			 			<div id="barre-progression-upload" class="bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="10" style="">
901
			 			<div id="barre-progression-upload" class="bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="10" style="">
904
			    			<span class="sr-only">0/10 observations transmises</span>
902
			    			<span class="sr-only">0/10 observations transmises</span>
905
			  			</div>
903
			  			</div>
906
					</div>
904
					</div>
907
					<p id="chargement-txt" style="color:white;font-size:1.5em;">
905
					<p id="chargement-txt" style="color:white;font-size:1.5em;">
908
						Transfert des observations en cours...<br />
906
						Transfert des observations en cours...<br />
909
						Cela peut prendre plusieurs minutes en fonction de la taille des images et du nombre
907
						Cela peut prendre plusieurs minutes en fonction de la taille des images et du nombre
910
						d'observations à transférer.
908
						d'observations à transférer.
911
					</p>
909
					</p>
912
				</div>
910
				</div>
913
			</div>
911
			</div>
914
 
912
 
915
			<!-- Templates HTML -->
913
			<!-- Templates HTML -->
916
			<div id="tpl-transmission-ok" style="display:none;">
914
			<div id="tpl-transmission-ok" style="display:none;">
917
				<p class="msg">
915
				<p class="msg">
918
					Vos observations ont bien été transmises.<br />
916
					Vos observations ont bien été transmises.<br />
919
					Elles sont désormais consultables à travers les différents outils de visualisation
917
					Elles sont désormais consultables à travers les différents outils de visualisation
920
					du réseau (<a href="http://www.tela-botanica.org/site:botanique">eFlore</a>,
918
					du réseau (<a href="http://www.tela-botanica.org/site:botanique">eFlore</a>,
921
					<a href="http://www.tela-botanica.org/appli:pictoflora">galeries d'images</a>,
919
					<a href="http://www.tela-botanica.org/appli:pictoflora">galeries d'images</a>,
922
					<a href="http://www.tela-botanica.org/appli:identiplante">identiplante</a>,
920
					<a href="http://www.tela-botanica.org/appli:identiplante">identiplante</a>,
923
					<a href="http://www.tela-botanica.org/widget:cel:cartoPoint">cartographie (widget)</a>...)<br />
921
					<a href="http://www.tela-botanica.org/widget:cel:cartoPoint">cartographie (widget)</a>...)<br />
924
					Si vous souhaitez les modifier ou les supprimer, vous pouvez les retrouver en vous
922
					Si vous souhaitez les modifier ou les supprimer, vous pouvez les retrouver en vous
925
					connectant à votre <a href="http://www.tela-botanica.org/appli:cel">Carnet en ligne</a>.<br />
923
					connectant à votre <a href="http://www.tela-botanica.org/appli:cel">Carnet en ligne</a>.<br />
926
					N'oubliez pas qu'il est nécessaire de
924
					N'oubliez pas qu'il est nécessaire de
927
					<a href="http://www.tela-botanica.org/page:inscription">s'inscrire à Tela Botanica</a>
925
					<a href="http://www.tela-botanica.org/page:inscription">s'inscrire à Tela Botanica</a>
928
					au préalable, si ce n'est pas déjà fait.
926
					au préalable, si ce n'est pas déjà fait.
929
				</p>
927
				</p>
930
			</div>
928
			</div>
931
			<div id="tpl-transmission-ko" style="display:none;">
929
			<div id="tpl-transmission-ko" style="display:none;">
932
				<p class="msg">
930
				<p class="msg">
933
					Une erreur est survenue lors de la transmission d'une observation (indiquée en rouge).<br />
931
					Une erreur est survenue lors de la transmission d'une observation (indiquée en rouge).<br />
934
					Vous pouvez tenter de la retransmettre en cliquant à nouveau sur le bouton transmettre ou bien la supprimer
932
					Vous pouvez tenter de la retransmettre en cliquant à nouveau sur le bouton transmettre ou bien la supprimer
935
					et transmettre les suivantes.<br />
933
					et transmettre les suivantes.<br />
936
					Néanmoins, les observations n'apparaissant plus dans la liste "observations à transmettre", ont bien été transmises lors de votre précédente tentative. <br />
934
					Néanmoins, les observations n'apparaissant plus dans la liste "observations à transmettre", ont bien été transmises lors de votre précédente tentative. <br />
937
					Si le problème persiste, vous pouvez signaler le dysfonctionnement sur
935
					Si le problème persiste, vous pouvez signaler le dysfonctionnement sur
938
					<a href="<?= $url_remarques ?>?service=cel&pageSource=<?php echo urlencode('http://'.$_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF'].'?'.$_SERVER['QUERY_STRING']); ?>"
936
					<a href="<?= $url_remarques ?>?service=cel&pageSource=<?php echo urlencode('http://'.$_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF'].'?'.$_SERVER['QUERY_STRING']); ?>"
939
								  target="_blank"
937
								  target="_blank"
940
								  onclick="javascript:window.open(this.getAttribute('href'), 'Tela Botanica - Remarques', config='height=700, width=640, scrollbars=yes, resizable=yes'); return false;">
938
								  onclick="javascript:window.open(this.getAttribute('href'), 'Tela Botanica - Remarques', config='height=700, width=640, scrollbars=yes, resizable=yes'); return false;">
941
								  le formulaire de signalement d'erreurs</a>.
939
								  le formulaire de signalement d'erreurs</a>.
942
				</p>
940
				</p>
943
			</div>
941
			</div>
944
		</div>
942
		</div>
945
	</body>
943
	</body>
946
</html>
944
</html>