Subversion Repositories eFlore/Applications.cel

Rev

Rev 2408 | Go to most recent revision | Show entire file | Ignore whitespace | Details | Blame | Last modification | View Log | RSS feed

Rev 2408 Rev 2410
Line -... Line 1...
-
 
1
<?php $mission = isset($_GET['mission']) ? strtolower($_GET['mission']) : null; ?>
-
 
2
<?php $missionTitre = isset($_GET['mission']) ? ucwords($_GET['mission']) : 'Inconnue'; ?>
1
<!DOCTYPE html>
3
<!DOCTYPE html>
2
<html lang="fr">
4
<html lang="fr">
3
	<head>
5
	<head>
4
		<?php if (isset($_GET['mission'])) :?>
6
		<?php if (isset($_GET['mission'])) :?>
5
			<?php if (isset($titre)) :?>
7
			<?php if (isset($titre)) :?>
Line 13... Line 15...
13
 
15
 
14
		<meta name="revisit-after" content="15 days" />
16
		<meta name="revisit-after" content="15 days" />
15
		<meta name="robots" content="index,follow" />
17
		<meta name="robots" content="index,follow" />
16
		<meta name="author" content="Jean-Pascal MILCENT" />
18
		<meta name="author" content="Jean-Pascal MILCENT" />
17
		<meta name="keywords" content="Tela Botanica, CEL" />
19
		<meta name="keywords" content="Tela Botanica, CEL" />
Line 18... Line 20...
18
		<meta name="description" content="Projet Ambrosia - Widget de saisie simplifiée pour le CEL" />
20
		<meta name="description" content="Projet Missions Flore - Widget de saisie simplifiée pour le CEL" />
19
 
21
 
Line 20... Line 22...
20
		<!-- Viewport Mobile -->
22
		<!-- Viewport Mobile -->
Line 25... Line 27...
25
 
27
 
26
		<!-- Javascript : bibliothèques -->
28
		<!-- Javascript : bibliothèques -->
27
		<!-- Google Map v3 -->
29
		<!-- Google Map v3 -->
28
		<!--<script type="text/javascript" src="https://getfirebug.com/firebug-lite.js"></script>-->
30
		<!--<script type="text/javascript" src="https://getfirebug.com/firebug-lite.js"></script>-->
-
 
31
		<script src="http://maps.google.com/maps/api/js?sensor=true&amp;language=fr&amp;region=FR"></script>
-
 
32
		<!-- Proj4js -->
Line 29... Line 33...
29
		<script src="http://maps.google.com/maps/api/js?sensor=true&amp;language=fr&amp;region=FR"></script>
33
		<script type="text/javascript" src="http://resources.tela-botanica.org/proj4js/2.2.1/proj4.js"></script>
30
 
34
 
31
		<!-- Jquery -->
35
		<!-- Jquery -->
32
		<script src="http://resources.tela-botanica.org/jquery/1.7.1/jquery-1.7.1.min.js"></script>
36
		<script src="http://resources.tela-botanica.org/jquery/1.11.1/jquery-1.11.1.min.js"></script>
33
		<!-- Jquery UI : nécessaire pour le mini-calendrier et l'auto-complétion -->
37
		<!-- Jquery UI : nécessaire pour le mini-calendrier et l'auto-complétion -->
34
		<script src="http://resources.tela-botanica.org/jquery/jquery-ui/1.8.18/js/jquery-ui-1.8.18.custom.min.js"></script>
38
		<script src="http://resources.tela-botanica.org/jquery/jquery-ui/1.11.0/js/jquery-ui.min.js"></script>
35
		<script src="http://resources.tela-botanica.org/jquery/jquery-ui/1.8.18/js/jquery.ui.datepicker-fr.js"></script>
39
		<script src="http://resources.tela-botanica.org/jquery/jquery-ui/1.11.0/js/datepicker-fr.js"></script>
36
		<!-- Jquery Plugins -->
40
		<!-- Jquery Plugins -->
37
		<!-- Jquery Validate : nécessaire pour la validation des formulaires -->
41
		<!-- Jquery Validate : nécessaire pour la validation des formulaires -->
38
		<script src="http://resources.tela-botanica.org/jquery/validate/1.9.0/jquery.validate.min.js"></script>
42
		<script src="http://resources.tela-botanica.org/jquery/validate/1.13.0/jquery.validate.min.js"></script>
39
		<script src="http://resources.tela-botanica.org/jquery/validate/1.9.0/messages_fr.js"></script>
43
		<script src="http://resources.tela-botanica.org/jquery/validate/1.13.0/localization/messages_fr.js"></script>
Line 40... Line 44...
40
		<!-- Jquery Form :nécessaire pour l'upload des images -->
44
		<!-- Jquery Form :nécessaire pour l'upload des images -->
41
		<script src="http://resources.tela-botanica.org/jquery/form/2.95/jquery.form.min.js"></script>
45
		<script src="http://resources.tela-botanica.org/jquery/form/3.51/jquery.form.min.js"></script>
42
 
-
 
43
		<!-- Bootstrap -->
-
 
Line 44... Line 46...
44
		<script src="http://resources.tela-botanica.org/bootstrap/2.3.2/js/bootstrap.min.js"></script>
46
 
45
		<script src="http://resources.tela-botanica.org/bootstrap/modal/2.2.5/js/bootstrap-modalmanager.js"></script>
47
		<!-- Bootstrap -->
46
		<script src="http://resources.tela-botanica.org/bootstrap/modal/2.2.5/js/bootstrap-modal.js"></script>
48
		<script src="http://resources.tela-botanica.org/bootstrap/3.2.0/js/bootstrap.min.js"></script>
47
 
49
 
48
		<!-- Javascript : appli saisie -->
50
		<!-- Javascript : appli saisie -->
49
		<script>
51
		<script>
50
		//<![CDATA[
52
		//<![CDATA[
Line 51... Line 53...
51
			// Précharger le formulaire avec les infos d'une observation
53
			// Précharger le formulaire avec les infos d'une observation
52
			var OBS_ID = "<?=isset($_GET['id-obs']) ? $_GET['id-obs'] : ''?>";
54
			var OBS_ID = "<?=isset($_GET['id-obs']) ? $_GET['id-obs'] : ''?>";
53
			// La présence du parametre 'debug' dans l'URL enclenche le dégogage
55
			// La présence du parametre 'debug' dans l'URL enclenche le dégogage
54
			var DEBUG = <?=isset($_GET['debug']) ? 'true' : 'false'?>;
56
			var DEBUG = <?=isset($_GET['debug']) ? 'true' : 'false'?>;
55
 
57
 
56
			// Mot-clé du widget/projet
58
			// Mot-clé du widget/projet
57
			var TAG_PROJET = "WidgetSaisie,Ambrosia";
59
			var TAG_PROJET = "WidgetSaisie,Missions-Flore,<?=$missionTitre?>";
Line 95... Line 97...
95
			var SERVICE_SAISIE_URL = "<?=$url_ws_saisie?>";
97
			var SERVICE_SAISIE_URL = "<?=$url_ws_saisie?>";
96
			// Squelette d'URL du web service de l'annuaire.
98
			// Squelette d'URL du web service de l'annuaire.
97
			var SERVICE_ANNUAIRE_ID_URL = "<?=$url_ws_annuaire?>";
99
			var SERVICE_ANNUAIRE_ID_URL = "<?=$url_ws_annuaire?>";
98
			// Squelette d'URL du web service d'eFlore fournissant les noms de communes.
100
			// Squelette d'URL du web service d'eFlore fournissant les noms de communes.
99
			var SERVICE_NOM_COMMUNE_URL = "http://api.tela-botanica.org/service:eflore:0.1/osm/nom-commune?lon={lon}&lat={lat}";
101
			var SERVICE_NOM_COMMUNE_URL = "http://api.tela-botanica.org/service:eflore:0.1/osm/nom-commune?lon={lon}&lat={lat}";
100
			// URL du marqueur à utiliser dans la carte Google Map
102
			// Squelette d'URL du web service d'eFlore fournissant l'altitude
-
 
103
			var SERVICE_ALTITUDE_URL = "http://api.tela-botanica.org/service:eflore:0.1/nasa-srtm/altitude?lon={lon}&lat={lat}";
Line -... Line 104...
-
 
104
 
101
 
105
			// URL du marqueur à utiliser dans la carte Google Map
102
			var GOOGLE_MAP_MARQUEUR_URL = "<?=$url_base?>modules/saisie/squelettes/ambrosia/img/marqueurs/epingle.png";
106
			var GOOGLE_MAP_MARQUEUR_URL = "<?=$url_base?>modules/saisie/squelettes/missions-flore/img/marqueurs/epingle.png";
103
			// URL de l'icône du chargement en cours
107
			// URL de l'icône du chargement en cours
104
			var CHARGEMENT_ICONE_URL = "<?=$url_base?>modules/saisie/squelettes/ambrosia/img/icones/chargement.gif";
108
			var CHARGEMENT_ICONE_URL = "<?=$url_base?>modules/saisie/squelettes/missions-flore/img/icones/chargement.gif";
105
			// URL de l'icône du chargement en cours d'une image
109
			// URL de l'icône du chargement en cours d'une image
106
			var CHARGEMENT_IMAGE_URL = "<?=$url_base?>modules/saisie/squelettes/ambrosia/img/icones/chargement-image.gif";
110
			var CHARGEMENT_IMAGE_URL = "<?=$url_base?>modules/saisie/squelettes/missions-flore/img/icones/chargement-image.gif";
107
			// URL de l'icône du calendrier
111
			// URL de l'icône du calendrier
108
			var CALENDRIER_ICONE_URL = "<?=$url_base?>modules/saisie/squelettes/ambrosia/img/icones/calendrier.png";
112
			var CALENDRIER_ICONE_URL = "<?=$url_base?>modules/saisie/squelettes/missions-flore/img/icones/calendrier.png";
109
			// URL de l'icône du calendrier
113
			// URL de l'icône du calendrier
Line 110... Line 114...
110
			var PAS_DE_PHOTO_ICONE_URL = "<?=$url_base?>modules/saisie/squelettes/ambrosia/img/icones/pasdephoto.png";
114
			var PAS_DE_PHOTO_ICONE_URL = "<?=$url_base?>modules/saisie/squelettes/missions-flore/img/icones/pasdephoto.png";
111
 
115
 
112
		//]]>
116
		//]]>
Line 113... Line 117...
113
		</script>
117
		</script>
114
		<script src="<?=$url_base?>modules/saisie/squelettes/ambrosia/js/ambrosia.js"></script>
118
		<script src="<?=$url_base?>modules/saisie/squelettes/missions-flore/js/missions-flore.js"></script>
115
 
119
 
116
		<!-- CSS -->
120
		<!-- CSS -->
117
		<link rel="stylesheet" media="screen" href="http://resources.tela-botanica.org/jquery/jquery-ui/1.8.18/css/smoothness/jquery-ui-1.8.18.custom.css" />
121
		<link rel="stylesheet" href="http://resources.tela-botanica.org/jquery/jquery-ui/1.11.0/css/themes/smoothness/jquery-ui.min.css" />
118
		<link rel="stylesheet" media="screen" href="http://resources.tela-botanica.org/bootstrap/2.3.2/css/bootstrap.min.css" />
122
		<link rel="stylesheet" href="http://resources.tela-botanica.org/jquery/jquery-ui/1.11.0/css/themes/smoothness/theme.css" />
119
		<link rel="stylesheet" media="screen" href="http://resources.tela-botanica.org/bootstrap/2.3.2/css/bootstrap-responsive.min.css" />
-
 
120
		<link rel="stylesheet" media="screen" href="http://resources.tela-botanica.org/bootstrap/modal/2.2.5/css/bootstrap-modal.css" />
123
		<link rel="stylesheet" href="http://resources.tela-botanica.org/bootstrap/3.2.0/css/bootstrap.min.css" />
Line 121... Line 124...
121
		<link rel="stylesheet" media="screen" href="<?=$url_base?>modules/saisie/squelettes/ambrosia/css/<?=isset($_GET['style']) ? $_GET['style'] : 'ambrosia'?>.css"/>
124
		<link rel="stylesheet" href="http://resources.tela-botanica.org/bootstrap/3.2.0/css/bootstrap-theme.min.css" />
122
 
125
		<link rel="stylesheet" href="<?=$url_base?>modules/saisie/squelettes/missions-flore/css/<?=isset($_GET['style']) ? $_GET['style'] : 'missions-flore'?>.css" />
123
	</head>
126
	</head>
124
 
-
 
125
	<body data-spy="scroll">
127
 
126
		<div class="container">
128
	<body data-spy="scroll">
127
			<div class="row-fluid  page-header">
129
		<div class="container">
128
				<div>
130
			<div class="page-header">
129
					<h1>
-
 
130
						<?php if (isset($_GET['mission'])) :?>
-
 
131
							<?php if (file_exists('./modules/saisie/squelettes/missions-flore/squelettes/'.$_GET['mission'].'/titre.tpl.html')) :?>
-
 
132
								<?php include_once './modules/saisie/squelettes/missions-flore/squelettes/'.$_GET['mission'].'/titre.tpl.html'; ?>
-
 
133
							<?php endif; ?>
131
				<h1>
-
 
132
					<?php if (isset($_GET['mission'])) :?>
-
 
133
						<?php if (file_exists('./modules/saisie/squelettes/missions-flore/squelettes/'.$_GET['mission'].'/titre.tpl.html')) :?>
-
 
134
							<?php include_once './modules/saisie/squelettes/missions-flore/squelettes/'.$_GET['mission'].'/titre.tpl.html'; ?>
134
						<?php else : ?>
135
						<?php endif; ?>
135
							<img id="logo-titre" class="span1" src="<?=$url_base?>/modules/saisie/squelettes/missions-flore/img/logos/tela_botanica.png" alt="Tela Botanica" />
136
					<?php else : ?>
136
							Mission flore inconnue !
137
						<img id="logo-titre" class="span1" src="<?=$url_base?>/modules/saisie/squelettes/missions-flore/img/logos/tela_botanica.png" alt="Tela Botanica" />
137
						<?php endif; ?>
138
						Mission flore inconnue !
138
					</h1>
139
					<?php endif; ?>
139
				</div>
-
 
140
			</div>
140
				</h1>
141
			<div class="row-fluid">
141
			</div>
142
				<div class="span6">
142
			<div class="row">
143
					<div class="row-fluid">
143
				<div class="col-md-6">
144
						<div id="intro" class ="well collapse in">
144
					<div id="intro" class ="well well-lg">
145
							<a class="fermer" data-toggle="collapse" data-target="#intro">
145
						<a class="fermer" data-toggle="collapse" data-target="#intro-txt">
146
								<h3 class="titre">
146
							<h3 class="titre">
147
									Le projet
147
								La missions «&nbsp;<?=$missionTitre ?>&nbsp;»
148
									<i class="icone icon-plus-sign"></i>
148
								<span class="glyphicon glyphicon-plus-sign"></span>
149
								</h3>
149
							</h3>
150
							</a>
-
 
151
							<?php if (isset($_GET['mission'])) :?>
150
						</a>
152
								<?php if (file_exists('./modules/saisie/squelettes/missions-flore/squelettes/'.$_GET['mission'].'/projet.tpl.html')) :?>
151
						<div id="intro-txt" class="collapse in">
153
									<?php include_once './modules/saisie/squelettes/missions-flore/squelettes/'.$_GET['mission'].'/projet.tpl.html'; ?>
152
							<?php if (file_exists("./modules/saisie/squelettes/missions-flore/squelettes/$mission/projet.tpl.html")) :?>
154
								<?php endif; ?>
153
								<?php include_once "./modules/saisie/squelettes/missions-flore/squelettes/$mission/projet.tpl.html"; ?>
155
							<?php else : ?>
154
							<?php else : ?>
156
								<p>Mission flore inconnue !</p>
155
								<p>Mission flore inconnue !</p>
Line 157... Line 156...
157
							<?php endif; ?>
156
							<?php endif; ?>
158
						</div>
-
 
159
					</div>
157
						</div>
160
				</div>
158
					</div>
161
 
159
				</div>
162
				<div class="span6">
160
 
163
					<div class="row-fluid">
161
				<div class="col-md-6">
164
						<div id="aide" class="well collapse in">
162
					<div id="aide" class="well well-lg">
165
							<a class="fermer" data-toggle="collapse" data-target="#aide">
163
						<a class="fermer" data-toggle="collapse" data-target="#aide-txt">
-
 
164
							<h3 class="titre">
166
								<h3 class="titre">
165
								Aide
167
									Aide
166
								<span class="glyphicon glyphicon-plus-sign"></span>
-
 
167
							</h3>
-
 
168
						</a>
168
									<i class="icone icon-plus-sign"></i>
169
						<div id="aide-txt" class="collapse in">
169
								</h3>
170
							<p>
170
							</a>
171
								Cet outil vous permet de partager simplement vos observations avec
171
							<p>
172
								<a href="http://www.gentiana.org/" target="_blank">Gentiana</a> et le
-
 
173
								<a href="http://www.tela-botanica.org/site:accueil">réseau Tela Botanica</a>
172
								Cet outil vous permet de partager simplement vos observations avec le
174
								(sous <a href="http://www.tela-botanica.org/page:licence">licence CC-BY-SA</a>).
173
								<a href="http://www.tela-botanica.org/site:accueil">réseau Tela Botanica</a> (sous <a href="http://www.tela-botanica.org/page:licence?langue=fr">licence CC-BY-SA</a>).
175
								Identifiez-vous bien pour ensuite retrouver et gérer vos données dans
174
								Identifiez-vous bien pour ensuite retrouver et gérer vos données dans
176
								<a href="http://www.tela-botanica.org/appli:cel">votre Carnet en ligne</a>.
175
								<a href="http://www.tela-botanica.org/appli:cel">votre Carnet en ligne</a>.
177
								Créez jusqu'à 10 observations (avec 10Mo max d'images) puis partagez-les avec le bouton 'transmettre'.
176
								Créez jusqu'à 10 observations (avec 10Mo max d'images) puis partagez-les avec le bouton 'transmettre'.
178
								Elles apparaissent immédiatement sur les
177
								Elles apparaissent immédiatement sur les <a href="http://www.tela-botanica.org/site:botanique">cartes et galeries photos </a> du site.
179
								<a href="http://www.tela-botanica.org/site:botanique">cartes et galeries photos </a> du site.
178
							</p>
180
							</p>
179
							<p class="discretion">
181
							<p class="discretion">
180
								Pour toute question ou remarque,
182
								Pour toute question ou remarque,
181
								<a href="<?= $url_remarques ?>?email=cel_remarques@tela-botanica.org&pageSource=<?php echo urlencode('http://'.$_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF'].'?'.$_SERVER['QUERY_STRING']); ?>"
183
								<a href="<?= $url_remarques ?>?email=cel_remarques@tela-botanica.org&pageSource=<?php echo urlencode('http://'.$_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF'].'?'.$_SERVER['QUERY_STRING']); ?>"
182
									target="_blank"
184
									target="_blank"
183
									onclick="javascript:window.open(this.getAttribute('href'), 'Tela Botanica - Remarques', config='height=700, width=640, scrollbars=yes, resizable=yes'); return false;">
185
									onclick="javascript:window.open(this.getAttribute('href'), 'Tela Botanica - Remarques', config='height=700, width=640, scrollbars=yes, resizable=yes'); return false;">
184
									contactez-nous</a>
186
									contactez-nous</a>
185
							</p>
187
							</p>
186
							<p class="discretion">
188
							<p class="discretion">
187
								Une fois familiarisé avec l'interface vous pouvez cliquer sur ce bouton pour désactiver l'aide.
189
								Une fois familiarisé avec l'interface vous pouvez cliquer sur le bouton suivant pour désactiver l'aide&nbsp;:
188
								<button id="btn-aide" class="btn btn-mini btn-success">
190
								<button id="btn-aide" class="btn btn-xs btn-success">
189
									<span class="icon-question-sign icon-white"></span>
191
									<span class="glyphicon glyphicon-question-sign icon-white"></span>
190
									<span id="btn-aide-txt" >Désactiver l'aide</span>
192
									<span id="btn-aide-txt">Désactiver l'aide</span>
191
								</button>
193
								</button>
192
							</p>
-
 
-
 
194
							</p>
193
						</div>
195
						</div>
194
					</div>
196
					</div>
195
				</div>
197
				</div>
196
			</div>
198
			</div>
197
			<div class="row-fluid">
199
 
198
				<div class="well">
200
			<div class="well well-lg">
199
					<h2>Observateur</h2>
201
				<h2>Observateur</h2>
200
					<form id="form-observateur" action="#" class="" autocomplete="on">
202
				<form id="form-observateur" role="form" autocomplete="on">
201
						<div class="row-fluid">
203
					<div class="row">
202
							<div class="span6 control-group has-tooltip" data-placement="right"
-
 
203
								title="Saisissez le courriel avec lequel vous être inscrit à Tela Botanica.
204
						<div class="col-md-6 form-group has-tooltip" data-placement="right"
204
									Si vous n'êtes pas inscrit, ce n'est pas grave, vous pourrez le faire
205
							title="Saisissez le courriel avec lequel vous être inscrit à Tela Botanica.
205
									ultérieurement. Des informations complémentaires vont vous être
206
								Si vous n'êtes pas inscrit, ce n'est pas grave, vous pourrez le faire
206
									demandées : prénom et nom.">
207
								ultérieurement. Des informations complémentaires vont vous être
207
								<label for="courriel"  class="control-label"
208
								demandées : prénom et nom.">
208
									title="Veuillez saisir votre adresse courriel.">
209
							<label for="courriel"  title="Veuillez saisir votre adresse courriel.">
209
									<strong class="obligatoire">*</strong> Courriel
-
 
210
								</label>
210
								<strong class="obligatoire">*</strong>
211
								<div class="input-prepend">
211
								Courriel
212
									<span class="add-on">
-
 
213
										<i class="icon-envelope"></i>
-
 
214
									</span>
-
 
215
									<input id="courriel" name="courriel" type="text"/>
-
 
216
									<input id="id_utilisateur" name="id_utilisateur" type="hidden"/>
-
 
217
								</div>
-
 
218
							</div>
-
 
219
							<div id="zone-courriel-confirmation" class="span6 control-group hidden">
-
 
220
								<label for="courriel_confirmation" class="control-label"
-
 
221
									title="Veuillez saisir confirmer le courriel.">
-
 
222
									<strong class="obligatoire">*</strong> Courriel (confirmation)
-
 
223
								</label>
-
 
224
								<div class="input-prepend">
-
 
225
									<span class="add-on">
212
							</label>
226
										<i class="icon-envelope"></i>
213
							<div class="input-group">
227
									</span>
214
								<span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span>
228
									<input id="courriel_confirmation" name="courriel_confirmation" type="text"/>
-
 
229
								</div>
215
								<input id="courriel" name="courriel" class="form-control" type="text"/>
230
							</div>
-
 
231
						</div>
216
								<input id="id_utilisateur" name="id_utilisateur" type="hidden"/>
232
						<div id="zone-prenom-nom" class="row-fluid hidden">
-
 
233
							<div class="span6">
217
							</div>
234
								<label for="prenom">Prénom</label>
218
						</div>
235
								<div>
219
						<div id="zone-courriel-confirmation" class="col-md-6 form-group has-feedback hidden">
236
									<input id="prenom" name="prenom" type="text"/>
-
 
237
								</div>
220
							<label for="courriel_confirmation" title="Veuillez saisir confirmer le courriel.">
238
							</div>
-
 
239
							<div class="span6">
221
								<strong class="obligatoire">*</strong> Courriel (confirmation)
240
								<label for="nom">Nom</label>
222
							</label>
241
								<div>
223
							<div class="input-group">
-
 
224
								<span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span>
-
 
225
								<input id="courriel_confirmation" name="courriel_confirmation" class="form-control" type="text"/>
-
 
226
							</div>
-
 
227
						</div>
-
 
228
					</div>
-
 
229
					<div id="zone-prenom-nom" class="row hidden">
-
 
230
						<div class="col-md-6 form-group">
-
 
231
							<label for="prenom">Prénom</label>
-
 
232
							<div class="input-group">
-
 
233
								<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
-
 
234
								<input id="prenom" name="prenom" class="form-control" type="text"/>
-
 
235
							</div>
-
 
236
						</div>
-
 
237
						<div class="col-md-6 form-group">
-
 
238
							<label for="nom">Nom</label>
242
									<input id="nom" name="nom"  type="text"/>
239
							<div class="input-group">
-
 
240
								<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
243
								</div>
241
								<input id="nom" name="nom" class="form-control" type="text"/>
-
 
242
							</div>
244
							</div>
243
						</div>
245
						</div>
244
					</div>
246
					</form>
245
				</form>
247
				</div>
246
			</div>
248
			</div>
247
 
249
			<!-- Messages d'erreur du formulaire-->
248
			<!-- Messages d'erreur du formulaire-->
250
			<div class="row">
249
			<div class="row">
251
				<div class="zone-alerte span6 offset3">
250
				<div class="zone-alerte col-md-6 col-md-offset-3">
252
					<div id="dialogue-bloquer-copier-coller" class="alert alert-info alert-block" style="display:none;">
251
					<div id="dialogue-bloquer-copier-coller" class="alert alert-info alert-block" style="display:none;">
253
						<a class="close">×</a>
252
						<button type="button" class="close"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
254
						<h4 class="alert-heading">Information : copier/coller</h4>
253
						<h4 class="alert-heading">Information : copier/coller</h4>
255
						<p>
254
						<p>
256
							Merci de ne pas copier/coller votre courriel.<br/>
255
							Merci de ne pas copier/coller votre courriel.<br/>
257
							La double saisie permet de vérifier l'absence d'erreurs.
256
							La double saisie permet de vérifier l'absence d'erreurs.
258
						</p>
257
						</p>
259
					</div>
258
					</div>
260
					<div id="dialogue-courriel-introuvable" class="alert alert-info alert-block" style="display:none;">
259
					<div id="dialogue-courriel-introuvable" class="alert alert-info alert-block" style="display:none;">
261
						<a class="close">×</a>
260
						<button type="button" class="close"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
262
						<h4 class="alert-heading">Information : courriel introuvable</h4>
261
						<h4 class="alert-heading">Information : courriel introuvable</h4>
263
						<p>
262
						<p>
264
							Vous n'êtes pas inscrit à Tela Botanica avec ce courriel.<br/>
263
							Vous n'êtes pas inscrit à Tela Botanica avec ce courriel.<br/>
265
							Veuillez compléter les champs supplémentaires ou indiquer votre courriel d'inscription.<br/>
264
							Veuillez compléter les champs supplémentaires ou indiquer votre courriel d'inscription.<br/>
266
							Pour retrouver vos observations dans le <a href="http://www.tela-botanica.org/appli:cel">Carnet en ligne</a>,
265
							Pour retrouver vos observations dans le <a href="http://www.tela-botanica.org/appli:cel">Carnet en ligne</a>,
267
							il sera nécesaire de <a href="http://www.tela-botanica.org/page:inscription">vous inscrire à Tela Botanica</a>.
266
							il sera nécesaire de <a href="http://www.tela-botanica.org/page:inscription">vous inscrire à Tela Botanica</a>.
268
						</p>
267
						</p>
269
					</div>
268
					</div>
270
					<div id="dialogue-google-map" class="alert alert-info alert-block" style="display: none;">
269
					<div id="dialogue-google-map" class="alert alert-info alert-block" style="display: none;">
271
						<a class="close">×</a>
270
						<button type="button" class="close"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
-
 
271
						<h4 class="alert-heading">Information sur Google Map</h4>
272
						<h4 class="alert-heading">Information sur Google Map</h4>
272
						<div class="contenu"></div>
273
						<div class="contenu"></div>
273
					</div>
274
					</div>
274
				</div>
-
 
275
			</div>
-
 
276
 
-
 
277
			<div class="well well-lg">
275
				</div>
278
				<div class="row">
276
			</div>
279
					<div class="col-md-12">
-
 
280
						<h2>Lieu et date du relevé</h2>
-
 
281
					</div>
-
 
282
				</div>
-
 
283
				<div class="row">
-
 
284
					<div class="col-md-6">
-
 
285
						<div class="form-group has-tooltip"
-
 
286
								title="Vous pouvez cliquer sur l'icône de calendrier pour
277
			<div class="row-fluid">
287
									sélectionner une date dans un calendrier.">
278
				<div class="span12">
288
							<label for="date" class="col-sm-4 control-label"
279
					<div class="well">
289
									title="Veuillez indiquer la date du relevé au format jj/mm/aaaa">
280
						<div class="row-fluid">
290
								<strong class="obligatoire">*</strong>
-
 
291
								Date du relevé
281
							<div class="span6">
292
							</label>
282
								<div>
293
							<div class="col-sm-8">
-
 
294
								<div class="input-group">
-
 
295
									<span id="date-icone" class="input-group-addon"></span>
-
 
296
									<input id="date" form="form-obs" name="date" class="form-control" type="text" placeholder="jj/mm/aaaa" />
-
 
297
								</div>
-
 
298
							</div>
283
									<div class="row-fluid">
299
						</div>
284
										<div class="span12">
300
					</div>
285
											<h2>Lieu du relevé</h2>
-
 
286
										</div>
301
					<hr />
287
									</div>
302
				</div>
-
 
303
 
288
									<div class="row-fluid">
304
				<div class="row">
289
										<div class="span4">
305
					<div class="col-md-6">
290
											<label for="map_canvas" title="Veuillez localiser l'observation">
306
						<div class="row">
291
												Géolocalisation
307
							<div class="col-md-3">
292
											</label>
308
								<strong title="Veuillez localiser l'observation">Géolocalisation</strong>
-
 
309
							</div>
-
 
310
							<div class="col-md-9 text-right">
293
										</div>
311
								<form id="form-carte-recherche" class="form-horizontal" role="form">
294
										<div class="span8 droite">
312
									<div class="form-group">
295
											<form id="form-carte-recherche" class="form-search form-horizontal" action="#" >
313
										<label for="carte-recherche" class="sr-only">Rechercher</label>
296
												<div class="control-group">
314
										<div class="col-md-12">
297
													<label for="carte-recherche">Rechercher</label>
-
 
298
													<input id="carte-recherche" class="search-query has-tooltip" type="text" value=""
315
											<div class="input-group">
299
														title="Permet de centrer la carte sur le lieu recherché."
-
 
300
														placeholder="Centrer la carte sur un lieu..."/>
-
 
301
												</div>
-
 
302
											</form>
-
 
303
										</div>
-
 
304
									</div>
-
 
305
									<div class="row-fluid">
-
 
306
										<div class="span12">
316
												<input id="carte-recherche" class="form-control has-tooltip" type="search" value=""
307
											<div id="map-canvas" class="has-tooltip"
317
														title="Permet de centrer la carte sur le lieu recherché. Sélectionner un lieu dans la liste déroulante pour centrer la carte."
-
 
318
														placeholder="Centrer la carte sur un lieu..."/>
-
 
319
												<span class="input-group-addon"><span class="glyphicon glyphicon-search"></span></span>
-
 
320
											</div>
308
												title="Vous pouvez cliquer sur la carte pour déplacer le marqueur
321
										</div>
309
													représentant votre station ou bien le glisser-déposer sur
322
									</div>
310
													le lieu souhaité."></div>
323
								</form>
311
										</div>
324
							</div>
312
									</div>
325
						</div>
313
									<div class="row-fluid">
326
						<div class="row">
314
										<label class="span7 control-label">
-
 
315
											<a href="#" class="afficher-coord">Afficher</a>
327
							<div class="col-md-12">
316
											<a href="#" class="afficher-coord" style="display:none;">Cacher</a>
328
								<div id="map-canvas" class="has-tooltip"
-
 
329
									title="Vous pouvez cliquer sur la carte pour déplacer le marqueur
-
 
330
										représentant votre station ou bien le glisser-déposer sur
-
 
331
										le lieu souhaité."></div>
-
 
332
							</div>
317
											les coordonnées géographiques
333
						</div>
-
 
334
						<div class="row">
318
											<span id="lat-lon-info" class="info has-tooltip"
335
							<div id="info-altitude" class="col-md-5">
319
												title="Système géodésique mondial, révision de 1984 - Coordonnées non projetées">
336
								<span>Altitude : </span>
320
												(WGS84)
337
								<span id="marqueur-altitude"><span id="altitude"></span> m</span>
321
											</span>
338
							</div>
322
										</label>
339
 
323
										<div id="info-commune" class="span5">
340
							<div id="info-commune" class="col-md-7">
324
								    		<span for="marqueur-commune">Commune : </span>
341
								<span>Commune : </span>
325
								    		<span id="marqueur-commune">
342
								<span id="marqueur-commune">
326
								    			<span id="commune-nom" class="commune-info"></span>
343
									<span id="commune-nom" class="commune-info"></span>
-
 
344
									(<span id="commune-code-insee" class="commune-info has-tooltip"
-
 
345
										title="Code INSEE de la commune"></span>)
327
								    			(<span id="commune-code-insee" class="commune-info has-tooltip"
346
								</span>
-
 
347
							</div>
-
 
348
						</div>
328
								    				title="Code INSEE de la commune"></span>)
349
					</div>
-
 
350
					<div class="col-md-6">
-
 
351
						<form id="form-station" class="form-horizontal" role="form" autocomplete="on">
329
								    		</span>
352
							<div class="form-group has-tooltip"
-
 
353
								title="Toponyme plus précis que la commune, utilisé localement et se trouvant souvent sur les cartes au 1/25 000." >
-
 
354
								<label for="lieudit" class="col-sm-2 control-label">
-
 
355
									Lieu-dit
-
 
356
								</label>
330
							    		</div>
357
								<div class="col-sm-10">
-
 
358
									<input id="lieudit" class="form-control" name="lieudit" type="text" />
331
									</div>
359
								</div>
332
									<form id="form-station" action="#" enctype="multipart/form-data" autocomplete="on">
360
							</div>
-
 
361
 
-
 
362
							<div class="span6 form-group has-tooltip"
333
										<div id="coordonnees-geo" class="well" style="display:none;">
363
								title="Lieu précis de l'observation définissant une unité écologique homogène (ex: le pré derrière la maison)." >
334
											<div class="row-fluid form-inline">
364
								<label for="station" class="col-sm-2 control-label">
335
												<div id="coord-lat" class="span4">
365
									Station
-
 
366
								</label>
-
 
367
								<div class="col-sm-10">
-
 
368
									<input id="station" class="form-control" name="station" type="text" />
-
 
369
								</div>
-
 
370
							</div>
-
 
371
 
-
 
372
							<div class="row">
336
													<label for="latitude">Latitude</label>
373
								<div class="col-md-12">
-
 
374
									<button class="afficher-coord btn-coord btn btn-default"
-
 
375
											data-toggle-text="Cacher les coordonnées (WGS 84 et Lambert 93)">
-
 
376
										Afficher les coordonnées (WGS 84 et Lambert 93)
337
													<div>
377
									</button>
338
														<input id="latitude" class="input-mini" name="latitude" type="text" value=""/>
378
									<div id="coordonnees-geo" class="well hidden">
339
													</div>
379
										<div class="row">
-
 
380
											<div class="col-md-4">
340
												</div>
381
												<div id="coord-lat" class="form-group form-group-sm">
341
												<div id="coord-lng" class="span4">
382
													<label for="latitude" class="col-sm-4 control-label">Latitude</label>
342
													<label for="longitude">Longitude</label>
383
													<div class="col-sm-8">
343
													<div>
384
														<input id="latitude" class="form-control" name="latitude" type="text"
344
														<input id="longitude" class="input-mini" name="longitude" type="text" value=""/>
385
															title="Latitude (WGS 84)" value=""/>
-
 
386
													</div>
345
													</div>
387
												</div>
346
												</div>
388
											</div>
-
 
389
											<div class="col-md-5">
347
												<div class="span1">
390
												<div id="coord-lng" class="form-group form-group-sm">
348
													<div>
391
													<label for="latitude" class="col-sm-4 control-label">Longitude</label>
349
														<input id="geolocaliser" type="button" value="Voir sur la carte"
-
 
350
															class="has-tooltip"
-
 
351
															title="Centre la carte sur les coordonnées de latitude et longitude saisies."/>
-
 
352
													</div>
-
 
353
												</div>
-
 
354
									    	</div>
-
 
355
										</div>
-
 
356
										<div class="row-fluid">
-
 
357
											<div class="span6 control-group has-tooltip"
-
 
358
												title="Toponyme plus précis que la commune, utilisé localement et se trouvant souvent sur les cartes au 1/25 000." >
392
													<div class="col-sm-8">
359
												<label class="control-label">
-
 
360
													Lieu-dit
-
 
361
													<input type="text" id="lieudit" class="" name="lieudit"/>
-
 
362
												</label>
-
 
363
											</div>
-
 
364
											<div class="span6 control-group has-tooltip"
-
 
365
												title="Lieu précis de l'observation définissant une unité écologique homogène (ex: le pré derrière la maison)." >
-
 
366
												<label class="control-label">
-
 
367
													Station
-
 
368
													<input type="text" id="station" class="" name="station"/>
393
														<input id="longitude" class="form-control" name="longitude" type="text"
369
												</label>
394
															title="Longitude (WGS 84)" value=""/>
370
											</div>
-
 
371
										</div>
395
													</div>
372
 
-
 
373
										<div class="row-fluid">
-
 
374
											<div class="span12 control-group has-tooltip"
-
 
375
												title="Indiquez la surface en m² de la station au sein de laquelle la plante est présente.">
396
												</div>
376
												<label class="span12 control-label">
397
											</div>
377
													<strong class="obligatoire">*</strong>
-
 
378
													Surface de la station
398
											<div class="col-md-2">
379
													<select id="station-surface" class="span8 obs-chp-etendu" name="stationSurface"
-
 
380
															data-label="Surface couverte dans la station">
-
 
381
														<option selected value="">Sélectionnez une surface</option>
-
 
382
														<option value="0-5">&lt;5 m²</option>
-
 
383
														<option value="5-10">5-10 m²</option>
-
 
384
														<option value="10-50">10-50 m²</option>
-
 
385
														<option value="50-100">50-100 m²</option>
399
												<div id="coord-lng" class="form-group form-group-sm">
386
														<option value="100-500">100-500 m²</option>
400
													<input type="button" id="geolocaliser"
387
														<option value="500-1000">500-1000 m²</option>
401
														class="btn btn-default btn-sm has-tooltip"
Line 388... Line 402...
388
														<option value="1000+">&gt; 1000 m²</option>
402
														title="Centre la carte sur les coordonnées de latitude et longitude saisies."
389
													</select>
403
														value="Voir sur la carte"/>
390
												</label>
404
												</div>
391
											</div>
405
											</div>
392
										</div>
406
										</div>
393
 
407
 
394
										<div class="row-fluid">
408
										<div class="row">
395
											<div class="span12 control-group" >
-
 
396
												<label class="span12 control-label">
409
											<div class="col-md-6">
397
													<strong class="obligatoire">*</strong>
-
 
398
													Milieu
410
												<div id="coord-l93-x" class="form-group">
399
													<select id="milieu" class="span8" name="milieu">
-
 
400
														<option selected value="">Sélectionnez un milieu</option>
-
 
401
														<?php foreach ($milieux as $milieu => $description) : ?>
411
													<label for="l93-x" class="col-sm-6 control-label">X Lambert 93</label>
402
														<option value="<?=strtolower($milieu)?>">
412
													<div class="col-sm-5">
403
															<?=$milieu?> <?=($description != '') ? "($description)" : '' ?>
413
														<input id="l93-x" disabled type="text" class="input-sm form-control obs-chp-etendu"
404
														</option>
-
 
405
														<?php endforeach; ?>
-
 
406
														<option value="">Autre : préciser dans les commentaires.</option>
414
																name="coordonneeLambert93X"
407
													</select>
415
																data-label="Lambert 93 X"
408
												</label>
416
																value=""/>
409
											</div>
417
													</div>
410
										</div>
418
												</div>
411
 
419
											</div>
412
										<div class="row-fluid">
420
											<div class="col-md-6">
-
 
421
												<div id="coord-l93-y" class="form-group">
-
 
422
													<label for="l93-y" class="col-sm-6 control-label">Y Lambert 93</label>
413
											<div class="span12">
423
													<div class="col-sm-5">
414
												<label for="milieuCommentaire">Commentaires sur le milieu</label>
424
														<input id="l93-y" disabled type="text" class="input-sm form-control obs-chp-etendu"
415
												<div>
425
																name="coordonneeLambert93Y"
416
													<textarea id="milieu-commentaire" class="span12 obs-chp-etendu" rows="7"
426
																data-label="Lambert 93 Y"
417
														name="milieuCommentaire" data-label="Commentaires sur le milieu"
427
																value=""/>
418
														placeholder="Vous pouvez éventuellement ajouter des informations complémentaires concernant le milieu"></textarea>
428
													</div>
419
												</div>
-
 
420
											</div>
-
 
421
										</div>
-
 
422
									</form>
-
 
423
								</div>
-
 
424
							</div>
-
 
425
							<div class="span6">
-
 
426
								<form id="form-obs" action="#" autocomplete="on">
-
 
427
									<h2>Observation</h2>
-
 
428
									<input id="referentiel" type="hidden" value="bdtfx" />
-
 
429
 
-
 
430
									<div class="row-fluid">
-
 
431
										<div id="taxon-input-groupe" class="span8 has-tooltip"
-
 
432
											title="Sélectionnez une espèce dans la liste déroulante pour lier
-
 
433
												votre nom au référentiel selectionné. Si vous
-
 
434
												le désirez vous pouvez aussi saisir un nom absent du référentiel
-
 
435
												(Ex. : 'fleur violette' ou 'viola sinensis???')." >
429
												</div>
436
											<label class="span12 control-label">Espèce
430
											</div>
437
												<div class="input-prepend input-append">
431
										</div>
438
													<span class="add-on"><i class="icon-leaf"></i></span>
432
									</div>
Line 439... Line 433...
439
													<input type="text" id="taxon" name="taxon" value="<?= $nom_sci_espece_defaut; ?>" />
433
								</div>
440
													<a href="#plte-description" role="button" class="btn btn-success add-on" data-toggle="modal">Voir la description</a>
-
 
441
												</div>
-
 
442
											</label>
-
 
443
										</div>
-
 
444
									</div>
-
 
445
 
434
							</div>
446
									<div class="row-fluid">
435
						</form>
447
										<div class="span12 control-group has-tooltip"
-
 
448
												title="Vous pouvez cliquer sur l'icône de calendrier pour
436
					</div>
449
													sélectionner une date dans un calendrier.">
-
 
450
											<label class="span12 control-label"  title="Veuillez indiquer la date du relevé au format jj/mm/aaaa">
437
				</div>
451
												<strong class="obligatoire">*</strong>
-
 
452
												Date du relevé
-
 
Line 453... Line -...
453
												<div class="input-prepend">
-
 
454
													<span id="date-icone" class="add-on"></span>
438
			</div>
455
													<input id="date" name="date" type="text" placeholder="jj/mm/aaaa" />
439
 
456
												</div>
440
			<div class="well well-lg">
457
											</label>
-
 
458
										</div>
-
 
459
									</div>
-
 
460
 
-
 
461
									<div class="row-fluid">
-
 
462
										<div class="span12 control-group has-tooltip"
-
 
463
												title="Indiquez ici le pourcentage de recouvrement par la plante sur la surface de la station.">
441
				<div class="row">
464
											<label class="span12 control-label">
-
 
465
												<strong class="obligatoire">*</strong>
-
 
466
												Recouvrement par la plante de la surface de la station
-
 
467
												<select id="recouvrement" class="span8 obs-chp-etendu" name="recouvrement"
-
 
468
														data-label="Recouvrement au sein de la surface couverte dans la station">
442
					<div class="col-md-6">
469
													<option selected value="">Sélectionnez un recouvrement</option>
443
						<form id="form-station-detail" class="form-horizontal" role="form" autocomplete="on">
-
 
444
							<h2>Caractéristiques de la station</h2>
470
													<option value="+">&lt;1 %</option>
445
 
471
													<option value="1">1-5 %</option>
446
							<div class="form-group has-tooltip"
Line 472... Line 447...
472
													<option value="2">5-25 %</option>
447
								title="Type d'habitat plus ou moins standardisé dans les codes Corine ou Catminat (ex: prairie, pelouse, lisière, friche...)." >
-
 
448
								<label for="milieu" class="col-sm-4 control-label">
-
 
449
									Type de milieu
-
 
450
								</label>
-
 
451
								<div class="col-sm-8">
473
													<option value="3">25-50 %</option>
452
									<input id="milieu" class="form-control" name="milieu" type="text" />
-
 
453
								</div>
-
 
454
							</div>
-
 
455
 
474
													<option value="4">50-75 %</option>
456
							<div class="form-group has-tooltip"
-
 
457
									title="Indiquez l'exposition principale de la station.">
-
 
458
								<label for="station-exposition" class="col-sm-4 control-label">
-
 
459
									Exposition du terrain
-
 
460
								</label>
-
 
461
								<div class="col-sm-8">
-
 
462
									<select id="station-exposition" class="form-control obs-chp-etendu" name="stationExposition">
-
 
463
										<option selected value="">Sélectionnez l'exposition du terrain</option>
-
 
464
										<option value="Plat">Terrain plat</option>
475
													<option value="5">75-100 %</option>
465
										<option value="N">Nord</option>
-
 
466
										<option value="N-O">Nord-Ouest</option>
-
 
467
										<option value="N-E">Nord-Est</option>
-
 
468
										<option value="E">Est</option>
-
 
469
										<option value="O">Ouest</option>
476
												</select>
470
										<option value="S">Sud</option>
-
 
471
										<option value="S-O">Sud-Ouest</option>
-
 
472
										<option value="S-E">Sud-Est</option>
-
 
473
									</select>
477
											</label>
474
								</div>
-
 
475
							</div>
-
 
476
 
-
 
477
							<div class="form-group has-tooltip"
-
 
478
									title="Indiquez le pourcentage de la pente de la station.">
-
 
479
								<label for="station-pente" class="col-sm-4 control-label">
-
 
480
									Pente du terrain
478
										</div>
481
								</label>
479
									</div>
482
								<div class="col-sm-8">
-
 
483
									<select id="station-pente" class="form-control obs-chp-etendu" name="stationPente">
-
 
484
										<option selected value="">Sélectionnez la pente du terrain</option>
-
 
485
										<option value="0-10%">entre 0 et 9% (0 à 5°)</option>
-
 
486
										<option value="10-20%">entre 10 et 19% (5 à 9°)</option>
-
 
487
										<option value="20-30%">entre 20 et 29% (10 à 14°)</option>
-
 
488
										<option value="30-40%">&gt; à 30% (&gt; à 15°)</option>
-
 
489
									</select>
-
 
490
								</div>
-
 
491
							</div>
-
 
492
 
-
 
493
						</form>
-
 
494
					</div>
-
 
495
 
-
 
496
					<div class="col-md-6">
-
 
497
						<form id="form-obs" class="form-horizontal" role="form" autocomplete="on">
-
 
498
							<h2>Relevé de la plante</h2>
-
 
499
 
-
 
500
							<input id="referentiel" type="hidden" value="bdtfx" />
-
 
501
 
-
 
502
							<div id="taxon-input-groupe" class="form-group has-tooltip"
-
 
503
								title="Sélectionnez une espèce dans la liste déroulante pour lier
-
 
504
									votre nom au référentiel selectionné. Si vous
-
 
505
									le désirez vous pouvez aussi saisir un nom absent du référentiel
-
 
506
									(Ex. : 'fleur violette' ou 'viola sinensis???')." >
-
 
507
								<label for="taxon"  class="col-sm-4 control-label">
-
 
508
									<strong class="obligatoire">*</strong>
480
 
509
									Espèce <?= $referentiel_impose ? '('.$ns_referentiel.')' : '' ?>
-
 
510
								</label>
-
 
511
								<div class="col-sm-8">
Line -... Line 512...
-
 
512
									<div class="input-group">
-
 
513
										<span class="input-group-addon">
-
 
514
											<span class="glyphicon glyphicon-leaf"></span>
-
 
515
										</span>
-
 
516
										<input id="taxon" name="taxon" type="text" class="form-control"
-
 
517
											value="<?= $nom_sci_espece_defaut; ?>" />
-
 
518
									</div>
-
 
519
								</div>
-
 
520
							</div>
-
 
521
 
-
 
522
							<div class="form-group has-tooltip"
-
 
523
									title="Indiquez le type de taille de l'arbre.">
-
 
524
								<label for="taille-type" class="col-sm-4 control-label">
-
 
525
									Phénologie
-
 
526
								</label>
-
 
527
								<div class="col-sm-8">
-
 
528
									<select id="phenologie" class="form-control" name="phenologie">
-
 
529
										<option selected value="">Sélectionnez l'état de la plante</option>
-
 
530
										<option value="10-19: développement des feuilles">En feuille</option>
-
 
531
										<option value="50-59: apparition de l'inflorescence, épiaison">En bouton</option>
-
 
532
										<option value="60-69: floraison">En fleur</option>
-
 
533
										<option value="70-79: fructification">En fruit</option>
-
 
534
										<option value="90-99: sénescence et dormance">Plante en fin de vie</option>
-
 
535
									</select>
-
 
536
								</div>
-
 
537
							</div>
-
 
538
 
-
 
539
							<div class="form-group has-tooltip"
-
 
540
									title="Estimation de l'abondance de la plante sur une surface donnée. Surface inventoriée
-
 
541
									limitée par la présence d'un autre milieu ou distancé par au moins 500m d'une autre
-
 
542
									zone où la plante est observée.">
-
 
543
								<label for="abondance" class="col-sm-4 control-label">
-
 
544
									Abondance
-
 
545
								</label>
-
 
546
								<div class="col-sm-8">
-
 
547
									<select id="abondance" class="form-control" name="abondance">
-
 
548
										<option selected value="">Sélectionnez l'abondance</option>
-
 
549
										<option value="1-5 individus">1-5 individus</option>
-
 
550
										<option value="5-10 individus">5-10 individus</option>
-
 
551
										<option value="10-50 individus">10-50 individus</option>
-
 
552
										<option value="50-100 individus">50-100 individus</option>
-
 
553
										<option value="100-500 individus">100-500 individus</option>
-
 
554
										<option value=">500 individus">&gt; à 500 individus</option>
-
 
555
									</select>
-
 
556
								</div>
-
 
557
							</div>
-
 
558
 
-
 
559
							<div id="individus-nbre-groupe" class="form-group has-tooltip hidden"
-
 
560
								title="Indiquez le nombre d'individus." >
-
 
561
								<label for="individus-nbre" class="col-sm-4 control-label">
-
 
562
									Nombre d'individus
-
 
563
								</label>
-
 
564
								<div class="col-sm-4">
-
 
565
									<input id="individus-nbre" class="form-control obs-chp-etendu" name="individusNombre"
-
 
566
										min="0"
-
 
567
										type="number"
-
 
568
										value="" />
-
 
569
								</div>
-
 
570
							</div>
-
 
571
 
-
 
572
							<div class="form-group has-tooltip"
-
 
573
									title="Indiquez si le relevé effectué vis à acquérir de nouvelle observation ou
481
									<div class="row-fluid">
574
										viser à confirmer la présence de la plante vis à vis d'une observation historique.">
-
 
575
								<label for="releve-type" class="col-sm-4 control-label">
-
 
576
									Type de relevé
-
 
577
								</label>
482
										<div class="span12">
578
								<div class="col-sm-8">
-
 
579
									<select id="releve-type" class="form-control obs-chp-etendu" name="releveType">
-
 
580
										<option selected value="">Sélectionnez le type de relevé</option>
-
 
581
										<option value="nouveau">Acquisition d'une nouvelle donnée</option>
-
 
582
										<option value="confirmation">Confirmation d'une donnée historique (précisez laquelle dans les notes)</option>
-
 
583
									</select>
-
 
584
								</div>
-
 
585
							</div>
-
 
586
 
-
 
587
							<div class="form-group has-tooltip"
-
 
588
									title="Indiquez le code ISBN de l'ouvrage de détermination utilisé. Si votre navigateur le supporte, vous pouvez sélectionner le code ISBN d'une flore dans la liste qui s'ouvrira en cliquant dans le champ ou en utilisant la touche «Flêche bas» (↓). Sinon, indiquez le code ISBN de la flore ou de l'ouvrage principal ayant servi à la détermination (Ex. : ISBN-13:978-3-642-11746-6, ISBN:978-3-642-11746-6, 3-642-11746-5 ).">
-
 
589
								<label for="determination-source-isbn" class="col-sm-4 control-label">
-
 
590
									Source détermination
-
 
591
								</label>
-
 
592
								<div class="col-sm-8">
-
 
593
									<input id="determination-source" class="form-control obs-chp-etendu" list="flores"
-
 
594
										name="determinationSource"
-
 
595
										type="text" >
-
 
596
									<datalist id="flores">
-
 
597
										<option value="ISBN:978-2-909-71790-6">TISON J-M. &amp; JAUZEIN P., 2014. Flore de la France méditerranéenne continentale. Naturalia publications. ISBN:978-2909717906. 2078p.</option>
-
 
598
										<option value="ISBN:978-2-853-67058-6">COSTE H. (ABBE), 1937. Flore descriptive et illustrée de la France, de la Corse et des contrées limitrophes. Albert Blanchard, éditeur. ISBN:978-2853670586. 1850p.</option>
-
 
599
										<option value="ISBN:978-2-100-05463-3">FOURNIER P-V., 1934-1940. Les quatres flores de France, Corse comprise. ISBN:978-2100054633. 1103p.</option>
-
 
600
										<option value="ISBN:978-2-701-11000-4">BONNIER G. &amp; DE LAYENS G., 1909. La végétation de la France, Suisse et Belgique. Librairie Générale de l'enseignement, Paris. ISBN:978-2701110004. 425p.</option>
-
 
601
									</datalist>
-
 
602
								</div>
-
 
603
							</div>
-
 
604
						</form>
-
 
605
					</div>
-
 
606
				</div>
-
 
607
 
-
 
608
 
-
 
609
				<div class="row">
-
 
610
					<div class="col-md-6">
-
 
611
						<div class="row">
-
 
612
							<div class="col-md-12">
483
											<label for="notes">Notes</label>
613
								<h2>Notes</h2>
-
 
614
								<textarea id="notes" form="form-obs" class="form-control col-md-12" rows="7" name="notes"
484
											<div>
615
									placeholder="Vous pouvez éventuellement ajouter des informations complémentaires à votre observation. Indiquez ici l'éventuelle donnée historique ayant servi de base au relevé."></textarea>
485
												<textarea id="notes" class="span12" rows="7" name="notes"
616
							</div>
486
													placeholder="vous pouvez éventuellement ajouter des informations complémentaires à votre observation (altitude, taille de la plante...)"></textarea>
617
						</div>
487
											</div>
618
					</div>
-
 
619
 
488
										</div>
620
					<div class="col-md-6">
489
									</div>
621
						<div class="row">
490
 
-
 
491
								</form>
622
							<form id="form-upload" class="form form-horizontal" role="form" action="<?= $url_ws_upload ?>"
-
 
623
								method="post" enctype="multipart/form-data">
492
								<form id="form-upload" class="form-horizontal" action="<?= $url_ws_upload ?>?projet=<?=isset($_GET['projet']) ? $_GET['projet'] : 'defaut'?>"
624
								<div class="col-md-12">
493
									method="post" enctype="multipart/form-data">
625
									<h2>Image(s) de la plante</h2>
494
									<h2>Image(s) de cette plante</h2>
-
 
495
									<strong>Ajouter une image</strong>
-
 
496
									<p class="miniature-info" class="discretion help-inline">Les photos doivent être au format JPEG et ne doivent pas excéder 5Mo chacunes.</p>
-
 
497
									<div id ="photos-conteneur">
-
 
498
										<input type="file" id="fichier" name="fichier" accept="image/jpeg" />
-
 
499
										<input type="hidden" name="MAX_FILE_SIZE" value="5242880"/>
-
 
500
										<div id="miniatures">
-
 
501
										</div>
-
 
502
										<p class="miniature-msg" class="span12">&nbsp;</p>
-
 
503
									</div>
626
									<strong>Ajouter une image</strong>
504
								</form>
627
									<p class="miniature-info discretion help-inline">Les photos doivent être au format JPEG et ne doivent pas excéder 5Mo chacunes.</p>
505
							</div>
628
									<div id ="photos-conteneur" class="form-group">
506
							<div class="row-fluid">
629
										<div class="col-sm-12">
507
								<div class="span12 centre has-tooltip"
630
											<input type="file" id="fichier" name="fichier" class="form-control" accept="image/jpeg" />
-
 
631
											<input type="hidden" name="MAX_FILE_SIZE" value="5242880"/>
-
 
632
										</div>
-
 
633
										<div id="miniatures"></div>
-
 
634
										<p class="miniature-msg col-md-12">&nbsp;</p>
-
 
635
									</div>
-
 
636
								</div>
-
 
637
							</form>
-
 
638
						</div>
-
 
639
					</div>
-
 
640
				</div>
508
									title="Une fois les champs remplis, vous pouvez cliquer sur ce bouton pour
641
 
Line -... Line 642...
-
 
642
				<div class="row">
509
										ajouter votre observation à la liste à transmettre.">
643
					<div class="col-md-12 centre has-tooltip"
510
									<button id="ajouter-obs" class="btn btn-primary btn-large" type="button">
644
						title="Une fois les champs remplis, vous pouvez cliquer sur ce bouton pour
511
										Créer
645
							ajouter votre observation à la liste à transmettre.">
512
									</button>
646
						<button id="ajouter-obs" class="btn btn-primary btn-large" type="button">
513
								</div>
647
							Créer
514
							</div>
648
						</button>
515
						</div>
649
					</div>
516
					</div>
650
				</div>
517
				</div>
651
			</div>
518
			</div>
652
 
519
 
653
 
520
			<!-- Messages d'erreur du formulaire-->
654
		<!-- Messages d'erreur du formulaire-->
521
			<div class="row">
655
			<div class="row">
522
				<div class="zone-alerte span6 offset3">
656
				<div class="zone-alerte col-md-6 col-md-offset-3">
523
					<div id="dialogue-bloquer-creer-obs" class="alert alert-warning alert-block" style="display: none;">
657
					<div id="dialogue-bloquer-creer-obs" class="alert alert-warning alert-block" style="display: none;">
524
						<a class="close">×</a>
658
						<a class="close">×</a>
525
						<h4 class="alert-heading">Information : 10 observations maximum</h4>
659
						<h4 class="alert-heading">Information : 10 observations maximum</h4>
526
						<p>
660
						<p>
Line 540... Line 674...
540
					</div>
674
					</div>
541
				</div>
675
				</div>
542
			</div>
676
			</div>
Line 543... Line 677...
543
 
677
 
544
			<!-- Affiche le tableau récapitulatif des observations ajoutées -->
678
			<!-- Affiche le tableau récapitulatif des observations ajoutées -->
545
			<div id="zone-liste-obs" class="row-fluid">
679
			<div id="zone-liste-obs" class="row">
546
				<div class="span12">
680
				<div class="col-md-12">
547
					<div class="well">
681
					<div class="well well-lg">
548
						<div class="row-fluid">
682
						<div class="row">
-
 
683
							<div class="col-md-10">
-
 
684
								<h2>
-
 
685
									Observations
-
 
686
									<?=!empty($nom_sci_espece_defaut) ? "<i>d'{$nom_sci_espece_defaut}</i> " : ''; ?>
549
							<div class="span8">
687
									à transmettre :
-
 
688
									<span class="obs-nbre">0</span>
550
								<h2>Observations à transmettre : <span class="obs-nbre">0</span></h2>
689
								</h2>
551
							</div>
690
							</div>
552
							<div class="span4 droite">
691
							<div class="col-md-2 text-right">
553
								<button id="transmettre-obs" class="btn btn-primary btn-large has-tooltip"
692
								<button id="transmettre-obs" class="btn btn-primary btn-large has-tooltip"
554
									type="button" disabled="disabled"
693
									type="button" disabled="disabled"
555
									title="Ajoute les observations ci-dessous à votre Carnet en Ligne et les rend publiques.">
694
									title="Ajoute les observations ci-dessous à votre Carnet en Ligne et les rend publiques.">
556
									Transmettre
695
									Transmettre
557
								</button>
696
								</button>
558
							</div>
697
							</div>
559
						</div>
698
						</div>
560
						<div id="liste-obs" ></div>
699
						<div id="liste-obs" ></div>
561
						<div class="row">
700
						<div class="row">
562
							<div class="zone-alerte span6 offset3">
701
							<div class="zone-alerte col-md-6 col-md-offset-3">
563
								<div id="dialogue-zero-obs" class="alert alert-block" style="display: none;">
702
								<div id="dialogue-zero-obs" class="alert alert-block" style="display: none;">
564
									<a class="close">×</a>
703
									<a class="close">×</a>
565
									<h4 class="alert-heading">Attention : aucune observation</h4>
704
									<h4 class="alert-heading">Attention : aucune observation</h4>
566
									<p>Veuillez saisir des observations pour les transmettres.</p>
705
									<p>Veuillez saisir des observations pour les transmettres.</p>
Line 582... Line 721...
582
 
721
 
583
					</div>
722
					</div>
584
				</div>
723
				</div>
Line 585... Line 724...
585
			</div>
724
			</div>
586
 
725
 
587
			<footer class="row-fluid">
726
			<footer class="row">
Line 588... Line -...
588
				<p class="span12">&copy; Tela Botanica 2014</p>
-
 
589
			</footer>
-
 
590
 
-
 
591
			<!-- Fenêtres modales -->
-
 
592
			<div id="chargement" class="modal-fenetre" style="display:none;">
-
 
593
				<div id="chargement-centrage" class="modal-contenu">
-
 
594
					<div class="progress progress-striped active">
-
 
595
			 			<div id="barre-progression-upload" class="bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="10" style="">
-
 
596
			    			<span class="sr-only">0/10 observations transmises</span>
-
 
597
			  			</div>
-
 
598
					</div>
-
 
599
					<p id="chargement-txt" style="color:white;font-size:1.5em;">
-
 
600
						Transfert des observations en cours...<br />
-
 
601
						Cela peut prendre plusieurs minutes en fonction de la taille des images et du nombre
-
 
602
						d'observations à transférer.
-
 
603
					</p>
-
 
604
				</div>
727
				<p class="col-md-12 ">Réalisation &amp; hébergement : <a href="http://www.tela-botanica.org" target="_blank">Tela Botanica</a> 2014</p>
605
			</div>
728
			</footer>
606
 
729
 
607
			<!-- Templates HTML -->
730
			<!-- Templates HTML -->
608
			<div id="tpl-transmission-ok" style="display:none;">
731
			<div id="tpl-transmission-ok" style="display:none;">
Line 633... Line 756...
633
								  le formulaire de signalement d'erreurs</a>.
756
								  le formulaire de signalement d'erreurs</a>.
634
				</p>
757
				</p>
635
			</div>
758
			</div>
Line 636... Line 759...
636
 
759
 
637
			<!-- Fenêtres modales -->
760
			<!-- Fenêtres modales -->
638
			<div id="plte-description" class="modal hide fade modal-fullscreen" tabindex="-1" role="dialog"
-
 
639
				 aria-labelledby="plte-description-titre" aria-hidden="true">
761
			<div id="chargement" class="modal-fenetre" style="display:none;">
640
				<div class="modal-header">
-
 
641
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
-
 
642
					<h1 id="plte-description-titre"><i>Ambrosia psilostachya</i> DC. (Ambroisie à épis lisses)</h1>
-
 
643
				</div>
-
 
644
				<div class="modal-body">
762
				<div id="chargement-centrage" class="modal-contenu">
645
					<div class="dsc-imgs">
763
					<div class="progress">
646
						<img src="<?=$url_base?>/modules/saisie/squelettes/ambrosia/img/dsc/allure_generale.jpg" alt="Allure générale"/>
-
 
647
						<img src="<?=$url_base?>/modules/saisie/squelettes/ambrosia/img/dsc/feuille.jpg" alt="Feuille"/>
-
 
648
						<img src="<?=$url_base?>/modules/saisie/squelettes/ambrosia/img/dsc/fruit.jpg" alt="Fruit"/>
-
 
649
						<img src="<?=$url_base?>/modules/saisie/squelettes/ambrosia/img/dsc/racine.jpg" alt="Racine"/>
-
 
650
					</div>
-
 
651
					<div class="dsc-infos">
764
						<div id="barre-progression-upload" class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="10" style="">
652
						<p><b>Floraison :</b> de fin mai à septembre.</p>
-
 
653
						<p>
-
 
654
							<b>Plante vivace</b> de 10-60(80) cm à <b>rhizome grêle</b> d’où naissent des drageons (voir <b>photo 4</b>) . <b class="text-error">Attention: en
-
 
655
							arrachant la plante la tige casse facilement au ras du rhizome et la portion enfouie de la tige ressemble à une racine
-
 
656
							pivotante (=confusion possible avec une espèce annuelle) !</b>
-
 
657
						</p>
-
 
658
						<p><b>Tiges</b> simples ou à rameaux courts, souvent nues au-dessous du collet.</p>
-
 
659
						<p>
-
 
660
							<b>Feuilles</b> médianes 1 à 2 fois découpées, à bande médiane > 2 mm entre les 2 premières divisions (voir <b>photo 2</b>).<br />
-
 
661
							Morphologie des feuilles généralement uniforme au sein d’un même colonie.
-
 
662
						</p>
-
 
663
						<p><b>Inflorescence</b> mâle (au sommet) dépassant rarement 10 cm (6-20 cm chez <i>A. artemisiifolia</i>).</p>
-
 
664
						<p>
-
 
665
							<b>Fruits</b> (rarement produits en France) de plus 3,5 mm à bec de moins de 1 mm (>1 mm chez <i>A. artemisiifolia</i>) et
-
 
666
							épines obtuses courtes <0,3 mm (épines aiguës > 0,3 mm chez <i>A. artemisiifolia</i>) : voir <b>photo 3</b>.
-
 
667
						</p>
-
 
668
						<p class="muted">
-
 
669
							<b>Références :</b> Tison et al. (2014) Flore de la France méditerranéenne continentale ; Tison & De Foucault (2014) Flora Gallica ; Jauzein (1995)
-
 
670
							Flore des champs cultivés
-
 
671
						</p>
-
 
672
						<div class="well">
-
 
673
							<p>Vous pouvez télécharger plusieurs documents au format PDF :</p>
-
 
674
							<ul>
-
 
675
								<li>
-
 
676
									<a href="<?=$url_base?>/modules/saisie/squelettes/ambrosia/doc/ambrosia_psilostachya.pdf" target="_blank">
-
 
677
										cette description (173 Ko)
-
 
678
									</a>
-
 
679
								</li>
-
 
680
								<li>
-
 
681
									<a href="<?=$url_base?>/modules/saisie/squelettes/ambrosia/doc/cle_ambrosia.pdf" target="_blank">
-
 
682
										une clé de détermination du genre <i>Ambrosia</i> (ambroisies) (635 Ko)
-
 
683
									</a>
-
 
684
								</li>
-
 
685
							</ul>
765
							<span class="sr-only">0/10 observations transmises</span>
686
						</div>
766
						</div>
687
					</div>
767
					</div>
-
 
768
 
688
				</div>
769
					<p id="chargement-txt" style="color:white;font-size:1.5em;">
689
				<div class="modal-footer dsc-clean">
770
						Transfert des observations en cours...<br />
-
 
771
						Cela peut prendre plusieurs minutes en fonction de la taille des images et du nombre
-
 
772
						d'observations à transférer.
690
					<button class="btn" data-dismiss="modal" aria-hidden="true">Fermer</button>
773
					</p>
691
				</div>
774
				</div>
Line 692... Line 775...
692
			</div>
775
			</div>
693
 
776