Subversion Repositories eFlore/Applications.cel

Rev

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

Rev 3224 Rev 3225
1
<?php 
1
<?php 
2
	if (!isset($_GET['mission'])) {
2
	if (!isset($_GET['mission'])) {
3
		$projets = explode(',', $_GET['projet']);
3
		$projets = explode(',', $_GET['projet']);
4
		if(count($projets) > 1) {
4
		if(count($projets) > 1) {
5
			$_GET['mission'] = $projets[1];
5
			$_GET['mission'] = $projets[1];
6
		}
6
		}
7
	}
7
	}
8
?>
8
?>
9
<?php $mission = isset($_GET['mission']) ? strtolower($_GET['mission']) : null; ?>
9
<?php $mission = isset($_GET['mission']) ? strtolower($_GET['mission']) : null; ?>
10
<?php $missionMotCle = isset($_GET['mission']) ? $_GET['mission'] : 'Inconnue'; ?>
10
<?php $missionMotCle = isset($_GET['mission']) ? $_GET['mission'] : 'Inconnue'; ?>
11
<?php $missionNom = isset($_GET['mission']) ? $nom_mission : 'Inconnue'; ?>
11
<?php $missionNom = isset($_GET['mission']) ? $nom_mission : 'Inconnue'; ?>
12
<!DOCTYPE html>
12
<!DOCTYPE html>
13
<html lang="fr">
13
<html lang="fr">
14
	<head>
14
	<head>
15
		<?php if (isset($_GET['mission'])) :?>
15
		<?php if (isset($_GET['mission'])) :?>
16
			<?php if (isset($titre)) :?>
16
			<?php if (isset($titre)) :?>
17
				<title><?=$titre ?></title>
17
				<title><?=$titre ?></title>
18
			<?php endif; ?>
18
			<?php endif; ?>
19
		<?php else : ?>
19
		<?php else : ?>
20
			<title>Mission flore inconnue !</title>
20
			<title>Mission flore inconnue !</title>
21
		<?php endif; ?>
21
		<?php endif; ?>
22
 
22
 
23
		<meta charset="utf-8">
23
		<meta charset="utf-8">
24
 
24
 
25
		<meta name="revisit-after" content="15 days" />
25
		<meta name="revisit-after" content="15 days" />
26
		<meta name="robots" content="index,follow" />
26
		<meta name="robots" content="index,follow" />
27
		<meta name="author" content="Jean-Pascal MILCENT" />
27
		<meta name="author" content="Jean-Pascal MILCENT" />
28
		<meta name="keywords" content="Tela Botanica, CEL" />
28
		<meta name="keywords" content="Tela Botanica, CEL" />
29
		<meta name="description" content="Projet Missions Flore - Widget de saisie simplifiée pour le CEL" />
29
		<meta name="description" content="Projet Missions Flore - Widget de saisie simplifiée pour le CEL" />
30
 
30
 
31
		<!-- Viewport Mobile -->
31
		<!-- Viewport Mobile -->
32
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
32
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
33
 
33
 
34
		<!-- Favicones -->
34
		<!-- Favicones -->
35
		<link rel="shortcut icon" type="image/x-icon" href="https://resources.tela-botanica.org/tb/img/16x16/favicon.ico" />
35
		<link rel="shortcut icon" type="image/x-icon" href="https://resources.tela-botanica.org/tb/img/16x16/favicon.ico" />
36
 
36
 
37
		<!-- Javascript : bibliothèques -->
37
		<!-- Javascript : bibliothèques -->
38
		<!-- Google Map v3 -->
38
		<!-- Google Map v3 -->
39
		<!--<script type="text/javascript" src="https://getfirebug.com/firebug-lite.js"></script>-->
39
		<!--<script type="text/javascript" src="https://getfirebug.com/firebug-lite.js"></script>-->
40
		<script src="https://maps.google.com/maps/api/js?key=<?php echo $cleGoogleMaps; ?>&language=fr&amp;region=FR"></script>
40
		<script src="https://maps.google.com/maps/api/js?key=<?php echo $cleGoogleMaps; ?>&language=fr&amp;region=FR"></script>
41
		<!-- Proj4js -->
41
		<!-- Proj4js -->
42
		<script type="text/javascript" src="https://resources.tela-botanica.org/proj4js/2.2.1/proj4.js"></script>
42
		<script type="text/javascript" src="https://resources.tela-botanica.org/proj4js/2.2.1/proj4.js"></script>
43
 
43
 
44
		<!-- Jquery -->
44
		<!-- Jquery -->
45
		<script src="https://resources.tela-botanica.org/jquery/1.11.1/jquery-1.11.1.min.js"></script>
45
		<script src="https://resources.tela-botanica.org/jquery/1.11.1/jquery-1.11.1.min.js"></script>
46
		<!-- Jquery UI : nécessaire pour le mini-calendrier et l'auto-complétion -->
46
		<!-- Jquery UI : nécessaire pour le mini-calendrier et l'auto-complétion -->
47
		<script src="https://resources.tela-botanica.org/jquery/jquery-ui/1.11.0/js/jquery-ui.min.js"></script>
47
		<script src="https://resources.tela-botanica.org/jquery/jquery-ui/1.11.0/js/jquery-ui.min.js"></script>
48
		<script src="https://resources.tela-botanica.org/jquery/jquery-ui/1.11.0/js/datepicker-fr.js"></script>
48
		<script src="https://resources.tela-botanica.org/jquery/jquery-ui/1.11.0/js/datepicker-fr.js"></script>
49
		<!-- Jquery Plugins -->
49
		<!-- Jquery Plugins -->
50
		<!-- Jquery Validate : nécessaire pour la validation des formulaires -->
50
		<!-- Jquery Validate : nécessaire pour la validation des formulaires -->
51
		<script src="https://resources.tela-botanica.org/jquery/validate/1.13.0/jquery.validate.min.js"></script>
51
		<script src="https://resources.tela-botanica.org/jquery/validate/1.13.0/jquery.validate.min.js"></script>
52
		<script src="https://resources.tela-botanica.org/jquery/validate/1.13.0/localization/messages_fr.js"></script>
52
		<script src="https://resources.tela-botanica.org/jquery/validate/1.13.0/localization/messages_fr.js"></script>
53
		<!-- Jquery Form :nécessaire pour l'upload des images -->
53
		<!-- Jquery Form :nécessaire pour l'upload des images -->
54
		<script src="https://resources.tela-botanica.org/jquery/form/3.51/jquery.form.min.js"></script>
54
		<script src="https://resources.tela-botanica.org/jquery/form/3.51/jquery.form.min.js"></script>
55
 
55
 
56
		<!-- Bootstrap -->
56
		<!-- Bootstrap -->
57
		<script src="https://resources.tela-botanica.org/bootstrap/3.2.0/js/bootstrap.min.js"></script>
57
		<script src="https://resources.tela-botanica.org/bootstrap/3.2.0/js/bootstrap.min.js"></script>
58
 
58
 
59
		<!-- Javascript : appli saisie -->
59
		<!-- Javascript : appli saisie -->
60
		<script type="text/javascript" src="<?=$url_base?>modules/saisie/squelettes/defaut/js/WidgetSaisie.js"></script>
60
		<script type="text/javascript" src="<?=$url_base?>modules/saisie/squelettes/defaut/js/WidgetSaisie.js"></script>
61
		<script src="<?=$url_base?>modules/saisie/squelettes/missions-flore/js/WidgetSaisieMissionsFlore.js"></script>
61
		<script src="<?=$url_base?>modules/saisie/squelettes/missions-flore/js/WidgetSaisieMissionsFlore.js"></script>
62
		<script src="<?=$url_base?>saisie?projet=missions-flore&service=taxons&mission=<?php echo $_GET['mission']; ?>" type="text/javascript"></script>
62
		<script src="<?=$url_base?>saisie?projet=missions-flore&service=taxons&mission=<?php echo $_GET['mission']; ?>" type="text/javascript"></script>
63
		<script>
63
		<script>
64
		//<![CDATA[
64
		//<![CDATA[
65
        	$(document).ready(function() {
65
        	$(document).ready(function() {
66
				var widget = new WidgetSaisieMissionsFlore();
66
				var widget = new WidgetSaisieMissionsFlore();
67
 
67
 
68
				// La présence du parametre 'debug' dans l'URL enclenche le débogage
68
				// La présence du parametre 'debug' dans l'URL enclenche le débogage
69
				widget.debug = <?=isset($_GET['debug']) ? 'true' : 'false'?>;
69
				widget.debug = <?=isset($_GET['debug']) ? 'true' : 'false'?>;
70
				// La présence du parametre 'html5' dans l'URL enclenche les fonctions avancées HTML5
70
				// La présence du parametre 'html5' dans l'URL enclenche les fonctions avancées HTML5
71
				widget.html5 = <?=isset($_GET['html5']) ? 'true' : 'false'?>;
71
				widget.html5 = <?=isset($_GET['html5']) ? 'true' : 'false'?>;
72
				// Mot-clé du widget/projet
72
				// Mot-clé du widget/projet
73
				widget.tagProjet = "WidgetSaisie,Missions-Flore,<?=$missionMotCle?>";
73
				widget.tagProjet = "WidgetSaisie,Missions-Flore,<?=$missionMotCle?>";
74
				// Mots-clés à ajouter aux images
74
				// Mots-clés à ajouter aux images
75
				widget.tagImg = "<?=isset($_GET['tag-img']) ? $_GET['tag-img'] : ''?>";
75
				widget.tagImg = "<?=isset($_GET['tag-img']) ? $_GET['tag-img'] : ''?>";
76
				widget.separationTagImg = "<?= isset($_GET['motcle']) && isset($_GET['tag-img']) ? ',' : '' ?>";
76
				widget.separationTagImg = "<?= isset($_GET['motcle']) && isset($_GET['tag-img']) ? ',' : '' ?>";
77
				widget.tagImg = <?=isset($_GET['motcle']) ? "'".$_GET['motcle']."' + widget.separationTagImg + widget.tagImg" : 'widget.tagImg' ?>;
77
				widget.tagImg = <?=isset($_GET['motcle']) ? "'".$_GET['motcle']."' + widget.separationTagImg + widget.tagImg" : 'widget.tagImg' ?>;
78
				// Mots-clés à ajouter aux observations
78
				// Mots-clés à ajouter aux observations
79
				widget.tagObs = "<?=isset($_GET['tag-obs']) ? $_GET['tag-obs'] : ''?>";
79
				widget.tagObs = "<?=isset($_GET['tag-obs']) ? $_GET['tag-obs'] : ''?>";
80
				widget.separationTagObs = "<?= isset($_GET['projet']) && isset($_GET['tag-obs']) ? ',' : '' ?>";
80
				widget.separationTagObs = "<?= isset($_GET['projet']) && isset($_GET['tag-obs']) ? ',' : '' ?>";
81
				widget.tagObs = <?=isset($_GET['projet']) ? "'".$_GET['projet']."' + widget.separationTagObs + widget.tagObs" : 'widget.tagObs' ?>;
81
				widget.tagObs = <?=isset($_GET['projet']) ? "'".$_GET['projet']."' + widget.separationTagObs + widget.tagObs" : 'widget.tagObs' ?>;
82
				// Précharger le formulaire avec les infos d'une observation
82
				// Précharger le formulaire avec les infos d'une observation
83
				widget.obsId = "<?=isset($_GET['id-obs']) ? $_GET['id-obs'] : ''?>";
83
				widget.obsId = "<?=isset($_GET['id-obs']) ? $_GET['id-obs'] : ''?>";
84
				// URL du web service réalisant l'insertion des données dans la base du CEL.
84
				// URL du web service réalisant l'insertion des données dans la base du CEL.
85
				widget.serviceSaisieUrl = "<?=$url_ws_saisie?>";
85
				widget.serviceSaisieUrl = "<?=$url_ws_saisie?>";
86
				// URL du web service permettant de récupérer les infos d'une observation du CEL.
86
				// URL du web service permettant de récupérer les infos d'une observation du CEL.
87
				widget.serviceObsUrl = "<?=$url_ws_obs?>";
87
				widget.serviceObsUrl = "<?=$url_ws_obs?>";
88
				// Code du référentiel utilisé pour les nom scientifiques.
88
				// Code du référentiel utilisé pour les nom scientifiques.
89
				widget.nomSciReferentiel = "<?=$ns_referentiel?>";
89
				widget.nomSciReferentiel = "<?=$ns_referentiel?>";
90
				// Indication de la présence d'une espèce imposée
90
				// Indication de la présence d'une espèce imposée
91
				widget.especeImposee = "<?=$espece_imposee; ?>";
91
				widget.especeImposee = "<?=$espece_imposee; ?>";
92
				// Tableau d'informations sur l'espèce imposée
92
				// Tableau d'informations sur l'espèce imposée
93
				widget.infosEspeceImposee = <?=$infos_espece; ?>;
93
				widget.infosEspeceImposee = <?=$infos_espece; ?>;
94
				// Nombre d'élément dans les listes d'auto-complétion
94
				// Nombre d'élément dans les listes d'auto-complétion
95
				widget.autocompletionElementsNbre = 20;
95
				widget.autocompletionElementsNbre = 20;
96
				// Squelette d'URL du web service permettant l'auto-complétion des noms scientifiques
96
				// Squelette d'URL du web service permettant l'auto-complétion des noms scientifiques
97
				widget.serviceAutocompletionNomSciUrlTpl = "<?=$url_ws_autocompletion_ns_tpl?>?"+
97
				widget.serviceAutocompletionNomSciUrlTpl = "<?=$url_ws_autocompletion_ns_tpl?>?"+
98
					"masque={masque}&"+
98
					"masque={masque}&"+
99
					"recherche=etendue&"+
99
					"recherche=etendue&"+
100
					"retour.champs=famille,nom_retenu,nom_retenu_complet,num_taxonomique,nom_retenu.id&"+
100
					"retour.champs=famille,nom_retenu,nom_retenu_complet,num_taxonomique,nom_retenu.id&"+
101
					"retour.tri=alpharet&"+ // tri "à la CeL"
101
					"retour.tri=alpharet&"+ // tri "à la CeL"
102
					"ns.structure=au"+"&"+
102
					"ns.structure=au"+"&"+
103
					"navigation.limite=" + widget.autocompletionElementsNbre;
103
					"navigation.limite=" + widget.autocompletionElementsNbre;
104
				// Nombre d'observations max autorisé avant transmission
104
				// Nombre d'observations max autorisé avant transmission
105
				widget.obsMaxNbre = 10;
105
				widget.obsMaxNbre = 10;
106
				// Durée d'affichage en milliseconde des messages d'informations
106
				// Durée d'affichage en milliseconde des messages d'informations
107
				widget.dureeMessage = 15000;
107
				widget.dureeMessage = 15000;
108
				// Squelette d'URL du web service de l'annuaire.
108
				// Squelette d'URL du web service de l'annuaire.
109
				widget.serviceAnnuaireIdUrl = "<?=$url_ws_annuaire?>";
109
				widget.serviceAnnuaireIdUrl = "<?=$url_ws_annuaire?>";
110
				// Squelette d'URL du web service d'eFlore fournissant les noms de communes.
110
				// Squelette d'URL du web service d'eFlore fournissant les noms de communes.
111
				widget.serviceNomCommuneUrl = "https://api.tela-botanica.org/service:eflore:0.1/osm/nom-commune?lon={lon}&lat={lat}";
111
				widget.serviceNomCommuneUrl = "https://api.tela-botanica.org/service:eflore:0.1/osm/nom-commune?lon={lon}&lat={lat}";
112
				// Squelette d'URL du web service d'eFlore fournissant les noms de communes hors de France (localisation approximative).
112
				// Squelette d'URL du web service d'eFlore fournissant les noms de communes hors de France (localisation approximative).
113
				//widget.serviceNomCommuneUrlAlt = "https://api.tela-botanica.org/service:eflore:0.1/wikipedia/nom-commune?lon={lon}&lat={lat}&nbre=1";
113
				//widget.serviceNomCommuneUrlAlt = "https://api.tela-botanica.org/service:eflore:0.1/wikipedia/nom-commune?lon={lon}&lat={lat}&nbre=1";
114
				// Squelette d'URL du web service d'eFlore fournissant l'altitude
114
				// Squelette d'URL du web service d'eFlore fournissant l'altitude
115
				widget.serviceAltitudeUrl = "https://api.tela-botanica.org/service:eflore:0.1/nasa-srtm/altitude?lon={lon}&lat={lat}";
115
				widget.serviceAltitudeUrl = "https://api.tela-botanica.org/service:eflore:0.1/nasa-srtm/altitude?lon={lon}&lat={lat}";
116
				// URL du marqueur à utiliser dans la carte Google Map
116
				// URL du marqueur à utiliser dans la carte Google Map
117
				widget.googleMapMarqueurUrl = "<?=$url_base?>modules/saisie/squelettes/missions-flore/img/marqueurs/epingle.png";
117
				widget.googleMapMarqueurUrl = "<?=$url_base?>modules/saisie/squelettes/missions-flore/img/marqueurs/epingle.png";
118
				// URL de l'icône du chargement en cours
118
				// URL de l'icône du chargement en cours
119
				widget.chargementIconeUrl = "<?=$url_base?>modules/saisie/squelettes/missions-flore/img/icones/chargement.gif";
119
				widget.chargementIconeUrl = "<?=$url_base?>modules/saisie/squelettes/missions-flore/img/icones/chargement.gif";
120
				// URL de l'icône du chargement en cours d'une image
120
				// URL de l'icône du chargement en cours d'une image
121
				widget.chargementImageIconeUrl = "<?=$url_base?>modules/saisie/squelettes/missions-flore/img/icones/chargement-image.gif";
121
				widget.chargementImageIconeUrl = "<?=$url_base?>modules/saisie/squelettes/missions-flore/img/icones/chargement-image.gif";
122
				// URL de l'icône du calendrier
122
				// URL de l'icône du calendrier
123
				widget.calendrierIconeUrl = "<?=$url_base?>modules/saisie/squelettes/missions-flore/img/icones/calendrier.png";
123
				widget.calendrierIconeUrl = "<?=$url_base?>modules/saisie/squelettes/missions-flore/img/icones/calendrier.png";
124
				// URL de l'icône pour une photo manquante
124
				// URL de l'icône pour une photo manquante
125
				widget.pasDePhotoIconeUrl = "<?=$url_base?>modules/saisie/squelettes/missions-flore/img/icones/pasdephoto.png";
125
				widget.pasDePhotoIconeUrl = "<?=$url_base?>modules/saisie/squelettes/missions-flore/img/icones/pasdephoto.png";
126
 
126
 
127
				// Initialisation du bousin
127
				// Initialisation du bousin
128
				widget.init();
128
				widget.init();
129
			});
129
			});
130
		//]]>
130
		//]]>
131
		</script>
131
		</script>
132
 
132
 
133
		<!-- CSS -->
133
		<!-- CSS -->
134
		<link rel="stylesheet" href="https://resources.tela-botanica.org/jquery/jquery-ui/1.11.0/css/themes/smoothness/jquery-ui.min.css" />
134
		<link rel="stylesheet" href="https://resources.tela-botanica.org/jquery/jquery-ui/1.11.0/css/themes/smoothness/jquery-ui.min.css" />
135
		<link rel="stylesheet" href="https://resources.tela-botanica.org/jquery/jquery-ui/1.11.0/css/themes/smoothness/theme.css" />
135
		<link rel="stylesheet" href="https://resources.tela-botanica.org/jquery/jquery-ui/1.11.0/css/themes/smoothness/theme.css" />
136
		<link rel="stylesheet" href="https://resources.tela-botanica.org/bootstrap/3.2.0/css/bootstrap.min.css" />
136
		<link rel="stylesheet" href="https://resources.tela-botanica.org/bootstrap/3.2.0/css/bootstrap.min.css" />
137
		<link rel="stylesheet" href="https://resources.tela-botanica.org/bootstrap/3.2.0/css/bootstrap-theme.min.css" />
137
		<link rel="stylesheet" href="https://resources.tela-botanica.org/bootstrap/3.2.0/css/bootstrap-theme.min.css" />
138
		<link rel="stylesheet" href="<?=$url_base?>modules/saisie/squelettes/missions-flore/css/<?=isset($_GET['style']) ? $_GET['style'] : 'missions-flore'?>.css" />
138
		<link rel="stylesheet" href="<?=$url_base?>modules/saisie/squelettes/missions-flore/css/<?=isset($_GET['style']) ? $_GET['style'] : 'missions-flore'?>.css" />
139
 
139
 
140
		<!--  Google Analytics -->
140
		<!--  Google Analytics -->
141
		<?php if($prod): ?>
141
		<?php if($prod): ?>
142
			<?php include "analytics.html"; ?>
142
			<?php include "analytics.html"; ?>
143
		<?php endif; ?>
143
		<?php endif; ?>
144
	</head>
144
	</head>
145
 
145
 
146
	<body data-spy="scroll">
146
	<body data-spy="scroll">
147
		<div class="container">
147
		<div class="container">
148
			<div class="page-header">
148
			<div class="page-header">
149
				<?php if (isset($_GET['mission'])) :?>
149
				<?php if (isset($_GET['mission'])) :?>
150
					<?php if (file_exists('./modules/saisie/squelettes/missions-flore/squelettes/'.$_GET['mission'].'/titre.tpl.html')) :?>
150
					<?php if (file_exists('./modules/saisie/squelettes/missions-flore/squelettes/'.$_GET['mission'].'/titre.tpl.html')) :?>
151
						<?php include_once './modules/saisie/squelettes/missions-flore/squelettes/'.$_GET['mission'].'/titre.tpl.html'; ?>
151
						<?php include_once './modules/saisie/squelettes/missions-flore/squelettes/'.$_GET['mission'].'/titre.tpl.html'; ?>
152
					<?php endif; ?>
152
					<?php endif; ?>
153
				<?php else : ?>
153
				<?php else : ?>
154
					<img id="logo-titre" class="span1" src="https://resources.tela-botanica.org/tb/img/256x256/logo_sans_mots.png" alt="Tela Botanica" />
154
					<img id="logo-titre" class="span1" src="https://resources.tela-botanica.org/tb/img/256x256/logo_sans_mots.png" alt="Tela Botanica" />
155
					Mission flore inconnue !
155
					Mission flore inconnue !
156
				<?php endif; ?>
156
				<?php endif; ?>
157
			</div>
157
			</div>
158
			<div class="row">
158
			<div class="row">
159
				<div class="col-md-6">
159
				<div class="col-md-6">
160
					<div id="intro" class ="well well-lg">
160
					<div id="intro" class ="well well-lg">
161
						<a class="fermer" data-toggle="collapse" data-target="#intro-txt">
161
						<a class="fermer" data-toggle="collapse" data-target="#intro-txt">
162
							<h3 class="titre">
162
							<h3 class="titre">
163
								La mission «&nbsp;<?=$missionNom ?>&nbsp;»
163
								La mission «&nbsp;<?=$missionNom ?>&nbsp;»
164
								<span class="glyphicon glyphicon-plus-sign"></span>
164
								<span class="glyphicon glyphicon-plus-sign"></span>
165
							</h3>
165
							</h3>
166
						</a>
166
						</a>
167
						<div id="intro-txt" class="collapse in">
167
						<div id="intro-txt" class="collapse in">
168
							<?php if (file_exists("./modules/saisie/squelettes/missions-flore/squelettes/$mission/projet.tpl.html")) :?>
168
							<?php if (file_exists("./modules/saisie/squelettes/missions-flore/squelettes/$mission/projet.tpl.html")) :?>
169
								<?php include_once "./modules/saisie/squelettes/missions-flore/squelettes/$mission/projet.tpl.html"; ?>
169
								<?php include_once "./modules/saisie/squelettes/missions-flore/squelettes/$mission/projet.tpl.html"; ?>
170
							<?php else : ?>
170
							<?php else : ?>
171
								<p>Mission flore inconnue !</p>
171
								<p>Mission flore inconnue !</p>
172
							<?php endif; ?>
172
							<?php endif; ?>
173
						</div>
173
						</div>
174
					</div>
174
					</div>
175
				</div>
175
				</div>
176
 
176
 
177
				<div class="col-md-6">
177
				<div class="col-md-6">
178
					<div id="aide" class="well well-lg">
178
					<div id="aide" class="well well-lg">
179
						<a class="fermer" data-toggle="collapse" data-target="#aide-txt">
179
						<a class="fermer" data-toggle="collapse" data-target="#aide-txt">
180
							<h3 class="titre">
180
							<h3 class="titre">
181
								Aide
181
								Aide
182
								<span class="glyphicon glyphicon-plus-sign"></span>
182
								<span class="glyphicon glyphicon-plus-sign"></span>
183
							</h3>
183
							</h3>
184
						</a>
184
						</a>
185
						<div id="aide-txt" class="collapse in">
185
						<div id="aide-txt" class="collapse in">
186
							<p>
186
							<p>
187
								Cet outil vous permet de partager simplement vos observations avec
187
								Cet outil vous permet de partager simplement vos observations avec
188
								le <a target="_blank" href="http://www.tela-botanica.org/site:accueil">réseau Tela Botanica</a>
188
								le <a target="_blank" href="http://www.tela-botanica.org/site:accueil">réseau Tela Botanica</a>
189
								(sous <a target="_blank" href="http://www.tela-botanica.org/page:licence">licence CC-BY-SA</a>).
189
								(sous <a target="_blank" href="http://www.tela-botanica.org/page:licence">licence CC-BY-SA</a>).
190
								Identifiez-vous bien pour ensuite retrouver et gérer vos données dans
190
								Identifiez-vous bien pour ensuite retrouver et gérer vos données dans
191
								<a target="_blank" href="http://www.tela-botanica.org/appli:cel">votre Carnet en ligne</a>.
191
								<a target="_blank" href="http://www.tela-botanica.org/appli:cel">votre Carnet en ligne</a>.
192
								Créez jusqu'à 10 observations (avec 10Mo max d'images) puis partagez-les avec le bouton 'transmettre'.
192
								Créez jusqu'à 10 observations (avec 10Mo max d'images) puis partagez-les avec le bouton 'transmettre'.
193
								Elles apparaissent immédiatement sur les
193
								Elles apparaissent immédiatement sur les
194
								<a target="_blank" href="http://www.tela-botanica.org/site:botanique">cartes et galeries photos </a> du site.
194
								<a target="_blank" href="http://www.tela-botanica.org/site:botanique">cartes et galeries photos </a> du site.
195
							</p>
195
							</p>
196
							<p class="discretion">
196
							<p class="discretion">
197
								Pour toute question ou remarque,
197
								Pour toute question ou remarque,
198
								<a href="<?= $url_remarques ?>?service=cel&pageSource=<?php echo urlencode('http://'.$_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF'].'?'.$_SERVER['QUERY_STRING']); ?>"
198
								<a href="<?= $url_remarques ?>?service=cel&pageSource=<?php echo urlencode('http://'.$_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF'].'?'.$_SERVER['QUERY_STRING']); ?>"
199
									target="_blank"
199
									target="_blank"
200
									onclick="javascript:window.open(this.getAttribute('href'), 'Tela Botanica - Remarques', config='height=700, width=640, scrollbars=yes, resizable=yes'); return false;">
200
									onclick="javascript:window.open(this.getAttribute('href'), 'Tela Botanica - Remarques', config='height=700, width=640, scrollbars=yes, resizable=yes'); return false;">
201
									contactez-nous</a>
201
									contactez-nous</a>
202
							</p>
202
							</p>
203
							<p class="discretion">
203
							<p class="discretion">
204
								Une fois familiarisé avec l'interface vous pouvez cliquer sur le bouton suivant pour désactiver l'aide&nbsp;:
204
								Une fois familiarisé avec l'interface vous pouvez cliquer sur le bouton suivant pour désactiver l'aide&nbsp;:
205
								<button id="btn-aide" class="btn btn-xs btn-success">
205
								<button id="btn-aide" class="btn btn-xs btn-success">
206
									<span class="glyphicon glyphicon-question-sign icon-white"></span>
206
									<span class="glyphicon glyphicon-question-sign icon-white"></span>
207
									<span id="btn-aide-txt">Désactiver l'aide</span>
207
									<span id="btn-aide-txt">Désactiver l'aide</span>
208
								</button>
208
								</button>
209
							</p>
209
							</p>
210
						</div>
210
						</div>
211
					</div>
211
					</div>
212
				</div>
212
				</div>
213
			</div>
213
			</div>
214
 
214
 
215
			<div class="well well-lg">
215
			<div class="well well-lg">
216
				<h2>Observateur</h2>
216
				<h2>Observateur</h2>
217
				<form id="form-observateur" role="form" autocomplete="on">
217
				<form id="form-observateur" role="form" autocomplete="on">
218
					<div class="row">
218
					<div class="row">
219
						<div class="col-md-6 form-group has-tooltip" data-placement="right"
219
						<div class="col-md-6 form-group has-tooltip" data-placement="right"
220
							title="Saisissez le courriel avec lequel vous êtes inscrit à Tela Botanica.
220
							title="Saisissez le courriel avec lequel vous êtes inscrit à Tela Botanica.
221
								Si vous n'êtes pas inscrit, ce n'est pas grave, vous pourrez le faire
221
								Si vous n'êtes pas inscrit, ce n'est pas grave, vous pourrez le faire
222
								ultérieurement. Des informations complémentaires vont vous être
222
								ultérieurement. Des informations complémentaires vont vous être
223
								demandées : prénom et nom.">
223
								demandées : prénom et nom.">
224
							<label for="courriel"  title="Veuillez saisir votre adresse courriel.">
224
							<label for="courriel"  title="Veuillez saisir votre adresse courriel.">
225
								<strong class="obligatoire">*</strong>
225
								<strong class="obligatoire">*</strong>
226
								Courriel
226
								Courriel
227
							</label>
227
							</label>
228
							<div class="input-group">
228
							<div class="input-group">
229
								<span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span>
229
								<span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span>
230
								<input id="courriel" name="courriel" class="form-control" type="text"/>
230
								<input id="courriel" name="courriel" class="form-control" type="text"/>
231
								<input id="id_utilisateur" name="id_utilisateur" type="hidden"/>
231
								<input id="id_utilisateur" name="id_utilisateur" type="hidden"/>
232
							</div>
232
							</div>
233
						</div>
233
						</div>
234
						<div id="zone-courriel-confirmation" class="col-md-6 form-group has-feedback hidden">
234
						<div id="zone-courriel-confirmation" class="col-md-6 form-group has-feedback hidden">
235
							<label for="courriel_confirmation" title="Veuillez saisir confirmer le courriel.">
235
							<label for="courriel_confirmation" title="Veuillez saisir confirmer le courriel.">
236
								<strong class="obligatoire">*</strong> Courriel (confirmation)
236
								<strong class="obligatoire">*</strong> Courriel (confirmation)
237
							</label>
237
							</label>
238
							<div class="input-group">
238
							<div class="input-group">
239
								<span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span>
239
								<span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span>
240
								<input id="courriel_confirmation" name="courriel_confirmation" class="form-control" type="text"/>
240
								<input id="courriel_confirmation" name="courriel_confirmation" class="form-control" type="text"/>
241
							</div>
241
							</div>
242
						</div>
242
						</div>
243
					</div>
243
					</div>
244
					<div id="zone-prenom-nom" class="row hidden">
244
					<div id="zone-prenom-nom" class="row hidden">
245
						<div class="col-md-6 form-group">
245
						<div class="col-md-6 form-group">
246
							<label for="prenom">Prénom</label>
246
							<label for="prenom">Prénom</label>
247
							<div class="input-group">
247
							<div class="input-group">
248
								<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
248
								<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
249
								<input id="prenom" name="prenom" class="form-control" type="text"/>
249
								<input id="prenom" name="prenom" class="form-control" type="text"/>
250
							</div>
250
							</div>
251
						</div>
251
						</div>
252
						<div class="col-md-6 form-group">
252
						<div class="col-md-6 form-group">
253
							<label for="nom">Nom</label>
253
							<label for="nom">Nom</label>
254
							<div class="input-group">
254
							<div class="input-group">
255
								<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
255
								<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
256
								<input id="nom" name="nom" class="form-control" type="text"/>
256
								<input id="nom" name="nom" class="form-control" type="text"/>
257
							</div>
257
							</div>
258
						</div>
258
						</div>
259
					</div>
259
					</div>
260
				</form>
260
				</form>
261
			</div>
261
			</div>
262
 
262
 
263
			<!-- Messages d'erreur du formulaire-->
263
			<!-- Messages d'erreur du formulaire-->
264
			<div class="row">
264
			<div class="row">
265
				<div class="zone-alerte col-md-6 col-md-offset-3">
265
				<div class="zone-alerte col-md-6 col-md-offset-3">
266
					<div id="dialogue-bloquer-copier-coller" class="alert alert-info alert-block" style="display:none;">
266
					<div id="dialogue-bloquer-copier-coller" class="alert alert-info alert-block" style="display:none;">
267
						<button type="button" class="close"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
267
						<button type="button" class="close"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
268
						<h4 class="alert-heading">Information : copier/coller</h4>
268
						<h4 class="alert-heading">Information : copier/coller</h4>
269
						<p>
269
						<p>
270
							Merci de ne pas copier/coller votre courriel.<br/>
270
							Merci de ne pas copier/coller votre courriel.<br/>
271
							La double saisie permet de vérifier l'absence d'erreurs.
271
							La double saisie permet de vérifier l'absence d'erreurs.
272
						</p>
272
						</p>
273
					</div>
273
					</div>
274
					<div id="dialogue-courriel-introuvable" class="alert alert-info alert-block" style="display:none;">
274
					<div id="dialogue-courriel-introuvable" class="alert alert-info alert-block" style="display:none;">
275
						<button type="button" class="close"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
275
						<button type="button" class="close"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
276
						<h4 class="alert-heading">Information : courriel introuvable</h4>
276
						<h4 class="alert-heading">Information : courriel introuvable</h4>
277
						<p>
277
						<p>
278
							Vous n'êtes pas inscrit à Tela Botanica avec ce courriel.<br/>
278
							Vous n'êtes pas inscrit à Tela Botanica avec ce courriel.<br/>
279
							Veuillez compléter les champs supplémentaires ou indiquer votre courriel d'inscription.<br/>
279
							Veuillez compléter les champs supplémentaires ou indiquer votre courriel d'inscription.<br/>
280
							Pour retrouver vos observations dans le <a href="http://www.tela-botanica.org/appli:cel">Carnet en ligne</a>,
280
							Pour retrouver vos observations dans le <a href="http://www.tela-botanica.org/appli:cel">Carnet en ligne</a>,
281
							il sera nécesaire de <a href="http://www.tela-botanica.org/page:inscription">vous inscrire à Tela Botanica</a>.
281
							il sera nécesaire de <a href="http://www.tela-botanica.org/page:inscription">vous inscrire à Tela Botanica</a>.
282
						</p>
282
						</p>
283
					</div>
283
					</div>
284
					<div id="dialogue-google-map" class="alert alert-info alert-block" style="display: none;">
284
					<div id="dialogue-google-map" class="alert alert-info alert-block" style="display: none;">
285
						<button type="button" class="close"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
285
						<button type="button" class="close"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
286
						<h4 class="alert-heading">Information sur Google Map</h4>
286
						<h4 class="alert-heading">Information sur Google Map</h4>
287
						<div class="contenu"></div>
287
						<div class="contenu"></div>
288
					</div>
288
					</div>
289
				</div>
289
				</div>
290
			</div>
290
			</div>
291
 
291
 
292
			<div class="well well-lg">
292
			<div class="well well-lg">
293
				<div class="row">
293
				<div class="row">
294
					<div class="col-md-12">
294
					<div class="col-md-12">
295
						<h2>Lieu et date du relevé</h2>
295
						<h2>Lieu et date du relevé</h2>
296
					</div>
296
					</div>
297
				</div>
297
				</div>
298
				<div class="row">
298
				<div class="row">
299
					<div class="col-md-6">
299
					<div class="col-md-6">
300
						<form id="form-obs-date" class="form-horizontal" role="form">
300
						<form id="form-obs-date" class="form-horizontal" role="form">
301
							<div class="form-group has-tooltip"
301
							<div class="form-group has-tooltip"
302
									title="Vous pouvez cliquer sur l'icône de calendrier pour
302
									title="Vous pouvez cliquer sur l'icône de calendrier pour
303
										sélectionner une date dans un calendrier.">
303
										sélectionner une date dans un calendrier.">
304
								<label for="date" class="col-sm-3 control-label"
304
								<label for="date" class="col-sm-3 control-label"
305
										title="Veuillez indiquer la date du relevé au format jj/mm/aaaa">
305
										title="Veuillez indiquer la date du relevé au format jj/mm/aaaa">
306
									<strong class="obligatoire">*</strong>
306
									<strong class="obligatoire">*</strong>
307
									Date du relevé
307
									Date du relevé
308
								</label>
308
								</label>
309
								<div class="col-sm-9">
309
								<div class="col-sm-9">
310
									<div class="input-group">
310
									<div class="input-group">
311
										<span id="date-icone" class="input-group-addon add-on"></span>
311
										<span id="date-icone" class="input-group-addon add-on"></span>
312
										<input id="date" name="date" class="form-control" type="text" placeholder="jj/mm/aaaa" />
312
										<input id="date" name="date" class="form-control" type="text" placeholder="jj/mm/aaaa" />
313
									</div>
313
									</div>
314
								</div>
314
								</div>
315
							</div>
315
							</div>
316
						</form>
316
						</form>
317
					</div>
317
					</div>
318
					<hr />
318
					<hr />
319
				</div>
319
				</div>
320
 
320
 
321
				<div class="row">
321
				<div class="row">
322
					<div class="col-md-6">
322
					<div class="col-md-6">
323
						<div class="row">
323
						<div class="row">
324
							<div class="col-md-3">
324
							<div class="col-md-3">
325
								<strong title="Veuillez localiser l'observation"><strong class="obligatoire">*</strong> Géolocalisation</strong>
325
								<strong title="Veuillez localiser l'observation"><strong class="obligatoire">*</strong>Géolocalisation</strong>
326
							</div>
326
							</div>
327
							<div class="col-md-9 text-right">
327
							<div class="col-md-9 text-right">
328
								<form id="form-carte-recherche" class="form-horizontal" role="form">
328
								<form id="form-carte-recherche" class="form-horizontal" role="form">
329
									<div class="form-group">
329
									<div class="form-group">
330
										<label for="carte-recherche" class="sr-only">Rechercher</label>
330
										<label for="carte-recherche" class="sr-only">Rechercher</label>
331
										<div class="col-md-12">
331
										<div class="col-md-12">
332
											<div class="input-group">
332
											<div class="input-group">
333
												<input id="carte-recherche" class="form-control has-tooltip" type="search" value=""
333
												<input id="carte-recherche" class="form-control has-tooltip" type="search" value=""
334
														title="Permet de centrer la carte sur le lieu recherché. Sélectionner un lieu dans la liste déroulante pour centrer la carte."
334
														title="Permet de centrer la carte sur le lieu recherché. Sélectionner un lieu dans la liste déroulante pour centrer la carte."
335
														placeholder="Centrer la carte sur un lieu..."/>
335
														placeholder="Centrer la carte sur un lieu..."/>
336
												<span class="input-group-addon"><span class="glyphicon glyphicon-search"></span></span>
336
												<span class="input-group-addon"><span class="glyphicon glyphicon-search"></span></span>
337
											</div>
337
											</div>
338
										</div>
338
										</div>
339
									</div>
339
									</div>
340
								</form>
340
								</form>
341
							</div>
341
							</div>
342
						</div>
342
						</div>
343
						<div class="row">
343
						<div class="row">
344
							<div class="col-md-12">
344
							<div class="col-md-12">
345
								<div id="map-canvas" class="has-tooltip"
345
								<div id="map-canvas" class="has-tooltip"
346
									title="Vous pouvez cliquer sur la carte pour déplacer le marqueur
346
									title="Vous pouvez cliquer sur la carte pour déplacer le marqueur
347
										représentant votre station ou bien le glisser-déposer sur
347
										représentant votre station ou bien le glisser-déposer sur
348
										le lieu souhaité."></div>
348
										le lieu souhaité."></div>
349
							</div>
349
							</div>
350
						</div>
350
						</div>
351
						<div class="row">
351
						<div class="row">
352
							<div id="info-altitude" class="col-md-5">
352
							<div id="info-altitude" class="col-md-5">
353
								<span>Altitude : </span>
353
								<span>Altitude : </span>
354
								<span id="marqueur-altitude"><span id="altitude"></span> m</span>
354
								<span id="marqueur-altitude"><span id="altitude"></span> m</span>
355
							</div>
355
							</div>
356
 
356
 
357
							<div id="info-commune" class="col-md-7">
357
							<div id="info-commune" class="col-md-7">
358
								<span>Commune : </span>
358
								<span>Commune : </span>
359
								<span id="marqueur-commune">
359
								<span id="marqueur-commune">
360
									<span id="commune-nom" class="commune-info"></span>
360
									<span id="commune-nom" class="commune-info"></span>
361
									(<span id="commune-code-insee" class="commune-info has-tooltip"
361
									(<span id="commune-code-insee" class="commune-info has-tooltip"
362
										title="Code INSEE de la commune"></span>)
362
										title="Code INSEE de la commune"></span>)
363
								</span>
363
								</span>
364
							</div>
364
							</div>
365
						</div>
365
						</div>
366
					</div>
366
					</div>
367
					<div class="col-md-6">
367
					<div class="col-md-6">
368
						<form id="form-station" class="form-horizontal" role="form" autocomplete="on">
368
						<form id="form-station" class="form-horizontal" role="form" autocomplete="on">
369
							<div class="form-group has-tooltip"
369
							<div class="form-group has-tooltip"
370
								title="Toponyme plus précis que la commune, utilisé localement et se trouvant souvent sur les cartes au 1/25 000." >
370
								title="Toponyme plus précis que la commune, utilisé localement et se trouvant souvent sur les cartes au 1/25 000." >
371
								<label for="lieudit" class="col-sm-2 control-label">
371
								<label for="lieudit" class="col-sm-2 control-label">
372
									Lieu-dit
372
									Lieu-dit
373
								</label>
373
								</label>
374
								<div class="col-sm-10">
374
								<div class="col-sm-10">
375
									<input id="lieudit" class="form-control" name="lieudit" type="text" />
375
									<input id="lieudit" class="form-control" name="lieudit" type="text" />
376
								</div>
376
								</div>
377
							</div>
377
							</div>
378
 
378
 
379
							<div class="span6 form-group has-tooltip"
379
							<div class="span6 form-group has-tooltip"
380
								title="Lieu précis de l'observation définissant une unité écologique homogène (ex: le pré derrière la maison)." >
380
								title="Lieu précis de l'observation définissant une unité écologique homogène (ex: le pré derrière la maison)." >
381
								<label for="station" class="col-sm-2 control-label">
381
								<label for="station" class="col-sm-2 control-label">
382
									Station
382
									Station
383
								</label>
383
								</label>
384
								<div class="col-sm-10">
384
								<div class="col-sm-10">
385
									<input id="station" class="form-control" name="station" type="text" />
385
									<input id="station" class="form-control" name="station" type="text" />
386
								</div>
386
								</div>
387
							</div>
387
							</div>
388
 
388
 
389
							<div class="row">
389
							<div class="row">
390
								<div class="col-md-12">
390
								<div class="col-md-12">
391
									<button class="btn-coord btn btn-default"
391
									<button class="btn-coord btn btn-default"
392
									
392
									
393
											data-toggle-text="Cacher les coordonnées (WGS 84 et Lambert 93)">
393
											data-toggle-text="Cacher les coordonnées (WGS 84 et Lambert 93)">
394
										Afficher les coordonnées (WGS 84 et Lambert 93)
394
										Afficher les coordonnées (WGS 84 et Lambert 93)
395
									</button>
395
									</button>
396
									<div id="coordonnees-geo" class="well hidden">
396
									<div id="coordonnees-geo" class="well hidden">
397
										<div class="row">
397
										<div class="row">
398
											<div class="col-md-4">
398
											<div class="col-md-4">
399
												<div id="coord-lat" class="form-group form-group-sm">
399
												<div id="coord-lat" class="form-group form-group-sm">
400
													<label for="latitude" class="col-sm-4 control-label">Latitude</label>
400
													<label for="latitude" class="col-sm-4 control-label">Latitude</label>
401
													<div class="col-sm-8">
401
													<div class="col-sm-8">
402
														<input id="latitude" class="form-control" name="latitude" type="text"
402
														<input id="latitude" class="form-control" name="latitude" type="text"
403
															title="Latitude (WGS 84)" value=""/>
403
															title="Latitude (WGS 84)" value=""/>
404
													</div>
404
													</div>
405
												</div>
405
												</div>
406
											</div>
406
											</div>
407
											<div class="col-md-5">
407
											<div class="col-md-5">
408
												<div id="coord-lng" class="form-group form-group-sm">
408
												<div id="coord-lng" class="form-group form-group-sm">
409
													<label for="latitude" class="col-sm-4 control-label">Longitude</label>
409
													<label for="latitude" class="col-sm-4 control-label">Longitude</label>
410
													<div class="col-sm-8">
410
													<div class="col-sm-8">
411
														<input id="longitude" class="form-control" name="longitude" type="text"
411
														<input id="longitude" class="form-control" name="longitude" type="text"
412
															title="Longitude (WGS 84)" value=""/>
412
															title="Longitude (WGS 84)" value=""/>
413
													</div>
413
													</div>
414
												</div>
414
												</div>
415
											</div>
415
											</div>
416
											<div class="col-md-2">
416
											<div class="col-md-2">
417
												<div id="coord-lng" class="form-group form-group-sm">
417
												<div id="coord-lng" class="form-group form-group-sm">
418
													<input type="button" id="geolocaliser"
418
													<input type="button" id="geolocaliser"
419
														class="btn btn-default btn-sm has-tooltip"
419
														class="btn btn-default btn-sm has-tooltip"
420
														title="Centre la carte sur les coordonnées de latitude et longitude saisies."
420
														title="Centre la carte sur les coordonnées de latitude et longitude saisies."
421
														value="Voir sur la carte"/>
421
														value="Voir sur la carte"/>
422
												</div>
422
												</div>
423
											</div>
423
											</div>
424
										</div>
424
										</div>
425
 
425
 
426
										<div class="row">
426
										<div class="row">
427
											<div class="col-md-6">
427
											<div class="col-md-6">
428
												<div id="coord-l93-x" class="form-group">
428
												<div id="coord-l93-x" class="form-group">
429
													<label for="l93-x" class="col-sm-6 control-label">X Lambert 93</label>
429
													<label for="l93-x" class="col-sm-6 control-label">X Lambert 93</label>
430
													<div class="col-sm-5">
430
													<div class="col-sm-5">
431
														<input id="l93-x" disabled type="text" class="input-sm form-control obs-chp-etendu"
431
														<input id="l93-x" disabled type="text" class="input-sm form-control obs-chp-etendu"
432
																name="coordonneeLambert93X"
432
																name="coordonneeLambert93X"
433
																data-label="Lambert 93 X"
433
																data-label="Lambert 93 X"
434
																value=""/>
434
																value=""/>
435
													</div>
435
													</div>
436
												</div>
436
												</div>
437
											</div>
437
											</div>
438
											<div class="col-md-6">
438
											<div class="col-md-6">
439
												<div id="coord-l93-y" class="form-group">
439
												<div id="coord-l93-y" class="form-group">
440
													<label for="l93-y" class="col-sm-6 control-label">Y Lambert 93</label>
440
													<label for="l93-y" class="col-sm-6 control-label">Y Lambert 93</label>
441
													<div class="col-sm-5">
441
													<div class="col-sm-5">
442
														<input id="l93-y" disabled type="text" class="input-sm form-control obs-chp-etendu"
442
														<input id="l93-y" disabled type="text" class="input-sm form-control obs-chp-etendu"
443
																name="coordonneeLambert93Y"
443
																name="coordonneeLambert93Y"
444
																data-label="Lambert 93 Y"
444
																data-label="Lambert 93 Y"
445
																value=""/>
445
																value=""/>
446
													</div>
446
													</div>
447
												</div>
447
												</div>
448
											</div>
448
											</div>
449
										</div>
449
										</div>
450
									</div>
450
									</div>
451
								</div>
451
								</div>
452
							</div>
452
							</div>
453
						</form>
453
						</form>
454
					</div>
454
					</div>
455
				</div>
455
				</div>
456
			</div>
456
			</div>
457
 
457
 
458
			<div class="well well-lg">
458
			<div class="well well-lg">
459
				<div class="row">
459
				<div class="row">
460
					<div class="col-md-6">
460
					<div class="col-md-6">
461
						<form id="form-station-detail" class="form-horizontal" role="form" autocomplete="on">
461
						<form id="form-station-detail" class="form-horizontal" role="form" autocomplete="on">
462
							<h2>Caractéristiques de la station</h2>
462
							<h2>Caractéristiques de la station</h2>
463
 
463
 
464
							<div class="form-group has-tooltip"
464
							<div class="form-group has-tooltip"
465
								title="Type d'habitat plus ou moins standardisé dans les codes Corine ou Catminat (ex: prairie, pelouse, lisière, friche...)." >
465
								title="Type d'habitat plus ou moins standardisé dans les codes Corine ou Catminat (ex: prairie, pelouse, lisière, friche...)." >
466
								<label for="milieu" class="col-sm-4 control-label">
466
								<label for="milieu" class="col-sm-4 control-label">
467
									Type de milieu
467
									Type de milieu
468
								</label>
468
								</label>
469
								<div class="col-sm-8">
469
								<div class="col-sm-8">
470
									<input id="milieu" class="form-control" name="milieu" type="text" />
470
									<input id="milieu" class="form-control" name="milieu" type="text" />
471
								</div>
471
								</div>
472
							</div>
472
							</div>
473
 
473
 
474
							<div class="form-group has-tooltip"
474
							<div class="form-group has-tooltip"
475
									title="Indiquez l'exposition principale de la station.">
475
									title="Indiquez l'exposition principale de la station.">
476
								<label for="station-exposition" class="col-sm-4 control-label">
476
								<label for="station-exposition" class="col-sm-4 control-label">
477
									Exposition du terrain
477
									Exposition du terrain
478
								</label>
478
								</label>
479
								<div class="col-sm-8">
479
								<div class="col-sm-8">
480
									<select id="station-exposition" class="form-control obs-chp-etendu" name="stationExposition">
480
									<select id="station-exposition" class="form-control obs-chp-etendu" name="stationExposition">
481
										<option selected value="">Sélectionnez l'exposition du terrain</option>
481
										<option selected value="">Sélectionnez l'exposition du terrain</option>
482
										<option value="Plat">Terrain plat</option>
482
										<option value="Plat">Terrain plat</option>
483
										<option value="N">Nord</option>
483
										<option value="N">Nord</option>
484
										<option value="N-O">Nord-Ouest</option>
484
										<option value="N-O">Nord-Ouest</option>
485
										<option value="N-E">Nord-Est</option>
485
										<option value="N-E">Nord-Est</option>
486
										<option value="E">Est</option>
486
										<option value="E">Est</option>
487
										<option value="O">Ouest</option>
487
										<option value="O">Ouest</option>
488
										<option value="S">Sud</option>
488
										<option value="S">Sud</option>
489
										<option value="S-O">Sud-Ouest</option>
489
										<option value="S-O">Sud-Ouest</option>
490
										<option value="S-E">Sud-Est</option>
490
										<option value="S-E">Sud-Est</option>
491
									</select>
491
									</select>
492
								</div>
492
								</div>
493
							</div>
493
							</div>
494
 
494
 
495
							<div class="form-group has-tooltip"
495
							<div class="form-group has-tooltip"
496
									title="Indiquez le pourcentage de la pente de la station.">
496
									title="Indiquez le pourcentage de la pente de la station.">
497
								<label for="station-pente" class="col-sm-4 control-label">
497
								<label for="station-pente" class="col-sm-4 control-label">
498
									Pente du terrain
498
									Pente du terrain
499
								</label>
499
								</label>
500
								<div class="col-sm-8">
500
								<div class="col-sm-8">
501
									<select id="station-pente" class="form-control obs-chp-etendu" name="stationPente">
501
									<select id="station-pente" class="form-control obs-chp-etendu" name="stationPente">
502
										<option selected value="">Sélectionnez la pente du terrain</option>
502
										<option selected value="">Sélectionnez la pente du terrain</option>
503
										<option value="0-9%">entre 0 et 9% (0 à 5°)</option>
503
										<option value="0-9%">entre 0 et 9% (0 à 5°)</option>
504
										<option value="10-19%">entre 10 et 19% (5 à 9°)</option>
504
										<option value="10-19%">entre 10 et 19% (5 à 9°)</option>
505
										<option value="20-29%">entre 20 et 29% (10 à 14°)</option>
505
										<option value="20-29%">entre 20 et 29% (10 à 14°)</option>
506
										<option value="+30%">&gt; à 30% (&gt; à 15°)</option>
506
										<option value="+30%">&gt; à 30% (&gt; à 15°)</option>
507
									</select>
507
									</select>
508
								</div>
508
								</div>
509
							</div>
509
							</div>
510
 
510
 
511
						</form>
511
						</form>
512
					</div>
512
					</div>
513
 
513
 
514
					<div class="col-md-6">
514
					<div class="col-md-6">
515
						<form id="form-obs" class="form-horizontal" role="form" autocomplete="on">
515
						<form id="form-obs" class="form-horizontal" role="form" autocomplete="on">
516
							<h2>Relevé de la plante</h2>
516
							<h2>Relevé de la plante</h2>
517
 
517
 
518
							<input id="referentiel" type="hidden" value="bdtfx" />
518
							<input id="referentiel" type="hidden" value="bdtfx" />
519
 
519
 
520
							<div id="taxon-input-groupe" class="form-group has-tooltip">
520
							<div id="taxon-input-groupe" class="form-group has-tooltip">
521
								<label for="taxon"  class="col-sm-4 control-label">
521
								<label for="taxon"  class="col-sm-4 control-label">
522
									<strong class="obligatoire">*</strong>
522
									<strong class="obligatoire">*</strong>
523
									Espèce <?= $referentiel_impose ? '('.$ns_referentiel.')' : '' ?>
523
									Espèce <?= $referentiel_impose ? '('.$ns_referentiel.')' : '' ?>
524
								</label>
524
								</label>
525
								<div class="col-sm-8">
525
								<div class="col-sm-8">
526
									<?php if(isset($nom_sci_espece_defaut) & $nom_sci_espece_defaut !== '') { ?>
526
									<?php if(isset($nom_sci_espece_defaut) & $nom_sci_espece_defaut !== '') { ?>
527
										<div class="input-group">
527
										<div class="input-group">
528
											<span class="input-group-addon">
528
											<span class="input-group-addon">
529
												<span class="glyphicon glyphicon-leaf"></span>
529
												<span class="glyphicon glyphicon-leaf"></span>
530
											</span>
530
											</span>
531
											<input id="taxon" name="taxon" type="text" class="form-control"
531
											<input id="taxon" name="taxon" type="text" class="form-control"
532
												value="<?= $nom_sci_espece_defaut; ?>" />
532
												value="<?= $nom_sci_espece_defaut; ?>" />
533
										</div>
533
										</div>
534
									<?php } else { ksort($taxons);?>
534
									<?php } else { ksort($taxons);?>
535
										<select id="taxon" name="taxon" class="form-control">
535
										<select id="taxon" name="taxon" class="form-control">
536
											<?php foreach ($taxons as $taxon) : ?>
536
											<?php foreach ($taxons as $taxon) : ?>
537
												<option class="nom-sci" value="<?=$taxon['num_nom_sel']?>" title="<?= $taxon['nom_fr'];?>"><?=$taxon['nom_sel']?></option>
537
												<option class="nom-sci" value="<?=$taxon['num_nom_sel']?>" title="<?= $taxon['nom_fr'];?>"><?=$taxon['nom_sel']?></option>
538
											<?php endforeach; ?>
538
											<?php endforeach; ?>
539
										</select>
539
										</select>
540
									<?php } ?>
540
									<?php } ?>
541
								</div>
541
								</div>
542
							</div>
542
							</div>
543
 
543
 
544
							<div class="form-group has-tooltip"
544
							<div class="form-group has-tooltip"
545
									title="Indiquez la certitude de votre identification.">
545
									title="Indiquez la certitude de votre identification.">
546
								<label for="certitude" class="col-sm-4 control-label">
546
								<label for="certitude" class="col-sm-4 control-label">
547
									<strong class="obligatoire">*</strong> Certitude
547
									<strong class="obligatoire">*</strong> Certitude
548
								</label>
548
								</label>
549
								<div class="col-sm-8">
549
								<div class="col-sm-8">
550
									<select id="certitude" class="form-control" name="certitude">
550
									<select id="certitude" class="form-control" name="certitude">
551
										<option selected value="">Sélectionnez la certitude de votre identification</option>
551
										<option selected value="">Sélectionnez la certitude de votre identification</option>
552
										<option value="certain">Certaine</option>
552
										<option value="certain">Certaine</option>
553
										<option value="douteux">Douteuse</option>
553
										<option value="douteux">Douteuse</option>
554
										<option value="aDeterminer">À déterminer</option>
554
										<option value="aDeterminer">À déterminer</option>
555
									</select>
555
									</select>
556
								</div>
556
								</div>
557
							</div>
557
							</div>
558
 
558
 
559
							<div class="form-group has-tooltip"
559
							<div class="form-group has-tooltip"
560
									title="Indiquez le stade de phénologie.">
560
									title="Indiquez le stade de phénologie.">
561
								<label for="taille-type" class="col-sm-4 control-label">
561
								<label for="taille-type" class="col-sm-4 control-label">
562
									Phénologie
562
									Phénologie
563
								</label>
563
								</label>
564
								<div class="col-sm-8">
564
								<div class="col-sm-8">
565
									<select id="phenologie" class="form-control" name="phenologie">
565
									<select id="phenologie" class="form-control" name="phenologie">
566
										<option selected value="">Sélectionnez l'état de la plante</option>
566
										<option selected value="">Sélectionnez l'état de la plante</option>
567
										<option value="10-19: développement des feuilles">En feuille</option>
567
										<option value="10-19: développement des feuilles">En feuille</option>
568
										<option value="50-59: apparition de l'inflorescence, épiaison">En bouton</option>
568
										<option value="50-59: apparition de l'inflorescence, épiaison">En bouton</option>
569
										<option value="60-69: floraison">En fleur</option>
569
										<option value="60-69: floraison">En fleur</option>
570
										<option value="70-79: fructification">En fruit</option>
570
										<option value="70-79: fructification">En fruit</option>
571
										<option value="90-99: sénescence et dormance">En sénescence ou dormance</option>
571
										<option value="90-99: sénescence et dormance">En sénescence ou dormance</option>
572
									</select>
572
									</select>
573
								</div>
573
								</div>
574
							</div>
574
							</div>
575
 
575
 
576
							<div class="form-group has-tooltip"
576
							<div class="form-group has-tooltip"
577
									title="Estimation de l'abondance de la plante sur une surface donnée. Surface inventoriée
577
									title="Estimation de l'abondance de la plante sur une surface donnée. Surface inventoriée
578
									limitée par la présence d'un autre milieu ou distancé par au moins 500m d'une autre
578
									limitée par la présence d'un autre milieu ou distancé par au moins 500m d'une autre
579
									zone où la plante est observée.">
579
									zone où la plante est observée.">
580
								<label for="abondance" class="col-sm-4 control-label">
580
								<label for="abondance" class="col-sm-4 control-label">
581
									Abondance
581
									Abondance
582
								</label>
582
								</label>
583
								<div class="col-sm-8">
583
								<div class="col-sm-8">
584
									<select id="abondance" class="form-control" name="abondance">
584
									<select id="abondance" class="form-control" name="abondance">
585
										<option selected value="">Sélectionnez l'abondance</option>
585
										<option selected value="">Sélectionnez l'abondance</option>
586
										<option value="1-4 individus">1-4 individus</option>
586
										<option value="1-4 individus">1-4 individus</option>
587
										<option value="5-9 individus">5-9 individus</option>
587
										<option value="5-9 individus">5-9 individus</option>
588
										<option value="10-49 individus">10-49 individus</option>
588
										<option value="10-49 individus">10-49 individus</option>
589
										<option value="50-99 individus">50-99 individus</option>
589
										<option value="50-99 individus">50-99 individus</option>
590
										<option value="100-499 individus">100-499 individus</option>
590
										<option value="100-499 individus">100-499 individus</option>
591
										<option value=">500 individus">&gt; à 500 individus</option>
591
										<option value=">500 individus">&gt; à 500 individus</option>
592
									</select>
592
									</select>
593
								</div>
593
								</div>
594
							</div>
594
							</div>
595
 
595
 
596
							<div id="individus-nbre-groupe" class="form-group has-tooltip hidden"
596
							<div id="individus-nbre-groupe" class="form-group has-tooltip hidden"
597
								title="Indiquez le nombre d'individus." >
597
								title="Indiquez le nombre d'individus." >
598
								<label for="individus-nbre" class="col-sm-4 control-label">
598
								<label for="individus-nbre" class="col-sm-4 control-label">
599
									Nombre d'individus
599
									Nombre d'individus
600
								</label>
600
								</label>
601
								<div class="col-sm-4">
601
								<div class="col-sm-4">
602
									<input id="individus-nbre" class="form-control obs-chp-etendu" name="individusNombre"
602
									<input id="individus-nbre" class="form-control obs-chp-etendu" name="individusNombre"
603
										min="0"
603
										min="0"
604
										type="number"
604
										type="number"
605
										value="" />
605
										value="" />
606
								</div>
606
								</div>
607
							</div>
607
							</div>
608
 
608
 
609
							<div class="form-group has-tooltip"
609
							<div class="form-group has-tooltip"
610
									title="Indiquez si le relevé effectué vise à acquérir de nouvelle observation ou
610
									title="Indiquez si le relevé effectué vise à acquérir de nouvelle observation ou
611
										vise à confirmer la présence de la plante vis à vis d'une observation historique.">
611
										vise à confirmer la présence de la plante vis à vis d'une observation historique.">
612
								<label for="releve-type" class="col-sm-4 control-label">
612
								<label for="releve-type" class="col-sm-4 control-label">
613
									Type de relevé
613
									Type de relevé
614
								</label>
614
								</label>
615
								<div class="col-sm-8">
615
								<div class="col-sm-8">
616
									<select id="releve-type" class="form-control obs-chp-etendu" name="releveType">
616
									<select id="releve-type" class="form-control obs-chp-etendu" name="releveType">
617
										<option selected value="">Sélectionnez le type de relevé</option>
617
										<option selected value="">Sélectionnez le type de relevé</option>
618
										<option value="nouveau">Acquisition d'une nouvelle donnée</option>
618
										<option value="nouveau">Acquisition d'une nouvelle donnée</option>
619
										<option value="confirmation">Confirmation d'une donnée historique (précisez laquelle dans les notes)</option>
619
										<option value="confirmation">Confirmation d'une donnée historique (précisez laquelle dans les notes)</option>
620
									</select>
620
									</select>
621
								</div>
621
								</div>
622
							</div>
622
							</div>
623
 
623
 
624
							<div class="form-group has-tooltip"
624
							<div class="form-group has-tooltip"
625
									title="Indiquez le code ISBN de l'ouvrage de détermination utilisé.
625
									title="Indiquez le code ISBN de l'ouvrage de détermination utilisé.
626
										L'ISBN est un numéro international qui permet d’identifier, de manière unique,
626
										L'ISBN est un numéro international qui permet d’identifier, de manière unique,
627
										chaque édition de chaque livre publié, que son support soit numérique ou sur papier.
627
										chaque édition de chaque livre publié, que son support soit numérique ou sur papier.
628
										Ce code est généralement présent à l'endos d'un livre (à proximité du code barre)
628
										Ce code est généralement présent à l'endos d'un livre (à proximité du code barre)
629
										ou sur la page des droits d'auteur et de publication.
629
										ou sur la page des droits d'auteur et de publication.
630
										Si votre navigateur le supporte, vous pouvez sélectionner le code ISBN
630
										Si votre navigateur le supporte, vous pouvez sélectionner le code ISBN
631
										d'une flore dans la liste qui s'ouvrira en cliquant dans le champ ou en
631
										d'une flore dans la liste qui s'ouvrira en cliquant dans le champ ou en
632
										utilisant la touche «Flêche bas» (↓). Sinon, indiquez le code ISBN de la
632
										utilisant la touche «Flêche bas» (↓). Sinon, indiquez le code ISBN de la
633
										flore ou de l'ouvrage principal ayant servi à la détermination
633
										flore ou de l'ouvrage principal ayant servi à la détermination
634
										(Ex. : ISBN-13:978-3-642-11746-6, ISBN:978-3-642-11746-6, 3-642-11746-5 ).">
634
										(Ex. : ISBN-13:978-3-642-11746-6, ISBN:978-3-642-11746-6, 3-642-11746-5 ).">
635
								<label for="determination-source-isbn" class="col-sm-4 control-label">
635
								<label for="determination-source-isbn" class="col-sm-4 control-label">
636
									Source détermination
636
									Source détermination
637
								</label>
637
								</label>
638
								<div class="col-sm-8">
638
								<div class="col-sm-8">
639
									<input id="determination-source" class="form-control obs-chp-etendu" list="flores"
639
									<input id="determination-source" class="form-control obs-chp-etendu" list="flores"
640
										name="determinationSource"
640
										name="determinationSource"
641
										type="text" >
641
										type="text" >
642
									<datalist id="flores">
642
									<datalist id="flores">
643
										<option value="ISBN:978-2-909-71790-6">TISON J-M. &amp; JAUZEIN P., 2014. Flore de la France méditerranéenne continentale. Naturalia publications. ISBN:978-2909717906. 2078p.</option>
643
										<option value="ISBN:978-2-909-71790-6">TISON J-M. &amp; JAUZEIN P., 2014. Flore de la France méditerranéenne continentale. Naturalia publications. ISBN:978-2909717906. 2078p.</option>
644
										<option value="ISBN:978-2-853-67058-6">COSTE H. (ABBE), 1937. Flore descriptive et illustrée de la France, de la Corse et des contrées limitrophes. Albert Blanchard, éditeur. ISBN:978-2853670586. 1850p.</option>
644
										<option value="ISBN:978-2-853-67058-6">COSTE H. (ABBE), 1937. Flore descriptive et illustrée de la France, de la Corse et des contrées limitrophes. Albert Blanchard, éditeur. ISBN:978-2853670586. 1850p.</option>
645
										<option value="ISBN:978-2-100-05463-3">FOURNIER P-V., 1934-1940. Les quatres flores de France, Corse comprise. ISBN:978-2100054633. 1103p.</option>
645
										<option value="ISBN:978-2-100-05463-3">FOURNIER P-V., 1934-1940. Les quatres flores de France, Corse comprise. ISBN:978-2100054633. 1103p.</option>
646
										<option value="ISBN:978-2-701-11000-4">BONNIER G. &amp; DE LAYENS G., 1909. La végétation de la France, Suisse et Belgique. Librairie Générale de l'enseignement, Paris. ISBN:978-2701110004. 425p.</option>
646
										<option value="ISBN:978-2-701-11000-4">BONNIER G. &amp; DE LAYENS G., 1909. La végétation de la France, Suisse et Belgique. Librairie Générale de l'enseignement, Paris. ISBN:978-2701110004. 425p.</option>
647
									</datalist>
647
									</datalist>
648
								</div>
648
								</div>
649
							</div>
649
							</div>
650
						</form>
650
						</form>
651
					</div>
651
					</div>
652
				</div>
652
				</div>
653
 
653
 
654
 
654
 
655
				<div class="row">
655
				<div class="row">
656
					<div class="col-md-6">
656
					<div class="col-md-6">
657
						<div class="row">
657
						<div class="row">
658
							<div class="col-md-12">
658
							<div class="col-md-12">
659
								<h2>Notes</h2>
659
								<h2>Notes</h2>
660
								<textarea id="notes" form="form-obs" class="form-control col-md-12" rows="7" name="notes"
660
								<textarea id="notes" form="form-obs" class="form-control col-md-12" rows="7" name="notes"
661
									placeholder="Vous pouvez éventuellement ajouter des informations complémentaires à votre observation. Indiquez ici l'éventuelle donnée historique ayant servi de base au relevé."></textarea>
661
									placeholder="Vous pouvez éventuellement ajouter des informations complémentaires à votre observation. Indiquez ici l'éventuelle donnée historique ayant servi de base au relevé."></textarea>
662
							</div>
662
							</div>
663
						</div>
663
						</div>
664
					</div>
664
					</div>
665
 
665
 
666
					<div class="col-md-6">
666
					<div class="col-md-6">
667
						<div class="row">
667
						<div class="row">
668
							<form id="form-upload" class="form form-horizontal" role="form" action="<?= $url_ws_upload ?>"
668
							<form id="form-upload" class="form form-horizontal" role="form" action="<?= $url_ws_upload ?>"
669
								method="post" enctype="multipart/form-data">
669
								method="post" enctype="multipart/form-data">
670
								<div class="col-md-12">
670
								<div class="col-md-12">
671
									<h2>Image(s) de la plante</h2>
671
									<h2>Image(s) de la plante</h2>
672
									<strong>Ajouter une image</strong>
672
									<strong>Ajouter une image</strong>
673
									<p class="miniature-info discretion help-inline">Les photos doivent être au format JPEG et ne doivent pas excéder 5Mo chacunes.</p>
673
									<p class="miniature-info discretion help-inline">Les photos doivent être au format JPEG et ne doivent pas excéder 5Mo chacunes.</p>
674
									<div id ="photos-conteneur" class="form-group">
674
									<div id ="photos-conteneur" class="form-group">
675
										<div class="col-sm-12">
675
										<div class="col-sm-12">
676
											<input type="file" id="fichier" name="fichier" class="form-control" accept="image/jpeg" />
676
											<input type="file" id="fichier" name="fichier" class="form-control" accept="image/jpeg" />
677
											<input type="hidden" name="MAX_FILE_SIZE" value="5242880"/>
677
											<input type="hidden" name="MAX_FILE_SIZE" value="5242880"/>
678
										</div>
678
										</div>
679
										<div id="miniatures"></div>
679
										<div id="miniatures"></div>
680
										<p class="miniature-msg col-md-12">&nbsp;</p>
680
										<p class="miniature-msg col-md-12">&nbsp;</p>
681
									</div>
681
									</div>
682
								</div>
682
								</div>
683
							</form>
683
							</form>
684
						</div>
684
						</div>
685
					</div>
685
					</div>
686
				</div>
686
				</div>
687
 
687
 
688
				<div class="row">
688
				<div class="row">
689
					<div class="col-md-12 centre has-tooltip"
689
					<div class="col-md-12 centre has-tooltip"
690
						title="Une fois les champs remplis, vous pouvez cliquer sur ce bouton pour
690
						title="Une fois les champs remplis, vous pouvez cliquer sur ce bouton pour
691
							ajouter votre observation à la liste à transmettre.">
691
							ajouter votre observation à la liste à transmettre.">
692
						<button id="ajouter-obs" class="btn btn-primary btn-large" type="button">
692
						<button id="ajouter-obs" class="btn btn-primary btn-large" type="button">
693
							Créer
693
							Créer
694
						</button>
694
						</button>
695
					</div>
695
					</div>
696
				</div>
696
				</div>
697
			</div>
697
			</div>
698
 
698
 
699
 
699
 
700
		<!-- Messages d'erreur du formulaire-->
700
		<!-- Messages d'erreur du formulaire-->
701
			<div class="row">
701
			<div class="row">
702
				<div class="zone-alerte col-md-6 col-md-offset-3">
702
				<div class="zone-alerte col-md-6 col-md-offset-3">
703
					<div id="dialogue-bloquer-creer-obs" class="alert alert-warning alert-block" style="display: none;">
703
					<div id="dialogue-bloquer-creer-obs" class="alert alert-warning alert-block" style="display: none;">
704
						<a class="close">×</a>
704
						<a class="close">×</a>
705
						<h4 class="alert-heading">Information : 10 observations maximum</h4>
705
						<h4 class="alert-heading">Information : 10 observations maximum</h4>
706
						<p>
706
						<p>
707
							Vous venez d'ajouter votre 10ème observation.<br/>
707
							Vous venez d'ajouter votre 10ème observation.<br/>
708
							Pour en ajouter de nouvelles, il est nécessaire de les transmettre en cliquant sur le bouton ci-dessous.
708
							Pour en ajouter de nouvelles, il est nécessaire de les transmettre en cliquant sur le bouton ci-dessous.
709
						</p>
709
						</p>
710
					</div>
710
					</div>
711
				</div>
711
				</div>
712
				<div class="zone-alerte col-md-6 col-md-offset-3">
712
				<div class="zone-alerte col-md-6 col-md-offset-3">
713
					<div id="dialogue-form-invalide" class="alert alert-warning alert-block" style="display: none;">
713
					<div id="dialogue-form-invalide" class="alert alert-warning alert-block" style="display: none;">
714
						<a class="close">×</a>
714
						<a class="close">×</a>
715
						<h4 class="alert-heading">Information : champs en erreur</h4>
715
						<h4 class="alert-heading">Information : champs en erreur</h4>
716
						<p>
716
						<p>
717
							Certains champs du formulaire sont mal remplis.<br/>
717
							Certains champs du formulaire sont mal remplis.<br/>
718
							Veuillez vérifier les données saisies dans le formulaire.
718
							Veuillez vérifier les données saisies dans le formulaire.
719
						</p>
719
						</p>
720
					</div>
720
					</div>
721
				</div>
721
				</div>
722
			</div>
722
			</div>
723
 
723
 
724
			<!-- Affiche le tableau récapitulatif des observations ajoutées -->
724
			<!-- Affiche le tableau récapitulatif des observations ajoutées -->
725
			<div id="zone-liste-obs" class="row">
725
			<div id="zone-liste-obs" class="row">
726
				<div class="col-md-12">
726
				<div class="col-md-12">
727
					<div class="well well-lg">
727
					<div class="well well-lg">
728
						<div class="row">
728
						<div class="row">
729
							<div class="col-md-10">
729
							<div class="col-md-10">
730
								<h2>
730
								<h2>
731
									Observations
731
									Observations
732
									<?=!empty($nom_sci_espece_defaut) ? "de<i> {$nom_sci_espece_defaut}</i> " : ''; ?>
732
									<?=!empty($nom_sci_espece_defaut) ? "de<i> {$nom_sci_espece_defaut}</i> " : ''; ?>
733
									à transmettre :
733
									à transmettre :
734
									<span class="obs-nbre">0</span>
734
									<span class="obs-nbre">0</span>
735
								</h2>
735
								</h2>
736
							</div>
736
							</div>
737
							<div class="col-md-2 text-right">
737
							<div class="col-md-2 text-right">
738
								<button id="transmettre-obs" class="btn btn-primary btn-large has-tooltip"
738
								<button id="transmettre-obs" class="btn btn-primary btn-large has-tooltip"
739
									type="button" disabled="disabled"
739
									type="button" disabled="disabled"
740
									title="Ajoute les observations ci-dessous à votre Carnet en Ligne et les rend publiques.">
740
									title="Ajoute les observations ci-dessous à votre Carnet en Ligne et les rend publiques.">
741
									Transmettre
741
									Transmettre
742
								</button>
742
								</button>
743
							</div>
743
							</div>
744
						</div>
744
						</div>
745
						<div id="liste-obs" ></div>
745
						<div id="liste-obs" ></div>
746
						<div class="row">
746
						<div class="row">
747
							<div class="zone-alerte col-md-6 col-md-offset-3">
747
							<div class="zone-alerte col-md-6 col-md-offset-3">
748
								<div id="dialogue-zero-obs" class="alert alert-block" style="display: none;">
748
								<div id="dialogue-zero-obs" class="alert alert-block" style="display: none;">
749
									<a class="close">×</a>
749
									<a class="close">×</a>
750
									<h4 class="alert-heading">Attention : aucune observation</h4>
750
									<h4 class="alert-heading">Attention : aucune observation</h4>
751
									<p>Veuillez saisir des observations pour les transmettres.</p>
751
									<p>Veuillez saisir des observations pour les transmettres.</p>
752
								</div>
752
								</div>
753
 
753
 
754
								<div id="dialogue-obs-transaction-ok" class="alert alert-success alert-block" style="display: none;"">
754
								<div id="dialogue-obs-transaction-ok" class="alert alert-success alert-block" style="display: none;"">
755
									<a class="close">×</a>
755
									<a class="close">×</a>
756
									<h4 class="alert-heading">Information : transmission des observations</h4>
756
									<h4 class="alert-heading">Information : transmission des observations</h4>
757
									<div class="alert-txt"></div>
757
									<div class="alert-txt"></div>
758
								</div>
758
								</div>
759
 
759
 
760
								<div id="dialogue-obs-transaction-ko" class="alert alert-error alert-block" style="display: none;">
760
								<div id="dialogue-obs-transaction-ko" class="alert alert-error alert-block" style="display: none;">
761
									<a class="close">×</a>
761
									<a class="close">×</a>
762
									<h4 class="alert-heading">Erreur : transmission des observations</h4>
762
									<h4 class="alert-heading">Erreur : transmission des observations</h4>
763
									<div class="alert-txt"></div>
763
									<div class="alert-txt"></div>
764
								</div>
764
								</div>
765
							</div>
765
							</div>
766
						</div>
766
						</div>
767
 
767
 
768
					</div>
768
					</div>
769
				</div>
769
				</div>
770
			</div>
770
			</div>
771
 
771
 
772
			<footer class="row">
772
			<footer class="row">
773
				<p class="col-md-12 ">Réalisation &amp; hébergement : <a href="http://www.tela-botanica.org" target="_blank">Tela Botanica</a> 2014</p>
773
				<p class="col-md-12 ">Réalisation &amp; hébergement : <a href="http://www.tela-botanica.org" target="_blank">Tela Botanica</a> 2014</p>
774
			</footer>
774
			</footer>
775
 
775
 
776
			<!-- Templates HTML -->
776
			<!-- Templates HTML -->
777
			<div id="tpl-transmission-ok" style="display:none;">
777
			<div id="tpl-transmission-ok" style="display:none;">
778
				<p class="msg">
778
				<p class="msg">
779
					Vos observations ont bien été transmises.<br />
779
					Vos observations ont bien été transmises.<br />
780
					Elles sont désormais consultables à travers les différents outils de visualisation
780
					Elles sont désormais consultables à travers les différents outils de visualisation
781
					du réseau (<a href="http://www.tela-botanica.org/site:botanique">eFlore</a>,
781
					du réseau (<a href="http://www.tela-botanica.org/site:botanique">eFlore</a>,
782
					<a href="http://www.tela-botanica.org/appli:pictoflora">galeries d'images</a>,
782
					<a href="http://www.tela-botanica.org/appli:pictoflora">galeries d'images</a>,
783
					<a href="http://www.tela-botanica.org/appli:identiplante">identiplante</a>,
783
					<a href="http://www.tela-botanica.org/appli:identiplante">identiplante</a>,
784
					<a href="http://www.tela-botanica.org/widget:cel:cartoPoint">cartographie (widget)</a>...)<br />
784
					<a href="http://www.tela-botanica.org/widget:cel:cartoPoint">cartographie (widget)</a>...)<br />
785
					Si vous souhaitez les modifier ou les supprimer, vous pouvez les retrouver en vous
785
					Si vous souhaitez les modifier ou les supprimer, vous pouvez les retrouver en vous
786
					connectant à votre <a href="http://www.tela-botanica.org/appli:cel">Carnet en ligne</a>.<br />
786
					connectant à votre <a href="http://www.tela-botanica.org/appli:cel">Carnet en ligne</a>.<br />
787
					N'oubliez pas qu'il est nécessaire de
787
					N'oubliez pas qu'il est nécessaire de
788
					<a href="http://www.tela-botanica.org/page:inscription">s'inscrire à Tela Botanica</a>
788
					<a href="http://www.tela-botanica.org/page:inscription">s'inscrire à Tela Botanica</a>
789
					au préalable, si ce n'est pas déjà fait.
789
					au préalable, si ce n'est pas déjà fait.
790
				</p>
790
				</p>
791
			</div>
791
			</div>
792
			<div id="tpl-transmission-ko" style="display:none;">
792
			<div id="tpl-transmission-ko" style="display:none;">
793
				<p class="msg">
793
				<p class="msg">
794
					Une erreur est survenue lors de la transmission d'une observation (indiquée en rouge).<br />
794
					Une erreur est survenue lors de la transmission d'une observation (indiquée en rouge).<br />
795
					Vous pouvez tenter de la retransmettre en cliquant à nouveau sur le bouton transmettre ou bien la supprimer
795
					Vous pouvez tenter de la retransmettre en cliquant à nouveau sur le bouton transmettre ou bien la supprimer
796
					et transmettre les suivantes.<br />
796
					et transmettre les suivantes.<br />
797
					Néanmoins, les observations n'apparaissant plus dans la liste "observations à transmettre", ont bien été transmises lors de votre précédente tentative. <br />
797
					Néanmoins, les observations n'apparaissant plus dans la liste "observations à transmettre", ont bien été transmises lors de votre précédente tentative. <br />
798
					Si le problème persiste, vous pouvez signaler le dysfonctionnement sur
798
					Si le problème persiste, vous pouvez signaler le dysfonctionnement sur
799
					<a href="<?= $url_remarques ?>?service=cel&pageSource=<?php echo urlencode('http://'.$_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF'].'?'.$_SERVER['QUERY_STRING']); ?>"
799
					<a href="<?= $url_remarques ?>?service=cel&pageSource=<?php echo urlencode('http://'.$_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF'].'?'.$_SERVER['QUERY_STRING']); ?>"
800
								  target="_blank"
800
								  target="_blank"
801
								  onclick="javascript:window.open(this.getAttribute('href'), 'Tela Botanica - Remarques', config='height=700, width=640, scrollbars=yes, resizable=yes'); return false;">
801
								  onclick="javascript:window.open(this.getAttribute('href'), 'Tela Botanica - Remarques', config='height=700, width=640, scrollbars=yes, resizable=yes'); return false;">
802
								  le formulaire de signalement d'erreurs</a>.
802
								  le formulaire de signalement d'erreurs</a>.
803
				</p>
803
				</p>
804
			</div>
804
			</div>
805
 
805
 
806
			<!-- Fenêtres modales -->
806
			<!-- Fenêtres modales -->
807
			<div id="chargement" class="modal-fenetre" style="display:none;">
807
			<div id="chargement" class="modal-fenetre" style="display:none;">
808
				<div id="chargement-centrage" class="modal-contenu">
808
				<div id="chargement-centrage" class="modal-contenu">
809
					<div class="progress">
809
					<div class="progress">
810
						<div id="barre-progression-upload" class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="10" style="">
810
						<div id="barre-progression-upload" class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="10" style="">
811
							<span class="sr-only">0/10 observations transmises</span>
811
							<span class="sr-only">0/10 observations transmises</span>
812
						</div>
812
						</div>
813
					</div>
813
					</div>
814
 
814
 
815
					<p id="chargement-txt" style="color:white;font-size:1.5em;">
815
					<p id="chargement-txt" style="color:white;font-size:1.5em;">
816
						Transfert des observations en cours...<br />
816
						Transfert des observations en cours...<br />
817
						Cela peut prendre plusieurs minutes en fonction de la taille des images et du nombre
817
						Cela peut prendre plusieurs minutes en fonction de la taille des images et du nombre
818
						d'observations à transférer.
818
						d'observations à transférer.
819
					</p>
819
					</p>
820
				</div>
820
				</div>
821
			</div>
821
			</div>
822
		</div>
822
		</div>
823
	</body>
823
	</body>
824
</html>
824
</html>