Subversion Repositories eFlore/Applications.cel

Rev

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

Rev Author Line No. Line
3630 idir 1
<div id="bloc-infos-img"></div>
2
<div id="volet" class="col-lg-4 col-12">
3
	<div id="volets-fct">
4
		<a id="retour-metas" class="btn hidden" data-volet="meta"><i class="fas fa-info-circle"></i>&nbsp;<i class="fas fa-angle-double-left"></i></a>
5
		<div class="nettoyage-volet haut"></div>
6
		<div id="bloc-tags" class="bloc-volet tags hidden" data-volet="tags">
7
			<h2>Tags</h2>
8
			<h3>Tags CEL (propres à l'auteur)</h3>
9
			<form id="form-tags-auteur">
10
				<input type="text" name="null" id="tags-auteur" placeholder="Aucun tag ajouté par l'auteur de l'observation" disabled>
11
			</form>
12
			<h3>Tags Pictoflora</h3>
13
			<div id="tags-pf">
14
				<a id="port" class="btn tag">Port</a><!--
15
				--><a id="fleur" class="btn tag">Fleur</a><!--
16
				--><a id="fruit" class="btn tag">Fruit</a><!--
17
				--><a id="feuille" class="btn tag">Feuille</a><!--
18
				--><a id="ecorce" class="btn tag">Ecorce</a><!--
19
				--><a id="rameau" class="btn tag">Rameau</a><!--
20
				--><a id="planche" class="btn tag">Planche</a><!--
21
				--><a id="insecte" class="btn tag">Insecte</a>
22
			</div>
23
			<label for="saisir-tag">Saisir un tag</label>
24
			<input type="text" class="form-control" id="saisir-tag" name="saisir-tag">
25
			<div id="tags-pf-supp"></div>
26
			<a id="signaler-photo" class="btn btn-sm btn-warning"><i class="fas fa-exclamation-triangle"></i>&nbsp;Signaler une photo inappropriée</a>
3823 idir 27
			<a id="signaler-erreur-id-bis" class="btn btn-sm btn-warning signaler-erreur-obs" title="Signaler une mauvaise identification ou en proposer une autre via l'outil identiplante" target="_blank"><i class="fas fa-exclamation-triangle"></i>&nbsp;Signaler une erreur d'identification</a>
3630 idir 28
		</div>
29
		<div id="bloc-noter" class="bloc-volet noter hidden" data-volet="noter">
30
			<h2>Protocoles</h2>
31
			<select name="protocole" id="protocole" class="form-control custom-select">
32
				<option value="" selected hidden>Choix du protocole</option>
33
				<option id="capitalisation_image" value="capitalisation_image">Capitalisation d'images</option>
34
				<option id="aide_identification" value="aide_identification">Aide à l'identification</option>
35
				<option id="defi_photo" value="defi_photo">Défi photo</option>
36
				<option id="gentiane_azure" value="gentiane_azure">Enquête Gentiane-azuré</option>
37
				<option id="arbres_tetards" value="arbres_tetards">Arbres têtards</option>
38
			</select>
39
			<p id="message-protocole" class="message">
40
				Choisissez un protocole pour pouvoir noter la photo
41
				<!-- le message change en fonction du protocole -->
42
			</p>
43
			<div id="bloc-notes-protocole" class="hidden">
44
				<ul id="notes-protocole-fct">
45
					<li id="plus-infos-protocole" class="row">
46
						<div class="col-10 label">Plus d'infos sur le wiki</div>
47
						<a class="bouton btn btn-sm btn-outline-secondary"><i class="fas fa-question-circle"></i></a>
48
					</li>
49
					<li id="note">
50
						<div class="col-5 label">Notez</div>
51
						<div class="col-5 contenu"><!-- étoiles --></div>
52
						<a class="bouton btn btn-sm btn-outline-secondary"><i class="fas fa-backspace"></i></a>
53
					</li>
54
					<li id="note-moyenne">
55
						<div class="col-5 label">Note Moyenne</div>
56
						<div class="col-5 contenu" style="text-align:right;"></div>
57
					</li>
58
					<li id="note">
59
						<div class="col-5 label">Nombre de votes</div>
60
						<div class="col-5 contenu" style="text-align:right;"></div>
61
					</li>
62
				</ul>
63
			</div>
64
		</div>
65
		<div id="bloc-signaler" class="bloc-volet signaler hidden" data-volet="signaler">
66
			<h2>Signaler</h2>
67
			<h3>Signaler une photo inappropriée</h3>
68
			<p id="message-signaler" class="message">
69
				En signalant cette photo vous participez à la qualification des données d'observation botaniques. Les photos qualifiées d'inappropriées pour l'une des raison ci-dessous ne seront pas affichées parmi les autres illustrations sur eFlore, voire pourront être dépubliées.
70
			</p>
71
			<li id="exemple-inapproprie" class="row">
72
				<div class="col-10 label">Exemple de photos inappropriées</div>
73
				<a class="bouton btn btn-sm btn-outline-secondary"><i class="fas fa-question-circle"></i></a>
74
			</li>
75
			<li id="plus-infos-signaler" class="row">
76
				<div class="col-10 label">Plus d'infos sur le wiki</div>
77
				<a class="bouton btn btn-sm btn-outline-secondary"><i class="fas fa-question-circle"></i></a>
78
			</li>
79
			<form id="type-inapprorie">
80
				<div class="list-label">
81
					En quoi cette photo est-elle inappropriée ?
82
				</div>
83
				<div class="list">
84
					<div class="form-check">
85
						<input type="checkbox" id="non-vegetale" name="type-inapprorie" class="non-vegetale form-check-input" value="non-vegetale">
86
						<label for="non-vegetale" class="non-vegetale form-check-label">Photo non végétale</label>
87
					</div>
88
					<div class="form-check">
89
						<input type="checkbox" id="ecran" name="type-inapprorie" class="ecran form-check-input" value="ecran">
90
						<label for="ecran" class="ecran form-check-label">Photo d'écran</label>
91
					</div>
92
					<div class="form-check">
93
						<input type="checkbox" id="floue-pixelisee" name="type-inapprorie" class="floue-pixelisee form-check-input" value="floue-pixelisee">
94
						<label for="floue-pixelisee" class="floue-pixelisee form-check-label">Photo floue ou pixelisée</label>
95
					</div>
96
					<div class="form-check">
97
						<input type="checkbox" id="cultivee-pot" name="type-inapprorie" class="cultivee-pot form-check-input" value="cultivee-pot">
98
						<label for="cultivee-pot" class="cultivee-pot form-check-label">Plante cultivée / en pot</label>
99
					</div>
100
				</div>
101
			</form>
3823 idir 102
			<a id="signaler-erreur-id-signaler" class="btn btn-sm btn-warning signaler-erreur-obs" title="Signaler une mauvaise identification ou en proposer une autre via l'outil identiplante" target="_blank"><i class="fas fa-exclamation-triangle"></i>&nbsp;Signaler une erreur d'identification</a>
1480 aurelien 103
 
3630 idir 104
 
105
		</div>
106
 
107
 
108
		<!-- pas pour la version 1 -->
109
		<div id="bloc-revision" class="bloc-volet revision hidden" data-volet="revision">
110
			<h2>Révision</h2>
111
			<h3>Proposition de détermination</h3>
112
 
113
		</div>
114
 
115
 
116
 
117
		<div id="bloc-meta" class="bloc-volet meta" data-volet="meta">
118
			<h2>Métadonnées</h2>
119
			<ul id="contenu-meta">
120
				<li id="nom" class="row">
121
					<div class="col-5 label">Nom</div>
122
					<div class="col-5 contenu"></div>
3823 idir 123
					<a class="bouton btn btn-sm btn-outline-secondary" target="_blank"><i class="fas fa-search"></i></a>
3630 idir 124
				</li>
125
				<li id="localisation" class="row">
126
					<div class="col-5 label">Localisation</div>
127
					<div class="col-5 contenu"></div>
3823 idir 128
					<a id="obs-localisation" class="bouton btn btn-sm btn-outline-secondary"><i class="fas fa-map-marker-alt"></i></a>
3630 idir 129
				</li>
130
				<li id="auteur" class="row">
131
					<div class="col-5 label">Auteur</div>
132
					<div class="col-5 contenu"></div>
133
					<a class="bouton btn btn-sm btn-outline-secondary"><i class="fas fa-user"></i></a>
134
				</li>
135
				<li id="date-obs" class="row">
136
					<div class="col-5 label">Date d'observation</div>
137
					<div class="col-5 contenu"></div>
138
				</li>
3823 idir 139
				<li id="commentaire" class="row">
3630 idir 140
					<div class="col-5 label">Commentaires</div>
141
					<div class="col-5 contenu"></div>
142
				</li>
143
				<li id="certitude" class="row">
144
					<div class="col-5 label">Certitude de l'identification</div>
145
					<div class="col-5 contenu"></div>
146
				</li>
147
				<li id="fiabilite" class="row">
148
					<div class="col-5 label">Fiabilité</div>
149
					<div class="col-5 contenu"></div>
150
					<a class="bouton btn btn-sm btn-outline-secondary"><i class="fas fa-question-circle"></i></a>
151
				</li>
152
			</ul>
153
			<a id="plus-meta" class="afficher-plus"><i class="fas fa-angle-down"></i>&nbsp;Afficher plus de metadonnées sur l'observation</a>
154
			<ul id="contenu-meta-plus"></ul>
155
			<ul id="contenu-meta-suite">
156
				<li id="num-photo" class="row">
157
					<div class="col-5 label">Photo n°</div>
158
					<div class="col-5 contenu"></div>
159
				</li>
160
				<li id="licence" class="row">
161
					<div class="col-5 label">Licence</div>
3823 idir 162
					<div class="col-5 contenu">
163
						<a target="_blank" href="http://creativecommons.org/licenses/by-sa/2.0/fr/">CC-BY-SA 2.0 FR</a>
164
					</div>
3630 idir 165
				</li>
166
			</ul>
3823 idir 167
 
168
			<a id="signaler-erreur-id" class="btn btn-sm btn-warning signaler-erreur-obs" title="Signaler une mauvaise identification ou en proposer une autre via l'outil identiplante" target="_blank" href="https://www.tela-botanica.org/appli:identiplante"><i class="fas fa-exclamation-triangle"></i>&nbsp;Signaler une erreur d'identification</a>
169
 
3630 idir 170
			<h2>Téléchargement</h2>
171
			<ul id="contenu-telechargement">
172
				<li id="titre-original" class="row">
173
					<div class="col-5 label">Titre original</div>
174
					<div class="col-5 contenu"></div>
175
				</li>
176
				<li id="date-photo" class="row">
177
					<div class="col-5 label">Date de la photo</div>
178
					<div class="col-5 contenu"></div>
179
				</li>
180
				<li id="Licence-bis" class="row">
181
					<div class="col-5 label">Licence</div>
3823 idir 182
					<div class="col-5 contenu">
183
						<a target="_blank" href="http://creativecommons.org/licenses/by-sa/2.0/fr/">CC-BY-SA 2.0 FR</a>
184
					</div>
3630 idir 185
				</li>
186
				<li id="attribution" class="row">
3823 idir 187
					<div class="col-12 label">Attribution</div>
188
					<div class="col-12 contenu">
189
						<input id="attribution-copy" type="text" name="attribution-copy" rows="4" class="form-control" readonly="readonly" style="width: 100%; height: 100%;">
190
					</div>
3630 idir 191
				</li>
192
				<li id="url" class="row">
3823 idir 193
					<div class="col-12 label">Url</div>
194
					<div class="col-12 contenu">
195
						<input id="url-copy" type="text" name="url-copy" rows="2" class="form-control" readonly="readonly" style="width: 100%; height: 100%;">
196
					</div>
3630 idir 197
				</li>
198
			</ul>
3823 idir 199
			<a href="" data-url-base-telechargement="<?php echo $url_base_telechargement; ?>" id="telecharger" class="btn btn-success"><i class="fas fa-upload"></i>&nbsp;Télécharger</a>
3630 idir 200
			<ul id="contenu-telechargement-suite">
201
				<li id="autres-formats" class="row">
202
					<div class="col-5 label">Autres formats</div>
203
					<div class="col-7 contenu">
204
						<select name="formats" id="formats" class="form-control custom-select">
3823 idir 205
						<?php foreach ($formats_description as $format => $description):?>
206
							<option value="<?php echo $format; ?>" <?php echo $format === 'O' ? 'selected' : ''; ?>><?php echo $description; ?></option>
207
						<?php endforeach; ?>
3630 idir 208
						</select>
209
					</div>
210
				</li>
211
			</ul>
212
			<h2>Partagez !</h2>
213
			<p class="message">
214
				Partagez cette photo sur les réseaux sociaux
215
			</p>
216
			<div id="boutons-reseaux-sociaux">
217
				<a id="facebook" class="btn btn-outline-secondary btn-lg"><i class="fab fa-facebook-f"></i></a>
218
				<a id="twitter" class="btn btn-outline-secondary btn-lg"><i class="fab fa-twitter"></i></a>
219
				<a id="mail" class="btn btn-outline-secondary btn-lg"><i class="fas fa-envelope"></i></a>
220
			</div>
221
		</div>
222
		<div id="bloc-modif" class="bloc-volet modif hidden" data-volet="modif">
223
			<h2>Modifier la photo</h2>
224
			<h3>Faire pivoter la photo</h3>
225
			<div id="pivoter-photo" class="d-flex justify-content-around">
226
				<div id="bloc-pivoter-droite" class="d-flex flex-column">
227
					<label for="pivoter-droite">Pivoter à droite</label>
228
					<a id="pivoter-droite" class="btn btn-success btn-lg"><i class="fas fa-redo"></i></a>
229
				</div>
230
				<div id="bloc-pivoter-gauche" class="d-flex flex-column">
231
					<label for="pivoter-gauche">Pivoter à gauche</label>
232
					<a id="pivoter-gauche" class="btn btn-success btn-lg"><i class="fas fa-undo"></i></a>
233
				</div>
234
			</div>
235
			<h3>Régénérer miniature</h3>
236
			<p id="message-regenerer" class="message">
237
				Vous avez remarqué un problème dans l'affichage de la miniature de cette photo ? Vous pouvez la régénérer ci-dessous !
238
			</p>
239
			<a id="regenerer-miniature" class="btn btn-warning btn-lg"><i class="fas fa-recycle"></i>&nbsp;Régénérer la miniature</a>
240
		</div>
241
		<div id="bloc-aide" class="bloc-volet aide hidden" data-volet="aide">
242
			<h2>Aide</h2>
243
			<p id="texte-aide" class="message">
244
				Auxerunt haec vulgi sordidioris audaciam, quod cum ingravesceret penuria commeatuum, famis et furoris inpulsu Eubuli cuiusdam inter suos clari domum ambitiosam ignibus subditis inflammavit rectoremque ut sibi iudicio imperiali addictum calcibus incessens et pugnis conculcans seminecem laniatu miserando discerpsit. post cuius lacrimosum interitum in unius exitio quisque imaginem periculi sui considerans documento recenti similia formidabat.
245
 
246
				Novitates autem si spem adferunt, ut tamquam in herbis non fallacibus fructus appareat, non sunt illae quidem repudiandae, vetustas tamen suo loco conservanda; maxima est enim vis vetustatis et consuetudinis. Quin in ipso equo, cuius modo feci mentionem, si nulla res impediat, nemo est, quin eo, quo consuevit, libentius utatur quam intractato et novo. Nec vero in hoc quod est animal, sed in iis etiam quae sunt inanima, consuetudo valet, cum locis ipsis delectemur, montuosis etiam et silvestribus, in quibus diutius commorati sumus.
247
 
248
				Erat autem diritatis eius hoc quoque indicium nec obscurum nec latens, quod ludicris cruentis delectabatur et in circo sex vel septem aliquotiens vetitis certaminibus pugilum vicissim se concidentium perfusorumque sanguine specie ut lucratus ingentia laetabatur.
249
			</p>
250
			<ul id="aide-plus">
251
				<li id="plus-infos" class="row">
252
					<div class="col-10 label">Plus d'infos sur le wiki</div>
253
					<a class="bouton btn btn-sm btn-outline-secondary"><i class="fas fa-question-circle"></i></a>
254
				</li>
255
				<li id="autres-questions" class="row">
256
					<div class="col-10 label">D'autres questions ? Écrivez-nous !</div>
257
					<a class="bouton btn btn-sm btn-outline-secondary"><i class="fas fa-envelope"></i></a>
258
				</li>
259
			</ul>
260
 
261
		</div>
262
 
263
		<div class="nettoyage-volet bas"></div>
1480 aurelien 264
	</div>
3630 idir 265
 
266
</div>
267
<div id="info-img-galerie" class="carousel col-lg-8 col-12" data-ride="carousel" data-interval="false">
268
	<div class="carousel-inner h-100 w-100">
269
		<?php for($index = 0; $index < $max_photo; $index++) :?>
270
			<div id="img-cadre-<?php echo $index; ?>" class="carousel-item">
271
				<img id="illustration-<?php echo $index;?>" class="d-block align-middle" src="<?php echo $urls[$index];?>" alt="" data-width="<?php echo $infos_images[$urls[$index]]['width'];?>" data-height="<?php echo $infos_images[$urls[$index]]['height'];?>">
272
			</div>
273
		<?php endfor; ?>
274
		<a id="precedent" class="carousel-control-prev carousel-control" href="#info-img-galerie" role="button" data-slide="prev">
275
			<i class="fas fa-chevron-circle-left"></i>
276
			<span class="sr-only">Precedent</span>
1480 aurelien 277
		</a>
3630 idir 278
		<a id="suivant" class="carousel-control-next carousel-control" href="#info-img-galerie" role="button" data-slide="next">
279
			<i class="fas fa-chevron-circle-right"></i>
280
			<span class="sr-only">Suivant</span>
281
		</a>
1480 aurelien 282
	</div>
283
</div>
3630 idir 284
<div id="boutons-footer">
285
	<div id="bloc-fct" class="">
286
		<a id="bouton-tags" class="btn bouton-fct tags" data-volet="tags"><i class="fas fa-tags"></i></a>
287
		<a id="bouton-noter" class="btn bouton-fct noter" data-volet="noter"><i class="far fa-star"></i></a>
288
		<a id="bouton-signaler" class="btn bouton-fct signaler" data-volet="signaler"><i class="fas fa-exclamation-triangle"></i></a>
289
		<a id="bouton-revision" class="btn bouton-fct revision" data-volet="revision"><i class="fas fa-edit"></i></a>
290
		<a id="bouton-meta" class="btn bouton-fct meta actif" data-volet="meta"><i class="fas fa-info-circle"></i></a>
291
		<a id="bouton-modif" class="btn bouton-fct modif" data-volet="modif"><i class="fas fa-redo-alt"></i></a>
292
		<a id="bouton-aide" class="btn bouton-fct aide" data-volet="aide"><i class="fas fa-question-circle"></i></a>
293
	</div>
294
	<a id="retour-galerie" class="btn btn-outline-dark btn-lg bouton-fct hidden"><i class="fa fa-angle-double-down" aria-hidden="true"></i></a>
295
</div>
296
<script type="text/Javascript">
297
	//<![CDATA[
298
		var widgetProp = {
3823 idir 299
			'urlWidget'                    : "<?php echo $url_widget; ?>",
300
			'urls'                         : [<?php echo '"'.implode($urls, '","').'"'; ?>],
301
			'infos_images'                 : <?php echo json_encode($infos_images); ?>,
302
			'indexImage'                   : 0,
303
			'urlImage'                     : "<?php echo $url_image; ?>",
304
			'tailleMax'                    : 580,
305
			'popupUrl'                     : "<?php echo $popup_url; ?>",
306
			'urlBaseTelechargement'        : "<?php echo $url_base_telechargement; ?>",
307
			'urlServiceRegenererMiniature' : "<?php echo $url_ws_regenerer_img; ?>"
3630 idir 308
		};
309
		$( document ).ready( function() {
310
			popup = new WidgetPhotoPopup( widgetProp );
311
			popup.init();
312
		});
313
	//]]>
314
</script>