Subversion Repositories eFlore/Applications.cel

Rev

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

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