Subversion Repositories eFlore/Applications.cel

Rev

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

Rev 2601 Rev 2678
1 
<!DOCTYPE html>
 1 
<!DOCTYPE html>
2 
<html>
 2 
<html>
3 
	<head>
 3 
	<head>
4 
		<title>Saisie simplifiée du CEL</title>
 4 
		<title>Saisie simplifiée du CEL</title>
5 
 
 5 
 
6 
		<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
 6 
		<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
7 
		<meta http-equiv="Content-style-type" content="text/css" />
 7 
		<meta http-equiv="Content-style-type" content="text/css" />
8 
		<meta http-equiv="Content-script-type" content="text/javascript" />
 8 
		<meta http-equiv="Content-script-type" content="text/javascript" />
9 
		<meta http-equiv="Content-language" content="fr" />
 9 
		<meta http-equiv="Content-language" content="fr" />
10 
 
 10 
 
11 
		<meta name="revisit-after" content="15 days" />
 11 
		<meta name="revisit-after" content="15 days" />
12 
		<meta name="robots" content="index,follow" />
 12 
		<meta name="robots" content="index,follow" />
13 
		<meta name="author" content="Tela Botanica" />
 13 
		<meta name="author" content="Tela Botanica" />
14 
		<meta name="keywords" content="Tela Botanica, CEL" />
 14 
		<meta name="keywords" content="Tela Botanica, CEL" />
15 
		<meta name="description" content="Widget de saisie simplifiée pour le CEL" />
 15 
		<meta name="description" content="Widget de saisie simplifiée pour le CEL" />
16 
 
 16 
 
17 
		<!-- OpenGraph pour Facebook, Pinterest, Google+ -->
 17 
		<!-- OpenGraph pour Facebook, Pinterest, Google+ -->
18 
		<meta property="og:type" content="website" />
 18 
		<meta property="og:type" content="website" />
19 
		<meta property="og:title" content="Saisie rapide d'observations" />
 19 
		<meta property="og:title" content="Saisie rapide d'observations" />
20 
		<meta property="og:site_name" content="Tela Botanica" />
 20 
		<meta property="og:site_name" content="Tela Botanica" />
21 
		<meta property="og:description" content="Saisissez et partagez facilement vos observations de plantes sauvages grâce au Widget de saisie du Carnet en Ligne (Licence CC-BY-SA)" />
 21 
		<meta property="og:description" content="Saisissez et partagez facilement vos observations de plantes sauvages grâce au Widget de saisie du Carnet en Ligne (Licence CC-BY-SA)" />
22 
		<meta property="og:image" content="http://resources.tela-botanica.org/tb/img/256x256/carre_englobant.png" />
 22 
		<meta property="og:image" content="http://resources.tela-botanica.org/tb/img/256x256/carre_englobant.png" />
23 
		<meta property="og:image:type" content="image/png" />
23 
		<meta property="og:image:type" content="image/png" />
24 
		<meta property="og:image:width" content="256" />
24 
		<meta property="og:image:width" content="256" />
25 
		<meta property="og:image:height" content="256" />
 25 
		<meta property="og:image:height" content="256" />
26 
		<meta property="og:locale" content="fr_FR" />
 26 
		<meta property="og:locale" content="fr_FR" />
27 
 
 27 
 
28 
		<!-- Viewport Mobile -->
 28 
		<!-- Viewport Mobile -->
29 
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
 29 
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
30 
 
 30 
 
31 
		<!-- Favicones -->
 31 
		<!-- Favicones -->
32 
		<link rel="shortcut icon" type="image/x-icon" href="http://resources.tela-botanica.org/tb/img/16x16/favicon.ico" />
 32 
		<link rel="shortcut icon" type="image/x-icon" href="http://resources.tela-botanica.org/tb/img/16x16/favicon.ico" />
33 
 
 33 
 
34 
		<!-- Javascript : bibliothèques -->
 34 
		<!-- Javascript : bibliothèques -->
35 
		<!-- Google Map v3 -->
 35 
		<!-- Google Map v3 -->
36 
		<!--<script type="text/javascript" src="https://getfirebug.com/firebug-lite.js"></script>-->
 36 
		<!--<script type="text/javascript" src="https://getfirebug.com/firebug-lite.js"></script>-->
37 
		<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&amp;language=fr&amp;region=FR"></script>
 37 
		<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&amp;language=fr&amp;region=FR"></script>
38 
 
 38 
 
39 
		<!-- Jquery -->
 39 
		<!-- Jquery -->
40 
		<script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/1.7.1/jquery-1.7.1.min.js"></script>
 40 
		<script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/1.7.1/jquery-1.7.1.min.js"></script>
41 
		<!-- Jquery UI : nécessaire pour le minicalendrier et l'auto-complétion -->
 41 
		<!-- Jquery UI : nécessaire pour le minicalendrier et l'auto-complétion -->
42 
		<script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/jquery-ui/1.8.18/js/jquery-ui-1.8.18.custom.min.js"></script>
 42 
		<script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/jquery-ui/1.8.18/js/jquery-ui-1.8.18.custom.min.js"></script>
43 
		<script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/jquery-ui/1.8.18/js/jquery.ui.datepicker-fr.js"></script>
 43 
		<script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/jquery-ui/1.8.18/js/jquery.ui.datepicker-fr.js"></script>
44 
		<!-- Jquery Plugins -->
 44 
		<!-- Jquery Plugins -->
45 
		<!-- Jquery Validate : nécessaire pour la validation des formulaires -->
 45 
		<!-- Jquery Validate : nécessaire pour la validation des formulaires -->
46 
		<script type="text/javascript" src="http://www.tela-botanica.org/commun/bootstrap/2.0.2/js/validate/1.9.0/jquery.validate.min.js"></script>
 46 
		<script type="text/javascript" src="http://www.tela-botanica.org/commun/bootstrap/2.0.2/js/validate/1.9.0/jquery.validate.min.js"></script>
47 
		<script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/validate/1.9.0/messages_fr.js"></script>
 47 
		<script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/validate/1.9.0/messages_fr.js"></script>
48 
		<!-- Jquery Form :nécessaire pour l'upload des images -->
 48 
		<!-- Jquery Form :nécessaire pour l'upload des images -->
49 
		<script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/form/2.95/jquery.form.min.js"></script>
 49 
		<script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/form/2.95/jquery.form.min.js"></script>
50 
 
 50 
 
51 
		<!-- Bootstrap -->
 51 
		<!-- Bootstrap -->
52 
		<script type="text/javascript" src="http://www.tela-botanica.org/commun/bootstrap/2.0.2/js/bootstrap.min.js"></script>
 52 
		<script type="text/javascript" src="http://www.tela-botanica.org/commun/bootstrap/2.0.2/js/bootstrap.min.js"></script>
53 
 
 53 
 
54 
		<!-- Javascript : appli saisie -->
 54 
		<!-- Javascript : appli saisie -->
55 
		<script type="text/javascript">
 55 
		<script type="text/javascript">
56 
		//<![CDATA[
 56 
		//<![CDATA[
57 
			// La présence du parametre 'debug' dans l'URL enclenche le dégogage
 57 
			// La présence du parametre 'debug' dans l'URL enclenche le dégogage
58 
			var DEBUG = <?=isset($_GET['debug']) ? 'true' : 'false'?>;
 58 
			var DEBUG = <?=isset($_GET['debug']) ? 'true' : 'false'?>;
59 
			// La présence du parametre 'html5' dans l'URL enclenche les fonctions avancées HTML5
 59 
			// La présence du parametre 'html5' dans l'URL enclenche les fonctions avancées HTML5
60 
			var HTML5 = <?=isset($_GET['html5']) ? 'true' : 'false'?>;
 60 
			var HTML5 = <?=isset($_GET['html5']) ? 'true' : 'false'?>;
61 
			// Mot-clé du widget/projet
 61 
			// Mot-clé du widget/projet
62 
			var TAG_PROJET = "WidgetSaisie";
 62 
			var TAG_PROJET = "WidgetSaisie";
63 
			// Mots-clés à ajouter aux images
 63 
			// Mots-clés à ajouter aux images
64 
			var TAG_IMG = "<?=isset($_GET['tag-img']) ? $_GET['tag-img'] : ''?>";
 64 
			var TAG_IMG = "<?=isset($_GET['tag-img']) ? $_GET['tag-img'] : ''?>";
65 
			var SEPARATION_TAG_IMG = "<?= isset($_GET['motcle']) && isset($_GET['tag-img']) ? ',' : '' ?>";
 65 
			var SEPARATION_TAG_IMG = "<?= isset($_GET['motcle']) && isset($_GET['tag-img']) ? ',' : '' ?>";
66 
			TAG_IMG = <?=isset($_GET['motcle']) ? "'".$_GET['motcle']."' + SEPARATION_TAG_IMG + TAG_IMG" : 'TAG_IMG' ?>;
 66 
			TAG_IMG = <?=isset($_GET['motcle']) ? "'".$_GET['motcle']."' + SEPARATION_TAG_IMG + TAG_IMG" : 'TAG_IMG' ?>;
67 
			// Mots-clés à ajouter aux observations
 67 
			// Mots-clés à ajouter aux observations
68 
			var TAG_OBS = "<?=isset($_GET['tag-obs']) ? $_GET['tag-obs'] : ''?>";
 68 
			var TAG_OBS = "<?=isset($_GET['tag-obs']) ? $_GET['tag-obs'] : ''?>";
69 
			var SEPARATION_TAG_OBS = "<?= isset($_GET['projet']) && isset($_GET['tag-obs']) ? ',' : '' ?>";
 69 
			var SEPARATION_TAG_OBS = "<?= isset($_GET['projet']) && isset($_GET['tag-obs']) ? ',' : '' ?>";
70 
			TAG_OBS = <?=isset($_GET['projet']) ? "'".$_GET['projet']."' + SEPARATION_TAG_OBS + TAG_OBS" : 'TAG_OBS' ?>;
 70 
			TAG_OBS = <?=isset($_GET['projet']) ? "'".$_GET['projet']."' + SEPARATION_TAG_OBS + TAG_OBS" : 'TAG_OBS' ?>;
71 
 
 71 
 
72 
			// Précharger le formulaire avec les infos d'une observation
 72 
			// Précharger le formulaire avec les infos d'une observation
73 
			var OBS_ID = "<?=isset($_GET['id-obs']) ? $_GET['id-obs'] : ''?>";
 73 
			var OBS_ID = "<?=isset($_GET['id-obs']) ? $_GET['id-obs'] : ''?>";
74 
			// URL du web service réalisant l'insertion des données dans la base du CEL.
 74 
			// URL du web service réalisant l'insertion des données dans la base du CEL.
75 
			var SERVICE_SAISIE_URL = "<?=$url_ws_saisie?>";
 75 
			var SERVICE_SAISIE_URL = "<?=$url_ws_saisie?>";
76 
			// URL du web service permettant de récupérer les infos d'une observation du CEL.
 76 
			// URL du web service permettant de récupérer les infos d'une observation du CEL.
77 
			var SERVICE_OBS_URL = "<?=$url_ws_obs?>";
 77 
			var SERVICE_OBS_URL = "<?=$url_ws_obs?>";
78 
			// Code du référentiel utilisé pour les nom scientifiques.
 78 
			// Code du référentiel utilisé pour les nom scientifiques.
79 
			var NOM_SCI_REFERENTIEL = "<?=$ns_referentiel?>";
 79 
			var NOM_SCI_REFERENTIEL = "<?=$ns_referentiel?>";
80 
			// Indication de la présence d'une espèce imposée
 80 
			// Indication de la présence d'une espèce imposée
81 
			var ESPECE_IMPOSEE = "<?=$espece_imposee; ?>";
 81 
			var ESPECE_IMPOSEE = "<?=$espece_imposee; ?>";
82 
			// Tableau d'informations sur l'espèce imposée
 82 
			// Tableau d'informations sur l'espèce imposée
83 
			var INFOS_ESPECE_IMPOSEE = <?=$infos_espece; ?>;
 83 
			var INFOS_ESPECE_IMPOSEE = <?=$infos_espece; ?>;
84 
			// Nombre d'élément dans les listes d'auto-complétion
 84 
			// Nombre d'élément dans les listes d'auto-complétion
85 
			var AUTOCOMPLETION_ELEMENTS_NBRE = 20;
 85 
			var AUTOCOMPLETION_ELEMENTS_NBRE = 20;
86 
			// Indication de la présence d'un référentiel imposé
 86 
			// Indication de la présence d'un référentiel imposé
87 
			var REFERENTIEL_IMPOSE = "<?=$referentiel_impose; ?>";
 87 
			var REFERENTIEL_IMPOSE = "<?=$referentiel_impose; ?>";
88 
			// URL du web service permettant l'auto-complétion des noms scientifiques.
 88 
			// URL du web service permettant l'auto-complétion des noms scientifiques.
89 
			var SERVICE_AUTOCOMPLETION_NOM_SCI_URL = "<?=$url_ws_autocompletion_ns?>?"+
 89 
			var SERVICE_AUTOCOMPLETION_NOM_SCI_URL = "<?=$url_ws_autocompletion_ns?>?"+
90 
					"masque={masque}&"+
 90 
					"masque={masque}&"+
91 
					"recherche=etendue&"+
 91 
					"recherche=etendue&"+
92 
					"retour.champs=famille,nom_retenu,nom_retenu_complet,num_taxonomique,nom_retenu.id&"+
 92 
					"retour.champs=famille,nom_retenu,nom_retenu_complet,num_taxonomique,nom_retenu.id&"+
93 
					"ns.structure=au"+"&"+
 93 
					"ns.structure=au"+"&"+
94 
					"navigation.limite="+AUTOCOMPLETION_ELEMENTS_NBRE;
 94 
					"navigation.limite="+AUTOCOMPLETION_ELEMENTS_NBRE;
95 
			// URL du web service permettant l'auto-complétion des noms scientifiques.
 95 
			// URL du web service permettant l'auto-complétion des noms scientifiques.
96 
			var SERVICE_AUTOCOMPLETION_NOM_SCI_URL_TPL = "<?=$url_ws_autocompletion_ns_tpl?>?"+
 96 
			var SERVICE_AUTOCOMPLETION_NOM_SCI_URL_TPL = "<?=$url_ws_autocompletion_ns_tpl?>?"+
97 
					"masque={masque}&"+
 97 
					"masque={masque}&"+
98 
					"recherche=etendue&"+
 98 
					"recherche=etendue&"+
99 
					"retour.champs=famille,nom_retenu,nom_retenu_complet,num_taxonomique,nom_retenu.id&"+
 99 
					"retour.champs=famille,nom_retenu,nom_retenu_complet,num_taxonomique,nom_retenu.id&"+
100 
					"retour.tri=alpharet&"+ // tri "à la CeL"
 100 
					"retour.tri=alpharet&"+ // tri "à la CeL"
101 
					"ns.structure=au"+"&"+
 101 
					"ns.structure=au"+"&"+
102 
					"navigation.limite="+AUTOCOMPLETION_ELEMENTS_NBRE;
 102 
					"navigation.limite="+AUTOCOMPLETION_ELEMENTS_NBRE;
103 
			// Nombre d'observations max autorisé avant transmission
 103 
			// Nombre d'observations max autorisé avant transmission
104 
			var OBS_MAX_NBRE = 10;
 104 
			var OBS_MAX_NBRE = 10;
105 
			// Durée d'affichage en milliseconde des messages d'informations
 105 
			// Durée d'affichage en milliseconde des messages d'informations
106 
			var DUREE_MESSAGE = 15000;
 106 
			var DUREE_MESSAGE = 15000;
107 
			// Squelette d'URL du web service de l'annuaire.
 107 
			// Squelette d'URL du web service de l'annuaire.
108 
			var SERVICE_ANNUAIRE_ID_URL = "<?=$url_ws_annuaire?>";
 108 
			var SERVICE_ANNUAIRE_ID_URL = "<?=$url_ws_annuaire?>";
109 
			// Squelette d'URL du web service d'eFlore fournissant les noms de communes.
 109 
			// Squelette d'URL du web service d'eFlore fournissant les noms de communes.
110 
			var SERVICE_NOM_COMMUNE_URL = "http://api.tela-botanica.org/service:eflore:0.1/osm/nom-commune?lon={lon}&lat={lat}";
 110 
			var SERVICE_NOM_COMMUNE_URL = "http://api.tela-botanica.org/service:eflore:0.1/osm/nom-commune?lon={lon}&lat={lat}";
111 
			// Squelette d'URL du web service d'eFlore fournissant les noms de communes hors de France (localisation approximative).
 111 
			// Squelette d'URL du web service d'eFlore fournissant les noms de communes hors de France (localisation approximative).
112 
			var SERVICE_NOM_COMMUNE_URL_ALT = "http://api.tela-botanica.org/service:eflore:0.1/wikipedia/nom-commune?lon={lon}&lat={lat}&nbre=1";
 112 
			var SERVICE_NOM_COMMUNE_URL_ALT = "http://api.tela-botanica.org/service:eflore:0.1/wikipedia/nom-commune?lon={lon}&lat={lat}&nbre=1";
113 
			// URL du marqueur à utiliser dans la carte Google Map
 113 
			// URL du marqueur à utiliser dans la carte Google Map
114 
			var GOOGLE_MAP_MARQUEUR_URL = "<?=$url_base?>modules/saisie/squelettes/defaut/img/marqueurs/epingle.png";
 114 
			var GOOGLE_MAP_MARQUEUR_URL = "<?=$url_base?>modules/saisie/squelettes/defaut/img/marqueurs/epingle.png";
115 
			// URL de l'icône du chargement en cours
 115 
			// URL de l'icône du chargement en cours
116 
			var CHARGEMENT_ICONE_URL = "<?=$url_base?>modules/saisie/squelettes/defaut/img/icones/chargement.gif";
 116 
			var CHARGEMENT_ICONE_URL = "<?=$url_base?>modules/saisie/squelettes/defaut/img/icones/chargement.gif";
117 
			// URL de l'icône du chargement en cours d'une image
 117 
			// URL de l'icône du chargement en cours d'une image
118 
			var CHARGEMENT_IMAGE_URL = "<?=$url_base?>modules/saisie/squelettes/defaut/img/icones/chargement-image.gif";
 118 
			var CHARGEMENT_IMAGE_URL = "<?=$url_base?>modules/saisie/squelettes/defaut/img/icones/chargement-image.gif";
119 
			// URL de l'icône du calendrier
 119 
			// URL de l'icône du calendrier
120 
			var CALENDRIER_ICONE_URL = "<?=$url_base?>modules/saisie/squelettes/defaut/img/icones/calendrier.png";
 120 
			var CALENDRIER_ICONE_URL = "<?=$url_base?>modules/saisie/squelettes/defaut/img/icones/calendrier.png";
121 
			// URL de l'icône du calendrier
 121 
			// URL de l'icône du calendrier
122 
			var PAS_DE_PHOTO_ICONE_URL = "<?=$url_base?>modules/saisie/squelettes/defaut/img/icones/pasdephoto.png";
 122 
			var PAS_DE_PHOTO_ICONE_URL = "<?=$url_base?>modules/saisie/squelettes/defaut/img/icones/pasdephoto.png";
123 
		//]]>
 123 
		//]]>
124 
		</script>
 124 
		</script>
125 
		<script type="text/javascript" src="<?=$url_base?>modules/saisie/squelettes/defaut/js/defaut.js"></script>
 125 
		<script type="text/javascript" src="<?=$url_base?>modules/saisie/squelettes/defaut/js/defaut.js"></script>
126 
 
 126 
 
127 
		<!-- CSS -->
 127 
		<!-- CSS -->
128 
		<link href="http://www.tela-botanica.org/commun/jquery/jquery-ui/1.8.18/css/smoothness/jquery-ui-1.8.18.custom.css" rel="stylesheet" type="text/css" media="screen" />
 128 
		<link href="http://www.tela-botanica.org/commun/jquery/jquery-ui/1.8.18/css/smoothness/jquery-ui-1.8.18.custom.css" rel="stylesheet" type="text/css" media="screen" />
129 
		<link href="http://www.tela-botanica.org/commun/bootstrap/2.0.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" media="screen" />
 129 
		<link href="http://www.tela-botanica.org/commun/bootstrap/2.0.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" media="screen" />
130 
		<link href="http://www.tela-botanica.org/commun/bootstrap/2.0.2/css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css" media="screen" />
 130 
		<link href="http://www.tela-botanica.org/commun/bootstrap/2.0.2/css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css" media="screen" />
131 
		<link href="<?=$url_base?>modules/saisie/squelettes/defaut/css/<?=isset($_GET['style']) ? $_GET['style'] : 'defaut'?>.css" rel="stylesheet" type="text/css" media="screen" />
 131 
		<link href="<?=$url_base?>modules/saisie/squelettes/defaut/css/<?=isset($_GET['style']) ? $_GET['style'] : 'defaut'?>.css" rel="stylesheet" type="text/css" media="screen" />
- 
 
 132
- 
 
 133 
		<script>
- 
 
 134 
		  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
- 
 
 135 
		  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
- 
 
 136 
		  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
- 
 
 137 
		  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
- 
 
 138
- 
 
 139 
		  ga('create', 'UA-20092557-1', 'auto');
- 
 
 140 
		  ga('require', 'displayfeatures');
- 
 
 141 
		  ga('send', 'pageview');
- 
 
 142
- 
 
 143 
		</script>
132 
	</head>
 144 
	</head>
133 
 
 145 
 
134 
	<body data-spy="scroll">
 146 
	<body data-spy="scroll">
135 
		<div class="container">
 147 
		<div class="container">
136 
			<div class="row-fluid">
 148 
			<div class="row-fluid">
137 
				<div class="span6 page-header">
 149 
				<div class="span6 page-header">
138 
					<div class="row">
 150 
					<div class="row">
139 
						<div class="span6">
 151 
						<div class="span6">
140 
							<h1>
 152 
							<h1>
141 
								<?php if($logo != 'defaut' && $logo != '0') { ?>
 153 
								<?php if($logo != 'defaut' && $logo != '0') { ?>
142 
									<img id="logo-titre" class="span1" src="<?= $logo ?>" alt="Logo" />
 154 
									<img id="logo-titre" class="span1" src="<?= $logo ?>" alt="Logo" />
143 
								<?php } else if($logo == 'defaut') { ?>
 155 
								<?php } else if($logo == 'defaut') { ?>
144 
									<img id="logo-titre" class="span1" src="http://resources.tela-botanica.org/tb/img/256x256/logo_sans_mots.png" alt="Tela Botanica" />
 156 
									<img id="logo-titre" class="span1" src="http://resources.tela-botanica.org/tb/img/256x256/logo_sans_mots.png" alt="Tela Botanica" />
145 
								<?php } ?>
 157 
								<?php } ?>
146 
								<?php if($titre != 'defaut') { ?>
 158 
								<?php if($titre != 'defaut') { ?>
147 
									<?= $titre; ?>
 159 
									<?= $titre; ?>
148 
								<?php } else { ?>
 160 
								<?php } else { ?>
149 
									Ajout rapide d'observations
 161 
									Ajout rapide d'observations
150 
								<?php } ?>
 162 
								<?php } ?>
151 
							</h1>
 163 
							</h1>
152 
						</div>
 164 
						</div>
153 
					</div>
 165 
					</div>
154 
					<div class="row">
 166 
					<div class="row">
155 
						<div class="span6">
 167 
						<div class="span6">
156 
							<p>
 168 
							<p>
157 
								Cet outil vous permet de partager simplement vos observations avec le
 169 
								Cet outil vous permet de partager simplement vos observations avec le
158 
								<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>).
 170 
								<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>).
159 
								Identifiez-vous bien pour ensuite retrouver et gérer vos données dans
 171 
								Identifiez-vous bien pour ensuite retrouver et gérer vos données dans
160 
								<a href="http://www.tela-botanica.org/appli:cel">votre Carnet en ligne</a>.
 172 
								<a href="http://www.tela-botanica.org/appli:cel">votre Carnet en ligne</a>.
161 
								Créez jusqu'à 10 observations (avec 10Mo max d'images) puis partagez-les avec le bouton 'transmettre'.
 173 
								Créez jusqu'à 10 observations (avec 10Mo max d'images) puis partagez-les avec le bouton 'transmettre'.
162 
								Elles apparaissent immédiatement sur les <a href="http://www.tela-botanica.org/site:botanique">cartes et galeries photos </a> du site.
 174 
								Elles apparaissent immédiatement sur les <a href="http://www.tela-botanica.org/site:botanique">cartes et galeries photos </a> du site.
163 
							</p>
 175 
							</p>
164 
							<p class="discretion">
 176 
							<p class="discretion">
165 
								Pour toute question ou remarque,
 177 
								Pour toute question ou remarque,
166 
								<a href="<?= $url_remarques ?>?service=cel&pageSource=<?php echo urlencode('http://'.$_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF'].'?'.$_SERVER['QUERY_STRING']); ?>"
 178 
								<a href="<?= $url_remarques ?>?service=cel&pageSource=<?php echo urlencode('http://'.$_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF'].'?'.$_SERVER['QUERY_STRING']); ?>"
167 
								  target="_blank"
 179 
								  target="_blank"
168 
								  onclick="javascript:window.open(this.getAttribute('href'), 'Tela Botanica - Remarques', config='height=700, width=640, scrollbars=yes, resizable=yes'); return false;">
 180 
								  onclick="javascript:window.open(this.getAttribute('href'), 'Tela Botanica - Remarques', config='height=700, width=640, scrollbars=yes, resizable=yes'); return false;">
169 
								  contactez-nous</a>
 181 
								  contactez-nous</a>
170 
 
 182 
 
171 
							</p>
 183 
							</p>
172 
							<p class="discretion">
 184 
							<p class="discretion">
173 
								Une fois familiarisé avec l'interface vous pouvez cliquer sur ce bouton pour désactiver l'aide.
 185 
								Une fois familiarisé avec l'interface vous pouvez cliquer sur ce bouton pour désactiver l'aide.
174 
								<button id="btn-aide" class="btn btn-mini btn-success">
 186 
								<button id="btn-aide" class="btn btn-mini btn-success">
175 
									<span class="icon-question-sign icon-white"></span>
 187 
									<span class="icon-question-sign icon-white"></span>
176 
									<span id="btn-aide-txt" >Désactiver l'aide</span>
 188 
									<span id="btn-aide-txt" >Désactiver l'aide</span>
177 
								</button>
 189 
								</button>
178 
							</p>
 190 
							</p>
179 
						</div>
 191 
						</div>
180 
					</div>
 192 
					</div>
181 
				</div>
 193 
				</div>
182 
 
 194 
 
183 
				<div class="span6">
 195 
				<div class="span6">
184 
					<div class="well">
 196 
					<div class="well">
185 
						<h2>Observateur</h2>
 197 
						<h2>Observateur</h2>
186 
						<form id="form-observateur" action="#" class="" autocomplete="on">
 198 
						<form id="form-observateur" action="#" class="" autocomplete="on">
187 
							<div class="row-fluid">
 199 
							<div class="row-fluid">
188 
								<div class="span6" rel="tooltip" data-placement="right"
 200 
								<div class="span6" rel="tooltip" data-placement="right"
189 
									title="Saisissez le courriel avec lequel vous être inscrit à Tela Botanica.
 201 
									title="Saisissez le courriel avec lequel vous être inscrit à Tela Botanica.
190 
										Si vous n'êtes pas inscrit, ce n'est pas grave, vous pourrez le faire
 202 
										Si vous n'êtes pas inscrit, ce n'est pas grave, vous pourrez le faire
191 
										ultérieurement. Des informations complémentaires vont vous être
 203 
										ultérieurement. Des informations complémentaires vont vous être
192 
										demandées : prénom et nom.">
 204 
										demandées : prénom et nom.">
193 
									<label for="courriel"
 205 
									<label for="courriel"
194 
										title="Veuillez saisir votre adresse courriel.">
 206 
										title="Veuillez saisir votre adresse courriel.">
195 
										<strong class="obligatoire">*</strong> Courriel
 207 
										<strong class="obligatoire">*</strong> Courriel
196 
									</label>
 208 
									</label>
197 
									<div class="input-prepend">
 209 
									<div class="input-prepend">
198 
										<span class="add-on"><i class="icon-envelope"></i></span>
 210 
										<span class="add-on"><i class="icon-envelope"></i></span>
199 
										<input id="courriel" class="input-medium" name="courriel" type="text"/>
 211 
										<input id="courriel" class="input-medium" name="courriel" type="text"/>
200 
										<input id="id_utilisateur" name="id_utilisateur" type="hidden"/>
 212 
										<input id="id_utilisateur" name="id_utilisateur" type="hidden"/>
201 
									</div>
 213 
									</div>
202 
								</div>
 214 
								</div>
203 
								<div id="zone-courriel-confirmation" class="span6 hidden">
 215 
								<div id="zone-courriel-confirmation" class="span6 hidden">
204 
									<label for="courriel_confirmation"
 216 
									<label for="courriel_confirmation"
205 
										title="Veuillez saisir confirmer le courriel.">
 217 
										title="Veuillez saisir confirmer le courriel.">
206 
										<strong class="obligatoire">*</strong> Courriel (confirmation)
 218 
										<strong class="obligatoire">*</strong> Courriel (confirmation)
207 
									</label>
 219 
									</label>
208 
									<div class="input-prepend">
 220 
									<div class="input-prepend">
209 
										<span class="add-on">
 221 
										<span class="add-on">
210 
											<i class="icon-envelope"></i>
 222 
											<i class="icon-envelope"></i>
211 
										</span><input id="courriel_confirmation" class="input-medium" name="courriel_confirmation" type="text"/>
 223 
										</span><input id="courriel_confirmation" class="input-medium" name="courriel_confirmation" type="text"/>
212 
									</div>
 224 
									</div>
213 
								</div>
 225 
								</div>
214 
							</div>
 226 
							</div>
215 
							<div id="zone-prenom-nom" class="row-fluid hidden">
 227 
							<div id="zone-prenom-nom" class="row-fluid hidden">
216 
								<div class="span6">
 228 
								<div class="span6">
217 
									<label for="prenom">Prénom</label>
 229 
									<label for="prenom">Prénom</label>
218 
									<div>
 230 
									<div>
219 
										<input id="prenom" name="prenom" class="span3" type="text"/>
 231 
										<input id="prenom" name="prenom" class="span3" type="text"/>
220 
									</div>
 232 
									</div>
221 
								</div>
 233 
								</div>
222 
								<div class="span6">
 234 
								<div class="span6">
223 
									<label for="nom">Nom</label>
 235 
									<label for="nom">Nom</label>
224 
									<div>
 236 
									<div>
225 
										<input id="nom" name="nom"  class="span3" type="text"/>
 237 
										<input id="nom" name="nom"  class="span3" type="text"/>
226 
									</div>
 238 
									</div>
227 
								</div>
 239 
								</div>
228 
							</div>
 240 
							</div>
229 
						</form>
 241 
						</form>
230 
					</div>
 242 
					</div>
231 
				</div>
 243 
				</div>
232 
			</div>
 244 
			</div>
233 
			<!-- Messages d'erreur du formulaire-->
 245 
			<!-- Messages d'erreur du formulaire-->
234 
			<div class="row">
 246 
			<div class="row">
235 
				<div class="zone-alerte span6 offset3">
 247 
				<div class="zone-alerte span6 offset3">
236 
					<div id="dialogue-bloquer-copier-coller" class="alert alert-info alert-block" style="display:none;">
 248 
					<div id="dialogue-bloquer-copier-coller" class="alert alert-info alert-block" style="display:none;">
237 
						<a class="close">×</a>
 249 
						<a class="close">×</a>
238 
						<h4 class="alert-heading">Information : copier/coller</h4>
 250 
						<h4 class="alert-heading">Information : copier/coller</h4>
239 
						<p>
 251 
						<p>
240 
							Merci de ne pas copier/coller votre courriel.<br/>
 252 
							Merci de ne pas copier/coller votre courriel.<br/>
241 
							La double saisie permet de vérifier l'absence d'erreurs.
 253 
							La double saisie permet de vérifier l'absence d'erreurs.
242 
						</p>
 254 
						</p>
243 
					</div>
 255 
					</div>
244 
					<div id="dialogue-courriel-introuvable" class="alert alert-info alert-block" style="display:none;">
 256 
					<div id="dialogue-courriel-introuvable" class="alert alert-info alert-block" style="display:none;">
245 
						<a class="close">×</a>
 257 
						<a class="close">×</a>
246 
						<h4 class="alert-heading">Information : courriel introuvable</h4>
 258 
						<h4 class="alert-heading">Information : courriel introuvable</h4>
247 
						<p>
 259 
						<p>
248 
							Vous n'êtes pas inscrit à Tela Botanica avec ce courriel.<br/>
 260 
							Vous n'êtes pas inscrit à Tela Botanica avec ce courriel.<br/>
249 
							Veuillez compléter les champs supplémentaires ou indiquer votre courriel d'inscription.<br/>
 261 
							Veuillez compléter les champs supplémentaires ou indiquer votre courriel d'inscription.<br/>
250 
							Pour retrouver vos observations dans le <a href="http://www.tela-botanica.org/appli:cel">Carnet en ligne</a>,
 262 
							Pour retrouver vos observations dans le <a href="http://www.tela-botanica.org/appli:cel">Carnet en ligne</a>,
251 
							il sera nécesaire de <a href="http://www.tela-botanica.org/page:inscription">vous inscrire à Tela Botanica</a>.
 263 
							il sera nécesaire de <a href="http://www.tela-botanica.org/page:inscription">vous inscrire à Tela Botanica</a>.
252 
						</p>
 264 
						</p>
253 
					</div>
 265 
					</div>
254 
					<div id="dialogue-google-map" class="alert alert-info alert-block" style="display: none;">
 266 
					<div id="dialogue-google-map" class="alert alert-info alert-block" style="display: none;">
255 
						<a class="close">×</a>
 267 
						<a class="close">×</a>
256 
						<h4 class="alert-heading">Information sur Google Map</h4>
 268 
						<h4 class="alert-heading">Information sur Google Map</h4>
257 
						<div class="contenu"></div>
 269 
						<div class="contenu"></div>
258 
					</div>
 270 
					</div>
259 
				</div>
 271 
				</div>
260 
			</div>
 272 
			</div>
261 
			<div class="row-fluid">
 273 
			<div class="row-fluid">
262 
				<div class="span12">
 274 
				<div class="span12">
263 
					<div class="well">
 275 
					<div class="well">
264 
						<div class="row-fluid">
 276 
						<div class="row-fluid">
265 
							<div class="span6">
 277 
							<div class="span6">
266 
								<div>
 278 
								<div>
267 
									<div class="row-fluid">
 279 
									<div class="row-fluid">
268 
										<div class="span12">
 280 
										<div class="span12">
269 
											<h2>Lieu du relevé</h2>
 281 
											<h2>Lieu du relevé</h2>
270 
										</div>
 282 
										</div>
271 
									</div>
 283 
									</div>
272 
									<div class="row-fluid">
 284 
									<div class="row-fluid">
273 
										<div class="span4">
 285 
										<div class="span4">
274 
											<label for="map_canvas" title="Veuillez localiser l'observation">
 286 
											<label for="map_canvas" title="Veuillez localiser l'observation">
275 
												Géolocalisation
 287 
												Géolocalisation
276 
											</label>
 288 
											</label>
277 
										</div>
 289 
										</div>
278 
										<div class="span8 droite">
 290 
										<div class="span8 droite">
279 
											<form id="form-carte-recherche" class="form-search form-horizontal" action="#" >
 291 
											<form id="form-carte-recherche" class="form-search form-horizontal" action="#" >
280 
												<div class="control-group">
 292 
												<div class="control-group">
281 
													<label for="carte-recherche">Rechercher</label>
 293 
													<label for="carte-recherche">Rechercher</label>
282 
													<input id="carte-recherche" class="search-query" type="text" value=""
 294 
													<input id="carte-recherche" class="search-query" type="text" value=""
283 
														rel="tooltip"
 295 
														rel="tooltip"
284 
														title="Permet de centrer la carte sur le lieu recherché."
 296 
														title="Permet de centrer la carte sur le lieu recherché."
285 
														placeholder="Centrer la carte sur un lieu..."/>
 297 
														placeholder="Centrer la carte sur un lieu..."/>
286 
												</div>
 298 
												</div>
287 
											</form>
 299 
											</form>
288 
										</div>
 300 
										</div>
289 
									</div>
 301 
									</div>
290 
									<div class="row-fluid">
 302 
									<div class="row-fluid">
291 
										<div class="span12">
 303 
										<div class="span12">
292 
											<div id="map-canvas" rel="tooltip"
 304 
											<div id="map-canvas" rel="tooltip"
293 
												title="Vous pouvez cliquer sur la carte pour déplacer le marqueur
 305 
												title="Vous pouvez cliquer sur la carte pour déplacer le marqueur
294 
													représentant votre station ou bien le glisser-déposer sur
 306 
													représentant votre station ou bien le glisser-déposer sur
295 
													le lieu souhaité."></div>
 307 
													le lieu souhaité."></div>
296 
										</div>
 308 
										</div>
297 
									</div>
 309 
									</div>
298 
									<div class="row-fluid">
 310 
									<div class="row-fluid">
299 
										<label for="coordonnees-geo" class="span7">
 311 
										<label for="coordonnees-geo" class="span7">
300 
											<a href="#" class="afficher-coord">Afficher</a>
 312 
											<a href="#" class="afficher-coord">Afficher</a>
301 
											<a href="#" class="afficher-coord" style="display:none;">Cacher</a>
 313 
											<a href="#" class="afficher-coord" style="display:none;">Cacher</a>
302 
											les coordonnées géographiques
 314 
											les coordonnées géographiques
303 
											<span id="lat-lon-info" class="info"
 315 
											<span id="lat-lon-info" class="info"
304 
												rel="tooltip"
 316 
												rel="tooltip"
305 
												title="Système géodésique mondial, révision de 1984 - Coordonnées non projetées">
 317 
												title="Système géodésique mondial, révision de 1984 - Coordonnées non projetées">
306 
												(WGS84)
 318 
												(WGS84)
307 
											</span>
 319 
											</span>
308 
										</label>
 320 
										</label>
309 
										<div id="info-commune" class="span5">
 321 
										<div id="info-commune" class="span5">
310 
								    		<span for="marqueur-commune">Commune : </span>
 322 
								    		<span for="marqueur-commune">Commune : </span>
311 
								    		<span id="marqueur-commune">
 323 
								    		<span id="marqueur-commune">
312 
								    			<span id="commune-nom" class="commune-info"></span>
 324 
								    			<span id="commune-nom" class="commune-info"></span>
313 
								    			(<span id="commune-code-insee" class="commune-info"
 325 
								    			(<span id="commune-code-insee" class="commune-info"
314 
								    				rel="tooltip"
 326 
								    				rel="tooltip"
315 
								    				title="Code INSEE de la commune"></span>)
 327 
								    				title="Code INSEE de la commune"></span>)
316 
								    		</span>
 328 
								    		</span>
317 
							    		</div>
 329 
							    		</div>
318 
									</div>
 330 
									</div>
319 
									<form id="form-station" class="control-group" action="#" enctype="multipart/form-data" autocomplete="on">
 331 
									<form id="form-station" class="control-group" action="#" enctype="multipart/form-data" autocomplete="on">
320 
										<div id="coordonnees-geo" class="well" style="display:none;">
 332 
										<div id="coordonnees-geo" class="well" style="display:none;">
321 
											<div class="row-fluid form-inline">
 333 
											<div class="row-fluid form-inline">
322 
												<div id="coord-lat" class="span4">
 334 
												<div id="coord-lat" class="span4">
323 
													<label for="latitude">Latitude</label>
 335 
													<label for="latitude">Latitude</label>
324 
													<div>
 336 
													<div>
325 
														<input id="latitude" class="input-mini" name="latitude" type="text" value=""/>
 337 
														<input id="latitude" class="input-mini" name="latitude" type="text" value=""/>
326 
													</div>
 338 
													</div>
327 
												</div>
 339 
												</div>
328 
												<div id="coord-lng" class="span4">
 340 
												<div id="coord-lng" class="span4">
329 
													<label for="longitude">Longitude</label>
 341 
													<label for="longitude">Longitude</label>
330 
													<div>
 342 
													<div>
331 
														<input id="longitude" class="input-mini" name="longitude" type="text" value=""/>
 343 
														<input id="longitude" class="input-mini" name="longitude" type="text" value=""/>
332 
													</div>
 344 
													</div>
333 
												</div>
 345 
												</div>
334 
												<div class="span1">
 346 
												<div class="span1">
335 
													<div>
 347 
													<div>
336 
														<input id="geolocaliser" type="button" value="Voir sur la carte"
 348 
														<input id="geolocaliser" type="button" value="Voir sur la carte"
337 
															rel="tooltip"
 349 
															rel="tooltip"
338 
															title="Centre la carte sur les coordonnées de latitude et longitude saisies."/>
 350 
															title="Centre la carte sur les coordonnées de latitude et longitude saisies."/>
339 
													</div>
 351 
													</div>
340 
												</div>
 352 
												</div>
341 
									    	</div>
 353 
									    	</div>
342 
										</div>
 354 
										</div>
343 
										<div class="row-fluid">
 355 
										<div class="row-fluid">
344 
											<div class="span4" rel="tooltip"
 356 
											<div class="span4" rel="tooltip"
345 
												title="Toponyme plus précis que la commune, utilisé localement et se trouvant souvent sur les cartes au 1/25 000." >
 357 
												title="Toponyme plus précis que la commune, utilisé localement et se trouvant souvent sur les cartes au 1/25 000." >
346 
												<label for="lieudit">Lieu-dit</label>
 358 
												<label for="lieudit">Lieu-dit</label>
347 
												<div>
 359 
												<div>
348 
													<input type="text" id="lieudit" class="span2" name="lieudit"/>
 360 
													<input type="text" id="lieudit" class="span2" name="lieudit"/>
349 
												</div>
 361 
												</div>
350 
											</div>
 362 
											</div>
351 
											<div class="span4" rel="tooltip"
 363 
											<div class="span4" rel="tooltip"
352 
												title="Lieu précis de l'observation définissant une unité écologique homogène (ex: le pré derrière la maison)." >
 364 
												title="Lieu précis de l'observation définissant une unité écologique homogène (ex: le pré derrière la maison)." >
353 
												<label for="station">Station</label>
 365 
												<label for="station">Station</label>
354 
												<div>
 366 
												<div>
355 
													<input type="text" id="station" class="span2" name="station"/>
 367 
													<input type="text" id="station" class="span2" name="station"/>
356 
												</div>
 368 
												</div>
357 
											</div>
 369 
											</div>
358 
											<div class="span4" rel="tooltip"
 370 
											<div class="span4" rel="tooltip"
359 
												title="Type d'habitat plus ou moins standardisé dans les codes Corine ou Catminat (ex: prairie humide).">
 371 
												title="Type d'habitat plus ou moins standardisé dans les codes Corine ou Catminat (ex: prairie humide).">
360 
												<label for="milieu">Milieu</label>
 372 
												<label for="milieu">Milieu</label>
361 
												<div>
 373 
												<div>
362 
													<input type="text" id="milieu" class="span2" name="milieu" />
 374 
													<input type="text" id="milieu" class="span2" name="milieu" />
363 
												</div>
 375 
												</div>
364 
											</div>
 376 
											</div>
365 
										</div>
 377 
										</div>
366 
									</form>
 378 
									</form>
367 
								</div>
 379 
								</div>
368 
							</div>
 380 
							</div>
369 
							<div class="span6">
 381 
							<div class="span6">
370 
								<form id="form-obs" action="#" autocomplete="on">
 382 
								<form id="form-obs" action="#" autocomplete="on">
371 
									<h2>Observation</h2>
 383 
									<h2>Observation</h2>
372 
									<?php if(!$referentiel_impose && !$espece_imposee) : ?>
 384 
									<?php if(!$referentiel_impose && !$espece_imposee) : ?>
373 
										<div class="row-fluid">
 385 
										<div class="row-fluid">
374 
											<div rel="tooltip"
 386 
											<div rel="tooltip"
375 
												title="Sélectionnez le référentiel associé à votre relevé">
 387 
												title="Sélectionnez le référentiel associé à votre relevé">
376 
												<label for="referentiel" title="Réferentiel">
 388 
												<label for="referentiel" title="Réferentiel">
377 
													Référentiel
 389 
													Référentiel
378 
												</label>
 390 
												</label>
379 
												<span class="input-prepend">
 391 
												<span class="input-prepend">
380 
													<span id="referentiel-icone" class="add-on"><i class="icon-book"></i></span>
 392 
													<span id="referentiel-icone" class="add-on"><i class="icon-book"></i></span>
381 
													<select id="referentiel" autocomplete="off">
 393 
													<select id="referentiel" autocomplete="off">
382 
														<option value="bdtfx" selected="selected" title="Trachéophytes de France métropolitaine">Métropole (BDTFX)</option>
 394 
														<option value="bdtfx" selected="selected" title="Trachéophytes de France métropolitaine">Métropole (BDTFX)</option>
383 
														<option value="bdtxa" title="Trachéophytes des Antilles">Antilles françaises (BDTXA)</option>
 395 
														<option value="bdtxa" title="Trachéophytes des Antilles">Antilles françaises (BDTXA)</option>
384 
														<option value="bdtre" title="Trachéophytes de La Réunion">Réunion (BDTRE)</option>
 396 
														<option value="bdtre" title="Trachéophytes de La Réunion">Réunion (BDTRE)</option>
385 
														<option value="isfan" title="Afrique du Nord">Afrique du Nord (ISFAN)</option>
 397 
														<option value="isfan" title="Afrique du Nord">Afrique du Nord (ISFAN)</option>
386 
														<option value="apd" title="Afrique de l'Ouest et du Centre">Afrique de l'Ouest et du Centre (APD)</option>
 398 
														<option value="apd" title="Afrique de l'Ouest et du Centre">Afrique de l'Ouest et du Centre (APD)</option>
387 
														<option value="lbf" title="Liban">Liban (LBF)</option>
 399 
														<option value="lbf" title="Liban">Liban (LBF)</option>
388 
														<option value="autre" title="Autre/Inconnu">Autre/Inconnu</option>
 400 
														<option value="autre" title="Autre/Inconnu">Autre/Inconnu</option>
389 
													</select>
 401 
													</select>
390 
												</span>
 402 
												</span>
391 
											</div>
 403 
											</div>
392 
										</div>
 404 
										</div>
393 
									<?php endif; ?>
 405 
									<?php endif; ?>
394 
									<div class="row-fluid">
 406 
									<div class="row-fluid">
395 
										<div class="span4" rel="tooltip"
 407 
										<div class="span4" rel="tooltip"
396 
											title="Vous pouvez cliquer sur l'icône de calendrier pour
 408 
											title="Vous pouvez cliquer sur l'icône de calendrier pour
397 
												sélectionner une date dans un calendrier.">
 409 
												sélectionner une date dans un calendrier.">
398 
											<label for="date" title="Veuillez indiquer la date du relevé au format jj/mm/aaaa">
 410 
											<label for="date" title="Veuillez indiquer la date du relevé au format jj/mm/aaaa">
399 
												Date du relevé
 411 
												Date du relevé
400 
											</label>
 412 
											</label>
401 
											<div class="input-prepend">
 413 
											<div class="input-prepend">
402 
												<span id="date-icone" class="add-on"></span><input id="date"
 414 
												<span id="date-icone" class="add-on"></span><input id="date"
403 
													class="input-small" name="date" type="text"
 415 
													class="input-small" name="date" type="text"
404 
													placeholder="jj/mm/aaaa" />
 416 
													placeholder="jj/mm/aaaa" />
405 
											</div>
 417 
											</div>
406 
										</div>
 418 
										</div>
407 
										<div id="taxon-input-groupe" class="span8" rel="tooltip"
 419 
										<div id="taxon-input-groupe" class="span8" rel="tooltip"
408 
											title="Sélectionnez une espèce dans la liste déroulante pour lier
 420 
											title="Sélectionnez une espèce dans la liste déroulante pour lier
409 
												votre nom au référentiel selectionné. Si vous
 421 
												votre nom au référentiel selectionné. Si vous
410 
												le désirez vous pouvez aussi saisir un nom absent du référentiel
 422 
												le désirez vous pouvez aussi saisir un nom absent du référentiel
411 
												(Ex. : 'fleur violette' ou 'viola sinensis???')." >
 423 
												(Ex. : 'fleur violette' ou 'viola sinensis???')." >
412 
											<label for="taxon" title="Choisissez une espèce">
 424 
											<label for="taxon" title="Choisissez une espèce">
413 
												<strong class="obligatoire">*</strong>
 425 
												<strong class="obligatoire">*</strong>
414 
												Espèce <?= $referentiel_impose ? '('.$ns_referentiel.')' : '' ?> <em>(ou indication sur la plante)</em>
 426 
												Espèce <?= $referentiel_impose ? '('.$ns_referentiel.')' : '' ?> <em>(ou indication sur la plante)</em>
415 
											</label>
 427 
											</label>
416 
											<div class="input-prepend">
 428 
											<div class="input-prepend">
417 
												<span class="add-on">
 429 
												<span class="add-on">
418 
													<i class="icon-leaf"></i>
 430 
													<i class="icon-leaf"></i>
419 
												</span><input type="text" id="taxon" name="taxon" value="<?= $nom_sci_espece_defaut; ?>" />
 431 
												</span><input type="text" id="taxon" name="taxon" value="<?= $nom_sci_espece_defaut; ?>" />
420 
											</div>
 432 
											</div>
421 
										</div>
 433 
										</div>
422 
									</div>
 434 
									</div>
423 
									<div class="row-fluid">
 435 
									<div class="row-fluid">
424 
										<div class="span12">
 436 
										<div class="span12">
425 
											<label for="notes">Commentaires</label>
 437 
											<label for="notes">Commentaires</label>
426 
											<div>
 438 
											<div>
427 
												<textarea id="notes" class="span6" rows="7" name="notes"
 439 
												<textarea id="notes" class="span6" rows="7" name="notes"
428 
													placeholder="vous pouvez éventuellement ajouter des informations complémentaires à votre observation (altitude, taille de la plante...)"></textarea>
 440 
													placeholder="vous pouvez éventuellement ajouter des informations complémentaires à votre observation (altitude, taille de la plante...)"></textarea>
429 
											</div>
 441 
											</div>
430 
										</div>
 442 
										</div>
431 
									</div>
 443 
									</div>
432 
								</form>
 444 
								</form>
433 
								<form id="form-upload" class="form-horizontal" action="<?= $url_ws_upload ?>"
 445 
								<form id="form-upload" class="form-horizontal" action="<?= $url_ws_upload ?>"
434 
									method="post" enctype="multipart/form-data">
 446 
									method="post" enctype="multipart/form-data">
435 
									<h2>Image(s) de cette plante</h2>
 447 
									<h2>Image(s) de cette plante</h2>
436 
									<strong>Ajouter une image</strong>
 448 
									<strong>Ajouter une image</strong>
437 
									<p class="miniature-info" class="discretion help-inline">Les photos doivent être au format JPEG et ne doivent pas excéder 5Mo chacunes.</p>
 449 
									<p class="miniature-info" class="discretion help-inline">Les photos doivent être au format JPEG et ne doivent pas excéder 5Mo chacunes.</p>
438 
									<div id ="photos-conteneur">
 450 
									<div id ="photos-conteneur">
439 
										<input type="file" id="fichier" name="fichier" accept="image/jpeg" />
 451 
										<input type="file" id="fichier" name="fichier" accept="image/jpeg" />
440 
										<input type="hidden" name="MAX_FILE_SIZE" value="5242880"/>
 452 
										<input type="hidden" name="MAX_FILE_SIZE" value="5242880"/>
441 
										<div id="miniatures">
 453 
										<div id="miniatures">
442 
										</div>
 454 
										</div>
443 
										<p class="miniature-msg" class="span12">&nbsp;</p>
 455 
										<p class="miniature-msg" class="span12">&nbsp;</p>
444 
									</div>
 456 
									</div>
445 
								</form>
 457 
								</form>
446 
							</div>
 458 
							</div>
447 
							<div class="row-fluid">
 459 
							<div class="row-fluid">
448 
								<div class="span12 centre" rel="tooltip"
 460 
								<div class="span12 centre" rel="tooltip"
449 
									title="Une fois les champs remplis, vous pouvez cliquer sur ce bouton pour
 461 
									title="Une fois les champs remplis, vous pouvez cliquer sur ce bouton pour
450 
										ajouter votre observation à la liste à transmettre.">
 462 
										ajouter votre observation à la liste à transmettre.">
451 
									<button id="ajouter-obs" class="btn btn-primary btn-large" type="button">
 463 
									<button id="ajouter-obs" class="btn btn-primary btn-large" type="button">
452 
										Créer
 464 
										Créer
453 
									</button>
 465 
									</button>
454 
								</div>
 466 
								</div>
455 
							</div>
 467 
							</div>
456 
						</div>
 468 
						</div>
457 
					</div>
 469 
					</div>
458 
				</div>
 470 
				</div>
459 
			</div>
 471 
			</div>
460 
			<!-- Messages d'erreur du formulaire-->
 472 
			<!-- Messages d'erreur du formulaire-->
461 
			<div class="row">
 473 
			<div class="row">
462 
				<div class="zone-alerte span6 offset3">
 474 
				<div class="zone-alerte span6 offset3">
463 
					<div id="dialogue-bloquer-creer-obs" class="alert alert-warning alert-block" style="display: none;">
 475 
					<div id="dialogue-bloquer-creer-obs" class="alert alert-warning alert-block" style="display: none;">
464 
						<a class="close">×</a>
 476 
						<a class="close">×</a>
465 
						<h4 class="alert-heading">Information : 10 observations maximum</h4>
 477 
						<h4 class="alert-heading">Information : 10 observations maximum</h4>
466 
						<p>
 478 
						<p>
467 
							Vous venez d'ajouter votre 10ème observation.<br/>
 479 
							Vous venez d'ajouter votre 10ème observation.<br/>
468 
							Pour en ajouter de nouvelles, il est nécessaire de les transmettre en cliquant sur le bouton ci-dessous.
 480 
							Pour en ajouter de nouvelles, il est nécessaire de les transmettre en cliquant sur le bouton ci-dessous.
469 
						</p>
 481 
						</p>
470 
					</div>
 482 
					</div>
471 
				</div>
 483 
				</div>
472 
				<div class="zone-alerte span6 offset3">
 484 
				<div class="zone-alerte span6 offset3">
473 
					<div id="dialogue-form-invalide" class="alert alert-warning alert-block" style="display: none;">
 485 
					<div id="dialogue-form-invalide" class="alert alert-warning alert-block" style="display: none;">
474 
						<a class="close">×</a>
 486 
						<a class="close">×</a>
475 
						<h4 class="alert-heading">Information : champs en erreur</h4>
 487 
						<h4 class="alert-heading">Information : champs en erreur</h4>
476 
						<p>
 488 
						<p>
477 
							Certains champs du formulaire sont mal remplis.<br/>
 489 
							Certains champs du formulaire sont mal remplis.<br/>
478 
							Veuillez vérifier vos données.
 490 
							Veuillez vérifier vos données.
479 
						</p>
 491 
						</p>
480 
					</div>
 492 
					</div>
481 
				</div>
 493 
				</div>
482 
			</div>
 494 
			</div>
483 
			<!-- Affiche le tableau récapitualif des observations ajoutées -->
 495 
			<!-- Affiche le tableau récapitualif des observations ajoutées -->
484 
			<div id="zone-liste-obs" class="row-fluid">
 496 
			<div id="zone-liste-obs" class="row-fluid">
485 
				<div class="span12">
 497 
				<div class="span12">
486 
					<div class="well">
 498 
					<div class="well">
487 
						<div class="row-fluid">
 499 
						<div class="row-fluid">
488 
							<div class="span8">
 500 
							<div class="span8">
489 
								<h2>Observations à transmettre : <span class="obs-nbre">0</span></h2>
 501 
								<h2>Observations à transmettre : <span class="obs-nbre">0</span></h2>
490 
							</div>
 502 
							</div>
491 
							<div class="span4 droite">
 503 
							<div class="span4 droite">
492 
								<button id="transmettre-obs" class="btn btn-primary btn-large"
 504 
								<button id="transmettre-obs" class="btn btn-primary btn-large"
493 
									type="button" disabled="disabled" rel="tooltip"
 505 
									type="button" disabled="disabled" rel="tooltip"
494 
									title="Ajoute les observations ci-dessous à votre Carnet en Ligne et les rend publiques.">
 506 
									title="Ajoute les observations ci-dessous à votre Carnet en Ligne et les rend publiques.">
495 
									Transmettre
 507 
									Transmettre
496 
								</button>
 508 
								</button>
497 
							</div>
 509 
							</div>
498 
						</div>
 510 
						</div>
499 
						<div id="liste-obs" ></div>
 511 
						<div id="liste-obs" ></div>
500 
						<div class="row">
 512 
						<div class="row">
501 
							<div class="zone-alerte span6 offset3">
 513 
							<div class="zone-alerte span6 offset3">
502 
								<div id="dialogue-zero-obs" class="alert alert-block" style="display: none;">
 514 
								<div id="dialogue-zero-obs" class="alert alert-block" style="display: none;">
503 
									<a class="close">×</a>
 515 
									<a class="close">×</a>
504 
									<h4 class="alert-heading">Attention : aucune observation</h4>
 516 
									<h4 class="alert-heading">Attention : aucune observation</h4>
505 
									<p>Veuillez saisir des observations pour les transmettres.</p>
 517 
									<p>Veuillez saisir des observations pour les transmettres.</p>
506 
								</div>
 518 
								</div>
507 
 
 519 
 
508 
								<div id="dialogue-obs-transaction-ok" class="alert alert-success alert-block" style="display: none;"">
 520 
								<div id="dialogue-obs-transaction-ok" class="alert alert-success alert-block" style="display: none;"">
509 
									<a class="close">×</a>
 521 
									<a class="close">×</a>
510 
									<h4 class="alert-heading">Information : transmission des observations</h4>
 522 
									<h4 class="alert-heading">Information : transmission des observations</h4>
511 
									<div class="alert-txt"></div>
 523 
									<div class="alert-txt"></div>
512 
								</div>
 524 
								</div>
513 
 
 525 
 
514 
								<div id="dialogue-obs-transaction-ko" class="alert alert-error alert-block" style="display: none;">
 526 
								<div id="dialogue-obs-transaction-ko" class="alert alert-error alert-block" style="display: none;">
515 
									<a class="close">×</a>
 527 
									<a class="close">×</a>
516 
									<h4 class="alert-heading">Erreur : transmission des observations</h4>
 528 
									<h4 class="alert-heading">Erreur : transmission des observations</h4>
517 
									<div class="alert-txt"></div>
 529 
									<div class="alert-txt"></div>
518 
								</div>
 530 
								</div>
519 
							</div>
 531 
							</div>
520 
						</div>
 532 
						</div>
521 
 
 533 
 
522 
					</div>
 534 
					</div>
523 
				</div>
 535 
				</div>
524 
			</div>
 536 
			</div>
525 
 
 537 
 
526 
			<footer class="row-fluid">
 538 
			<footer class="row-fluid">
527 
				<p class="span12">&copy; Tela Botanica 2012</p>
 539 
				<p class="span12">&copy; Tela Botanica 2012</p>
528 
			</footer>
 540 
			</footer>
529 
 
 541 
 
530 
			<!-- Fenêtres modales -->
 542 
			<!-- Fenêtres modales -->
531 
			<div id="chargement" class="modal-fenetre" style="display:none;">
 543 
			<div id="chargement" class="modal-fenetre" style="display:none;">
532 
				<div id="chargement-centrage" class="modal-contenu">
 544 
				<div id="chargement-centrage" class="modal-contenu">
533 
					<div class="progress progress-striped active">
 545 
					<div class="progress progress-striped active">
534 
			 			<div id="barre-progression-upload" class="bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="10" style="">
 546 
			 			<div id="barre-progression-upload" class="bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="10" style="">
535 
			    			<span class="sr-only">0/10 observations transmises</span>
 547 
			    			<span class="sr-only">0/10 observations transmises</span>
536 
			  			</div>
 548 
			  			</div>
537 
					</div>
 549 
					</div>
538 
					<p id="chargement-txt" style="color:white;font-size:1.5em;">
 550 
					<p id="chargement-txt" style="color:white;font-size:1.5em;">
539 
						Transfert des observations en cours...<br />
 551 
						Transfert des observations en cours...<br />
540 
						Cela peut prendre plusieurs minutes en fonction de la taille des images et du nombre
 552 
						Cela peut prendre plusieurs minutes en fonction de la taille des images et du nombre
541 
						d'observations à transférer.
 553 
						d'observations à transférer.
542 
					</p>
 554 
					</p>
543 
				</div>
 555 
				</div>
544 
			</div>
 556 
			</div>
545 
 
 557 
 
546 
			<!-- Templates HTML -->
 558 
			<!-- Templates HTML -->
547 
			<div id="tpl-transmission-ok" style="display:none;">
 559 
			<div id="tpl-transmission-ok" style="display:none;">
548 
				<p class="msg">
 560 
				<p class="msg">
549 
					Vos observations ont bien été transmises.<br />
 561 
					Vos observations ont bien été transmises.<br />
550 
					Elles sont désormais consultables à travers les différents outils de visualisation
 562 
					Elles sont désormais consultables à travers les différents outils de visualisation
551 
					du réseau (<a href="http://www.tela-botanica.org/site:botanique">eFlore</a>,
 563 
					du réseau (<a href="http://www.tela-botanica.org/site:botanique">eFlore</a>,
552 
					<a href="http://www.tela-botanica.org/page:cel_galerie">galeries d'images</a>,
 564 
					<a href="http://www.tela-botanica.org/page:cel_galerie">galeries d'images</a>,
553 
					<a href="http://www.tela-botanica.org/appli:test:del">identiplante</a>,
 565 
					<a href="http://www.tela-botanica.org/appli:test:del">identiplante</a>,
554 
					<a href="http://www.tela-botanica.org/widget:cel:cartoPoint">cartographie (widget)</a>...)<br />
 566 
					<a href="http://www.tela-botanica.org/widget:cel:cartoPoint">cartographie (widget)</a>...)<br />
555 
					Si vous souhaitez les modifier ou les supprimer, vous pouvez les retrouver en vous
 567 
					Si vous souhaitez les modifier ou les supprimer, vous pouvez les retrouver en vous
556 
					connectant à votre <a href="http://www.tela-botanica.org/appli:cel">Carnet en ligne</a>.<br />
 568 
					connectant à votre <a href="http://www.tela-botanica.org/appli:cel">Carnet en ligne</a>.<br />
557 
					N'oubliez pas qu'il est nécessaire de
 569 
					N'oubliez pas qu'il est nécessaire de
558 
					<a href="http://www.tela-botanica.org/page:inscription">s'inscrire à Tela Botanica</a>
 570 
					<a href="http://www.tela-botanica.org/page:inscription">s'inscrire à Tela Botanica</a>
559 
					au préalable, si ce n'est pas déjà fait.
 571 
					au préalable, si ce n'est pas déjà fait.
560 
				</p>
 572 
				</p>
561 
			</div>
 573 
			</div>
562 
			<div id="tpl-transmission-ko" style="display:none;">
 574 
			<div id="tpl-transmission-ko" style="display:none;">
563 
				<p class="msg">
 575 
				<p class="msg">
564 
					Une erreur est survenue lors de la transmission d'une observation (indiquée en rouge).<br />
 576 
					Une erreur est survenue lors de la transmission d'une observation (indiquée en rouge).<br />
565 
					Vous pouvez tenter de la retransmettre en cliquant à nouveau sur le bouton transmettre ou bien la supprimer
 577 
					Vous pouvez tenter de la retransmettre en cliquant à nouveau sur le bouton transmettre ou bien la supprimer
566 
					et transmettre les suivantes.<br />
 578 
					et transmettre les suivantes.<br />
567 
					Néanmoins, les observations n'apparaissant plus dans la liste "observations à transmettre", ont bien été transmises lors de votre précédente tentative. <br />
 579 
					Néanmoins, les observations n'apparaissant plus dans la liste "observations à transmettre", ont bien été transmises lors de votre précédente tentative. <br />
568 
					Si le problème persiste, vous pouvez signaler le dysfonctionnement sur
 580 
					Si le problème persiste, vous pouvez signaler le dysfonctionnement sur
569 
					<a href="<?= $url_remarques ?>?service=cel&pageSource=<?php echo urlencode('http://'.$_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF'].'?'.$_SERVER['QUERY_STRING']); ?>"
 581 
					<a href="<?= $url_remarques ?>?service=cel&pageSource=<?php echo urlencode('http://'.$_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF'].'?'.$_SERVER['QUERY_STRING']); ?>"
570 
								  target="_blank"
 582 
								  target="_blank"
571 
								  onclick="javascript:window.open(this.getAttribute('href'), 'Tela Botanica - Remarques', config='height=700, width=640, scrollbars=yes, resizable=yes'); return false;">
 583 
								  onclick="javascript:window.open(this.getAttribute('href'), 'Tela Botanica - Remarques', config='height=700, width=640, scrollbars=yes, resizable=yes'); return false;">
572 
								  le formulaire de signalement d'erreurs</a>.
 584 
								  le formulaire de signalement d'erreurs</a>.
573 
				</p>
 585 
				</p>
574 
			</div>
 586 
			</div>
575 
 
 - 
 
576 
			<!-- Stats : Google Analytics-->
 - 
 
577 
			<script type="text/javascript">
 - 
 
578 
				//<![CDATA[
 - 
 
579 
				var _gaq = _gaq || [];
 - 
 
580 
				_gaq.push(['_setAccount', 'UA-20092557-1']);
 - 
 
581 
				_gaq.push(['_trackPageview']);
 - 
 
582 
 
 - 
 
583 
				(function() {
 - 
 
584 
				  var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
 - 
 
585 
				  ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
 - 
 
586 
				  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
 - 
 
587 
				})();
 - 
 
588 
				//]]>
 - 
 
589 
			</script>
 - 
 
590 
		</div>
 587 
		</div>
591 
	</body>
 588 
	</body>
592 
</html>
 589 
</html>