Subversion Repositories eFlore/Applications.cel

Rev

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

Rev 3948 Rev 3950
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
			<h3>Tags Pictoflora</h3>
12
			<h3>Tags Pictoflora</h3>
13
			<div id="tags-pf">
13
			<div id="tags-pf">
14
				<a id="port" class="btn tag">Port</a><!--
14
				<a id="port" class="btn tag">Port</a><!--
15
				--><a id="fleur" class="btn tag">Fleur</a><!--
15
				--><a id="fleur" class="btn tag">Fleur</a><!--
16
				--><a id="fruit" class="btn tag">Fruit</a><!--
16
				--><a id="fruit" class="btn tag">Fruit</a><!--
17
				--><a id="feuille" class="btn tag">Feuille</a><!--
17
				--><a id="feuille" class="btn tag">Feuille</a><!--
18
				--><a id="ecorce" class="btn tag">Ecorce</a><!--
18
				--><a id="ecorce" class="btn tag">Ecorce</a><!--
19
				--><a id="rameau" class="btn tag">Rameau</a><!--
19
				--><a id="rameau" class="btn tag">Rameau</a><!--
20
				--><a id="planche" class="btn tag">Planche</a><!--
20
				--><a id="planche" class="btn tag">Planche</a><!--
21
				--><a id="insecte" class="btn tag">Insecte</a>
21
				--><a id="insecte" class="btn tag">Insecte</a>
22
			</div>
22
			</div>
23
			<label for="saisir-tag">Saisir un tag</label>
23
			<label for="saisir-tag">Saisir un tag</label>
24
			<input type="text" class="form-control" id="saisir-tag" name="saisir-tag">
24
			<input type="text" class="form-control" id="saisir-tag" name="saisir-tag">
25
			<div id="tags-pf-supp"></div>
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>
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>
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>
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>
28
		</div>
28
		</div>
29
		<div id="bloc-noter" class="bloc-volet noter hidden todo" data-volet="noter">
29
		<div id="bloc-noter" class="bloc-volet noter hidden todo" data-volet="noter">
30
			<h2>Protocoles</h2>
30
			<h2>Protocoles</h2>
31
			<select name="protocole" id="protocole" class="form-control custom-select">
31
			<select name="protocole" id="protocole" class="form-control custom-select">
32
				<option value="" selected hidden>Choix du protocole</option>
32
				<option value="" selected hidden>Choix du protocole</option>
33
				<option id="capitalisation_image" value="capitalisation_image">Capitalisation d'images</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>
34
				<option id="aide_identification" value="aide_identification">Aide à l'identification</option>
35
				<option id="defi_photo" value="defi_photo">Défi photo</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>
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>
37
				<option id="arbres_tetards" value="arbres_tetards">Arbres têtards</option>
38
			</select>
38
			</select>
39
			<p id="message-protocole" class="message mt-3">
39
			<p id="message-protocole" class="message mt-3">
40
				Choisissez un protocole pour pouvoir noter la photo
40
				Choisissez un protocole pour pouvoir noter la photo
41
				<!-- le message change en fonction du protocole -->
41
				<!-- le message change en fonction du protocole -->
42
			</p>
42
			</p>
43
			<div id="bloc-notes-protocole" class="hidden">
43
			<div id="bloc-notes-protocole" class="hidden">
44
				<ul id="notes-protocole-fct">
44
				<ul id="notes-protocole-fct">
45
					<li id="plus-infos-protocole" class="row">
45
					<li id="plus-infos-protocole" class="row">
46
						<div class="col-10 label">Plus d'infos sur le wiki</div>
46
						<div class="col-10 label">Plus d'infos sur le wiki</div>
47
						<a class="bouton btn btn-sm btn-outline-secondary" href="https://www.tela-botanica.org/wikini/AideCarnetEnLigne/wakka.php?wiki=AideWidgetPhoto" target="_blank"><i
47
						<a class="bouton btn btn-sm btn-outline-secondary" href="https://www.tela-botanica.org/wikini/AideCarnetEnLigne/wakka.php?wiki=AideWidgetPhoto" target="_blank"><i
48
								class="fas fa-question-circle"></i></a>
48
								class="fas fa-question-circle"></i></a>
49
					</li>
49
					</li>
50
					<li id="note" class="row">
50
					<li id="note" class="row">
51
						<div class="col-5 label">Notez</div>
51
						<div class="col-5 label">Notez</div>
52
						<div class="col-5 contenu"><!-- étoiles -->
52
						<div class="col-5 contenu"><!-- étoiles -->
53
							<i id="rating-star-1" class="far fa-star notation-star"></i>
53
							<i id="rating-star-1" class="far fa-star notation-star"></i>
54
							<i id="rating-star-2" class="far fa-star notation-star"></i>
54
							<i id="rating-star-2" class="far fa-star notation-star"></i>
55
							<i id="rating-star-3" class="far fa-star notation-star"></i>
55
							<i id="rating-star-3" class="far fa-star notation-star"></i>
56
							<i id="rating-star-4" class="far fa-star notation-star"></i>
56
							<i id="rating-star-4" class="far fa-star notation-star"></i>
57
							<i id="rating-star-5" class="far fa-star notation-star"></i>
57
							<i id="rating-star-5" class="far fa-star notation-star"></i>
58
						</div>
58
						</div>
59
							<a id="note-remove"
59
							<a id="note-remove"
60
							   class="bouton btn btn-sm btn-outline-secondary"><i class="fas fa-backspace"></i></a>
60
							   class="bouton btn btn-sm btn-outline-secondary"><i class="fas fa-backspace"></i></a>
61
					</li>
61
					</li>
62
					<li id="note-moyenne" class="row d-flex justify-content-between">
62
					<li id="note-moyenne" class="row d-flex justify-content-between">
63
						<div class="col-5 label">Note Moyenne</div>
63
						<div class="col-5 label">Note Moyenne</div>
64
						<div class="col-5 contenu" style="text-align:right;"></div>
64
						<div class="col-5 contenu" style="text-align:right;"></div>
65
					</li>
65
					</li>
66
					<li id="note-count" class="row d-flex justify-content-between">
66
					<li id="note-count" class="row d-flex justify-content-between">
67
						<div class="col-5 label">Nombre de votes</div>
67
						<div class="col-5 label">Nombre de votes</div>
68
						<div class="col-5 contenu" style="text-align:right;"></div>
68
						<div class="col-5 contenu" style="text-align:right;"></div>
69
					</li>
69
					</li>
70
				</ul>
70
				</ul>
71
			</div>
71
			</div>
72
		</div>
72
		</div>
73
		<div id="bloc-signaler" class="bloc-volet signaler hidden todo" data-volet="signaler">
73
		<div id="bloc-signaler" class="bloc-volet signaler hidden todo" data-volet="signaler">
74
			<h2>Signaler</h2>
74
			<h2>Signaler</h2>
75
			<h3>Signaler une photo inappropriée</h3>
75
			<h3>Signaler une photo inappropriée</h3>
76
			<p id="message-signaler" class="message">
76
			<p id="message-signaler" class="message">
77
				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.
77
				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.
78
			</p>
78
			</p>
79
			<li id="exemple-inapproprie" class="row">
79
			<li id="exemple-inapproprie" class="row">
80
				<div class="col-10 label">Exemple de photos inappropriées</div>
80
				<div class="col-10 label">Exemple de photos inappropriées</div>
81
				<a class="bouton btn btn-sm btn-outline-secondary"><i class="fas fa-question-circle"></i></a>
81
				<a class="bouton btn btn-sm btn-outline-secondary"><i class="fas fa-question-circle"></i></a>
82
			</li>
82
			</li>
83
			<li id="plus-infos-signaler" class="row">
83
			<li id="plus-infos-signaler" class="row">
84
				<div class="col-10 label">Plus d'infos sur le wiki</div>
84
				<div class="col-10 label">Plus d'infos sur le wiki</div>
-
 
85
				<a class="bouton btn btn-sm btn-outline-secondary"
85
				<a class="bouton btn btn-sm btn-outline-secondary" target="_blank"><i class="fas fa-question-circle"></i></a>
86
				   href="https://www.tela-botanica.org/wikini/AideCarnetEnLigne/wakka.php?wiki=AideWidgetPhoto" target="_blank"><i class="fas fa-question-circle"></i></a>
86
			</li>
87
			</li>
87
			<form id="type-inapprorie">
88
			<form id="type-inapprorie">
88
				<div class="list-label">
89
				<div class="list-label">
89
					En quoi cette photo est-elle inappropriée ?
90
					En quoi cette photo est-elle inappropriée ?
90
				</div>
91
				</div>
91
				<div class="list">
92
				<div class="list">
92
					<div class="form-check">
93
					<div class="form-check">
93
						<input type="checkbox" id="non-vegetale" name="type-inapprorie" class="non-vegetale form-check-input" value="non-vegetale">
94
						<input type="checkbox" id="non-vegetale" name="type-inapprorie" class="non-vegetale form-check-input" value="non-vegetale">
94
						<label for="non-vegetale" class="non-vegetale form-check-label">Photo non végétale</label>
95
						<label for="non-vegetale" class="non-vegetale form-check-label">Photo non végétale</label>
95
					</div>
96
					</div>
96
					<div class="form-check">
97
					<div class="form-check">
97
						<input type="checkbox" id="ecran" name="type-inapprorie" class="ecran form-check-input" value="ecran">
98
						<input type="checkbox" id="ecran" name="type-inapprorie" class="ecran form-check-input" value="ecran">
98
						<label for="ecran" class="ecran form-check-label">Photo d'écran</label>
99
						<label for="ecran" class="ecran form-check-label">Photo d'écran</label>
99
					</div>
100
					</div>
100
					<div class="form-check">
101
					<div class="form-check">
101
						<input type="checkbox" id="floue-pixelisee" name="type-inapprorie" class="floue-pixelisee form-check-input" value="floue-pixelisee">
102
						<input type="checkbox" id="floue-pixelisee" name="type-inapprorie" class="floue-pixelisee form-check-input" value="floue-pixelisee">
102
						<label for="floue-pixelisee" class="floue-pixelisee form-check-label">Photo floue ou pixelisée</label>
103
						<label for="floue-pixelisee" class="floue-pixelisee form-check-label">Photo floue ou pixelisée</label>
103
					</div>
104
					</div>
104
					<div class="form-check">
105
					<div class="form-check">
105
						<input type="checkbox" id="cultivee-pot" name="type-inapprorie" class="cultivee-pot form-check-input" value="cultivee-pot">
106
						<input type="checkbox" id="cultivee-pot" name="type-inapprorie" class="cultivee-pot form-check-input" value="cultivee-pot">
106
						<label for="cultivee-pot" class="cultivee-pot form-check-label">Plante cultivée / en pot</label>
107
						<label for="cultivee-pot" class="cultivee-pot form-check-label">Plante cultivée / en pot</label>
107
					</div>
108
					</div>
108
				</div>
109
				</div>
109
			</form>
110
			</form>
110
			<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>
111
			<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>
111
		</div>
112
		</div>
112
 
113
 
113
 
114
 
114
		<!-- pas pour la version 1 -->
115
		<!-- pas pour la version 1 -->
115
		<div id="bloc-revision" class="bloc-volet revision hidden todo" data-volet="revision">
116
		<div id="bloc-revision" class="bloc-volet revision hidden todo" data-volet="revision">
116
			<h2>Révision</h2>
117
			<h2>Révision</h2>
117
			<h3>Proposition de détermination</h3>
118
			<h3>Proposition de détermination</h3>
118
 
119
 
119
		</div>
120
		</div>
120
 
121
 
121
 
122
 
122
 
123
 
123
		<div id="bloc-meta" class="bloc-volet meta" data-volet="meta">
124
		<div id="bloc-meta" class="bloc-volet meta" data-volet="meta">
124
			<h2>Métadonnées</h2>
125
			<h2>Métadonnées</h2>
125
			<ul id="contenu-meta">
126
			<ul id="contenu-meta">
126
				<li id="nom" class="row">
127
				<li id="nom" class="row">
127
					<div class="col-5 label">Nom</div>
128
					<div class="col-5 label">Nom</div>
128
					<div class="col-5 contenu"></div>
129
					<div class="col-5 contenu"></div>
129
					<a class="bouton btn btn-sm btn-outline-secondary" target="_blank"><i class="fas fa-search"></i></a>
130
					<a class="bouton btn btn-sm btn-outline-secondary" target="_blank"><i class="fas fa-search"></i></a>
130
				</li>
131
				</li>
131
				<li id="localisation" class="row">
132
				<li id="localisation" class="row">
132
					<div class="col-5 label">Localisation</div>
133
					<div class="col-5 label">Localisation</div>
133
					<div class="col-5 contenu"></div>
134
					<div class="col-5 contenu"></div>
134
					<a id="obs-localisation" class="bouton btn btn-sm btn-outline-secondary"><i class="fas fa-map-marker-alt"></i></a>
135
					<a id="obs-localisation" class="bouton btn btn-sm btn-outline-secondary"><i class="fas fa-map-marker-alt"></i></a>
135
				</li>
136
				</li>
136
				<li id="auteur" class="row">
137
				<li id="auteur" class="row">
137
					<div class="col-5 label">Auteur</div>
138
					<div class="col-5 label">Auteur</div>
138
					<div class="col-5 contenu"></div>
139
					<div class="col-5 contenu"></div>
139
					<a class="bouton btn btn-sm btn-outline-secondary" target="_blank"><i class="fas fa-user"></i></a>
140
					<a class="bouton btn btn-sm btn-outline-secondary" target="_blank"><i class="fas fa-user"></i></a>
140
				</li>
141
				</li>
141
				<li id="date-obs" class="row">
142
				<li id="date-obs" class="row">
142
					<div class="col-5 label">Date d'observation</div>
143
					<div class="col-5 label">Date d'observation</div>
143
					<div class="col-5 contenu"></div>
144
					<div class="col-5 contenu"></div>
144
				</li>
145
				</li>
145
				<li id="commentaire" class="row">
146
				<li id="commentaire" class="row">
146
					<div class="col-5 label">Commentaires</div>
147
					<div class="col-5 label">Commentaires</div>
147
					<div class="col-5 contenu"></div>
148
					<div class="col-5 contenu"></div>
148
				</li>
149
				</li>
149
				<li id="certitude" class="row">
150
				<li id="certitude" class="row">
150
					<div class="col-5 label">Certitude de l'identification</div>
151
					<div class="col-5 label">Certitude de l'identification</div>
151
					<div class="col-5 contenu"></div>
152
					<div class="col-5 contenu"></div>
152
				</li>
153
				</li>
153
				<li id="fiabilite" class="row">
154
				<li id="fiabilite" class="row">
154
					<div class="col-5 label">Grade</div>
155
					<div class="col-5 label">Grade</div>
155
					<div class="col-5 contenu"></div>
156
					<div class="col-5 contenu"></div>
156
					<a class="bouton btn btn-sm btn-outline-secondary todo"><i class="fas fa-question-circle"></i></a>
157
					<a class="bouton btn btn-sm btn-outline-secondary todo"><i class="fas fa-question-circle"></i></a>
157
				</li>
158
				</li>
158
			</ul>
159
			</ul>
159
			<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>
160
			<ul id="contenu-meta-plus"></ul>
161
			<ul id="contenu-meta-plus"></ul>
161
			<ul id="contenu-meta-suite">
162
			<ul id="contenu-meta-suite">
162
				<li id="num-photo" class="row">
163
				<li id="num-photo" class="row">
163
					<div class="col-5 label">Photo n°</div>
164
					<div class="col-5 label">Photo n°</div>
164
					<div class="col-5 contenu"></div>
165
					<div class="col-5 contenu"></div>
165
				</li>
166
				</li>
166
				<li id="licence" class="row">
167
				<li id="licence" class="row">
167
					<div class="col-5 label">Licence</div>
168
					<div class="col-5 label">Licence</div>
168
					<div class="col-5 contenu">
169
					<div class="col-5 contenu">
169
						<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>
170
					</div>
171
					</div>
171
				</li>
172
				</li>
172
			</ul>
173
			</ul>
173
 
174
 
174
			<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>
175
			<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>
175
 
176
 
176
			<h2>Téléchargement</h2>
177
			<h2>Téléchargement</h2>
177
			<ul id="contenu-telechargement">
178
			<ul id="contenu-telechargement">
178
				<li id="titre-original" class="row">
179
				<li id="titre-original" class="row">
179
					<div class="col-5 label">Titre original</div>
180
					<div class="col-5 label">Titre original</div>
180
					<div class="col-7 contenu"></div>
181
					<div class="col-7 contenu"></div>
181
				</li>
182
				</li>
182
				<li id="date-photo" class="row">
183
				<li id="date-photo" class="row">
183
					<div class="col-5 label">Date de la photo</div>
184
					<div class="col-5 label">Date de la photo</div>
184
					<div class="col-7 contenu"></div>
185
					<div class="col-7 contenu"></div>
185
				</li>
186
				</li>
186
				<li id="Licence-bis" class="row">
187
				<li id="Licence-bis" class="row">
187
					<div class="col-5 label">Licence</div>
188
					<div class="col-5 label">Licence</div>
188
					<div class="col-7 contenu">
189
					<div class="col-7 contenu">
189
						<a target="_blank" href="http://creativecommons.org/licenses/by-sa/2.0/fr/">CC-BY-SA 2.0 FR</a>
190
						<a target="_blank" href="http://creativecommons.org/licenses/by-sa/2.0/fr/">CC-BY-SA 2.0 FR</a>
190
					</div>
191
					</div>
191
				</li>
192
				</li>
192
				<li id="attribution" class="row">
193
				<li id="attribution" class="row">
193
					<div class="col-12 label">Attribution</div>
194
					<div class="col-12 label">Attribution</div>
194
					<div class="col-12 contenu">
195
					<div class="col-12 contenu">
195
						<input id="attribution-copy" type="text" name="attribution-copy" rows="4" class="form-control" readonly="readonly" style="width: 100%; height: 100%;">
196
						<input id="attribution-copy" type="text" name="attribution-copy" rows="4" class="form-control" readonly="readonly" style="width: 100%; height: 100%;">
196
					</div>
197
					</div>
197
				</li>
198
				</li>
198
				<li id="url" class="row">
199
				<li id="url" class="row">
199
					<div class="col-12 label">Url</div>
200
					<div class="col-12 label">Url</div>
200
					<div class="col-12 contenu">
201
					<div class="col-12 contenu">
201
						<input id="url-copy" type="text" name="url-copy" rows="2" class="form-control" readonly="readonly" style="width: 100%; height: 100%;">
202
						<input id="url-copy" type="text" name="url-copy" rows="2" class="form-control" readonly="readonly" style="width: 100%; height: 100%;">
202
					</div>
203
					</div>
203
				</li>
204
				</li>
204
			</ul>
205
			</ul>
205
			<ul id="contenu-telechargement-suite" class="mb-0">
206
			<ul id="contenu-telechargement-suite" class="mb-0">
206
				<li id="autres-formats" class="row">
207
				<li id="autres-formats" class="row">
207
					<div class="col-12 label">Autres formats</div>
208
					<div class="col-12 label">Autres formats</div>
208
					<div class="col-12 contenu">
209
					<div class="col-12 contenu">
209
						<select name="formats" id="formats" class="form-control custom-select">
210
						<select name="formats" id="formats" class="form-control custom-select">
210
						<?php foreach ($formats_description as $format => $description):?>
211
						<?php foreach ($formats_description as $format => $description):?>
211
							<option value="<?php echo $format; ?>" <?php echo $format === 'O' ? 'selected' : ''; ?>><?php echo $description; ?></option>
212
							<option value="<?php echo $format; ?>" <?php echo $format === 'O' ? 'selected' : ''; ?>><?php echo $description; ?></option>
212
						<?php endforeach; ?>
213
						<?php endforeach; ?>
213
						</select>
214
						</select>
214
					</div>
215
					</div>
215
				</li>
216
				</li>
216
			</ul>
217
			</ul>
217
			<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>
218
			<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>
218
			<h2 class="todo">Partagez !</h2>
219
			<h2 class="todo">Partagez !</h2>
219
			<p class="message todo">
220
			<p class="message todo">
220
				Partagez cette photo sur les réseaux sociaux
221
				Partagez cette photo sur les réseaux sociaux
221
			</p>
222
			</p>
222
			<div id="boutons-reseaux-sociaux" class="todo">
223
			<div id="boutons-reseaux-sociaux" class="todo">
223
				<a id="facebook" class="btn btn-outline-secondary btn-lg"><i class="fab fa-facebook-f"></i></a>
224
				<a id="facebook" class="btn btn-outline-secondary btn-lg"
-
 
225
				   href="https://www.facebook.com/telabotanica/" target="_blank"><i class="fab fa-facebook-f"></i></a>
224
				<a id="twitter" class="btn btn-outline-secondary btn-lg"><i class="fab fa-twitter"></i></a>
226
				<a id="twitter" class="btn btn-outline-secondary btn-lg" href="https://twitter.com/TelaBotanica" target="_blank"><i
-
 
227
						class="fab fa-twitter"></i></a>
225
				<a id="mail" class="btn btn-outline-secondary btn-lg"><i class="fas fa-envelope"></i></a>
228
				<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>
226
			</div>
230
			</div>
227
		</div>
231
		</div>
228
		<div id="bloc-modif" class="bloc-volet modif hidden" data-volet="modif">
232
		<div id="bloc-modif" class="bloc-volet modif hidden" data-volet="modif">
229
			<h2>Modifier la photo</h2>
233
			<h2>Modifier la photo</h2>
230
			<h3 class="todo">Faire pivoter la photo</h3>
234
			<h3 class="todo">Faire pivoter la photo</h3>
231
			<div id="pivoter-photo" class="d-flex justify-content-around todo">
235
			<div id="pivoter-photo" class="d-flex justify-content-around todo">
232
				<div id="bloc-pivoter-droite" class="d-flex flex-column">
236
				<div id="bloc-pivoter-droite" class="d-flex flex-column">
233
					<label for="pivoter-droite">Pivoter à droite</label>
237
					<label for="pivoter-droite">Pivoter à droite</label>
234
					<a id="pivoter-droite" class="btn btn-success btn-lg"><i class="fas fa-redo"></i></a>
238
					<a id="pivoter-droite" class="btn btn-success btn-lg"><i class="fas fa-redo"></i></a>
235
				</div>
239
				</div>
236
				<div id="bloc-pivoter-gauche" class="d-flex flex-column">
240
				<div id="bloc-pivoter-gauche" class="d-flex flex-column">
237
					<label for="pivoter-gauche">Pivoter à gauche</label>
241
					<label for="pivoter-gauche">Pivoter à gauche</label>
238
					<a id="pivoter-gauche" class="btn btn-success btn-lg"><i class="fas fa-undo"></i></a>
242
					<a id="pivoter-gauche" class="btn btn-success btn-lg"><i class="fas fa-undo"></i></a>
239
				</div>
243
				</div>
240
			</div>
244
			</div>
241
			<h3>Régénérer miniature</h3>
245
			<h3>Régénérer miniature</h3>
242
			<p id="message-regenerer" class="message">
246
			<p id="message-regenerer" class="message">
243
				Vous avez remarqué un problème dans l'affichage de la miniature de cette photo ? Vous pouvez la régénérer ci-dessous !
247
				Vous avez remarqué un problème dans l'affichage de la miniature de cette photo ? Vous pouvez la régénérer ci-dessous !
244
			</p>
248
			</p>
245
			<a id="regenerer-miniature" class="btn btn-warning btn-lg"><i class="fas fa-recycle"></i>&nbsp;Régénérer la miniature</a>
249
			<a id="regenerer-miniature" class="btn btn-warning btn-lg"><i class="fas fa-recycle"></i>&nbsp;Régénérer la miniature</a>
246
		</div>
250
		</div>
247
		<div id="bloc-aide" class="bloc-volet aide hidden todo" data-volet="aide">
251
		<div id="bloc-aide" class="bloc-volet aide hidden todo" data-volet="aide">
248
			<h2>Aide</h2>
252
			<h2>Aide</h2>
249
			<p id="texte-aide" class="message">
253
			<p id="texte-aide" class="message">
250
				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.
254
				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.
251
 
255
 
252
				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.
256
				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.
253
 
257
 
254
				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.
258
				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.
255
			</p>
259
			</p>
256
			<ul id="aide-plus">
260
			<ul id="aide-plus">
257
				<li id="plus-infos" class="row">
261
				<li id="plus-infos" class="row">
258
					<div class="col-10 label">Plus d'infos sur le wiki</div>
262
					<div class="col-10 label">Plus d'infos sur le wiki</div>
259
					<a class="bouton btn btn-sm btn-outline-secondary" target="_blank"><i class="fas fa-question-circle"></i></a>
263
					<a class="bouton btn btn-sm btn-outline-secondary" target="_blank" href="https://www.tela-botanica.org/wikini/AideCarnetEnLigne/wakka.php?wiki=AideWidgetPhoto"><i
-
 
264
							class="fas fa-question-circle"></i></a>
260
				</li>
265
				</li>
261
				<li id="autres-questions" class="row">
266
				<li id="autres-questions" class="row">
262
					<div class="col-10 label">D'autres questions ? Écrivez-nous !</div>
267
					<div class="col-10 label">D'autres questions ? Écrivez-nous !</div>
-
 
268
					<a class="bouton btn btn-sm btn-outline-secondary"
263
					<a class="bouton btn btn-sm btn-outline-secondary"><i class="fas fa-envelope"></i></a>
269
					   href="mailto:cel_remarques@tela-botanica.org"><i class="fas fa-envelope"></i></a>
264
				</li>
270
				</li>
265
			</ul>
271
			</ul>
266
 
272
 
267
		</div>
273
		</div>
268
 
274
 
269
		<div class="nettoyage-volet bas"></div>
275
		<div class="nettoyage-volet bas"></div>
270
	</div>
276
	</div>
271
 
277
 
272
</div>
278
</div>
273
<div id="info-img-galerie" class="carousel col-lg-8 col-12" data-ride="carousel" data-interval="false">
279
<div id="info-img-galerie" class="carousel col-lg-8 col-12" data-ride="carousel" data-interval="false">
274
	<div class="carousel-inner h-100 w-100">
280
	<div class="carousel-inner h-100 w-100">
275
		<?php $urls = array_keys($infos_images); ?>
281
		<?php $urls = array_keys($infos_images); ?>
276
		<?php for($index = 0; $index < count($urls); $index++):?>
282
		<?php for($index = 0; $index < count($urls); $index++):?>
277
			<div id="img-cadre-<?php echo $index; ?>" class="carousel-item">
283
			<div id="img-cadre-<?php echo $index; ?>" class="carousel-item">
278
				<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'];?>">
284
				<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'];?>">
279
			</div>
285
			</div>
280
		<?php endfor; ?>
286
		<?php endfor; ?>
281
		<a id="precedent" class="carousel-control-prev carousel-control" href="#info-img-galerie" role="button" data-slide="prev">
287
		<a id="precedent" class="carousel-control-prev carousel-control" href="#info-img-galerie" role="button" data-slide="prev">
282
			<i class="fas fa-chevron-circle-left"></i>
288
			<i class="fas fa-chevron-circle-left"></i>
283
			<span class="sr-only">Precedent</span>
289
			<span class="sr-only">Precedent</span>
284
		</a>
290
		</a>
285
		<a id="suivant" class="carousel-control-next carousel-control" href="#info-img-galerie" role="button" data-slide="next">
291
		<a id="suivant" class="carousel-control-next carousel-control" href="#info-img-galerie" role="button" data-slide="next">
286
			<i class="fas fa-chevron-circle-right"></i>
292
			<i class="fas fa-chevron-circle-right"></i>
287
			<span class="sr-only">Suivant</span>
293
			<span class="sr-only">Suivant</span>
288
		</a>
294
		</a>
289
	</div>
295
	</div>
290
</div>
296
</div>
291
<div id="boutons-footer">
297
<div id="boutons-footer">
292
	<div id="bloc-fct" class="">
298
	<div id="bloc-fct" class="">
293
		<a id="bouton-tags" class="btn bouton-fct tags todo" data-volet="tags"><i class="fas fa-tags"></i></a>
299
		<a id="bouton-tags" class="btn bouton-fct tags todo" data-volet="tags"><i class="fas fa-tags"></i></a>
294
		<a id="bouton-noter" class="btn bouton-fct noter todo" data-volet="noter"><i class="far fa-star"></i></a>
300
		<a id="bouton-noter" class="btn bouton-fct noter todo" data-volet="noter"><i class="far fa-star"></i></a>
295
		<a id="bouton-signaler" class="btn bouton-fct signaler todo" data-volet="signaler"><i class="fas fa-exclamation-triangle"></i></a>
301
		<a id="bouton-signaler" class="btn bouton-fct signaler todo" data-volet="signaler"><i class="fas fa-exclamation-triangle"></i></a>
296
		<a id="bouton-revision" class="btn bouton-fct revision todo" data-volet="revision"><i class="fas fa-edit"></i></a>
302
		<a id="bouton-revision" class="btn bouton-fct revision todo" data-volet="revision"><i class="fas fa-edit"></i></a>
297
		<a id="bouton-meta" class="btn bouton-fct meta actif" data-volet="meta"><i class="fas fa-info-circle"></i></a>
303
		<a id="bouton-meta" class="btn bouton-fct meta actif" data-volet="meta"><i class="fas fa-info-circle"></i></a>
298
		<a id="bouton-modif" class="btn bouton-fct modif" data-volet="modif"><i class="fas fa-redo-alt"></i></a>
304
		<a id="bouton-modif" class="btn bouton-fct modif" data-volet="modif"><i class="fas fa-redo-alt"></i></a>
299
		<a id="bouton-aide" class="btn bouton-fct aide todo" data-volet="aide"><i class="fas fa-question-circle"></i></a>
305
		<a id="bouton-aide" class="btn bouton-fct aide todo" data-volet="aide"><i class="fas fa-question-circle"></i></a>
300
	</div>
306
	</div>
301
	<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>
307
	<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>
302
</div>
308
</div>
303
<script type="text/Javascript">
309
<script type="text/Javascript">
304
	//<![CDATA[
310
	//<![CDATA[
305
		var widgetProp = {
311
		var widgetProp = {
306
			'keys':[<?php echo '"'.implode($keys, '","').'"'; ?>],
312
			'keys':[<?php echo '"'.implode($keys, '","').'"'; ?>],
307
			'urlWidget'                    : "<?php echo $url_widget; ?>",
313
			'urlWidget'                    : "<?php echo $url_widget; ?>",
308
			'urls'                         : [<?php echo '"'.implode($urls, '","').'"'; ?>],
314
			'urls'                         : [<?php echo '"'.implode($urls, '","').'"'; ?>],
309
			'infosImages'                  : <?php echo json_encode($infos_images); ?>,
315
			'infosImages'                  : <?php echo json_encode($infos_images); ?>,
310
			'urlImage'                     : "<?php echo $url_image; ?>",
316
			'urlImage'                     : "<?php echo $url_image; ?>",
311
			'indexPremiereImage'           : <?php echo array_search($url_image, $urls); ?>,
317
			'indexPremiereImage'           : <?php echo array_search($url_image, $urls); ?>,
312
			'tailleMax'                    : 580,
318
			'tailleMax'                    : 580,
313
			'popupUrl'                     : "<?php echo $popup_url; ?>",
319
			'popupUrl'                     : "<?php echo $popup_url; ?>",
314
			'urlBaseTelechargement'        : "<?php echo $url_base_telechargement; ?>",
320
			'urlBaseTelechargement'        : "<?php echo $url_base_telechargement; ?>",
315
			'urlServiceRegenererMiniature' : "<?php echo $url_ws_regenerer_img; ?>"
321
			'urlServiceRegenererMiniature' : "<?php echo $url_ws_regenerer_img; ?>"
316
		};
322
		};
317
		$( document ).ready( function() {
323
		$( document ).ready( function() {
318
			popup = new WidgetPhotoPopup( widgetProp );
324
			popup = new WidgetPhotoPopup( widgetProp );
319
			popup.init();
325
			popup.init();
320
		});
326
		});
321
	//]]>
327
	//]]>
322
</script>
328
</script>