Subversion Repositories eFlore/Applications.cel

Rev

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

Rev 1828 Rev 1829
1 
<!DOCTYPE html>
 1 
<!DOCTYPE html>
2 
<html lang="fr" manifest="mobile.appcache">
2 
<html lang="fr" manifest="mobile.appcache">
3 
	<head>
 3 
	<head>
4 
		<base href="http://www.tela-botanica.org/eflore/cel/widget/modules/saisie/squelettes/mobile/"/>
 4 
		<base href="http://www.tela-botanica.org/eflore/cel/widget/modules/saisie/squelettes/mobile/"/>
5 
		<title>CEL Mobile</title>
5 
		<title>CEL Mobile</title>
6
6
7 
		<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
 7 
		<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
8 
		<meta http-equiv="Content-style-type" content="text/css" />
 8 
		<meta http-equiv="Content-style-type" content="text/css" />
9 
		<meta http-equiv="Content-script-type" content="text/javascript" />
 9 
		<meta http-equiv="Content-script-type" content="text/javascript" />
10 
		<meta http-equiv="Content-language" content="fr" />
 10 
		<meta http-equiv="Content-language" content="fr" />
11
11
12 
		<meta name="revisit-after" content="15 days" />
 12 
		<meta name="revisit-after" content="15 days" />
13 
        <meta name="robots" content="index,follow" />
 13 
		<meta name="robots" content="index,follow" />
14 
        <meta name="author" content="Jean-Pascal MILCENT, Isabelle NEMBROT" />
 14 
		<meta name="author" content="Jean-Pascal MILCENT, Isabelle NEMBROT" />
15 
        <meta name="keywords" content="Tela Botanica, CEL, mobile" />
 15 
		<meta name="keywords" content="Tela Botanica, CEL, mobile" />
16 
        <meta name="description" content="Widget de saisie du CEL pour smartphone" />
 16 
		<meta name="description" content="Widget de saisie du CEL pour smartphone" />
17
17
18 
		<!-- Favicones -->
 18 
		<!-- Favicones -->
19 
		<link rel="shortcut icon" type="image/x-icon" href="http://www.tela-botanica.org/favicon.ico" />
 19 
		<link rel="shortcut icon" type="image/x-icon" href="http://www.tela-botanica.org/favicon.ico" />
20
20
21 
		<!-- Viewport -->
 21 
		<!-- Viewport -->
22 
		<meta name="viewport" content="width=device-width, initial-scale=1">
22 
		<meta name="viewport" content="width=device-width, initial-scale=1">
23 
		<meta name="apple-mobile-web-app-capable" content="yes" />
 23 
		<meta name="apple-mobile-web-app-capable" content="yes" />
24 
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
 24 
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
25
25
26 
		<!-- CSS -->
 26 
		<!-- CSS -->
27 
		<link rel="stylesheet" href="http://www.tela-botanica.org/commun/jquery/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
 27 
		<link rel="stylesheet" href="http://www.tela-botanica.org/commun/jquery/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
28 
		<link href="http://www.tela-botanica.org/eflore/cel/widget/modules/saisie/squelettes/mobile/css/mobile.css" rel="stylesheet" type="text/css" media="screen" />
 28 
		<link href="http://www.tela-botanica.org/eflore/cel/widget/modules/saisie/squelettes/mobile/css/mobile.css" rel="stylesheet" type="text/css" media="screen" />
29
29
30 
		<!-- Javascript -->
 30 
		<!-- Javascript -->
31 
		<script src="http://www.tela-botanica.org/commun/jquery/1.7.1/jquery-1.7.1.min.js"></script>
 31 
		<script src="http://www.tela-botanica.org/commun/jquery/1.7.1/jquery-1.7.1.min.js"></script>
32
32
33 
		<!-- Javascript : appli saisie -->
 33 
		<!-- Javascript : appli saisie -->
34 
		<script type="text/javascript">
 34 
		<script type="text/javascript">
35 
		//<![CDATA[
 35 
		//<![CDATA[
36 
			// Nombre d'observations max autorisé avant transmission
 36 
			// Nombre d'observations max autorisé avant transmission
37 
			var OBS_MAX_NBRE = 10;
 37 
			var OBS_MAX_NBRE = 10;
38 
			// Délai d'attente avant de lancer la recherche des noms latins en ms
 38 
			// Délai d'attente avant de lancer la recherche des noms latins en ms
39 
			var DELAI_RECHERCHE = 500;
 39 
			var DELAI_RECHERCHE = 500;
40 
			// Mot-clé du widget/projet
 40 
			// Mot-clé du widget/projet
41 
			var TAG_PROJET = "WidgetSaisie";
 41 
			var TAG_PROJET = "WidgetSaisie";
- 
 
 42 
			// Code du référentiel utilisé pour les nom scientifiques (de la forme nom:code).
- 
 
 43 
			var NOM_SCI_REFERENTIEL = "";
42 
			// URL du web service réalisant l'insertion des données dans la base du CEL.
 44 
			// URL du web service réalisant l'insertion des données dans la base du CEL.
43 
			var SERVICE_SAISIE_URL = "http://www.tela-botanica.org/service:cel:CelWidgetSaisie";
 45 
			var SERVICE_SAISIE_URL = "http://www.tela-botanica.org/service:cel:CelWidgetSaisie";
44 
			//var SERVICE_SAISIE_URL = "http://www.tela-botanica.org/test-service:cel:CelWidgetSaisie";
 46 
			//var SERVICE_SAISIE_URL = "http://www.tela-botanica.org/test-service:cel:CelWidgetSaisie";
45 
			// URL du web service annuaire des membres du réseau.
 47 
			// URL du web service annuaire des membres du réseau.
46 
			var SERVICE_ANNUAIRE = "http://www.tela-botanica.org/client/annuaire_nouveau/actuelle/jrest/utilisateur/identite-par-courriel/";
 48 
			var SERVICE_ANNUAIRE = "http://www.tela-botanica.org/client/annuaire_nouveau/actuelle/jrest/utilisateur/identite-par-courriel/";
47 
			// Squelette d'URL du web service d'eFlore fournissant les noms de communes.
 49 
			// Squelette d'URL du web service d'eFlore fournissant les noms de communes.
48 
			var SERVICE_NOM_COMMUNE_URL = "http://www.tela-botanica.org/service:eflore:0.1/osm/nom-commune?lon={lon}&lat={lat}";
 50 
			var SERVICE_NOM_COMMUNE_URL = "http://www.tela-botanica.org/service:eflore:0.1/osm/nom-commune?lon={lon}&lat={lat}";
49 
			// Texte en absence de connexion
 51 
			// Texte en absence de connexion
50 
			var TEXTE_HORS_LIGNE = 'Aucune connexion.';
 52 
			var TEXTE_HORS_LIGNE = 'Aucune connexion.';
51 
			// Texte en absence de compte
 53 
			// Texte en absence de compte
52 
			var TEXTE_NON_COMPTE = 'Aucun compte enregistré.';
 54 
			var TEXTE_NON_COMPTE = 'Aucun compte enregistré.';
53 
			// Texte en presence de compte
 55 
			// Texte en presence de compte
54 
			var TEXTE_OUI_COMPTE = 'Ajouter au compte ';
 56 
			var TEXTE_OUI_COMPTE = 'Ajouter au compte ';
55 
			// Texte d'identification des observations
 57 
			// Texte d'identification des observations
56 
			var TEXTE_OBS = 'obsId';
 58 
			var TEXTE_OBS = 'obsId';
57 
			// Texte d'identification des photos
 59 
			// Texte d'identification des photos
58 
			var TEXTE_PHOTO = 'photoId';
 60 
			var TEXTE_PHOTO = 'photoId';
59 
		//]]>
 61 
		//]]>
60 
		</script>
 62 
		</script>
61 
		<script type="text/javascript" src="js/mobile.js"></script>
 63 
		<script type="text/javascript" src="js/mobile.js"></script>
62 
		<script type="text/javascript" src="js/bdtfx.js"></script>
 64 
		<script type="text/javascript" src="js/bdtfx.js"></script>
63
65
64 
		<!-- Javascript : Jquery Mobile -->
 66 
		<!-- Javascript : Jquery Mobile -->
65 
		<script src="http://www.tela-botanica.org/commun/jquery/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
 67 
		<script src="http://www.tela-botanica.org/commun/jquery/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
66 
	</head>
 68 
	</head>
67
69
68
70
69 
	<body data-theme="b">
 71 
	<body data-theme="b">
70 
		<div id="menu" data-role="page"> <!--data-add-back-btn="true" data-back-btn-text="Retour"-->
 72 
		<div id="menu" data-role="page"> <!--data-add-back-btn="true" data-back-btn-text="Retour"-->
71 
			<div data-role="header">
 73 
			<div data-role="header">
72 
				<h1>Accueil</h1>
 74 
				<h1>Accueil</h1>
73 
				<a href="#infos" data-icon="info" data-iconpos="notext" class="ui-btn-right">Infos</a>
 75 
				<a href="#infos" data-icon="info" data-iconpos="notext" class="ui-btn-right">Infos</a>
74 
			</div>
 76 
			</div>
75 
			<div data-role="content" data-theme="g">
 77 
			<div data-role="content" data-theme="g">
76 
				<p class="center">
78 
				<p class="center">
77 
					Bienvenue sur le Carnet En Ligne mobile ! <br />
 79 
					Bienvenue sur le Carnet En Ligne mobile ! <br />
78 
				</p>
 80 
				</p>
79 
				<ul data-role="listview">
 81 
				<ul data-role="listview">
80 
					<li>
 82 
					<li>
81 
						<img src="http://www.tela-botanica.org/commun/icones/glyphish/187-pencil.png" class="ui-li-icon"/>
 83 
						<img src="http://www.tela-botanica.org/commun/icones/glyphish/187-pencil.png" class="ui-li-icon"/>
82 
						<a href="#saisie" class="saisie" data-role="button">1 - Saisir une observation</a>
 84 
						<a href="#saisie" class="saisie" data-role="button">1 - Saisir une observation</a>
83 
					</li>
 85 
					</li>
84 
					<li>
 86 
					<li>
85 
						<img src="http://www.tela-botanica.org/commun/icones/glyphish/179-notepad.png" class="ui-li-icon"/>
 87 
						<img src="http://www.tela-botanica.org/commun/icones/glyphish/179-notepad.png" class="ui-li-icon"/>
86 
						<a href="#liste" data-role="button">2 - Voir mes observations</a>
 88 
						<a href="#liste" data-role="button">2 - Voir mes observations</a>
87 
					</li>
 89 
					</li>
88 
					<li>
 90 
					<li>
89 
						<img src="http://www.tela-botanica.org/commun/icones/glyphish/56-cloud.png" class="ui-li-icon"/>
 91 
						<img src="http://www.tela-botanica.org/commun/icones/glyphish/56-cloud.png" class="ui-li-icon"/>
90 
						<a href="#transmission" data-role="button">3 - Transmettre mes observations</a>
 92 
						<a href="#transmission" data-role="button">3 - Transmettre mes observations</a>
91 
					</li>
 93 
					</li>
92 
					<li></li>
 94 
					<li></li>
93 
				</ul>
 95 
				</ul>
94 
			</div>
 96 
			</div>
95 
			<div data-role="footer" data-position="fixed"></div>
 97 
			<div data-role="footer" data-position="fixed"></div>
96 
		</div>
 98 
		</div>
97 
 
 99 
 
98 
		<div id="saisie" data-role="page">
 100 
		<div id="saisie" data-role="page">
99 
			<div data-role="header" data-position="inline">
 101 
			<div data-role="header" data-position="inline">
100 
				<a href="#menu" data-icon="home" data-iconpos="notext" data-direction="reverse">Accueil</a>
 102 
				<a href="#menu" data-icon="home" data-iconpos="notext" data-direction="reverse">Accueil</a>
101 
				<h1>Saisie</h1>
 103 
				<h1>Saisie</h1>
102 
				<a href="#infos" data-icon="info" data-iconpos="notext" class="ui-btn-right">Infos</a>
 104 
				<a href="#infos" data-icon="info" data-iconpos="notext" class="ui-btn-right">Infos</a>
103 
			</div>
 105 
			</div>
104 
			<form id="form-saisie-observation" method="post" action="#">
 106 
			<form id="form-saisie-observation" method="post" action="#">
105 
				<div data-role="content">
 107 
				<div data-role="content">
106 
					<div id="obs-saisie-infos"></div>
 108 
					<div id="obs-saisie-infos"></div>
107 
					<div data-role="fieldcontain">
 109 
					<div data-role="fieldcontain">
108 
						<label for="nom">Espèce : </label>
 110 
						<label for="nom">Espèce : </label>
109 
						<span id="nom"></span>
 111 
						<span id="nom"></span>
110
112
111 
						<br />
 113 
						<br />
112 
						<a href="#saisie-popup" id="saisie-popup-btn"
 114 
						<a href="#saisie-popup" id="saisie-popup-btn"
113 
								data-role="button" data-icon="search" data-iconpos="right"
115 
								data-role="button" data-icon="search" data-iconpos="right"
114 
								data-rel="dialog" data-transition="pop" data-theme="b">
 116 
								data-rel="dialog" data-transition="pop" data-theme="b">
115 
							Changer l'espèce
 117 
							Changer l'espèce
116 
						</a>
 118 
						</a>
117 
						<hr />
 119 
						<hr />
118 
 
 120 
 
119 
						<label for="date">
 121 
						<label for="date">
120 
							Date :
 122 
							Date :
121 
							<span id="date"></span>
 123 
							<span id="date"></span>
122 
						</label>
 124 
						</label>
123 
						<hr />
 125 
						<hr />
124
126
125 
						<button id="geolocaliser"
127 
						<button id="geolocaliser"
126 
								data-role="button" data-icon="refresh" data-iconpos="" data-ajax="false">
 128 
								data-role="button" data-icon="refresh" data-iconpos="" data-ajax="false">
127 
							Recalculer ma position
 129 
							Recalculer ma position
128 
						</button>
 130 
						</button>
129
131
130 
						<label for="lat">
 132 
						<label for="lat">
131 
							Latitude :
 133 
							Latitude :
132 
							<span id="lat"></span>
 134 
							<span id="lat"></span>
133 
						</label>
 135 
						</label>
134
136
135 
						<br />
 137 
						<br />
136 
						<label for="lng">
 138 
						<label for="lng">
137 
							Longitude :
 139 
							Longitude :
138 
							<span id="lng"></span>
 140 
							<span id="lng"></span>
139 
						</label>
 141 
						</label>
140
142
141 
						<br />
 143 
						<br />
142 
						<label for="location">
 144 
						<label for="location">
143 
							Commune :
 145 
							Commune :
144 
							<span id="location"></span>
 146 
							<span id="location"></span>
145 
							<input id="code-insee" type="hidden" name="code-insee" />
 147 
							<input id="code-insee" type="hidden" name="code-insee" />
146 
						</label>
 148 
						</label>
147
149
148 
						<br />
 150 
						<br />
149 
						<hr />
 151 
						<hr />
150 
						<button id="sauver-obs" data-role="button" data-icon="check">Sauver</button>
 152 
						<button id="sauver-obs" data-role="button" data-icon="check">Sauver</button>
151
153
152 
						<input id="referentiel" type="hidden" name="referentiel" />
 154 
						<input id="referentiel" type="hidden" name="referentiel" />
153 
						<input id="nom-sci-select" type="hidden" name="nom-sci-select" />
 155 
						<input id="nom-sci-select" type="hidden" name="nom-sci-select" />
154 
						<input id="num-nom-select" type="hidden" name="num-nom-select" />
 156 
						<input id="num-nom-select" type="hidden" name="num-nom-select" />
155 
					</div>
 157 
					</div>
156 
				</div>
 158 
				</div>
157 
				<div data-role="footer" data-position="fixed">
 159 
				<div data-role="footer" data-position="fixed">
158 
					<div data-role="navbar">
 160 
					<div data-role="navbar">
159 
						<ul>
 161 
						<ul>
160 
							<li><a href="#liste" data-role="button" data-icon="notepad" data-iconpos="notext">Liste de mes obs.</a></li>
 162 
							<li><a href="#liste" data-role="button" data-icon="notepad" data-iconpos="notext">Liste de mes obs.</a></li>
161 
							<li><a href="#transmission" data-role="button" data-icon="cloud" data-iconpos="notext">Transmission</a></li>
 163 
							<li><a href="#transmission" data-role="button" data-icon="cloud" data-iconpos="notext">Transmission</a></li>
162 
						</ul>
 164 
						</ul>
163 
					</div>
 165 
					</div>
164 
				</div>
 166 
				</div>
165 
			</form>
 167 
			</form>
166 
		</div>
 168 
		</div>
167
169
168 
		<div id="saisie-popup" data-role="page" data-history="false" data-close-btn="right">
 170 
		<div id="saisie-popup" data-role="page" data-history="false" data-close-btn="right">
169 
			<div data-role="header">
 171 
			<div data-role="header">
170 
				<h1></h1>
 172 
				<h1></h1>
171 
			</div>
 173 
			</div>
172 
			<div data-role="content">
 174 
			<div data-role="content">
173 
				<ul id="liste-noms-latins" data-role="listview"
175 
				<ul id="liste-noms-latins" data-role="listview"
174 
					data-inset="true" data-filter="true" data-filter-reveal="true"
176 
					data-inset="true" data-filter="true" data-filter-reveal="true"
175 
					data-filter-placeholder="Trouver une espèce...">
 177 
					data-filter-placeholder="Trouver une espèce...">
176 
				</ul>
 178 
				</ul>
177 
				<div class="hidden">
 179 
				<div class="hidden">
178 
					<button id="recherche-chargement" data-theme="a" data-textonly="true" data-textvisible="true" data-msgtext="Chargement des résultats..." ></button>
 180 
					<button id="recherche-chargement" data-theme="a" data-textonly="true" data-textvisible="true" data-msgtext="Chargement des résultats..." ></button>
179 
				</div>
 181 
				</div>
180 
			</div>
 182 
			</div>
181 
		</div>
 183 
		</div>
182
184
183 
		<div id="liste" data-role="page">
 185 
		<div id="liste" data-role="page">
184 
			<div data-role="header" data-position="inline">
 186 
			<div data-role="header" data-position="inline">
185 
				<a href="#menu" data-icon="home" data-iconpos="notext" data-direction="reverse">Accueil</a>
 187 
				<a href="#menu" data-icon="home" data-iconpos="notext" data-direction="reverse">Accueil</a>
186 
				<h1>Observations</h1>
 188 
				<h1>Observations</h1>
187 
				<a href="#infos" data-icon="info" data-iconpos="notext" class="ui-btn-right">Infos</a>
 189 
				<a href="#infos" data-icon="info" data-iconpos="notext" class="ui-btn-right">Infos</a>
188 
			</div>
 190 
			</div>
189 
			<div data-role="content">
 191 
			<div data-role="content">
190 
				<div id="obs-suppression-infos"></div>
 192 
				<div id="obs-suppression-infos"></div>
191 
				<ul id="liste-obs" data-role="listview" data-split-icon="delete" data-split-theme="g" data-theme="g" data-inset="true"></ul>
 193 
				<ul id="liste-obs" data-role="listview" data-split-icon="delete" data-split-theme="g" data-theme="g" data-inset="true"></ul>
192 
			</div>
 194 
			</div>
193 
			<div data-role="footer" data-position="fixed">
 195 
			<div data-role="footer" data-position="fixed">
194 
				<div data-role="navbar">
 196 
				<div data-role="navbar">
195 
					<ul>
 197 
					<ul>
196 
						<li><a href="#saisie" class="saisie" data-role="button" data-icon="pencil" data-iconpos="notext">Saisie</a></li>
 198 
						<li><a href="#saisie" class="saisie" data-role="button" data-icon="pencil" data-iconpos="notext">Saisie</a></li>
197 
						<li><a href="#transmission" data-role="button" data-icon="cloud" data-iconpos="notext">Transmission</a></li>
 199 
						<li><a href="#transmission" data-role="button" data-icon="cloud" data-iconpos="notext">Transmission</a></li>
198 
					</ul>
 200 
					</ul>
199 
				</div>
 201 
				</div>
200 
			</div>
 202 
			</div>
201 
		</div>
 203 
		</div>
202
204
203 
		<div id="observation" data-role="page">
 205 
		<div id="observation" data-role="page">
204 
			<div data-role="header" data-position="inline">
 206 
			<div data-role="header" data-position="inline">
205 
				<a href="#menu" data-icon="home" data-iconpos="notext" data-direction="reverse">Accueil</a>
 207 
				<a href="#menu" data-icon="home" data-iconpos="notext" data-direction="reverse">Accueil</a>
206 
				<h1>Détails de l'observation</h1>
 208 
				<h1>Détails de l'observation</h1>
207 
				<a href="#liste" data-icon="notepad" data-iconpos="notext" ></a>
 209 
				<a href="#liste" data-icon="notepad" data-iconpos="notext" ></a>
208 
			</div>
 210 
			</div>
209 
			<div data-role="content">
 211 
			<div data-role="content">
210 
				<label for="id-obs">Identifiant :</label> <span id="id-obs"></span>
 212 
				<label for="id-obs">Identifiant :</label> <span id="id-obs"></span>
211 
				<div id="details-obs"></div>
 213 
				<div id="details-obs"></div>
212
214
213 
				<input type="file" id="pic" name="photos-obs[]" accept="image/*" multiple>
 215 
				<input type="file" id="pic" name="photos-obs[]" accept="image/*" multiple>
214 
				<button id="valider-photos"
 216 
				<button id="valider-photos"
215 
						data-role="button" data-icon="search" data-iconpos="" data-ajax="false">
 217 
						data-role="button" data-icon="search" data-iconpos="" data-ajax="false">
216 
					Ajouter les images sélectionnées
 218 
					Ajouter les images sélectionnées
217 
				</button>
 219 
				</button>
218 
 
 220 
 
219 
				<div data-role="popup" id="cache-plein" class="ui-content" data-position-to="#valider-photos">
 221 
				<div data-role="popup" id="cache-plein" class="ui-content" data-position-to="#valider-photos">
220 
					<a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
 222 
					<a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
221 
					<p>
 223 
					<p>
222 
						La mémoire de cette application est pleine. <br />
 224 
						La mémoire de cette application est pleine. <br />
223 
						Veuillez supprimer des images ou transmettre vos observations.
 225 
						Veuillez supprimer des images ou transmettre vos observations.
224 
					</p>
 226 
					</p>
225 
				</div>
 227 
				</div>
226
228
227 
				<div data-role="popup" id="photo-zoom" class="ui-content">
 229 
				<div data-role="popup" id="photo-zoom" class="ui-content">
228 
					<span id="photo-zoom-infos"></span>
 230 
					<span id="photo-zoom-infos"></span>
229 
					<button data-role="button" data-theme="a" onclick="$('#photo-zoom').popup('close');">
 231 
					<button data-role="button" data-theme="a" onclick="$('#photo-zoom').popup('close');">
230 
						Fermer cet aperçu
 232 
						Fermer cet aperçu
231 
					</button>
 233 
					</button>
232 
				</div>
 234 
				</div>
233
235
234 
				<div id="photo-suppression-infos"></div>
 236 
				<div id="photo-suppression-infos"></div>
235 
				<ul id="photos-obs" data-role="listview" data-inset="true"></ul>
 237 
				<ul id="photos-obs" data-role="listview" data-inset="true"></ul>
236 
				<canvas id="photo-canvas" class="hidden"></canvas>
 238 
				<canvas id="photo-canvas" class="hidden"></canvas>
237 
			</div>
 239 
			</div>
238 
			<div data-role="footer" data-position="fixed">
 240 
			<div data-role="footer" data-position="fixed">
239 
				<div data-role="navbar">
 241 
				<div data-role="navbar">
240 
					<ul>
 242 
					<ul>
241 
						<li><a href="#saisie" class="saisie" data-role="button" data-icon="pencil" data-iconpos="notext">Saisie</a></li>
 243 
						<li><a href="#saisie" class="saisie" data-role="button" data-icon="pencil" data-iconpos="notext">Saisie</a></li>
242 
						<li><a href="#liste" data-role="button" data-icon="notepad" data-iconpos="notext">Liste de mes obs.</a></li>
 244 
						<li><a href="#liste" data-role="button" data-icon="notepad" data-iconpos="notext">Liste de mes obs.</a></li>
243 
					</ul>
 245 
					</ul>
244 
				</div>
 246 
				</div>
245 
			</div>
 247 
			</div>
246 
		</div>
 248 
		</div>
247
249
248 
		<div id="transmission" data-role="page">
 250 
		<div id="transmission" data-role="page">
249 
			<div data-role="header">
 251 
			<div data-role="header">
250 
				<a href="#menu" data-icon="home" data-iconpos="notext" data-direction="reverse">Accueil</a>
 252 
				<a href="#menu" data-icon="home" data-iconpos="notext" data-direction="reverse">Accueil</a>
251 
				<h1>Transmission</h1>
 253 
				<h1>Transmission</h1>
252 
				<a href="#infos" data-icon="info" data-iconpos="notext" class="ui-btn-right">Infos</a>
 254 
				<a href="#infos" data-icon="info" data-iconpos="notext" class="ui-btn-right">Infos</a>
253 
			</div>
 255 
			</div>
254 
			<div data-role="content" data-theme="d">
256 
			<div data-role="content" data-theme="d">
255 
				<p>
 257 
				<p>
256 
					<span id="identification-texte">
 258 
					<span id="identification-texte">
257 
						Ajouter au compte
 259 
						Ajouter au compte
258 
					</span>
 260 
					</span>
259 
					<strong><span id="utilisateur-compte"></span></strong>
 261 
					<strong><span id="utilisateur-compte"></span></strong>
260 
				</p>
 262 
				</p>
261 
				<a href="#identification-popup" id="identification-btn"
 263 
				<a href="#identification-popup" id="identification-btn"
262 
					data-role="button" data-icon="grid" data-iconpos="right"
264 
					data-role="button" data-icon="grid" data-iconpos="right"
263 
					data-rel="dialog" data-transition="pop" data-theme="b">
 265 
					data-rel="dialog" data-transition="pop" data-theme="b">
264 
						Modifier le compte
 266 
						Modifier le compte
265 
				</a>
267 
				</a>
266 
				<div id="identification-infos"></div>
 268 
				<div id="identification-infos"></div>
267 
				<hr />
 269 
				<hr />
268 
				<button data-role="button" data-icon="cloud-black" id="transmettre-obs" >
 270 
				<button data-role="button" data-icon="cloud-black" id="transmettre-obs" >
269 
					Transmettre
 271 
					Transmettre
270 
				</button>
272 
				</button>
271 
			</div>
 273 
			</div>
272 
			<div data-role="footer" data-position="fixed">
 274 
			<div data-role="footer" data-position="fixed">
273 
				<div data-role="navbar">
 275 
				<div data-role="navbar">
274 
					<ul>
 276 
					<ul>
275 
						<li><a href="#saisie" class="saisie" data-role="button" data-icon="pencil" data-iconpos="notext">Saisie</a></li>
 277 
						<li><a href="#saisie" class="saisie" data-role="button" data-icon="pencil" data-iconpos="notext">Saisie</a></li>
276 
						<li><a href="#liste" data-role="button" data-icon="notepad" data-iconpos="notext">Liste de mes obs.</a></li>
 278 
						<li><a href="#liste" data-role="button" data-icon="notepad" data-iconpos="notext">Liste de mes obs.</a></li>
277 
					</ul>
 279 
					</ul>
278 
				</div>
 280 
				</div>
279 
			</div>
 281 
			</div>
280 
		</div>
 282 
		</div>
281
283
282 
		<div id="identification-popup" data-role="page" data-history="false" data-close-btn="right">
 284 
		<div id="identification-popup" data-role="page" data-history="false" data-close-btn="right">
283 
			<div data-role="header">
 285 
			<div data-role="header">
284 
				<h1>Compte Tela Botanica</h1>
 286 
				<h1>Compte Tela Botanica</h1>
285 
			</div>
 287 
			</div>
286 
			<form id="form-transmission" method="post" action="#">
 288 
			<form id="form-transmission" method="post" action="#">
287 
				<div data-role="content">
 289 
				<div data-role="content">
288 
					<div data-role="fieldcontain">
290 
					<div data-role="fieldcontain">
289 
						<label for="courriel">Courriel * :</label>
 291 
						<label for="courriel">Courriel * :</label>
290 
						<input id="courriel" type="email" name="courriel"/>
 292 
						<input id="courriel" type="email" name="courriel"/>
291 
						<input id="id-utilisateur" name="id-utilisateur" type="hidden"/>
 293 
						<input id="id-utilisateur" name="id-utilisateur" type="hidden"/>
292
294
293 
						<button id="valider-courriel" data-role="button"
295 
						<button id="valider-courriel" data-role="button"
294 
							data-icon="forward" data-iconpos="">
 296 
							data-icon="forward" data-iconpos="">
295 
								Vérifier ce compte Tela
 297 
								Vérifier ce compte Tela
296 
						</button>
 298 
						</button>
297 
					</div>
 299 
					</div>
298 
					<div id="zone-courriel-confirmation" data-role="fieldcontain" class="hidden">
 300 
					<div id="zone-courriel-confirmation" data-role="fieldcontain" class="hidden">
299 
						<label for="courriel-confirmation">
 301 
						<label for="courriel-confirmation">
300 
							<strong class="obligatoire">*</strong> Courriel (confirmation) :
302 
							<strong class="obligatoire">*</strong> Courriel (confirmation) :
301 
						</label>
 303 
						</label>
302 
						<input id="courriel-confirmation" name="courriel-confirmation" type="text"/>
 304 
						<input id="courriel-confirmation" name="courriel-confirmation" type="text"/>
303 
					</div>
 305 
					</div>
304 
					<div id="zone-prenom-nom" data-role="fieldcontain" class="hidden">
 306 
					<div id="zone-prenom-nom" data-role="fieldcontain" class="hidden">
305 
						<div>
 307 
						<div>
306 
							<label for="nom">Nom :</label>
 308 
							<label for="nom">Nom :</label>
307 
							<input id="nom-utilisateur" name="nom" type="text"/>
 309 
							<input id="nom-utilisateur" name="nom" type="text"/>
308 
						</div>
 310 
						</div>
309
311
310 
						<div>
 312 
						<div>
311 
							<label for="prenom">Prénom :</label>
 313 
							<label for="prenom">Prénom :</label>
312 
							<input id="prenom-utilisateur" name="prenom" type="text"/>
 314 
							<input id="prenom-utilisateur" name="prenom" type="text"/>
313 
						</div>
 315 
						</div>
314 
					</div>
 316 
					</div>
315 
					<input type="checkbox" name="courriel-memoire" id="courriel-memoire" checked="checked">
 317 
					<input type="checkbox" name="courriel-memoire" id="courriel-memoire" checked="checked">
316 
					<label for="courriel-memoire">Se souvenir de moi</label>
 318 
					<label for="courriel-memoire">Se souvenir de moi</label>
317
319
318 
					<button id="valider-identification" data-role="button"
320 
					<button id="valider-identification" data-role="button"
319 
						data-icon="check" data-iconpos="right" data-theme="b">
 321 
						data-icon="check" data-iconpos="right" data-theme="b">
320 
							Valider le formulaire
 322 
							Valider le formulaire
321 
					</button>
 323 
					</button>
322 
				</div>
 324 
				</div>
323 
			</form>
 325 
			</form>
324 
			<div data-role="footer"></div>
 326 
			<div data-role="footer"></div>
325 
		</div><!-- /page popup -->
327 
		</div><!-- /page popup -->
326
328
327 
		<div id="infos" data-role="page" data-add-back-btn="true" data-back-btn-text="Retour">
 329 
		<div id="infos" data-role="page" data-add-back-btn="true" data-back-btn-text="Retour">
328 
			<div data-role="header">
 330 
			<div data-role="header">
329 
				<h1>Infos</h1>
 331 
				<h1>Infos</h1>
330 
			</div>
 332 
			</div>
331 
			<div data-role="content">
 333 
			<div data-role="content">
332 
				<p>
 334 
				<p>
333 
					Développement :
335 
					Développement :
334 
					<ul>
 336 
					<ul>
335 
						<li>Jean-Pascal MILCENT</li>
 337 
						<li>Jean-Pascal MILCENT</li>
336 
						<li>Isabelle NEMBROT</li>
 338 
						<li>Isabelle NEMBROT</li>
337 
					</ul>
 339 
					</ul>
338 
					sur une idée originale de Aurélien PERONNET.
 340 
					sur une idée originale de Aurélien PERONNET.
339 
				</p>
 341 
				</p>
340 
			</div>
 342 
			</div>
341 
			<div data-role="footer" data-position="fixed">
 343 
			<div data-role="footer" data-position="fixed">
342 
				<p class="center">
 344 
				<p class="center">
343 
					Icônes par <a href="http://glyphish.com">Joseph Wain - Glyphish</a>. <br />
 345 
					Icônes par <a href="http://glyphish.com">Joseph Wain - Glyphish</a>. <br />
344 
					© Copyright <span id="annee"></span> - <a href="http://www.tela-botanica.org/site:accueil">Tela Botanica</a>
 346 
					© Copyright <span id="annee"></span> - <a href="http://www.tela-botanica.org/site:accueil">Tela Botanica</a>
345 
				</p>
 347 
				</p>
346 
			</div>
 348 
			</div>
347 
		</div>
 349 
		</div>
348 
	</body>
 350 
	</body>
349 
</html>
 351 
</html>