Subversion Repositories eFlore/Applications.cel

Rev

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

Rev 2256 Rev 2371
1
<!DOCTYPE html>
1
<!DOCTYPE html>
2
<html lang="fr">
2
<html lang="fr">
3
	<head>
3
	<head>
4
		<title>Sauvages de ma rue</title>
4
		<title>Sauvages de ma rue</title>
5
		<meta charset="utf-8">
5
		<meta charset="utf-8">
6
		
6
		
7
		<meta name="author" content="Jean-Pascal MILCENT, Aurélien PERONNET, Céline VIDAL" />
7
		<meta name="author" content="Jean-Pascal MILCENT, Aurélien PERONNET, Céline VIDAL" />
8
		<meta name="keywords" content="Sauvages de ma rue, CEL, Tela Botanica, Natural Solutions, MNHN" />
8
		<meta name="keywords" content="Sauvages de ma rue, CEL, Tela Botanica, Natural Solutions, MNHN" />
9
		<meta name="description" content="Widget de saisie pour le projet Sauvages de ma rue" />
9
		<meta name="description" content="Widget de saisie pour le projet Sauvages de ma rue" />
10
		
10
		
11
		<!-- Viewport Mobile -->
11
		<!-- Viewport Mobile -->
12
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
12
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
13
		
13
		
14
		<!-- Favicones -->
14
		<!-- Favicones -->
15
		<link rel="shortcut icon" type="image/x-icon" href="<?=$url_base?>/modules/saisie/squelettes/sauvages/img/favicon.ico" />
15
		<link rel="shortcut icon" type="image/x-icon" href="<?=$url_base?>/modules/saisie/squelettes/sauvages/img/favicon.ico" />
16
		
16
		
17
		<!-- Javascript : bibliothèques -->
17
		<!-- Javascript : bibliothèques -->
18
		<!-- Google Map v3 -->
18
		<!-- Google Map v3 -->
19
		<!--<script type="text/javascript" src="https://getfirebug.com/firebug-lite.js"></script>-->
19
		<!--<script type="text/javascript" src="https://getfirebug.com/firebug-lite.js"></script>-->
20
		<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&amp;language=fr&amp;region=FR"></script>	
20
		<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&amp;language=fr&amp;region=FR"></script>	
21
		
21
		
22
		<!-- Jquery -->
22
		<!-- Jquery -->
23
		<script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/1.7.1/jquery-1.7.1.min.js"></script>
23
		<script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/1.7.1/jquery-1.7.1.min.js"></script>
24
		
24
		
25
		<!-- Jquery UI : nécessaire pour le minicalendrier et l'auto-complétion -->
25
		<!-- Jquery UI : nécessaire pour le minicalendrier et l'auto-complétion -->
26
		<script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/jquery-ui/1.10.2/js/jquery-ui-1.10.2.custom.min.js"></script>
26
		<script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/jquery-ui/1.10.2/js/jquery-ui-1.10.2.custom.min.js"></script>
27
		<script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/jquery-ui/1.10.2/js/jquery.ui.datepicker-fr.min.js"></script>
27
		<script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/jquery-ui/1.10.2/js/jquery.ui.datepicker-fr.min.js"></script>
28
		<!-- Jquery Plugins -->
28
		<!-- Jquery Plugins -->
29
		<!-- Jquery Validate : nécessaire pour la validation des formulaires -->
29
		<!-- Jquery Validate : nécessaire pour la validation des formulaires -->
30
		<script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/validate/1.11.1/jquery.validate.min.js"></script>
30
		<script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/validate/1.11.1/jquery.validate.min.js"></script>
31
		<script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/validate/1.11.1/additional-methods.min.js"></script>
31
		<script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/validate/1.11.1/additional-methods.min.js"></script>
32
		<script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/validate/1.11.1/messages_fr.js"></script>
32
		<script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/validate/1.11.1/messages_fr.js"></script>
33
		<!-- Jquery Form :nécessaire pour l'upload des images -->
33
		<!-- Jquery Form :nécessaire pour l'upload des images -->
34
		<script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/form/3.32/jquery.form.min.js"></script>
34
		<script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/form/3.32/jquery.form.min.js"></script>
35
		
35
		
36
		<!-- Bootstrap -->
36
		<!-- Bootstrap -->
37
		<script type="text/javascript" src="http://www.tela-botanica.org/commun/bootstrap/2.3.2/js/bootstrap.min.js"></script>
37
		<script type="text/javascript" src="http://www.tela-botanica.org/commun/bootstrap/2.3.2/js/bootstrap.min.js"></script>
38
		
38
		
39
		<!-- Javascript : appli saisie -->
39
		<!-- Javascript : appli saisie -->
40
		<script src="<?=$url_base?>saisie?projet=sauvages&amp;service=taxons" type="text/javascript"></script>
40
		<script src="<?=$url_base?>saisie?projet=sauvages&amp;service=taxons" type="text/javascript"></script>
41
		<script type="text/javascript">
41
		<script type="text/javascript">
42
		//<![CDATA[
42
		//<![CDATA[
43
			// La présence du parametre 'debug' dans l'URL enclenche le dégogage
43
			// La présence du parametre 'debug' dans l'URL enclenche le dégogage
44
			var DEBUG = <?=isset($_GET['debug']) ? 'true' : 'false'?>;
44
			var DEBUG = <?=isset($_GET['debug']) ? 'true' : 'false'?>;
45
			// La présence du parametre 'html5' dans l'URL enclenche les fonctions avancées HTML5
45
			// La présence du parametre 'html5' dans l'URL enclenche les fonctions avancées HTML5
46
			var HTML5 = <?=isset($_GET['html5']) ? 'true' : 'false'?>;
46
			var HTML5 = <?=isset($_GET['html5']) ? 'true' : 'false'?>;
47
			
47
			
48
			// La présence du parametre 'ville' dans l'URL géolocalise
48
			// La présence du parametre 'ville' dans l'URL géolocalise
49
			var VILLE = "<?=isset($_GET['ville']) ? $_GET['ville'] : ''?>";
49
			var VILLE = "<?=isset($_GET['ville']) ? $_GET['ville'] : ''?>";
50
			VILLE = <?= isset($_GET['commune']) ? "'".$_GET['commune']."'" : 'VILLE' ?>;
50
			VILLE = <?= isset($_GET['commune']) ? "'".$_GET['commune']."'" : 'VILLE' ?>;
51
			
51
			
52
			// Mot-clé du widget/projet
52
			// Mot-clé du widget/projet
53
			var TAG_PROJET = "WidgetSauvages,Sauvages";
53
			var TAG_PROJET = "WidgetSauvages,Sauvages";
54
			
54
			
55
			// Mots-clés à ajouter aux images
55
			// Mots-clés à ajouter aux images
56
			var TAG_IMG = "<?=isset($_GET['tag-img']) ? $_GET['tag-img'] : ''?>";
56
			var TAG_IMG = "<?=isset($_GET['tag-img']) ? $_GET['tag-img'] : ''?>";
57
			var SEPARATION_TAG_IMG = "<?= isset($_GET['motcle']) && isset($_GET['tag-img']) ? ',' : '' ?>";
57
			var SEPARATION_TAG_IMG = "<?= isset($_GET['motcle']) && isset($_GET['tag-img']) ? ',' : '' ?>";
58
			TAG_IMG = <?=isset($_GET['motcle']) ? "'".$_GET['motcle']."' + SEPARATION_TAG_IMG + TAG_IMG" : 'TAG_IMG' ?>;
58
			TAG_IMG = <?=isset($_GET['motcle']) ? "'".$_GET['motcle']."' + SEPARATION_TAG_IMG + TAG_IMG" : 'TAG_IMG' ?>;
59
			// Mots-clés à ajouter aux observations
59
			// Mots-clés à ajouter aux observations
60
			var TAG_OBS = "<?=isset($_GET['tag-obs']) ? $_GET['tag-obs'] : ''?>";
60
			var TAG_OBS = "<?=isset($_GET['tag-obs']) ? $_GET['tag-obs'] : ''?>";
61
			var SEPARATION_TAG_OBS = "<?= isset($_GET['projet']) && isset($_GET['tag-obs']) ? ',' : '' ?>";
61
			var SEPARATION_TAG_OBS = "<?= isset($_GET['projet']) && isset($_GET['tag-obs']) ? ',' : '' ?>";
62
			TAG_OBS = <?=isset($_GET['projet']) ? "'".$_GET['projet']."' + SEPARATION_TAG_OBS + TAG_OBS" : 'TAG_OBS' ?>;
62
			TAG_OBS = <?=isset($_GET['projet']) ? "'".$_GET['projet']."' + SEPARATION_TAG_OBS + TAG_OBS" : 'TAG_OBS' ?>;
63
			
63
			
64
			// URL du web service réalisant l'insertion des données dans la base du CEL.
64
			// URL du web service réalisant l'insertion des données dans la base du CEL.
65
			var SERVICE_SAISIE_URL = "<?=$url_ws_saisie?>";
65
			var SERVICE_SAISIE_URL = "<?=$url_ws_saisie?>";
66
			// URL du web service permettant de récupérer les infos d'une observation du CEL.
66
			// URL du web service permettant de récupérer les infos d'une observation du CEL.
67
			var SERVICE_OBS_URL = "<?=$url_ws_obs?>";
67
			var SERVICE_OBS_URL = "<?=$url_ws_obs?>";
68
			// Code du référentiel utilisé pour les nom scientifiques (de la forme nom:code).
68
			// Code du référentiel utilisé pour les nom scientifiques (de la forme nom:code).
69
			var NOM_SCI_REFERENTIEL = "<?=$ns_referentiel?>";
69
			var NOM_SCI_REFERENTIEL = "<?=$ns_referentiel?>";
70
			// Nom du référentiel utilisé pour les nom scientifiques.
70
			// Nom du référentiel utilisé pour les nom scientifiques.
71
			var NOM_SCI_PROJET = "<?=$ns_projet?>";
71
			var NOM_SCI_PROJET = "<?=$ns_projet?>";
72
			// Code de la version du référentiel utilisé pour les nom scientifiques.
72
			// Code de la version du référentiel utilisé pour les nom scientifiques.
73
			var NOM_SCI_VERSION = "<?=$ns_version?>";
73
			var NOM_SCI_VERSION = "<?=$ns_version?>";
74
			// Indication de la présence d'une espèce imposée
74
			// Indication de la présence d'une espèce imposée
75
			var ESPECE_IMPOSEE = "<?=$espece_imposee; ?>";
75
			var ESPECE_IMPOSEE = "<?=$espece_imposee; ?>";
76
			// Tableau d'informations sur l'espèce imposée
76
			// Tableau d'informations sur l'espèce imposée
77
			var INFOS_ESPECE_IMPOSEE = <?=$infos_espece; ?>;
77
			var INFOS_ESPECE_IMPOSEE = <?=$infos_espece; ?>;
78
			// Nombre d'élément dans les listes d'auto-complétion
78
			// Nombre d'élément dans les listes d'auto-complétion
79
			var AUTOCOMPLETION_ELEMENTS_NBRE = 20;
79
			var AUTOCOMPLETION_ELEMENTS_NBRE = 20;
80
			// Indication de la présence d'un référentiel imposé
80
			// Indication de la présence d'un référentiel imposé
81
			var REFERENTIEL_IMPOSE = "<?=$referentiel_impose; ?>";
81
			var REFERENTIEL_IMPOSE = "<?=$referentiel_impose; ?>";
82
			// Indication des version utilisées de chaque référentiel
82
			// Indication des version utilisées de chaque référentiel
83
			var PROJETS_VERSIONS = <?=json_encode($projets_versions)?>;
83
			var PROJETS_VERSIONS = <?=json_encode($projets_versions)?>;
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 = "<?=$url_ws_autocompletion_ns?>?"+
85
			var SERVICE_AUTOCOMPLETION_NOM_SCI_URL = "<?=$url_ws_autocompletion_ns?>?"+
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
			// URL du web service permettant l'auto-complétion des noms scientifiques.
92
			// URL du web service permettant l'auto-complétion des noms scientifiques.
93
			var SERVICE_AUTOCOMPLETION_NOM_SCI_URL_TPL = "<?=$url_ws_autocompletion_ns_tpl?>?"+
93
			var SERVICE_AUTOCOMPLETION_NOM_SCI_URL_TPL = "<?=$url_ws_autocompletion_ns_tpl?>?"+
94
					"masque={masque}&"+
94
					"masque={masque}&"+
95
					"recherche=etendue&"+
95
					"recherche=etendue&"+
96
					"retour.champs=famille,nom_retenu,nom_retenu_complet,num_taxonomique,nom_retenu.id&"+
96
					"retour.champs=famille,nom_retenu,nom_retenu_complet,num_taxonomique,nom_retenu.id&"+
97
					//"version.projet="+NOM_SCI_VERSION+"&"+
97
					//"version.projet="+NOM_SCI_VERSION+"&"+
98
					"ns.structure=au"+"&"+
98
					"ns.structure=au"+"&"+
99
					"navigation.limite="+AUTOCOMPLETION_ELEMENTS_NBRE;
99
					"navigation.limite="+AUTOCOMPLETION_ELEMENTS_NBRE;
100
			// Nombre d'observations max autorisé avant transmission
100
			// Nombre d'observations max autorisé avant transmission
101
			<? $max_nb_obs = 10 ?>
101
			<? $max_nb_obs = 10 ?>
102
			var OBS_MAX_NBRE = <?= $max_nb_obs ?>;
102
			var OBS_MAX_NBRE = <?= $max_nb_obs ?>;
103
			// Durée d'affichage en milliseconde des messages d'informations
103
			// Durée d'affichage en milliseconde des messages d'informations
104
			var DUREE_MESSAGE = 15000;
104
			var DUREE_MESSAGE = 15000;
105
			// Squelette d'URL du web service de l'annuaire.
105
			// Squelette d'URL du web service de l'annuaire.
106
			var SERVICE_ANNUAIRE_ID_URL = "<?=$url_ws_annuaire?>";
106
			var SERVICE_ANNUAIRE_ID_URL = "<?=$url_ws_annuaire?>";
107
			// Squelette d'URL du web service d'eFlore fournissant les noms de communes.
107
			// Squelette d'URL du web service d'eFlore fournissant les noms de communes.
108
			var SERVICE_NOM_COMMUNE_URL = "http://api.tela-botanica.org/service:eflore:0.1/osm/nom-commune?lon={lon}&lat={lat}";
108
			var SERVICE_NOM_COMMUNE_URL = "http://api.tela-botanica.org/service:eflore:0.1/osm/nom-commune?lon={lon}&lat={lat}";
109
			// Squelette d'URL du web service d'eFlore fournissant les noms de communes hors de France (localisation approximative).
109
			// Squelette d'URL du web service d'eFlore fournissant les noms de communes hors de France (localisation approximative).
110
			var SERVICE_NOM_COMMUNE_URL_ALT = "http://www.tela-botanica.org/service:eflore:0.1/wikipedia/nom-commune?lon={lon}&lat={lat}&nbre=1";
110
			var SERVICE_NOM_COMMUNE_URL_ALT = "http://www.tela-botanica.org/service:eflore:0.1/wikipedia/nom-commune?lon={lon}&lat={lat}&nbre=1";
111
			// URL du marqueur à utiliser dans la carte Google Map
111
			// URL du marqueur à utiliser dans la carte Google Map
112
			var GOOGLE_MAP_MARQUEUR_DEBUT_URL = "<?=$url_base?>/modules/saisie/squelettes/sauvages/img/marqueurs/debut.png";
112
			var GOOGLE_MAP_MARQUEUR_DEBUT_URL = "<?=$url_base?>/modules/saisie/squelettes/sauvages/img/marqueurs/debut.png";
113
			// URL de l'icône de fin de rue
113
			// URL de l'icône de fin de rue
114
			var GOOGLE_MAP_MARQUEUR_FIN_URL = "<?=$url_base?>/modules/saisie/squelettes/sauvages/img/marqueurs/fin.png";
114
			var GOOGLE_MAP_MARQUEUR_FIN_URL = "<?=$url_base?>/modules/saisie/squelettes/sauvages/img/marqueurs/fin.png";
115
			// URL de l'icône du chargement en cours
115
			// URL de l'icône du chargement en cours
116
			var CHARGEMENT_ICONE_URL = "<?=$url_base?>modules/saisie/squelettes/sauvages/img/icones/chargement.gif";
116
			var CHARGEMENT_ICONE_URL = "<?=$url_base?>modules/saisie/squelettes/sauvages/img/icones/chargement.gif";
117
			// URL de l'icône du chargement en cours d'une image
117
			// URL de l'icône du chargement en cours d'une image
118
			var CHARGEMENT_IMAGE_URL = "<?=$url_base?>modules/saisie/squelettes/sauvages/img/icones/chargement-image.gif";
118
			var CHARGEMENT_IMAGE_URL = "<?=$url_base?>modules/saisie/squelettes/sauvages/img/icones/chargement-image.gif";
119
			// URL de l'icône du calendrier
119
			// URL de l'icône du calendrier
120
			var CALENDRIER_ICONE_URL = "<?=$url_base?>modules/saisie/squelettes/sauvages/img/icones/calendrier.png";
120
			var CALENDRIER_ICONE_URL = "<?=$url_base?>modules/saisie/squelettes/sauvages/img/icones/calendrier.png";
121
			// URL de l'icône du calendrier
121
			// URL de l'icône du calendrier
122
			var PAS_DE_PHOTO_ICONE_URL = "<?=$url_base?>modules/saisie/squelettes/sauvages/img/icones/pas_de_photo.png";
122
			var PAS_DE_PHOTO_ICONE_URL = "<?=$url_base?>modules/saisie/squelettes/sauvages/img/icones/pas_de_photo.png";
123
			// URL de l'icône du bouton supprimer
123
			// URL de l'icône du bouton supprimer
124
			var SUPPRIMER_ICONE_URL = "<?=$url_base?>/modules/saisie/squelettes/sauvages/img/icones/supprimer.png";
124
			var SUPPRIMER_ICONE_URL = "<?=$url_base?>/modules/saisie/squelettes/sauvages/img/icones/supprimer.png";
125
			// Précharger le formulaire avec les infos d'une observation
125
			// Précharger le formulaire avec les infos d'une observation
126
			var OBS_ID = "<?=isset($_GET['id-obs']) ? $_GET['id-obs'] : ''?>";
126
			var OBS_ID = "<?=isset($_GET['id-obs']) ? $_GET['id-obs'] : ''?>";
127
			// URL du web service permettant de récupérer les infos d'une observation du CEL.
127
			// URL du web service permettant de récupérer les infos d'une observation du CEL.
128
			var SERVICE_OBS_URL = "<?=$url_ws_obs?>";
128
			var SERVICE_OBS_URL = "<?=$url_ws_obs?>";
129
		//]]>
129
		//]]>
130
		</script>
130
		</script>
131
		
131
		
132
		<script type="text/javascript" src="<?=$url_base?>modules/saisie/squelettes/sauvages/js/sauvages.js"></script>
132
		<script type="text/javascript" src="<?=$url_base?>modules/saisie/squelettes/sauvages/js/sauvages.js"></script>
133
		
133
		
134
		<!-- CSS -->
134
		<!-- CSS -->
135
		<link href="http://www.tela-botanica.org/commun/jquery/jquery-ui/1.10.2/css/smoothness/jquery-ui-1.10.2.custom.css" rel="stylesheet" type="text/css" media="screen" />
135
		<link href="http://www.tela-botanica.org/commun/jquery/jquery-ui/1.10.2/css/smoothness/jquery-ui-1.10.2.custom.css" rel="stylesheet" type="text/css" media="screen" />
136
		<link href="http://www.tela-botanica.org/commun/bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" media="screen" />
136
		<link href="http://www.tela-botanica.org/commun/bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" media="screen" />
137
		<link href="http://www.tela-botanica.org/commun/bootstrap/2.3.2/css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css" media="screen" />
137
		<link href="http://www.tela-botanica.org/commun/bootstrap/2.3.2/css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css" media="screen" />
138
		<link href="<?=$url_base?>modules/saisie/squelettes/sauvages/css/<?=isset($_GET['style']) ? $_GET['style'] : 'sauvages'?>.css" rel="stylesheet" type="text/css" media="screen" />
138
		<link href="<?=$url_base?>modules/saisie/squelettes/sauvages/css/<?=isset($_GET['style']) ? $_GET['style'] : 'sauvages'?>.css" rel="stylesheet" type="text/css" media="screen" />
139
	</head>
139
	</head>
140
 
140
 
141
	<body data-spy="scroll">
141
	<body data-spy="scroll">
142
		<div id="zone-appli" class="container">
142
		<div id="zone-appli" class="container">
143
			<div class="row-fluid entete">
143
			<div class="row-fluid entete">
144
				<div class="span12">
144
				<div class="span12">
145
					<?php if ($titre == 'defaut' ) : ?>
145
					<?php if ($titre == 'defaut' ) : ?>
146
						<h1 id="widget-titre"><img src="<?=$url_base?>/modules/saisie/squelettes/sauvages/img/logos/sdmr.png" alt="Sauvages de ma rue : Saisie des observations"/></h1>
146
						<h1 id="widget-titre"><img src="<?=$url_base?>/modules/saisie/squelettes/sauvages/img/logos/sdmr.png" alt="Sauvages de ma rue : Saisie des observations"/></h1>
147
					<?php else: ?>
147
					<?php else: ?>
148
						<h1 id="widget-titre"><?= $titre ?></h1>
148
						<h1 id="widget-titre"><?= $titre ?></h1>
149
					<?php endif; ?>
149
					<?php endif; ?>
150
					<p class="discretion">
150
					<p class="discretion">
151
						Un aide interactive est à votre disposition sur l'interface.
151
						Un aide interactive est à votre disposition sur l'interface.
152
						Une fois familiarisé, vous pouvez cliquer sur le bouton suivant pour la désactiver :
152
						Une fois familiarisé, vous pouvez cliquer sur le bouton suivant pour la désactiver :
153
						<button id="btn-aide" class="btn btn-mini btn-success">
153
						<button id="btn-aide" class="btn btn-mini btn-success">
154
							<span class="icon-question-sign icon-white"></span>
154
							<span class="icon-question-sign icon-white"></span>
155
							<span id="btn-aide-txt" >Désactiver l'aide</span>
155
							<span id="btn-aide-txt" >Désactiver l'aide</span>
156
						</button> 
156
						</button> 
157
					</p>
157
					</p>
158
				</div>
158
				</div>
159
			</div>
159
			</div>
160
			<div class="row-fluid">	
160
			<div class="row-fluid">	
161
				<div class="span12">
161
				<div class="span12">
162
					<form id="form-observateur" action="#" autocomplete="on">
162
					<form id="form-observateur" action="#" autocomplete="on">
163
						<h2 id="titre-form-observateur">Observateur</h2>
163
						<h2 id="titre-form-observateur">Observateur</h2>
164
						<div id="zone-identification">
164
						<div id="zone-identification">
165
							<fieldset id="partie-identification">
165
							<fieldset id="partie-identification">
166
								<div class="row-fluid">
166
								<div class="row-fluid">
167
									<div class="span6 control-group has-tooltip" data-placement="bottom"
167
									<div class="span6 control-group has-tooltip" data-placement="bottom"
168
										title="Saisissez le courriel avec lequel vous être inscrit à Tela Botanica.
168
										title="Saisissez le courriel avec lequel vous être inscrit à Tela Botanica.
169
											Si vous n'êtes pas inscrit, ce n'est pas grave, vous pourrez le faire 
169
											Si vous n'êtes pas inscrit, ce n'est pas grave, vous pourrez le faire 
170
											ultérieurement. Des informations complémentaires vont vous être 
170
											ultérieurement. Des informations complémentaires vont vous être 
171
											demandées : prénom et nom.">
171
											demandées : prénom et nom.">
172
											<label class="control-label" for="courriel">
172
											<label class="control-label" for="courriel">
173
												<strong class="obligatoire">*</strong> 
173
												<strong class="obligatoire">*</strong> 
174
												Courriel
174
												Courriel
175
											</label>
175
											</label>
176
											<div class="controls">
176
											<div class="controls">
177
												<div class="input-prepend">
177
												<div class="input-prepend">
178
													<span class="add-on">
178
													<span class="add-on">
179
														<i class="icon-envelope"></i>
179
														<i class="icon-envelope"></i>
180
													</span>
180
													</span>
181
													<input id="courriel" name="courriel" class="span11" type="text"/>
181
													<input id="courriel" name="courriel" class="span11" type="text"/>
182
													<input id="id_utilisateur" name="id_utilisateur" type="hidden"/>
182
													<input id="id_utilisateur" name="id_utilisateur" type="hidden"/>
183
												</div>
183
												</div>
184
											</div>
184
											</div>
185
										
185
										
186
									</div>
186
									</div>
187
									<div id="zone-courriel-confirmation" class="span6 control-group has-tooltip"
187
									<div id="zone-courriel-confirmation" class="span6 control-group has-tooltip"
188
										style="display:none;"
188
										style="display:none;"
189
										data-placement="bottom" 
189
										data-placement="bottom" 
190
										title="Saisissez à nouveau votre courriel afin de le confirmer. Le 
190
										title="Saisissez à nouveau votre courriel afin de le confirmer. Le 
191
											copier/coller est désactivé pour éviter les erreurs.">
191
											copier/coller est désactivé pour éviter les erreurs.">
192
										<label class="control-label" for="courriel_confirmation">
192
										<label class="control-label" for="courriel_confirmation">
193
											<strong class="obligatoire">*</strong>
193
											<strong class="obligatoire">*</strong>
194
											Courriel (confirmation)
194
											Courriel (confirmation)
195
										</label>
195
										</label>
196
										<div class="controls">
196
										<div class="controls">
197
											<div class="input-prepend">
197
											<div class="input-prepend">
198
												<span class="add-on">
198
												<span class="add-on">
199
													<i class="icon-envelope"></i>
199
													<i class="icon-envelope"></i>
200
												</span>
200
												</span>
201
												<input id="courriel_confirmation" name="courriel_confirmation" 
201
												<input id="courriel_confirmation" name="courriel_confirmation" 
202
												 	class="span11" type="text"/>
202
												 	class="span11" type="text"/>
203
											</div>
203
											</div>
204
										</div>
204
										</div>
205
									</div>
205
									</div>
206
								</div>
206
								</div>
207
								<div id="zone-prenom-nom" class="row-fluid" style="display:none;">
207
								<div id="zone-prenom-nom" class="row-fluid" style="display:none;">
208
									<div class="span6 control-group">
208
									<div class="span6 control-group">
209
										<label for="prenom" class="control-label">
209
										<label for="prenom" class="control-label">
210
											<strong class="obligatoire">*</strong>
210
											<strong class="obligatoire">*</strong>
211
											Prénom
211
											Prénom
212
										</label>
212
										</label>
213
										<input id="prenom" name="prenom" class="span12" type="text"/>
213
										<input id="prenom" name="prenom" class="span12" type="text"/>
214
									</div>
214
									</div>
215
									<div class="span6 control-group">
215
									<div class="span6 control-group">
216
										<label for="nom" class="control-label">
216
										<label for="nom" class="control-label">
217
											<strong class="obligatoire">*</strong>
217
											<strong class="obligatoire">*</strong>
218
											Nom
218
											Nom
219
										</label>
219
										</label>
220
										<div class="controls">
220
										<div class="controls">
221
											<input id="nom" name="nom"  class="span12" type="text"/>
221
											<input id="nom" name="nom"  class="span12" type="text"/>
222
										</div>
222
										</div>
223
									</div>
223
									</div>
224
								</div>
224
								</div>
225
							</fieldset>	
225
							</fieldset>	
226
						</div>
226
						</div>
227
					</form>
227
					</form>
228
				</div>
228
				</div>
229
			</div>
229
			</div>
230
			<!-- Messages d'erreur du formulaire-->
230
			<!-- Messages d'erreur du formulaire-->
231
			<div class="row-fluid">
231
			<div class="row-fluid">
232
				<div class="zone-alerte span12">
232
				<div class="zone-alerte span12">
233
					<div id="dialogue-bloquer-copier-coller" class="alert alert-info alert-block" style="display:none;">
233
					<div id="dialogue-bloquer-copier-coller" class="alert alert-info alert-block" style="display:none;">
234
						<a class="close">×</a>
234
						<a class="close">×</a>
235
						<h4 class="alert-heading">Information : copier/coller</h4>
235
						<h4 class="alert-heading">Information : copier/coller</h4>
236
						<p>
236
						<p>
237
							Merci de ne pas copier/coller votre courriel.<br/>
237
							Merci de ne pas copier/coller votre courriel.<br/>
238
							La double saisie permet de vérifier l'absence d'erreurs.
238
							La double saisie permet de vérifier l'absence d'erreurs.
239
						</p>
239
						</p>
240
					</div>
240
					</div>
241
					<div id="dialogue-courriel-introuvable" class="alert alert-info alert-block" style="display:none;">
241
					<div id="dialogue-courriel-introuvable" class="alert alert-info alert-block" style="display:none;">
242
						<a class="close">×</a>
242
						<a class="close">×</a>
243
						<h4 class="alert-heading">Information : courriel introuvable</h4>
243
						<h4 class="alert-heading">Information : courriel introuvable</h4>
244
						<p>
244
						<p>
245
							Vous n'êtes pas inscrit à Tela Botanica avec ce courriel.<br/>
245
							Vous n'êtes pas inscrit à Tela Botanica avec ce courriel.<br/>
246
							Veuillez compléter les champs supplémentaires ou indiquer votre courriel d'inscription.<br/>
246
							Veuillez compléter les champs supplémentaires ou indiquer votre courriel d'inscription.<br/>
247
							Pour retrouver vos observations dans le <a href="http://www.tela-botanica.org/appli:cel">Carnet en ligne</a>, 
247
							Pour retrouver vos observations dans le <a href="http://www.tela-botanica.org/appli:cel">Carnet en ligne</a>, 
248
							il sera nécesaire de <a href="http://www.tela-botanica.org/page:inscription">vous inscrire à Tela Botanica</a>.
248
							il sera nécesaire de <a href="http://www.tela-botanica.org/page:inscription">vous inscrire à Tela Botanica</a>.
249
						</p>
249
						</p>
250
					</div>
250
					</div>
251
					<div id="dialogue-google-map" class="alert alert-info alert-block" style="display: none;">
251
					<div id="dialogue-google-map" class="alert alert-info alert-block" style="display: none;">
252
						<a class="close">×</a>
252
						<a class="close">×</a>
253
						<h4 class="alert-heading">Information sur Google Map</h4>
253
						<h4 class="alert-heading">Information sur Google Map</h4>
254
						<div class="contenu"></div>
254
						<div class="contenu"></div>
255
					</div>
255
					</div>
256
				</div>
256
				</div>
257
			</div>
257
			</div>
258
			
258
			
259
			<!-- Fiche terrain -->
259
			<!-- Fiche terrain -->
260
			<form id="form-obs" class="form-inline" action="#" autocomplete="on">
260
			<form id="form-obs" class="form-inline" action="#" autocomplete="on">
261
				<h2 id="titre-form-obs">Fiche de terrain</h2>
261
				<h2 id="titre-form-obs">Fiche de terrain</h2>
262
				<div id="zone-fiche-terrain">
262
				<div id="zone-fiche-terrain">
263
					<fieldset id="partie-date">
263
					<fieldset id="partie-date">
264
						<legend>Date du relevé</legend>
264
						<legend>Date du relevé</legend>
265
						<div class="row-fluid"> 
265
						<div class="row-fluid"> 
266
							<div class="span12 control-group has-tooltip" 
266
							<div class="span12 control-group has-tooltip" 
267
								title="Vous pouvez cliquer sur l'icône de calendrier pour 
267
								title="Vous pouvez cliquer sur l'icône de calendrier pour 
268
								sélectionner une date dans un calendrier. La date doit être au format : 
268
								sélectionner une date dans un calendrier. La date doit être au format : 
269
								jj/mm/aaaa">
269
								jj/mm/aaaa">
270
								<label class="control-label">
270
								<label class="control-label">
271
									<strong class="obligatoire">*</strong>
271
									<strong class="obligatoire">*</strong>
272
									Date du relevé 
272
									Date du relevé 
273
									<div class="input-prepend">
273
									<div class="input-prepend">
274
										<span id="date-icone" class="add-on"></span>
274
										<span id="date-icone" class="add-on"></span>
275
										<input id="date" class="input-small" name="date" type="text" 
275
										<input id="date" class="input-small" name="date" type="text" 
276
											placeholder="jj/mm/aaaa" />
276
											placeholder="jj/mm/aaaa" />
277
									</div>
277
									</div>
278
								</label>
278
								</label>
279
							</div>
279
							</div>
280
						</div>
280
						</div>
281
					</fieldset>
281
					</fieldset>
282
					
282
					
283
					<fieldset id="partie-station">
283
					<fieldset id="partie-station">
284
						<legend>Lieu du relevé</legend>
284
						<legend>Lieu du relevé</legend>
285
						<div class="row-fluid">
285
						<div class="row-fluid">
286
							<div class="span12">
286
							<div class="span12">
287
								<label for="map_canvas" class="control-label" 
287
								<label for="map_canvas" class="control-label" 
288
										title="Veuillez localiser l'observation">
288
										title="Veuillez localiser l'observation">
289
									<strong class="obligatoire">*</strong>
289
									<strong class="obligatoire">*</strong>
290
									Géolocalisation
290
									Géolocalisation
291
								</label>
291
								</label>
292
								<div class="row-fluid">
292
								<div class="row-fluid">
293
									<div class="span12">
293
									<div class="span12">
294
										<ul class="unstyled liste_indication_geolocalisation">
294
										<ul class="unstyled liste_indication_geolocalisation">
295
											<li class="indication_geolocalisation">Étape 1/4 : Entrez le nom de la rue et de la ville dans l'espace de recherche ci-dessous</li>
295
											<li class="indication_geolocalisation">Étape 1/4 : Entrez le nom de la rue et de la ville dans l'espace de recherche ci-dessous</li>
296
											<li class="indication_geolocalisation">Étape 2/4 : Placez le drapeau vert au début de la portion de rue étudiée</li>
296
											<li class="indication_geolocalisation">Étape 2/4 : Placez le drapeau vert au début de la portion de rue étudiée</li>
297
											<li class="indication_geolocalisation">Étape 3/4 : Placez le drapeau rouge à la fin de la portion de rue étudiée, si vous vous êtes trompé, vous pouvez redéplacer le drapeau vert</li>
297
											<li class="indication_geolocalisation">Étape 3/4 : Placez le drapeau rouge à la fin de la portion de rue étudiée, si vous vous êtes trompé, vous pouvez redéplacer le drapeau vert</li>
298
											<li class="indication_geolocalisation">Étape 4/4 : Voilà ! Votre zone d'étude est localisée ! Vous pouvez passer à la saisie de l'observation.</li>
298
											<li class="indication_geolocalisation">Étape 4/4 : Voilà ! Votre zone d'étude est localisée ! Vous pouvez passer à la saisie de l'observation.</li>
299
										</ul>
299
										</ul>
300
									</div>
300
									</div>
301
								</div>
301
								</div>
302
								<div class="form-search form-horizontal">
302
								<div class="form-search form-horizontal">
303
									<div class="control-group">
303
									<div class="control-group">
304
										<input id="carte-recherche" 
304
										<input id="carte-recherche" 
305
											class="search-query span12 obs-chp-etendu has-tooltip"
305
											class="search-query span12 obs-chp-etendu has-tooltip"
306
											type="text"
306
											type="text"
307
											title="Permet de centrer la carte sur le lieu recherché. Il est nécessaire de sélectionner le lieu dans la liste déroulante."
307
											title="Permet de centrer la carte sur le lieu recherché. Il est nécessaire de sélectionner le lieu dans la liste déroulante."
308
											placeholder="Entrez un nom de ville, de lieu ou de rue..."
308
											placeholder="Entrez un nom de ville, de lieu ou de rue..."
309
											name="adresse"
309
											name="adresse"
310
											data-label="Adresse"
310
											data-label="Adresse"
311
											value=""/>
311
											value=""/>
312
									</div>
312
									</div>
313
								</div>
313
								</div>
314
							</div>
314
							</div>
315
						</div>
315
						</div>
316
						<div class="row-fluid">
316
						<div class="row-fluid">
317
							<div class="span12">
317
							<div class="span12">
318
								<div id="map-canvas" class="has-tooltip" 
318
								<div id="map-canvas" class="has-tooltip" 
319
									title="Vous pouvez cliquer sur la carte pour déplacer le marqueur
319
									title="Vous pouvez cliquer sur la carte pour déplacer le marqueur
320
										représentant votre station ou bien le glisser-déposer sur 
320
										représentant votre station ou bien le glisser-déposer sur 
321
										le lieu souhaité."></div>
321
										le lieu souhaité."></div>
322
							</div>
322
							</div>
323
						</div>
323
						</div>
324
						<div id="coordonnees-geo-affichage" class="row-fluid">
324
						<div id="coordonnees-geo-affichage" class="row-fluid">
325
							<label for="coordonnees-geo" class="span6">
325
							<label for="coordonnees-geo" class="span6">
326
								<a class="afficher-coord btn">
326
								<a class="afficher-coord btn">
327
									<span class="afficher-coord-action">Afficher</span>
327
									<span class="afficher-coord-action">Afficher</span>
328
									<span class="afficher-coord-action" style="display:none;">Cacher</span>
328
									<span class="afficher-coord-action" style="display:none;">Cacher</span>
329
									coordonnées
329
									coordonnées
330
									<span id="lat-lon-info" class="info has-tooltip" 
330
									<span id="lat-lon-info" class="info has-tooltip" 
331
										title="Système géodésique mondial, révision de 1984 - Coordonnées non projetées">
331
										title="Système géodésique mondial, révision de 1984 - Coordonnées non projetées">
332
										(WGS84)
332
										(WGS84)
333
									</span>
333
									</span>
334
								</a>
334
								</a>
335
							</label>
335
							</label>
336
							<div id="info-commune" class="span6">
336
							<div id="info-commune" class="span6">
337
								<span for="marqueur-commune">Commune : </span>
337
								<span for="marqueur-commune">Commune : </span>
338
								<span id="marqueur-commune">
338
								<span id="marqueur-commune">
339
									<span id="commune-nom" class="commune-info"></span>
339
									<span id="commune-nom" class="commune-info"></span>
340
									(<span id="commune-code-insee" class="commune-info has-tooltip" 
340
									(<span id="commune-code-insee" class="commune-info has-tooltip" 
341
										title="Code INSEE de la commune"></span>)
341
										title="Code INSEE de la commune"></span>)
342
								</span>
342
								</span>
343
							</div>
343
							</div>
344
						</div>
344
						</div>
345
						<div id="coordonnees-geo" class="row-fluid" style="display:none;">
345
						<div id="coordonnees-geo" class="row-fluid" style="display:none;">
346
							<div class="form-inline">
346
							<div class="form-inline">
347
								<div id="coord-lat" class="span4 control-group">
347
								<div id="coord-lat" class="span4 control-group">
348
									<label for="latitude" class="control-label">
348
									<label for="latitude" class="control-label">
349
										<strong class="obligatoire">*</strong>
349
										<strong class="obligatoire">*</strong>
350
										Latitude
350
										Latitude
351
									</label>
351
									</label>
352
									<div class="controls">
352
									<div class="controls">
353
										<input id="latitude" class="input-mini" name="latitude" type="text" value=""/>
353
										<input id="latitude" class="input-mini" name="latitude" type="text" value=""/>
354
									</div>
354
									</div>
355
								</div>
355
								</div>
356
								<div id="coord-lng" class="span4">
356
								<div id="coord-lng" class="span4">
357
									<label for="longitude" class="control-label">
357
									<label for="longitude" class="control-label">
358
										<strong class="obligatoire">*</strong>
358
										<strong class="obligatoire">*</strong>
359
										Longitude
359
										Longitude
360
									</label>
360
									</label>
361
									<div class="controls">
361
									<div class="controls">
362
										<input id="longitude" class="input-mini" name="longitude" type="text" value=""/>
362
										<input id="longitude" class="input-mini" name="longitude" type="text" value=""/>
363
									</div>
363
									</div>
364
								</div>
364
								</div>
365
								<div class="span4">
365
								<div class="span4">
366
									<button id="geolocaliser" class="btn has-tooltip"
366
									<button id="geolocaliser" class="btn has-tooltip"
367
										title="Centre la carte sur les coordonnées de latitude et longitude saisies.">
367
										title="Centre la carte sur les coordonnées de latitude et longitude saisies.">
368
										Voir sur la carte
368
										Voir sur la carte
369
									</button>
369
									</button>
370
								</div>
370
								</div>
371
							</div>
371
							</div>
372
						</div>
372
						</div>
373
						
373
						
374
						<div class="row-fluid">
374
						<div class="row-fluid">
375
							<div class="span12 control-group has-tooltip" 
375
							<div class="span12 control-group has-tooltip" 
376
								title="Choisissez le (ou les) côté(s) de la rue que vous avez étudié.">
376
								title="Choisissez le (ou les) côté(s) de la rue que vous avez étudié.">
377
								<label class="control-label">
377
								<label class="control-label">
378
									<strong class="obligatoire">*</strong> 
378
									<strong class="obligatoire">*</strong> 
379
									Côté de la rue
379
									Côté de la rue
380
								
380
								
381
									<select id="rue_cote" class="obs-chp-etendu" name="coteRue" data-label="Côté rue">
381
									<select id="rue_cote" class="obs-chp-etendu" name="coteRue" data-label="Côté rue">
382
										<option value="">Sélectionner un type de côté</option>
382
										<option value="">Sélectionner un type de côté</option>
383
										<option value="pair">Pair</option>
383
										<option value="pair">Pair</option>
384
										<option value="impair">Impair</option>
384
										<option value="impair">Impair</option>
385
										<option value="2cotes">Les deux</option>
385
										<option value="2cotes">Les deux</option>
386
									</select>
386
									</select>
387
								</label>
387
								</label>
388
							</div>
388
							</div>
389
						</div>
389
						</div>
390
					</fieldset>
390
					</fieldset>
391
 
391
 
392
					<fieldset id="partie-observation">
392
					<fieldset id="partie-observation">
393
						<legend>Observations</legend> 
393
						<legend>Observations</legend> 
394
						<div class="row-fluid">
394
						<div class="row-fluid">
395
							<div class="span12">
395
							<div class="span12">
396
								<div id="taxon-liste-input-groupe" class="control-group has-tooltip"
396
								<div id="taxon-liste-input-groupe" class="control-group has-tooltip"
397
									title="Sélectionnez une espèce dans la liste déroulante par son nom latin 
397
									title="Sélectionnez une espèce dans la liste déroulante par son nom latin 
398
									ou commun. Si une espèce est absente, sélectionner «Autre espèce»." >
398
									ou commun. Si une espèce est absente, sélectionner «Autre espèce»." >
399
									<label>
399
									<label>
400
										<strong class="obligatoire">*</strong> 
400
										<strong class="obligatoire">*</strong> 
401
										Espèces communes
401
										Espèces communes
402
									
402
									
403
										<div class="input-prepend ">
403
										<div class="input-prepend ">
404
											<span class="add-on">
404
											<span class="add-on">
405
												<i class="icon-leaf"></i>
405
												<i class="icon-leaf"></i>
406
											</span>
406
											</span>
407
											
407
											
408
											<select id="taxon-liste" name="taxon-liste">
408
											<select id="taxon-liste" name="taxon-liste">
409
												<option value="" selected>Sélectionner une espèce</option>
409
												<option value="" selected>Sélectionner une espèce</option>
410
												
410
												
411
												<optgroup id="taxon-liste-noms">
411
												<optgroup id="taxon-liste-noms">
412
													<?php foreach ($taxons['sci-et-fr'] as $taxon) :?>
412
													<?php foreach ($taxons['sci-et-fr'] as $taxon) :?>
413
														<option 
413
														<option 
414
															class="<?=$taxon['nom_type'] ?>" 
414
															class="<?=$taxon['nom_type'] ?>" 
415
															value="<?=$taxon['num_nom'] ?>" 
415
															value="<?=$taxon['num_nom'] ?>" 
416
															title="<?=$taxon['nom_title'] ?>"
416
															title="<?=$taxon['nom_title'] ?>"
417
															data-nom-a-sauver="<?=$taxon['nom_a_sauver'] ?>"
417
															data-nom-a-sauver="<?=$taxon['nom_a_sauver'] ?>"
418
															>
418
															>
419
															<?=$taxon['nom_a_afficher']?>
419
															<?=$taxon['nom_a_afficher']?>
420
														</option>
420
														</option>
421
													<?php endforeach; ?>
421
													<?php endforeach; ?>
422
												</optgroup>
422
												</optgroup>
423
												<optgroup id="taxon-liste-special">
423
												<optgroup id="taxon-liste-special">
424
													<?php foreach ($taxons['speciaux'] as $taxon) :?>
424
													<?php foreach ($taxons['speciaux'] as $taxon) :?>
425
														<option 
425
														<option 
426
															class="<?=$taxon['nom_type'] ?>" 
426
															class="<?=$taxon['nom_type'] ?>" 
427
															value="<?=$taxon['num_nom'] ?>" 
427
															value="<?=$taxon['num_nom'] ?>" 
428
															title="<?=$taxon['nom_title'] ?>"
428
															title="<?=$taxon['nom_title'] ?>"
429
															data-nom-a-sauver="<?=$taxon['nom_a_sauver'] ?>"
429
															data-nom-a-sauver="<?=$taxon['nom_a_sauver'] ?>"
430
															>
430
															>
431
															<?=$taxon['nom_a_afficher']?>
431
															<?=$taxon['nom_a_afficher']?>
432
														</option>
432
														</option>
433
													<?php endforeach; ?>
433
													<?php endforeach; ?>
434
													<option value="?">Autre espèce</option>
434
													<option value="?">Autre espèce</option>
435
												</optgroup>
435
												</optgroup>
436
											</select>
436
											</select>
437
										</div>
437
										</div>
438
									</label>
438
									</label>
439
								</div>
439
								</div>
440
							</div>
440
							</div>
441
						</div>
441
						</div>
442
						<div id="taxon-input-groupe" class="row-fluid hidden">
442
						<div id="taxon-input-groupe" class="row-fluid hidden">
443
							<div class="span12">
443
							<div class="span12">
444
								<div class="control-group has-tooltip" 
444
								<div class="control-group has-tooltip" 
445
									title="Sélectionnez une espèce dans la liste déroulante pour lier 
445
									title="Sélectionnez une espèce dans la liste déroulante pour lier 
446
										votre nom au référentiel. Si vous le désirez vous pouvez aussi saisir 
446
										votre nom au référentiel. Si vous le désirez vous pouvez aussi saisir 
447
										un nom absent du référentiel (Ex. : 'fleur violette' ou 'Viola sp.1')." >
447
										un nom absent du référentiel (Ex. : 'fleur violette' ou 'Viola sp.1')." >
448
									<label for="taxon" class="control-label" title="Choisissez l'espèce rencontrée.">
448
									<label for="taxon" class="control-label" title="Choisissez l'espèce rencontrée.">
449
										Autre espèce
449
										Autre espèce
450
									</label>
450
									</label>
451
									<div class="controls">
451
									<div class="controls">
452
										<input id="taxon" name="taxon" type="text" class="span12"
452
										<input id="taxon" name="taxon" type="text" class="span12"
453
											placeholder="Autre espèce (ou indication sur la plante)" 
453
											placeholder="Autre espèce (ou indication sur la plante)" 
454
											value="<?= $nom_sci_espece_defaut; ?>" />
454
											value="<?= $nom_sci_espece_defaut; ?>" />
455
									</div>
455
									</div>
456
								</div>
456
								</div>
457
							</div>
457
							</div>
458
						</div>
458
						</div>
459
						
459
						
460
						<div class="row-fluid">
460
						<div class="row-fluid">
461
							<div class="span12 control-group has-tooltip" 
461
							<div class="span12 control-group has-tooltip" 
462
								title="Indiquez le (ou les) milieu(x) dans lequel (lesquels) vous avez rencontré cette espèce.">
462
								title="Indiquez le (ou les) milieu(x) dans lequel (lesquels) vous avez rencontré cette espèce.">
463
								<label class="span2 control-label">
463
								<label class="span2 control-label">
464
									<strong class="obligatoire">*</strong>
464
									<strong class="obligatoire">*</strong>
465
									Milieux
465
									Milieux
466
								</label>
466
								</label>
467
								<div id="milieux-controls" class="controls">
467
								<div id="milieux-controls" class="controls">
468
									<div class="input-prepend">
468
									<div class="input-prepend">
469
										<div class="btn-group">
469
										<div class="btn-group">
470
											<button class="btn dropdown-toggle" data-toggle="dropdown">
470
											<button class="btn dropdown-toggle" data-toggle="dropdown">
471
												<i class="icon-globe"></i>
471
												<i class="icon-globe"></i>
472
												Sélectionner un ou plusieurs milieux
472
												Sélectionner un ou plusieurs milieux
473
												<span class="caret"></span>
473
												<span class="caret"></span>
474
											</button>
474
											</button>
475
											<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
475
											<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
476
												<li>
476
												<li>
477
													<label class="checkbox">
477
													<label class="checkbox">
478
														<input name="milieux[]" class="cb-milieux" type="checkbox" value="fissures"/>
478
														<input name="milieux[]" class="cb-milieux" type="checkbox" value="fissures"/>
479
														Fissures
479
														Fissures
480
													</label>
480
													</label>
481
												</li>
481
												</li>
482
												<li>
482
												<li>
483
													<label class="checkbox">
483
													<label class="checkbox">
484
														<input name="milieux[]" class="cb-milieux" type="checkbox" value="pied d'arbre"/>
484
														<input name="milieux[]" class="cb-milieux" type="checkbox" value="pied d'arbre"/>
485
														Pied d'arbre
485
														Pied d'arbre
486
													</label>
486
													</label>
487
												</li>
487
												</li>
488
												<li>
488
												<li>
489
													<label class="checkbox">
489
													<label class="checkbox">
490
														<input name="milieux[]" class="cb-milieux" type="checkbox" value="mur"/>
490
														<input name="milieux[]" class="cb-milieux" type="checkbox" value="mur"/>
491
														Mur
491
														Mur
492
													</label>
492
													</label>
493
												</li>
493
												</li>
494
												<li>
494
												<li>
495
													<label class="checkbox">
495
													<label class="checkbox">
496
														<input name="milieux[]" class="cb-milieux" type="checkbox" value="pelouse"/>
496
														<input name="milieux[]" class="cb-milieux" type="checkbox" value="pelouse"/>
497
														Pelouse
497
														Pelouse
498
													</label>
498
													</label>
499
												</li>
499
												</li>
500
												<li>
500
												<li>
501
													<label class="checkbox">
501
													<label class="checkbox">
502
														<input name="milieux[]" class="cb-milieux" type="checkbox" value="plate bande"/>
502
														<input name="milieux[]" class="cb-milieux" type="checkbox" value="plate bande"/>
503
														Plate bande
503
														Plate bande
504
													</label>
504
													</label>
505
												</li>
505
												</li>
506
												<li>
506
												<li>
507
													<label class="checkbox">
507
													<label class="checkbox">
508
														<input name="milieux[]" class="cb-milieux" type="checkbox" value="haie"/>
508
														<input name="milieux[]" class="cb-milieux" type="checkbox" value="haie"/>
509
														Haie
509
														Haie
510
													</label>
510
													</label>
511
												</li>
511
												</li>
512
												<li>
512
												<li>
513
													<label class="checkbox">
513
													<label class="checkbox">
514
														<input name="milieux[]" class="cb-milieux" type="checkbox" value="chemin"/>
514
														<input name="milieux[]" class="cb-milieux" type="checkbox" value="chemin"/>
515
														Chemin
515
														Chemin
516
													</label>
516
													</label>
517
												</li>
517
												</li>
518
											</ul>
518
											</ul>
519
										</div>
519
										</div>
520
									</div>
520
									</div>
521
								</div>
521
								</div>
522
							</div>
522
							</div>
523
						</div>
523
						</div>
524
						
524
						
525
						<div class="row-fluid">
525
						<div class="row-fluid">
526
							<div class="span12">
526
							<div class="span12">
527
								<label for="notes">Notes</label>
527
								<label for="notes">Notes</label>
528
								<div>
528
								<div>
529
									<textarea id="notes" class="span12" rows="7" name="notes" 
529
									<textarea id="notes" class="span12" rows="7" name="notes" 
530
										placeholder="Indiquez nous en particulier le ou les outils d'identification que vous avez utilisé, et toute autre information concernant le milieu ou l'espèce."></textarea>
530
										placeholder="Indiquez nous en particulier le ou les outils d'identification que vous avez utilisé, et toute autre information concernant le milieu ou l'espèce."></textarea>
531
								</div>
531
								</div>
532
							</div>
532
							</div>
533
						</div>
533
						</div>
534
					</fieldset>
534
					</fieldset>
535
				</div><!-- zone-fiche-terrain-->
535
				</div><!-- zone-fiche-terrain-->
536
			</form>
536
			</form>
537
			
537
			
538
			<div id="zone-fiche-terrain-photo">				
538
			<div id="zone-fiche-terrain-photo">				
539
				<form id="form-upload" class="form-horizontal" action="<?= $url_ws_upload ?>?projet=sauvages" 
539
				<form id="form-upload" class="form-horizontal" action="<?= $url_ws_upload ?>" 
540
					method="post" enctype="multipart/form-data">
540
					method="post" enctype="multipart/form-data">
541
					<div class="row-fluid">
541
					<div class="row-fluid">
542
						<div class="span12">
542
						<div class="span12">
543
							<fieldset id="partie-photo">
543
							<fieldset id="partie-photo">
544
								<legend>Ajouter des photos</legend>
544
								<legend>Ajouter des photos</legend>
545
								<p class="miniature-info" class="discretion help-inline">
545
								<p class="miniature-info" class="discretion help-inline">
546
									Vous pouvez ajouter des photos correspondant à cette espèce. 
546
									Vous pouvez ajouter des photos correspondant à cette espèce. 
547
									Les photos doivent être au format JPEG et ne doivent pas excéder 5Mo chacunes.
547
									Les photos doivent être au format JPEG et ne doivent pas excéder 5Mo chacunes.
548
								</p>
548
								</p>
549
								<div id ="photos-conteneur">
549
								<div id ="photos-conteneur">
550
									<input type="file" id="fichier" name="fichier" accept="image/jpeg" />
550
									<input type="file" id="fichier" name="fichier" accept="image/jpeg" />
551
									<input type="hidden" name="MAX_FILE_SIZE" value="5242880"/>	
551
									<input type="hidden" name="MAX_FILE_SIZE" value="5242880"/>	
552
									<div id="miniatures"></div>
552
									<div id="miniatures"></div>
553
									<p class="miniature-msg" class="span12">&nbsp;</p>
553
									<p class="miniature-msg" class="span12">&nbsp;</p>
554
								</div>
554
								</div>
555
							</fieldset>
555
							</fieldset>
556
						</div>
556
						</div>
557
					</div>
557
					</div>
558
				</form>
558
				</form>
559
				<div class="row-fluid">
559
				<div class="row-fluid">
560
					<div class="span12 has-tooltip" 
560
					<div class="span12 has-tooltip" 
561
						title="Une fois les champs remplis, vous pouvez cliquer sur ce bouton pour 
561
						title="Une fois les champs remplis, vous pouvez cliquer sur ce bouton pour 
562
							ajouter votre observation à la liste à transmettre.">
562
							ajouter votre observation à la liste à transmettre.">
563
						<button id="ajouter-obs" class="btn btn-primary btn-large" type="button">
563
						<button id="ajouter-obs" class="btn btn-primary btn-large" type="button">
564
							Ajouter
564
							Ajouter
565
						</button>
565
						</button>
566
					</div>
566
					</div>
567
				</div>
567
				</div>
568
			</div>
568
			</div>
569
				
569
				
570
			<!-- Messages d'erreur du formulaire-->
570
			<!-- Messages d'erreur du formulaire-->
571
			<div class="row-fluid">
571
			<div class="row-fluid">
572
				<div class="zone-alerte span12">
572
				<div class="zone-alerte span12">
573
					<div id="dialogue-bloquer-creer-obs" class="alert alert-warning alert-block" style="display: none;">
573
					<div id="dialogue-bloquer-creer-obs" class="alert alert-warning alert-block" style="display: none;">
574
						<a class="close">×</a>
574
						<a class="close">×</a>
575
						<h4 class="alert-heading">Information : <?= $max_nb_obs; ?> observations maximum</h4>
575
						<h4 class="alert-heading">Information : <?= $max_nb_obs; ?> observations maximum</h4>
576
						<p>
576
						<p>
577
							Vous venez d'ajouter votre <?= $max_nb_obs; ?>ème observation.<br/>
577
							Vous venez d'ajouter votre <?= $max_nb_obs; ?>ème observation.<br/>
578
							Pour en ajouter de nouvelles, il est nécessaire de les transmettre en cliquant sur le bouton ci-dessous.
578
							Pour en ajouter de nouvelles, il est nécessaire de les transmettre en cliquant sur le bouton ci-dessous.
579
						</p>
579
						</p>
580
					</div>
580
					</div>
581
				</div>
581
				</div>
582
				<div class="zone-alerte span12">
582
				<div class="zone-alerte span12">
583
					<div id="dialogue-form-invalide" class="alert alert-warning alert-block" style="display: none;">
583
					<div id="dialogue-form-invalide" class="alert alert-warning alert-block" style="display: none;">
584
						<a class="close">×</a>
584
						<a class="close">×</a>
585
						<h4 class="alert-heading">Information : champs en erreur</h4>
585
						<h4 class="alert-heading">Information : champs en erreur</h4>
586
						<p>
586
						<p>
587
							Certains champs du formulaire sont mal remplis.<br/>
587
							Certains champs du formulaire sont mal remplis.<br/>
588
							Veuillez vérifier vos données.
588
							Veuillez vérifier vos données.
589
						</p>
589
						</p>
590
					</div>
590
					</div>
591
				</div>
591
				</div>
592
				<div class="zone-alerte span12">
592
				<div class="zone-alerte span12">
593
					<div id="dialogue-form-invalide-rue" class="alert alert-warning alert-block" style="display: none;">
593
					<div id="dialogue-form-invalide-rue" class="alert alert-warning alert-block" style="display: none;">
594
						<a class="close">×</a>
594
						<a class="close">×</a>
595
						<h4 class="alert-heading">Information : champs en erreur</h4>
595
						<h4 class="alert-heading">Information : champs en erreur</h4>
596
						<p>
596
						<p>
597
							Le coordonnées du début et de la fin de la rue n'ont pas été géoréférencé.<br/>
597
							Le coordonnées du début et de la fin de la rue n'ont pas été géoréférencé.<br/>
598
							Veuillez suivre les étapes indiquées dans le champ « Géolocalisation ».
598
							Veuillez suivre les étapes indiquées dans le champ « Géolocalisation ».
599
						</p>
599
						</p>
600
					</div>
600
					</div>
601
				</div>
601
				</div>
602
			</div>
602
			</div>
603
				
603
				
604
			<!-- Affiche le tableau récapitualif des observations ajoutées -->
604
			<!-- Affiche le tableau récapitualif des observations ajoutées -->
605
			<div id="zone-liste-obs" class="hidden">
605
			<div id="zone-liste-obs" class="hidden">
606
				<div class="row-fluid">
606
				<div class="row-fluid">
607
					<div class="span12">
607
					<div class="span12">
608
						<div class="row-fluid">
608
						<div class="row-fluid">
609
							<div class="span8">
609
							<div class="span8">
610
								<h2 id="titre-liste-obs">Liste des observations à transmettre : <span class="obs-nbre">0</span></h2>
610
								<h2 id="titre-liste-obs">Liste des observations à transmettre : <span class="obs-nbre">0</span></h2>
611
							</div>
611
							</div>
612
							<div class="span4 droite">
612
							<div class="span4 droite">
613
								<button id="transmettre-obs" class="btn btn-primary btn-large has-tooltip" 
613
								<button id="transmettre-obs" class="btn btn-primary btn-large has-tooltip" 
614
									type="button" disabled="disabled"
614
									type="button" disabled="disabled"
615
									title="Ajoute les observations ci-dessous à votre Carnet en Ligne et les rend publiques.">										
615
									title="Ajoute les observations ci-dessous à votre Carnet en Ligne et les rend publiques.">										
616
									Transmettre
616
									Transmettre
617
								</button>
617
								</button>
618
							</div>
618
							</div>
619
						</div>
619
						</div>
620
						<div id="liste-obs" ></div>
620
						<div id="liste-obs" ></div>
621
					</div>
621
					</div>
622
				</div>
622
				</div>
623
			</div>
623
			</div>
624
			
624
			
625
			<div class="row-fluid">
625
			<div class="row-fluid">
626
				<div class="zone-alerte span12">
626
				<div class="zone-alerte span12">
627
					<div id="dialogue-zero-obs" class="alert alert-block" style="display: none;">
627
					<div id="dialogue-zero-obs" class="alert alert-block" style="display: none;">
628
						<a class="close">×</a>
628
						<a class="close">×</a>
629
						<h4 class="alert-heading">Attention : aucune observation</h4>
629
						<h4 class="alert-heading">Attention : aucune observation</h4>
630
						<p>Veuillez saisir des observations pour les transmettres.</p>
630
						<p>Veuillez saisir des observations pour les transmettres.</p>
631
					</div>
631
					</div>
632
					
632
					
633
					<div id="dialogue-obs-transaction-ok" class="alert alert-success alert-block" style="display: none;">
633
					<div id="dialogue-obs-transaction-ok" class="alert alert-success alert-block" style="display: none;">
634
						<a class="close">×</a>
634
						<a class="close">×</a>
635
						<h4 class="alert-heading">Information : transmission des observations</h4>
635
						<h4 class="alert-heading">Information : transmission des observations</h4>
636
						<div class="alert-txt"></div>
636
						<div class="alert-txt"></div>
637
					</div>
637
					</div>
638
					
638
					
639
					<div id="dialogue-obs-transaction-ko" class="alert alert-error alert-block" style="display: none;">
639
					<div id="dialogue-obs-transaction-ko" class="alert alert-error alert-block" style="display: none;">
640
						<a class="close">×</a>
640
						<a class="close">×</a>
641
						<h4 class="alert-heading">Erreur : transmission des observations</h4>
641
						<h4 class="alert-heading">Erreur : transmission des observations</h4>
642
						<div class="alert-txt"></div>
642
						<div class="alert-txt"></div>
643
					</div>
643
					</div>
644
				</div>
644
				</div>
645
			</div>
645
			</div>
646
		</div>
646
		</div>
647
		
647
		
648
		<!-- Fenêtres modales -->
648
		<!-- Fenêtres modales -->
649
		<div id="chargement" class="modal-fenetre" style="display:none;">			
649
		<div id="chargement" class="modal-fenetre" style="display:none;">			
650
			<div id="chargement-centrage" class="modal-contenu">
650
			<div id="chargement-centrage" class="modal-contenu">
651
				<div class="progress progress-success progress-striped active">
651
				<div class="progress progress-success progress-striped active">
652
		 			<div id="barre-progression-upload" class="bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="10" style="">
652
		 			<div id="barre-progression-upload" class="bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="10" style="">
653
		    			<span class="sr-only">0/10 observations transmises</span>
653
		    			<span class="sr-only">0/10 observations transmises</span>
654
		  			</div>
654
		  			</div>
655
				</div>
655
				</div>
656
				<p id="chargement-txt" style="color:white;font-size:1.5em;">
656
				<p id="chargement-txt" style="color:white;font-size:1.5em;">
657
					Transfert des observations en cours...<br />
657
					Transfert des observations en cours...<br />
658
					Cela peut prendre plusieurs minutes en fonction de la taille des images et du nombre 
658
					Cela peut prendre plusieurs minutes en fonction de la taille des images et du nombre 
659
					d'observations à transférer.
659
					d'observations à transférer.
660
				</p>
660
				</p>
661
			</div>
661
			</div>
662
		</div>
662
		</div>
663
		
663
		
664
		<!-- Templates HTML -->
664
		<!-- Templates HTML -->
665
		<div id="tpl-transmission-ok" style="display:none;">
665
		<div id="tpl-transmission-ok" style="display:none;">
666
			<p class="msg">				
666
			<p class="msg">				
667
				Merci Beaucoup&nbsp;! Vos observations ont bien été transmises aux chercheurs.<br />
667
				Merci Beaucoup&nbsp;! Vos observations ont bien été transmises aux chercheurs.<br />
668
				Elles sont désormais affichées sur la carte Sauvages de ma rue,
668
				Elles sont désormais affichées sur la carte Sauvages de ma rue,
669
				et s'ajoutent aux données du Carnet en ligne.<br />
669
				et s'ajoutent aux données du Carnet en ligne.<br />
670
				Elles sont désormais consultables à travers les différents outils de visualisation 
670
				Elles sont désormais consultables à travers les différents outils de visualisation 
671
				du réseau Tela Botanica (<a href="http://www.tela-botanica.org/site:botanique">eFlore</a>, 
671
				du réseau Tela Botanica (<a href="http://www.tela-botanica.org/site:botanique">eFlore</a>, 
672
				<a href="http://www.tela-botanica.org/appli:pictoflora">galeries d'images</a>, 
672
				<a href="http://www.tela-botanica.org/appli:pictoflora">galeries d'images</a>, 
673
				<a href="http://www.tela-botanica.org/appli:identiplante">identiplante</a>,
673
				<a href="http://www.tela-botanica.org/appli:identiplante">identiplante</a>,
674
				<a href="http://www.tela-botanica.org/widget:cel:cartoPoint">cartographie (widget)</a>...)<br />
674
				<a href="http://www.tela-botanica.org/widget:cel:cartoPoint">cartographie (widget)</a>...)<br />
675
			</p> 
675
			</p> 
676
			<p>
676
			<p>
677
				Bonne continuation&nbsp;!
677
				Bonne continuation&nbsp;!
678
			</p>
678
			</p>
679
			<p>
679
			<p>
680
				Si vous souhaitez les modifier ou les supprimer, vous pouvez les retrouver en vous 
680
				Si vous souhaitez les modifier ou les supprimer, vous pouvez les retrouver en vous 
681
				connectant à votre <a href="http://www.tela-botanica.org/appli:cel">Carnet en ligne</a>.<br />
681
				connectant à votre <a href="http://www.tela-botanica.org/appli:cel">Carnet en ligne</a>.<br />
682
				N'oubliez pas qu'il est nécessaire de 
682
				N'oubliez pas qu'il est nécessaire de 
683
				<a href="http://www.tela-botanica.org/page:inscription">s'inscrire à Tela Botanica</a>
683
				<a href="http://www.tela-botanica.org/page:inscription">s'inscrire à Tela Botanica</a>
684
				au préalable, si ce n'est pas déjà fait.
684
				au préalable, si ce n'est pas déjà fait.
685
			</p>
685
			</p>
686
			<p>
686
			<p>
687
				Pour toute question, n'hésitez pas à nous contacter à&nbsp;: 
687
				Pour toute question, n'hésitez pas à nous contacter à&nbsp;: 
688
				<a href="mailto:sauvages@tela-botanica.org">sauvages@tela-botanica.org</a>
688
				<a href="mailto:sauvages@tela-botanica.org">sauvages@tela-botanica.org</a>
689
			</p>
689
			</p>
690
		</div>
690
		</div>
691
		<div id="tpl-transmission-ko" style="display:none;">
691
		<div id="tpl-transmission-ko" style="display:none;">
692
			<p class="msg">
692
			<p class="msg">
693
				Une erreur est survenue lors de la transmission d'une observation (indiquée en rouge).<br />
693
				Une erreur est survenue lors de la transmission d'une observation (indiquée en rouge).<br />
694
				Vous pouvez tenter de la retransmettre en cliquant à nouveau sur le bouton transmettre ou bien la supprimer 
694
				Vous pouvez tenter de la retransmettre en cliquant à nouveau sur le bouton transmettre ou bien la supprimer 
695
				et transmettre les suivantes.<br />
695
				et transmettre les suivantes.<br />
696
				Néanmoins, les observations n'apparaissant plus dans la liste "observations à transmettre", ont bien été transmises lors de votre précédente tentative. <br />
696
				Néanmoins, les observations n'apparaissant plus dans la liste "observations à transmettre", ont bien été transmises lors de votre précédente tentative. <br />
697
				Si le problème persiste, vous pouvez signaler le dysfonctionnement sur  
697
				Si le problème persiste, vous pouvez signaler le dysfonctionnement sur  
698
				<a href="<?= $url_remarques ?>?email=cel_remarques@tela-botanica.org&pageSource=<?php echo urlencode('http://'.$_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF'].'?'.$_SERVER['QUERY_STRING']); ?>"
698
				<a href="<?= $url_remarques ?>?email=cel_remarques@tela-botanica.org&pageSource=<?php echo urlencode('http://'.$_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF'].'?'.$_SERVER['QUERY_STRING']); ?>"
699
							  target="_blank"
699
							  target="_blank"
700
							  onclick="javascript:window.open(this.getAttribute('href'), 'Tela Botanica - Remarques', config='height=700, width=640, scrollbars=yes, resizable=yes'); return false;">
700
							  onclick="javascript:window.open(this.getAttribute('href'), 'Tela Botanica - Remarques', config='height=700, width=640, scrollbars=yes, resizable=yes'); return false;">
701
							  le formulaire de signalement d'erreurs</a>.
701
							  le formulaire de signalement d'erreurs</a>.
702
			</p>
702
			</p>
703
		</div>
703
		</div>
704
		
704
		
705
		<!-- Stats : Google Analytics-->
705
		<!-- Stats : Google Analytics-->
706
		<script type="text/javascript">
706
		<script type="text/javascript">
707
			//<![CDATA[
707
			//<![CDATA[
708
			var _gaq = _gaq || [];
708
			var _gaq = _gaq || [];
709
			_gaq.push(['_setAccount', 'UA-20092557-1']);
709
			_gaq.push(['_setAccount', 'UA-20092557-1']);
710
			_gaq.push(['_trackPageview']);
710
			_gaq.push(['_trackPageview']);
711
			
711
			
712
			(function() {
712
			(function() {
713
			  var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
713
			  var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
714
			  ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
714
			  ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
715
			  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
715
			  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
716
			})();
716
			})();
717
			//]]>
717
			//]]>
718
		</script>
718
		</script>
719
	</body>
719
	</body>
720
</html>
720
</html>