Subversion Repositories eFlore/Applications.cel

Rev

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

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