Subversion Repositories eFlore/Applications.cel

Rev

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

Rev 1613 Rev 1614
1
<!DOCTYPE html>
1
<!DOCTYPE html>
2
<html lang="fr">
2
<html lang="fr">
3
	<head>
3
	<head>
4
		<title>Florilèges</title>
4
		<title>Florilèges</title>
5
		<meta charset="utf-8">
5
		<meta charset="utf-8">
6
		
6
		
7
		<meta name="author" content="Jean-Pascal MILCENT, Aurélien PERONNET" />
7
		<meta name="author" content="Jean-Pascal MILCENT, Aurélien PERONNET" />
8
		<meta name="keywords" content="Florilege, Tela Botanica, CEL" />
8
		<meta name="keywords" content="Florilege, Tela Botanica, CEL" />
9
		<meta name="description" content="Widget de saisie du projet Florilege" />
9
		<meta name="description" content="Widget de saisie du projet Florilege" />
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/florileges/img/favicon.ico" />
15
		<link rel="shortcut icon" type="image/x-icon" href="<?=$url_base?>/modules/saisie/squelettes/florileges/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.js"></script>
23
		<script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/1.7.1/jquery-1.7.1.js"></script>
24
		<!-- Jquery UI : nécessaire pour le minicalendrier et l'auto-complétion -->
24
		<!-- Jquery UI : nécessaire pour le minicalendrier et l'auto-complétion -->
25
		<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>
25
		<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.datepicker-fr.min.js"></script>
26
		<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
		<!-- Jquery Plugins -->
27
		<!-- Jquery Plugins -->
28
		<!-- Jquery Validate : nécessaire pour la validation des formulaires -->
28
		<!-- Jquery Validate : nécessaire pour la validation des formulaires -->
29
		<script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/validate/1.11.1/jquery.validate.min.js"></script>
29
		<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/additional-methods.min.js"></script>
30
		<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/messages_fr.js"></script>
31
		<script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/validate/1.11.1/messages_fr.js"></script>
32
		<!-- Jquery Form :nécessaire pour l'upload des images -->
32
		<!-- Jquery Form :nécessaire pour l'upload des images -->
33
		<script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/form/3.32/jquery.form.min.js"></script>
33
		<script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/form/3.32/jquery.form.min.js"></script>
34
		
34
		
35
		<!-- Bootstrap -->
35
		<!-- Bootstrap -->
36
		<script type="text/javascript" src="http://www.tela-botanica.org/commun/bootstrap/2.3.1/js/bootstrap.min.js"></script>
36
		<script type="text/javascript" src="http://www.tela-botanica.org/commun/bootstrap/2.3.1/js/bootstrap.min.js"></script>
37
		
37
		
38
		<!-- Javascript : appli saisie -->
38
		<!-- Javascript : appli saisie -->
39
		<script src="<?=$url_base?>saisie?projet=sauvages&amp;service=taxons" type="text/javascript"></script>
39
		<script src="<?=$url_base?>saisie?projet=sauvages&amp;service=taxons" type="text/javascript"></script>
40
		<script type="text/javascript">
40
		<script type="text/javascript">
41
		//<![CDATA[
41
		//<![CDATA[
42
			// La présence du parametre 'debug' dans l'URL enclenche le dégogage
42
			// La présence du parametre 'debug' dans l'URL enclenche le dégogage
43
			var DEBUG = <?=isset($_GET['debug']) ? 'true' : 'false'?>;
43
			var DEBUG = <?=isset($_GET['debug']) ? 'true' : 'false'?>;
44
			// La présence du parametre 'html5' dans l'URL enclenche les fonctions avancées HTML5
44
			// La présence du parametre 'html5' dans l'URL enclenche les fonctions avancées HTML5
45
			var HTML5 = <?=isset($_GET['html5']) ? 'true' : 'false'?>;
45
			var HTML5 = <?=isset($_GET['html5']) ? 'true' : 'false'?>;
46
			// Mot-clé du widget/projet
46
			// Mot-clé du widget/projet
47
			var TAG_PROJET = "WidgetFlorileges,Sauvages";
47
			var TAG_PROJET = "WidgetFlorileges,Sauvages";
48
			// Mots-clés à ajouter aux images
48
			// Mots-clés à ajouter aux images
49
			var TAG_IMG = "<?=isset($_GET['tag-img']) ? $_GET['tag-img'] : ''?>";
49
			var TAG_IMG = "<?=isset($_GET['tag-img']) ? $_GET['tag-img'] : ''?>";
50
			TAG_IMG = <?=isset($_GET['motcle']) ? "'".$_GET['motcle']."'" : 'TAG_IMG' ?>;
50
			TAG_IMG = <?=isset($_GET['motcle']) ? "'".$_GET['motcle']."'" : 'TAG_IMG' ?>;
51
			// Mots-clés à ajouter aux observations
51
			// Mots-clés à ajouter aux observations
52
			var TAG_OBS = "<?=isset($_GET['tag-obs']) ? $_GET['tag-obs'] : ''?>";
52
			var TAG_OBS = "<?=isset($_GET['tag-obs']) ? $_GET['tag-obs'] : ''?>";
53
			TAG_OBS = <?=isset($_GET['projet']) ? "'".$_GET['projet']."'" : 'TAG_OBS' ?>;
53
			TAG_OBS = <?=isset($_GET['projet']) ? "'".$_GET['projet']."'" : 'TAG_OBS' ?>;
54
			// URL du web service réalisant l'insertion des données dans la base du CEL.
54
			// URL du web service réalisant l'insertion des données dans la base du CEL.
55
			// Précharger le formulaire avec les infos d'une observation
55
			// Précharger le formulaire avec les infos d'une observation
56
			var OBS_ID = "<?=isset($_GET['id-obs']) ? $_GET['id-obs'] : ''?>";
56
			var OBS_ID = "<?=isset($_GET['id-obs']) ? $_GET['id-obs'] : ''?>";
57
			var SERVICE_SAISIE_URL = "<?=$url_ws_saisie?>";
57
			var SERVICE_SAISIE_URL = "<?=$url_ws_saisie?>";
58
			// URL du web service permettant de récupérer les infos d'une observation du CEL.
58
			// URL du web service permettant de récupérer les infos d'une observation du CEL.
59
			var SERVICE_OBS_URL = "<?=$url_ws_obs?>";
59
			var SERVICE_OBS_URL = "<?=$url_ws_obs?>";
60
			// Code du référentiel utilisé pour les nom scientifiques (de la forme nom:code).
60
			// Code du référentiel utilisé pour les nom scientifiques (de la forme nom:code).
61
			var NOM_SCI_REFERENTIEL = "<?=$ns_referentiel?>";
61
			var NOM_SCI_REFERENTIEL = "<?=$ns_referentiel?>";
62
			// Nom du référentiel utilisé pour les nom scientifiques.
62
			// Nom du référentiel utilisé pour les nom scientifiques.
63
			var NOM_SCI_PROJET = "<?=$ns_projet?>";
63
			var NOM_SCI_PROJET = "<?=$ns_projet?>";
64
			// Code de la version du référentiel utilisé pour les nom scientifiques.
64
			// Code de la version du référentiel utilisé pour les nom scientifiques.
65
			var NOM_SCI_VERSION = "<?=$ns_version?>";
65
			var NOM_SCI_VERSION = "<?=$ns_version?>";
66
			// Indication de la présence d'une espèce imposée
66
			// Indication de la présence d'une espèce imposée
67
			var ESPECE_IMPOSEE = "<?=$espece_imposee; ?>";
67
			var ESPECE_IMPOSEE = "<?=$espece_imposee; ?>";
68
			// Tableau d'informations sur l'espèce imposée
68
			// Tableau d'informations sur l'espèce imposée
69
			var INFOS_ESPECE_IMPOSEE = <?=$infos_espece; ?>;
69
			var INFOS_ESPECE_IMPOSEE = <?=$infos_espece; ?>;
70
			// Nombre d'élément dans les listes d'auto-complétion
70
			// Nombre d'élément dans les listes d'auto-complétion
71
			var AUTOCOMPLETION_ELEMENTS_NBRE = 20;
71
			var AUTOCOMPLETION_ELEMENTS_NBRE = 20;
72
			// Indication de la présence d'un référentiel imposé
72
			// Indication de la présence d'un référentiel imposé
73
			var REFERENTIEL_IMPOSE = "<?=$referentiel_impose; ?>";
73
			var REFERENTIEL_IMPOSE = "<?=$referentiel_impose; ?>";
74
			// Indication des version utilisées de chaque référentiel
74
			// Indication des version utilisées de chaque référentiel
75
			var PROJETS_VERSIONS = <?=json_encode($projets_versions)?>;
75
			var PROJETS_VERSIONS = <?=json_encode($projets_versions)?>;
76
			// URL du web service permettant l'auto-complétion des noms scientifiques.
76
			// URL du web service permettant l'auto-complétion des noms scientifiques.
77
			var SERVICE_AUTOCOMPLETION_NOM_SCI_URL = "<?=$url_ws_autocompletion_ns?>?"+
77
			var SERVICE_AUTOCOMPLETION_NOM_SCI_URL = "<?=$url_ws_autocompletion_ns?>?"+
78
					"masque={masque}&"+
78
					"masque={masque}&"+
79
					"recherche=etendue&"+
79
					"recherche=etendue&"+
80
					"retour.champs=famille,nom_retenu,nom_retenu_complet,num_taxonomique,nom_retenu.id&"+
80
					"retour.champs=famille,nom_retenu,nom_retenu_complet,num_taxonomique,nom_retenu.id&"+
81
					//"version.projet="+NOM_SCI_VERSION+"&"+
81
					//"version.projet="+NOM_SCI_VERSION+"&"+
82
					"ns.structure=au"+"&"+
82
					"ns.structure=au"+"&"+
83
					"navigation.limite="+AUTOCOMPLETION_ELEMENTS_NBRE;
83
					"navigation.limite="+AUTOCOMPLETION_ELEMENTS_NBRE;
84
			// URL du web service permettant l'auto-complétion des noms scientifiques.
84
			// URL du web service permettant l'auto-complétion des noms scientifiques.
85
			var SERVICE_AUTOCOMPLETION_NOM_SCI_URL_TPL = "<?=$url_ws_autocompletion_ns_tpl?>?"+
85
			var SERVICE_AUTOCOMPLETION_NOM_SCI_URL_TPL = "<?=$url_ws_autocompletion_ns_tpl?>?"+
86
					"masque={masque}&"+
86
					"masque={masque}&"+
87
					"recherche=etendue&"+
87
					"recherche=etendue&"+
88
					"retour.champs=famille,nom_retenu,nom_retenu_complet,num_taxonomique,nom_retenu.id&"+
88
					"retour.champs=famille,nom_retenu,nom_retenu_complet,num_taxonomique,nom_retenu.id&"+
89
					//"version.projet="+NOM_SCI_VERSION+"&"+
89
					//"version.projet="+NOM_SCI_VERSION+"&"+
90
					"ns.structure=au"+"&"+
90
					"ns.structure=au"+"&"+
91
					"navigation.limite="+AUTOCOMPLETION_ELEMENTS_NBRE;
91
					"navigation.limite="+AUTOCOMPLETION_ELEMENTS_NBRE;
92
			// Nombre d'observations max autorisé avant transmission
92
			// Nombre d'observations max autorisé avant transmission
93
			var OBS_MAX_NBRE = 10;
93
			var OBS_MAX_NBRE = 10;
94
			// Durée d'affichage en milliseconde des messages d'informations
94
			// Durée d'affichage en milliseconde des messages d'informations
95
			var DUREE_MESSAGE = 15000;
95
			var DUREE_MESSAGE = 15000;
96
			// Squelette d'URL du web service de l'annuaire.
96
			// Squelette d'URL du web service de l'annuaire.
97
			var SERVICE_ANNUAIRE_ID_URL = "<?=$url_ws_annuaire?>";
97
			var SERVICE_ANNUAIRE_ID_URL = "<?=$url_ws_annuaire?>";
98
			// Squelette d'URL du web service d'eFlore fournissant les noms de communes.
98
			// Squelette d'URL du web service d'eFlore fournissant les noms de communes.
99
			var SERVICE_NOM_COMMUNE_URL = "http://www.tela-botanica.org/service:eflore:0.1/osm/nom-commune?lon={lon}&lat={lat}";
99
			var SERVICE_NOM_COMMUNE_URL = "http://www.tela-botanica.org/service:eflore:0.1/osm/nom-commune?lon={lon}&lat={lat}";
100
			// Squelette d'URL du web service d'eFlore fournissant les noms de communes hors de France (localisation approximative).
100
			// Squelette d'URL du web service d'eFlore fournissant les noms de communes hors de France (localisation approximative).
101
			var SERVICE_NOM_COMMUNE_URL_ALT = "http://www.tela-botanica.org/service:eflore:0.1/wikipedia/nom-commune?lon={lon}&lat={lat}&nbre=1";
101
			var SERVICE_NOM_COMMUNE_URL_ALT = "http://www.tela-botanica.org/service:eflore:0.1/wikipedia/nom-commune?lon={lon}&lat={lat}&nbre=1";
102
			// URL du marqueur à utiliser dans la carte Google Map
102
			// URL du marqueur à utiliser dans la carte Google Map
103
			var GOOGLE_MAP_MARQUEUR_DEBUT_URL = "<?=$url_base?>/modules/saisie/squelettes/sauvages/images/marqueurs/debut.png";
103
			var GOOGLE_MAP_MARQUEUR_DEBUT_URL = "<?=$url_base?>/modules/saisie/squelettes/sauvages/images/marqueurs/debut.png";
104
			// URL de l'icône de fin de rue
104
			// URL de l'icône de fin de rue
105
			var GOOGLE_MAP_MARQUEUR_FIN_URL = "<?=$url_base?>/modules/saisie/squelettes/sauvages/images/marqueurs/fin.png";
105
			var GOOGLE_MAP_MARQUEUR_FIN_URL = "<?=$url_base?>/modules/saisie/squelettes/sauvages/images/marqueurs/fin.png";
106
			// URL de l'icône du chargement en cours
106
			// URL de l'icône du chargement en cours
107
			var CHARGEMENT_ICONE_URL = "<?=$url_base?>modules/saisie/squelettes/florileges/img/icones/chargement.gif";
107
			var CHARGEMENT_ICONE_URL = "<?=$url_base?>modules/saisie/squelettes/florileges/img/icones/chargement.gif";
108
			// URL de l'icône du chargement en cours d'une image
108
			// URL de l'icône du chargement en cours d'une image
109
			var CHARGEMENT_IMAGE_URL = "<?=$url_base?>modules/saisie/squelettes/florileges/img/icones/chargement-image.gif";
109
			var CHARGEMENT_IMAGE_URL = "<?=$url_base?>modules/saisie/squelettes/florileges/img/icones/chargement-image.gif";
110
			// URL de l'icône du calendrier
110
			// URL de l'icône du calendrier
111
			var CALENDRIER_ICONE_URL = "<?=$url_base?>modules/saisie/squelettes/florileges/img/icones/calendrier.png";
111
			var CALENDRIER_ICONE_URL = "<?=$url_base?>modules/saisie/squelettes/florileges/img/icones/calendrier.png";
112
			// URL de l'icône du calendrier
112
			// URL de l'icône du calendrier
113
			var PAS_DE_PHOTO_ICONE_URL = "<?=$url_base?>modules/saisie/squelettes/florileges/img/icones/pas_de_photo.png";
113
			var PAS_DE_PHOTO_ICONE_URL = "<?=$url_base?>modules/saisie/squelettes/florileges/img/icones/pas_de_photo.png";
114
		//]]>
114
		//]]>
115
		</script>
115
		</script>
116
		<script type="text/javascript" src="<?=$url_base?>modules/saisie/squelettes/florileges/js/florileges.js"></script>
116
		<script type="text/javascript" src="<?=$url_base?>modules/saisie/squelettes/florileges/js/florileges.js"></script>
117
			
117
			
118
		<!-- CSS -->
118
		<!-- CSS -->
119
		<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" />
119
		<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" />
120
		<link href="http://www.tela-botanica.org/commun/bootstrap/2.3.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" media="screen" />
120
		<link href="http://www.tela-botanica.org/commun/bootstrap/2.3.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" media="screen" />
121
		<link href="http://www.tela-botanica.org/commun/bootstrap/2.3.1/css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css" media="screen" />
121
		<link href="http://www.tela-botanica.org/commun/bootstrap/2.3.1/css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css" media="screen" />
122
		<link href="<?=$url_base?>modules/saisie/squelettes/florileges/css/<?=isset($_GET['style']) ? $_GET['style'] : 'florileges'?>.css" rel="stylesheet" type="text/css" media="screen" />
122
		<link href="<?=$url_base?>modules/saisie/squelettes/florileges/css/<?=isset($_GET['style']) ? $_GET['style'] : 'florileges'?>.css" rel="stylesheet" type="text/css" media="screen" />
123
	</head>
123
	</head>
124
 
124
 
125
	<body data-spy="scroll">
125
	<body data-spy="scroll">
126
		<div class="container">
126
		<div class="container">
127
			<div class="row-fluid entete">
127
			<div class="row-fluid entete">
128
				<div class="span7">
128
				<div class="span7">
129
					<div class="well intro">
129
					<div class="well intro">
130
						<h1>Florilèges</h1>
130
						<h1>Florilèges</h1>
131
						<p>
131
						<p>
132
							Bienvenue sur l'interface de saisie en ligne des données
132
							Bienvenue sur l'interface de saisie en ligne des données
133
							"Florilèges"-RUES. Cette interface vous permet d'enregistrer vos
133
							"Florilèges"-RUES. Cette interface vous permet d'enregistrer vos
134
							observations de terrain et de les partager simplement 
134
							observations de terrain et de les partager simplement 
135
							(sous <a href="http://creativecommons.org/licenses/by-sa/2.0/fr/">licence CC-BY-SA</a>)
135
							(sous <a href="http://creativecommons.org/licenses/by-sa/2.0/fr/">licence CC-BY-SA</a>)
136
							avec <a href="http://www.plante-et-cite.fr">Plante &amp; Cité</a>, 
136
							avec <a href="http://www.plante-et-cite.fr">Plante &amp; Cité</a>, 
137
							<a href="http://www.tela-botanica.org/site:accueil">le réseau Tela Botanica</a>
137
							<a href="http://www.tela-botanica.org/site:accueil">le réseau Tela Botanica</a>
138
							et <a href="http://sauvagesdemarue.mnhn.fr">le programme Sauvage de ma Rue</a>.
138
							et <a href="http://sauvagesdemarue.mnhn.fr">le programme Sauvage de ma Rue</a>.
139
						</p>
139
						</p>
140
						<p>
140
						<p>
141
							En vous identifiant, vous pourrez retrouver et consulter l'ensemble de
141
							En vous identifiant, vous pourrez retrouver et consulter l'ensemble de
142
							vos observations dans <a href="http://www.tela-botanica.org/appli:cel">le Carnet en ligne</a>.<br />
142
							vos observations dans <a href="http://www.tela-botanica.org/appli:cel">le Carnet en ligne</a>.<br />
143
							Renseignez tout d'abord les caractéristiques et l'itinéraire technique mis en place 
143
							Renseignez tout d'abord les caractéristiques et l'itinéraire technique mis en place 
144
							sur le site des relevés, puis détaillez ensuite les espèces observées sur ce site. 
144
							sur le site des relevés, puis détaillez ensuite les espèces observées sur ce site. 
145
							Ajoutez chaque observation à la liste à transmettre à l'aide du bouton 
145
							Ajoutez chaque observation à la liste à transmettre à l'aide du bouton 
146
							«&nbsp;Créer&nbsp;».
146
							«&nbsp;Créer&nbsp;».
147
						</p>
147
						</p>
148
						<p>
148
						<p>
149
							L'interface de saisie vous permet de renseigner jusqu'à 10 observations à des dates
149
							L'interface de saisie vous permet de renseigner jusqu'à 10 observations à des dates
150
							différentes pour un même site.
150
							différentes pour un même site.
151
							Partagez-les avec le bouton «&nbsp;Transmettre&nbsp;».
151
							Partagez-les avec le bouton «&nbsp;Transmettre&nbsp;».
152
							Elles apparaissent immédiatement sur 
152
							Elles apparaissent immédiatement sur 
153
							<a href="http://www.tela-botanica.org/site:botanique?langue=fr">la carte</a> et 
153
							<a href="http://www.tela-botanica.org/site:botanique?langue=fr">la carte</a> et 
154
							<a href="http://www.tela-botanica.org/site:botanique?langue=fr">la galerie photos</a> 
154
							<a href="http://www.tela-botanica.org/site:botanique?langue=fr">la galerie photos</a> 
155
							du projet.
155
							du projet.
156
						</p>
156
						</p>
157
						<p>
157
						<p>
158
							Pour toute question, <a href="mailto:contact@florileges.info">contactez les animateurs du programme Florilèges</a>.
158
							Pour toute question, <a href="mailto:contact@florileges.info">contactez les animateurs du programme Florilèges</a>.
159
						</p>
159
						</p>
160
						<p class="discretion">
160
						<p class="discretion">
161
							Un aide interactive est à votre disposition sur l'interface.
161
							Un aide interactive est à votre disposition sur l'interface.
162
							Une fois familiarisé, vous pouvez cliquer sur le bouton suivant pour la désactiver :
162
							Une fois familiarisé, vous pouvez cliquer sur le bouton suivant pour la désactiver :
163
							<button id="btn-aide" class="btn btn-mini btn-success">
163
							<button id="btn-aide" class="btn btn-mini btn-success">
164
								<span class="icon-question-sign icon-white"></span>
164
								<span class="icon-question-sign icon-white"></span>
165
								<span id="btn-aide-txt" >Désactiver l'aide</span>
165
								<span id="btn-aide-txt" >Désactiver l'aide</span>
166
							</button> 
166
							</button> 
167
						</p>
167
						</p>
168
					</div>
168
					</div>
169
				</div>
169
				</div>
170
				
170
				
171
				<div class="span5">
171
				<div class="span5">
172
					<div class="well forcer-colonne">
172
					<div class="well forcer-colonne">
173
						<h2>Observateur</h2>
173
						<h2>Observateur</h2>
174
						<form id="form-observateur" action="#" class="" autocomplete="on">
174
						<form id="form-observateur" action="#" class="" autocomplete="on">
175
							<div class="row-fluid">
175
							<div class="row-fluid">
176
								<div class="span6 control-group has-tooltip" data-placement="bottom"
176
								<div class="span6 control-group has-tooltip" data-placement="bottom"
177
									title="Saisissez le courriel avec lequel vous être inscrit à Tela Botanica.
177
									title="Saisissez le courriel avec lequel vous être inscrit à Tela Botanica.
178
										Si vous n'êtes pas inscrit, ce n'est pas grave, vous pourrez le faire 
178
										Si vous n'êtes pas inscrit, ce n'est pas grave, vous pourrez le faire 
179
										ultérieurement. Des informations complémentaires vont vous être 
179
										ultérieurement. Des informations complémentaires vont vous être 
180
										demandées : prénom et nom.">
180
										demandées : prénom et nom.">
181
										<label class="control-label" for="courriel">
181
										<label class="control-label" for="courriel">
182
											<strong class="obligatoire">*</strong> 
182
											<strong class="obligatoire">*</strong> 
183
											Courriel
183
											Courriel
184
										</label>
184
										</label>
185
										<div class="controls">
185
										<div class="controls">
186
											<div class="input-prepend">
186
											<div class="input-prepend">
187
												<span class="add-on">
187
												<span class="add-on">
188
													<i class="icon-envelope"></i>
188
													<i class="icon-envelope"></i>
189
												</span>
189
												</span>
190
												<input id="courriel" name="courriel" class="span11" type="text"/>
190
												<input id="courriel" name="courriel" class="span11" type="text"/>
191
												<input id="id_utilisateur" name="id_utilisateur" type="hidden"/>
191
												<input id="id_utilisateur" name="id_utilisateur" type="hidden"/>
192
											</div>
192
											</div>
193
										</div>
193
										</div>
194
									
194
									
195
								</div>
195
								</div>
196
								<div id="zone-courriel-confirmation" class="span6 hidden control-group has-tooltip"
196
								<div id="zone-courriel-confirmation" class="span6 hidden control-group has-tooltip"
197
									data-placement="bottom" 
197
									data-placement="bottom" 
198
									title="Saisissez à nouveau votre courriel afin de le confirmer. Le 
198
									title="Saisissez à nouveau votre courriel afin de le confirmer. Le 
199
										copier/coller est désactivé pour éviter les erreurs.">
199
										copier/coller est désactivé pour éviter les erreurs.">
200
									<label class="control-label" for="courriel_confirmation">
200
									<label class="control-label" for="courriel_confirmation">
201
										<strong class="obligatoire">*</strong>
201
										<strong class="obligatoire">*</strong>
202
										Courriel (confirmation)
202
										Courriel (confirmation)
203
									</label>
203
									</label>
204
									<div class="controls">
204
									<div class="controls">
205
										<div class="input-prepend">
205
										<div class="input-prepend">
206
											<span class="add-on">
206
											<span class="add-on">
207
												<i class="icon-envelope"></i>
207
												<i class="icon-envelope"></i>
208
											</span>
208
											</span>
209
											<input id="courriel_confirmation" name="courriel_confirmation" 
209
											<input id="courriel_confirmation" name="courriel_confirmation" 
210
											 	class="span11" type="text"/>
210
											 	class="span11" type="text"/>
211
										</div>
211
										</div>
212
									</div>
212
									</div>
213
								</div>
213
								</div>
214
							</div>
214
							</div>
215
							<div id="zone-prenom-nom" class="row-fluid hidden">
215
							<div id="zone-prenom-nom" class="row-fluid hidden">
216
								<div class="span6 control-group">
216
								<div class="span6 control-group">
217
									<label for="prenom" class="control-label">
217
									<label for="prenom" class="control-label">
218
										<strong class="obligatoire">*</strong>
218
										<strong class="obligatoire">*</strong>
219
										Prénom
219
										Prénom
220
									</label>
220
									</label>
221
									<input id="prenom" name="prenom" class="span12" type="text"/>
221
									<input id="prenom" name="prenom" class="span12" type="text"/>
222
								</div>
222
								</div>
223
								<div class="span6 control-group">
223
								<div class="span6 control-group">
224
									<label for="nom" class="control-label">
224
									<label for="nom" class="control-label">
225
										<strong class="obligatoire">*</strong>
225
										<strong class="obligatoire">*</strong>
226
										Nom
226
										Nom
227
									</label>
227
									</label>
228
									<div class="controls">
228
									<div class="controls">
229
										<input id="nom" name="nom"  class="span12" type="text"/>
229
										<input id="nom" name="nom"  class="span12" type="text"/>
230
									</div>
230
									</div>
231
								</div>
231
								</div>
232
							</div>
232
							</div>
233
							<div id="zone-personne-complement" class="forcer-colonne">
233
							<div id="zone-personne-complement" class="forcer-colonne">
234
								<div class="row-fluid">
234
								<div class="row-fluid">
235
									<div class="span6 control-group has-tooltip" 
235
									<div class="span6 control-group has-tooltip" 
236
										title="Précisez l'entreprise, l'association, l'école, ... au nom de 
236
										title="Précisez l'entreprise, l'association, l'école, ... au nom de 
237
										laquelle vous participez.">
237
										laquelle vous participez.">
238
										<label for="structure" class="control-label">
238
										<label for="structure" class="control-label">
239
											<strong class="obligatoire">*</strong>
239
											<strong class="obligatoire">*</strong>
240
											Structure
240
											Structure
241
										</label>
241
										</label>
242
										<div class="controls">
242
										<div class="controls">
243
											<input id="structure" name="personneStructure" class="span12 obs-chp-etendu" 
243
											<input id="structure" name="personneStructure" class="span12 obs-chp-etendu" 
244
												type="text" data-label="Structure de l'observateur"/>
244
												type="text" data-label="Structure de l'observateur"/>
245
										</div>
245
										</div>
246
									</div>
246
									</div>
247
									<div class="span6 control-group has-tooltip" 
247
									<div class="span6 control-group has-tooltip" 
248
										title="Précisez le service de la structure au nom de laquelle vous participez.">
248
										title="Précisez le service de la structure au nom de laquelle vous participez.">
249
										<label for="service" class="control-label">
249
										<label for="service" class="control-label">
250
											<strong class="obligatoire">*</strong>
250
											<strong class="obligatoire">*</strong>
251
											Service
251
											Service
252
										</label>
252
										</label>
253
										<div class="controls">
253
										<div class="controls">
254
											<input id="service" name="personneService" class="span12 obs-chp-etendu" 
254
											<input id="service" name="personneService" class="span12 obs-chp-etendu" 
255
												type="text" data-label="Service de l'observateur"/>
255
												type="text" data-label="Service de l'observateur"/>
256
										</div>
256
										</div>
257
									</div>
257
									</div>
258
								</div>
258
								</div>
259
								<div class="row-fluid">
259
								<div class="row-fluid">
260
									<div class="span12 has-tooltip" title="Indiquez l'intitulé de votre poste
260
									<div class="span12 has-tooltip" title="Indiquez l'intitulé de votre poste
261
										ou votre mission principale.">
261
										ou votre mission principale.">
262
										<label for="fonction">
262
										<label for="fonction">
263
											Fonction
263
											Fonction
264
										</label>
264
										</label>
265
										<input id="fonction" name="personneFonction" class="span12 obs-chp-etendu" 
265
										<input id="fonction" name="personneFonction" class="span12 obs-chp-etendu" 
266
											type="text" data-label="Fonction de l'observateur"/>
266
											type="text" data-label="Fonction de l'observateur"/>
267
									</div>
267
									</div>
268
								</div>
268
								</div>
269
							</div>
269
							</div>
270
						</form>
270
						</form>
271
					</div>
271
					</div>
272
				</div>
272
				</div>
273
			</div>
273
			</div>
274
			<!-- Messages d'erreur du formulaire-->
274
			<!-- Messages d'erreur du formulaire-->
275
			<div class="row-fluid">
275
			<div class="row-fluid">
276
				<div class="zone-alerte span6 offset3">
276
				<div class="zone-alerte span6 offset3">
277
					<div id="dialogue-bloquer-copier-coller" class="alert alert-info alert-block" style="display:none;">
277
					<div id="dialogue-bloquer-copier-coller" class="alert alert-info alert-block" style="display:none;">
278
						<a class="close">×</a>
278
						<a class="close">×</a>
279
						<h4 class="alert-heading">Information : copier/coller</h4>
279
						<h4 class="alert-heading">Information : copier/coller</h4>
280
						<p>
280
						<p>
281
							Merci de ne pas copier/coller votre courriel.<br/>
281
							Merci de ne pas copier/coller votre courriel.<br/>
282
							La double saisie permet de vérifier l'absence d'erreurs.
282
							La double saisie permet de vérifier l'absence d'erreurs.
283
						</p>
283
						</p>
284
					</div>
284
					</div>
285
					<div id="dialogue-courriel-introuvable" class="alert alert-info alert-block" style="display:none;">
285
					<div id="dialogue-courriel-introuvable" class="alert alert-info alert-block" style="display:none;">
286
						<a class="close">×</a>
286
						<a class="close">×</a>
287
						<h4 class="alert-heading">Information : courriel introuvable</h4>
287
						<h4 class="alert-heading">Information : courriel introuvable</h4>
288
						<p>
288
						<p>
289
							Vous n'êtes pas inscrit à Tela Botanica avec ce courriel.<br/>
289
							Vous n'êtes pas inscrit à Tela Botanica avec ce courriel.<br/>
290
							Veuillez compléter les champs supplémentaires ou indiquer votre courriel d'inscription.<br/>
290
							Veuillez compléter les champs supplémentaires ou indiquer votre courriel d'inscription.<br/>
291
							Pour retrouver vos observations dans le <a href="http://www.tela-botanica.org/appli:cel">Carnet en ligne</a>, 
291
							Pour retrouver vos observations dans le <a href="http://www.tela-botanica.org/appli:cel">Carnet en ligne</a>, 
292
							il sera nécesaire de <a href="http://www.tela-botanica.org/page:inscription">vous inscrire à Tela Botanica</a>.
292
							il sera nécesaire de <a href="http://www.tela-botanica.org/page:inscription">vous inscrire à Tela Botanica</a>.
293
						</p>
293
						</p>
294
					</div>
294
					</div>
295
					<div id="dialogue-google-map" class="alert alert-info alert-block" style="display: none;">
295
					<div id="dialogue-google-map" class="alert alert-info alert-block" style="display: none;">
296
						<a class="close">×</a>
296
						<a class="close">×</a>
297
						<h4 class="alert-heading">Information sur Google Map</h4>
297
						<h4 class="alert-heading">Information sur Google Map</h4>
298
						<div class="contenu"></div>
298
						<div class="contenu"></div>
299
					</div>
299
					</div>
300
				</div>
300
				</div>
301
			</div>
301
			</div>
302
			<div class="row-fluid">
302
			<div class="row-fluid">
303
				<div class="span12">
303
				<div class="span12">
304
					<form id="form-site">
304
					<form id="form-site">
305
						<div class="well">
305
						<div class="well">
306
							<div class="row-fluid">
306
							<div class="row-fluid">
307
								<div class="span4">
307
								<div class="span4">
308
									<div class="row-fluid">
308
									<div class="row-fluid">
309
										<div class="span12">
309
										<div class="span12">
310
											<h2>Site</h2>
310
											<h2>Site</h2>
311
										</div>
311
										</div>
312
									</div>
312
									</div>
313
									<div class="row-fluid">
313
									<div class="row-fluid">
314
										<div class="span12 control-group has-tooltip" 
314
										<div class="span12 control-group has-tooltip" 
315
											title="Nom du site d'étude (quartier, rue, ...)." >
315
											title="Nom du site d'étude (quartier, rue, ...)." >
316
											<label for="station" class="control-label">
316
											<label for="station" class="control-label">
317
												<strong class="obligatoire">*</strong>
317
												<strong class="obligatoire">*</strong>
318
												Nom
318
												Nom
319
											</label>
319
											</label>
320
											<div class="controls">
320
											<div class="controls">
321
												<input id="station" class="span12" name="station" type="text"/>
321
												<input id="station" class="span12" name="station" type="text"/>
322
											</div>
322
											</div>
323
										</div>
323
										</div>
324
									</div>
324
									</div>
325
									<div class="forcer-colonne well control-group">
325
									<div class="forcer-colonne well control-group">
326
										<div class="row-fluid">
326
										<div class="row-fluid">
327
											<div class="span12">
327
											<div class="span12">
328
												<label for="map_canvas" class="control-label" 
328
												<label for="map_canvas" class="control-label" 
329
														title="Veuillez localiser l'observation">
329
														title="Veuillez localiser l'observation">
330
													<strong class="obligatoire">*</strong>
330
													<strong class="obligatoire">*</strong>
331
													Géolocalisation
331
													Géolocalisation
332
												</label>
332
												</label>
333
												<div class="row-fluid">
333
												<div class="row-fluid">
334
													<div class="span12">
334
													<div class="span12">
335
														<ul class="unstyled liste_indication_geolocalisation">
335
														<ul class="unstyled liste_indication_geolocalisation">
336
															<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>
336
															<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>
337
															<li class="indication_geolocalisation">Étape 2/4 : Placez le drapeau vert au début de la portion de rue étudiée</li>
337
															<li class="indication_geolocalisation">Étape 2/4 : Placez le drapeau vert au début de la portion de rue étudiée</li>
338
															<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>
338
															<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>
339
															<li class="indication_geolocalisation">Étape 4/4 : Voilà ! Votre zone d'étude est localisée ! Vous pouvez passer à la saisie de l'observation.</li>
339
															<li class="indication_geolocalisation">Étape 4/4 : Voilà ! Votre zone d'étude est localisée ! Vous pouvez passer à la saisie de l'observation.</li>
340
														</ul>
340
														</ul>
341
													</div>
341
													</div>
342
												</div>
342
												</div>
343
												<div class="form-search form-horizontal">
343
												<div class="form-search form-horizontal">
344
													<div class="control-group">
344
													<div class="control-group">
345
														<input id="carte-recherche" 
345
														<input id="carte-recherche" 
346
															class="search-query span12 obs-chp-etendu has-tooltip"
346
															class="search-query span12 obs-chp-etendu has-tooltip"
347
															type="text"
347
															type="text"
348
															title="Permet de centrer la carte sur le lieu recherché. Il est nécessaire de sélectionner le lieu dans la liste déroulante."
348
															title="Permet de centrer la carte sur le lieu recherché. Il est nécessaire de sélectionner le lieu dans la liste déroulante."
349
															placeholder="Entrez un nom de ville, de lieu ou de rue..."
349
															placeholder="Entrez un nom de ville, de lieu ou de rue..."
350
															name="adresse"
350
															name="adresse"
351
															data-label="Adresse"
351
															data-label="Adresse"
352
															value=""/>
352
															value=""/>
353
													</div>
353
													</div>
354
												</div>
354
												</div>
355
											</div>
355
											</div>
356
										</div>
356
										</div>
357
										<div class="row-fluid">
357
										<div class="row-fluid">
358
											<div class="span12">
358
											<div class="span12">
359
												<div id="map-canvas" class="has-tooltip" 
359
												<div id="map-canvas" class="has-tooltip" 
360
													title="Vous pouvez cliquer sur la carte pour déplacer le marqueur
360
													title="Vous pouvez cliquer sur la carte pour déplacer le marqueur
361
														représentant votre station ou bien le glisser-déposer sur 
361
														représentant votre station ou bien le glisser-déposer sur 
362
														le lieu souhaité."></div>
362
														le lieu souhaité."></div>
363
											</div>
363
											</div>
364
										</div>
364
										</div>
365
										<div id="coordonnees-geo-affichage" class="row-fluid">
365
										<div id="coordonnees-geo-affichage" class="row-fluid">
366
											<label for="coordonnees-geo" class="span6">
366
											<label for="coordonnees-geo" class="span6">
367
												<a class="afficher-coord btn">
367
												<a class="afficher-coord btn">
368
													<span class="afficher-coord-action">Afficher</span>
368
													<span class="afficher-coord-action">Afficher</span>
369
													<span class="afficher-coord-action" style="display:none;">Cacher</span>
369
													<span class="afficher-coord-action" style="display:none;">Cacher</span>
370
													coordonnées
370
													coordonnées
371
													<span id="lat-lon-info" class="info has-tooltip" 
371
													<span id="lat-lon-info" class="info has-tooltip" 
372
														title="Système géodésique mondial, révision de 1984 - Coordonnées non projetées">
372
														title="Système géodésique mondial, révision de 1984 - Coordonnées non projetées">
373
														(WGS84)
373
														(WGS84)
374
													</span>
374
													</span>
375
												</a>
375
												</a>
376
											</label>
376
											</label>
377
											<div id="info-commune" class="span6">
377
											<div id="info-commune" class="span6">
378
												<span for="marqueur-commune">Commune : </span>
378
												<span for="marqueur-commune">Commune : </span>
379
												<span id="marqueur-commune">
379
												<span id="marqueur-commune">
380
													<span id="commune-nom" class="commune-info"></span>
380
													<span id="commune-nom" class="commune-info"></span>
381
													(<span id="commune-code-insee" class="commune-info has-tooltip" 
381
													(<span id="commune-code-insee" class="commune-info has-tooltip" 
382
														title="Code INSEE de la commune"></span>)
382
														title="Code INSEE de la commune"></span>)
383
												</span>
383
												</span>
384
											</div>
384
											</div>
385
										</div>
385
										</div>
386
										<div id="coordonnees-geo" class="row-fluid" style="display:none;">
386
										<div id="coordonnees-geo" class="row-fluid" style="display:none;">
387
											<div class="form-inline">
387
											<div class="form-inline">
388
												<div id="coord-lat" class="span4 control-group">
388
												<div id="coord-lat" class="span4 control-group">
389
													<label for="latitude" class="control-label">
389
													<label for="latitude" class="control-label">
390
														<strong class="obligatoire">*</strong>
390
														<strong class="obligatoire">*</strong>
391
														Latitude
391
														Latitude
392
													</label>
392
													</label>
393
													<div class="controls">
393
													<div class="controls">
394
														<input id="latitude" class="input-mini" name="latitude" type="text" value=""/>
394
														<input id="latitude" class="input-mini" name="latitude" type="text" value=""/>
395
													</div>
395
													</div>
396
												</div>
396
												</div>
397
												<div id="coord-lng" class="span4">
397
												<div id="coord-lng" class="span4">
398
													<label for="longitude" class="control-label">
398
													<label for="longitude" class="control-label">
399
														<strong class="obligatoire">*</strong>
399
														<strong class="obligatoire">*</strong>
400
														Longitude
400
														Longitude
401
													</label>
401
													</label>
402
													<div class="controls">
402
													<div class="controls">
403
														<input id="longitude" class="input-mini" name="longitude" type="text" value=""/>
403
														<input id="longitude" class="input-mini" name="longitude" type="text" value=""/>
404
													</div>
404
													</div>
405
												</div>
405
												</div>
406
												<div class="span4">
406
												<div class="span4">
407
													<button id="geolocaliser" class="btn has-tooltip"
407
													<button id="geolocaliser" class="btn has-tooltip"
408
														title="Centre la carte sur les coordonnées de latitude et longitude saisies.">
408
														title="Centre la carte sur les coordonnées de latitude et longitude saisies.">
409
														Voir sur la carte
409
														Voir sur la carte
410
													</button>
410
													</button>
411
												</div>
411
												</div>
412
											</div>
412
											</div>
413
										</div>
413
										</div>
414
									</div>
414
									</div>
415
								</div>
415
								</div>
416
								<div class="span4">
416
								<div class="span4">
417
									<div class="row-fluid">
417
									<div class="row-fluid">
418
										<div class="span12">
418
										<div class="span12">
419
											<h2>Typologie du site</h2>
419
											<h2>Typologie du site</h2>
420
										</div>
420
										</div>
421
									</div>
421
									</div>
422
									<div class="row-fluid">
422
									<div class="row-fluid">
423
										<div class="span12 control-group has-tooltip" 
423
										<div class="span12 control-group has-tooltip" 
424
											title="Précisez la typologie du site." >
424
											title="Précisez la typologie du site." >
425
											<label for="typo-urbaine" class="control-label">
425
											<label for="typo-urbaine" class="control-label">
426
												<strong class="obligatoire">*</strong>
426
												<strong class="obligatoire">*</strong>
427
												Typologie
427
												Typologie
428
											</label>
428
											</label>
429
											<div class="controls">
429
											<div class="controls">
430
												<select id="typo-urbaine" class="span12 obs-chp-etendu" name="typoUrbaine"
430
												<select id="typo-urbaine" class="span12 obs-chp-etendu" name="typoUrbaine"
431
													data-label="Typologie">
431
													data-label="Typologie">
432
													<option selected value="">Sélectionnez une typologie</option>
432
													<option selected value="">Sélectionnez une typologie</option>
433
													<option>centre ville</option>
433
													<option>centre ville</option>
434
													<option>faubourg</option>
434
													<option>faubourg</option>
435
													<option>quartier résidentiel</option>
435
													<option>quartier résidentiel</option>
436
													<option>zone commerciale</option>
436
													<option>zone commerciale</option>
437
													<option>zone d'activités</option>
437
													<option>zone d'activités</option>
438
												</select>
438
												</select>
439
											</div>
439
											</div>
440
										</div>
440
										</div>
441
									</div>
441
									</div>
442
									<div class="row-fluid">
442
									<div class="row-fluid">
443
										<div class="span12 control-group has-tooltip" 
443
										<div class="span12 control-group has-tooltip" 
444
											title="Indiquez le type de revêtement au sol." >
444
											title="Indiquez le type de revêtement au sol." >
445
											<label for="revetement-sol" class="control-label">
445
											<label for="revetement-sol" class="control-label">
446
												<strong class="obligatoire">*</strong>
446
												<strong class="obligatoire">*</strong>
447
												Revêtement de sol
447
												Revêtement au sol
448
											</label>
448
											</label>
449
											<div class="controls">
449
											<div class="controls">
450
												<select id="revetement-sol" class="span12 obs-chp-etendu" name="revetementSol"
450
												<select id="revetement-sol" class="span12 obs-chp-etendu" name="revetementSol"
451
													data-label="Revêtement de sol">
451
													data-label="Revêtement au sol">
452
													<option selected value="">Sélectionnez un revêtement de sol</option>
452
													<option selected value="">Sélectionnez le revêtement au sol</option>
453
													<option>asphalte et enrobés</option>
453
													<option>asphalte et enrobés</option>
454
													<option>pavés</option>
454
													<option>pavés</option>
455
													<option>stabilisés, aires sablées</option>
455
													<option>stabilisés, aires sablées</option>
456
													<option>graviers</option>
456
													<option>graviers</option>
457
													<option>terre</option>
457
													<option>terre</option>
458
												</select>
458
												</select>
459
											</div>
459
											</div>
460
										</div>
460
										</div>
461
									</div>
461
									</div>
462
									<div class="row-fluid">
462
									<div class="row-fluid">
463
										<div class="span12 has-tooltip" 
463
										<div class="span12 has-tooltip" 
464
											title="Évaluez la densité de zones végétalisés autour du site (haie, aménagement paysager, parcs et jardins, ...)." >
464
											title="Évaluez la densité de zones végétalisés autour du site (haie, aménagement paysager, parcs et jardins, ...)." >
465
											<label>
465
											<label>
466
												Présence de zones végétalisés
466
												Présence de zones végétalisés
467
												<select id="presence-zone-vegetalise" class="obs-chp-etendu slider" 
467
												<select id="presence-zone-vegetalise" class="obs-chp-etendu slider" 
468
													name="presenceZoneVegetalise" data-label="Présence de zones végétalisés">
468
													name="presenceZoneVegetalise" data-label="Présence de zones végétalisés">
469
													<option selected value=""></option>
469
													<option selected value=""></option>
470
													<option value="nulle">nulle</option>
470
													<option value="nulle">nulle</option>
471
													<option value="faible">faible</option>
471
													<option value="faible">faible</option>
472
													<option value="moyenne">moyenne</option>
472
													<option value="moyenne">moyenne</option>
473
													<option value="importante">importante</option>
473
													<option value="importante">importante</option>
474
												</select>
474
												</select>
475
											</label>
475
											</label>
476
										</div>
476
										</div>
477
									</div>
477
									</div>
478
									<div class="row-fluid">
478
									<div class="row-fluid">
479
										<div class="span12 has-tooltip" 
479
										<div class="span12 has-tooltip" 
480
											title="Indiquez la hauteur des bâtiments avoisinants (en étages)." >
480
											title="Indiquez la hauteur des bâtiments avoisinants (en étages)." >
481
											<label>
481
											<label>
482
												Hauteur des bâtiments
482
												Hauteur des bâtiments
483
												<select id="hauteur-batiment-avoisinant" class="obs-chp-etendu slider" 
483
												<select id="hauteur-batiment-avoisinant" class="obs-chp-etendu slider" 
484
													name="hauteurBatimentAvoisinant" data-label="Hauteur des bâtiments">
484
													name="hauteurBatimentAvoisinant" data-label="Hauteur des bâtiments">
485
													<option selected value=""></option>
485
													<option selected value=""></option>
486
													<option value="0">0</option>
486
													<option value="0">0</option>
487
													<option value="1">1</option>
487
													<option value="1">1</option>
488
													<option value="2">2</option>
488
													<option value="2">2</option>
489
													<option value="3">3</option>
489
													<option value="3">3</option>
490
													<option value="4">4</option>
490
													<option value="4">4</option>
491
													<option value="5 et +">5 et +</option>
491
													<option value="5 et +">5 et +</option>
492
												</select>
492
												</select>
493
											</label>
493
											</label>
494
										</div>
494
										</div>
495
									</div>
495
									</div>
496
								</div>
496
								</div>
497
								<div class="span4">
497
								<div class="span4">
498
									<div class="row-fluid">
498
									<div class="row-fluid">
499
										<div class="span12">
499
										<div class="span12">
500
											<h2>Itinéraire technique</h2>
500
											<h2>Itinéraire technique</h2>
501
										</div>
501
										</div>
502
									</div>
502
									</div>
503
									<div class="row-fluid">
503
									<div class="row-fluid">
504
										<div class="span12 control-group has-tooltip" 
504
										<div class="span12 control-group has-tooltip" 
505
											title="Évaluer l'intensité de gestion du site." >
505
											title="Évaluez l'intensité de gestion du site." >
506
											<label for="intensite-gestion" class="control-label">
506
											<label for="intensite-gestion" class="control-label">
507
												<strong class="obligatoire">*</strong>
507
												<strong class="obligatoire">*</strong>
508
												Intensité de gestion
508
												Intensité de gestion
509
											</label>
509
											</label>
510
											<div class="controls">
510
											<div class="controls">
511
												<select id="intensite-gestion" class="span12 obs-chp-etendu" 
511
												<select id="intensite-gestion" class="span12 obs-chp-etendu" 
512
													name="intensiteGestion" data-label="Intensité de gestion">
512
													name="intensiteGestion" data-label="Intensité de gestion">
513
													<option selected value="">Sélectionnez l'intensité</option>
513
													<option selected value="">Sélectionnez l'intensité</option>
514
													<option>extensive</option>
514
													<option>extensive</option>
515
													<option>intermédiaire</option>
515
													<option>intermédiaire</option>
516
													<option>intensive</option>
516
													<option>intensive</option>
517
												</select>
517
												</select>
518
											</div>
518
											</div>
519
										</div>
519
										</div>
520
									</div>
520
									</div>
521
									<div class="row-fluid">
521
									<div class="row-fluid">
522
										<div class="span12">
522
										<div class="span12">
523
											<div class="row-fluid">
523
											<div class="row-fluid">
524
												<div class="span12 control-group has-tooltip" 
524
												<div class="span12 control-group has-tooltip" 
525
													title="Évaluez la fréquence d'utilisation de produits phytosanitaires sur le site." >
525
													title="Évaluez la fréquence d'utilisation de produits phytosanitaires sur le site." >
526
													<label for="periodicite-traitement-phyto" class="control-label">
526
													<label for="periodicite-traitement-phyto" class="control-label">
527
														<strong class="obligatoire">*</strong>
527
														<strong class="obligatoire">*</strong>
528
														Utilisation de produits phytosanitaires
528
														Utilisation de produits phytosanitaires
529
													</label>
529
													</label>
530
													<div class="controls">
530
													<div class="controls">
531
														<select id="periodicite-traitement-phyto" 
531
														<select id="periodicite-traitement-phyto" 
532
															class="obs-chp-etendu slider" 
532
															class="obs-chp-etendu slider" 
533
															name="periodiciteTraitementPhyto"
533
															name="periodiciteTraitementPhyto"
534
															data-label="Utilisation de produits phytosanitaires">
534
															data-label="Utilisation de produits phytosanitaires">
535
															<option selected value=""></option>
535
															<option selected value=""></option>
536
															<option value="régulière">régulière</option>
536
															<option value="régulière">régulière</option>
537
															<option value="occasionnelle">occasionnelle</option>
537
															<option value="occasionnelle">occasionnelle</option>
538
															<option value="rare">rare</option>
538
															<option value="rare">rare</option>
539
															<option value="jamais">jamais</option>
539
															<option value="jamais">jamais</option>
540
														</select>
540
														</select>
541
													</div>
541
													</div>
542
												</div>
542
												</div>
543
											</div>
543
											</div>
544
											<div id="datp-zone" class="row-fluid hidden">
544
											<div id="datp-zone" class="row-fluid hidden">
545
												<div class="span12 has-tooltip" 
545
												<div class="span12 has-tooltip" 
546
														title="Indiquez la date approximative de l'arrêt des traitements. 
546
														title="Indiquez la date approximative de l'arrêt des traitements. 
547
														Vous pouvez cliquer sur l'icône de calendrier pour 
547
														Vous pouvez cliquer sur l'icône de calendrier pour 
548
														sélectionner une date dans un calendrier.">
548
														sélectionner une date dans un calendrier.">
549
													<label title="Veuillez indiquer la date du relevé au format jj/mm/aaaa">
549
													<label title="Veuillez indiquer la date du relevé au format jj/mm/aaaa">
550
														Date d'arrêt des traitements
550
														Date d'arrêt des traitements
551
														<div class="input-prepend">
551
														<div class="input-prepend">
552
															<span id="date-arret-traitement-phyto-icone" class="add-on"></span>
552
															<span id="date-arret-traitement-phyto-icone" class="add-on"></span>
553
															<input id="date-arret-traitement-phyto" class="input-small obs-chp-etendu" 
553
															<input id="date-arret-traitement-phyto" class="input-small obs-chp-etendu" 
554
																name="dateArretTraitementPhyto" type="text"
554
																name="dateArretTraitementPhyto" type="text"
555
																placeholder="jj/mm/aaaa" 
555
																placeholder="jj/mm/aaaa" 
556
																data-label="Date d'arrêt des traitements"/>
556
																data-label="Date d'arrêt des traitements"/>
557
														</div>
557
														</div>
558
													</label>
558
													</label>
559
												</div>
559
												</div>
560
											</div>
560
											</div>
561
										</div>
561
										</div>
562
									</div>
562
									</div>
563
									<div class="row-fluid">
563
									<div class="row-fluid">
564
										<div class="span12 control-group has-tooltip" 
564
										<div class="span12 control-group has-tooltip" 
565
											title="Description de l'itinéraire de gestion (type de traitement, 
565
											title="Description de l'itinéraire de gestion (type de traitement, 
566
											matériel utilisé, fréquence de passage, ...)." >
566
											matériel utilisé, fréquence de passage, ...)." >
567
											<label for="itineraire-gestion" class="control-label">
567
											<label for="itineraire-gestion" class="control-label">
568
												<strong class="obligatoire">*</strong>
568
												<strong class="obligatoire">*</strong>
569
												Description de l'itinéraire de gestion
569
												Description de l'itinéraire de gestion
570
											</label>
570
											</label>
571
											<div class="controls">
571
											<div class="controls">
572
												<textarea id="itineraire-gestion" class="span12 obs-chp-etendu" 
572
												<textarea id="itineraire-gestion" class="span12 obs-chp-etendu" 
573
													rows="7" name="itineraireGestion" 
573
													rows="7" name="itineraireGestion" 
574
													data-label="Description de l'itinéraire de gestion"></textarea>
574
													data-label="Description de l'itinéraire de gestion"></textarea>
575
											</div>
575
											</div>
576
										</div>
576
										</div>
577
									</div>
577
									</div>
578
								</div>
578
								</div>
579
							</div>
579
							</div>
580
						</div>
580
						</div>
581
					</form>
581
					</form>
582
				</div>
582
				</div>
583
			</div>
583
			</div>
584
			<div class="row-fluid">
584
			<div class="row-fluid">
585
				<div class="span12 well">
585
				<div class="span12 well">
586
					<div class="row-fluid">
586
					<div class="row-fluid">
587
						<div class="span3">
587
						<div class="span3">
588
							<h2 id="obs-titre">Observations</h2>
588
							<h2 id="obs-titre">Observations</h2>
589
						</div>
589
						</div>
590
						<div class="span9">
590
						<div class="span9">
591
							<form id="form-date" class="form-inline">
591
							<form id="form-date" class="form-inline">
592
								<div class="span5 control-group has-tooltip" 
592
								<div class="span5 control-group has-tooltip" 
593
									title="Vous pouvez cliquer sur l'icône de calendrier pour 
593
									title="Vous pouvez cliquer sur l'icône de calendrier pour 
594
									sélectionner une date dans un calendrier. La date doit être au format : 
594
									sélectionner une date dans un calendrier. La date doit être au format : 
595
									jj/mm/aaaa">
595
									jj/mm/aaaa">
596
									<label class="control-label">
596
									<label class="control-label">
597
										<strong class="obligatoire">*</strong>
597
										<strong class="obligatoire">*</strong>
598
										Date du relevé 
598
										Date du relevé 
599
										<div class="input-prepend">
599
										<div class="input-prepend">
600
											<span id="date-icone" class="add-on"></span>
600
											<span id="date-icone" class="add-on"></span>
601
											<input id="date" class="input-small" name="date" type="text" 
601
											<input id="date" class="input-small" name="date" type="text" 
602
												placeholder="jj/mm/aaaa" />
602
												placeholder="jj/mm/aaaa" />
603
										</div>
603
										</div>
604
									</label>
604
									</label>
605
								</div>
605
								</div>
606
								<div class="span7 control-group has-tooltip" 
606
								<div class="span7 control-group has-tooltip" 
607
									title="Date approximative de la dernière intervention." >
607
									title="Date approximative de la dernière intervention." >
608
									<label class="span12 control-label">
608
									<label class="span12 control-label">
609
										<strong class="obligatoire">*</strong>
609
										<strong class="obligatoire">*</strong>
610
										Dernière intervention
610
										Dernière intervention
611
										<select id="date-derniere-intervention" class="span8 obs-chp-etendu" 
611
										<select id="date-derniere-intervention" class="span8 obs-chp-etendu" 
612
											name="dateDerniereIntervention" data-label="Dernière intervention">
612
											name="dateDerniereIntervention" data-label="Dernière intervention">
613
											<option selected value="">Sélectionnez la date d'intervention</option>
613
											<option selected value="">Sélectionnez la date d'intervention</option>
614
											<option value="inconnue">ne sais pas</option>
614
											<option value="inconnue">ne sais pas</option>
615
											<option>plus de 3 ans</option>
615
											<option>plus de 3 ans</option>
616
											<option>entre 1 et 3 ans</option>
616
											<option>entre 1 et 3 ans</option>
617
											<option>moins d'1 an</option>
617
											<option>moins d'1 an</option>
618
											<option>au cours du dernier semestre</option>
618
											<option>au cours du dernier semestre</option>
619
											<option>au cours du dernier trimestre</option>
619
											<option>au cours du dernier trimestre</option>
620
											<option>au cours des 30 derniers jours</option>
620
											<option>au cours des 30 derniers jours</option>
621
											<option>au cours des 7 derniers jours</option>
621
											<option>au cours des 7 derniers jours</option>
622
										</select>
622
										</select>
623
									</label>
623
									</label>
624
								</div>
624
								</div>
625
							</form>
625
							</form>
626
						</div>
626
						</div>
627
					</div>
627
					</div>
628
					<form id="form-obs" autocomplete="on">
628
					<form id="form-obs" autocomplete="on">
629
						<div class="row-fluid">
629
						<div class="row-fluid">
630
							<div class="span6">
630
							<div class="span6">
631
								<div class="well">
631
								<div class="well">
632
									<div class="row-fluid">
632
									<div class="row-fluid">
633
										<div class="span12">
633
										<div class="span12">
634
											<div id="taxon-liste-input-groupe" class="control-group has-tooltip"
634
											<div id="taxon-liste-input-groupe" class="control-group has-tooltip"
635
												title="Sélectionnez une espèce dans la liste déroulante par son nom latin 
635
												title="Sélectionnez une espèce dans la liste déroulante par son nom latin 
636
												ou commun. Si une espèce est absente, sélectionner «Autre espèce»." >
636
												ou commun. Si une espèce est absente, sélectionner «Autre espèce»." >
637
												<label class="control-label" for="taxon-liste" title="Choisissez l'espèce rencontrée.">
637
												<label class="control-label" for="taxon-liste" title="Choisissez l'espèce rencontrée.">
638
													<strong class="obligatoire">*</strong> 
638
													<strong class="obligatoire">*</strong> 
639
													Espèces les plus communes
639
													Espèces les plus communes
640
												</label>
640
												</label>
641
												<div class="controls">
641
												<div class="controls">
642
													<div class="input-prepend ">
642
													<div class="input-prepend ">
643
														<span class="add-on">
643
														<span class="add-on">
644
															<i class="icon-leaf"></i>
644
															<i class="icon-leaf"></i>
645
														</span>
645
														</span>
646
														
646
														
647
														<select id="taxon-liste" class="span10" name="taxon-liste">
647
														<select id="taxon-liste" class="span10" name="taxon-liste">
648
															<option value="" selected>Sélectionner une espèce</option>
648
															<option value="" selected>Sélectionner une espèce</option>
649
															
649
															
650
															<optgroup id="taxon-liste-noms">
650
															<optgroup id="taxon-liste-noms">
651
																<?php foreach ($taxons['sci-et-fr'] as $taxon) :?>
651
																<?php foreach ($taxons['sci-et-fr'] as $taxon) :?>
652
																	<option 
652
																	<option 
653
																		class="<?=$taxon['nom_type'] ?>" 
653
																		class="<?=$taxon['nom_type'] ?>" 
654
																		value="<?=$taxon['num_nom'] ?>" 
654
																		value="<?=$taxon['num_nom'] ?>" 
655
																		title="<?=$taxon['nom_title'] ?>"
655
																		title="<?=$taxon['nom_title'] ?>"
656
																		data-nom-a-sauver="<?=$taxon['nom_a_sauver'] ?>"
656
																		data-nom-a-sauver="<?=$taxon['nom_a_sauver'] ?>"
657
																		>
657
																		>
658
																		<?=$taxon['nom_a_afficher']?>
658
																		<?=$taxon['nom_a_afficher']?>
659
																	</option>
659
																	</option>
660
																<?php endforeach; ?>
660
																<?php endforeach; ?>
661
															</optgroup>
661
															</optgroup>
662
															<optgroup id="taxon-liste-special">
662
															<optgroup id="taxon-liste-special">
663
																<?php foreach ($taxons['speciaux'] as $taxon) :?>
663
																<?php foreach ($taxons['speciaux'] as $taxon) :?>
664
																	<option 
664
																	<option 
665
																		class="<?=$taxon['nom_type'] ?>" 
665
																		class="<?=$taxon['nom_type'] ?>" 
666
																		value="<?=$taxon['num_nom'] ?>" 
666
																		value="<?=$taxon['num_nom'] ?>" 
667
																		title="<?=$taxon['nom_title'] ?>"
667
																		title="<?=$taxon['nom_title'] ?>"
668
																		data-nom-a-sauver="<?=$taxon['nom_a_sauver'] ?>"
668
																		data-nom-a-sauver="<?=$taxon['nom_a_sauver'] ?>"
669
																		>
669
																		>
670
																		<?=$taxon['nom_a_afficher']?>
670
																		<?=$taxon['nom_a_afficher']?>
671
																	</option>
671
																	</option>
672
																<?php endforeach; ?>
672
																<?php endforeach; ?>
673
																<option value="?">Autre espèce</option>
673
																<option value="?">Autre espèce</option>
674
															</optgroup>
674
															</optgroup>
675
														</select>
675
														</select>
676
													</div>
676
													</div>
677
												</div>
677
												</div>
678
											</div>
678
											</div>
679
										</div>
679
										</div>
680
									</div>
680
									</div>
681
									<div id="taxon-input-groupe" class="row-fluid hidden">
681
									<div id="taxon-input-groupe" class="row-fluid hidden">
682
										<div class="span12">
682
										<div class="span12">
683
											<div class="control-group has-tooltip" 
683
											<div class="control-group has-tooltip" 
684
												title="Sélectionnez une espèce dans la liste déroulante pour lier 
684
												title="Sélectionnez une espèce dans la liste déroulante pour lier 
685
													votre nom au référentiel. Si vous le désirez vous pouvez aussi saisir 
685
													votre nom au référentiel. Si vous le désirez vous pouvez aussi saisir 
686
													un nom absent du référentiel (Ex. : 'fleur violette' ou 'Viola sp.1')." >
686
													un nom absent du référentiel (Ex. : 'fleur violette' ou 'Viola sp.1')." >
687
												<label for="taxon" class="control-label" title="Choisissez l'espèce rencontrée.">
687
												<label for="taxon" class="control-label" title="Choisissez l'espèce rencontrée.">
688
													Autre espèce
688
													Autre espèce
689
												</label>
689
												</label>
690
												<div class="controls">
690
												<div class="controls">
691
													<input id="taxon" name="taxon" type="text" class="span12"
691
													<input id="taxon" name="taxon" type="text" class="span12"
692
														placeholder="Autre espèce (ou indication sur la plante)" 
692
														placeholder="Autre espèce (ou indication sur la plante)" 
693
														value="<?= $nom_sci_espece_defaut; ?>" />
693
														value="<?= $nom_sci_espece_defaut; ?>" />
694
												</div>
694
												</div>
695
											</div>
695
											</div>
696
										</div>
696
										</div>
697
									</div>
697
									</div>
698
									<div class="row-fluid">
698
									<div class="row-fluid">
699
										<div class="span12 control-group has-tooltip" 
699
										<div class="span12 control-group has-tooltip" 
700
											title="Sélectionnez un ou plusieurs milieux dans lesquels l'espèce est présente sur le site.">
700
											title="Sélectionnez un ou plusieurs milieux dans lesquels l'espèce est présente sur le site.">
701
											<label class="span2 control-label">
701
											<label class="span2 control-label">
702
												<strong class="obligatoire">*</strong>
702
												<strong class="obligatoire">*</strong>
703
												Milieux
703
												Milieux
704
											</label>
704
											</label>
705
											<div id="milieux-controls" class="controls">
705
											<div id="milieux-controls" class="controls">
706
												<div class="input-prepend">
706
												<div class="input-prepend">
707
													<div class="btn-group">
707
													<div class="btn-group">
708
														<button class="btn dropdown-toggle" data-toggle="dropdown">
708
														<button class="btn dropdown-toggle" data-toggle="dropdown">
709
															<i class="icon-globe"></i>
709
															<i class="icon-globe"></i>
710
															Sélectionner un ou plusieurs milieux
710
															Sélectionner un ou plusieurs milieux
711
															<span class="caret"></span>
711
															<span class="caret"></span>
712
														</button>
712
														</button>
713
														<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
713
														<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
714
															<li>
714
															<li>
715
																<label class="checkbox">
715
																<label class="checkbox">
716
																	<input name="milieux[]" class="cb-milieux" type="checkbox" value="chemin"/>
716
																	<input name="milieux[]" class="cb-milieux" type="checkbox" value="chemin"/>
717
																	chemin
717
																	chemin
718
																</label>
718
																</label>
719
															</li>
719
															</li>
720
															<li>
720
															<li>
721
																<label class="checkbox">
721
																<label class="checkbox">
722
																	<input name="milieux[]" class="cb-milieux" type="checkbox" value="fissures"/>
722
																	<input name="milieux[]" class="cb-milieux" type="checkbox" value="fissures"/>
723
																	fissures
723
																	fissures
724
																</label>
724
																</label>
725
															</li>
725
															</li>
726
															<li>
726
															<li>
727
																<label class="checkbox">
727
																<label class="checkbox">
728
																	<input name="milieux[]" class="cb-milieux" type="checkbox" value="haie"/>
728
																	<input name="milieux[]" class="cb-milieux" type="checkbox" value="haie"/>
729
																	haie
729
																	haie
730
																</label>
730
																</label>
731
															</li>
731
															</li>
732
															<li>
732
															<li>
733
																<label class="checkbox">
733
																<label class="checkbox">
734
																	<input name="milieux[]" class="cb-milieux" type="checkbox" value="mur"/>
734
																	<input name="milieux[]" class="cb-milieux" type="checkbox" value="mur"/>
735
																	mur
735
																	mur
736
																</label>
736
																</label>
737
															</li>
737
															</li>
738
															<li>
738
															<li>
739
																<label class="checkbox">
739
																<label class="checkbox">
740
																	<input name="milieux[]" class="cb-milieux" type="checkbox" value="pelouse"/>
740
																	<input name="milieux[]" class="cb-milieux" type="checkbox" value="pelouse"/>
741
																	pelouse
741
																	pelouse
742
																</label>
742
																</label>
743
															</li>
743
															</li>
744
															<li>
744
															<li>
745
																<label class="checkbox">
745
																<label class="checkbox">
746
																	<input name="milieux[]" class="cb-milieux" type="checkbox" value="pied d'arbre"/>
746
																	<input name="milieux[]" class="cb-milieux" type="checkbox" value="pied d'arbre"/>
747
																	pied d'arbre
747
																	pied d'arbre
748
																</label>
748
																</label>
749
															</li>
749
															</li>
750
															<li>
750
															<li>
751
																<label class="checkbox">
751
																<label class="checkbox">
752
																	<input name="milieux[]" class="cb-milieux" type="checkbox" value="plate bande"/>
752
																	<input name="milieux[]" class="cb-milieux" type="checkbox" value="plate bande"/>
753
																	plate bande
753
																	plate bande
754
																</label>
754
																</label>
755
															</li>
755
															</li>
756
														</ul>
756
														</ul>
757
													</div>
757
													</div>
758
												</div>
758
												</div>
759
											</div>
759
											</div>
760
										</div>
760
										</div>
761
									</div>
761
									</div>
762
									
762
									
763
									<div class="row-fluid">
763
									<div class="row-fluid">
764
										<div class="span12 control-group has-tooltip"
764
										<div class="span12 control-group has-tooltip"
765
											title="Indiquez la hauteur maximum en centimètre de la plante sur le site.">
765
											title="Indiquez la hauteur maximum en centimètre de la plante sur le site.">
766
											<label class="control-label">
766
											<label class="control-label">
767
												<strong class="obligatoire">*</strong>
767
												<strong class="obligatoire">*</strong>
768
												Hauteur max. (en cm) de la plante 
768
												Hauteur max. (en cm) de la plante 
769
												<input id="hauteur-plante" class="span2 obs-chp-etendu" 
769
												<input id="hauteur-plante" class="span2 obs-chp-etendu" 
770
													name="hauteurPlante" 
770
													name="hauteurPlante" 
771
													type="number" min="0" step="5" 
771
													type="number" min="0" step="5" 
772
													data-label="Hauteur max. (en cm) de la plante"/>
772
													data-label="Hauteur max. (en cm) de la plante"/>
773
											</label>
773
											</label>
774
										</div>
774
										</div>
775
									</div>
775
									</div>
776
									
776
									
777
									<div class="row-fluid">
777
									<div class="row-fluid">
778
										<div class="span12">
778
										<div class="span12">
779
											<label for="notes">Commentaires</label>
779
											<label for="notes">Commentaires</label>
780
											<div>
780
											<div>
781
												<textarea id="notes" class="span12" rows="7" name="notes" 
781
												<textarea id="notes" class="span12" rows="7" name="notes" 
782
													placeholder="vous pouvez éventuellement ajouter des informations complémentaires à votre observation (altitude, taille de la plante...)"></textarea>
782
													placeholder="vous pouvez éventuellement ajouter des informations complémentaires à votre observation (altitude, taille de la plante...)"></textarea>
783
											</div>
783
											</div>
784
										</div>
784
										</div>
785
									</div>
785
									</div>
786
								</div>
786
								</div>
787
							</div>
787
							</div>
788
							<div class="span6">
788
							<div class="span6">
789
								<div class="well">
789
								<div class="well">
790
									<div class="row-fluid">
790
									<div class="row-fluid">
791
										<div class="span12 control-group has-tooltip" 
791
										<div class="span12 control-group has-tooltip" 
792
											title="Évaluez la résistance/résilience de l'espèce face aux traitements utilisés sur ce site." >
792
											title="Évaluez la résistance/résilience de l'espèce face aux traitements utilisés sur ce site." >
793
											<label class="control-label">
793
											<label class="control-label">
794
												<strong class="obligatoire">*</strong>
794
												<strong class="obligatoire">*</strong>
795
												Résistance/Résilience
795
												Résistance/Résilience
796
											</label>
796
											</label>
797
											<div class="controls">
797
											<div class="controls">
798
												<select id="resistance-traitement-phyto" 
798
												<select id="resistance-traitement-phyto" 
799
													class="obs-chp-etendu slider" 
799
													class="obs-chp-etendu slider" 
800
													name="resistanceTraitementPhyto" 
800
													name="resistanceTraitementPhyto" 
801
													data-label="Résistance/Résilience">
801
													data-label="Résistance/Résilience">
802
													<option selected value=""></option>
802
													<option selected value=""></option>
803
													<option value="pas de traitement">pas de traitement</option>
803
													<option value="pas de traitement">pas de traitement</option>
804
													<option value="faible">faible</option>
804
													<option value="faible">faible</option>
805
													<option value="intermédiaire">intermédiaire</option>
805
													<option value="intermédiaire">intermédiaire</option>
806
													<option value="forte">forte</option>
806
													<option value="forte">forte</option>
807
													<option value="très forte">très forte</option>
807
													<option value="très forte">très forte</option>
808
												</select>
808
												</select>
809
											</div>
809
											</div>
810
										</div>
810
										</div>
811
									</div>
811
									</div>
812
									
812
									
813
									<div class="row-fluid">
813
									<div class="row-fluid">
814
										<div class="span12 has-tooltip" 
814
										<div class="span12 has-tooltip" 
815
											title="Évaluez la vitesse de croissance de l'espèce sur ce site." >
815
											title="Évaluez la vitesse de croissance de l'espèce sur ce site." >
816
											<label>
816
											<label>
817
												Croissance
817
												Croissance
818
												<select id="vitesse-croissance" 
818
												<select id="vitesse-croissance" 
819
													class="obs-chp-etendu slider" 
819
													class="obs-chp-etendu slider" 
820
													name="vitesseCroissance"
820
													name="vitesseCroissance"
821
												 	data-label="Croissance">
821
												 	data-label="Croissance">
822
													<option selected value=""></option>
822
													<option selected value=""></option>
823
													<option value="nulle">nulle</option>
823
													<option value="nulle">nulle</option>
824
													<option value="lente">lente</option>
824
													<option value="lente">lente</option>
825
													<option value="moyenne">moyenne</option>
825
													<option value="moyenne">moyenne</option>
826
													<option value="rapide">rapide</option>
826
													<option value="rapide">rapide</option>
827
													<option value="trop rapide">trop rapide</option>
827
													<option value="trop rapide">trop rapide</option>
828
												</select>
828
												</select>
829
											</label>
829
											</label>
830
										</div>
830
										</div>
831
									</div>
831
									</div>
832
								</div>
832
								</div>
833
								<div class="well">
833
								<div class="well">
834
									<div class="row-fluid">
834
									<div class="row-fluid">
835
										<div class="span12 has-tooltip" 
835
										<div class="span12 has-tooltip" 
836
											title="Perception globale de l'espèce par l'équipe technique.">
836
											title="Perception globale de l'espèce par l'équipe technique.">
837
											<label class="span4">
837
											<label class="span4">
838
												Perceptions par l'équipe
838
												Perceptions par l'équipe
839
											</label>
839
											</label>
840
											<div class="input-prepend">
840
											<div class="input-prepend">
841
												<div class="btn-group">
841
												<div class="btn-group">
842
													<button class="btn dropdown-toggle" data-toggle="dropdown">
842
													<button class="btn dropdown-toggle" data-toggle="dropdown">
843
														<i class="icon-eye-open"></i>
843
														<i class="icon-eye-open"></i>
844
														Sélectionner une ou plusieurs perceptions
844
														Sélectionner une ou plusieurs perceptions
845
														<span class="caret"></span>
845
														<span class="caret"></span>
846
													</button>
846
													</button>
847
													<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
847
													<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
848
														<li>
848
														<li>
849
															<label class="checkbox">
849
															<label class="checkbox">
850
																<input name="perceptionTechnicien[]" class="cb-perception-technicien" type="checkbox" value="inconnue"/>
850
																<input name="perceptionTechnicien[]" class="cb-perception-technicien" type="checkbox" value="inconnue"/>
851
																ne connaissais pas la plante avant l'étude
851
																ne connaissais pas la plante avant l'étude
852
															</label>
852
															</label>
853
														</li>
853
														</li>
854
														<li>
854
														<li>
855
															<label class="checkbox">
855
															<label class="checkbox">
856
																<input name="perceptionTechnicien[]" class="cb-perception-technicien" type="checkbox" value="discrète"/>
856
																<input name="perceptionTechnicien[]" class="cb-perception-technicien" type="checkbox" value="discrète"/>
857
																discrète ne pose pas de problème
857
																discrète ne pose pas de problème
858
															</label>
858
															</label>
859
														</li>
859
														</li>
860
														<li>
860
														<li>
861
															<label class="checkbox">
861
															<label class="checkbox">
862
																<input name="perceptionTechnicien[]" class="cb-perception-technicien" type="checkbox" value="esthétique"/>
862
																<input name="perceptionTechnicien[]" class="cb-perception-technicien" type="checkbox" value="esthétique"/>
863
																visible et esthétique
863
																visible et esthétique
864
															</label>
864
															</label>
865
														</li>
865
														</li>
866
														<li>
866
														<li>
867
															<label class="checkbox">
867
															<label class="checkbox">
868
																<input name="perceptionTechnicien[]" class="cb-perception-technicien" type="checkbox" value="gênante"/>
868
																<input name="perceptionTechnicien[]" class="cb-perception-technicien" type="checkbox" value="gênante"/>
869
																gênante, difficile à gérer
869
																gênante, difficile à gérer
870
															</label>
870
															</label>
871
														</li>
871
														</li>
872
														<li>
872
														<li>
873
															<label class="checkbox">
873
															<label class="checkbox">
874
																<input name="perceptionTechnicien[]" class="cb-perception-technicien" type="checkbox" value="envahissante"/>
874
																<input name="perceptionTechnicien[]" class="cb-perception-technicien" type="checkbox" value="envahissante"/>
875
																envahissante, cause des dégâts
875
																envahissante, cause des dégâts
876
															</label>
876
															</label>
877
														</li>
877
														</li>
878
													</ul>
878
													</ul>
879
												</div>
879
												</div>
880
											</div>
880
											</div>
881
										</div>
881
										</div>
882
									</div>
882
									</div>
883
									
883
									
884
									<div class="row-fluid">
884
									<div class="row-fluid">
885
										<div class="span12 has-tooltip" 
885
										<div class="span12 has-tooltip" 
886
											title="Évaluez la mauvaise perception des riverains vis à vis de cette espèce." >
886
											title="Évaluez la mauvaise perception des riverains vis à vis de cette espèce." >
887
											<label>
887
											<label>
888
												Mauvaise perception par les riverains ?
888
												Mauvaise perception par les riverains ?
889
												<select id="perception-riverain-mauvaise" class="obs-chp-etendu" 
889
												<select id="perception-riverain-mauvaise" class="obs-chp-etendu" 
890
													name="perceptionRiverainMauvaise" data-label="Mauvaise perception par les riverains ?">
890
													name="perceptionRiverainMauvaise" data-label="Mauvaise perception par les riverains ?">
891
													<option>inconnue</option>
891
													<option>inconnue</option>
892
													<option>oui</option>
892
													<option>oui</option>
893
													<option>non</option>
893
													<option>non</option>
894
												</select>
894
												</select>
895
											</label>
895
											</label>
896
										</div>
896
										</div>
897
									</div>
897
									</div>
898
								</div>
898
								</div>
899
							</div>
899
							</div>
900
						</div>
900
						</div>
901
					</form>
901
					</form>
902
						
902
						
903
					<form id="form-upload" class="form-horizontal" action="<?=$url_base?>saisie?projet=sauvages&amp;service=upload-image" 
903
					<form id="form-upload" class="form-horizontal" action="<?=$url_base?>saisie?projet=sauvages&amp;service=upload-image" 
904
						method="post" enctype="multipart/form-data">
904
						method="post" enctype="multipart/form-data">
905
						<div class="row-fluid">
905
						<div class="row-fluid">
906
							<div class="span12 well">
906
							<div class="span12 well">
907
								<strong>Ajoutez des images</strong> 
907
								<strong>Ajoutez des images</strong> 
908
								<p class="miniature-info" class="discretion help-inline">Les photos doivent être au format JPEG et ne doivent pas excéder 5Mo chacunes.</p>
908
								<p class="miniature-info" class="discretion help-inline">Les photos doivent être au format JPEG et ne doivent pas excéder 5Mo chacunes.</p>
909
								<div id ="photos-conteneur">
909
								<div id ="photos-conteneur">
910
									<input type="file" id="fichier" name="fichier" accept="image/jpeg" />
910
									<input type="file" id="fichier" name="fichier" accept="image/jpeg" />
911
									<input type="hidden" name="MAX_FILE_SIZE" value="5242880"/>	
911
									<input type="hidden" name="MAX_FILE_SIZE" value="5242880"/>	
912
									<div id="miniatures"></div>
912
									<div id="miniatures"></div>
913
									<p class="miniature-msg" class="span12">&nbsp;</p>
913
									<p class="miniature-msg" class="span12">&nbsp;</p>
914
								</div>
914
								</div>
915
							</div>
915
							</div>
916
						</div>
916
						</div>
917
					</form>
917
					</form>
918
					<div class="row-fluid">
918
					<div class="row-fluid">
919
						<div class="span12 centre has-tooltip" 
919
						<div class="span12 centre has-tooltip" 
920
							title="Une fois les champs remplis, vous pouvez cliquer sur ce bouton pour 
920
							title="Une fois les champs remplis, vous pouvez cliquer sur ce bouton pour 
921
								ajouter votre observation à la liste à transmettre.">
921
								ajouter votre observation à la liste à transmettre.">
922
							<button id="ajouter-obs" class="btn btn-primary btn-large" type="button">
922
							<button id="ajouter-obs" class="btn btn-primary btn-large" type="button">
923
								Créer
923
								Créer
924
							</button>
924
							</button>
925
						</div>
925
						</div>
926
					</div>
926
					</div>
927
					
927
					
928
				</div>
928
				</div>
929
			</div>
929
			</div>
930
				
930
				
931
			<!-- Messages d'erreur du formulaire-->
931
			<!-- Messages d'erreur du formulaire-->
932
			<div class="row-fluid">
932
			<div class="row-fluid">
933
				<div class="zone-alerte span6 offset3">
933
				<div class="zone-alerte span6 offset3">
934
					<div id="dialogue-bloquer-creer-obs" class="alert alert-warning alert-block" style="display: none;">
934
					<div id="dialogue-bloquer-creer-obs" class="alert alert-warning alert-block" style="display: none;">
935
						<a class="close">×</a>
935
						<a class="close">×</a>
936
						<h4 class="alert-heading">Information : 10 observations maximum</h4>
936
						<h4 class="alert-heading">Information : 10 observations maximum</h4>
937
						<p>
937
						<p>
938
							Vous venez d'ajouter votre 10ème observation.<br/>
938
							Vous venez d'ajouter votre 10ème observation.<br/>
939
							Pour en ajouter de nouvelles, il est nécessaire de les transmettre en cliquant sur le bouton ci-dessous.
939
							Pour en ajouter de nouvelles, il est nécessaire de les transmettre en cliquant sur le bouton ci-dessous.
940
						</p>
940
						</p>
941
					</div>
941
					</div>
942
				</div>
942
				</div>
943
				<div class="zone-alerte span6 offset3">
943
				<div class="zone-alerte span6 offset3">
944
					<div id="dialogue-form-invalide" class="alert alert-warning alert-block" style="display: none;">
944
					<div id="dialogue-form-invalide" class="alert alert-warning alert-block" style="display: none;">
945
						<a class="close">×</a>
945
						<a class="close">×</a>
946
						<h4 class="alert-heading">Information : champs en erreur</h4>
946
						<h4 class="alert-heading">Information : champs en erreur</h4>
947
						<p>
947
						<p>
948
							Certains champs du formulaire sont mal remplis.<br/>
948
							Certains champs du formulaire sont mal remplis.<br/>
949
							Veuillez vérifier vos données.
949
							Veuillez vérifier vos données.
950
						</p>
950
						</p>
951
					</div>
951
					</div>
952
				</div>
952
				</div>
953
				<div class="zone-alerte span6 offset3">
953
				<div class="zone-alerte span6 offset3">
954
					<div id="dialogue-form-invalide-rue" class="alert alert-warning alert-block" style="display: none;">
954
					<div id="dialogue-form-invalide-rue" class="alert alert-warning alert-block" style="display: none;">
955
						<a class="close">×</a>
955
						<a class="close">×</a>
956
						<h4 class="alert-heading">Information : champs en erreur</h4>
956
						<h4 class="alert-heading">Information : champs en erreur</h4>
957
						<p>
957
						<p>
958
							Le coordonnées du début et de la fin de la rue n'ont pas été géoréférencé.<br/>
958
							Le coordonnées du début et de la fin de la rue n'ont pas été géoréférencé.<br/>
959
							Veuillez suivre les étapes indiquées dans le champ « Géolocalisation ».
959
							Veuillez suivre les étapes indiquées dans le champ « Géolocalisation ».
960
						</p>
960
						</p>
961
					</div>
961
					</div>
962
				</div>
962
				</div>
963
			</div>
963
			</div>
964
				
964
				
965
			<!-- Affiche le tableau récapitualif des observations ajoutées -->
965
			<!-- Affiche le tableau récapitualif des observations ajoutées -->
966
			<div id="zone-liste-obs" class="row-fluid hidden">
966
			<div id="zone-liste-obs" class="row-fluid hidden">
967
				<div class="span12">
967
				<div class="span12">
968
					<div class="well">
968
					<div class="well">
969
						<div class="row-fluid">
969
						<div class="row-fluid">
970
							<div class="span8">
970
							<div class="span8">
971
								<h2>Observations à transmettre : <span class="obs-nbre">0</span></h2>
971
								<h2>Observations à transmettre : <span class="obs-nbre">0</span></h2>
972
							</div>
972
							</div>
973
							<div class="span4 droite">
973
							<div class="span4 droite">
974
								<button id="transmettre-obs" class="btn btn-primary btn-large has-tooltip" 
974
								<button id="transmettre-obs" class="btn btn-primary btn-large has-tooltip" 
975
									type="button" disabled="disabled"
975
									type="button" disabled="disabled"
976
									title="Ajoute les observations ci-dessous à votre Carnet en Ligne et les rend publiques.">										
976
									title="Ajoute les observations ci-dessous à votre Carnet en Ligne et les rend publiques.">										
977
									Transmettre
977
									Transmettre
978
								</button>
978
								</button>
979
							</div>
979
							</div>
980
						</div>
980
						</div>
981
						<div id="liste-obs" ></div>
981
						<div id="liste-obs" ></div>
982
					</div>
982
					</div>
983
				</div>
983
				</div>
984
			</div>
984
			</div>
985
			
985
			
986
			<div class="row-fluid">
986
			<div class="row-fluid">
987
				<div class="zone-alerte span6 offset3">
987
				<div class="zone-alerte span6 offset3">
988
					<div id="dialogue-zero-obs" class="alert alert-block" style="display: none;">
988
					<div id="dialogue-zero-obs" class="alert alert-block" style="display: none;">
989
						<a class="close">×</a>
989
						<a class="close">×</a>
990
						<h4 class="alert-heading">Attention : aucune observation</h4>
990
						<h4 class="alert-heading">Attention : aucune observation</h4>
991
						<p>Veuillez saisir des observations pour les transmettres.</p>
991
						<p>Veuillez saisir des observations pour les transmettres.</p>
992
					</div>
992
					</div>
993
					
993
					
994
					<div id="dialogue-obs-transaction-ok" class="alert alert-success alert-block" style="display: none;"">
994
					<div id="dialogue-obs-transaction-ok" class="alert alert-success alert-block" style="display: none;"">
995
						<a class="close">×</a>
995
						<a class="close">×</a>
996
						<h4 class="alert-heading">Information : transmission des observations</h4>
996
						<h4 class="alert-heading">Information : transmission des observations</h4>
997
						<div class="alert-txt"></div>
997
						<div class="alert-txt"></div>
998
					</div>
998
					</div>
999
					
999
					
1000
					<div id="dialogue-obs-transaction-ko" class="alert alert-error alert-block" style="display: none;">
1000
					<div id="dialogue-obs-transaction-ko" class="alert alert-error alert-block" style="display: none;">
1001
						<a class="close">×</a>
1001
						<a class="close">×</a>
1002
						<h4 class="alert-heading">Erreur : transmission des observations</h4>
1002
						<h4 class="alert-heading">Erreur : transmission des observations</h4>
1003
						<div class="alert-txt"></div>
1003
						<div class="alert-txt"></div>
1004
					</div>
1004
					</div>
1005
				</div>
1005
				</div>
1006
			</div>
1006
			</div>
1007
 
1007
 
1008
			
1008
			
1009
			<footer class="row-fluid">
1009
			<footer class="row-fluid">
1010
				<p class="span12">&copy; Tela Botanica 2013</p>
1010
				<p class="span12">&copy; Tela Botanica 2013</p>
1011
			</footer>
1011
			</footer>
1012
		</div>
1012
		</div>
1013
		
1013
		
1014
		<!-- Fenêtres modales -->
1014
		<!-- Fenêtres modales -->
1015
		<div id="chargement" class="modal-fenetre" style="display:none;">			
1015
		<div id="chargement" class="modal-fenetre" style="display:none;">			
1016
			<div id="chargement-centrage" class="modal-contenu">
1016
			<div id="chargement-centrage" class="modal-contenu">
1017
				<img id="chargement-img" 
1017
				<img id="chargement-img" 
1018
					src="<?=$url_base?>modules/saisie/squelettes/sauvages/images/chargement_arbre.gif" 
1018
					src="<?=$url_base?>modules/saisie/squelettes/sauvages/images/chargement_arbre.gif" 
1019
					alt="Transfert en cours..."/>
1019
					alt="Transfert en cours..."/>
1020
				<p id="chargement-txt" style="color:white;font-size:1.5em;">
1020
				<p id="chargement-txt" style="color:white;font-size:1.5em;">
1021
					Transfert des observations en cours...<br />
1021
					Transfert des observations en cours...<br />
1022
					Cela peut prendre plusieurs minutes en fonction de la taille des images et du nombre 
1022
					Cela peut prendre plusieurs minutes en fonction de la taille des images et du nombre 
1023
					d'observations à transférer.
1023
					d'observations à transférer.
1024
				</p>
1024
				</p>
1025
			</div>
1025
			</div>
1026
		</div>
1026
		</div>
1027
		
1027
		
1028
		<!-- Templates HTML -->
1028
		<!-- Templates HTML -->
1029
		<div id="tpl-transmission-ok" style="display:none;">
1029
		<div id="tpl-transmission-ok" style="display:none;">
1030
			<p class="msg">
1030
			<p class="msg">
1031
				Vos observations ont bien été transmises.<br />
1031
				Vos observations ont bien été transmises.<br />
1032
				Elles sont désormais consultables à travers les différents outils de visualisation 
1032
				Elles sont désormais consultables à travers les différents outils de visualisation 
1033
				du réseau Tela Botanica (<a href="http://www.tela-botanica.org/site:botanique">eFlore</a>, 
1033
				du réseau Tela Botanica (<a href="http://www.tela-botanica.org/site:botanique">eFlore</a>, 
1034
				<a href="http://www.tela-botanica.org/appli:pictoflora">galeries d'images</a>, 
1034
				<a href="http://www.tela-botanica.org/appli:pictoflora">galeries d'images</a>, 
1035
				<a href="http://www.tela-botanica.org/appli:identiplante">identiplante</a>,
1035
				<a href="http://www.tela-botanica.org/appli:identiplante">identiplante</a>,
1036
				<a href="http://www.tela-botanica.org/widget:cel:cartoPoint">cartographie (widget)</a>...)<br />
1036
				<a href="http://www.tela-botanica.org/widget:cel:cartoPoint">cartographie (widget)</a>...)<br />
1037
				Si vous souhaitez les modifier ou les supprimer, vous pouvez les retrouver en vous 
1037
				Si vous souhaitez les modifier ou les supprimer, vous pouvez les retrouver en vous 
1038
				connectant à votre <a href="http://www.tela-botanica.org/appli:cel">Carnet en ligne</a>.<br />
1038
				connectant à votre <a href="http://www.tela-botanica.org/appli:cel">Carnet en ligne</a>.<br />
1039
				N'oubliez pas qu'il est nécessaire de 
1039
				N'oubliez pas qu'il est nécessaire de 
1040
				<a href="http://www.tela-botanica.org/page:inscription">s'inscrire à Tela Botanica</a>
1040
				<a href="http://www.tela-botanica.org/page:inscription">s'inscrire à Tela Botanica</a>
1041
				au préalable, si ce n'est pas déjà fait.
1041
				au préalable, si ce n'est pas déjà fait.
1042
			</p>
1042
			</p>
1043
		</div>
1043
		</div>
1044
		<div id="tpl-transmission-ko" style="display:none;">
1044
		<div id="tpl-transmission-ko" style="display:none;">
1045
			<p class="msg">
1045
			<p class="msg">
1046
				Une erreur est survenue lors de la transmission de vos observations.<br />
1046
				Une erreur est survenue lors de la transmission de vos observations.<br />
1047
				Vous pouvez signaler le dysfonctionnement à 
1047
				Vous pouvez signaler le dysfonctionnement à 
1048
				<a class="courriel-erreur" href="mailto:">cel_remarques@tela-botanica.org</a>.
1048
				<a class="courriel-erreur" href="mailto:">cel_remarques@tela-botanica.org</a>.
1049
			</p>
1049
			</p>
1050
		</div>
1050
		</div>
1051
		
1051
		
1052
		<!-- Stats : Google Analytics-->
1052
		<!-- Stats : Google Analytics-->
1053
		<script type="text/javascript">
1053
		<script type="text/javascript">
1054
			//<![CDATA[
1054
			//<![CDATA[
1055
			var _gaq = _gaq || [];
1055
			var _gaq = _gaq || [];
1056
			_gaq.push(['_setAccount', 'UA-20092557-1']);
1056
			_gaq.push(['_setAccount', 'UA-20092557-1']);
1057
			_gaq.push(['_trackPageview']);
1057
			_gaq.push(['_trackPageview']);
1058
			
1058
			
1059
			(function() {
1059
			(function() {
1060
			  var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
1060
			  var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
1061
			  ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
1061
			  ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
1062
			  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
1062
			  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
1063
			})();
1063
			})();
1064
			//]]>
1064
			//]]>
1065
		</script>
1065
		</script>
1066
	</body>
1066
	</body>
1067
</html>
1067
</html>