Subversion Repositories eFlore/Applications.cel

Rev

Rev 2678 | Go to most recent revision | Details | Compare with Previous | Last modification | View Log | RSS feed

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