Subversion Repositories eFlore/Applications.cel

Rev

Rev 2131 | Only display areas with differences | Ignore whitespace | Details | Blame | Last modification | View Log | RSS feed

Rev 2131 Rev 2163
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="Jean-Pascal MILCENT" />
13
        <meta name="author" content="Jean-Pascal MILCENT" />
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
		<!-- Viewport Mobile -->
17
		<!-- Viewport Mobile -->
18
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
18
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
19
		
19
		
20
		<!-- Favicones -->
20
		<!-- Favicones -->
21
		<link rel="shortcut icon" type="image/x-icon" href="<?=$url_base?>/modules/saisie/squelettes/defaut/img/favicon.ico" />
21
		<link rel="shortcut icon" type="image/x-icon" href="<?=$url_base?>/modules/saisie/squelettes/defaut/img/favicon.ico" />
22
		
22
		
23
		<!-- Javascript : bibliothèques -->
23
		<!-- Javascript : bibliothèques -->
24
		<!-- Google Map v3 -->
24
		<!-- Google Map v3 -->
25
		<!--<script type="text/javascript" src="https://getfirebug.com/firebug-lite.js"></script>-->
25
		<!--<script type="text/javascript" src="https://getfirebug.com/firebug-lite.js"></script>-->
26
		<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&amp;language=fr&amp;region=FR"></script>	
26
		<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&amp;language=fr&amp;region=FR"></script>	
27
		
27
		
28
		<!-- Jquery -->
28
		<!-- Jquery -->
29
		<script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/1.7.1/jquery-1.7.1.js"></script>
29
		<script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/1.7.1/jquery-1.7.1.js"></script>
30
		<!-- Jquery UI : nécessaire pour le minicalendrier et l'auto-complétion -->
30
		<!-- Jquery UI : nécessaire pour le minicalendrier et l'auto-complétion -->
31
		<script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/jquery-ui/1.8.18/js/jquery-ui-1.8.18.custom.min.js"></script>
31
		<script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/jquery-ui/1.8.18/js/jquery-ui-1.8.18.custom.min.js"></script>
32
		<script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/jquery-ui/1.8.18/js/jquery.ui.datepicker-fr.js"></script>
32
		<script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/jquery-ui/1.8.18/js/jquery.ui.datepicker-fr.js"></script>
33
		<!-- Jquery Plugins -->
33
		<!-- Jquery Plugins -->
34
		<!-- Jquery Validate : nécessaire pour la validation des formulaires -->
34
		<!-- Jquery Validate : nécessaire pour la validation des formulaires -->
35
		<script type="text/javascript" src="http://www.tela-botanica.org/commun/bootstrap/2.0.2/js/validate/1.9.0/jquery.validate.min.js"></script>
35
		<script type="text/javascript" src="http://www.tela-botanica.org/commun/bootstrap/2.0.2/js/validate/1.9.0/jquery.validate.min.js"></script>
36
		<script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/validate/1.9.0/messages_fr.js"></script>
36
		<script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/validate/1.9.0/messages_fr.js"></script>
37
		<!-- Jquery Form :nécessaire pour l'upload des images -->
37
		<!-- Jquery Form :nécessaire pour l'upload des images -->
38
		<script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/form/2.95/jquery.form.min.js"></script>
38
		<script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/form/2.95/jquery.form.min.js"></script>
39
		
39
		
40
		<!-- Bootstrap -->
40
		<!-- Bootstrap -->
41
		<script type="text/javascript" src="http://www.tela-botanica.org/commun/bootstrap/2.0.2/js/bootstrap.min.js"></script>
41
		<script type="text/javascript" src="http://www.tela-botanica.org/commun/bootstrap/2.0.2/js/bootstrap.min.js"></script>
42
		
42
		
43
		<!-- Javascript : appli saisie -->
43
		<!-- Javascript : appli saisie -->
44
		<script type="text/javascript">
44
		<script type="text/javascript">
45
		//<![CDATA[
45
		//<![CDATA[
46
			// La présence du parametre 'debug' dans l'URL enclenche le dégogage
46
			// La présence du parametre 'debug' dans l'URL enclenche le dégogage
47
			var DEBUG = <?=isset($_GET['debug']) ? 'true' : 'false'?>;
47
			var DEBUG = <?=isset($_GET['debug']) ? 'true' : 'false'?>;
48
			// La présence du parametre 'html5' dans l'URL enclenche les fonctions avancées HTML5
48
			// La présence du parametre 'html5' dans l'URL enclenche les fonctions avancées HTML5
49
			var HTML5 = <?=isset($_GET['html5']) ? 'true' : 'false'?>;
49
			var HTML5 = <?=isset($_GET['html5']) ? 'true' : 'false'?>;
50
			// Mot-clé du widget/projet
50
			// Mot-clé du widget/projet
51
			var TAG_PROJET = "WidgetSaisie";
51
			var TAG_PROJET = "WidgetSaisie";
52
			// Mots-clés à ajouter aux images
52
			// Mots-clés à ajouter aux images
53
			var TAG_IMG = "<?=isset($_GET['tag-img']) ? $_GET['tag-img'] : ''?>";
53
			var TAG_IMG = "<?=isset($_GET['tag-img']) ? $_GET['tag-img'] : ''?>";
54
			var SEPARATION_TAG_IMG = "<?= isset($_GET['motcle']) && isset($_GET['tag-img']) ? ',' : '' ?>";
54
			var SEPARATION_TAG_IMG = "<?= isset($_GET['motcle']) && isset($_GET['tag-img']) ? ',' : '' ?>";
55
			TAG_IMG = <?=isset($_GET['motcle']) ? "'".$_GET['motcle']."' + SEPARATION_TAG_IMG + TAG_IMG" : 'TAG_IMG' ?>;
55
			TAG_IMG = <?=isset($_GET['motcle']) ? "'".$_GET['motcle']."' + SEPARATION_TAG_IMG + TAG_IMG" : 'TAG_IMG' ?>;
56
			// Mots-clés à ajouter aux observations
56
			// Mots-clés à ajouter aux observations
57
			var TAG_OBS = "<?=isset($_GET['tag-obs']) ? $_GET['tag-obs'] : ''?>";
57
			var TAG_OBS = "<?=isset($_GET['tag-obs']) ? $_GET['tag-obs'] : ''?>";
58
			var SEPARATION_TAG_OBS = "<?= isset($_GET['projet']) && isset($_GET['tag-obs']) ? ',' : '' ?>";
58
			var SEPARATION_TAG_OBS = "<?= isset($_GET['projet']) && isset($_GET['tag-obs']) ? ',' : '' ?>";
59
			TAG_OBS = <?=isset($_GET['projet']) ? "'".$_GET['projet']."' + SEPARATION_TAG_OBS + TAG_OBS" : 'TAG_OBS' ?>;
59
			TAG_OBS = <?=isset($_GET['projet']) ? "'".$_GET['projet']."' + SEPARATION_TAG_OBS + TAG_OBS" : 'TAG_OBS' ?>;
60
			// URL du web service réalisant l'insertion des données dans la base du CEL.
60
			// URL du web service réalisant l'insertion des données dans la base du CEL.
61
			var SERVICE_SAISIE_URL = "<?=$url_ws_saisie?>";
61
			var SERVICE_SAISIE_URL = "<?=$url_ws_saisie?>";
62
			// Code du référentiel utilisé pour les nom scientifiques (de la forme nom:code).
62
			// Code du référentiel utilisé pour les nom scientifiques (de la forme nom:code).
63
			var NOM_SCI_REFERENTIEL = "<?=$ns_referentiel?>";
63
			var NOM_SCI_REFERENTIEL = "<?=$ns_referentiel?>";
64
			// Nom du référentiel utilisé pour les nom scientifiques.
64
			// Nom du référentiel utilisé pour les nom scientifiques.
65
			var NOM_SCI_PROJET = "<?=$ns_projet?>";
65
			var NOM_SCI_PROJET = "<?=$ns_projet?>";
66
			// Code de la version du référentiel utilisé pour les nom scientifiques.
66
			// Code de la version du référentiel utilisé pour les nom scientifiques.
67
			var NOM_SCI_VERSION = "<?=$ns_version?>";
67
			var NOM_SCI_VERSION = "<?=$ns_version?>";
68
			// Indication de la présence d'une espèce imposée
68
			// Indication de la présence d'une espèce imposée
69
			var ESPECE_IMPOSEE = "<?=$espece_imposee; ?>";
69
			var ESPECE_IMPOSEE = "<?=$espece_imposee; ?>";
70
			// Tableau d'informations sur l'espèce imposée
70
			// Tableau d'informations sur l'espèce imposée
71
			var INFOS_ESPECE_IMPOSEE = <?=$infos_espece; ?>;
71
			var INFOS_ESPECE_IMPOSEE = <?=$infos_espece; ?>;
72
			// Nombre d'élément dans les listes d'auto-complétion
72
			// Nombre d'élément dans les listes d'auto-complétion
73
			var AUTOCOMPLETION_ELEMENTS_NBRE = 20;
73
			var AUTOCOMPLETION_ELEMENTS_NBRE = 20;
74
			// Indication de la présence d'un référentiel imposé
74
			// Indication de la présence d'un référentiel imposé
75
			var REFERENTIEL_IMPOSE = "<?=$referentiel_impose; ?>";
75
			var REFERENTIEL_IMPOSE = "<?=$referentiel_impose; ?>";
76
			// Indication des version utilisées de chaque référentiel
76
			// Indication des version utilisées de chaque référentiel
77
			var PROJETS_VERSIONS = <?=json_encode($projets_versions)?>;
77
			var PROJETS_VERSIONS = <?=json_encode($projets_versions)?>;
78
			// URL du web service permettant l'auto-complétion des noms scientifiques.
78
			// URL du web service permettant l'auto-complétion des noms scientifiques.
79
			var SERVICE_AUTOCOMPLETION_NOM_SCI_URL = "<?=$url_ws_autocompletion_ns?>?"+
79
			var SERVICE_AUTOCOMPLETION_NOM_SCI_URL = "<?=$url_ws_autocompletion_ns?>?"+
80
					"masque={masque}&"+
80
					"masque={masque}&"+
81
					"recherche=etendue&"+
81
					"recherche=etendue&"+
82
					"retour.champs=famille,nom_retenu,nom_retenu_complet,num_taxonomique,nom_retenu.id&"+
82
					"retour.champs=famille,nom_retenu,nom_retenu_complet,num_taxonomique,nom_retenu.id&"+
83
					//"version.projet="+NOM_SCI_VERSION+"&"+
83
					//"version.projet="+NOM_SCI_VERSION+"&"+
84
					"ns.structure=au"+"&"+
84
					"ns.structure=au"+"&"+
85
					"navigation.limite="+AUTOCOMPLETION_ELEMENTS_NBRE;
85
					"navigation.limite="+AUTOCOMPLETION_ELEMENTS_NBRE;
86
			// URL du web service permettant l'auto-complétion des noms scientifiques.
86
			// URL du web service permettant l'auto-complétion des noms scientifiques.
87
			var SERVICE_AUTOCOMPLETION_NOM_SCI_URL_TPL = "<?=$url_ws_autocompletion_ns_tpl?>?"+
87
			var SERVICE_AUTOCOMPLETION_NOM_SCI_URL_TPL = "<?=$url_ws_autocompletion_ns_tpl?>?"+
88
					"masque={masque}&"+
88
					"masque={masque}&"+
89
					"recherche=etendue&"+
89
					"recherche=etendue&"+
90
					"retour.champs=famille,nom_retenu,nom_retenu_complet,num_taxonomique,nom_retenu.id&"+
90
					"retour.champs=famille,nom_retenu,nom_retenu_complet,num_taxonomique,nom_retenu.id&"+
91
					//"version.projet="+NOM_SCI_VERSION+"&"+
91
					//"version.projet="+NOM_SCI_VERSION+"&"+
92
					"ns.structure=au"+"&"+
92
					"ns.structure=au"+"&"+
93
					"navigation.limite="+AUTOCOMPLETION_ELEMENTS_NBRE;
93
					"navigation.limite="+AUTOCOMPLETION_ELEMENTS_NBRE;
94
			// Nombre d'observations max autorisé avant transmission
94
			// Nombre d'observations max autorisé avant transmission
95
			var OBS_MAX_NBRE = 10;
95
			var OBS_MAX_NBRE = 10;
96
			// Durée d'affichage en milliseconde des messages d'informations
96
			// Durée d'affichage en milliseconde des messages d'informations
97
			var DUREE_MESSAGE = 15000;
97
			var DUREE_MESSAGE = 15000;
98
			// Squelette d'URL du web service d'eFlore fournissant les noms de communes.
98
			// Squelette d'URL du web service d'eFlore fournissant les noms de communes.
99
			var SERVICE_NOM_COMMUNE_URL = "http://api.tela-botanica.org/service:eflore:0.1/osm/nom-commune?lon={lon}&lat={lat}";
99
			var SERVICE_NOM_COMMUNE_URL = "http://api.tela-botanica.org/service:eflore:0.1/osm/nom-commune?lon={lon}&lat={lat}";
100
			// Squelette d'URL du web service d'eFlore fournissant les noms de communes hors de France (localisation approximative).
100
			// Squelette d'URL du web service d'eFlore fournissant les noms de communes hors de France (localisation approximative).
101
			var SERVICE_NOM_COMMUNE_URL_ALT = "http://api.tela-botanica.org/service:eflore:0.1/wikipedia/nom-commune?lon={lon}&lat={lat}&nbre=1";
101
			var SERVICE_NOM_COMMUNE_URL_ALT = "http://api.tela-botanica.org/service:eflore:0.1/wikipedia/nom-commune?lon={lon}&lat={lat}&nbre=1";
102
			// URL du marqueur à utiliser dans la carte Google Map
102
			// URL du marqueur à utiliser dans la carte Google Map
103
			var GOOGLE_MAP_MARQUEUR_URL = "<?=$url_base?>modules/saisie/squelettes/defaut/img/marqueurs/epingle.png";
103
			var GOOGLE_MAP_MARQUEUR_URL = "<?=$url_base?>modules/saisie/squelettes/defaut/img/marqueurs/epingle.png";
104
			// URL de l'icône du chargement en cours
104
			// URL de l'icône du chargement en cours
105
			var CHARGEMENT_ICONE_URL = "<?=$url_base?>modules/saisie/squelettes/defaut/img/icones/chargement.gif";
105
			var CHARGEMENT_ICONE_URL = "<?=$url_base?>modules/saisie/squelettes/defaut/img/icones/chargement.gif";
106
			// URL de l'icône du chargement en cours d'une image
106
			// URL de l'icône du chargement en cours d'une image
107
			var CHARGEMENT_IMAGE_URL = "<?=$url_base?>modules/saisie/squelettes/defaut/img/icones/chargement-image.gif";
107
			var CHARGEMENT_IMAGE_URL = "<?=$url_base?>modules/saisie/squelettes/defaut/img/icones/chargement-image.gif";
108
			// URL de l'icône du calendrier
108
			// URL de l'icône du calendrier
109
			var CALENDRIER_ICONE_URL = "<?=$url_base?>modules/saisie/squelettes/defaut/img/icones/calendrier.png";
109
			var CALENDRIER_ICONE_URL = "<?=$url_base?>modules/saisie/squelettes/defaut/img/icones/calendrier.png";
110
			// URL de l'icône du calendrier
110
			// URL de l'icône du calendrier
111
			var PAS_DE_PHOTO_ICONE_URL = "<?=$url_base?>modules/saisie/squelettes/defaut/img/icones/pasdephoto.png";
111
			var PAS_DE_PHOTO_ICONE_URL = "<?=$url_base?>modules/saisie/squelettes/defaut/img/icones/pasdephoto.png";
112
		//]]>
112
		//]]>
113
		</script>
113
		</script>
114
		<script type="text/javascript" src="<?=$url_base?>modules/saisie/squelettes/defaut/js/defaut.js"></script>
114
		<script type="text/javascript" src="<?=$url_base?>modules/saisie/squelettes/defaut/js/defaut.js"></script>
115
			
115
			
116
		<!-- CSS -->
116
		<!-- CSS -->
117
		<link href="http://www.tela-botanica.org/commun/jquery/jquery-ui/1.8.18/css/smoothness/jquery-ui-1.8.18.custom.css" rel="stylesheet" type="text/css" media="screen" />
117
		<link href="http://www.tela-botanica.org/commun/jquery/jquery-ui/1.8.18/css/smoothness/jquery-ui-1.8.18.custom.css" rel="stylesheet" type="text/css" media="screen" />
118
		<link href="http://www.tela-botanica.org/commun/bootstrap/2.0.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" media="screen" />
118
		<link href="http://www.tela-botanica.org/commun/bootstrap/2.0.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" media="screen" />
119
		<link href="http://www.tela-botanica.org/commun/bootstrap/2.0.2/css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css" media="screen" />
119
		<link href="http://www.tela-botanica.org/commun/bootstrap/2.0.2/css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css" media="screen" />
120
		<link href="<?=$url_base?>modules/saisie/squelettes/defaut/css/<?=isset($_GET['style']) ? $_GET['style'] : 'defaut'?>.css" rel="stylesheet" type="text/css" media="screen" />
120
		<link href="<?=$url_base?>modules/saisie/squelettes/defaut/css/<?=isset($_GET['style']) ? $_GET['style'] : 'defaut'?>.css" rel="stylesheet" type="text/css" media="screen" />
121
	</head>
121
	</head>
122
 
122
 
123
	<body data-spy="scroll">
123
	<body data-spy="scroll">
124
		<div class="container">
124
		<div class="container">
125
			<div class="row-fluid">
125
			<div class="row-fluid">
126
				<div class="span6 page-header">
126
				<div class="span6 page-header">
127
					<div class="row">
127
					<div class="row">
128
						<div class="span6">
128
						<div class="span6">
129
							<h1>
129
							<h1>
130
								<?php if($logo != 'defaut' && $logo != '0') { ?>
130
								<?php if($logo != 'defaut' && $logo != '0') { ?>
131
									<img id="logo-titre" class="span1" src="<?= $logo ?>" alt="Logo" /> 
131
									<img id="logo-titre" class="span1" src="<?= $logo ?>" alt="Logo" /> 
132
								<?php } else if($logo == 'defaut') { ?>
132
								<?php } else if($logo == 'defaut') { ?>
133
									<img id="logo-titre" class="span1" src="<?=$url_base?>/modules/saisie/squelettes/defaut/img/logos/tela_botanica.png" alt="Tela Botanica" />
133
									<img id="logo-titre" class="span1" src="<?=$url_base?>/modules/saisie/squelettes/defaut/img/logos/tela_botanica.png" alt="Tela Botanica" />
134
								<?php } ?>
134
								<?php } ?>
135
								<?php if($titre != 'defaut') { ?> 
135
								<?php if($titre != 'defaut') { ?> 
136
									<?= $titre; ?>
136
									<?= $titre; ?>
137
								<?php } else { ?>
137
								<?php } else { ?>
138
									Ajout rapide d'observations
138
									Ajout rapide d'observations
139
								<?php } ?>
139
								<?php } ?>
140
							</h1>
140
							</h1>
141
						</div>
141
						</div>
142
					</div>
142
					</div>
143
					<div class="row">
143
					<div class="row">
144
						<div class="span6">
144
						<div class="span6">
145
							<p>
145
							<p>
146
								Cet outil vous permet de partager simplement vos observations avec le 
146
								Cet outil vous permet de partager simplement vos observations avec le 
147
								<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>).
147
								<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>).
148
								Identifiez-vous bien pour ensuite retrouver et gérer vos données dans
148
								Identifiez-vous bien pour ensuite retrouver et gérer vos données dans
149
								<a href="http://www.tela-botanica.org/appli:cel">votre Carnet en ligne</a>.
149
								<a href="http://www.tela-botanica.org/appli:cel">votre Carnet en ligne</a>.
150
								Créez jusqu'à 10 observations (avec 10Mo max d'images) puis partagez-les avec le bouton 'transmettre'.
150
								Créez jusqu'à 10 observations (avec 10Mo max d'images) puis partagez-les avec le bouton 'transmettre'.
151
								Elles apparaissent immédiatement sur les <a href="http://www.tela-botanica.org/site:botanique?langue=fr">cartes et galeries photos </a> du site.
151
								Elles apparaissent immédiatement sur les <a href="http://www.tela-botanica.org/site:botanique?langue=fr">cartes et galeries photos </a> du site.
152
							</p>
152
							</p>
153
							<p class="discretion">
153
							<p class="discretion">
154
								Pour toute question ou remarque,
154
								Pour toute question ou remarque,
155
								<a href="<?= $url_remarques ?>?email=cel_remarques@tela-botanica.org&pageSource=<?php echo urlencode('http://'.$_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF'].'?'.$_SERVER['QUERY_STRING']); ?>"
155
								<a href="<?= $url_remarques ?>?email=cel_remarques@tela-botanica.org&pageSource=<?php echo urlencode('http://'.$_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF'].'?'.$_SERVER['QUERY_STRING']); ?>"
156
								  target="_blank"
156
								  target="_blank"
157
								  onclick="javascript:window.open(this.getAttribute('href'), 'Tela Botanica - Remarques', config='height=700, width=640, scrollbars=yes, resizable=yes'); return false;">
157
								  onclick="javascript:window.open(this.getAttribute('href'), 'Tela Botanica - Remarques', config='height=700, width=640, scrollbars=yes, resizable=yes'); return false;">
158
								  contactez-nous</a>
158
								  contactez-nous</a>
159
								
159
								
160
							</p>
160
							</p>
161
							<p class="discretion">
161
							<p class="discretion">
162
								Une fois familiarisé avec l'interface vous pouvez cliquer sur ce bouton pour désactiver l'aide.
162
								Une fois familiarisé avec l'interface vous pouvez cliquer sur ce bouton pour désactiver l'aide.
163
								<button id="btn-aide" class="btn btn-mini btn-success">
163
								<button id="btn-aide" class="btn btn-mini btn-success">
164
									<span class="icon-question-sign icon-white"></span>
164
									<span class="icon-question-sign icon-white"></span>
165
									<span id="btn-aide-txt" >Désactiver l'aide</span>
165
									<span id="btn-aide-txt" >Désactiver l'aide</span>
166
								</button> 
166
								</button> 
167
							</p>
167
							</p>
168
						</div>
168
						</div>
169
					</div>
169
					</div>
170
				</div>
170
				</div>
171
				
171
				
172
				<div class="span6">
172
				<div class="span6">
173
					<div class="well">
173
					<div class="well">
174
						<h2>Observateur</h2>
174
						<h2>Observateur</h2>
175
						<form id="form-observateur" action="#" class="" autocomplete="on">
175
						<form id="form-observateur" action="#" class="" autocomplete="on">
176
							<div class="row-fluid">
176
							<div class="row-fluid">
177
								<div class="span6" rel="tooltip" data-placement="right"
177
								<div class="span6" rel="tooltip" data-placement="right"
178
									title="Saisissez le courriel avec lequel vous être inscrit à Tela Botanica.
178
									title="Saisissez le courriel avec lequel vous être inscrit à Tela Botanica.
179
										Si vous n'êtes pas inscrit, ce n'est pas grave, vous pourrez le faire 
179
										Si vous n'êtes pas inscrit, ce n'est pas grave, vous pourrez le faire 
180
										ultérieurement. Des informations complémentaires vont vous être 
180
										ultérieurement. Des informations complémentaires vont vous être 
181
										demandées : prénom et nom.">
181
										demandées : prénom et nom.">
182
									<label for="courriel"  
182
									<label for="courriel"  
183
										title="Veuillez saisir votre adresse courriel.">
183
										title="Veuillez saisir votre adresse courriel.">
184
										<strong class="obligatoire">*</strong> Courriel
184
										<strong class="obligatoire">*</strong> Courriel
185
									</label>
185
									</label>
186
									<div class="input-prepend">
186
									<div class="input-prepend">
187
										<span class="add-on">
187
										<span class="add-on">
188
											<i class="icon-envelope"></i>
188
											<i class="icon-envelope"></i>
189
										</span>
189
										</span>
190
										<input id="courriel" class="input-medium" name="courriel" type="text"/>
190
										<input id="courriel" class="input-medium" name="courriel" type="text"/>
191
										<input id="id_utilisateur" name="id_utilisateur" type="hidden"/>
191
										<input id="id_utilisateur" name="id_utilisateur" type="hidden"/>
192
									</div>
192
									</div>
193
								</div>
193
								</div>
194
								<div id="zone-courriel-confirmation" class="span6 hidden">
194
								<div id="zone-courriel-confirmation" class="span6 hidden">
195
									<label for="courriel_confirmation"  
195
									<label for="courriel_confirmation"  
196
										title="Veuillez saisir confirmer le courriel.">
196
										title="Veuillez saisir confirmer le courriel.">
197
										<strong class="obligatoire">*</strong> Courriel (confirmation)
197
										<strong class="obligatoire">*</strong> Courriel (confirmation)
198
									</label>
198
									</label>
199
									<div class="input-prepend">
199
									<div class="input-prepend">
200
										<span class="add-on">
200
										<span class="add-on">
201
											<i class="icon-envelope"></i>
201
											<i class="icon-envelope"></i>
202
										</span><input id="courriel_confirmation" class="input-medium" name="courriel_confirmation" type="text"/>
202
										</span><input id="courriel_confirmation" class="input-medium" name="courriel_confirmation" type="text"/>
203
									</div>
203
									</div>
204
								</div>
204
								</div>
205
							</div>
205
							</div>
206
							<div id="zone-prenom-nom" class="row-fluid hidden">
206
							<div id="zone-prenom-nom" class="row-fluid hidden">
207
								<div class="span6">
207
								<div class="span6">
208
									<label for="prenom">Prénom</label>
208
									<label for="prenom">Prénom</label>
209
									<div>
209
									<div>
210
										<input id="prenom" name="prenom" class="span3" type="text"/>
210
										<input id="prenom" name="prenom" class="span3" type="text"/>
211
									</div>
211
									</div>
212
								</div>
212
								</div>
213
								<div class="span6">
213
								<div class="span6">
214
									<label for="nom">Nom</label>
214
									<label for="nom">Nom</label>
215
									<div>
215
									<div>
216
										<input id="nom" name="nom"  class="span3" type="text"/>
216
										<input id="nom" name="nom"  class="span3" type="text"/>
217
									</div>
217
									</div>
218
								</div>
218
								</div>
219
							</div>
219
							</div>
220
						</form>
220
						</form>
221
					</div>
221
					</div>
222
				</div>
222
				</div>
223
			</div>
223
			</div>
224
			<!-- Messages d'erreur du formulaire-->
224
			<!-- Messages d'erreur du formulaire-->
225
			<div class="row">
225
			<div class="row">
226
				<div class="zone-alerte span6 offset3">
226
				<div class="zone-alerte span6 offset3">
227
					<div id="dialogue-bloquer-copier-coller" class="alert alert-info alert-block" style="display:none;">
227
					<div id="dialogue-bloquer-copier-coller" class="alert alert-info alert-block" style="display:none;">
228
						<a class="close">×</a>
228
						<a class="close">×</a>
229
						<h4 class="alert-heading">Information : copier/coller</h4>
229
						<h4 class="alert-heading">Information : copier/coller</h4>
230
						<p>
230
						<p>
231
							Merci de ne pas copier/coller votre courriel.<br/>
231
							Merci de ne pas copier/coller votre courriel.<br/>
232
							La double saisie permet de vérifier l'absence d'erreurs.
232
							La double saisie permet de vérifier l'absence d'erreurs.
233
						</p>
233
						</p>
234
					</div>
234
					</div>
235
					<div id="dialogue-courriel-introuvable" class="alert alert-info alert-block" style="display:none;">
235
					<div id="dialogue-courriel-introuvable" class="alert alert-info alert-block" style="display:none;">
236
						<a class="close">×</a>
236
						<a class="close">×</a>
237
						<h4 class="alert-heading">Information : courriel introuvable</h4>
237
						<h4 class="alert-heading">Information : courriel introuvable</h4>
238
						<p>
238
						<p>
239
							Vous n'êtes pas inscrit à Tela Botanica avec ce courriel.<br/>
239
							Vous n'êtes pas inscrit à Tela Botanica avec ce courriel.<br/>
240
							Veuillez compléter les champs supplémentaires ou indiquer votre courriel d'inscription.<br/>
240
							Veuillez compléter les champs supplémentaires ou indiquer votre courriel d'inscription.<br/>
241
							Pour retrouver vos observations dans le <a href="http://www.tela-botanica.org/appli:cel">Carnet en ligne</a>, 
241
							Pour retrouver vos observations dans le <a href="http://www.tela-botanica.org/appli:cel">Carnet en ligne</a>, 
242
							il sera nécesaire de <a href="http://www.tela-botanica.org/page:inscription">vous inscrire à Tela Botanica</a>.
242
							il sera nécesaire de <a href="http://www.tela-botanica.org/page:inscription">vous inscrire à Tela Botanica</a>.
243
						</p>
243
						</p>
244
					</div>
244
					</div>
245
					<div id="dialogue-google-map" class="alert alert-info alert-block" style="display: none;">
245
					<div id="dialogue-google-map" class="alert alert-info alert-block" style="display: none;">
246
						<a class="close">×</a>
246
						<a class="close">×</a>
247
						<h4 class="alert-heading">Information sur Google Map</h4>
247
						<h4 class="alert-heading">Information sur Google Map</h4>
248
						<div class="contenu"></div>
248
						<div class="contenu"></div>
249
					</div>
249
					</div>
250
				</div>
250
				</div>
251
			</div>
251
			</div>
252
			<div class="row-fluid">
252
			<div class="row-fluid">
253
				<div class="span12">
253
				<div class="span12">
254
					<div class="well">
254
					<div class="well">
255
						<div class="row-fluid">
255
						<div class="row-fluid">
256
							<div class="span6">
256
							<div class="span6">
257
								<div>
257
								<div>
258
									<div class="row-fluid">
258
									<div class="row-fluid">
259
										<div class="span12">
259
										<div class="span12">
260
											<h2>Lieu du relevé</h2>
260
											<h2>Lieu du relevé</h2>
261
										</div>
261
										</div>
262
									</div>
262
									</div>
263
									<div class="row-fluid">
263
									<div class="row-fluid">
264
										<div class="span4">
264
										<div class="span4">
265
											<label for="map_canvas" title="Veuillez localiser l'observation">
265
											<label for="map_canvas" title="Veuillez localiser l'observation">
266
												Géolocalisation
266
												Géolocalisation
267
											</label>
267
											</label>
268
										</div>
268
										</div>
269
										<div class="span8 droite">
269
										<div class="span8 droite">
270
											<form id="form-carte-recherche" class="form-search form-horizontal" action="#" >
270
											<form id="form-carte-recherche" class="form-search form-horizontal" action="#" >
271
												<div class="control-group">
271
												<div class="control-group">
272
													<label for="carte-recherche">Rechercher</label>
272
													<label for="carte-recherche">Rechercher</label>
273
													<input id="carte-recherche" class="search-query" type="text" value=""
273
													<input id="carte-recherche" class="search-query" type="text" value=""
274
														rel="tooltip"
274
														rel="tooltip"
275
														title="Permet de centrer la carte sur le lieu recherché."
275
														title="Permet de centrer la carte sur le lieu recherché."
276
														placeholder="Centrer la carte sur un lieu..."/>
276
														placeholder="Centrer la carte sur un lieu..."/>
277
												</div>
277
												</div>
278
											</form>
278
											</form>
279
										</div>
279
										</div>
280
									</div>
280
									</div>
281
									<div class="row-fluid">
281
									<div class="row-fluid">
282
										<div class="span12">
282
										<div class="span12">
283
											<div id="map-canvas" rel="tooltip" 
283
											<div id="map-canvas" rel="tooltip" 
284
												title="Vous pouvez cliquer sur la carte pour déplacer le marqueur
284
												title="Vous pouvez cliquer sur la carte pour déplacer le marqueur
285
													représentant votre station ou bien le glisser-déposer sur 
285
													représentant votre station ou bien le glisser-déposer sur 
286
													le lieu souhaité."></div>
286
													le lieu souhaité."></div>
287
										</div>
287
										</div>
288
									</div>
288
									</div>
289
									<div class="row-fluid">
289
									<div class="row-fluid">
290
										<label for="coordonnees-geo" class="span7">
290
										<label for="coordonnees-geo" class="span7">
291
											<a href="#" class="afficher-coord">Afficher</a>
291
											<a href="#" class="afficher-coord">Afficher</a>
292
											<a href="#" class="afficher-coord" style="display:none;">Cacher</a>
292
											<a href="#" class="afficher-coord" style="display:none;">Cacher</a>
293
											les coordonnées géographiques
293
											les coordonnées géographiques
294
											<span id="lat-lon-info" class="info" 
294
											<span id="lat-lon-info" class="info" 
295
												rel="tooltip" 
295
												rel="tooltip" 
296
												title="Système géodésique mondial, révision de 1984 - Coordonnées non projetées">
296
												title="Système géodésique mondial, révision de 1984 - Coordonnées non projetées">
297
												(WGS84)
297
												(WGS84)
298
											</span>
298
											</span>
299
										</label>
299
										</label>
300
										<div id="info-commune" class="span5">
300
										<div id="info-commune" class="span5">
301
								    		<span for="marqueur-commune">Commune : </span>
301
								    		<span for="marqueur-commune">Commune : </span>
302
								    		<span id="marqueur-commune">
302
								    		<span id="marqueur-commune">
303
								    			<span id="commune-nom" class="commune-info"></span>
303
								    			<span id="commune-nom" class="commune-info"></span>
304
								    			(<span id="commune-code-insee" class="commune-info" 
304
								    			(<span id="commune-code-insee" class="commune-info" 
305
								    				rel="tooltip" 
305
								    				rel="tooltip" 
306
								    				title="Code INSEE de la commune"></span>)
306
								    				title="Code INSEE de la commune"></span>)
307
								    		</span>
307
								    		</span>
308
							    		</div>
308
							    		</div>
309
									</div>
309
									</div>
310
									<form id="form-station" class="control-group" action="#" enctype="multipart/form-data" autocomplete="on">
310
									<form id="form-station" class="control-group" action="#" enctype="multipart/form-data" autocomplete="on">
311
										<div id="coordonnees-geo" class="well" style="display:none;">
311
										<div id="coordonnees-geo" class="well" style="display:none;">
312
											<div class="row-fluid form-inline">
312
											<div class="row-fluid form-inline">
313
												<div id="coord-lat" class="span4">				
313
												<div id="coord-lat" class="span4">				
314
													<label for="latitude">Latitude</label>
314
													<label for="latitude">Latitude</label>
315
													<div>
315
													<div>
316
														<input id="latitude" class="input-mini" name="latitude" type="text" value=""/>
316
														<input id="latitude" class="input-mini" name="latitude" type="text" value=""/>
317
													</div>
317
													</div>
318
												</div>
318
												</div>
319
												<div id="coord-lng" class="span4">
319
												<div id="coord-lng" class="span4">
320
													<label for="longitude">Longitude</label>
320
													<label for="longitude">Longitude</label>
321
													<div>
321
													<div>
322
														<input id="longitude" class="input-mini" name="longitude" type="text" value=""/>
322
														<input id="longitude" class="input-mini" name="longitude" type="text" value=""/>
323
													</div>
323
													</div>
324
												</div>
324
												</div>
325
												<div class="span1">
325
												<div class="span1">
326
													<div>
326
													<div>
327
														<input id="geolocaliser" type="button" value="Voir sur la carte" 
327
														<input id="geolocaliser" type="button" value="Voir sur la carte" 
328
															rel="tooltip"
328
															rel="tooltip"
329
															title="Centre la carte sur les coordonnées de latitude et longitude saisies."/>
329
															title="Centre la carte sur les coordonnées de latitude et longitude saisies."/>
330
													</div>
330
													</div>
331
												</div>
331
												</div>
332
									    	</div>
332
									    	</div>
333
										</div>
333
										</div>
334
										<div class="row-fluid">
334
										<div class="row-fluid">
335
											<div class="span4" rel="tooltip" 
335
											<div class="span4" rel="tooltip" 
336
												title="Toponyme plus précis que la commune, utilisé localement et se trouvant souvent sur les cartes au 1/25 000." >
336
												title="Toponyme plus précis que la commune, utilisé localement et se trouvant souvent sur les cartes au 1/25 000." >
337
												<label for="lieudit">Lieu-dit</label>
337
												<label for="lieudit">Lieu-dit</label>
338
												<div>
338
												<div>
339
													<input type="text" id="lieudit" class="span2" name="lieudit"/>
339
													<input type="text" id="lieudit" class="span2" name="lieudit"/>
340
												</div>
340
												</div>
341
											</div>
341
											</div>
342
											<div class="span4" rel="tooltip" 
342
											<div class="span4" rel="tooltip" 
343
												title="Lieu précis de l'observation définissant une unité écologique homogène (ex: le pré derrière la maison)." >
343
												title="Lieu précis de l'observation définissant une unité écologique homogène (ex: le pré derrière la maison)." >
344
												<label for="station">Station</label>
344
												<label for="station">Station</label>
345
												<div>
345
												<div>
346
													<input type="text" id="station" class="span2" name="station"/>
346
													<input type="text" id="station" class="span2" name="station"/>
347
												</div>
347
												</div>
348
											</div>
348
											</div>
349
											<div class="span4" rel="tooltip" 
349
											<div class="span4" rel="tooltip" 
350
												title="Type d'habitat plus ou moins standardisé dans les codes Corine ou Catminat (ex: prairie humide).">
350
												title="Type d'habitat plus ou moins standardisé dans les codes Corine ou Catminat (ex: prairie humide).">
351
												<label for="milieux">Milieu</label>
351
												<label for="milieux">Milieu</label>
352
												<div>
352
												<div>
353
													<input type="text" id="milieu" class="span2" name="milieu" />
353
													<input type="text" id="milieu" class="span2" name="milieu" />
354
												</div>
354
												</div>
355
											</div>
355
											</div>
356
										</div>
356
										</div>
357
									</form>
357
									</form>
358
								</div>
358
								</div>
359
							</div>
359
							</div>
360
							<div class="span6">
360
							<div class="span6">
361
								<form id="form-obs" action="#" autocomplete="on">
361
								<form id="form-obs" action="#" autocomplete="on">
362
									<h2>Observation</h2> 
362
									<h2>Observation</h2> 
363
									<?php if(!$referentiel_impose && !$espece_imposee) : ?>
363
									<?php if(!$referentiel_impose && !$espece_imposee) : ?>
364
										<div class="row-fluid">
364
										<div class="row-fluid">
365
											<div rel="tooltip" 
365
											<div rel="tooltip" 
366
												title="Sélectionnez le référentiel associé à votre relevé">
366
												title="Sélectionnez le référentiel associé à votre relevé">
367
												<label for="referentiel" title="Réferentiel">
367
												<label for="referentiel" title="Réferentiel">
368
													Référentiel
368
													Référentiel
369
												</label>
369
												</label>
370
												<span class="input-prepend">
370
												<span class="input-prepend">
371
													<span id="referentiel-icone" class="add-on"><i class="icon-book"></i></span>
371
													<span id="referentiel-icone" class="add-on"><i class="icon-book"></i></span>
372
													<select id="referentiel" autocomplete="off">
372
													<select id="referentiel" autocomplete="off">
373
														<option value="bdtfx" selected="selected" title="Trachéophytes de France métropolitaine">Métropole (BDTFX)</option>
373
														<option value="bdtfx" selected="selected" title="Trachéophytes de France métropolitaine">Métropole (BDTFX)</option>
374
														<option value="bdtxa" title="Trachéophytes des Antilles">Antilles françaises (BDTXA)</option>
374
														<option value="bdtxa" title="Trachéophytes des Antilles">Antilles françaises (BDTXA)</option>
375
														<option value="isfan" title="Afrique du Nord">Afrique du Nord (ISFAN)</option>
375
														<option value="isfan" title="Afrique du Nord">Afrique du Nord (ISFAN)</option>
376
														<option value="bdtao" title="Afrique de l'Ouest et du Centre">Afrique de l'Ouest et du Centre (BDTAO)</option>
376
														<option value="apd" title="Afrique de l'Ouest et du Centre">Afrique de l'Ouest et du Centre (APD)</option>
377
													</select>
377
													</select>
378
												</span>
378
												</span>
379
											</div>
379
											</div>
380
										</div>
380
										</div>
381
									<?php endif; ?>
381
									<?php endif; ?>
382
									<div class="row-fluid">
382
									<div class="row-fluid">
383
										<div class="span4" rel="tooltip" 
383
										<div class="span4" rel="tooltip" 
384
											title="Vous pouvez cliquer sur l'icône de calendrier pour 
384
											title="Vous pouvez cliquer sur l'icône de calendrier pour 
385
												sélectionner une date dans un calendrier.">
385
												sélectionner une date dans un calendrier.">
386
											<label for="date" title="Veuillez indiquer la date du relevé au format jj/mm/aaaa">
386
											<label for="date" title="Veuillez indiquer la date du relevé au format jj/mm/aaaa">
387
												Date du relevé
387
												Date du relevé
388
											</label>
388
											</label>
389
											<div class="input-prepend">
389
											<div class="input-prepend">
390
												<span id="date-icone" class="add-on"></span><input id="date" 
390
												<span id="date-icone" class="add-on"></span><input id="date" 
391
													class="input-small" name="date" type="text" 
391
													class="input-small" name="date" type="text" 
392
													placeholder="jj/mm/aaaa" />
392
													placeholder="jj/mm/aaaa" />
393
											</div>
393
											</div>
394
										</div>
394
										</div>
395
										<div id="taxon-input-groupe" class="span8" rel="tooltip" 
395
										<div id="taxon-input-groupe" class="span8" rel="tooltip" 
396
											title="Sélectionnez une espèce dans la liste déroulante pour lier 
396
											title="Sélectionnez une espèce dans la liste déroulante pour lier 
397
												votre nom au référentiel selectionné. Si vous
397
												votre nom au référentiel selectionné. Si vous
398
												le désirez vous pouvez aussi saisir un nom absent du référentiel 
398
												le désirez vous pouvez aussi saisir un nom absent du référentiel 
399
												(Ex. : 'fleur violette' ou 'viola sinensis???')." >
399
												(Ex. : 'fleur violette' ou 'viola sinensis???')." >
400
											<label for="taxon" title="Choisissez une espèce">
400
											<label for="taxon" title="Choisissez une espèce">
401
												<strong class="obligatoire">*</strong> 
401
												<strong class="obligatoire">*</strong> 
402
												Espèce <?= $referentiel_impose ? '('.$ns_projet.')' : '' ?> <em>(ou indication sur la plante)</em>
402
												Espèce <?= $referentiel_impose ? '('.$ns_projet.')' : '' ?> <em>(ou indication sur la plante)</em>
403
											</label>
403
											</label>
404
											<div class="input-prepend">
404
											<div class="input-prepend">
405
												<span class="add-on">
405
												<span class="add-on">
406
													<i class="icon-leaf"></i>
406
													<i class="icon-leaf"></i>
407
												</span><input type="text" id="taxon" name="taxon" value="<?= $nom_sci_espece_defaut; ?>" />
407
												</span><input type="text" id="taxon" name="taxon" value="<?= $nom_sci_espece_defaut; ?>" />
408
											</div>
408
											</div>
409
										</div>
409
										</div>
410
									</div>
410
									</div>
411
									<div class="row-fluid">
411
									<div class="row-fluid">
412
										<div class="span12">
412
										<div class="span12">
413
											<label for="notes">Commentaires</label>
413
											<label for="notes">Commentaires</label>
414
											<div>
414
											<div>
415
												<textarea id="notes" class="span6" rows="7" name="notes" 
415
												<textarea id="notes" class="span6" rows="7" name="notes" 
416
													placeholder="vous pouvez éventuellement ajouter des informations complémentaires à votre observation (altitude, taille de la plante...)"></textarea>
416
													placeholder="vous pouvez éventuellement ajouter des informations complémentaires à votre observation (altitude, taille de la plante...)"></textarea>
417
											</div>
417
											</div>
418
										</div>
418
										</div>
419
									</div>
419
									</div>
420
								</form>
420
								</form>
421
								<form id="form-upload" class="form-horizontal" action="<?= $url_ws_upload ?>?projet=sauvages"
421
								<form id="form-upload" class="form-horizontal" action="<?= $url_ws_upload ?>?projet=sauvages"
422
									method="post" enctype="multipart/form-data">
422
									method="post" enctype="multipart/form-data">
423
									<h2>Image(s) de cette plante</h2> 
423
									<h2>Image(s) de cette plante</h2> 
424
									<strong>Ajouter une image</strong> 
424
									<strong>Ajouter une image</strong> 
425
									<p class="miniature-info" class="discretion help-inline">Les photos doivent être au format JPEG et ne doivent pas excéder 5Mo chacunes.</p>
425
									<p class="miniature-info" class="discretion help-inline">Les photos doivent être au format JPEG et ne doivent pas excéder 5Mo chacunes.</p>
426
									<div id ="photos-conteneur">
426
									<div id ="photos-conteneur">
427
										<input type="file" id="fichier" name="fichier" accept="image/jpeg" />
427
										<input type="file" id="fichier" name="fichier" accept="image/jpeg" />
428
										<input type="hidden" name="MAX_FILE_SIZE" value="5242880"/>
428
										<input type="hidden" name="MAX_FILE_SIZE" value="5242880"/>
429
										<div id="miniatures">
429
										<div id="miniatures">
430
										</div>
430
										</div>
431
										<p class="miniature-msg" class="span12">&nbsp;</p>
431
										<p class="miniature-msg" class="span12">&nbsp;</p>
432
									</div>
432
									</div>
433
								</form>
433
								</form>
434
							</div>
434
							</div>
435
							<div class="row-fluid">
435
							<div class="row-fluid">
436
								<div class="span12 centre" rel="tooltip" 
436
								<div class="span12 centre" rel="tooltip" 
437
									title="Une fois les champs remplis, vous pouvez cliquer sur ce bouton pour 
437
									title="Une fois les champs remplis, vous pouvez cliquer sur ce bouton pour 
438
										ajouter votre observation à la liste à transmettre.">
438
										ajouter votre observation à la liste à transmettre.">
439
									<button id="ajouter-obs" class="btn btn-primary btn-large" type="button">
439
									<button id="ajouter-obs" class="btn btn-primary btn-large" type="button">
440
										Créer
440
										Créer
441
									</button>
441
									</button>
442
								</div>
442
								</div>
443
							</div>
443
							</div>
444
						</div>
444
						</div>
445
					</div>
445
					</div>
446
				</div>	
446
				</div>	
447
			</div>
447
			</div>
448
			<!-- Messages d'erreur du formulaire-->
448
			<!-- Messages d'erreur du formulaire-->
449
			<div class="row">
449
			<div class="row">
450
				<div class="zone-alerte span6 offset3">
450
				<div class="zone-alerte span6 offset3">
451
					<div id="dialogue-bloquer-creer-obs" class="alert alert-warning alert-block" style="display: none;">
451
					<div id="dialogue-bloquer-creer-obs" class="alert alert-warning alert-block" style="display: none;">
452
						<a class="close">×</a>
452
						<a class="close">×</a>
453
						<h4 class="alert-heading">Information : 10 observations maximum</h4>
453
						<h4 class="alert-heading">Information : 10 observations maximum</h4>
454
						<p>
454
						<p>
455
							Vous venez d'ajouter votre 10ème observation.<br/>
455
							Vous venez d'ajouter votre 10ème observation.<br/>
456
							Pour en ajouter de nouvelles, il est nécessaire de les transmettre en cliquant sur le bouton ci-dessous.
456
							Pour en ajouter de nouvelles, il est nécessaire de les transmettre en cliquant sur le bouton ci-dessous.
457
						</p>
457
						</p>
458
					</div>
458
					</div>
459
				</div>
459
				</div>
460
				<div class="zone-alerte span6 offset3">
460
				<div class="zone-alerte span6 offset3">
461
					<div id="dialogue-form-invalide" class="alert alert-warning alert-block" style="display: none;">
461
					<div id="dialogue-form-invalide" class="alert alert-warning alert-block" style="display: none;">
462
						<a class="close">×</a>
462
						<a class="close">×</a>
463
						<h4 class="alert-heading">Information : champs en erreur</h4>
463
						<h4 class="alert-heading">Information : champs en erreur</h4>
464
						<p>
464
						<p>
465
							Certains champs du formulaire sont mal remplis.<br/>
465
							Certains champs du formulaire sont mal remplis.<br/>
466
							Veuillez vérifier vos données.
466
							Veuillez vérifier vos données.
467
						</p>
467
						</p>
468
					</div>
468
					</div>
469
				</div>
469
				</div>
470
			</div>
470
			</div>
471
			<!-- Affiche le tableau récapitualif des observations ajoutées -->
471
			<!-- Affiche le tableau récapitualif des observations ajoutées -->
472
			<div id="zone-liste-obs" class="row-fluid">
472
			<div id="zone-liste-obs" class="row-fluid">
473
				<div class="span12">
473
				<div class="span12">
474
					<div class="well">
474
					<div class="well">
475
						<div class="row-fluid">
475
						<div class="row-fluid">
476
							<div class="span8">
476
							<div class="span8">
477
								<h2>Observations à transmettre : <span class="obs-nbre">0</span></h2>
477
								<h2>Observations à transmettre : <span class="obs-nbre">0</span></h2>
478
							</div>
478
							</div>
479
							<div class="span4 droite">
479
							<div class="span4 droite">
480
								<button id="transmettre-obs" class="btn btn-primary btn-large" 
480
								<button id="transmettre-obs" class="btn btn-primary btn-large" 
481
									type="button" disabled="disabled" rel="tooltip"
481
									type="button" disabled="disabled" rel="tooltip"
482
									title="Ajoute les observations ci-dessous à votre Carnet en Ligne et les rend publiques.">										
482
									title="Ajoute les observations ci-dessous à votre Carnet en Ligne et les rend publiques.">										
483
									Transmettre
483
									Transmettre
484
								</button>
484
								</button>
485
							</div>
485
							</div>
486
						</div>
486
						</div>
487
						<div id="liste-obs" ></div>
487
						<div id="liste-obs" ></div>
488
						<div class="row">
488
						<div class="row">
489
							<div class="zone-alerte span6 offset3">
489
							<div class="zone-alerte span6 offset3">
490
								<div id="dialogue-zero-obs" class="alert alert-block" style="display: none;">
490
								<div id="dialogue-zero-obs" class="alert alert-block" style="display: none;">
491
									<a class="close">×</a>
491
									<a class="close">×</a>
492
									<h4 class="alert-heading">Attention : aucune observation</h4>
492
									<h4 class="alert-heading">Attention : aucune observation</h4>
493
									<p>Veuillez saisir des observations pour les transmettres.</p>
493
									<p>Veuillez saisir des observations pour les transmettres.</p>
494
								</div>
494
								</div>
495
								
495
								
496
								<div id="dialogue-obs-transaction-ok" class="alert alert-success alert-block" style="display: none;"">
496
								<div id="dialogue-obs-transaction-ok" class="alert alert-success alert-block" style="display: none;"">
497
									<a class="close">×</a>
497
									<a class="close">×</a>
498
									<h4 class="alert-heading">Information : transmission des observations</h4>
498
									<h4 class="alert-heading">Information : transmission des observations</h4>
499
									<div class="alert-txt"></div>
499
									<div class="alert-txt"></div>
500
								</div>
500
								</div>
501
								
501
								
502
								<div id="dialogue-obs-transaction-ko" class="alert alert-error alert-block" style="display: none;">
502
								<div id="dialogue-obs-transaction-ko" class="alert alert-error alert-block" style="display: none;">
503
									<a class="close">×</a>
503
									<a class="close">×</a>
504
									<h4 class="alert-heading">Erreur : transmission des observations</h4>
504
									<h4 class="alert-heading">Erreur : transmission des observations</h4>
505
									<div class="alert-txt"></div>
505
									<div class="alert-txt"></div>
506
								</div>
506
								</div>
507
							</div>
507
							</div>
508
						</div>
508
						</div>
509
						
509
						
510
					</div>
510
					</div>
511
				</div>
511
				</div>
512
			</div>
512
			</div>
513
			
513
			
514
			<footer class="row-fluid">
514
			<footer class="row-fluid">
515
				<p class="span12">&copy; Tela Botanica 2012</p>
515
				<p class="span12">&copy; Tela Botanica 2012</p>
516
			</footer>
516
			</footer>
517
		
517
		
518
			<!-- Fenêtres modales -->
518
			<!-- Fenêtres modales -->
519
			<div id="chargement" class="modal-fenetre" style="display:none;">			
519
			<div id="chargement" class="modal-fenetre" style="display:none;">			
520
				<div id="chargement-centrage" class="modal-contenu">
520
				<div id="chargement-centrage" class="modal-contenu">
521
					<div class="progress progress-striped active">
521
					<div class="progress progress-striped active">
522
			 			<div id="barre-progression-upload" class="bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="10" style="">
522
			 			<div id="barre-progression-upload" class="bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="10" style="">
523
			    			<span class="sr-only">0/10 observations transmises</span>
523
			    			<span class="sr-only">0/10 observations transmises</span>
524
			  			</div>
524
			  			</div>
525
					</div>
525
					</div>
526
					<p id="chargement-txt" style="color:white;font-size:1.5em;">
526
					<p id="chargement-txt" style="color:white;font-size:1.5em;">
527
						Transfert des observations en cours...<br />
527
						Transfert des observations en cours...<br />
528
						Cela peut prendre plusieurs minutes en fonction de la taille des images et du nombre 
528
						Cela peut prendre plusieurs minutes en fonction de la taille des images et du nombre 
529
						d'observations à transférer.
529
						d'observations à transférer.
530
					</p>
530
					</p>
531
				</div>
531
				</div>
532
			</div>
532
			</div>
533
			
533
			
534
			<!-- Templates HTML -->
534
			<!-- Templates HTML -->
535
			<div id="tpl-transmission-ok" style="display:none;">
535
			<div id="tpl-transmission-ok" style="display:none;">
536
				<p class="msg">
536
				<p class="msg">
537
					Vos observations ont bien été transmises.<br />
537
					Vos observations ont bien été transmises.<br />
538
					Elles sont désormais consultables à travers les différents outils de visualisation 
538
					Elles sont désormais consultables à travers les différents outils de visualisation 
539
					du réseau (<a href="http://www.tela-botanica.org/site:botanique">eFlore</a>, 
539
					du réseau (<a href="http://www.tela-botanica.org/site:botanique">eFlore</a>, 
540
					<a href="http://www.tela-botanica.org/page:cel_galerie">galeries d'images</a>, 
540
					<a href="http://www.tela-botanica.org/page:cel_galerie">galeries d'images</a>, 
541
					<a href="http://www.tela-botanica.org/appli:test:del">identiplante</a>,
541
					<a href="http://www.tela-botanica.org/appli:test:del">identiplante</a>,
542
					<a href="http://www.tela-botanica.org/widget:cel:cartoPoint">cartographie (widget)</a>...)<br />
542
					<a href="http://www.tela-botanica.org/widget:cel:cartoPoint">cartographie (widget)</a>...)<br />
543
					Si vous souhaitez les modifier ou les supprimer, vous pouvez les retrouver en vous 
543
					Si vous souhaitez les modifier ou les supprimer, vous pouvez les retrouver en vous 
544
					connectant à votre <a href="http://www.tela-botanica.org/appli:cel">Carnet en ligne</a>.<br />
544
					connectant à votre <a href="http://www.tela-botanica.org/appli:cel">Carnet en ligne</a>.<br />
545
					N'oubliez pas qu'il est nécessaire de 
545
					N'oubliez pas qu'il est nécessaire de 
546
					<a href="http://www.tela-botanica.org/page:inscription">s'inscrire à Tela Botanica</a>
546
					<a href="http://www.tela-botanica.org/page:inscription">s'inscrire à Tela Botanica</a>
547
					au préalable, si ce n'est pas déjà fait.
547
					au préalable, si ce n'est pas déjà fait.
548
				</p>
548
				</p>
549
			</div>
549
			</div>
550
			<div id="tpl-transmission-ko" style="display:none;">
550
			<div id="tpl-transmission-ko" style="display:none;">
551
				<p class="msg">
551
				<p class="msg">
552
					Une erreur est survenue lors de la transmission d'une observation (indiquée en rouge).<br />
552
					Une erreur est survenue lors de la transmission d'une observation (indiquée en rouge).<br />
553
					Vous pouvez tenter de la retransmettre en cliquant à nouveau sur le bouton transmettre ou bien la supprimer 
553
					Vous pouvez tenter de la retransmettre en cliquant à nouveau sur le bouton transmettre ou bien la supprimer 
554
					et transmettre les suivantes.<br />
554
					et transmettre les suivantes.<br />
555
					Néanmoins, les observations n'apparaissant plus dans la liste "observations à transmettre", ont bien été transmises lors de votre précédente tentative. <br />
555
					Néanmoins, les observations n'apparaissant plus dans la liste "observations à transmettre", ont bien été transmises lors de votre précédente tentative. <br />
556
					Si le problème persiste, vous pouvez signaler le dysfonctionnement sur  
556
					Si le problème persiste, vous pouvez signaler le dysfonctionnement sur  
557
					<a href="<?= $url_remarques ?>?email=cel_remarques@tela-botanica.org&pageSource=<?php echo urlencode('http://'.$_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF'].'?'.$_SERVER['QUERY_STRING']); ?>"
557
					<a href="<?= $url_remarques ?>?email=cel_remarques@tela-botanica.org&pageSource=<?php echo urlencode('http://'.$_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF'].'?'.$_SERVER['QUERY_STRING']); ?>"
558
								  target="_blank"
558
								  target="_blank"
559
								  onclick="javascript:window.open(this.getAttribute('href'), 'Tela Botanica - Remarques', config='height=700, width=640, scrollbars=yes, resizable=yes'); return false;">
559
								  onclick="javascript:window.open(this.getAttribute('href'), 'Tela Botanica - Remarques', config='height=700, width=640, scrollbars=yes, resizable=yes'); return false;">
560
								  le formulaire de signalement d'erreurs</a>.
560
								  le formulaire de signalement d'erreurs</a>.
561
				</p>
561
				</p>
562
			</div>
562
			</div>
563
			
563
			
564
			<!-- Stats : Google Analytics-->
564
			<!-- Stats : Google Analytics-->
565
			<script type="text/javascript">
565
			<script type="text/javascript">
566
				//<![CDATA[
566
				//<![CDATA[
567
				var _gaq = _gaq || [];
567
				var _gaq = _gaq || [];
568
				_gaq.push(['_setAccount', 'UA-20092557-1']);
568
				_gaq.push(['_setAccount', 'UA-20092557-1']);
569
				_gaq.push(['_trackPageview']);
569
				_gaq.push(['_trackPageview']);
570
				
570
				
571
				(function() {
571
				(function() {
572
				  var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
572
				  var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
573
				  ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
573
				  ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
574
				  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
574
				  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
575
				})();
575
				})();
576
				//]]>
576
				//]]>
577
			</script>
577
			</script>
578
		</div>
578
		</div>
579
	</body>
579
	</body>
580
</html>
580
</html>