Subversion Repositories eFlore/Applications.cel

Rev

Details | 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>
2678 aurelien 40
 
41
 
42
		<script>
43
		  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
44
		  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
45
		  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
46
		  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
47
 
48
		  ga('create', 'UA-20092557-1', 'auto');
49
		  ga('require', 'displayfeatures');
50
		  ga('send', 'pageview');
51
 
52
		</script>
1244 jpm 53
	</head>
1552 isa 54
 
55
 
1244 jpm 56
	<body data-theme="b">
1733 isa 57
		<div id="menu" data-role="page"> <!--data-add-back-btn="true" data-back-btn-text="Retour"-->
1244 jpm 58
			<div data-role="header">
1552 isa 59
				<h1>Accueil</h1>
60
				<a href="#infos" data-icon="info" data-iconpos="notext" class="ui-btn-right">Infos</a>
1244 jpm 61
			</div>
62
			<div data-role="content" data-theme="g">
1733 isa 63
				<p class="center">
64
					Bienvenue sur le Carnet En Ligne mobile ! <br />
65
				</p>
1244 jpm 66
				<ul data-role="listview">
67
					<li>
68
						<img src="http://www.tela-botanica.org/commun/icones/glyphish/187-pencil.png" class="ui-li-icon"/>
1733 isa 69
						<a href="#saisie" class="saisie" data-role="button">1 - Saisir une observation</a>
1244 jpm 70
					</li>
71
					<li>
72
						<img src="http://www.tela-botanica.org/commun/icones/glyphish/179-notepad.png" class="ui-li-icon"/>
1733 isa 73
						<a href="#liste" data-role="button">2 - Voir mes observations</a>
1244 jpm 74
					</li>
75
					<li>
76
						<img src="http://www.tela-botanica.org/commun/icones/glyphish/56-cloud.png" class="ui-li-icon"/>
1733 isa 77
						<a href="#transmission" data-role="button">3 - Transmettre mes observations</a>
1244 jpm 78
					</li>
1733 isa 79
					<li></li>
1244 jpm 80
				</ul>
81
			</div>
1733 isa 82
			<div data-role="footer" data-position="fixed"></div>
1244 jpm 83
		</div>
1733 isa 84
 
1244 jpm 85
		<div id="saisie" data-role="page">
86
			<div data-role="header" data-position="inline">
87
				<a href="#menu" data-icon="home" data-iconpos="notext" data-direction="reverse">Accueil</a>
1733 isa 88
				<h1>Saisie</h1>
89
				<a href="#infos" data-icon="info" data-iconpos="notext" class="ui-btn-right">Infos</a>
1244 jpm 90
			</div>
1733 isa 91
			<form id="form-saisie-observation" method="post" action="#">
1244 jpm 92
				<div data-role="content">
1248 jpm 93
					<div id="obs-saisie-infos"></div>
1244 jpm 94
					<div data-role="fieldcontain">
1733 isa 95
						<label for="nom">Espèce : </label>
96
						<span id="nom"></span>
1244 jpm 97
 
1733 isa 98
						<br />
99
						<a href="#saisie-popup" id="saisie-popup-btn"
100
								data-role="button" data-icon="search" data-iconpos="right"
101
								data-rel="dialog" data-transition="pop" data-theme="b">
102
							Changer l'espèce
103
						</a>
104
						<hr />
105
 
106
						<label for="date">
107
							Date :
108
							<span id="date"></span>
109
						</label>
110
						<hr />
111
 
1552 isa 112
						<button id="geolocaliser"
1733 isa 113
								data-role="button" data-icon="refresh" data-iconpos="" data-ajax="false">
1552 isa 114
							Recalculer ma position
115
						</button>
1244 jpm 116
 
1552 isa 117
						<label for="lat">
118
							Latitude :
119
							<span id="lat"></span>
120
						</label>
1244 jpm 121
 
1552 isa 122
						<br />
123
						<label for="lng">
124
							Longitude :
125
							<span id="lng"></span>
126
						</label>
1244 jpm 127
 
1552 isa 128
						<br />
129
						<label for="location">
130
							Commune :
131
							<span id="location"></span>
1733 isa 132
							<input id="code-insee" type="hidden" name="code-insee" />
1552 isa 133
						</label>
134
 
135
						<br />
1733 isa 136
						<hr />
1552 isa 137
						<button id="sauver-obs" data-role="button" data-icon="check">Sauver</button>
138
 
1733 isa 139
						<input id="referentiel" type="hidden" name="referentiel" />
140
						<input id="nom-sci-select" type="hidden" name="nom-sci-select" />
141
						<input id="num-nom-select" type="hidden" name="num-nom-select" />
1244 jpm 142
					</div>
143
				</div>
144
				<div data-role="footer" data-position="fixed">
1552 isa 145
					<div data-role="navbar">
146
						<ul>
147
							<li><a href="#liste" data-role="button" data-icon="notepad" data-iconpos="notext">Liste de mes obs.</a></li>
148
							<li><a href="#transmission" data-role="button" data-icon="cloud" data-iconpos="notext">Transmission</a></li>
149
						</ul>
150
					</div>
1244 jpm 151
				</div>
152
			</form>
153
		</div>
154
 
1733 isa 155
		<div id="saisie-popup" data-role="page" data-history="false" data-close-btn="right">
156
			<div data-role="header">
157
				<h1></h1>
158
			</div>
159
			<div data-role="content">
160
				<ul id="liste-noms-latins" data-role="listview"
161
					data-inset="true" data-filter="true" data-filter-reveal="true"
162
					data-filter-placeholder="Trouver une espèce...">
163
				</ul>
164
				<div class="hidden">
165
					<button id="recherche-chargement" data-theme="a" data-textonly="true" data-textvisible="true" data-msgtext="Chargement des résultats..." ></button>
166
				</div>
167
			</div>
168
		</div>
1552 isa 169
 
1244 jpm 170
		<div id="liste" data-role="page">
171
			<div data-role="header" data-position="inline">
172
				<a href="#menu" data-icon="home" data-iconpos="notext" data-direction="reverse">Accueil</a>
173
				<h1>Observations</h1>
1733 isa 174
				<a href="#infos" data-icon="info" data-iconpos="notext" class="ui-btn-right">Infos</a>
1244 jpm 175
			</div>
176
			<div data-role="content">
1552 isa 177
				<div id="obs-suppression-infos"></div>
1733 isa 178
				<ul id="liste-obs" data-role="listview" data-split-icon="delete" data-split-theme="g" data-theme="g" data-inset="true"></ul>
1244 jpm 179
			</div>
180
			<div data-role="footer" data-position="fixed">
181
				<div data-role="navbar">
182
					<ul>
1552 isa 183
						<li><a href="#saisie" class="saisie" data-role="button" data-icon="pencil" data-iconpos="notext">Saisie</a></li>
1244 jpm 184
						<li><a href="#transmission" data-role="button" data-icon="cloud" data-iconpos="notext">Transmission</a></li>
185
					</ul>
186
				</div>
187
			</div>
188
		</div>
189
 
1552 isa 190
		<div id="observation" data-role="page">
191
			<div data-role="header" data-position="inline">
192
				<a href="#menu" data-icon="home" data-iconpos="notext" data-direction="reverse">Accueil</a>
193
				<h1>Détails de l'observation</h1>
1733 isa 194
				<a href="#liste" data-icon="notepad" data-iconpos="notext" ></a>
1552 isa 195
			</div>
196
			<div data-role="content">
1733 isa 197
				<label for="id-obs">Identifiant :</label> <span id="id-obs"></span>
198
				<div id="details-obs"></div>
1552 isa 199
 
1733 isa 200
				<input type="file" id="pic" name="photos-obs[]" accept="image/*" multiple>
201
				<button id="valider-photos"
1552 isa 202
						data-role="button" data-icon="search" data-iconpos="" data-ajax="false">
203
					Ajouter les images sélectionnées
204
				</button>
1733 isa 205
 
206
				<div data-role="popup" id="cache-plein" class="ui-content" data-position-to="#valider-photos">
207
					<a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
208
					<p>
209
						La mémoire de cette application est pleine. <br />
210
						Veuillez supprimer des images ou transmettre vos observations.
211
					</p>
212
				</div>
1552 isa 213
 
1733 isa 214
				<div data-role="popup" id="photo-zoom" class="ui-content">
215
					<span id="photo-zoom-infos"></span>
216
					<button data-role="button" data-theme="a" onclick="$('#photo-zoom').popup('close');">
217
						Fermer cet aperçu
218
					</button>
219
				</div>
220
 
1552 isa 221
				<div id="photo-suppression-infos"></div>
1733 isa 222
				<ul id="photos-obs" data-role="listview" data-inset="true"></ul>
223
				<canvas id="photo-canvas" class="hidden"></canvas>
1552 isa 224
			</div>
225
			<div data-role="footer" data-position="fixed">
226
				<div data-role="navbar">
227
					<ul>
228
						<li><a href="#saisie" class="saisie" data-role="button" data-icon="pencil" data-iconpos="notext">Saisie</a></li>
229
						<li><a href="#liste" data-role="button" data-icon="notepad" data-iconpos="notext">Liste de mes obs.</a></li>
230
					</ul>
231
				</div>
232
			</div>
233
		</div>
234
 
1244 jpm 235
		<div id="transmission" data-role="page">
236
			<div data-role="header">
237
				<a href="#menu" data-icon="home" data-iconpos="notext" data-direction="reverse">Accueil</a>
238
				<h1>Transmission</h1>
1733 isa 239
				<a href="#infos" data-icon="info" data-iconpos="notext" class="ui-btn-right">Infos</a>
1244 jpm 240
			</div>
1733 isa 241
			<div data-role="content" data-theme="d">
242
				<p>
243
					<span id="identification-texte">
244
						Ajouter au compte
245
					</span>
246
					<strong><span id="utilisateur-compte"></span></strong>
247
				</p>
248
				<a href="#identification-popup" id="identification-btn"
249
					data-role="button" data-icon="grid" data-iconpos="right"
250
					data-rel="dialog" data-transition="pop" data-theme="b">
251
						Modifier le compte
252
				</a>
253
				<div id="identification-infos"></div>
254
				<hr />
255
				<button data-role="button" data-icon="cloud-black" id="transmettre-obs" >
256
					Transmettre
257
				</button>
258
			</div>
259
			<div data-role="footer" data-position="fixed">
260
				<div data-role="navbar">
261
					<ul>
262
						<li><a href="#saisie" class="saisie" data-role="button" data-icon="pencil" data-iconpos="notext">Saisie</a></li>
263
						<li><a href="#liste" data-role="button" data-icon="notepad" data-iconpos="notext">Liste de mes obs.</a></li>
264
					</ul>
265
				</div>
266
			</div>
267
		</div>
268
 
269
		<div id="identification-popup" data-role="page" data-history="false" data-close-btn="right">
270
			<div data-role="header">
271
				<h1>Compte Tela Botanica</h1>
272
			</div>
273
			<form id="form-transmission" method="post" action="#">
1244 jpm 274
				<div data-role="content">
275
					<div data-role="fieldcontain">
1552 isa 276
						<label for="courriel">Courriel * :</label>
1244 jpm 277
						<input id="courriel" type="email" name="courriel"/>
1733 isa 278
						<input id="id-utilisateur" name="id-utilisateur" type="hidden"/>
1552 isa 279
 
1733 isa 280
						<button id="valider-courriel" data-role="button"
281
							data-icon="forward" data-iconpos="">
282
								Vérifier ce compte Tela
1552 isa 283
						</button>
1244 jpm 284
					</div>
1733 isa 285
					<div id="zone-courriel-confirmation" data-role="fieldcontain" class="hidden">
286
						<label for="courriel-confirmation">
287
							<strong class="obligatoire">*</strong> Courriel (confirmation) :
288
						</label>
289
						<input id="courriel-confirmation" name="courriel-confirmation" type="text"/>
290
					</div>
291
					<div id="zone-prenom-nom" data-role="fieldcontain" class="hidden">
1552 isa 292
						<div>
1733 isa 293
							<label for="nom">Nom :</label>
294
							<input id="nom-utilisateur" name="nom" type="text"/>
1552 isa 295
						</div>
296
 
297
						<div>
1733 isa 298
							<label for="prenom">Prénom :</label>
299
							<input id="prenom-utilisateur" name="prenom" type="text"/>
1552 isa 300
						</div>
301
					</div>
1733 isa 302
					<input type="checkbox" name="courriel-memoire" id="courriel-memoire" checked="checked">
303
					<label for="courriel-memoire">Se souvenir de moi</label>
304
 
305
					<button id="valider-identification" data-role="button"
306
						data-icon="check" data-iconpos="right" data-theme="b">
307
							Valider le formulaire
308
					</button>
1244 jpm 309
				</div>
310
			</form>
1733 isa 311
			<div data-role="footer"></div>
312
		</div><!-- /page popup -->
1244 jpm 313
 
1733 isa 314
		<div id="infos" data-role="page" data-add-back-btn="true" data-back-btn-text="Retour">
1244 jpm 315
			<div data-role="header">
316
				<h1>Infos</h1>
317
			</div>
318
			<div data-role="content">
1552 isa 319
				<p>
320
					Développement :
321
					<ul>
322
						<li>Jean-Pascal MILCENT</li>
323
						<li>Isabelle NEMBROT</li>
324
					</ul>
325
					sur une idée originale de Aurélien PERONNET.
326
				</p>
1244 jpm 327
			</div>
328
			<div data-role="footer" data-position="fixed">
1733 isa 329
				<p class="center">
330
					Icônes par <a href="http://glyphish.com">Joseph Wain - Glyphish</a>. <br />
331
					© Copyright <span id="annee"></span> - <a href="http://www.tela-botanica.org/site:accueil">Tela Botanica</a>
332
				</p>
1244 jpm 333
			</div>
334
		</div>
335
	</body>
1552 isa 336
</html>