Subversion Repositories eFlore/Applications.cel

Rev

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

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