Subversion Repositories eFlore/Applications.cel

Rev

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

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