Subversion Repositories eFlore/Applications.cel

Rev

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

Rev 3973 Rev 3983
1
<div id="bloc-infos-img"></div>
1
<div id="bloc-infos-img"></div>
2
<div id="volet" class="col-lg-4 col-12">
2
<div id="volet" class="col-lg-4 col-12">
3
	<div id="volets-fct">
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>
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>
5
		<div class="nettoyage-volet haut"></div>
6
		<div id="bloc-tags" class="bloc-volet tags hidden todo" data-volet="tags">
6
		<div id="bloc-tags" class="bloc-volet tags hidden todo" data-volet="tags">
7
			<h2>Tags</h2>
7
			<h2>Tags</h2>
8
			<h3>Tags CEL (propres à l'auteur)</h3>
8
			<h3>Tags CEL (propres à l'auteur)</h3>
9
			<form id="form-tags-auteur">
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>
10
<!--				<input type="text" name="null" id="tags-auteur" placeholder="Aucun tag ajouté par l'auteur de l'observation" disabled>-->
11
			</form>
11
<!--			</form>-->
-
 
12
			<div id="tags-cel"></div>
12
			<h3>Tags Pictoflora</h3>
13
			<h3>Tags Pictoflora</h3>
13
			<div id="tags-pf">
14
			<div id="tags-pf"></div>
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>
15
			<label for="saisir-tag">Saisir un tag</label>
24
			<input type="text" class="form-control" id="saisir-tag" name="saisir-tag">
16
			<input type="text" class="form-control" id="saisir-tag" name="saisir-tag">
25
			<div id="tags-pf-supp"></div>
17
			<div id="tags-pf-supp"></div>
26
			<a id="signaler-photo" class="btn btn-sm btn-warning hidden"><i
18
			<a id="signaler-photo" class="btn btn-sm btn-warning hidden"><i
27
					class="fas fa-exclamation-triangle"></i>&nbsp;Signaler une photo inappropriée</a>
19
					class="fas fa-exclamation-triangle"></i>&nbsp;Signaler une photo inappropriée</a>
28
			<a id="signaler-erreur-id-bis" class="btn btn-sm btn-warning signaler-erreur-obs hidden"
20
			<a id="signaler-erreur-id-bis" class="btn btn-sm btn-warning signaler-erreur-obs hidden"
29
			   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>
21
			   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>
30
		</div>
22
		</div>
31
		<div id="bloc-noter" class="bloc-volet noter hidden todo" data-volet="noter">
23
		<div id="bloc-noter" class="bloc-volet noter hidden todo" data-volet="noter">
32
			<h2>Protocoles</h2>
24
			<h2>Protocoles</h2>
33
			<select name="protocole" id="protocole" class="form-control custom-select">
25
			<select name="protocole" id="protocole" class="form-control custom-select">
34
				<option value="" selected hidden>Choix du protocole</option>
26
				<option value="" selected hidden>Choix du protocole</option>
35
				<option id="capitalisation_image" value="capitalisation_image">Capitalisation d'images</option>
27
				<option id="capitalisation_image" value="capitalisation_image">Capitalisation d'images</option>
36
				<option id="aide_identification" value="aide_identification">Aide à l'identification</option>
28
				<option id="aide_identification" value="aide_identification">Aide à l'identification</option>
37
				<option id="defi_photo" value="defi_photo">Défi photo</option>
29
				<option id="defi_photo" value="defi_photo">Défi photo</option>
38
				<option id="gentiane_azure" value="gentiane_azure">Enquête Gentiane-azuré</option>
30
				<option id="gentiane_azure" value="gentiane_azure">Enquête Gentiane-azuré</option>
39
				<option id="arbres_tetards" value="arbres_tetards">Arbres têtards</option>
31
				<option id="arbres_tetards" value="arbres_tetards">Arbres têtards</option>
40
			</select>
32
			</select>
41
			<p id="message-protocole" class="message mt-3">
33
			<p id="message-protocole" class="message mt-3">
42
				Choisissez un protocole pour pouvoir noter la photo
34
				Choisissez un protocole pour pouvoir noter la photo
43
				<!-- le message change en fonction du protocole -->
35
				<!-- le message change en fonction du protocole -->
44
			</p>
36
			</p>
45
			<div id="bloc-notes-protocole" class="hidden">
37
			<div id="bloc-notes-protocole" class="hidden">
46
				<ul id="notes-protocole-fct">
38
				<ul id="notes-protocole-fct">
47
					<li id="plus-infos-protocole" class="row">
39
					<li id="plus-infos-protocole" class="row">
48
						<div class="col-10 label">Plus d'infos sur le wiki</div>
40
						<div class="col-10 label">Plus d'infos sur le wiki</div>
49
						<a class="bouton btn btn-sm btn-outline-secondary" href="https://www.tela-botanica.org/wikini/pictoflora/wakka.php?wiki=PagePrincipale" target="_blank"><i
41
						<a class="bouton btn btn-sm btn-outline-secondary" href="https://www.tela-botanica.org/wikini/pictoflora/wakka.php?wiki=PagePrincipale" target="_blank"><i
50
								class="fas fa-question-circle"></i></a>
42
								class="fas fa-question-circle"></i></a>
51
					</li>
43
					</li>
52
					<li id="note" class="row">
44
					<li id="note" class="row">
53
						<div class="col-5 label">Notez</div>
45
						<div class="col-5 label">Notez</div>
54
						<div class="col-5 contenu"><!-- étoiles -->
46
						<div class="col-5 contenu"><!-- étoiles -->
55
							<i id="rating-star-1" class="far fa-star notation-star"></i>
47
							<i id="rating-star-1" class="far fa-star notation-star"></i>
56
							<i id="rating-star-2" class="far fa-star notation-star"></i>
48
							<i id="rating-star-2" class="far fa-star notation-star"></i>
57
							<i id="rating-star-3" class="far fa-star notation-star"></i>
49
							<i id="rating-star-3" class="far fa-star notation-star"></i>
58
							<i id="rating-star-4" class="far fa-star notation-star"></i>
50
							<i id="rating-star-4" class="far fa-star notation-star"></i>
59
							<i id="rating-star-5" class="far fa-star notation-star"></i>
51
							<i id="rating-star-5" class="far fa-star notation-star"></i>
60
						</div>
52
						</div>
61
							<a id="note-remove"
53
							<a id="note-remove"
62
							   class="bouton btn btn-sm btn-outline-secondary"><i class="fas fa-backspace"></i></a>
54
							   class="bouton btn btn-sm btn-outline-secondary"><i class="fas fa-backspace"></i></a>
63
					</li>
55
					</li>
64
					<li id="note-moyenne" class="row d-flex justify-content-between">
56
					<li id="note-moyenne" class="row d-flex justify-content-between">
65
						<div class="col-5 label">Note Moyenne</div>
57
						<div class="col-5 label">Note Moyenne</div>
66
						<div class="col-5 contenu" style="text-align:right;"></div>
58
						<div class="col-5 contenu" style="text-align:right;"></div>
67
					</li>
59
					</li>
68
					<li id="note-count" class="row d-flex justify-content-between">
60
					<li id="note-count" class="row d-flex justify-content-between">
69
						<div class="col-5 label">Nombre de votes</div>
61
						<div class="col-5 label">Nombre de votes</div>
70
						<div class="col-5 contenu" style="text-align:right;"></div>
62
						<div class="col-5 contenu" style="text-align:right;"></div>
71
					</li>
63
					</li>
72
				</ul>
64
				</ul>
73
			</div>
65
			</div>
74
		</div>
66
		</div>
75
		<div id="bloc-signaler" class="bloc-volet signaler hidden todo" data-volet="signaler">
67
		<div id="bloc-signaler" class="bloc-volet signaler hidden todo" data-volet="signaler">
76
			<h2>Signaler</h2>
68
			<h2>Signaler</h2>
77
			<h3>Signaler une photo inappropriée</h3>
69
			<h3>Signaler une photo inappropriée</h3>
78
			<p id="message-signaler" class="message">
70
			<p id="message-signaler" class="message">
79
				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.
71
				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.
80
			</p>
72
			</p>
81
			<li id="exemple-inapproprie" class="row">
73
			<li id="exemple-inapproprie" class="row">
82
				<div class="col-10 label">Exemple de photos inappropriées</div>
74
				<div class="col-10 label">Exemple de photos inappropriées</div>
83
				<a class="bouton btn btn-sm btn-outline-secondary"><i class="fas fa-question-circle"></i></a>
75
				<a class="bouton btn btn-sm btn-outline-secondary"><i class="fas fa-question-circle"></i></a>
84
			</li>
76
			</li>
85
			<li id="plus-infos-signaler" class="row">
77
			<li id="plus-infos-signaler" class="row">
86
				<div class="col-10 label">Plus d'infos sur le wiki</div>
78
				<div class="col-10 label">Plus d'infos sur le wiki</div>
87
				<a class="bouton btn btn-sm btn-outline-secondary"
79
				<a class="bouton btn btn-sm btn-outline-secondary"
88
				   href="https://www.tela-botanica.org/wikini/AideCarnetEnLigne/wakka.php?wiki=AideWidgetPhoto" target="_blank"><i class="fas fa-question-circle"></i></a>
80
				   href="https://www.tela-botanica.org/wikini/AideCarnetEnLigne/wakka.php?wiki=AideWidgetPhoto" target="_blank"><i class="fas fa-question-circle"></i></a>
89
			</li>
81
			</li>
90
			<form id="type-inapprorie">
82
			<form id="type-inapprorie">
91
				<div class="list-label">
83
				<div class="list-label">
92
					En quoi cette photo est-elle inappropriée ?
84
					En quoi cette photo est-elle inappropriée ?
93
				</div>
85
				</div>
94
				<div class="list">
86
				<div class="list">
95
					<div class="form-check">
87
					<div class="form-check">
96
						<input type="checkbox" id="non-vegetale" name="type-inapprorie" class="non-vegetale form-check-input" value="non-vegetale">
88
						<input type="checkbox" id="non-vegetale" name="type-inapprorie" class="non-vegetale form-check-input" value="non-vegetale">
97
						<label for="non-vegetale" class="non-vegetale form-check-label">Photo non végétale</label>
89
						<label for="non-vegetale" class="non-vegetale form-check-label">Photo non végétale</label>
98
					</div>
90
					</div>
99
					<div class="form-check">
91
					<div class="form-check">
100
						<input type="checkbox" id="ecran" name="type-inapprorie" class="ecran form-check-input" value="ecran">
92
						<input type="checkbox" id="ecran" name="type-inapprorie" class="ecran form-check-input" value="ecran">
101
						<label for="ecran" class="ecran form-check-label">Photo d'écran</label>
93
						<label for="ecran" class="ecran form-check-label">Photo d'écran</label>
102
					</div>
94
					</div>
103
					<div class="form-check">
95
					<div class="form-check">
104
						<input type="checkbox" id="floue-pixelisee" name="type-inapprorie" class="floue-pixelisee form-check-input" value="floue-pixelisee">
96
						<input type="checkbox" id="floue-pixelisee" name="type-inapprorie" class="floue-pixelisee form-check-input" value="floue-pixelisee">
105
						<label for="floue-pixelisee" class="floue-pixelisee form-check-label">Photo floue ou pixelisée</label>
97
						<label for="floue-pixelisee" class="floue-pixelisee form-check-label">Photo floue ou pixelisée</label>
106
					</div>
98
					</div>
107
					<div class="form-check">
99
					<div class="form-check">
108
						<input type="checkbox" id="cultivee-pot" name="type-inapprorie" class="cultivee-pot form-check-input" value="cultivee-pot">
100
						<input type="checkbox" id="cultivee-pot" name="type-inapprorie" class="cultivee-pot form-check-input" value="cultivee-pot">
109
						<label for="cultivee-pot" class="cultivee-pot form-check-label">Plante cultivée / en pot</label>
101
						<label for="cultivee-pot" class="cultivee-pot form-check-label">Plante cultivée / en pot</label>
110
					</div>
102
					</div>
111
				</div>
103
				</div>
112
			</form>
104
			</form>
113
			<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>
105
			<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>
114
		</div>
106
		</div>
115
 
107
 
116
 
108
 
117
		<!-- pas pour la version 1 -->
109
		<!-- pas pour la version 1 -->
118
		<div id="bloc-revision" class="bloc-volet revision hidden todo" data-volet="revision">
110
		<div id="bloc-revision" class="bloc-volet revision hidden todo" data-volet="revision">
119
			<h2>Révision</h2>
111
			<h2>Révision</h2>
120
			<h3>Proposition de détermination</h3>
112
			<h3>Proposition de détermination</h3>
121
 
113
 
122
		</div>
114
		</div>
123
 
115
 
124
 
116
 
125
 
117
 
126
		<div id="bloc-meta" class="bloc-volet meta" data-volet="meta">
118
		<div id="bloc-meta" class="bloc-volet meta" data-volet="meta">
127
			<h2>Métadonnées</h2>
119
			<h2>Métadonnées</h2>
128
			<ul id="contenu-meta">
120
			<ul id="contenu-meta">
129
				<li id="nom" class="row">
121
				<li id="nom" class="row">
130
					<div class="col-5 label">Nom</div>
122
					<div class="col-5 label">Nom</div>
131
					<div class="col-5 contenu"></div>
123
					<div class="col-5 contenu"></div>
132
					<a class="bouton btn btn-sm btn-outline-secondary" target="_blank" title="Lien vers eflore"
124
					<a class="bouton btn btn-sm btn-outline-secondary" target="_blank" title="Lien vers eflore"
133
					><i class="fas fa-search"></i></a>
125
					><i class="fas fa-search"></i></a>
134
				</li>
126
				</li>
135
				<li id="localisation" class="row">
127
				<li id="localisation" class="row">
136
					<div class="col-5 label">Localisation</div>
128
					<div class="col-5 label">Localisation</div>
137
					<div class="col-5 contenu"></div>
129
					<div class="col-5 contenu"></div>
138
					<a id="obs-localisation" class="bouton btn btn-sm btn-outline-secondary"
130
					<a id="obs-localisation" class="bouton btn btn-sm btn-outline-secondary"
139
					   title="Afficher la localisation"><i
131
					   title="Afficher la localisation"><i
140
							class="fas fa-map-marker-alt"></i></a>
132
							class="fas fa-map-marker-alt"></i></a>
141
				</li>
133
				</li>
142
				<li id="auteur" class="row">
134
				<li id="auteur" class="row">
143
					<div class="col-5 label">Auteur</div>
135
					<div class="col-5 label">Auteur</div>
144
					<div class="col-5 contenu"></div>
136
					<div class="col-5 contenu"></div>
145
					<a class="bouton btn btn-sm btn-outline-secondary" target="_blank"
137
					<a class="bouton btn btn-sm btn-outline-secondary" target="_blank"
146
					   title="Afficher le profil"><i class="fas fa-user"></i></a>
138
					   title="Afficher le profil"><i class="fas fa-user"></i></a>
147
				</li>
139
				</li>
148
				<li id="date-obs" class="row">
140
				<li id="date-obs" class="row">
149
					<div class="col-5 label">Date d'observation</div>
141
					<div class="col-5 label">Date d'observation</div>
150
					<div class="col-5 contenu"></div>
142
					<div class="col-5 contenu"></div>
151
				</li>
143
				</li>
152
				<li id="commentaire" class="row">
144
				<li id="commentaire" class="row">
153
					<div class="col-5 label">Commentaires</div>
145
					<div class="col-5 label">Commentaires</div>
154
					<div class="col-5 contenu"></div>
146
					<div class="col-5 contenu"></div>
155
				</li>
147
				</li>
156
				<li id="certitude" class="row">
148
				<li id="certitude" class="row">
157
					<div class="col-5 label">Certitude de l'identification</div>
149
					<div class="col-5 label">Certitude de l'identification</div>
158
					<div class="col-5 contenu"></div>
150
					<div class="col-5 contenu"></div>
159
				</li>
151
				</li>
160
				<li id="fiabilite" class="row">
152
				<li id="fiabilite" class="row">
161
					<div class="col-5 label">Grade</div>
153
					<div class="col-5 label">Grade</div>
162
					<div class="col-5 contenu"></div>
154
					<div class="col-5 contenu"></div>
163
					<a
155
					<a
164
							href="https://www.tela-botanica.org/ressources/donnees/qualification-des-donnees-dobservation/#standard" target="_blank" class="bouton btn btn-sm btn-outline-secondary"
156
							href="https://www.tela-botanica.org/ressources/donnees/qualification-des-donnees-dobservation/#standard" target="_blank" class="bouton btn btn-sm btn-outline-secondary"
165
					   title="Voir plus d'information sur les grades"><i class="fas fa-question-circle"></i></a>
157
					   title="Voir plus d'information sur les grades"><i class="fas fa-question-circle"></i></a>
166
				</li>
158
				</li>
167
			</ul>
159
			</ul>
168
			<a id="plus-meta" class="afficher-plus"><i class="fas fa-angle-down"></i>&nbsp;Afficher plus de metadonnées sur l'observation</a>
160
			<a id="plus-meta" class="afficher-plus"><i class="fas fa-angle-down"></i>&nbsp;Afficher plus de metadonnées sur l'observation</a>
169
			<ul id="contenu-meta-plus"></ul>
161
			<ul id="contenu-meta-plus"></ul>
170
			<ul id="contenu-meta-suite">
162
			<ul id="contenu-meta-suite">
171
				<li id="num-photo" class="row">
163
				<li id="num-photo" class="row">
172
					<div class="col-5 label">Photo n°</div>
164
					<div class="col-5 label">Photo n°</div>
173
					<div class="col-5 contenu"></div>
165
					<div class="col-5 contenu"></div>
174
				</li>
166
				</li>
175
				<li id="licence" class="row">
167
				<li id="licence" class="row">
176
					<div class="col-5 label">Licence</div>
168
					<div class="col-5 label">Licence</div>
177
					<div class="col-5 contenu">
169
					<div class="col-5 contenu">
178
						<a target="_blank" href="http://creativecommons.org/licenses/by-sa/2.0/fr/">CC-BY-SA 2.0 FR</a>
170
						<a target="_blank" href="http://creativecommons.org/licenses/by-sa/2.0/fr/">CC-BY-SA 2.0 FR</a>
179
					</div>
171
					</div>
180
				</li>
172
				</li>
181
			</ul>
173
			</ul>
182
 
174
 
183
			<a id="signaler-erreur-id" class="btn btn-sm btn-warning signaler-erreur-obs"
175
			<a id="signaler-erreur-id" class="btn btn-sm btn-warning signaler-erreur-obs"
184
			   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>
176
			   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>
185
 
177
 
186
			<h2>Téléchargement</h2>
178
			<h2>Téléchargement</h2>
187
			<ul id="contenu-telechargement">
179
			<ul id="contenu-telechargement">
188
				<li id="titre-original" class="row">
180
				<li id="titre-original" class="row">
189
					<div class="col-5 label">Titre original</div>
181
					<div class="col-5 label">Titre original</div>
190
					<div class="col-7 contenu"></div>
182
					<div class="col-7 contenu"></div>
191
				</li>
183
				</li>
192
				<li id="date-photo" class="row">
184
				<li id="date-photo" class="row">
193
					<div class="col-5 label">Date de la photo</div>
185
					<div class="col-5 label">Date de la photo</div>
194
					<div class="col-7 contenu"></div>
186
					<div class="col-7 contenu"></div>
195
				</li>
187
				</li>
196
				<li id="Licence-bis" class="row">
188
				<li id="Licence-bis" class="row">
197
					<div class="col-5 label">Licence</div>
189
					<div class="col-5 label">Licence</div>
198
					<div class="col-7 contenu">
190
					<div class="col-7 contenu">
199
						<a target="_blank" href="http://creativecommons.org/licenses/by-sa/2.0/fr/">CC-BY-SA 2.0 FR</a>
191
						<a target="_blank" href="http://creativecommons.org/licenses/by-sa/2.0/fr/">CC-BY-SA 2.0 FR</a>
200
					</div>
192
					</div>
201
				</li>
193
				</li>
202
				<li id="attribution" class="row">
194
				<li id="attribution" class="row">
203
					<div class="col-12 label">Attribution</div>
195
					<div class="col-12 label">Attribution</div>
204
					<div class="col-12 contenu">
196
					<div class="col-12 contenu">
205
						<input id="attribution-copy" type="text" name="attribution-copy" rows="4" class="form-control" readonly="readonly" style="width: 100%; height: 100%;">
197
						<input id="attribution-copy" type="text" name="attribution-copy" rows="4" class="form-control" readonly="readonly" style="width: 100%; height: 100%;">
206
					</div>
198
					</div>
207
				</li>
199
				</li>
208
				<li id="url" class="row">
200
				<li id="url" class="row">
209
					<div class="col-12 label">Url</div>
201
					<div class="col-12 label">Url</div>
210
					<div class="col-12 contenu">
202
					<div class="col-12 contenu">
211
						<input id="url-copy" type="text" name="url-copy" rows="2" class="form-control" readonly="readonly" style="width: 100%; height: 100%;">
203
						<input id="url-copy" type="text" name="url-copy" rows="2" class="form-control" readonly="readonly" style="width: 100%; height: 100%;">
212
					</div>
204
					</div>
213
				</li>
205
				</li>
214
			</ul>
206
			</ul>
215
			<ul id="contenu-telechargement-suite" class="mb-0">
207
			<ul id="contenu-telechargement-suite" class="mb-0">
216
				<li id="autres-formats" class="row">
208
				<li id="autres-formats" class="row">
217
					<div class="col-12 label">Autres formats</div>
209
					<div class="col-12 label">Autres formats</div>
218
					<div class="col-12 contenu">
210
					<div class="col-12 contenu">
219
						<select name="formats" id="formats" class="form-control custom-select">
211
						<select name="formats" id="formats" class="form-control custom-select">
220
						<?php foreach ($formats_description as $format => $description):?>
212
						<?php foreach ($formats_description as $format => $description):?>
221
							<option value="<?php echo $format; ?>" <?php echo $format === 'O' ? 'selected' : ''; ?>><?php echo $description; ?></option>
213
							<option value="<?php echo $format; ?>" <?php echo $format === 'O' ? 'selected' : ''; ?>><?php echo $description; ?></option>
222
						<?php endforeach; ?>
214
						<?php endforeach; ?>
223
						</select>
215
						</select>
224
					</div>
216
					</div>
225
				</li>
217
				</li>
226
			</ul>
218
			</ul>
227
			<a href="" data-url-base-telechargement="<?php echo $url_base_telechargement; ?>" id="telecharger" class="btn btn-success mt-0"><i class="fas fa-upload"></i>&nbsp;Télécharger</a>
219
			<a href="" data-url-base-telechargement="<?php echo $url_base_telechargement; ?>" id="telecharger" class="btn btn-success mt-0"><i class="fas fa-upload"></i>&nbsp;Télécharger</a>
228
			<h2 class="todo hidden">Partagez !</h2>
220
			<h2 class="todo hidden">Partagez !</h2>
229
			<p class="message todo hidden">
221
			<p class="message todo hidden">
230
				Partagez cette photo sur les réseaux sociaux
222
				Partagez cette photo sur les réseaux sociaux
231
			</p>
223
			</p>
232
			<div id="boutons-reseaux-sociaux" class="todo hidden">
224
			<div id="boutons-reseaux-sociaux" class="todo hidden">
233
				<a id="facebook" class="btn btn-outline-secondary btn-lg"
225
				<a id="facebook" class="btn btn-outline-secondary btn-lg"
234
				   href="https://www.facebook.com/telabotanica/" target="_blank"><i class="fab fa-facebook-f"></i></a>
226
				   href="https://www.facebook.com/telabotanica/" target="_blank"><i class="fab fa-facebook-f"></i></a>
235
				<a id="twitter" class="btn btn-outline-secondary btn-lg" href="https://twitter.com/TelaBotanica" target="_blank"><i
227
				<a id="twitter" class="btn btn-outline-secondary btn-lg" href="https://twitter.com/TelaBotanica" target="_blank"><i
236
						class="fab fa-twitter"></i></a>
228
						class="fab fa-twitter"></i></a>
237
				<a id="mail" class="btn btn-outline-secondary btn-lg" href="mailto:cel_remarques@tela-botanica.org"><i class="fas fa-envelope"></i>
229
				<a id="mail" class="btn btn-outline-secondary btn-lg" href="mailto:cel_remarques@tela-botanica.org"><i class="fas fa-envelope"></i>
238
				</a>
230
				</a>
239
			</div>
231
			</div>
240
		</div>
232
		</div>
241
		<div id="bloc-modif" class="bloc-volet modif hidden" data-volet="modif">
233
		<div id="bloc-modif" class="bloc-volet modif hidden" data-volet="modif">
242
			<h2>Modifier la photo</h2>
234
			<h2>Modifier la photo</h2>
243
			<h3 class="todo">Faire pivoter la photo</h3>
235
			<h3 class="todo">Faire pivoter la photo</h3>
244
			<div id="pivoter-photo" class="d-flex justify-content-around todo">
236
			<div id="pivoter-photo" class="d-flex justify-content-around todo">
245
				<div id="bloc-pivoter-droite" class="d-flex flex-column">
237
				<div id="bloc-pivoter-droite" class="d-flex flex-column">
246
					<label for="pivoter-droite">Pivoter à droite</label>
238
					<label for="pivoter-droite">Pivoter à droite</label>
247
					<a id="pivoter-droite" class="btn btn-success btn-lg"><i class="fas fa-redo"></i></a>
239
					<a id="pivoter-droite" class="btn btn-success btn-lg"><i class="fas fa-redo"></i></a>
248
				</div>
240
				</div>
249
				<div id="bloc-pivoter-gauche" class="d-flex flex-column">
241
				<div id="bloc-pivoter-gauche" class="d-flex flex-column">
250
					<label for="pivoter-gauche">Pivoter à gauche</label>
242
					<label for="pivoter-gauche">Pivoter à gauche</label>
251
					<a id="pivoter-gauche" class="btn btn-success btn-lg"><i class="fas fa-undo"></i></a>
243
					<a id="pivoter-gauche" class="btn btn-success btn-lg"><i class="fas fa-undo"></i></a>
252
				</div>
244
				</div>
253
			</div>
245
			</div>
254
			<h3>Régénérer miniature</h3>
246
			<h3>Régénérer miniature</h3>
255
			<p id="message-regenerer" class="message">
247
			<p id="message-regenerer" class="message">
256
				Vous avez remarqué un problème dans l'affichage de la miniature de cette photo ? Vous pouvez la régénérer ci-dessous !
248
				Vous avez remarqué un problème dans l'affichage de la miniature de cette photo ? Vous pouvez la régénérer ci-dessous !
257
			</p>
249
			</p>
258
			<a id="regenerer-miniature" class="btn btn-warning btn-lg"><i class="fas fa-recycle"></i>&nbsp;Régénérer la miniature</a>
250
			<a id="regenerer-miniature" class="btn btn-warning btn-lg"><i class="fas fa-recycle"></i>&nbsp;Régénérer la miniature</a>
259
		</div>
251
		</div>
260
		<div id="bloc-aide" class="bloc-volet aide hidden todo" data-volet="aide">
252
		<div id="bloc-aide" class="bloc-volet aide hidden todo" data-volet="aide">
261
			<h2>Aide</h2>
253
			<h2>Aide</h2>
262
			<div id="texte-aide" class="message">
254
			<div id="texte-aide" class="message">
263
				<p>
255
				<p>
264
					Cette galerie d'images permet de consulter les photos accompagnant les observations saisies dans le Carnet en Ligne.
256
					Cette galerie d'images permet de consulter les photos accompagnant les observations saisies dans le Carnet en Ligne.
265
					C'est aussi une plateforme collaborative où chacun peut caractériser l'ensemble des photos, grâce à
257
					C'est aussi une plateforme collaborative où chacun peut caractériser l'ensemble des photos, grâce à
266
					un système de votes et de tags.</p>
258
					un système de votes et de tags.</p>
267
 
259
 
268
				<p>Cette caractérisation est mise à disposition des différents projets du réseau, par exemple : la
260
				<p>Cette caractérisation est mise à disposition des différents projets du réseau, par exemple : la
269
					sélection de photos adaptées à la détermination, des projets de sciences participatives et
261
					sélection de photos adaptées à la détermination, des projets de sciences participatives et
270
					observatoires citoyens (Pl@ntNet, Arbres Têtards, etc.), le Défi Photo et tout autre projet qui
262
					observatoires citoyens (Pl@ntNet, Arbres Têtards, etc.), le Défi Photo et tout autre projet qui
271
					nous sera proposé.</p>
263
					nous sera proposé.</p>
272
 
264
 
273
				<p>Pour en savoir plus sur les différents protocoles et le fonctionnement du système de vote (étoile)
265
				<p>Pour en savoir plus sur les différents protocoles et le fonctionnement du système de vote (étoile)
274
					et de tags (étiquette), consulter le wiki d'aide de PictoFlora.
266
					et de tags (étiquette), consulter le wiki d'aide de PictoFlora.
275
					<a href="https://www.tela-botanica.org/wikini/pictoflora/wakka.php?wiki=CommentParticiper" target="_blank">https
267
					<a href="https://www.tela-botanica.org/wikini/pictoflora/wakka.php?wiki=CommentParticiper" target="_blank">https
276
						://www.tela-botanica.org/wikini/pictoflora/wakka.php?wiki=CommentParticiper</a></p>
268
						://www.tela-botanica.org/wikini/pictoflora/wakka.php?wiki=CommentParticiper</a></p>
277
 
269
 
278
				<h3>Cet outil étant collaboratif, chacun peut participer librement !</h3>
270
				<h3>Cet outil étant collaboratif, chacun peut participer librement !</h3>
279
 
271
 
280
				<p>En bas de la photographie, vous trouverez différentes icônes correspondant à des onglets qui
272
				<p>En bas de la photographie, vous trouverez différentes icônes correspondant à des onglets qui
281
					s'afficheront à gauche ou à la place de la photo selon la taille de votre écran. Sur petit écran,
273
					s'afficheront à gauche ou à la place de la photo selon la taille de votre écran. Sur petit écran,
282
					pour cacher l'onglet, cliquer sur la barre avec la double fléche vers le bas.</p>
274
					pour cacher l'onglet, cliquer sur la barre avec la double fléche vers le bas.</p>
283
 
275
 
284
				<p>Le premier onglet <i class="fas fa-info-circle"></i> contient les informations sur l'observation à laquelle est liée la photo
276
				<p>Le premier onglet <i class="fas fa-info-circle"></i> contient les informations sur l'observation à laquelle est liée la photo
285
					ainsi que les liens de téléchargement. Vous trouverez également un lien pour signaler une mauvaise
277
					ainsi que les liens de téléchargement. Vous trouverez également un lien pour signaler une mauvaise
286
					identification.</p>
278
					identification.</p>
287
 
279
 
288
				<p>Le deuxième onglet <i class="far fa-star"></i> permet de voter sur la qualité d'une image selon différents protocoles
280
				<p>Le deuxième onglet <i class="far fa-star"></i> permet de voter sur la qualité d'une image selon différents protocoles
289
					reflettant différents aspects de la photo. Par exemple,
281
					reflettant différents aspects de la photo. Par exemple,
290
					dans le protocole "Défi Photo", la note représente l'appréciation personnelle de l'esthétique de la photo et de son adéquation avec le thème du défi en cours, alors que dans le protocole "Aide à l'identification" la note qualifie la pertinence de la photo pour aider à la détermination de l'espèce.
282
					dans le protocole "Défi Photo", la note représente l'appréciation personnelle de l'esthétique de la photo et de son adéquation avec le thème du défi en cours, alors que dans le protocole "Aide à l'identification" la note qualifie la pertinence de la photo pour aider à la détermination de l'espèce.
291
					Pour noter une photo, choisir un protocole puis utiliser les étoiles qui se colorent en vert. Les notes vont de 1 à 5. Pour supprimer un vote,
283
					Pour noter une photo, choisir un protocole puis utiliser les étoiles qui se colorent en vert. Les notes vont de 1 à 5. Pour supprimer un vote,
292
					cliquer sur la croix à côté des étoiles.</p>
284
					cliquer sur la croix à côté des étoiles.</p>
293
 
285
 
294
				<p>Le troisième onglet <i class="fas fa-tags"></i> permet de qualifier les photos et de leur associer un ou plusieurs
286
				<p>Le troisième onglet <i class="fas fa-tags"></i> permet de qualifier les photos et de leur associer un ou plusieurs
295
					mots-clés ou tags. Vous pourrez également y consulter les tags déjà associés à la photos :</p>
287
					mots-clés ou tags. Vous pourrez également y consulter les tags déjà associés à la photos :</p>
296
				<ul><li>les tags du Carnet en Ligne, qui ont été ajoutés par l'auteur de la photo et apparaissent dans un cadre gris foncé. Ils ne sont pas modifiables depuis PictoFlora, mais seulement depuis le CEL de l'utilisateur qui les a ajoutés.</li>
288
				<ul><li>les tags du Carnet en Ligne, qui ont été ajoutés par l'auteur de la photo et apparaissent dans un cadre gris foncé. Ils ne sont pas modifiables depuis PictoFlora, mais seulement depuis le CEL de l'utilisateur qui les a ajoutés.</li>
297
					<li>les tags dits publics ou tags PictoFlora qui ont été ajoutés via cette interface et apparaissent dans un cadre gris plus clair. Ils sont modifiables par l'ensemble de la communauté (il est donc conseillé de faire un usage non abusif de cette fonctionnalité).</li></ul>
289
					<li>les tags dits publics ou tags PictoFlora qui ont été ajoutés via cette interface et apparaissent dans un cadre gris plus clair. Ils sont modifiables par l'ensemble de la communauté (il est donc conseillé de faire un usage non abusif de cette fonctionnalité).</li></ul>
298
				<p>Pour ajouter un mot-clé, cliquer sur un terme déjà défini comme port, fleur ou feuille, ou ajouter
290
				<p>Pour ajouter un mot-clé, cliquer sur un terme déjà défini comme port, fleur ou feuille, ou ajouter
299
					votre propre tag.</p>
291
					votre propre tag.</p>
300
 
292
 
301
				<p>Le quatrième onglet <i
293
				<p>Le quatrième onglet <i
302
						class="fas fa-redo-alt"></i> permet de modifier une photo en la faisant pivoter ou en régénérant la
294
						class="fas fa-redo-alt"></i> permet de modifier une photo en la faisant pivoter ou en régénérant la
303
					miniature si vous avez remarqué un problème dans son affichage.</p>
295
					miniature si vous avez remarqué un problème dans son affichage.</p>
304
 
296
 
305
				<p>Le cinquième onglet <i
297
				<p>Le cinquième onglet <i
306
						class="fas fa-question-circle"></i> contient cette aide ainsi qu'un lien vers le wiki expliquant comment
298
						class="fas fa-question-circle"></i> contient cette aide ainsi qu'un lien vers le wiki expliquant comment
307
					paramétrer et intégrer ce widget à votre site.</p>
299
					paramétrer et intégrer ce widget à votre site.</p>
308
 
300
 
309
				<p>Vous pouvez passer d'une image à l'autre, en cliquant sur les fléches à gauche ou à droite. Pour
301
				<p>Vous pouvez passer d'une image à l'autre, en cliquant sur les fléches à gauche ou à droite. Pour
310
					refermer une image et retourner à la galerie, cliquer sur la croix en haut à droite.
302
					refermer une image et retourner à la galerie, cliquer sur la croix en haut à droite.
311
				</p>
303
				</p>
312
			</div>
304
			</div>
313
 
305
 
314
			<ul id="aide-plus">
306
			<ul id="aide-plus">
315
				<li id="plus-infos" class="row">
307
				<li id="plus-infos" class="row">
316
					<div class="col-10 label">Plus d'infos sur le wiki</div>
308
					<div class="col-10 label">Plus d'infos sur le wiki</div>
317
					<a class="bouton btn btn-sm btn-outline-secondary" target="_blank"
309
					<a class="bouton btn btn-sm btn-outline-secondary" target="_blank"
318
					   href="https://www.tela-botanica.org/wikini/AideCarnetEnLigne/wakka.php?wiki=AideCELWidgetPhoto" title="Lien vers le wiki"><i
310
					   href="https://www.tela-botanica.org/wikini/AideCarnetEnLigne/wakka.php?wiki=AideCELWidgetPhoto" title="Lien vers le wiki"><i
319
							class="fas fa-question-circle"></i></a>
311
							class="fas fa-question-circle"></i></a>
320
				</li>
312
				</li>
321
				<li id="autres-questions" class="row">
313
				<li id="autres-questions" class="row">
322
					<div class="col-10 label">D'autres questions ? Écrivez-nous !</div>
314
					<div class="col-10 label">D'autres questions ? Écrivez-nous !</div>
323
					<a class="bouton btn btn-sm btn-outline-secondary"
315
					<a class="bouton btn btn-sm btn-outline-secondary"
324
					   href="mailto:cel_remarques@tela-botanica.org"
316
					   href="mailto:cel_remarques@tela-botanica.org"
325
					   title="Envoyer un courriel"><i class="fas fa-envelope"></i></a>
317
					   title="Envoyer un courriel"><i class="fas fa-envelope"></i></a>
326
				</li>
318
				</li>
327
			</ul>
319
			</ul>
328
 
320
 
329
		</div>
321
		</div>
330
 
322
 
331
		<div class="nettoyage-volet bas"></div>
323
		<div class="nettoyage-volet bas"></div>
332
	</div>
324
	</div>
333
 
325
 
334
</div>
326
</div>
335
<div id="info-img-galerie" class="carousel col-lg-8 col-12" data-ride="carousel" data-interval="false">
327
<div id="info-img-galerie" class="carousel col-lg-8 col-12" data-ride="carousel" data-interval="false">
336
	<div class="carousel-inner h-100 w-100">
328
	<div class="carousel-inner h-100 w-100">
337
		<?php $urls = array_keys($infos_images); ?>
329
		<?php $urls = array_keys($infos_images); ?>
338
		<?php for($index = 0; $index < count($urls); $index++):?>
330
		<?php for($index = 0; $index < count($urls); $index++):?>
339
			<div id="img-cadre-<?php echo $index; ?>" class="carousel-item">
331
			<div id="img-cadre-<?php echo $index; ?>" class="carousel-item">
340
				<img id="illustration-<?php echo $index;?>" class="d-block align-middle" src="<?php echo $urls[$index];?>" alt="" data-width="<?php echo $infos_image[$urls[$index]]['width'];?>" data-height="<?php echo $infos_image[$urls[$index]]['height'];?>">
332
				<img id="illustration-<?php echo $index;?>" class="d-block align-middle" src="<?php echo $urls[$index];?>" alt="" data-width="<?php echo $infos_image[$urls[$index]]['width'];?>" data-height="<?php echo $infos_image[$urls[$index]]['height'];?>">
341
			</div>
333
			</div>
342
		<?php endfor; ?>
334
		<?php endfor; ?>
343
		<a id="precedent" class="carousel-control-prev carousel-control" href="#info-img-galerie" role="button" data-slide="prev">
335
		<a id="precedent" class="carousel-control-prev carousel-control" href="#info-img-galerie" role="button" data-slide="prev">
344
			<i class="fas fa-chevron-circle-left"></i>
336
			<i class="fas fa-chevron-circle-left"></i>
345
			<span class="sr-only">Precedent</span>
337
			<span class="sr-only">Precedent</span>
346
		</a>
338
		</a>
347
		<a id="suivant" class="carousel-control-next carousel-control" href="#info-img-galerie" role="button" data-slide="next">
339
		<a id="suivant" class="carousel-control-next carousel-control" href="#info-img-galerie" role="button" data-slide="next">
348
			<i class="fas fa-chevron-circle-right"></i>
340
			<i class="fas fa-chevron-circle-right"></i>
349
			<span class="sr-only">Suivant</span>
341
			<span class="sr-only">Suivant</span>
350
		</a>
342
		</a>
351
	</div>
343
	</div>
352
</div>
344
</div>
353
<div id="boutons-footer">
345
<div id="boutons-footer">
354
	<div id="bloc-fct" class="">
346
	<div id="bloc-fct" class="">
355
		<a id="bouton-meta" class="btn bouton-fct meta actif" data-volet="meta"
347
		<a id="bouton-meta" class="btn bouton-fct meta actif" data-volet="meta"
356
		   title="Informations / métadonnées"><i class="fas fa-info-circle"></i></a>
348
		   title="Informations / métadonnées"><i class="fas fa-info-circle"></i></a>
357
		<a id="bouton-noter" class="btn bouton-fct noter" data-volet="noter"
349
		<a id="bouton-noter" class="btn bouton-fct noter" data-volet="noter"
358
		   title="noter la photo"><i class="far fa-star"></i></a>
350
		   title="noter la photo"><i class="far fa-star"></i></a>
359
		<a id="bouton-tags" class="btn bouton-fct tags todo" data-volet="tags"
351
		<a id="bouton-tags" class="btn bouton-fct tags todo" data-volet="tags"
360
		   title="tags"><i class="fas fa-tags"></i></a>
352
		   title="tags"><i class="fas fa-tags"></i></a>
361
		<a id="bouton-signaler" class="btn bouton-fct signaler todo hidden" data-volet="signaler" title="signaler"><i
353
		<a id="bouton-signaler" class="btn bouton-fct signaler todo hidden" data-volet="signaler" title="signaler"><i
362
				class="fas fa-exclamation-triangle"></i></a>
354
				class="fas fa-exclamation-triangle"></i></a>
363
		<a id="bouton-revision" class="btn bouton-fct revision todo hidden" data-volet="revision" title="révision"><i
355
		<a id="bouton-revision" class="btn bouton-fct revision todo hidden" data-volet="revision" title="révision"><i
364
				class="fas fa-edit"></i></a>
356
				class="fas fa-edit"></i></a>
365
		<a id="bouton-modif" class="btn bouton-fct modif" data-volet="modif" title="modifier la photo"><i
357
		<a id="bouton-modif" class="btn bouton-fct modif" data-volet="modif" title="modifier la photo"><i
366
				class="fas fa-redo-alt"></i></a>
358
				class="fas fa-redo-alt"></i></a>
367
		<a id="bouton-aide" class="btn bouton-fct aide todo" data-volet="aide" title="aide"><i
359
		<a id="bouton-aide" class="btn bouton-fct aide todo" data-volet="aide" title="aide"><i
368
				class="fas fa-question-circle"></i></a>
360
				class="fas fa-question-circle"></i></a>
369
	</div>
361
	</div>
370
	<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>
362
	<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>
371
</div>
363
</div>
372
<script type="text/Javascript">
364
<script type="text/Javascript">
373
	//<![CDATA[
365
	//<![CDATA[
374
		var widgetProp = {
366
		var widgetProp = {
375
			'keys':[<?php echo '"'.implode($keys, '","').'"'; ?>],
367
			'keys':[<?php echo '"'.implode($keys, '","').'"'; ?>],
376
			'urlWidget'                    : "<?php echo $url_widget; ?>",
368
			'urlWidget'                    : "<?php echo $url_widget; ?>",
377
			'urls'                         : [<?php echo '"'.implode($urls, '","').'"'; ?>],
369
			'urls'                         : [<?php echo '"'.implode($urls, '","').'"'; ?>],
378
			'infosImages'                  : <?php echo json_encode($infos_images); ?>,
370
			'infosImages'                  : <?php echo json_encode($infos_images); ?>,
379
			'urlImage'                     : "<?php echo $url_image; ?>",
371
			'urlImage'                     : "<?php echo $url_image; ?>",
380
			'indexPremiereImage'           : <?php echo array_search($url_image, $urls); ?>,
372
			'indexPremiereImage'           : <?php echo array_search($url_image, $urls); ?>,
381
			'tailleMax'                    : 580,
373
			'tailleMax'                    : 580,
382
			'popupUrl'                     : "<?php echo $popup_url; ?>",
374
			'popupUrl'                     : "<?php echo $popup_url; ?>",
383
			'urlBaseTelechargement'        : "<?php echo $url_base_telechargement; ?>",
375
			'urlBaseTelechargement'        : "<?php echo $url_base_telechargement; ?>",
384
			'urlServiceRegenererMiniature' : "<?php echo $url_ws_regenerer_img; ?>",
376
			'urlServiceRegenererMiniature' : "<?php echo $url_ws_regenerer_img; ?>",
-
 
377
			'urlServiceDel' 			   : "<?php echo $del_url; ?>",
385
			'userId'       				   : "<?php echo $userId; ?>",
378
			'userId'       				   : "<?php echo $userId; ?>",
386
			'token'       				   : "<?php echo $token; ?>",
379
			'token'       				   : "<?php echo $token; ?>",
387
			'protocoles'				   : <?php echo json_encode($protocoles); ?>
380
			'protocoles'				   : <?php echo json_encode($protocoles); ?>
388
		};
381
		};
389
		$( document ).ready( function() {
382
		$( document ).ready( function() {
390
			popup = new WidgetPhotoPopup( widgetProp );
383
			popup = new WidgetPhotoPopup( widgetProp );
391
			popup.init();
384
			popup.init();
392
		});
385
		});
393
	//]]>
386
	//]]>
394
</script>
387
</script>