Subversion Repositories eFlore/Applications.cel

Rev

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

Rev 2963 Rev 2993
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="https://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="https://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="https://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="https://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="https://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="https://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-patched.min.js"></script>
41
		<script type="text/javascript" src="https://resources.tela-botanica.org/jquery/validate/1.11.1/jquery.validate-patched.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="https://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="https://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="https://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="https://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="https://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="https://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="https://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="https://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 : Blé" 
339
														placeholder="Ex : Blé" 
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
													<img 
405
													<img 
406
														class="image-infobulle" 
406
														class="image-infobulle" 
407
														src="<?=$url_base?>modules/saisie/squelettes/messicoles/img/photos/maraichere.jpg"
407
														src="<?=$url_base?>modules/saisie/squelettes/messicoles/img/photos/maraichere.jpg"
408
													/>
408
													/>
409
												</div>
409
												</div>
410
												<!-- Vigne -->										
410
												<!-- Vigne -->										
411
												<label for="culture-vigne-radio" class="radio culture pointer">
411
												<label for="culture-vigne-radio" class="radio culture pointer">
412
													<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" />
413
													<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>
414
													Vigne
414
													Vigne
415
													<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" 
416
														placeholder="Ex : Sauterne" 
416
														placeholder="Ex : Sauterne" 
417
														style="display: none;" 
417
														style="display: none;" 
418
														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" 
419
													/>
419
													/>
420
												</label>
420
												</label>
421
												<div class="popover-html-content" data-for="culture-vigne-radio">
421
												<div class="popover-html-content" data-for="culture-vigne-radio">
422
													<h5>Vigne</h5>
422
													<h5>Vigne</h5>
423
													<p class="texte-infobulle">
423
													<p class="texte-infobulle">
424
														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>. 
425
														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, 
426
														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.
427
													</p>
427
													</p>
428
													<img 
428
													<img 
429
														class="image-infobulle" 
429
														class="image-infobulle" 
430
														src="<?=$url_base?>modules/saisie/squelettes/messicoles/img/photos/vigne.png"
430
														src="<?=$url_base?>modules/saisie/squelettes/messicoles/img/photos/vigne.png"
431
													/>
431
													/>
432
												</div>
432
												</div>
433
												<!-- Verger -->										
433
												<!-- Verger -->										
434
												<label for="culture-verger-radio" class="radio culture pointer">
434
												<label for="culture-verger-radio" class="radio culture pointer">
435
													<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" />
436
													<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>
437
													Verger
437
													Verger
438
													<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" 
439
														placeholder="Ex : Pommier" 
439
														placeholder="Ex : Pommier" 
440
														style="display: none;" 
440
														style="display: none;" 
441
														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" 
442
													/>
442
													/>
443
												</label>
443
												</label>
444
												<div class="popover-html-content" data-for="culture-verger-radio">
444
												<div class="popover-html-content" data-for="culture-verger-radio">
445
													<h5>Verger</h5>
445
													<h5>Verger</h5>
446
													<p class="texte-infobulle">
446
													<p class="texte-infobulle">
447
														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 
448
														arboriculture fruitière. Il en existe différents types : les vergers 
448
														arboriculture fruitière. Il en existe différents types : les vergers 
449
														conservatoires, les prés-vergers, les vergers commerciaux et de jardin 
449
														conservatoires, les prés-vergers, les vergers commerciaux et de jardin 
450
														potager.
450
														potager.
451
													</p>
451
													</p>
452
													<img 
452
													<img 
453
														class="image-infobulle" 
453
														class="image-infobulle" 
454
														src="<?=$url_base?>modules/saisie/squelettes/messicoles/img/photos/verger.png"
454
														src="<?=$url_base?>modules/saisie/squelettes/messicoles/img/photos/verger.png"
455
													/>
455
													/>
456
												</div>
456
												</div>
457
												<!-- Plantes à parfum, aromatiques et médicinales -->										
457
												<!-- Plantes à parfum, aromatiques et médicinales -->										
458
												<label for="culture-aromatique-radio" class="radio culture pointer">
458
												<label for="culture-aromatique-radio" class="radio culture pointer">
459
													<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" />
460
													<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>
461
													Plantes à parfum, aromatiques et médicinales
461
													Plantes à parfum, aromatiques et médicinales
462
													<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" 
463
														placeholder="Ex : Lavande" 
463
														placeholder="Ex : Lavande" 
464
														style="display: none;" 
464
														style="display: none;" 
465
														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" 
466
													/>
466
													/>
467
												</label>
467
												</label>
468
												<div class="popover-html-content" data-for="culture-aromatique-radio">
468
												<div class="popover-html-content" data-for="culture-aromatique-radio">
469
													<h5>Plantes à parfum, aromatiques et médicinales</h5>
469
													<h5>Plantes à parfum, aromatiques et médicinales</h5>
470
													<img 
470
													<img 
471
														class="image-infobulle" 
471
														class="image-infobulle" 
472
														src="<?=$url_base?>modules/saisie/squelettes/messicoles/img/photos/aromatique.jpg"
472
														src="<?=$url_base?>modules/saisie/squelettes/messicoles/img/photos/aromatique.jpg"
473
													/>
473
													/>
474
												</div>
474
												</div>
475
												<!-- Autres -->										
475
												<!-- Autres -->										
476
												<label for="culture-autres-radio" class="radio culture pointer">
476
												<label for="culture-autres-radio" class="radio culture pointer">
477
													<input type="radio" id="culture-autres-radio" name="type-culture" value="autres" data-titre="autres" />
477
													<input type="radio" id="culture-autres-radio" name="type-culture" value="autres" data-titre="autres" />
478
													Autres
478
													Autres
479
													<input type="text" id="culture-autres-input" name="type-culture-details" 
479
													<input type="text" id="culture-autres-input" name="type-culture-details" 
480
														style="display: none;" 
480
														style="display: none;" 
481
													/>
481
													/>
482
												</label>
482
												</label>
483
											</div>
483
											</div>
484
										</div>
484
										</div>
485
									</form>
485
									</form>
486
									<!-- Géolocalisation -->
486
									<!-- Géolocalisation -->
487
									<div class="row-fluid">
487
									<div class="row-fluid">
488
										<div class="span4">
488
										<div class="span4">
489
											<strong>Géolocalisation</strong>
489
											<strong>Géolocalisation</strong>
490
										</div>
490
										</div>
491
										<div class="span8 droite">
491
										<div class="span8 droite">
492
											<form id="form-carte-recherche" class="form-search form-horizontal" action="#" >
492
											<form id="form-carte-recherche" class="form-search form-horizontal" action="#" >
493
												<div class="control-group">
493
												<div class="control-group">
494
													<label for="carte-recherche" class="pointer">Rechercher</label>
494
													<label for="carte-recherche" class="pointer">Rechercher</label>
495
													<input id="carte-recherche" class="search-query has-tooltip" type="text" value=""
495
													<input id="carte-recherche" class="search-query has-tooltip" type="text" value=""
496
														title="Permet de centrer la carte sur le lieu recherché."
496
														title="Permet de centrer la carte sur le lieu recherché."
497
														placeholder="Ex : France, Paris, Rue de Rivoli..."/>
497
														placeholder="Ex : France, Paris, Rue de Rivoli..."/>
498
												</div>
498
												</div>
499
											</form>
499
											</form>
500
										</div>
500
										</div>
501
									</div>
501
									</div>
502
									<div class="row-fluid">
502
									<div class="row-fluid">
503
										<div class="span12">
503
										<div class="span12">
504
											<div id="map-canvas" class="has-tooltip"
504
											<div id="map-canvas" class="has-tooltip"
505
												title="Vous pouvez cliquer sur la carte pour déplacer le marqueur
505
												title="Vous pouvez cliquer sur la carte pour déplacer le marqueur
506
													représentant votre station ou bien le glisser-déposer sur
506
													représentant votre station ou bien le glisser-déposer sur
507
													le lieu souhaité."></div>
507
													le lieu souhaité."></div>
508
										</div>
508
										</div>
509
									</div>
509
									</div>
510
									<!-- Coordonnées -->
510
									<!-- Coordonnées -->
511
									<div class="row-fluid">
511
									<div class="row-fluid">
512
										<label for="coordonnees-geo" class="span7">
512
										<label for="coordonnees-geo" class="span7">
513
											<a href="#" class="afficher-coord">Afficher</a>
513
											<a href="#" class="afficher-coord">Afficher</a>
514
											<a href="#" class="afficher-coord" style="display:none;">Cacher</a>
514
											<a href="#" class="afficher-coord" style="display:none;">Cacher</a>
515
											les coordonnées géographiques
515
											les coordonnées géographiques
516
											<span id="lat-lon-info" class="info has-tooltip"
516
											<span id="lat-lon-info" class="info has-tooltip"
517
												title="Système géodésique mondial, révision de 1984 - Coordonnées non projetées">
517
												title="Système géodésique mondial, révision de 1984 - Coordonnées non projetées">
518
												(WGS84)
518
												(WGS84)
519
											</span>
519
											</span>
520
										</label>
520
										</label>
521
										<div id="info-commune" class="span5">
521
										<div id="info-commune" class="span5">
522
											<span for="marqueur-commune">Commune : </span>
522
											<span for="marqueur-commune">Commune : </span>
523
											<span id="marqueur-commune">
523
											<span id="marqueur-commune">
524
												<span id="commune-nom" class="commune-info"></span>
524
												<span id="commune-nom" class="commune-info"></span>
525
												(<span id="commune-code-insee" class="commune-info has-tooltip"
525
												(<span id="commune-code-insee" class="commune-info has-tooltip"
526
													title="Code INSEE de la commune"></span>)
526
													title="Code INSEE de la commune"></span>)
527
											</span>
527
											</span>
528
										</div>
528
										</div>
529
									</div>
529
									</div>
530
									<!-- Formulaire Station -->
530
									<!-- Formulaire Station -->
531
									<form id="form-station" class="control-group" action="#" enctype="multipart/form-data" autocomplete="on">
531
									<form id="form-station" class="control-group" action="#" enctype="multipart/form-data" autocomplete="on">
532
										<div id="coordonnees-geo" class="well" style="display:none;">
532
										<div id="coordonnees-geo" class="well" style="display:none;">
533
											<div class="row-fluid form-inline">
533
											<div class="row-fluid form-inline">
534
												<div id="coord-lat" class="span4">
534
												<div id="coord-lat" class="span4">
535
													<label for="latitude" class="pointer">Latitude</label>
535
													<label for="latitude" class="pointer">Latitude</label>
536
													<input id="latitude" class="input-mini" name="latitude" type="text" value=""/>
536
													<input id="latitude" class="input-mini" name="latitude" type="text" value=""/>
537
												</div>
537
												</div>
538
												<div id="coord-lng" class="span4">
538
												<div id="coord-lng" class="span4">
539
													<label for="longitude" class="pointer">Longitude</label>
539
													<label for="longitude" class="pointer">Longitude</label>
540
													<input id="longitude" class="input-mini" name="longitude" type="text" value=""/>
540
													<input id="longitude" class="input-mini" name="longitude" type="text" value=""/>
541
												</div>
541
												</div>
542
												<div class="span4 droite">
542
												<div class="span4 droite">
543
													<input class="btn btn-primary" id="geolocaliser" type="button" value="Voir sur la carte"
543
													<input class="btn btn-primary" id="geolocaliser" type="button" value="Voir sur la carte"
544
														class="has-tooltip"
544
														class="has-tooltip"
545
														title="Centre la carte sur les coordonnées de latitude et longitude saisies."/>
545
														title="Centre la carte sur les coordonnées de latitude et longitude saisies."/>
546
												</div>
546
												</div>
547
											</div>
547
											</div>
548
										</div>
548
										</div>
549
										<div class="row-fluid">
549
										<div class="row-fluid">
550
											<div class="span4 has-tooltip centre"
550
											<div class="span4 has-tooltip centre"
551
												title="Toponyme plus précis que la commune, utilisé localement et se trouvant souvent sur les cartes au 1/25 000." >
551
												title="Toponyme plus précis que la commune, utilisé localement et se trouvant souvent sur les cartes au 1/25 000." >
552
												<label for="lieudit" class="pointer">Lieu-dit</label>
552
												<label for="lieudit" class="pointer">Lieu-dit</label>
553
												<div>
553
												<div>
554
													<input type="text" id="lieudit" class="span2" name="lieudit"/>
554
													<input type="text" id="lieudit" class="span2" name="lieudit"/>
555
												</div>
555
												</div>
556
											</div>
556
											</div>
557
											<div class="span4 has-tooltip centre"
557
											<div class="span4 has-tooltip centre"
558
												title="Lieu précis de l'observation définissant une unité écologique homogène (ex: le pré derrière la maison)." >
558
												title="Lieu précis de l'observation définissant une unité écologique homogène (ex: le pré derrière la maison)." >
559
												<label for="station" class="pointer">Station</label>
559
												<label for="station" class="pointer">Station</label>
560
												<div>
560
												<div>
561
													<input type="text" id="station" class="span2" name="station"/>
561
													<input type="text" id="station" class="span2" name="station"/>
562
												</div>
562
												</div>
563
											</div>
563
											</div>
564
											<div class="span4 has-tooltip centre"
564
											<div class="span4 has-tooltip centre"
565
												title="Type d'habitat plus ou moins standardisé dans les codes Corine ou Catminat (ex: prairie humide).">
565
												title="Type d'habitat plus ou moins standardisé dans les codes Corine ou Catminat (ex: prairie humide).">
566
												<label for="milieu" class="pointer">Milieu</label>
566
												<label for="milieu" class="pointer">Milieu</label>
567
												<div>
567
												<div>
568
													<input type="text" id="milieu" class="span2" name="milieu" />
568
													<input type="text" id="milieu" class="span2" name="milieu" />
569
												</div>
569
												</div>
570
											</div>
570
											</div>
571
										</div>
571
										</div>
572
									</form>
572
									</form>
573
								</div>
573
								</div>
574
							</div>
574
							</div>
575
						</div>
575
						</div>
576
						<!-- 2e colonne : observation -->
576
						<!-- 2e colonne : observation -->
577
						<div class="span6">
577
						<div class="span6">
578
							<div class="well">
578
							<div class="well">
579
								<div class="row-fluid">
579
								<div class="row-fluid">
580
									<div class="span12">
580
									<div class="span12">
581
										<form id="form-obs" action="#" autocomplete="on">
581
										<form id="form-obs" action="#" autocomplete="on">
582
											<h2>Observation</h2>
582
											<h2>Observation</h2>
583
											<hr>
583
											<hr>
584
											<div class="row-fluid">
584
											<div class="row-fluid">
585
												<div id="taxon-liste-input-groupe" class="control-group">
585
												<div id="taxon-liste-input-groupe" class="control-group">
586
													<label for="taxon-liste">
586
													<label for="taxon-liste">
587
														<span class="has-tooltip pointer"
587
														<span class="has-tooltip pointer"
588
														title="Sélectionnez une espèce dans la liste déroulante par son nom latin
588
														title="Sélectionnez une espèce dans la liste déroulante par son nom latin
589
														ou commun. Si une espèce est absente, sélectionner «Autre espèce»." 
589
														ou commun. Si une espèce est absente, sélectionner «Autre espèce»." 
590
														>
590
														>
591
															<strong class="obligatoire">*Espèces</strong>
591
															<strong class="obligatoire">*Espèces</strong>
592
														</span>
592
														</span>
593
													</label>
593
													</label>
594
													<span class="input-prepend">
594
													<span class="input-prepend">
595
														<span id="espece-icone" class="add-on">
595
														<span id="espece-icone" class="add-on">
596
															<i class="icon-leaf"></i>
596
															<i class="icon-leaf"></i>
597
														</span>
597
														</span>
598
													</span>
598
													</span>
599
													<select id="taxon-liste" name="taxon-liste" class="form-control">
599
													<select id="taxon-liste" name="taxon-liste" class="form-control">
600
														<option value="" selected>Sélectionner une espèce</option>
600
														<option value="" selected>Sélectionner une espèce</option>
601
														<optgroup id="taxon-liste-noms">
601
														<optgroup id="taxon-liste-noms">
602
															<?php foreach ($taxons['sci-et-fr'] as $taxon) :?>
602
															<?php foreach ($taxons['sci-et-fr'] as $taxon) :?>
603
																<option
603
																<option
604
																	class="<?=$taxon['nom_type'] ?>"
604
																	class="<?=$taxon['nom_type'] ?>"
605
																	value="<?=$taxon['num_nom'] ?>"
605
																	value="<?=$taxon['num_nom'] ?>"
606
																	title="<?=$taxon['nom_title'] ?>"
606
																	title="<?=$taxon['nom_title'] ?>"
607
																	data-nom-a-sauver="<?=$taxon['nom_a_sauver'] ?>"
607
																	data-nom-a-sauver="<?=$taxon['nom_a_sauver'] ?>"
608
																	>
608
																	>
609
																	<?=$taxon['nom_a_afficher']?>
609
																	<?=$taxon['nom_a_afficher']?>
610
																</option>
610
																</option>
611
															<?php endforeach; ?>
611
															<?php endforeach; ?>
612
														</optgroup>
612
														</optgroup>
613
														<optgroup id="taxon-liste-special">
613
														<optgroup id="taxon-liste-special">
614
															<?php foreach ($taxons['speciaux'] as $taxon) :?>
614
															<?php foreach ($taxons['speciaux'] as $taxon) :?>
615
																<option
615
																<option
616
																	class="<?=$taxon['nom_type'] ?>"
616
																	class="<?=$taxon['nom_type'] ?>"
617
																	value="<?=$taxon['num_nom'] ?>"
617
																	value="<?=$taxon['num_nom'] ?>"
618
																	title="<?=$taxon['nom_title'] ?>"
618
																	title="<?=$taxon['nom_title'] ?>"
619
																	data-nom-a-sauver="<?=$taxon['nom_a_sauver'] ?>"
619
																	data-nom-a-sauver="<?=$taxon['nom_a_sauver'] ?>"
620
																	>
620
																	>
621
																	<?=$taxon['nom_a_afficher']?>
621
																	<?=$taxon['nom_a_afficher']?>
622
																</option>
622
																</option>
623
															<?php endforeach; ?>
623
															<?php endforeach; ?>
624
														</optgroup>
624
														</optgroup>
625
														<option id="taxon-option-autre" value="?">Autre espèce</option>
625
														<option id="taxon-option-autre" value="?">Autre espèce</option>
626
													</select>
626
													</select>
627
												</div>
627
												</div>
628
											</div>
628
											</div>
629
											<div class="row-fluid">
629
											<div class="row-fluid">
630
												<div class="span12">
630
												<div class="span12">
631
													<div id="taxon-input-groupe" class="" hidden>
631
													<div id="taxon-input-groupe" class="" hidden>
632
														<label for="taxon" title="Choisissez une espèce">
632
														<label for="taxon" title="Choisissez une espèce">
633
															<span class="has-tooltip pointer" title="Sélectionnez une espèce dans la liste déroulante pour lier
633
															<span class="has-tooltip pointer" title="Sélectionnez une espèce dans la liste déroulante pour lier
634
															votre nom au référentiel selectionné. Si vous
634
															votre nom au référentiel selectionné. Si vous
635
															le désirez vous pouvez aussi saisir un nom absent du référentiel
635
															le désirez vous pouvez aussi saisir un nom absent du référentiel
636
															(Ex. : 'fleur violette' ou 'viola sinensis???').">
636
															(Ex. : 'fleur violette' ou 'viola sinensis???').">
637
																<strong>Espèce <?= $referentiel_impose ? '('.$ns_referentiel.')' : '' ?> <em>(ou indication sur la plante)</em></strong>
637
																<strong>Espèce <?= $referentiel_impose ? '('.$ns_referentiel.')' : '' ?> <em>(ou indication sur la plante)</em></strong>
638
															</span>
638
															</span>
639
														</label>
639
														</label>
640
														<div class="row-fluid">
640
														<div class="row-fluid">
641
															<div class="span12">
641
															<div class="span12">
642
																<span class="input-prepend">
642
																<span class="input-prepend">
643
																	<span class="add-on">
643
																	<span class="add-on">
644
																		<i class="icon-leaf"></i>
644
																		<i class="icon-leaf"></i>
645
																	</span>
645
																	</span>
646
																	<input type="text" id="taxon" name="taxon" value="<?= $nom_sci_espece_defaut; ?>" data="numNomSel" />
646
																	<input type="text" id="taxon" name="taxon" value="<?= $nom_sci_espece_defaut; ?>" data="numNomSel" />
647
																</span>
647
																</span>
648
															</div>
648
															</div>
649
														</div>
649
														</div>
650
													</div>
650
													</div>
651
												</div>
651
												</div>
652
												<p class="alert alert-warning" id="avertissement-non-messicole" style="display: none;">
652
												<p class="alert alert-warning" id="avertissement-non-messicole" style="display: none;">
653
													<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.
653
													<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.
654
												</p>
654
												</p>
655
											</div>
655
											</div>
656
											<!-- Certitude -->
656
											<!-- Certitude -->
657
											<div class="row-fluid">
657
											<div class="row-fluid">
658
												<div class="span12 control-group">
658
												<div class="span12 control-group">
659
													<label for="identification-liste">
659
													<label for="identification-liste">
660
														<span class="has-tooltip pointer" 
660
														<span class="has-tooltip pointer" 
661
														title="Indiquez votre certitude vis-à-vis du nom d'espèce indiqué">
661
														title="Indiquez votre certitude vis-à-vis du nom d'espèce indiqué">
662
															<strong>Certitude</strong>
662
															<strong>Certitude</strong>
663
														</span>
663
														</span>
664
													</label>
664
													</label>
665
													<span class="input-prepend">
665
													<span class="input-prepend">
666
														<span id="identification-icone" class="add-on">
666
														<span id="identification-icone" class="add-on">
667
															<i class="icon-eye-open"></i>
667
															<i class="icon-eye-open"></i>
668
														</span>
668
														</span>
669
													</span>
669
													</span>
670
													<select name="identification-liste" id="identification-liste">
670
													<select name="identification-liste" id="identification-liste">
671
														<option value="" selected>Indiquez votre certitude</option>
671
														<option value="" selected>Indiquez votre certitude</option>
672
														<option value="certaine" data-titre="certaine">Certaine</option>
672
														<option value="certaine" data-titre="certaine">Certaine</option>
673
														<option value="douteuse" data-titre="douteuse">Douteuse</option>
673
														<option value="douteuse" data-titre="douteuse">Douteuse</option>
674
														<option value="adeterminer" data-titre="à déterminer">A déterminer</option>
674
														<option value="adeterminer" data-titre="à déterminer">A déterminer</option>
675
													</select>
675
													</select>
676
												</div>
676
												</div>
677
											</div>
677
											</div>
678
											<!-- Abondance -->
678
											<!-- Abondance -->
679
											<div class="row-fluid">
679
											<div class="row-fluid">
680
												<div class="control-group">
680
												<div class="control-group">
681
													<label for="abondance-liste">
681
													<label for="abondance-liste">
682
														<span class="has-tooltip pointer" 
682
														<span class="has-tooltip pointer" 
683
														title="Indiquez le nombre d'individus observés, toutes zones du champ confondues">
683
														title="Indiquez le nombre d'individus observés, toutes zones du champ confondues">
684
															<strong class="obligatoire">*Abondance</strong>
684
															<strong class="obligatoire">*Abondance</strong>
685
														</span>
685
														</span>
686
													</label>
686
													</label>
687
													<span class="input-prepend">
687
													<span class="input-prepend">
688
														<span id="abondance-icone" class="add-on">
688
														<span id="abondance-icone" class="add-on">
689
															<i class="icon-signal"></i>
689
															<i class="icon-signal"></i>
690
														</span>
690
														</span>
691
													</span>
691
													</span>
692
													<select name="abondance-liste" id="abondance-liste">
692
													<select name="abondance-liste" id="abondance-liste">
693
														<option value="" class="a-masquer" selected>Sélectionner une abondance</option>
693
														<option value="" class="a-masquer" selected>Sélectionner une abondance</option>
694
														<option value="1" data-titre="1 à 10 individus">1 à 10 individus</option>
694
														<option value="1" data-titre="1 à 10 individus">1 à 10 individus</option>
695
														<option value="10" data-titre="10 à 100 individus">10 à 100 individus</option>
695
														<option value="10" data-titre="10 à 100 individus">10 à 100 individus</option>
696
														<option value="100" data-titre="100 à 1000 individus">100 à 1000 individus</option>
696
														<option value="100" data-titre="100 à 1000 individus">100 à 1000 individus</option>
697
														<option value="1000" data-titre="plus de 1000 individus">> 1000 individus</option>
697
														<option value="1000" data-titre="plus de 1000 individus">> 1000 individus</option>
698
													</select>
698
													</select>
699
												</div>
699
												</div>
700
											</div>
700
											</div>
701
											<!-- Zone du champ -->
701
											<!-- Zone du champ -->
702
											<div class="row-fluid">
702
											<div class="row-fluid">
703
												<div class="span3 control-group">
703
												<div class="span3 control-group">
704
													<label>
704
													<label>
705
														<span class="has-tooltip pointer" 
705
														<span class="has-tooltip pointer" 
706
														title="Sélectionnez une ou plusieurs zones dans lesquelles l'espèce indiquée est présente">
706
														title="Sélectionnez une ou plusieurs zones dans lesquelles l'espèce indiquée est présente">
707
															<strong class="obligatoire">*Zone du champ</strong>
707
															<strong class="obligatoire">*Zone du champ</strong>
708
														</span>
708
														</span>
709
													</label>
709
													</label>
710
												</div>
710
												</div>
711
												<div class="span9 control-group">
711
												<div class="span9 control-group">
712
													<!-- Bord -->										
712
													<!-- Bord -->										
713
													<label for="bordure" class="checkbox pointer">
713
													<label for="bordure" class="checkbox pointer">
714
														<input type="checkbox" id="bordure" name="zone-champ[]" value="bord" data-titre="bord" />
714
														<input type="checkbox" id="bordure" name="zone-champ[]" value="bord" data-titre="bord" />
715
														<i class="icon-question-sign cursor-pointer" data-toggle="popover" data-trigger="hover"></i>
715
														<i class="icon-question-sign cursor-pointer" data-toggle="popover" data-trigger="hover"></i>
716
														Bord du champ
716
														Bord du champ
717
													</label>
717
													</label>
718
													<div class="popover-html-content" data-for="bordure">
718
													<div class="popover-html-content" data-for="bordure">
719
														<h5>Bord du champ</h5>
719
														<h5>Bord du champ</h5>
720
														<img 
720
														<img 
721
															class="image-verticale-infobulle" 
721
															class="image-verticale-infobulle" 
722
															src="<?=$url_base?>modules/saisie/squelettes/messicoles/img/photos/bord2.png"
722
															src="<?=$url_base?>modules/saisie/squelettes/messicoles/img/photos/bord2.png"
723
														/>
723
														/>
724
														<p class="texte-infobulle">
724
														<p class="texte-infobulle">
725
															Le bord du champ à inventorier prend en compte la zone terreuse entre le bord enherbé 
725
															Le bord du champ à inventorier prend en compte la zone terreuse entre le bord enherbé 
726
															de la route et un mètre dans la zone cultivée (dès les premières plantes cultivées du 
726
															de la route et un mètre dans la zone cultivée (dès les premières plantes cultivées du 
727
															bord vers le cœur du champ. Le bord du champs ne prend pas en compte la zone enherbée 
727
															bord vers le cœur du champ. Le bord du champs ne prend pas en compte la zone enherbée 
728
															qui peut se trouver en bord de route.
728
															qui peut se trouver en bord de route.
729
														</p>
729
														</p>
730
														
730
														
731
														<img 
731
														<img 
732
															class="image-infobulle" id="bord1"
732
															class="image-infobulle" id="bord1"
733
															src="<?=$url_base?>modules/saisie/squelettes/messicoles/img/photos/bord1.png"
733
															src="<?=$url_base?>modules/saisie/squelettes/messicoles/img/photos/bord1.png"
734
														/>
734
														/>
735
														
735
														
736
													</div>
736
													</div>
737
													<!-- Cœur du champ -->										
737
													<!-- Cœur du champ -->										
738
													<label for="coeur-champ" class="checkbox pointer">
738
													<label for="coeur-champ" class="checkbox pointer">
739
														<input type="checkbox" id="coeur-champ" name="zone-champ[]" value="coeur" data-titre="cœur" />
739
														<input type="checkbox" id="coeur-champ" name="zone-champ[]" value="coeur" data-titre="cœur" />
740
														<i class="icon-question-sign cursor-pointer" data-toggle="popover" data-trigger="hover"></i>
740
														<i class="icon-question-sign cursor-pointer" data-toggle="popover" data-trigger="hover"></i>
741
														Cœur du champ
741
														Cœur du champ
742
													</label>
742
													</label>
743
													<div class="popover-html-content" data-for="coeur-champ">
743
													<div class="popover-html-content" data-for="coeur-champ">
744
														<h5>Cœur du champ</h5>
744
														<h5>Cœur du champ</h5>
745
														<p class="texte-infobulle">
745
														<p class="texte-infobulle">
746
															Le cœur du champ concerne la zone cultivée. Il exclut 1m de bord de champ cultivé, et les 
746
															Le cœur du champ concerne la zone cultivée. Il exclut 1m de bord de champ cultivé, et les 
747
															zones délaissées/oubliées par l'agriculteur lors du semi.
747
															zones délaissées/oubliées par l'agriculteur lors du semi.
748
														</p>
748
														</p>
749
														<img 
749
														<img 
750
															class="image-infobulle" 
750
															class="image-infobulle" 
751
															src="<?=$url_base?>modules/saisie/squelettes/messicoles/img/photos/coeur.png"
751
															src="<?=$url_base?>modules/saisie/squelettes/messicoles/img/photos/coeur.png"
752
														/>
752
														/>
753
													</div>
753
													</div>
754
													<!-- Zone délaissée -->										
754
													<!-- Zone délaissée -->										
755
													<label for="zone-delaissee" class="checkbox pointer">
755
													<label for="zone-delaissee" class="checkbox pointer">
756
														<input type="checkbox" id="zone-delaissee" name="zone-champ[]" value="zone-delaissee" data-titre="zone délaissée" />
756
														<input type="checkbox" id="zone-delaissee" name="zone-champ[]" value="zone-delaissee" data-titre="zone délaissée" />
757
														<i class="icon-question-sign cursor-pointer" data-toggle="popover" data-trigger="hover"></i>
757
														<i class="icon-question-sign cursor-pointer" data-toggle="popover" data-trigger="hover"></i>
758
														Zone délaissée
758
														Zone délaissée
759
													</label>
759
													</label>
760
													<div class="popover-html-content" data-for="zone-delaissee">
760
													<div class="popover-html-content" data-for="zone-delaissee">
761
														<h5>Zone délaissée</h5>
761
														<h5>Zone délaissée</h5>
762
														<p class="texte-infobulle">
762
														<p class="texte-infobulle">
763
															Les zones délaissées sont les zones où l'agriculteur n'a pas réalisé de semi, ce qui semblerait 
763
															Les zones délaissées sont les zones où l'agriculteur n'a pas réalisé de semi, ce qui semblerait 
764
															être un oubli de sa part. Cette zone ne prend pas en compte le bord du champ.
764
															être un oubli de sa part. Cette zone ne prend pas en compte le bord du champ.
765
														</p>
765
														</p>
766
														<img 
766
														<img 
767
															class="image-infobulle" 
767
															class="image-infobulle" 
768
															src="<?=$url_base?>modules/saisie/squelettes/messicoles/img/photos/delaissee.png"
768
															src="<?=$url_base?>modules/saisie/squelettes/messicoles/img/photos/delaissee.png"
769
														/>
769
														/>
770
													</div>
770
													</div>
771
												</div>
771
												</div>
772
											</div>
772
											</div>
773
											<div class="row-fluid">
773
											<div class="row-fluid">
774
												<div class="span6">
774
												<div class="span6">
775
													<label for="notes" class="pointer">
775
													<label for="notes" class="pointer">
776
														<strong>Notes</strong>
776
														<strong>Notes</strong>
777
													</label>
777
													</label>
778
													<div>
778
													<div>
779
														<textarea id="notes" class="span5" rows="6" name="notes"
779
														<textarea id="notes" class="span5" rows="6" name="notes"
780
															placeholder="Vous pouvez éventuellement ajouter des informations complémentaires à votre observation (altitude, taille de la plante...)"></textarea>
780
															placeholder="Vous pouvez éventuellement ajouter des informations complémentaires à votre observation (altitude, taille de la plante...)"></textarea>
781
													</div>
781
													</div>
782
												</div>
782
												</div>
783
											</div>
783
											</div>
784
										</form>
784
										</form>
785
										<form id="form-upload" class="form-horizontal" action="<?= $url_ws_upload ?>"
785
										<form id="form-upload" class="form-horizontal" action="<?= $url_ws_upload ?>"
786
											method="post" enctype="multipart/form-data">
786
											method="post" enctype="multipart/form-data">
787
											<h3>Image(s) de cette plante</h3>
787
											<h3>Image(s) de cette plante</h3>
788
											<strong>Ajouter une image</strong>
788
											<strong>Ajouter une image</strong>
789
											<p class="miniature-info" class="discretion help-inline">Les photos doivent être au format JPEG et ne doivent pas excéder 5Mo chacune.</p>
789
											<p class="miniature-info" class="discretion help-inline">Les photos doivent être au format JPEG et ne doivent pas excéder 5Mo chacune.</p>
790
											<div id="image-obligatoire" class="alert alert-error alert-block" style="display: none;">
790
											<div id="image-obligatoire" class="alert alert-error alert-block" style="display: none;">
791
												<a class="close">×</a>
791
												<a class="close">×</a>
792
												<h4 class="alert-heading">Information : image obligatoire</h4>
792
												<h4 class="alert-heading">Information : image obligatoire</h4>
793
												<p>
793
												<p>
794
													Votre identification n'est pas certaine.
794
													Votre identification n'est pas certaine.
795
													<br>
795
													<br>
796
													Veuillez ajouter au moins une image.
796
													Veuillez ajouter au moins une image.
797
												</p>
797
												</p>
798
											</div>
798
											</div>
799
											<div id ="photos-conteneur">
799
											<div id ="photos-conteneur">
800
												<input class="pointer" type="file" id="fichier" name="fichier" accept="image/jpeg" />
800
												<input class="pointer" type="file" id="fichier" name="fichier" accept="image/jpeg" />
801
												<input type="hidden" name="MAX_FILE_SIZE" value="5242880"/>
801
												<input type="hidden" name="MAX_FILE_SIZE" value="5242880"/>
802
												<div id="miniatures">
802
												<div id="miniatures">
803
												</div>
803
												</div>
804
												<p class="miniature-msg" class="span12">&nbsp;</p>
804
												<p class="miniature-msg" class="span12">&nbsp;</p>
805
											</div>
805
											</div>
806
										</form>
806
										</form>
807
									</div>
807
									</div>
808
									<div class="row-fluid">
808
									<div class="row-fluid">
809
										<div class="span12 centre has-tooltip"
809
										<div class="span12 centre has-tooltip"
810
											title="Une fois les champs remplis, vous pouvez cliquer sur ce bouton pour
810
											title="Une fois les champs remplis, vous pouvez cliquer sur ce bouton pour
811
												ajouter votre observation à la liste à transmettre.">
811
												ajouter votre observation à la liste à transmettre.">
812
											<button id="ajouter-obs" class="btn btn-primary btn-large" type="button">
812
											<button id="ajouter-obs" class="btn btn-primary btn-large" type="button">
813
												Créer
813
												Créer
814
											</button>
814
											</button>
815
										</div>
815
										</div>
816
									</div>
816
									</div>
817
									<!-- Messages d'erreur du formulaire-->
817
									<!-- Messages d'erreur du formulaire-->
818
									<div class="row-fluid">
818
									<div class="row-fluid">
819
										<div class="zone-alerte">
819
										<div class="zone-alerte">
820
											<div id="dialogue-bloquer-creer-obs" class="alert alert-warning alert-block" style="display: none;">
820
											<div id="dialogue-bloquer-creer-obs" class="alert alert-warning alert-block" style="display: none;">
821
												<a class="close">×</a>
821
												<a class="close">×</a>
822
												<h4 class="alert-heading">Information : 10 observations maximum</h4>
822
												<h4 class="alert-heading">Information : 10 observations maximum</h4>
823
												<p>
823
												<p>
824
													Vous venez d'ajouter votre 10ème observation.<br/>
824
													Vous venez d'ajouter votre 10ème observation.<br/>
825
													Pour en ajouter de nouvelles, il est nécessaire de les transmettre en cliquant sur le bouton ci-dessous.
825
													Pour en ajouter de nouvelles, il est nécessaire de les transmettre en cliquant sur le bouton ci-dessous.
826
												</p>
826
												</p>
827
											</div>
827
											</div>
828
										</div>
828
										</div>
829
										<div class="zone-alerte">
829
										<div class="zone-alerte">
830
											<div id="dialogue-form-invalide" class="alert alert-warning alert-block" style="display: none;">
830
											<div id="dialogue-form-invalide" class="alert alert-warning alert-block" style="display: none;">
831
												<a class="close">×</a>
831
												<a class="close">×</a>
832
												<h4 class="alert-heading">Information : champs en erreur</h4>
832
												<h4 class="alert-heading">Information : champs en erreur</h4>
833
												<p>
833
												<p>
834
													Certains champs du formulaire sont mal remplis.<br/>
834
													Certains champs du formulaire sont mal remplis.<br/>
835
													Veuillez vérifier vos données.
835
													Veuillez vérifier vos données.
836
												</p>
836
												</p>
837
											</div>
837
											</div>
838
										</div>
838
										</div>
839
									</div>
839
									</div>
840
								</div>
840
								</div>
841
							</div>
841
							</div>
842
						</div>
842
						</div>
843
					</div>
843
					</div>
844
				</div>
844
				</div>
845
			</div>
845
			</div>
846
			<!-- Affiche le tableau récapitualif des observations ajoutées -->
846
			<!-- Affiche le tableau récapitualif des observations ajoutées -->
847
			<div id="zone-liste-obs" class="row-fluid">
847
			<div id="zone-liste-obs" class="row-fluid">
848
				<div class="span12">
848
				<div class="span12">
849
					<div class="well">
849
					<div class="well">
850
						<div class="row-fluid">
850
						<div class="row-fluid">
851
							<div class="span8">
851
							<div class="span8">
852
								<h2>Observations à transmettre : <span class="obs-nbre">0</span></h2>
852
								<h2>Observations à transmettre : <span class="obs-nbre">0</span></h2>
853
							</div>
853
							</div>
854
							<div class="span4 droite">
854
							<div class="span4 droite">
855
								<button id="transmettre-obs" class="btn btn-primary btn-large has-tooltip"
855
								<button id="transmettre-obs" class="btn btn-primary btn-large has-tooltip"
856
									type="button" disabled="disabled"
856
									type="button" disabled="disabled"
857
									title="Ajoute les observations ci-dessous à votre Carnet en Ligne et les rend publiques.">
857
									title="Ajoute les observations ci-dessous à votre Carnet en Ligne et les rend publiques.">
858
									Transmettre
858
									Transmettre
859
								</button>
859
								</button>
860
							</div>
860
							</div>
861
						</div>
861
						</div>
862
						<div id="liste-obs" ></div>
862
						<div id="liste-obs" ></div>
863
						<div class="row">
863
						<div class="row">
864
							<div class="zone-alerte span6 offset3">
864
							<div class="zone-alerte span6 offset3">
865
								<div id="dialogue-zero-obs" class="alert alert-block" style="display: none;">
865
								<div id="dialogue-zero-obs" class="alert alert-block" style="display: none;">
866
									<a class="close">×</a>
866
									<a class="close">×</a>
867
									<h4 class="alert-heading">Attention : aucune observation</h4>
867
									<h4 class="alert-heading">Attention : aucune observation</h4>
868
									<p>Veuillez saisir des observations pour les transmettres.</p>
868
									<p>Veuillez saisir des observations pour les transmettres.</p>
869
								</div>
869
								</div>
870
 
870
 
871
								<div id="dialogue-obs-transaction-ok" class="alert alert-success alert-block" style="display: none;"">
871
								<div id="dialogue-obs-transaction-ok" class="alert alert-success alert-block" style="display: none;"">
872
									<a class="close">×</a>
872
									<a class="close">×</a>
873
									<h4 class="alert-heading">Information : transmission des observations</h4>
873
									<h4 class="alert-heading">Information : transmission des observations</h4>
874
									<div class="alert-txt"></div>
874
									<div class="alert-txt"></div>
875
								</div>
875
								</div>
876
 
876
 
877
								<div id="dialogue-obs-transaction-ko" class="alert alert-error alert-block" style="display: none;">
877
								<div id="dialogue-obs-transaction-ko" class="alert alert-error alert-block" style="display: none;">
878
									<a class="close">×</a>
878
									<a class="close">×</a>
879
									<h4 class="alert-heading">Erreur : transmission des observations</h4>
879
									<h4 class="alert-heading">Erreur : transmission des observations</h4>
880
									<div class="alert-txt"></div>
880
									<div class="alert-txt"></div>
881
								</div>
881
								</div>
882
							</div>
882
							</div>
883
						</div>
883
						</div>
884
 
884
 
885
					</div>
885
					</div>
886
				</div>
886
				</div>
887
			</div>
887
			</div>
888
 
888
 
889
			<footer class="row-fluid">
889
			<footer class="row-fluid">
890
				<p class="span12">&copy; Tela Botanica 2015</p>
890
				<p class="span12">&copy; Tela Botanica 2015</p>
891
			</footer>
891
			</footer>
892
 
892
 
893
			<!-- Fenêtres modales -->
893
			<!-- Fenêtres modales -->
894
			<div id="chargement" class="modal-fenetre" style="display:none;">
894
			<div id="chargement" class="modal-fenetre" style="display:none;">
895
				<div id="chargement-centrage" class="modal-contenu">
895
				<div id="chargement-centrage" class="modal-contenu">
896
					<div class="progress progress-striped active">
896
					<div class="progress progress-striped active">
897
			 			<div id="barre-progression-upload" class="bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="10" style="">
897
			 			<div id="barre-progression-upload" class="bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="10" style="">
898
			    			<span class="sr-only">0/10 observations transmises</span>
898
			    			<span class="sr-only">0/10 observations transmises</span>
899
			  			</div>
899
			  			</div>
900
					</div>
900
					</div>
901
					<p id="chargement-txt" style="color:white;font-size:1.5em;">
901
					<p id="chargement-txt" style="color:white;font-size:1.5em;">
902
						Transfert des observations en cours...<br />
902
						Transfert des observations en cours...<br />
903
						Cela peut prendre plusieurs minutes en fonction de la taille des images et du nombre
903
						Cela peut prendre plusieurs minutes en fonction de la taille des images et du nombre
904
						d'observations à transférer.
904
						d'observations à transférer.
905
					</p>
905
					</p>
906
				</div>
906
				</div>
907
			</div>
907
			</div>
908
 
908
 
909
			<!-- Templates HTML -->
909
			<!-- Templates HTML -->
910
			<div id="tpl-transmission-ok" style="display:none;">
910
			<div id="tpl-transmission-ok" style="display:none;">
911
				<p class="msg">
911
				<p class="msg">
912
					Vos observations ont bien été transmises.<br />
912
					Vos observations ont bien été transmises.<br />
913
					Elles sont désormais consultables à travers les différents outils de visualisation
913
					Elles sont désormais consultables à travers les différents outils de visualisation
914
					du réseau (<a href="http://www.tela-botanica.org/site:botanique">eFlore</a>,
914
					du réseau (<a href="http://www.tela-botanica.org/site:botanique">eFlore</a>,
915
					<a href="http://www.tela-botanica.org/appli:pictoflora">galeries d'images</a>,
915
					<a href="http://www.tela-botanica.org/appli:pictoflora">galeries d'images</a>,
916
					<a href="http://www.tela-botanica.org/appli:identiplante">identiplante</a>,
916
					<a href="http://www.tela-botanica.org/appli:identiplante">identiplante</a>,
917
					<a href="http://www.tela-botanica.org/widget:cel:cartoPoint">cartographie (widget)</a>...)<br />
917
					<a href="http://www.tela-botanica.org/widget:cel:cartoPoint">cartographie (widget)</a>...)<br />
918
					Si vous souhaitez les modifier ou les supprimer, vous pouvez les retrouver en vous
918
					Si vous souhaitez les modifier ou les supprimer, vous pouvez les retrouver en vous
919
					connectant à votre <a href="http://www.tela-botanica.org/appli:cel">Carnet en ligne</a>.<br />
919
					connectant à votre <a href="http://www.tela-botanica.org/appli:cel">Carnet en ligne</a>.<br />
920
					N'oubliez pas qu'il est nécessaire de
920
					N'oubliez pas qu'il est nécessaire de
921
					<a href="http://www.tela-botanica.org/page:inscription">s'inscrire à Tela Botanica</a>
921
					<a href="http://www.tela-botanica.org/page:inscription">s'inscrire à Tela Botanica</a>
922
					au préalable, si ce n'est pas déjà fait.
922
					au préalable, si ce n'est pas déjà fait.
923
				</p>
923
				</p>
924
			</div>
924
			</div>
925
			<div id="tpl-transmission-ko" style="display:none;">
925
			<div id="tpl-transmission-ko" style="display:none;">
926
				<p class="msg">
926
				<p class="msg">
927
					Une erreur est survenue lors de la transmission d'une observation (indiquée en rouge).<br />
927
					Une erreur est survenue lors de la transmission d'une observation (indiquée en rouge).<br />
928
					Vous pouvez tenter de la retransmettre en cliquant à nouveau sur le bouton transmettre ou bien la supprimer
928
					Vous pouvez tenter de la retransmettre en cliquant à nouveau sur le bouton transmettre ou bien la supprimer
929
					et transmettre les suivantes.<br />
929
					et transmettre les suivantes.<br />
930
					Néanmoins, les observations n'apparaissant plus dans la liste "observations à transmettre", ont bien été transmises lors de votre précédente tentative. <br />
930
					Néanmoins, les observations n'apparaissant plus dans la liste "observations à transmettre", ont bien été transmises lors de votre précédente tentative. <br />
931
					Si le problème persiste, vous pouvez signaler le dysfonctionnement sur
931
					Si le problème persiste, vous pouvez signaler le dysfonctionnement sur
932
					<a href="<?= $url_remarques ?>?service=cel&pageSource=<?php echo urlencode('http://'.$_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF'].'?'.$_SERVER['QUERY_STRING']); ?>"
932
					<a href="<?= $url_remarques ?>?service=cel&pageSource=<?php echo urlencode('http://'.$_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF'].'?'.$_SERVER['QUERY_STRING']); ?>"
933
								  target="_blank"
933
								  target="_blank"
934
								  onclick="javascript:window.open(this.getAttribute('href'), 'Tela Botanica - Remarques', config='height=700, width=640, scrollbars=yes, resizable=yes'); return false;">
934
								  onclick="javascript:window.open(this.getAttribute('href'), 'Tela Botanica - Remarques', config='height=700, width=640, scrollbars=yes, resizable=yes'); return false;">
935
								  le formulaire de signalement d'erreurs</a>.
935
								  le formulaire de signalement d'erreurs</a>.
936
				</p>
936
				</p>
937
			</div>
937
			</div>
938
		</div>
938
		</div>
939
	</body>
939
	</body>
940
</html>
940
</html>