Subversion Repositories eFlore/Applications.cel

Rev

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

Rev 2700 Rev 2707
1
<!DOCTYPE html>
1
<!DOCTYPE html>
2
<html>
2
<html>
3
	<head>
3
	<head>
4
		<title>Saisie simplifiée du CEL</title>
4
		<title>Saisie simplifiée du CEL</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="Widget de saisie simplifiée pour le CEL" />
15
		<meta name="description" content="Widget de saisie simplifiée pour le 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="Saisie rapide d'observations" />
19
		<meta property="og:title" content="Saisie rapide d'observations" />
20
		<meta property="og:site_name" content="Tela Botanica" />
20
		<meta property="og:site_name" content="Tela Botanica" />
21
		<meta property="og:description" content="Saisissez et partagez facilement vos observations de plantes sauvages grâce au Widget de saisie du Carnet en Ligne (Licence CC-BY-SA)" />
21
		<meta property="og:description" content="Saisissez et partagez facilement vos observations de plantes sauvages grâce au Widget de saisie du Carnet en Ligne (Licence CC-BY-SA)" />
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?sensor=true&amp;language=fr&amp;region=FR"></script>
36
		<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&amp;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
									Ajout rapide d'observations
166
									Ajout rapide d'observations
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
								Cet outil vous permet de partager simplement vos observations avec le
174
								Cet outil vous permet de partager simplement vos observations avec le
175
								<a href="http://www.tela-botanica.org/site:accueil">réseau Tela Botanica</a> (sous <a href="http://www.tela-botanica.org/page:licence?langue=fr">licence CC-BY-SA</a>).
175
								<a href="http://www.tela-botanica.org/site:accueil">réseau Tela Botanica</a> (sous <a href="http://www.tela-botanica.org/page:licence?langue=fr">licence CC-BY-SA</a>).
176
								Identifiez-vous bien pour ensuite retrouver et gérer vos données dans
176
								Identifiez-vous bien pour ensuite retrouver et gérer vos données dans
177
								<a href="http://www.tela-botanica.org/appli:cel">votre Carnet en ligne</a>.
177
								<a href="http://www.tela-botanica.org/appli:cel">votre Carnet en ligne</a>.
178
								Créez jusqu'à 10 observations (avec 10Mo max d'images) puis partagez-les avec le bouton 'transmettre'.
178
								Créez jusqu'à 10 observations (avec 10Mo max d'images) puis partagez-les avec le bouton 'transmettre'.
179
								Elles apparaissent immédiatement sur les <a href="http://www.tela-botanica.org/site:botanique">cartes et galeries photos </a> du site.
179
								Elles apparaissent immédiatement sur les <a href="http://www.tela-botanica.org/site:botanique">cartes et galeries photos </a> du site.
180
							</p>
180
							</p>
181
							<p class="discretion">
181
							<p class="discretion">
182
								Pour toute question ou remarque,
182
								Pour toute question ou remarque,
183
								<a href="<?= $url_remarques ?>?service=cel&pageSource=<?php echo urlencode('http://'.$_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF'].'?'.$_SERVER['QUERY_STRING']); ?>"
183
								<a href="<?= $url_remarques ?>?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
								  contactez-nous</a>
186
								  contactez-nous</a>
187
 
187
 
188
							</p>
188
							</p>
189
							<p class="discretion">
189
							<p class="discretion">
190
								Une fois familiarisé avec l'interface vous pouvez cliquer sur ce bouton pour désactiver l'aide.
190
								Une fois familiarisé avec l'interface vous pouvez cliquer sur ce bouton pour désactiver l'aide.
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" >Désactiver l'aide</span>
193
									<span id="btn-aide-txt" >Désactiver l'aide</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>Observateur</h2>
202
						<h2>Observateur</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" rel="tooltip" data-placement="right"
205
								<div class="span6 has-tooltip" data-placement="right"
206
									title="Saisissez le courriel avec lequel vous être inscrit à Tela Botanica.
206
									title="Saisissez le courriel avec lequel vous être inscrit à Tela Botanica.
207
										Si vous n'êtes pas inscrit, ce n'est pas grave, vous pourrez le faire
207
										Si vous n'êtes pas inscrit, ce n'est pas grave, vous pourrez le faire
208
										ultérieurement. Des informations complémentaires vont vous être
208
										ultérieurement. Des informations complémentaires vont vous être
209
										demandées : prénom et nom.">
209
										demandées : prénom et nom.">
210
									<label for="courriel"
210
									<label for="courriel"
211
										title="Veuillez saisir votre adresse courriel.">
211
										title="Veuillez saisir votre adresse courriel.">
212
										<strong class="obligatoire">*</strong> Courriel
212
										<strong class="obligatoire">*</strong> Courriel
213
									</label>
213
									</label>
214
									<div class="input-prepend">
214
									<div class="input-prepend">
215
										<span class="add-on"><i class="icon-envelope"></i></span>
215
										<span class="add-on"><i class="icon-envelope"></i></span>
216
										<input id="courriel" class="input-large" name="courriel" type="text"/>
216
										<input id="courriel" class="input-large" name="courriel" type="text"/>
217
										<input id="id_utilisateur" name="id_utilisateur" type="hidden"/>
217
										<input id="id_utilisateur" name="id_utilisateur" type="hidden"/>
218
									</div>
218
									</div>
219
								</div>
219
								</div>
220
								<div id="zone-courriel-confirmation" class="span6 hidden">
220
								<div id="zone-courriel-confirmation" class="span6 hidden">
221
									<label for="courriel_confirmation"
221
									<label for="courriel_confirmation"
222
										title="Veuillez saisir confirmer le courriel.">
222
										title="Veuillez saisir confirmer le courriel.">
223
										<strong class="obligatoire">*</strong> Courriel (confirmation)
223
										<strong class="obligatoire">*</strong> Courriel (confirmation)
224
									</label>
224
									</label>
225
									<div class="input-prepend">
225
									<div class="input-prepend">
226
										<span class="add-on">
226
										<span class="add-on">
227
											<i class="icon-envelope"></i>
227
											<i class="icon-envelope"></i>
228
										</span><input id="courriel_confirmation" class="input-large" name="courriel_confirmation" type="text"/>
228
										</span><input id="courriel_confirmation" class="input-large" name="courriel_confirmation" type="text"/>
229
									</div>
229
									</div>
230
								</div>
230
								</div>
231
							</div>
231
							</div>
232
							<div id="zone-prenom-nom" class="row-fluid hidden">
232
							<div id="zone-prenom-nom" class="row-fluid hidden">
233
								<div class="span6">
233
								<div class="span6">
234
									<label for="prenom">Prénom</label>
234
									<label for="prenom">Prénom</label>
235
									<div>
235
									<div>
236
										<input id="prenom" name="prenom" class="span3" type="text"/>
236
										<input id="prenom" name="prenom" class="span3" type="text"/>
237
									</div>
237
									</div>
238
								</div>
238
								</div>
239
								<div class="span6">
239
								<div class="span6">
240
									<label for="nom">Nom</label>
240
									<label for="nom">Nom</label>
241
									<div>
241
									<div>
242
										<input id="nom" name="nom"  class="span3" type="text"/>
242
										<input id="nom" name="nom"  class="span3" type="text"/>
243
									</div>
243
									</div>
244
								</div>
244
								</div>
245
							</div>
245
							</div>
246
						</form>
246
						</form>
247
					</div>
247
					</div>
248
				</div>
248
				</div>
249
			</div>
249
			</div>
250
			<!-- Messages d'erreur du formulaire-->
250
			<!-- Messages d'erreur du formulaire-->
251
			<div class="row">
251
			<div class="row">
252
				<div class="zone-alerte span6 offset3">
252
				<div class="zone-alerte span6 offset3">
253
					<div id="dialogue-bloquer-copier-coller" class="alert alert-info alert-block" style="display:none;">
253
					<div id="dialogue-bloquer-copier-coller" class="alert alert-info alert-block" style="display:none;">
254
						<a class="close">×</a>
254
						<a class="close">×</a>
255
						<h4 class="alert-heading">Information : copier/coller</h4>
255
						<h4 class="alert-heading">Information : copier/coller</h4>
256
						<p>
256
						<p>
257
							Merci de ne pas copier/coller votre courriel.<br/>
257
							Merci de ne pas copier/coller votre courriel.<br/>
258
							La double saisie permet de vérifier l'absence d'erreurs.
258
							La double saisie permet de vérifier l'absence d'erreurs.
259
						</p>
259
						</p>
260
					</div>
260
					</div>
261
					<div id="dialogue-courriel-introuvable" class="alert alert-info alert-block" style="display:none;">
261
					<div id="dialogue-courriel-introuvable" class="alert alert-info alert-block" style="display:none;">
262
						<a class="close">×</a>
262
						<a class="close">×</a>
263
						<h4 class="alert-heading">Information : courriel introuvable</h4>
263
						<h4 class="alert-heading">Information : courriel introuvable</h4>
264
						<p>
264
						<p>
265
							Vous n'êtes pas inscrit à Tela Botanica avec ce courriel.<br/>
265
							Vous n'êtes pas inscrit à Tela Botanica avec ce courriel.<br/>
266
							Veuillez compléter les champs supplémentaires ou indiquer votre courriel d'inscription.<br/>
266
							Veuillez compléter les champs supplémentaires ou indiquer votre courriel d'inscription.<br/>
267
							Pour retrouver vos observations dans le <a href="http://www.tela-botanica.org/appli:cel">Carnet en ligne</a>,
267
							Pour retrouver vos observations dans le <a href="http://www.tela-botanica.org/appli:cel">Carnet en ligne</a>,
268
							il sera nécesaire de <a href="http://www.tela-botanica.org/page:inscription">vous inscrire à Tela Botanica</a>.
268
							il sera nécesaire de <a href="http://www.tela-botanica.org/page:inscription">vous inscrire à Tela Botanica</a>.
269
						</p>
269
						</p>
270
					</div>
270
					</div>
271
					<div id="dialogue-google-map" class="alert alert-info alert-block" style="display: none;">
271
					<div id="dialogue-google-map" class="alert alert-info alert-block" style="display: none;">
272
						<a class="close">×</a>
272
						<a class="close">×</a>
273
						<h4 class="alert-heading">Information sur Google Map</h4>
273
						<h4 class="alert-heading">Information sur Google Map</h4>
274
						<div class="contenu"></div>
274
						<div class="contenu"></div>
275
					</div>
275
					</div>
276
				</div>
276
				</div>
277
			</div>
277
			</div>
278
			<div class="row-fluid">
278
			<div class="row-fluid">
279
				<div class="span12">
279
				<div class="span12">
280
					<div class="well">
280
					<div class="well">
281
						<div class="row-fluid">
281
						<div class="row-fluid">
282
							<div class="span6">
282
							<div class="span6">
283
								<div>
283
								<div>
284
									<div class="row-fluid">
284
									<div class="row-fluid">
285
										<div class="span12">
285
										<div class="span12">
286
											<h2>Lieu du relevé</h2>
286
											<h2>Lieu du relevé</h2>
287
										</div>
287
										</div>
288
									</div>
288
									</div>
289
									<div class="row-fluid">
289
									<div class="row-fluid">
290
										<div class="span4">
290
										<div class="span4">
291
											<label for="map_canvas" title="Veuillez localiser l'observation">
291
											<label for="map_canvas" title="Veuillez localiser l'observation">
292
												Géolocalisation
292
												Géolocalisation
293
											</label>
293
											</label>
294
										</div>
294
										</div>
295
										<div class="span8 droite">
295
										<div class="span8 droite">
296
											<form id="form-carte-recherche" class="form-search form-horizontal" action="#" >
296
											<form id="form-carte-recherche" class="form-search form-horizontal" action="#" >
297
												<div class="control-group">
297
												<div class="control-group">
298
													<label for="carte-recherche">Rechercher</label>
298
													<label for="carte-recherche">Rechercher</label>
299
													<input id="carte-recherche" class="search-query" type="text" value=""
299
													<input id="carte-recherche" class="search-query has-tooltip" type="text" value=""
300
														rel="tooltip"
-
 
301
														title="Permet de centrer la carte sur le lieu recherché."
300
														title="Permet de centrer la carte sur le lieu recherché."
302
														placeholder="Centrer la carte sur un lieu..."/>
301
														placeholder="Centrer la carte sur un lieu..."/>
303
												</div>
302
												</div>
304
											</form>
303
											</form>
305
										</div>
304
										</div>
306
									</div>
305
									</div>
307
									<div class="row-fluid">
306
									<div class="row-fluid">
308
										<div class="span12">
307
										<div class="span12">
309
											<div id="map-canvas" rel="tooltip"
308
											<div id="map-canvas" class="has-tooltip"
310
												title="Vous pouvez cliquer sur la carte pour déplacer le marqueur
309
												title="Vous pouvez cliquer sur la carte pour déplacer le marqueur
311
													représentant votre station ou bien le glisser-déposer sur
310
													représentant votre station ou bien le glisser-déposer sur
312
													le lieu souhaité."></div>
311
													le lieu souhaité."></div>
313
										</div>
312
										</div>
314
									</div>
313
									</div>
315
									<div class="row-fluid">
314
									<div class="row-fluid">
316
										<label for="coordonnees-geo" class="span7">
315
										<label for="coordonnees-geo" class="span7">
317
											<a href="#" class="afficher-coord">Afficher</a>
316
											<a href="#" class="afficher-coord">Afficher</a>
318
											<a href="#" class="afficher-coord" style="display:none;">Cacher</a>
317
											<a href="#" class="afficher-coord" style="display:none;">Cacher</a>
319
											les coordonnées géographiques
318
											les coordonnées géographiques
320
											<span id="lat-lon-info" class="info"
319
											<span id="lat-lon-info" class="info has-tooltip"
321
												rel="tooltip"
-
 
322
												title="Système géodésique mondial, révision de 1984 - Coordonnées non projetées">
320
												title="Système géodésique mondial, révision de 1984 - Coordonnées non projetées">
323
												(WGS84)
321
												(WGS84)
324
											</span>
322
											</span>
325
										</label>
323
										</label>
326
										<div id="info-commune" class="span5">
324
										<div id="info-commune" class="span5">
327
								    		<span for="marqueur-commune">Commune : </span>
325
								    		<span for="marqueur-commune">Commune : </span>
328
								    		<span id="marqueur-commune">
326
								    		<span id="marqueur-commune">
329
								    			<span id="commune-nom" class="commune-info"></span>
327
								    			<span id="commune-nom" class="commune-info"></span>
330
								    			(<span id="commune-code-insee" class="commune-info"
328
								    			(<span id="commune-code-insee" class="commune-info has-tooltip"
331
								    				rel="tooltip"
-
 
332
								    				title="Code INSEE de la commune"></span>)
329
								    				title="Code INSEE de la commune"></span>)
333
								    		</span>
330
								    		</span>
334
							    		</div>
331
							    		</div>
335
									</div>
332
									</div>
336
									<form id="form-station" class="control-group" action="#" enctype="multipart/form-data" autocomplete="on">
333
									<form id="form-station" class="control-group" action="#" enctype="multipart/form-data" autocomplete="on">
337
										<div id="coordonnees-geo" class="well" style="display:none;">
334
										<div id="coordonnees-geo" class="well" style="display:none;">
338
											<div class="row-fluid form-inline">
335
											<div class="row-fluid form-inline">
339
												<div id="coord-lat" class="span4">
336
												<div id="coord-lat" class="span4">
340
													<label for="latitude">Latitude</label>
337
													<label for="latitude">Latitude</label>
341
													<div>
338
													<div>
342
														<input id="latitude" class="input-mini" name="latitude" type="text" value=""/>
339
														<input id="latitude" class="input-mini" name="latitude" type="text" value=""/>
343
													</div>
340
													</div>
344
												</div>
341
												</div>
345
												<div id="coord-lng" class="span4">
342
												<div id="coord-lng" class="span4">
346
													<label for="longitude">Longitude</label>
343
													<label for="longitude">Longitude</label>
347
													<div>
344
													<div>
348
														<input id="longitude" class="input-mini" name="longitude" type="text" value=""/>
345
														<input id="longitude" class="input-mini" name="longitude" type="text" value=""/>
349
													</div>
346
													</div>
350
												</div>
347
												</div>
351
												<div class="span1">
348
												<div class="span1">
352
													<div>
349
													<div>
353
														<input id="geolocaliser" type="button" value="Voir sur la carte"
350
														<input id="geolocaliser" type="button" value="Voir sur la carte"
354
															rel="tooltip"
351
															class="has-tooltip"
355
															title="Centre la carte sur les coordonnées de latitude et longitude saisies."/>
352
															title="Centre la carte sur les coordonnées de latitude et longitude saisies."/>
356
													</div>
353
													</div>
357
												</div>
354
												</div>
358
									    	</div>
355
									    	</div>
359
										</div>
356
										</div>
360
										<div class="row-fluid">
357
										<div class="row-fluid">
361
											<div class="span4" rel="tooltip"
358
											<div class="span4 has-tooltip"
362
												title="Toponyme plus précis que la commune, utilisé localement et se trouvant souvent sur les cartes au 1/25 000." >
359
												title="Toponyme plus précis que la commune, utilisé localement et se trouvant souvent sur les cartes au 1/25 000." >
363
												<label for="lieudit">Lieu-dit</label>
360
												<label for="lieudit">Lieu-dit</label>
364
												<div>
361
												<div>
365
													<input type="text" id="lieudit" class="span2" name="lieudit"/>
362
													<input type="text" id="lieudit" class="span2" name="lieudit"/>
366
												</div>
363
												</div>
367
											</div>
364
											</div>
368
											<div class="span4" rel="tooltip"
365
											<div class="span4 has-tooltip"
369
												title="Lieu précis de l'observation définissant une unité écologique homogène (ex: le pré derrière la maison)." >
366
												title="Lieu précis de l'observation définissant une unité écologique homogène (ex: le pré derrière la maison)." >
370
												<label for="station">Station</label>
367
												<label for="station">Station</label>
371
												<div>
368
												<div>
372
													<input type="text" id="station" class="span2" name="station"/>
369
													<input type="text" id="station" class="span2" name="station"/>
373
												</div>
370
												</div>
374
											</div>
371
											</div>
375
											<div class="span4" rel="tooltip"
372
											<div class="span4 has-tooltip"
376
												title="Type d'habitat plus ou moins standardisé dans les codes Corine ou Catminat (ex: prairie humide).">
373
												title="Type d'habitat plus ou moins standardisé dans les codes Corine ou Catminat (ex: prairie humide).">
377
												<label for="milieu">Milieu</label>
374
												<label for="milieu">Milieu</label>
378
												<div>
375
												<div>
379
													<input type="text" id="milieu" class="span2" name="milieu" />
376
													<input type="text" id="milieu" class="span2" name="milieu" />
380
												</div>
377
												</div>
381
											</div>
378
											</div>
382
										</div>
379
										</div>
383
									</form>
380
									</form>
384
								</div>
381
								</div>
385
							</div>
382
							</div>
386
							<div class="span6">
383
							<div class="span6">
387
								<form id="form-obs" action="#" autocomplete="on">
384
								<form id="form-obs" action="#" autocomplete="on">
388
									<h2>Observation</h2>
385
									<h2>Observation</h2>
389
									<?php if(!$referentiel_impose && !$espece_imposee) : ?>
386
									<?php if(!$referentiel_impose && !$espece_imposee) : ?>
390
										<div class="row-fluid">
387
										<div class="row-fluid">
391
											<div rel="tooltip"
388
											<div class="has-tooltip"
392
												title="Sélectionnez le référentiel associé à votre relevé">
389
												title="Sélectionnez le référentiel associé à votre relevé">
393
												<label for="referentiel" title="Réferentiel">
390
												<label for="referentiel" title="Réferentiel">
394
													Référentiel
391
													Référentiel
395
												</label>
392
												</label>
396
												<span class="input-prepend">
393
												<span class="input-prepend">
397
													<span id="referentiel-icone" class="add-on"><i class="icon-book"></i></span>
394
													<span id="referentiel-icone" class="add-on"><i class="icon-book"></i></span>
398
													<select id="referentiel" autocomplete="off">
395
													<select id="referentiel" autocomplete="off">
399
														<option value="bdtfx" selected="selected" title="Trachéophytes de France métropolitaine">Métropole (BDTFX)</option>
396
														<option value="bdtfx" selected="selected" title="Trachéophytes de France métropolitaine">Métropole (BDTFX)</option>
400
														<option value="bdtxa" title="Trachéophytes des Antilles">Antilles françaises (BDTXA)</option>
397
														<option value="bdtxa" title="Trachéophytes des Antilles">Antilles françaises (BDTXA)</option>
401
														<option value="bdtre" title="Trachéophytes de La Réunion">Réunion (BDTRE)</option>
398
														<option value="bdtre" title="Trachéophytes de La Réunion">Réunion (BDTRE)</option>
402
														<option value="isfan" title="Afrique du Nord">Afrique du Nord (ISFAN)</option>
399
														<option value="isfan" title="Afrique du Nord">Afrique du Nord (ISFAN)</option>
403
														<option value="apd" title="Afrique de l'Ouest et du Centre">Afrique de l'Ouest et du Centre (APD)</option>
400
														<option value="apd" title="Afrique de l'Ouest et du Centre">Afrique de l'Ouest et du Centre (APD)</option>
404
														<option value="lbf" title="Liban">Liban (LBF)</option>
401
														<option value="lbf" title="Liban">Liban (LBF)</option>
405
														<option value="autre" title="Autre/Inconnu">Autre/Inconnu</option>
402
														<option value="autre" title="Autre/Inconnu">Autre/Inconnu</option>
406
													</select>
403
													</select>
407
												</span>
404
												</span>
408
											</div>
405
											</div>
409
										</div>
406
										</div>
410
									<?php endif; ?>
407
									<?php endif; ?>
411
									<div class="row-fluid">
408
									<div class="row-fluid">
412
										<div class="span4" rel="tooltip"
409
										<div class="span4 has-tooltip"
413
											title="Vous pouvez cliquer sur l'icône de calendrier pour
410
											title="Vous pouvez cliquer sur l'icône de calendrier pour
414
												sélectionner une date dans un calendrier.">
411
												sélectionner une date dans un calendrier.">
415
											<label for="date" title="Veuillez indiquer la date du relevé au format jj/mm/aaaa">
412
											<label for="date" title="Veuillez indiquer la date du relevé au format jj/mm/aaaa">
416
												Date du relevé
413
												Date du relevé
417
											</label>
414
											</label>
418
											<div class="input-prepend">
415
											<div class="input-prepend">
419
												<span id="date-icone" class="add-on"></span><input id="date"
416
												<span id="date-icone" class="add-on"></span><input id="date"
420
													class="input-small" name="date" type="text"
417
													class="input-small" name="date" type="text"
421
													placeholder="jj/mm/aaaa" />
418
													placeholder="jj/mm/aaaa" />
422
											</div>
419
											</div>
423
										</div>
420
										</div>
424
										<div id="taxon-input-groupe" class="span8" rel="tooltip"
421
										<div id="taxon-input-groupe" class="span8 has-tooltip"
425
											title="Sélectionnez une espèce dans la liste déroulante pour lier
422
											title="Sélectionnez une espèce dans la liste déroulante pour lier
426
												votre nom au référentiel selectionné. Si vous
423
												votre nom au référentiel selectionné. Si vous
427
												le désirez vous pouvez aussi saisir un nom absent du référentiel
424
												le désirez vous pouvez aussi saisir un nom absent du référentiel
428
												(Ex. : 'fleur violette' ou 'viola sinensis???')." >
425
												(Ex. : 'fleur violette' ou 'viola sinensis???')." >
429
											<label for="taxon" title="Choisissez une espèce">
426
											<label for="taxon" title="Choisissez une espèce">
430
												<strong class="obligatoire">*</strong>
427
												<strong class="obligatoire">*</strong>
431
												Espèce <?= $referentiel_impose ? '('.$ns_referentiel.')' : '' ?> <em>(ou indication sur la plante)</em>
428
												Espèce <?= $referentiel_impose ? '('.$ns_referentiel.')' : '' ?> <em>(ou indication sur la plante)</em>
432
											</label>
429
											</label>
433
											<div class="input-prepend">
430
											<div class="input-prepend">
434
												<span class="add-on">
431
												<span class="add-on">
435
													<i class="icon-leaf"></i>
432
													<i class="icon-leaf"></i>
436
												</span><input type="text" id="taxon" name="taxon" value="<?= $nom_sci_espece_defaut; ?>" />
433
												</span><input type="text" id="taxon" name="taxon" value="<?= $nom_sci_espece_defaut; ?>" />
437
											</div>
434
											</div>
438
										</div>
435
										</div>
439
									</div>
436
									</div>
440
									<div class="row-fluid">
437
									<div class="row-fluid">
441
										<div class="span12">
438
										<div class="span12">
442
											<label for="notes">Commentaires</label>
439
											<label for="notes">Commentaires</label>
443
											<div>
440
											<div>
444
												<textarea id="notes" class="span6" rows="7" name="notes"
441
												<textarea id="notes" class="span6" rows="7" name="notes"
445
													placeholder="vous pouvez éventuellement ajouter des informations complémentaires à votre observation (altitude, taille de la plante...)"></textarea>
442
													placeholder="vous pouvez éventuellement ajouter des informations complémentaires à votre observation (altitude, taille de la plante...)"></textarea>
446
											</div>
443
											</div>
447
										</div>
444
										</div>
448
									</div>
445
									</div>
449
								</form>
446
								</form>
450
								<form id="form-upload" class="form-horizontal" action="<?= $url_ws_upload ?>"
447
								<form id="form-upload" class="form-horizontal" action="<?= $url_ws_upload ?>"
451
									method="post" enctype="multipart/form-data">
448
									method="post" enctype="multipart/form-data">
452
									<h2>Image(s) de cette plante</h2>
449
									<h2>Image(s) de cette plante</h2>
453
									<strong>Ajouter une image</strong>
450
									<strong>Ajouter une image</strong>
454
									<p class="miniature-info" class="discretion help-inline">Les photos doivent être au format JPEG et ne doivent pas excéder 5Mo chacunes.</p>
451
									<p class="miniature-info" class="discretion help-inline">Les photos doivent être au format JPEG et ne doivent pas excéder 5Mo chacunes.</p>
455
									<div id ="photos-conteneur">
452
									<div id ="photos-conteneur">
456
										<input type="file" id="fichier" name="fichier" accept="image/jpeg" />
453
										<input type="file" id="fichier" name="fichier" accept="image/jpeg" />
457
										<input type="hidden" name="MAX_FILE_SIZE" value="5242880"/>
454
										<input type="hidden" name="MAX_FILE_SIZE" value="5242880"/>
458
										<div id="miniatures">
455
										<div id="miniatures">
459
										</div>
456
										</div>
460
										<p class="miniature-msg" class="span12">&nbsp;</p>
457
										<p class="miniature-msg" class="span12">&nbsp;</p>
461
									</div>
458
									</div>
462
								</form>
459
								</form>
463
							</div>
460
							</div>
464
							<div class="row-fluid">
461
							<div class="row-fluid">
465
								<div class="span12 centre" rel="tooltip"
462
								<div class="span12 centre has-tooltip"
466
									title="Une fois les champs remplis, vous pouvez cliquer sur ce bouton pour
463
									title="Une fois les champs remplis, vous pouvez cliquer sur ce bouton pour
467
										ajouter votre observation à la liste à transmettre.">
464
										ajouter votre observation à la liste à transmettre.">
468
									<button id="ajouter-obs" class="btn btn-primary btn-large" type="button">
465
									<button id="ajouter-obs" class="btn btn-primary btn-large" type="button">
469
										Créer
466
										Créer
470
									</button>
467
									</button>
471
								</div>
468
								</div>
472
							</div>
469
							</div>
473
						</div>
470
						</div>
474
					</div>
471
					</div>
475
				</div>
472
				</div>
476
			</div>
473
			</div>
477
			<!-- Messages d'erreur du formulaire-->
474
			<!-- Messages d'erreur du formulaire-->
478
			<div class="row">
475
			<div class="row">
479
				<div class="zone-alerte span6 offset3">
476
				<div class="zone-alerte span6 offset3">
480
					<div id="dialogue-bloquer-creer-obs" class="alert alert-warning alert-block" style="display: none;">
477
					<div id="dialogue-bloquer-creer-obs" class="alert alert-warning alert-block" style="display: none;">
481
						<a class="close">×</a>
478
						<a class="close">×</a>
482
						<h4 class="alert-heading">Information : 10 observations maximum</h4>
479
						<h4 class="alert-heading">Information : 10 observations maximum</h4>
483
						<p>
480
						<p>
484
							Vous venez d'ajouter votre 10ème observation.<br/>
481
							Vous venez d'ajouter votre 10ème observation.<br/>
485
							Pour en ajouter de nouvelles, il est nécessaire de les transmettre en cliquant sur le bouton ci-dessous.
482
							Pour en ajouter de nouvelles, il est nécessaire de les transmettre en cliquant sur le bouton ci-dessous.
486
						</p>
483
						</p>
487
					</div>
484
					</div>
488
				</div>
485
				</div>
489
				<div class="zone-alerte span6 offset3">
486
				<div class="zone-alerte span6 offset3">
490
					<div id="dialogue-form-invalide" class="alert alert-warning alert-block" style="display: none;">
487
					<div id="dialogue-form-invalide" class="alert alert-warning alert-block" style="display: none;">
491
						<a class="close">×</a>
488
						<a class="close">×</a>
492
						<h4 class="alert-heading">Information : champs en erreur</h4>
489
						<h4 class="alert-heading">Information : champs en erreur</h4>
493
						<p>
490
						<p>
494
							Certains champs du formulaire sont mal remplis.<br/>
491
							Certains champs du formulaire sont mal remplis.<br/>
495
							Veuillez vérifier vos données.
492
							Veuillez vérifier vos données.
496
						</p>
493
						</p>
497
					</div>
494
					</div>
498
				</div>
495
				</div>
499
			</div>
496
			</div>
500
			<!-- Affiche le tableau récapitualif des observations ajoutées -->
497
			<!-- Affiche le tableau récapitualif des observations ajoutées -->
501
			<div id="zone-liste-obs" class="row-fluid">
498
			<div id="zone-liste-obs" class="row-fluid">
502
				<div class="span12">
499
				<div class="span12">
503
					<div class="well">
500
					<div class="well">
504
						<div class="row-fluid">
501
						<div class="row-fluid">
505
							<div class="span8">
502
							<div class="span8">
506
								<h2>Observations à transmettre : <span class="obs-nbre">0</span></h2>
503
								<h2>Observations à transmettre : <span class="obs-nbre">0</span></h2>
507
							</div>
504
							</div>
508
							<div class="span4 droite">
505
							<div class="span4 droite">
509
								<button id="transmettre-obs" class="btn btn-primary btn-large"
506
								<button id="transmettre-obs" class="btn btn-primary btn-large has-tooltip"
510
									type="button" disabled="disabled" rel="tooltip"
507
									type="button" disabled="disabled"
511
									title="Ajoute les observations ci-dessous à votre Carnet en Ligne et les rend publiques.">
508
									title="Ajoute les observations ci-dessous à votre Carnet en Ligne et les rend publiques.">
512
									Transmettre
509
									Transmettre
513
								</button>
510
								</button>
514
							</div>
511
							</div>
515
						</div>
512
						</div>
516
						<div id="liste-obs" ></div>
513
						<div id="liste-obs" ></div>
517
						<div class="row">
514
						<div class="row">
518
							<div class="zone-alerte span6 offset3">
515
							<div class="zone-alerte span6 offset3">
519
								<div id="dialogue-zero-obs" class="alert alert-block" style="display: none;">
516
								<div id="dialogue-zero-obs" class="alert alert-block" style="display: none;">
520
									<a class="close">×</a>
517
									<a class="close">×</a>
521
									<h4 class="alert-heading">Attention : aucune observation</h4>
518
									<h4 class="alert-heading">Attention : aucune observation</h4>
522
									<p>Veuillez saisir des observations pour les transmettres.</p>
519
									<p>Veuillez saisir des observations pour les transmettres.</p>
523
								</div>
520
								</div>
524
 
521
 
525
								<div id="dialogue-obs-transaction-ok" class="alert alert-success alert-block" style="display: none;"">
522
								<div id="dialogue-obs-transaction-ok" class="alert alert-success alert-block" style="display: none;"">
526
									<a class="close">×</a>
523
									<a class="close">×</a>
527
									<h4 class="alert-heading">Information : transmission des observations</h4>
524
									<h4 class="alert-heading">Information : transmission des observations</h4>
528
									<div class="alert-txt"></div>
525
									<div class="alert-txt"></div>
529
								</div>
526
								</div>
530
 
527
 
531
								<div id="dialogue-obs-transaction-ko" class="alert alert-error alert-block" style="display: none;">
528
								<div id="dialogue-obs-transaction-ko" class="alert alert-error alert-block" style="display: none;">
532
									<a class="close">×</a>
529
									<a class="close">×</a>
533
									<h4 class="alert-heading">Erreur : transmission des observations</h4>
530
									<h4 class="alert-heading">Erreur : transmission des observations</h4>
534
									<div class="alert-txt"></div>
531
									<div class="alert-txt"></div>
535
								</div>
532
								</div>
536
							</div>
533
							</div>
537
						</div>
534
						</div>
538
 
535
 
539
					</div>
536
					</div>
540
				</div>
537
				</div>
541
			</div>
538
			</div>
542
 
539
 
543
			<footer class="row-fluid">
540
			<footer class="row-fluid">
544
				<p class="span12">&copy; Tela Botanica 2012</p>
541
				<p class="span12">&copy; Tela Botanica 2012</p>
545
			</footer>
542
			</footer>
546
 
543
 
547
			<!-- Fenêtres modales -->
544
			<!-- Fenêtres modales -->
548
			<div id="chargement" class="modal-fenetre" style="display:none;">
545
			<div id="chargement" class="modal-fenetre" style="display:none;">
549
				<div id="chargement-centrage" class="modal-contenu">
546
				<div id="chargement-centrage" class="modal-contenu">
550
					<div class="progress progress-striped active">
547
					<div class="progress progress-striped active">
551
			 			<div id="barre-progression-upload" class="bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="10" style="">
548
			 			<div id="barre-progression-upload" class="bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="10" style="">
552
			    			<span class="sr-only">0/10 observations transmises</span>
549
			    			<span class="sr-only">0/10 observations transmises</span>
553
			  			</div>
550
			  			</div>
554
					</div>
551
					</div>
555
					<p id="chargement-txt" style="color:white;font-size:1.5em;">
552
					<p id="chargement-txt" style="color:white;font-size:1.5em;">
556
						Transfert des observations en cours...<br />
553
						Transfert des observations en cours...<br />
557
						Cela peut prendre plusieurs minutes en fonction de la taille des images et du nombre
554
						Cela peut prendre plusieurs minutes en fonction de la taille des images et du nombre
558
						d'observations à transférer.
555
						d'observations à transférer.
559
					</p>
556
					</p>
560
				</div>
557
				</div>
561
			</div>
558
			</div>
562
 
559
 
563
			<!-- Templates HTML -->
560
			<!-- Templates HTML -->
564
			<div id="tpl-transmission-ok" style="display:none;">
561
			<div id="tpl-transmission-ok" style="display:none;">
565
				<p class="msg">
562
				<p class="msg">
566
					Vos observations ont bien été transmises.<br />
563
					Vos observations ont bien été transmises.<br />
567
					Elles sont désormais consultables à travers les différents outils de visualisation
564
					Elles sont désormais consultables à travers les différents outils de visualisation
568
					du réseau (<a href="http://www.tela-botanica.org/site:botanique">eFlore</a>,
565
					du réseau (<a href="http://www.tela-botanica.org/site:botanique">eFlore</a>,
569
					<a href="http://www.tela-botanica.org/page:cel_galerie">galeries d'images</a>,
566
					<a href="http://www.tela-botanica.org/page:cel_galerie">galeries d'images</a>,
570
					<a href="http://www.tela-botanica.org/appli:test:del">identiplante</a>,
567
					<a href="http://www.tela-botanica.org/appli:test:del">identiplante</a>,
571
					<a href="http://www.tela-botanica.org/widget:cel:cartoPoint">cartographie (widget)</a>...)<br />
568
					<a href="http://www.tela-botanica.org/widget:cel:cartoPoint">cartographie (widget)</a>...)<br />
572
					Si vous souhaitez les modifier ou les supprimer, vous pouvez les retrouver en vous
569
					Si vous souhaitez les modifier ou les supprimer, vous pouvez les retrouver en vous
573
					connectant à votre <a href="http://www.tela-botanica.org/appli:cel">Carnet en ligne</a>.<br />
570
					connectant à votre <a href="http://www.tela-botanica.org/appli:cel">Carnet en ligne</a>.<br />
574
					N'oubliez pas qu'il est nécessaire de
571
					N'oubliez pas qu'il est nécessaire de
575
					<a href="http://www.tela-botanica.org/page:inscription">s'inscrire à Tela Botanica</a>
572
					<a href="http://www.tela-botanica.org/page:inscription">s'inscrire à Tela Botanica</a>
576
					au préalable, si ce n'est pas déjà fait.
573
					au préalable, si ce n'est pas déjà fait.
577
				</p>
574
				</p>
578
			</div>
575
			</div>
579
			<div id="tpl-transmission-ko" style="display:none;">
576
			<div id="tpl-transmission-ko" style="display:none;">
580
				<p class="msg">
577
				<p class="msg">
581
					Une erreur est survenue lors de la transmission d'une observation (indiquée en rouge).<br />
578
					Une erreur est survenue lors de la transmission d'une observation (indiquée en rouge).<br />
582
					Vous pouvez tenter de la retransmettre en cliquant à nouveau sur le bouton transmettre ou bien la supprimer
579
					Vous pouvez tenter de la retransmettre en cliquant à nouveau sur le bouton transmettre ou bien la supprimer
583
					et transmettre les suivantes.<br />
580
					et transmettre les suivantes.<br />
584
					Néanmoins, les observations n'apparaissant plus dans la liste "observations à transmettre", ont bien été transmises lors de votre précédente tentative. <br />
581
					Néanmoins, les observations n'apparaissant plus dans la liste "observations à transmettre", ont bien été transmises lors de votre précédente tentative. <br />
585
					Si le problème persiste, vous pouvez signaler le dysfonctionnement sur
582
					Si le problème persiste, vous pouvez signaler le dysfonctionnement sur
586
					<a href="<?= $url_remarques ?>?service=cel&pageSource=<?php echo urlencode('http://'.$_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF'].'?'.$_SERVER['QUERY_STRING']); ?>"
583
					<a href="<?= $url_remarques ?>?service=cel&pageSource=<?php echo urlencode('http://'.$_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF'].'?'.$_SERVER['QUERY_STRING']); ?>"
587
								  target="_blank"
584
								  target="_blank"
588
								  onclick="javascript:window.open(this.getAttribute('href'), 'Tela Botanica - Remarques', config='height=700, width=640, scrollbars=yes, resizable=yes'); return false;">
585
								  onclick="javascript:window.open(this.getAttribute('href'), 'Tela Botanica - Remarques', config='height=700, width=640, scrollbars=yes, resizable=yes'); return false;">
589
								  le formulaire de signalement d'erreurs</a>.
586
								  le formulaire de signalement d'erreurs</a>.
590
				</p>
587
				</p>
591
			</div>
588
			</div>
592
		</div>
589
		</div>
593
	</body>
590
	</body>
594
</html>
591
</html>