Subversion Repositories eFlore/Applications.cel

Rev

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

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