Subversion Repositories eFlore/Applications.cel

Rev

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

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