Subversion Repositories eFlore/Applications.cel

Rev

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

Rev 2874 Rev 2929
1
<!DOCTYPE html>
1
<!DOCTYPE html>
2
<html>
2
<html>
3
	<head>
3
	<head>
4
		<title>CEL Simplified Input</title>
4
		<title>CEL Simplified Input</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
		<meta http-equiv="Content-style-type" content="text/css" />
7
		<meta http-equiv="Content-style-type" content="text/css" />
8
		<meta http-equiv="Content-script-type" content="text/javascript" />
8
		<meta http-equiv="Content-script-type" content="text/javascript" />
9
		<meta http-equiv="Content-language" content="fr" />
9
		<meta http-equiv="Content-language" content="fr" />
10
 
10
 
11
		<meta name="revisit-after" content="15 days" />
11
		<meta name="revisit-after" content="15 days" />
12
		<meta name="robots" content="index,follow" />
12
		<meta name="robots" content="index,follow" />
13
		<meta name="author" content="Tela Botanica" />
13
		<meta name="author" content="Tela Botanica" />
14
		<meta name="keywords" content="Tela Botanica, CEL" />
14
		<meta name="keywords" content="Tela Botanica, CEL" />
15
		<meta name="description" content="Simplified input widget for the CEL" />
15
		<meta name="description" content="Simplified input widget for the CEL" />
16
 
16
 
17
		<!-- OpenGraph pour Facebook, Pinterest, Google+ -->
17
		<!-- OpenGraph pour Facebook, Pinterest, Google+ -->
18
		<meta property="og:type" content="website" />
18
		<meta property="og:type" content="website" />
19
		<meta property="og:title" content="Quick observation input" />
19
		<meta property="og:title" content="Quick observation input" />
20
		<meta property="og:site_name" content="Tela Botanica" />
20
		<meta property="og:site_name" content="Tela Botanica" />
21
		<meta property="og:description" content="Submit and share easily your wild plants observations using the Carnet en Ligne input widget (License: CC-BY-SA)" />
21
		<meta property="og:description" content="Submit and share easily your wild plants observations using the Carnet en Ligne input widget (License: CC-BY-SA)" />
22
		<meta property="og:image" content="http://resources.tela-botanica.org/tb/img/256x256/carre_englobant.png" />
22
		<meta property="og:image" content="http://resources.tela-botanica.org/tb/img/256x256/carre_englobant.png" />
23
		<meta property="og:image:type" content="image/png" /> 
23
		<meta property="og:image:type" content="image/png" /> 
24
		<meta property="og:image:width" content="256" /> 
24
		<meta property="og:image:width" content="256" /> 
25
		<meta property="og:image:height" content="256" />
25
		<meta property="og:image:height" content="256" />
26
		<meta property="og:locale" content="fr_FR" />
26
		<meta property="og:locale" content="fr_FR" />
27
 
27
 
28
		<!-- Viewport Mobile -->
28
		<!-- Viewport Mobile -->
29
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
29
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
30
 
30
 
31
		<!-- Favicones -->
31
		<!-- Favicones -->
32
		<link rel="shortcut icon" type="image/x-icon" href="http://resources.tela-botanica.org/tb/img/16x16/favicon.ico" />
32
		<link rel="shortcut icon" type="image/x-icon" href="http://resources.tela-botanica.org/tb/img/16x16/favicon.ico" />
33
 
33
 
34
		<!-- Javascript : bibliothèques -->
34
		<!-- Javascript : bibliothèques -->
35
		<!-- Google Map v3 -->
35
		<!-- Google Map v3 -->
36
		<script type="text/javascript" src="http://maps.google.com/maps/api/js?language=fr&amp;region=FR"></script>
36
		<script type="text/javascript" src="http://maps.google.com/maps/api/js?language=fr&amp;region=FR"></script>
37
		<!-- Jquery -->
37
		<!-- Jquery -->
38
		<script type="text/javascript" src="http://resources.tela-botanica.org/jquery/1.11.1/jquery-1.11.1.min.js"></script>
38
		<script type="text/javascript" src="http://resources.tela-botanica.org/jquery/1.11.1/jquery-1.11.1.min.js"></script>
39
		<!-- Jquery UI : nécessaire pour le minicalendrier et l'auto-complétion -->
39
		<!-- Jquery UI : nécessaire pour le minicalendrier et l'auto-complétion -->
40
		<script type="text/javascript" src="http://resources.tela-botanica.org/jquery/jquery-ui/1.11.0/js/jquery-ui.min.js"></script>
40
		<script type="text/javascript" src="http://resources.tela-botanica.org/jquery/jquery-ui/1.11.0/js/jquery-ui.min.js"></script>
41
		<script type="text/javascript" src="http://resources.tela-botanica.org/jquery/jquery-ui/1.11.0/js/datepicker-fr.js"></script>
41
		<script type="text/javascript" src="http://resources.tela-botanica.org/jquery/jquery-ui/1.11.0/js/datepicker-fr.js"></script>
42
		<!-- Jquery Plugins -->
42
		<!-- Jquery Plugins -->
43
		<!-- Jquery Validate : nécessaire pour la validation des formulaires -->
43
		<!-- Jquery Validate : nécessaire pour la validation des formulaires -->
44
		<script type="text/javascript" src="http://resources.tela-botanica.org/jquery/validate/1.11.1/jquery.validate.min.js"></script>
44
		<script type="text/javascript" src="http://resources.tela-botanica.org/jquery/validate/1.11.1/jquery.validate.min.js"></script>
45
		<script type="text/javascript" src="http://resources.tela-botanica.org/jquery/validate/1.11.1/additional-methods.min.js"></script>
45
		<script type="text/javascript" src="http://resources.tela-botanica.org/jquery/validate/1.11.1/additional-methods.min.js"></script>
46
		<script type="text/javascript" src="http://resources.tela-botanica.org/jquery/validate/1.11.1/messages_fr.js"></script>
46
		<script type="text/javascript" src="http://resources.tela-botanica.org/jquery/validate/1.11.1/messages_fr.js"></script>
47
		<!-- Jquery Form :nécessaire pour l'upload des images -->
47
		<!-- Jquery Form :nécessaire pour l'upload des images -->
48
		<script type="text/javascript" src="http://resources.tela-botanica.org/jquery/form/3.51/jquery.form.min.js"></script>
48
		<script type="text/javascript" src="http://resources.tela-botanica.org/jquery/form/3.51/jquery.form.min.js"></script>
49
		<!-- Bootstrap -->
49
		<!-- Bootstrap -->
50
		<script type="text/javascript" src="http://resources.tela-botanica.org/bootstrap/2.3.2/js/bootstrap.min.js"></script>
50
		<script type="text/javascript" src="http://resources.tela-botanica.org/bootstrap/2.3.2/js/bootstrap.min.js"></script>
51
 
51
 
52
		<!-- Javascript : appli saisie -->
52
		<!-- Javascript : appli saisie -->
53
		<script type="text/javascript" src="<?=$url_base?>modules/saisie/squelettes/defaut/js/WidgetSaisie.js"></script>
53
		<script type="text/javascript" src="<?=$url_base?>modules/saisie/squelettes/defaut/js/WidgetSaisie.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
				// OMG un modèle objet !!
57
				// OMG un modèle objet !!
58
				var widget = new WidgetSaisie();
58
				var widget = new WidgetSaisie();
59
 
59
 
60
				// La présence du parametre 'debug' dans l'URL enclenche le débogage
60
				// La présence du parametre 'debug' dans l'URL enclenche le débogage
61
				widget.debug = <?=isset($_GET['debug']) ? 'true' : 'false'?>;
61
				widget.debug = <?=isset($_GET['debug']) ? 'true' : 'false'?>;
62
				// La présence du parametre 'html5' dans l'URL enclenche les fonctions avancées HTML5
62
				// La présence du parametre 'html5' dans l'URL enclenche les fonctions avancées HTML5
63
				widget.html5 = <?=isset($_GET['html5']) ? 'true' : 'false'?>;
63
				widget.html5 = <?=isset($_GET['html5']) ? 'true' : 'false'?>;
64
				// Mot-clé du widget/projet
64
				// Mot-clé du widget/projet
65
				widget.tagProjet = "WidgetSaisie";
65
				widget.tagProjet = "WidgetSaisie";
66
				// Mots-clés à ajouter aux images
66
				// Mots-clés à ajouter aux images
67
				widget.tagImg = "<?=isset($_GET['tag-img']) ? $_GET['tag-img'] : ''?>";
67
				widget.tagImg = "<?=isset($_GET['tag-img']) ? $_GET['tag-img'] : ''?>";
68
				widget.separationTagImg = "<?= isset($_GET['motcle']) && isset($_GET['tag-img']) ? ',' : '' ?>";
68
				widget.separationTagImg = "<?= isset($_GET['motcle']) && isset($_GET['tag-img']) ? ',' : '' ?>";
69
				widget.tagImg = <?=isset($_GET['motcle']) ? "'".$_GET['motcle']."' + widget.separationTagImg + widget.tagImg" : 'widget.tagImg' ?>;
69
				widget.tagImg = <?=isset($_GET['motcle']) ? "'".$_GET['motcle']."' + widget.separationTagImg + widget.tagImg" : 'widget.tagImg' ?>;
70
				// Mots-clés à ajouter aux observations
70
				// Mots-clés à ajouter aux observations
71
				widget.tagObs = "<?=isset($_GET['tag-obs']) ? $_GET['tag-obs'] : ''?>";
71
				widget.tagObs = "<?=isset($_GET['tag-obs']) ? $_GET['tag-obs'] : ''?>";
72
				widget.separationTagObs = "<?= isset($_GET['projet']) && isset($_GET['tag-obs']) ? ',' : '' ?>";
72
				widget.separationTagObs = "<?= isset($_GET['projet']) && isset($_GET['tag-obs']) ? ',' : '' ?>";
73
				widget.tagObs = <?=isset($_GET['projet']) ? "'".$_GET['projet']."' + widget.separationTagObs + widget.tagObs" : 'widget.tagObs' ?>;
73
				widget.tagObs = <?=isset($_GET['projet']) ? "'".$_GET['projet']."' + widget.separationTagObs + widget.tagObs" : 'widget.tagObs' ?>;
74
				// Précharger le formulaire avec les infos d'une observation
74
				// Précharger le formulaire avec les infos d'une observation
75
				widget.obsId = "<?=isset($_GET['id-obs']) ? $_GET['id-obs'] : ''?>";
75
				widget.obsId = "<?=isset($_GET['id-obs']) ? $_GET['id-obs'] : ''?>";
76
				// URL du web service réalisant l'insertion des données dans la base du CEL.
76
				// URL du web service réalisant l'insertion des données dans la base du CEL.
77
				widget.serviceSaisieUrl = "<?=$url_ws_saisie?>";
77
				widget.serviceSaisieUrl = "<?=$url_ws_saisie?>";
78
				// URL du web service permettant de récupérer les infos d'une observation du CEL.
78
				// URL du web service permettant de récupérer les infos d'une observation du CEL.
79
				widget.serviceObsUrl = "<?=$url_ws_obs?>";
79
				widget.serviceObsUrl = "<?=$url_ws_obs?>";
80
				// Code du référentiel utilisé pour les nom scientifiques.
80
				// Code du référentiel utilisé pour les nom scientifiques.
81
				widget.nomSciReferentiel = "<?=$ns_referentiel?>";
81
				widget.nomSciReferentiel = "<?=$ns_referentiel?>";
82
				// Indication de la présence d'une espèce imposée
82
				// Indication de la présence d'une espèce imposée
83
				widget.especeImposee = "<?=$espece_imposee; ?>";
83
				widget.especeImposee = "<?=$espece_imposee; ?>";
84
				// Tableau d'informations sur l'espèce imposée
84
				// Tableau d'informations sur l'espèce imposée
85
				widget.infosEspeceImposee = <?=$infos_espece; ?>;
85
				widget.infosEspeceImposee = <?=$infos_espece; ?>;
86
				// Nombre d'élément dans les listes d'auto-complétion
86
				// Nombre d'élément dans les listes d'auto-complétion
87
				widget.autocompletionElementsNbre = 20;
87
				widget.autocompletionElementsNbre = 20;
88
				// Indication de la présence d'un référentiel imposé
88
				// Indication de la présence d'un référentiel imposé
89
				widget.referentielImpose = "<?=$referentiel_impose; ?>";
89
				widget.referentielImpose = "<?=$referentiel_impose; ?>";
90
				// URL du web service permettant l'auto-complétion des noms scientifiques
90
				// URL du web service permettant l'auto-complétion des noms scientifiques
91
				widget.serviceAutocompletionNomSciUrl = "<?=$url_ws_autocompletion_ns?>?"+
91
				widget.serviceAutocompletionNomSciUrl = "<?=$url_ws_autocompletion_ns?>?"+
92
					"masque={masque}&"+
92
					"masque={masque}&"+
93
					"recherche=etendue&"+
93
					"recherche=etendue&"+
94
					"retour.champs=famille,nom_retenu,nom_retenu_complet,num_taxonomique,nom_retenu.id&"+
94
					"retour.champs=famille,nom_retenu,nom_retenu_complet,num_taxonomique,nom_retenu.id&"+
95
					"ns.structure=au"+"&"+
95
					"ns.structure=au"+"&"+
96
					"navigation.limite=" + widget.autocompletionElementsNbre;
96
					"navigation.limite=" + widget.autocompletionElementsNbre;
97
				// Squelette d'URL du web service permettant l'auto-complétion des noms scientifiques
97
				// Squelette d'URL du web service permettant l'auto-complétion des noms scientifiques
98
				widget.serviceAutocompletionNomSciUrlTpl = "<?=$url_ws_autocompletion_ns_tpl?>?"+
98
				widget.serviceAutocompletionNomSciUrlTpl = "<?=$url_ws_autocompletion_ns_tpl?>?"+
99
					"masque={masque}&"+
99
					"masque={masque}&"+
100
					"recherche=etendue&"+
100
					"recherche=etendue&"+
101
					"retour.champs=famille,nom_retenu,nom_retenu_complet,num_taxonomique,nom_retenu.id&"+
101
					"retour.champs=famille,nom_retenu,nom_retenu_complet,num_taxonomique,nom_retenu.id&"+
102
					"retour.tri=alpharet&"+ // tri "à la CeL"
102
					"retour.tri=alpharet&"+ // tri "à la CeL"
103
					"ns.structure=au"+"&"+
103
					"ns.structure=au"+"&"+
104
					"navigation.limite=" + widget.autocompletionElementsNbre;
104
					"navigation.limite=" + widget.autocompletionElementsNbre;
105
				// Nombre d'observations max autorisé avant transmission
105
				// Nombre d'observations max autorisé avant transmission
106
				widget.obsMaxNbre = 10;
106
				widget.obsMaxNbre = 10;
107
				// Durée d'affichage en milliseconde des messages d'informations
107
				// Durée d'affichage en milliseconde des messages d'informations
108
				widget.dureeMessage = 15000;
108
				widget.dureeMessage = 15000;
109
				// Squelette d'URL du web service de l'annuaire.
109
				// Squelette d'URL du web service de l'annuaire.
110
				widget.serviceAnnuaireIdUrl = "<?=$url_ws_annuaire?>";
110
				widget.serviceAnnuaireIdUrl = "<?=$url_ws_annuaire?>";
111
				// Squelette d'URL du web service d'eFlore fournissant les noms de communes.
111
				// Squelette d'URL du web service d'eFlore fournissant les noms de communes.
112
				widget.serviceNomCommuneUrl = "http://api.tela-botanica.org/service:eflore:0.1/osm/nom-commune?lon={lon}&lat={lat}";
112
				widget.serviceNomCommuneUrl = "http://api.tela-botanica.org/service:eflore:0.1/osm/nom-commune?lon={lon}&lat={lat}";
113
				// Squelette d'URL du web service d'eFlore fournissant les noms de communes hors de France (localisation approximative).
113
				// Squelette d'URL du web service d'eFlore fournissant les noms de communes hors de France (localisation approximative).
114
				widget.serviceNomCommuneUrlAlt = "http://api.tela-botanica.org/service:eflore:0.1/wikipedia/nom-commune?lon={lon}&lat={lat}&nbre=1";
114
				widget.serviceNomCommuneUrlAlt = "http://api.tela-botanica.org/service:eflore:0.1/wikipedia/nom-commune?lon={lon}&lat={lat}&nbre=1";
115
				// URL du marqueur à utiliser dans la carte Google Map
115
				// URL du marqueur à utiliser dans la carte Google Map
116
				widget.googleMapMarqueurUrl = "<?=$url_base?>modules/saisie/squelettes/defaut/img/marqueurs/epingle.png";
116
				widget.googleMapMarqueurUrl = "<?=$url_base?>modules/saisie/squelettes/defaut/img/marqueurs/epingle.png";
117
				// URL de l'icône du chargement en cours
117
				// URL de l'icône du chargement en cours
118
				widget.chargementIconeUrl = "<?=$url_base?>modules/saisie/squelettes/defaut/img/icones/chargement.gif";
118
				widget.chargementIconeUrl = "<?=$url_base?>modules/saisie/squelettes/defaut/img/icones/chargement.gif";
119
				// URL de l'icône du chargement en cours d'une image
119
				// URL de l'icône du chargement en cours d'une image
120
				widget.chargementImageIconeUrl = "<?=$url_base?>modules/saisie/squelettes/defaut/img/icones/chargement-image.gif";
120
				widget.chargementImageIconeUrl = "<?=$url_base?>modules/saisie/squelettes/defaut/img/icones/chargement-image.gif";
121
				// URL de l'icône du calendrier
121
				// URL de l'icône du calendrier
122
				widget.calendrierIconeUrl = "<?=$url_base?>modules/saisie/squelettes/defaut/img/icones/calendrier.png";
122
				widget.calendrierIconeUrl = "<?=$url_base?>modules/saisie/squelettes/defaut/img/icones/calendrier.png";
123
				// URL de l'icône pour une photo manquante
123
				// URL de l'icône pour une photo manquante
124
				widget.pasDePhotoIconeUrl = "<?=$url_base?>modules/saisie/squelettes/defaut/img/icones/pasdephoto.png";
124
				widget.pasDePhotoIconeUrl = "<?=$url_base?>modules/saisie/squelettes/defaut/img/icones/pasdephoto.png";
125
 
125
 
126
				// Initialisation du bousin
126
				// Initialisation du bousin
127
				widget.init();
127
				widget.init();
128
			});
128
			});
129
		//]]>
129
		//]]>
130
		</script>
130
		</script>
131
 
131
 
132
		<!-- CSS -->
132
		<!-- CSS -->
133
		<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" />
133
		<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" />
134
		<link href="http://resources.tela-botanica.org/bootstrap/2.0.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" media="screen" />
134
		<link href="http://resources.tela-botanica.org/bootstrap/2.0.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" media="screen" />
135
		<link href="http://resources.tela-botanica.org/bootstrap/2.0.2/css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css" media="screen" />
135
		<link href="http://resources.tela-botanica.org/bootstrap/2.0.2/css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css" media="screen" />
136
		<link href="<?=$url_base?>modules/saisie/squelettes/defaut/css/<?=isset($_GET['style']) ? $_GET['style'] : 'defaut'?>.css" rel="stylesheet" type="text/css" media="screen" />
136
		<link href="<?=$url_base?>modules/saisie/squelettes/defaut/css/<?=isset($_GET['style']) ? $_GET['style'] : 'defaut'?>.css" rel="stylesheet" type="text/css" media="screen" />
137
	
137
	
138
		<script>
138
		<script>
139
		  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
139
		  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
140
		  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
140
		  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
141
		  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
141
		  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
142
		  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
142
		  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
143
		
143
		
144
		  ga('create', 'UA-20092557-1', 'auto');
144
		  ga('create', 'UA-20092557-1', 'auto');
145
		  ga('require', 'displayfeatures');
145
		  ga('require', 'displayfeatures');
146
		  ga('send', 'pageview');
146
		  ga('send', 'pageview');
147
		
147
		
148
		</script>
148
		</script>
149
	</head>
149
	</head>
150
 
150
 
151
	<body data-spy="scroll">
151
	<body data-spy="scroll">
152
		<div class="container">
152
		<div class="container">
153
			<div class="row-fluid">
153
			<div class="row-fluid">
154
				<div class="span6 page-header">
154
				<div class="span6 page-header">
155
					<div class="row">
155
					<div class="row">
156
						<div class="span6">
156
						<div class="span6">
157
							<h1>
157
							<h1>
158
								<?php if($logo != 'defaut' && $logo != '0') { ?>
158
								<?php if($logo != 'defaut' && $logo != '0') { ?>
159
									<img id="logo-titre" class="span1" src="<?= $logo ?>" alt="Logo" />
159
									<img id="logo-titre" class="span1" src="<?= $logo ?>" alt="Logo" />
160
								<?php } else if($logo == 'defaut') { ?>
160
								<?php } else if($logo == 'defaut') { ?>
161
									<img id="logo-titre" class="span1" src="http://resources.tela-botanica.org/tb/img/256x256/logo_sans_mots.png" alt="Tela Botanica" />
161
									<img id="logo-titre" class="span1" src="http://resources.tela-botanica.org/tb/img/256x256/logo_sans_mots.png" alt="Tela Botanica" />
162
								<?php } ?>
162
								<?php } ?>
163
								<?php if($titre != 'defaut') { ?>
163
								<?php if($titre != 'defaut') { ?>
164
									<?= $titre; ?>
164
									<?= $titre; ?>
165
								<?php } else { ?>
165
								<?php } else { ?>
166
									Quick observations input
166
									Quick observations input
167
								<?php } ?>
167
								<?php } ?>
168
							</h1>
168
							</h1>
169
						</div>
169
						</div>
170
					</div>
170
					</div>
171
					<div class="row">
171
					<div class="row">
172
						<div class="span6">
172
						<div class="span6">
173
							<p>
173
							<p>
174
								This tool allows you to share your observations in a simple way with the
174
								This tool allows you to share your observations in a simple way with the
175
								<a target="_blank" href="http://www.tela-botanica.org/site:accueil">Tela Botanica network</a> (under <a target="_blank" href="http://www.tela-botanica.org/page:licence?langue=fr">CC-BY-SA license</a>).
175
								<a target="_blank" href="http://www.tela-botanica.org/site:accueil">Tela Botanica network</a> (under <a target="_blank" href="http://www.tela-botanica.org/page:licence?langue=fr">CC-BY-SA license</a>).
176
								Make sure to identify yourself so that you can later find and manage your data in
176
								Make sure to identify yourself so that you can later find and manage your data in
177
								<a target="_blank" href="http://www.tela-botanica.org/appli:cel?lang=en">your "Carnet en Ligne" (online notebook)</a>.
177
								<a target="_blank" href="http://www.tela-botanica.org/appli:cel?lang=en">your "Carnet en Ligne" (online notebook)</a>.
178
								Create up to 10 observations (with max 10MB images) then sare them using the 'share' button.
178
								Create up to 10 observations (with max 10MB images) then sare them using the 'share' button.
179
								They will appear immediatly on the <a target="_blank" href="http://www.tela-botanica.org/site:botanique">maps and photo galleries </a> on the website.
179
								They will appear immediatly on the <a target="_blank" href="http://www.tela-botanica.org/site:botanique">maps and photo galleries </a> on the website.
180
							</p>
180
							</p>
181
							<p class="discretion">
181
							<p class="discretion">
182
								For any question on remark,
182
								For any question on remark,
183
								<a href="<?= $url_remarques ?>?lang=en&service=cel&pageSource=<?php echo urlencode('http://'.$_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF'].'?'.$_SERVER['QUERY_STRING']); ?>"
183
								<a href="<?= $url_remarques ?>?lang=en&service=cel&pageSource=<?php echo urlencode('http://'.$_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF'].'?'.$_SERVER['QUERY_STRING']); ?>"
184
								  target="_blank"
184
								  target="_blank"
185
								  onclick="javascript:window.open(this.getAttribute('href'), 'Tela Botanica - Remarques', config='height=700, width=640, scrollbars=yes, resizable=yes'); return false;">
185
								  onclick="javascript:window.open(this.getAttribute('href'), 'Tela Botanica - Remarques', config='height=700, width=640, scrollbars=yes, resizable=yes'); return false;">
186
								  contact us</a>
186
								  contact us</a>
187
 
187
 
188
							</p>
188
							</p>
189
							<p class="discretion">
189
							<p class="discretion">
190
								Once you get familiar with the interface, you can click this button to disable help.
190
								Once you get familiar with the interface, you can click this button to disable help.
191
								<button id="btn-aide" class="btn btn-mini btn-success">
191
								<button id="btn-aide" class="btn btn-mini btn-success">
192
									<span class="icon-question-sign icon-white"></span>
192
									<span class="icon-question-sign icon-white"></span>
193
									<span id="btn-aide-txt" >Disable help</span>
193
									<span id="btn-aide-txt" >Disable help</span>
194
								</button>
194
								</button>
195
							</p>
195
							</p>
196
						</div>
196
						</div>
197
					</div>
197
					</div>
198
				</div>
198
				</div>
199
 
199
 
200
				<div class="span6">
200
				<div class="span6">
201
					<div class="well">
201
					<div class="well">
202
						<h2>Observer</h2>
202
						<h2>Observer</h2>
203
						<form id="form-observateur" action="#" class="" autocomplete="on">
203
						<form id="form-observateur" action="#" class="" autocomplete="on">
204
							<div class="row-fluid">
204
							<div class="row-fluid">
205
								<div class="span6 has-tooltip" data-placement="right"
205
								<div class="span6 has-tooltip" data-placement="right"
206
									title="Enter the email address you used to sign-up at Tela Botanica.
206
									title="Enter the email address you used to sign-up at Tela Botanica.
207
										No problem if you don't have an account yet, you can sign-up later.
207
										No problem if you don't have an account yet, you can sign-up later.
208
										Some more information will be asked: first name and name">
208
										Some more information will be asked: first name and name">
209
									<label for="courriel"
209
									<label for="courriel"
210
										title="plase enter your email address.">
210
										title="plase enter your email address.">
211
										<strong class="obligatoire">*</strong> Email address
211
										<strong class="obligatoire">*</strong> Email address
212
									</label>
212
									</label>
213
									<div class="input-prepend">
213
									<div class="input-prepend">
214
										<span class="add-on"><i class="icon-envelope"></i></span>
214
										<span class="add-on"><i class="icon-envelope"></i></span>
215
										<input id="courriel" class="input-large" name="courriel" type="text"/>
215
										<input id="courriel" class="input-large" name="courriel" type="text"/>
216
										<input id="id_utilisateur" name="id_utilisateur" type="hidden"/>
216
										<input id="id_utilisateur" name="id_utilisateur" type="hidden"/>
217
									</div>
217
									</div>
218
								</div>
218
								</div>
219
								<div id="zone-courriel-confirmation" class="span6 hidden">
219
								<div id="zone-courriel-confirmation" class="span6 hidden">
220
									<label for="courriel_confirmation"
220
									<label for="courriel_confirmation"
221
										title="Please confirm your email address.">
221
										title="Please confirm your email address.">
222
										<strong class="obligatoire">*</strong> Email address (confirmation)
222
										<strong class="obligatoire">*</strong> Email address (confirmation)
223
									</label>
223
									</label>
224
									<div class="input-prepend">
224
									<div class="input-prepend">
225
										<span class="add-on">
225
										<span class="add-on">
226
											<i class="icon-envelope"></i>
226
											<i class="icon-envelope"></i>
227
										</span><input id="courriel_confirmation" class="input-large" name="courriel_confirmation" type="text"/>
227
										</span><input id="courriel_confirmation" class="input-large" name="courriel_confirmation" type="text"/>
228
									</div>
228
									</div>
229
								</div>
229
								</div>
230
							</div>
230
							</div>
231
							<div id="zone-prenom-nom" class="row-fluid hidden">
231
							<div id="zone-prenom-nom" class="row-fluid hidden">
232
								<div class="span6">
232
								<div class="span6">
233
									<label for="prenom">First name</label>
233
									<label for="prenom">First name</label>
234
									<div>
234
									<div>
235
										<input id="prenom" name="prenom" class="span3" type="text"/>
235
										<input id="prenom" name="prenom" class="span3" type="text"/>
236
									</div>
236
									</div>
237
								</div>
237
								</div>
238
								<div class="span6">
238
								<div class="span6">
239
									<label for="nom">Name</label>
239
									<label for="nom">Name</label>
240
									<div>
240
									<div>
241
										<input id="nom" name="nom"  class="span3" type="text"/>
241
										<input id="nom" name="nom"  class="span3" type="text"/>
242
									</div>
242
									</div>
243
								</div>
243
								</div>
244
							</div>
244
							</div>
245
						</form>
245
						</form>
246
					</div>
246
					</div>
247
				</div>
247
				</div>
248
			</div>
248
			</div>
249
			<!-- Messages d'erreur du formulaire-->
249
			<!-- Messages d'erreur du formulaire-->
250
			<div class="row">
250
			<div class="row">
251
				<div class="zone-alerte span6 offset3">
251
				<div class="zone-alerte span6 offset3">
252
					<div id="dialogue-bloquer-copier-coller" class="alert alert-info alert-block" style="display:none;">
252
					<div id="dialogue-bloquer-copier-coller" class="alert alert-info alert-block" style="display:none;">
253
						<a class="close">×</a>
253
						<a class="close">×</a>
254
						<h4 class="alert-heading">Information : copy/paste</h4>
254
						<h4 class="alert-heading">Information : copy/paste</h4>
255
						<p>
255
						<p>
256
							Please do not copy / paste your email address.<br/>
256
							Please do not copy / paste your email address.<br/>
257
							Double input allows to avoid mistakes.
257
							Double input allows to avoid mistakes.
258
						</p>
258
						</p>
259
					</div>
259
					</div>
260
					<div id="dialogue-courriel-introuvable" class="alert alert-info alert-block" style="display:none;">
260
					<div id="dialogue-courriel-introuvable" class="alert alert-info alert-block" style="display:none;">
261
						<a class="close">×</a>
261
						<a class="close">×</a>
262
						<h4 class="alert-heading">Information : cannot find your email</h4>
262
						<h4 class="alert-heading">Information : cannot find your email</h4>
263
						<p>
263
						<p>
264
							You don't seem to have an account associated to this email address.<br/>
264
							You don't seem to have an account associated to this email address.<br/>
265
							Plese complete the following fields or type the email associated to your account.<br/>
265
							Plese complete the following fields or type the email associated to your account.<br/>
266
							To find your observations later in the <a href="http://www.tela-botanica.org/appli:cel?lang=en">"Carnet en ligne" (Online notebook)</a>,
266
							To find your observations later in the <a href="http://www.tela-botanica.org/appli:cel?lang=en">"Carnet en ligne" (Online notebook)</a>,
267
							you will have to <a href="http://www.tela-botanica.org/page:inscription">sign-up to Tela Botanica</a>.
267
							you will have to <a href="http://www.tela-botanica.org/page:inscription">sign-up to Tela Botanica</a>.
268
						</p>
268
						</p>
269
					</div>
269
					</div>
270
					<div id="dialogue-google-map" class="alert alert-info alert-block" style="display: none;">
270
					<div id="dialogue-google-map" class="alert alert-info alert-block" style="display: none;">
271
						<a class="close">×</a>
271
						<a class="close">×</a>
272
						<h4 class="alert-heading">Information about Google Maps</h4>
272
						<h4 class="alert-heading">Information about Google Maps</h4>
273
						<div class="contenu"></div>
273
						<div class="contenu"></div>
274
					</div>
274
					</div>
275
				</div>
275
				</div>
276
			</div>
276
			</div>
277
			<div class="row-fluid">
277
			<div class="row-fluid">
278
				<div class="span12">
278
				<div class="span12">
279
					<div class="well">
279
					<div class="well">
280
						<div class="row-fluid">
280
						<div class="row-fluid">
281
							<div class="span6">
281
							<div class="span6">
282
								<div>
282
								<div>
283
									<div class="row-fluid">
283
									<div class="row-fluid">
284
										<div class="span12">
284
										<div class="span12">
285
											<h2>Location of the observation</h2>
285
											<h2>Location of the observation</h2>
286
										</div>
286
										</div>
287
									</div>
287
									</div>
288
									<div class="row-fluid">
288
									<div class="row-fluid">
289
										<div class="span4">
289
										<div class="span4">
290
											<label for="map_canvas" title="Please localize the observation">
290
											<label for="map_canvas" title="Please localize the observation">
291
												Geolocalization
291
												Geolocalization
292
											</label>
292
											</label>
293
										</div>
293
										</div>
294
										<div class="span8 droite">
294
										<div class="span8 droite">
295
											<form id="form-carte-recherche" class="form-search form-horizontal" action="#" >
295
											<form id="form-carte-recherche" class="form-search form-horizontal" action="#" >
296
												<div class="control-group">
296
												<div class="control-group">
297
													<label for="carte-recherche">Search</label>
297
													<label for="carte-recherche">Search</label>
298
													<input id="carte-recherche" class="search-query has-tooltip" type="text" value=""
298
													<input id="carte-recherche" class="search-query has-tooltip" type="text" value=""
299
														title="Allows to center the map on the requested location."
299
														title="Allows to center the map on the requested location."
300
														placeholder="Ex: France, Paris, Rue de Rivoli..."/>
300
														placeholder="Ex: France, Paris, Rue de Rivoli..."/>
301
												</div>
301
												</div>
302
											</form>
302
											</form>
303
										</div>
303
										</div>
304
									</div>
304
									</div>
305
									<div class="row-fluid">
305
									<div class="row-fluid">
306
										<div class="span12">
306
										<div class="span12">
307
											<div id="map-canvas" class="has-tooltip"
307
											<div id="map-canvas" class="has-tooltip"
308
												title="You can click on the map to move the marker representing
308
												title="You can click on the map to move the marker representing
309
													your station, or drag-n-drop it on the desired location."></div>
309
													your station, or drag-n-drop it on the desired location."></div>
310
										</div>
310
										</div>
311
									</div>
311
									</div>
312
									<div class="row-fluid">
312
									<div class="row-fluid">
313
										<label for="coordonnees-geo" class="span7">
313
										<label for="coordonnees-geo" class="span7">
314
											<a href="#" class="afficher-coord">Display</a>
314
											<a href="#" class="afficher-coord">Display</a>
315
											<a href="#" class="afficher-coord" style="display:none;">Hide</a>
315
											<a href="#" class="afficher-coord" style="display:none;">Hide</a>
316
											the geographical coordinates
316
											the geographical coordinates
317
											<span id="lat-lon-info" class="info has-tooltip"
317
											<span id="lat-lon-info" class="info has-tooltip"
318
												title="World geodesic system, 1984 revision - Non-projected coordinates">
318
												title="World geodesic system, 1984 revision - Non-projected coordinates">
319
												(WGS84)
319
												(WGS84)
320
											</span>
320
											</span>
321
										</label>
321
										</label>
322
										<div id="info-commune" class="span5">
322
										<div id="info-commune" class="span5">
323
								    		<span for="marqueur-commune">City / area : </span>
323
								    		<span for="marqueur-commune">City / area : </span>
324
								    		<span id="marqueur-commune">
324
								    		<span id="marqueur-commune">
325
								    			<span id="commune-nom" class="commune-info"></span>
325
								    			<span id="commune-nom" class="commune-info"></span>
326
								    			(<span id="commune-code-insee" class="commune-info has-tooltip"
326
								    			(<span id="commune-code-insee" class="commune-info has-tooltip"
327
								    				title="INSEE city code (France)"></span>)
327
								    				title="INSEE city code (France)"></span>)
328
								    		</span>
328
								    		</span>
329
							    		</div>
329
							    		</div>
330
									</div>
330
									</div>
331
									<form id="form-station" class="control-group" action="#" enctype="multipart/form-data" autocomplete="on">
331
									<form id="form-station" class="control-group" action="#" enctype="multipart/form-data" autocomplete="on">
332
										<div id="coordonnees-geo" class="well" style="display:none;">
332
										<div id="coordonnees-geo" class="well" style="display:none;">
333
											<div class="row-fluid form-inline">
333
											<div class="row-fluid form-inline">
334
												<div id="coord-lat" class="span4">
334
												<div id="coord-lat" class="span4">
335
													<label for="latitude">Latitude</label>
335
													<label for="latitude">Latitude</label>
336
													<div>
336
													<div>
337
														<input id="latitude" class="input-mini" name="latitude" type="text" value=""/>
337
														<input id="latitude" class="input-mini" name="latitude" type="text" value=""/>
338
													</div>
338
													</div>
339
												</div>
339
												</div>
340
												<div id="coord-lng" class="span4">
340
												<div id="coord-lng" class="span4">
341
													<label for="longitude">Longitude</label>
341
													<label for="longitude">Longitude</label>
342
													<div>
342
													<div>
343
														<input id="longitude" class="input-mini" name="longitude" type="text" value=""/>
343
														<input id="longitude" class="input-mini" name="longitude" type="text" value=""/>
344
													</div>
344
													</div>
345
												</div>
345
												</div>
346
												<div class="span1">
346
												<div class="span1">
347
													<div>
347
													<div>
348
														<input id="geolocaliser" type="button" value="Show on the map"
348
														<input id="geolocaliser" type="button" value="Show on the map"
349
															class="has-tooltip"
349
															class="has-tooltip"
350
															title="Centers the map on the specified coordinates."/>
350
															title="Centers the map on the specified coordinates."/>
351
													</div>
351
													</div>
352
												</div>
352
												</div>
353
									    	</div>
353
									    	</div>
354
										</div>
354
										</div>
355
										<div class="row-fluid">
355
										<div class="row-fluid">
356
											<div class="span4 has-tooltip"
356
											<div class="span4 has-tooltip"
357
												title="Location name, more precise than the city, used locally." >
357
												title="Location name, more precise than the city, used locally." >
358
												<label for="lieudit">Place</label>
358
												<label for="lieudit">Place</label>
359
												<div>
359
												<div>
360
													<input type="text" id="lieudit" class="span2" name="lieudit"/>
360
													<input type="text" id="lieudit" class="span2" name="lieudit"/>
361
												</div>
361
												</div>
362
											</div>
362
											</div>
363
											<div class="span4 has-tooltip"
363
											<div class="span4 has-tooltip"
364
												title="Precise location of the observation describing a homogeneous ecological unit (ex: the meadow behind the house)." >
364
												title="Precise location of the observation describing a homogeneous ecological unit (ex: the meadow behind the house)." >
365
												<label for="station">Station</label>
365
												<label for="station">Station</label>
366
												<div>
366
												<div>
367
													<input type="text" id="station" class="span2" name="station"/>
367
													<input type="text" id="station" class="span2" name="station"/>
368
												</div>
368
												</div>
369
											</div>
369
											</div>
370
											<div class="span4 has-tooltip"
370
											<div class="span4 has-tooltip"
371
												title="Environment type (ex: humid prairie).">
371
												title="Environment type (ex: humid prairie).">
372
												<label for="milieu">Environment</label>
372
												<label for="milieu">Environment</label>
373
												<div>
373
												<div>
374
													<input type="text" id="milieu" class="span2" name="milieu" />
374
													<input type="text" id="milieu" class="span2" name="milieu" />
375
												</div>
375
												</div>
376
											</div>
376
											</div>
377
										</div>
377
										</div>
378
									</form>
378
									</form>
379
								</div>
379
								</div>
380
							</div>
380
							</div>
381
							<div class="span6">
381
							<div class="span6">
382
								<form id="form-obs" action="#" autocomplete="on">
382
								<form id="form-obs" action="#" autocomplete="on">
383
									<h2>Observation</h2>
383
									<h2>Observation</h2>
384
									<?php if(!$referentiel_impose && !$espece_imposee) : ?>
384
									<?php if(!$referentiel_impose && !$espece_imposee) : ?>
385
										<div class="row-fluid">
385
										<div class="row-fluid">
386
											<div class="has-tooltip"
386
											<div class="has-tooltip"
387
												title="Select the referential assocaited to your observation">
387
												title="Select the referential assocaited to your observation">
388
												<label for="referentiel" title="Réferentiel">
388
												<label for="referentiel" title="Réferentiel">
389
													Referential
389
													Referential
390
												</label>
390
												</label>
391
												<span class="input-prepend">
391
												<span class="input-prepend">
392
													<span id="referentiel-icone" class="add-on"><i class="icon-book"></i></span>
392
													<span id="referentiel-icone" class="add-on"><i class="icon-book"></i></span>
393
													<select id="referentiel" autocomplete="off">
393
													<select id="referentiel" autocomplete="off">
394
														<option value="bdtfx" selected="selected" title="Tracheophytes of metropolitan France">Metropolitan France (BDTFX)</option>
394
														<option value="bdtfxr" selected="selected" title="Tracheophytes of metropolitan France">Metropolitan France (short index)</option>
-
 
395
														<option value="bdtfx" title="Tracheophytes of metropolitan France">Metropolitan France (BDTFX)</option>
395
														<option value="bdtxa" title="Tracheophytes of french Antilles">French Antilles (BDTXA)</option>
396
														<option value="bdtxa" title="Tracheophytes of french Antilles">French Antilles (BDTXA)</option>
396
														<option value="bdtre" title="Tracheophytes of La Réunion">Réunion Island (BDTRE)</option>
397
														<option value="bdtre" title="Tracheophytes of La Réunion">Réunion Island (BDTRE)</option>
397
														<option value="isfan" title="Northern Africa">Northern Africa (ISFAN)</option>
398
														<option value="isfan" title="Northern Africa">Northern Africa (ISFAN)</option>
398
														<option value="apd" title="Western and central Africa">Western and central Africa (APD)</option>
399
														<option value="apd" title="Western and central Africa">Western and central Africa (APD)</option>
399
														<option value="lbf" title="Lebanon">Lebanon (LBF)</option>
400
														<option value="lbf" title="Lebanon">Lebanon (LBF)</option>
400
														<option value="autre" title="Other/Unknown">Other/Unknown</option>
401
														<option value="autre" title="Other/Unknown">Other/Unknown</option>
401
													</select>
402
													</select>
402
												</span>
403
												</span>
403
											</div>
404
											</div>
404
										</div>
405
										</div>
405
									<?php endif; ?>
406
									<?php endif; ?>
406
									<div class="row-fluid">
407
									<div class="row-fluid">
407
										<div class="span4 has-tooltip"
408
										<div class="span4 has-tooltip"
408
											title="Click the calendar icon to select the date.">
409
											title="Click the calendar icon to select the date.">
409
											<label for="date" title="Please type the date of observation, using dd/mm/yyyy format">
410
											<label for="date" title="Please type the date of observation, using dd/mm/yyyy format">
410
												Observation date
411
												Observation date
411
											</label>
412
											</label>
412
											<div class="input-prepend">
413
											<div class="input-prepend">
413
												<span id="date-icone" class="add-on"></span><input id="date"
414
												<span id="date-icone" class="add-on"></span><input id="date"
414
													class="input-small" name="date" type="text"
415
													class="input-small" name="date" type="text"
415
													placeholder="dd/mm/yyyy" />
416
													placeholder="dd/mm/yyyy" />
416
											</div>
417
											</div>
417
										</div>
418
										</div>
418
										<div id="taxon-input-groupe" class="span8 has-tooltip"
419
										<div id="taxon-input-groupe" class="span8 has-tooltip"
419
											title="Select a species in the list to link
420
											title="Select a species in the list to link
420
												the name to the selected referential. If you wish you can
421
												the name to the selected referential. If you wish you can
421
												also specify a name that is not in any referential
422
												also specify a name that is not in any referential
422
												(Ex. : 'purple flower' or 'viola sinensis???')." >
423
												(Ex. : 'purple flower' or 'viola sinensis???')." >
423
											<label for="taxon" title="Choose a species">
424
											<label for="taxon" title="Choose a species">
424
												<strong class="obligatoire">*</strong>
425
												<strong class="obligatoire">*</strong>
425
												Species <?= $referentiel_impose ? '('.$ns_referentiel.')' : '' ?> <em>(or clue about the plant)</em>
426
												Species <?= $referentiel_impose ? '('.$ns_referentiel.')' : '' ?> <em>(or clue about the plant)</em>
426
											</label>
427
											</label>
427
											<div class="input-prepend">
428
											<div class="input-prepend">
428
												<span class="add-on">
429
												<span class="add-on">
429
													<i class="icon-leaf"></i>
430
													<i class="icon-leaf"></i>
430
												</span><input type="text" id="taxon" name="taxon" value="<?= $nom_sci_espece_defaut; ?>" />
431
												</span><input type="text" id="taxon" name="taxon" value="<?= $nom_sci_espece_defaut; ?>" />
431
											</div>
432
											</div>
432
										</div>
433
										</div>
433
									</div>
434
									</div>
434
									<div class="row-fluid">
435
									<div class="row-fluid">
435
										<div class="span12">
436
										<div class="span12">
436
											<label for="notes">Comments</label>
437
											<label for="notes">Comments</label>
437
											<div>
438
											<div>
438
												<textarea id="notes" class="span6" rows="7" name="notes"
439
												<textarea id="notes" class="span6" rows="7" name="notes"
439
													placeholder="you can add comments and notes to your observation (altitude, plant size...)"></textarea>
440
													placeholder="you can add comments and notes to your observation (altitude, plant size...)"></textarea>
440
											</div>
441
											</div>
441
										</div>
442
										</div>
442
									</div>
443
									</div>
443
								</form>
444
								</form>
444
								<form id="form-upload" class="form-horizontal" action="<?= $url_ws_upload ?>"
445
								<form id="form-upload" class="form-horizontal" action="<?= $url_ws_upload ?>"
445
									method="post" enctype="multipart/form-data">
446
									method="post" enctype="multipart/form-data">
446
									<h2>Image(s) of this plant</h2>
447
									<h2>Image(s) of this plant</h2>
447
									<strong>Add an image</strong>
448
									<strong>Add an image</strong>
448
									<p class="miniature-info" class="discretion help-inline">Photos must be in JPEG format and must not exceed 5MB each.</p>
449
									<p class="miniature-info" class="discretion help-inline">Photos must be in JPEG format and must not exceed 5MB each.</p>
449
									<div id ="photos-conteneur">
450
									<div id ="photos-conteneur">
450
										<input type="file" id="fichier" name="fichier" accept="image/jpeg" />
451
										<input type="file" id="fichier" name="fichier" accept="image/jpeg" />
451
										<input type="hidden" name="MAX_FILE_SIZE" value="5242880"/>
452
										<input type="hidden" name="MAX_FILE_SIZE" value="5242880"/>
452
										<div id="miniatures">
453
										<div id="miniatures">
453
										</div>
454
										</div>
454
										<p class="miniature-msg" class="span12">&nbsp;</p>
455
										<p class="miniature-msg" class="span12">&nbsp;</p>
455
									</div>
456
									</div>
456
								</form>
457
								</form>
457
							</div>
458
							</div>
458
							<div class="row-fluid">
459
							<div class="row-fluid">
459
								<div class="span12 centre has-tooltip"
460
								<div class="span12 centre has-tooltip"
460
									title="Once the fields are filled, click this button to
461
									title="Once the fields are filled, click this button to
461
										add your observation to the to-be-transmitted list.">
462
										add your observation to the to-be-transmitted list.">
462
									<button id="ajouter-obs" class="btn btn-primary btn-large" type="button">
463
									<button id="ajouter-obs" class="btn btn-primary btn-large" type="button">
463
										Create
464
										Create
464
									</button>
465
									</button>
465
								</div>
466
								</div>
466
							</div>
467
							</div>
467
						</div>
468
						</div>
468
					</div>
469
					</div>
469
				</div>
470
				</div>
470
			</div>
471
			</div>
471
			<!-- Messages d'erreur du formulaire-->
472
			<!-- Messages d'erreur du formulaire-->
472
			<div class="row">
473
			<div class="row">
473
				<div class="zone-alerte span6 offset3">
474
				<div class="zone-alerte span6 offset3">
474
					<div id="dialogue-bloquer-creer-obs" class="alert alert-warning alert-block" style="display: none;">
475
					<div id="dialogue-bloquer-creer-obs" class="alert alert-warning alert-block" style="display: none;">
475
						<a class="close">×</a>
476
						<a class="close">×</a>
476
						<h4 class="alert-heading">Information : 10 observations maximum</h4>
477
						<h4 class="alert-heading">Information : 10 observations maximum</h4>
477
						<p>
478
						<p>
478
							You just added your 10th observation.<br/>
479
							You just added your 10th observation.<br/>
479
							To add some more, you need to transmit the first 10 by clicking the button below.
480
							To add some more, you need to transmit the first 10 by clicking the button below.
480
						</p>
481
						</p>
481
					</div>
482
					</div>
482
				</div>
483
				</div>
483
				<div class="zone-alerte span6 offset3">
484
				<div class="zone-alerte span6 offset3">
484
					<div id="dialogue-form-invalide" class="alert alert-warning alert-block" style="display: none;">
485
					<div id="dialogue-form-invalide" class="alert alert-warning alert-block" style="display: none;">
485
						<a class="close">×</a>
486
						<a class="close">×</a>
486
						<h4 class="alert-heading">Information : fields with errors</h4>
487
						<h4 class="alert-heading">Information : fields with errors</h4>
487
						<p>
488
						<p>
488
							Some of the form fields contain errors.<br/>
489
							Some of the form fields contain errors.<br/>
489
							Please check your data.
490
							Please check your data.
490
						</p>
491
						</p>
491
					</div>
492
					</div>
492
				</div>
493
				</div>
493
			</div>
494
			</div>
494
			<!-- Affiche le tableau récapitualif des observations ajoutées -->
495
			<!-- Affiche le tableau récapitualif des observations ajoutées -->
495
			<div id="zone-liste-obs" class="row-fluid">
496
			<div id="zone-liste-obs" class="row-fluid">
496
				<div class="span12">
497
				<div class="span12">
497
					<div class="well">
498
					<div class="well">
498
						<div class="row-fluid">
499
						<div class="row-fluid">
499
							<div class="span8">
500
							<div class="span8">
500
								<h2>Observations to be transmitted : <span class="obs-nbre">0</span></h2>
501
								<h2>Observations to be transmitted : <span class="obs-nbre">0</span></h2>
501
							</div>
502
							</div>
502
							<div class="span4 droite">
503
							<div class="span4 droite">
503
								<button id="transmettre-obs" class="btn btn-primary btn-large has-tooltip"
504
								<button id="transmettre-obs" class="btn btn-primary btn-large has-tooltip"
504
									type="button" disabled="disabled"
505
									type="button" disabled="disabled"
505
									title="Adds the observations below to your Carnet en Ligne (Online notebook) and makes them public.">
506
									title="Adds the observations below to your Carnet en Ligne (Online notebook) and makes them public.">
506
									Transmit
507
									Transmit
507
								</button>
508
								</button>
508
							</div>
509
							</div>
509
						</div>
510
						</div>
510
						<div id="liste-obs" ></div>
511
						<div id="liste-obs" ></div>
511
						<div class="row">
512
						<div class="row">
512
							<div class="zone-alerte span6 offset3">
513
							<div class="zone-alerte span6 offset3">
513
								<div id="dialogue-zero-obs" class="alert alert-block" style="display: none;">
514
								<div id="dialogue-zero-obs" class="alert alert-block" style="display: none;">
514
									<a class="close">×</a>
515
									<a class="close">×</a>
515
									<h4 class="alert-heading">Warning : no observation</h4>
516
									<h4 class="alert-heading">Warning : no observation</h4>
516
									<p>Please add observations before transmission.</p>
517
									<p>Please add observations before transmission.</p>
517
								</div>
518
								</div>
518
 
519
 
519
								<div id="dialogue-obs-transaction-ok" class="alert alert-success alert-block" style="display: none;"">
520
								<div id="dialogue-obs-transaction-ok" class="alert alert-success alert-block" style="display: none;"">
520
									<a class="close">×</a>
521
									<a class="close">×</a>
521
									<h4 class="alert-heading">Information : transmitting observations</h4>
522
									<h4 class="alert-heading">Information : transmitting observations</h4>
522
									<div class="alert-txt"></div>
523
									<div class="alert-txt"></div>
523
								</div>
524
								</div>
524
 
525
 
525
								<div id="dialogue-obs-transaction-ko" class="alert alert-error alert-block" style="display: none;">
526
								<div id="dialogue-obs-transaction-ko" class="alert alert-error alert-block" style="display: none;">
526
									<a class="close">×</a>
527
									<a class="close">×</a>
527
									<h4 class="alert-heading">Error while transmitting observations</h4>
528
									<h4 class="alert-heading">Error while transmitting observations</h4>
528
									<div class="alert-txt"></div>
529
									<div class="alert-txt"></div>
529
								</div>
530
								</div>
530
							</div>
531
							</div>
531
						</div>
532
						</div>
532
 
533
 
533
					</div>
534
					</div>
534
				</div>
535
				</div>
535
			</div>
536
			</div>
536
 
537
 
537
			<footer class="row-fluid">
538
			<footer class="row-fluid">
538
				<p class="span12">&copy; Tela Botanica 2015</p>
539
				<p class="span12">&copy; Tela Botanica 2015</p>
539
			</footer>
540
			</footer>
540
 
541
 
541
			<!-- Fenêtres modales -->
542
			<!-- Fenêtres modales -->
542
			<div id="chargement" class="modal-fenetre" style="display:none;">
543
			<div id="chargement" class="modal-fenetre" style="display:none;">
543
				<div id="chargement-centrage" class="modal-contenu">
544
				<div id="chargement-centrage" class="modal-contenu">
544
					<div class="progress progress-striped active">
545
					<div class="progress progress-striped active">
545
			 			<div id="barre-progression-upload" class="bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="10" style="">
546
			 			<div id="barre-progression-upload" class="bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="10" style="">
546
			    			<span class="sr-only">0/10 observations transmitted</span>
547
			    			<span class="sr-only">0/10 observations transmitted</span>
547
			  			</div>
548
			  			</div>
548
					</div>
549
					</div>
549
					<p id="chargement-txt" style="color:white;font-size:1.5em;">
550
					<p id="chargement-txt" style="color:white;font-size:1.5em;">
550
						Transmitting observations...<br />
551
						Transmitting observations...<br />
551
						This might take several minutes depending on the size of images and
552
						This might take several minutes depending on the size of images and
552
						the number of observations to transmit.
553
						the number of observations to transmit.
553
					</p>
554
					</p>
554
				</div>
555
				</div>
555
			</div>
556
			</div>
556
 
557
 
557
			<!-- Templates HTML -->
558
			<!-- Templates HTML -->
558
			<div id="tpl-transmission-ok" style="display:none;">
559
			<div id="tpl-transmission-ok" style="display:none;">
559
				<p class="msg">
560
				<p class="msg">
560
					Your observations have been transmitted.<br />
561
					Your observations have been transmitted.<br />
561
					They can now be consulted with the different visualization tools
562
					They can now be consulted with the different visualization tools
562
					of the Tela Botanica network (<a href="http://www.tela-botanica.org/site:botanique">eFlore</a>,
563
					of the Tela Botanica network (<a href="http://www.tela-botanica.org/site:botanique">eFlore</a>,
563
					<a href="http://www.tela-botanica.org/appli:pictoflora">images gallery</a>,
564
					<a href="http://www.tela-botanica.org/appli:pictoflora">images gallery</a>,
564
					<a href="http://www.tela-botanica.org/appli:identiplante">Identiplante</a>,
565
					<a href="http://www.tela-botanica.org/appli:identiplante">Identiplante</a>,
565
					<a href="http://www.tela-botanica.org/widget:cel:cartoPoint">maps</a>...)<br />
566
					<a href="http://www.tela-botanica.org/widget:cel:cartoPoint">maps</a>...)<br />
566
					If you wish to edit or delete them, you can find them by
567
					If you wish to edit or delete them, you can find them by
567
					signing in to your <a href="http://www.tela-botanica.org/appli:cel?lang=en">"Carnet en ligne" (Online notebook)</a>.<br />
568
					signing in to your <a href="http://www.tela-botanica.org/appli:cel?lang=en">"Carnet en ligne" (Online notebook)</a>.<br />
568
					Don't forget that you have to
569
					Don't forget that you have to
569
					<a href="http://www.tela-botanica.org/page:inscription">sign-up to Tela Botanica</a>
570
					<a href="http://www.tela-botanica.org/page:inscription">sign-up to Tela Botanica</a>
570
					first, if not already done.
571
					first, if not already done.
571
				</p>
572
				</p>
572
			</div>
573
			</div>
573
			<div id="tpl-transmission-ko" style="display:none;">
574
			<div id="tpl-transmission-ko" style="display:none;">
574
				<p class="msg">
575
				<p class="msg">
575
					An error occured while transmitting an observation (shown in red).<br />
576
					An error occured while transmitting an observation (shown in red).<br />
576
					You can try transmitting it again by clicking the "transmit" button, or delete it
577
					You can try transmitting it again by clicking the "transmit" button, or delete it
577
					and transmit the others.<br />
578
					and transmit the others.<br />
578
					Nevertheless, the observations that do not appear in the "observations to be transmitted" list anymore, have been successfully transmitted during the previous attempt. <br />
579
					Nevertheless, the observations that do not appear in the "observations to be transmitted" list anymore, have been successfully transmitted during the previous attempt. <br />
579
					If the issue persists, you can report it to us using
580
					If the issue persists, you can report it to us using
580
					<a href="<?= $url_remarques ?>?lang=en&service=cel&pageSource=<?php echo urlencode('http://'.$_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF'].'?'.$_SERVER['QUERY_STRING']); ?>"
581
					<a href="<?= $url_remarques ?>?lang=en&service=cel&pageSource=<?php echo urlencode('http://'.$_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF'].'?'.$_SERVER['QUERY_STRING']); ?>"
581
								  target="_blank"
582
								  target="_blank"
582
								  onclick="javascript:window.open(this.getAttribute('href'), 'Tela Botanica - Remarques', config='height=700, width=640, scrollbars=yes, resizable=yes'); return false;">
583
								  onclick="javascript:window.open(this.getAttribute('href'), 'Tela Botanica - Remarques', config='height=700, width=640, scrollbars=yes, resizable=yes'); return false;">
583
								  the error reporting form</a>.
584
								  the error reporting form</a>.
584
				</p>
585
				</p>
585
			</div>
586
			</div>
586
		</div>
587
		</div>
587
	</body>
588
	</body>
588
</html>
589
</html>