Modifications pour le document Home

Modifié par Admin le 2026/05/11 09:26

Depuis la version 9.1
modifié par Admin
sur 2026/05/11 09:26
Commentaire de modification : Il n'y a aucun commentaire pour cette version
À la version 1.1
modifié par superadmin
sur 2026/01/29 14:13
Commentaire de modification : Install extension [org.xwiki.platform:xwiki-platform-distribution-flavor-common/17.10.2]

Résumé

Détails

Propriétés de la Page
Auteur du document
... ... @@ -1,1 +1,1 @@
1 -xwiki:XWiki.Admin
1 +XWiki.superadmin
Contenu
... ... @@ -1,397 +1,40 @@
1 -{{html clean="false"}}
2 -<style>
3 -.bouton-guide-multicolore {
4 - display: inline-block;
5 - padding: 40px 80px;
6 - font-size: 36px;
7 - font-weight: bold;
8 - text-decoration: none;
9 - color: white;
10 - background: linear-gradient(135deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #4facfe 75%, #00f2fe 100%);
11 - background-size: 300% 300%;
12 - border-radius: 60px;
13 - box-shadow: 0 0 40px rgba(102, 126, 234, 0.8), 0 0 80px rgba(118, 75, 162, 0.6);
14 - transition: all 0.3s ease;
15 - animation: gradient-shift 3s ease infinite, pulse-glow 1.5s ease-in-out infinite, flash-extreme 0.8s linear infinite;
16 - text-align: center;
17 - border: 3px solid rgba(255, 255, 255, 0.5);
18 - cursor: pointer;
19 - font-family: Arial, sans-serif;
20 - position: relative;
21 - overflow: hidden;
22 - z-index: 10;
23 -}
1 +== Bienvenue sur votre Wiki ==
24 24  
25 -.bouton-guide-multicolore.falling {
26 - animation: fall-and-bounce 1.2s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards,
27 - gradient-shift 1s ease infinite,
28 - pulse-glow 0.5s ease-in-out infinite,
29 - flash-extreme 0.3s linear infinite,
30 - rotate-fall 1.2s ease-in forwards;
31 - box-shadow: 0 0 100px rgba(102, 126, 234, 1), 0 0 200px rgba(118, 75, 162, 0.8);
32 -}
3 +XWiki est le meilleur outil pour organiser votre connaissance. Un //Wiki// est organisé suivant une hiérarchie de //pages//. Vous pouvez créer de multiples wikis, chacun avec son propre ensemble de pages.
33 33  
34 -.bouton-guide-multicolore::before {
35 - content: '';
36 - position: absolute;
37 - top: -50%;
38 - left: -50%;
39 - width: 200%;
40 - height: 200%;
41 - background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
42 - animation: shine 2s linear infinite;
43 -}
5 +XWiki peut être utilisé comme base de connaissance (pour le support, la documentation, les ventes, etc.), pour créer des espaces collaboratifs, ou même comme un intranet complet.
44 44  
45 -.bouton-guide-multicolore:hover:not(.falling) {
46 - transform: translateY(-8px) scale(1.15) rotate(2deg);
47 - box-shadow: 0 0 60px rgba(102, 126, 234, 1), 0 0 120px rgba(118, 75, 162, 0.8), 0 20px 40px rgba(0, 0, 0, 0.5);
48 - animation: gradient-shift 1s ease infinite, pulse-glow 0.5s ease-in-out infinite, flash-extreme 0.3s linear infinite, shake 0.5s ease infinite;
49 -}
7 +== Les bases ==
50 50  
51 -.bouton-guide-multicolore:active {
52 - transform: translateY(-3px) scale(1.1);
53 -}
9 +Pour utiliser votre Wiki au maximum de son potentiel, identifiez-vous et :
54 54  
55 -/* Animation de chute */
56 -@keyframes fall-and-bounce {
57 - 0% {
58 - transform: translateY(0) scale(1);
59 - }
60 - 40% {
61 - transform: translateY(calc(100vh - 200px)) scale(1.1, 0.9);
62 - }
63 - 50% {
64 - transform: translateY(calc(100vh - 200px)) scale(1.1, 0.9);
65 - }
66 - 65% {
67 - transform: translateY(calc(100vh - 350px)) scale(0.95, 1.05);
68 - }
69 - 75% {
70 - transform: translateY(calc(100vh - 200px)) scale(1.05, 0.95);
71 - }
72 - 85% {
73 - transform: translateY(calc(100vh - 250px)) scale(0.98, 1.02);
74 - }
75 - 95% {
76 - transform: translateY(calc(100vh - 200px)) scale(1.02, 0.98);
77 - }
78 - 100% {
79 - transform: translateY(calc(100vh - 200px)) scale(1);
80 - }
81 -}
11 +Utilisez le bouton {{displayIcon name="pencil"/}} ci-dessus pour //éditer// cette page et commencer à adapter ce Wiki à vos besoins.
82 82  
83 -@keyframes rotate-fall {
84 - 0% {
85 - transform: rotate(0deg);
86 - }
87 - 100% {
88 - transform: rotate(720deg);
89 - }
90 -}
13 +Utilisez le bouton {{displayIcon name="add"/}} ci-dessus pour //ajouter// de nouvelles pages à votre Wiki et créez la //hiérarchie// qui vous convient le mieux pour organiser votre contenu.
91 91  
92 -/* Cercles hypnotiques */
93 -.hypnotic-circle {
94 - position: absolute;
95 - border-radius: 50%;
96 - border: 3px solid;
97 - animation: spin-hypnotic 4s linear infinite;
98 -}
15 +Utilisez le fil d'Ariane {{displayIcon name="home"/}} localisé au dessus du titre pour //naviguer// parmi vos pages. Vous pouvez être facilement perdu dans un Wiki important sans ce fil d'Ariane.
99 99  
100 -.circle1 {
101 - width: 300px;
102 - height: 300px;
103 - border-color: rgba(102, 126, 234, 0.6) transparent rgba(240, 147, 251, 0.6) transparent;
104 - animation: spin-hypnotic 3s linear infinite;
105 -}
17 +Vous pouvez aussi utiliser le [[bac à sable>>Sandbox.WebHome]] pour plus de contenu exemple ainsi que comme endroit pour expérimenter les fonctionnalités de votre Wiki.
106 106  
107 -.circle2 {
108 - width: 400px;
109 - height: 400px;
110 - border-color: transparent rgba(118, 75, 162, 0.5) transparent rgba(79, 172, 254, 0.5);
111 - animation: spin-hypnotic-reverse 4s linear infinite;
112 -}
19 + {{box}}Apprenez à utiliser XWiki avec le [[Guide "Getting Started" (en anglais)>>https://www.xwiki.org/xwiki/bin/view/Documentation/UserGuide/GettingStarted/WebHome]].{{/box}}
113 113  
114 -.circle3 {
115 - width: 500px;
116 - height: 500px;
117 - border-color: rgba(0, 242, 254, 0.4) transparent rgba(240, 147, 251, 0.4) transparent;
118 - animation: spin-hypnotic 5s linear infinite;
119 -}
21 +(%class="row"%)
22 +(((
23 +(%class="col-xs-12 col-sm-6"%)
24 +(((
25 +== Étendez votre Wiki ==
120 120  
121 -.circle4 {
122 - width: 600px;
123 - height: 600px;
124 - border-color: transparent rgba(102, 126, 234, 0.3) transparent rgba(118, 75, 162, 0.3);
125 - animation: spin-hypnotic-reverse 6s linear infinite;
126 -}
27 +Pour étendre les fonctionnalités de votre Wiki avec les modules dont //vous// avez besoin, allez sur le [[gestionnaire d'extensions>>XWiki.XWikiPreferences||queryString="editor=globaladmin&section=XWiki.Extensions"]] où vous pouvez rechercher et installer des extensions.
127 127  
128 -/* Spirale hypnotique */
129 -.spiral {
130 - position: absolute;
131 - width: 700px;
132 - height: 700px;
133 - border-radius: 50%;
134 - background: conic-gradient(
135 - from 0deg,
136 - transparent 0deg,
137 - rgba(102, 126, 234, 0.3) 90deg,
138 - transparent 180deg,
139 - rgba(240, 147, 251, 0.3) 270deg,
140 - transparent 360deg
141 - );
142 - animation: spin-hypnotic 8s linear infinite;
143 -}
29 +Pour naviguer dans les 900+ extensions contribuées par la communauté XWiki, visitez la [[galerie d'extensions>>https://extensions.xwiki.org]].
30 +)))
144 144  
145 -/* Rayons rotatifs */
146 -.ray {
147 - position: absolute;
148 - width: 400px;
149 - height: 4px;
150 - background: linear-gradient(90deg, transparent, rgba(79, 172, 254, 0.8), transparent);
151 - transform-origin: center;
152 - animation: spin-ray 3s linear infinite;
153 -}
32 +(%class="col-xs-12 col-sm-6"%)
33 +(((
34 +== Créez votre application ==
154 154  
155 -.ray:nth-child(2) {
156 - animation-delay: -1s;
157 -}
36 +Pour aller plus loin que les extensions disponibles, définissez vos //propres structures// pour vos contenus en fonction de //vos// besoins et créez //vos// propres applications avec [["App Within Minutes">>AppWithinMinutes.WebHome]] (AWM).
158 158  
159 -.ray:nth-child(3) {
160 - animation-delay: -2s;
161 -}
162 -
163 -@keyframes gradient-shift {
164 - 0% { background-position: 0% 50%; }
165 - 50% { background-position: 100% 50%; }
166 - 100% { background-position: 0% 50%; }
167 -}
168 -
169 -@keyframes pulse-glow {
170 - 0%, 100% {
171 - box-shadow: 0 0 40px rgba(102, 126, 234, 0.8), 0 0 80px rgba(118, 75, 162, 0.6);
172 - }
173 - 50% {
174 - box-shadow: 0 0 80px rgba(240, 147, 251, 1), 0 0 160px rgba(79, 172, 254, 0.9), 0 0 200px rgba(0, 242, 254, 0.7);
175 - }
176 -}
177 -
178 -@keyframes flash-extreme {
179 - 0%, 49%, 51%, 100% {
180 - opacity: 1;
181 - filter: brightness(1);
182 - }
183 - 50% {
184 - opacity: 0.7;
185 - filter: brightness(1.8) saturate(1.5);
186 - }
187 -}
188 -
189 -@keyframes shine {
190 - 0% {
191 - transform: translateX(-100%) translateY(-100%) rotate(45deg);
192 - }
193 - 100% {
194 - transform: translateX(100%) translateY(100%) rotate(45deg);
195 - }
196 -}
197 -
198 -@keyframes shake {
199 - 0%, 100% { transform: translateY(-8px) scale(1.15) rotate(0deg); }
200 - 25% { transform: translateY(-8px) scale(1.15) rotate(-3deg); }
201 - 75% { transform: translateY(-8px) scale(1.15) rotate(3deg); }
202 -}
203 -
204 -@keyframes spin-hypnotic {
205 - from { transform: translate(-50%, -50%) rotate(0deg); }
206 - to { transform: translate(-50%, -50%) rotate(360deg); }
207 -}
208 -
209 -@keyframes spin-hypnotic-reverse {
210 - from { transform: translate(-50%, -50%) rotate(360deg); }
211 - to { transform: translate(-50%, -50%) rotate(0deg); }
212 -}
213 -
214 -@keyframes spin-ray {
215 - from { transform: translate(-50%, -50%) rotate(0deg); }
216 - to { transform: translate(-50%, -50%) rotate(360deg); }
217 -}
218 -
219 -.bouton-container {
220 - text-align: center;
221 - padding: 100px 20px;
222 - min-height: 400px;
223 - display: flex;
224 - align-items: center;
225 - justify-content: center;
226 - background: radial-gradient(circle at center, #1a1a2e 0%, #0f0f1e 100%);
227 - position: relative;
228 - overflow: hidden;
229 -}
230 -
231 -.hypnotic-background {
232 - position: absolute;
233 - top: 50%;
234 - left: 50%;
235 - transform: translate(-50%, -50%);
236 - width: 100%;
237 - height: 100%;
238 - display: flex;
239 - align-items: center;
240 - justify-content: center;
241 -}
242 -
243 -.sound-control {
244 - position: fixed;
245 - bottom: 20px;
246 - right: 20px;
247 - background: rgba(102, 126, 234, 0.8);
248 - color: white;
249 - border: none;
250 - padding: 10px 20px;
251 - border-radius: 30px;
252 - cursor: pointer;
253 - font-size: 16px;
254 - z-index: 1000;
255 - box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
256 -}
257 -
258 -.sound-control:hover {
259 - background: rgba(118, 75, 162, 0.9);
260 -}
261 -</style>
262 -
263 -<div class="bouton-container">
264 - <div class="hypnotic-background">
265 - <div class="spiral"></div>
266 - <div class="hypnotic-circle circle1"></div>
267 - <div class="hypnotic-circle circle2"></div>
268 - <div class="hypnotic-circle circle3"></div>
269 - <div class="hypnotic-circle circle4"></div>
270 - <div class="ray"></div>
271 - <div class="ray"></div>
272 - <div class="ray"></div>
273 - </div>
274 -
275 - <a href="https://epn.doc.decalog.net/wiki/epn/view/Guide%20administrateur%20%26%20utilisateur/" class="bouton-guide-multicolore" id="hypnoticButton">
276 - Guide Administrateur & Utilisateur
277 - </a>
278 -
279 - <button class="sound-control" id="soundToggle">🔊 Son ON</button>
280 -</div>
281 -
282 -<script>
283 -// Création du contexte audio
284 -const audioContext = new (window.AudioContext || window.webkitAudioContext)();
285 -let oscillator = null;
286 -let gainNode = null;
287 -let isPlaying = false;
288 -let currentDuration = 0.1; // Durée normale de chaque "tu"
289 -let patternTimeout = null;
290 -
291 -function playTututu() {
292 - if (oscillator) return; // Déjà en train de jouer
293 -
294 - oscillator = audioContext.createOscillator();
295 - gainNode = audioContext.createGain();
296 -
297 - oscillator.connect(gainNode);
298 - gainNode.connect(audioContext.destination);
299 -
300 - // Fréquence pour le son "tu"
301 - oscillator.frequency.value = 800;
302 - oscillator.type = 'square'; // Son électronique
303 -
304 - // Volume
305 - gainNode.gain.value = 0.1;
306 -
307 - oscillator.start();
308 - isPlaying = true;
309 -
310 - // Créer l'effet tututututu en modulant la fréquence
311 - schedulePattern();
312 -}
313 -
314 -function schedulePattern() {
315 - if (!isPlaying) return;
316 -
317 - const pattern = [800, 900, 800, 950, 800, 900, 800, 1000];
318 - let time = audioContext.currentTime;
319 -
320 - pattern.forEach((freq, index) => {
321 - if (oscillator) {
322 - oscillator.frequency.setValueAtTime(freq, time + (index * currentDuration));
323 - }
324 - });
325 -
326 - patternTimeout = setTimeout(schedulePattern, pattern.length * currentDuration * 1000);
327 -}
328 -
329 -function stopSound() {
330 - if (oscillator) {
331 - isPlaying = false;
332 - oscillator.stop();
333 - oscillator.disconnect();
334 - oscillator = null;
335 - gainNode.disconnect();
336 - gainNode = null;
337 - }
338 - if (patternTimeout) {
339 - clearTimeout(patternTimeout);
340 - patternTimeout = null;
341 - }
342 -}
343 -
344 -function speedUpSound() {
345 - currentDuration = 0.03; // Super rapide au survol !
346 -}
347 -
348 -function normalizeSound() {
349 - currentDuration = 0.1; // Vitesse normale
350 -}
351 -
352 -// Contrôle du bouton
353 -const soundToggle = document.getElementById('soundToggle');
354 -const hypnoticButton = document.getElementById('hypnoticButton');
355 -let soundEnabled = true;
356 -let hasFallen = false;
357 -
358 -soundToggle.addEventListener('click', function() {
359 - soundEnabled = !soundEnabled;
360 - if (soundEnabled) {
361 - playTututu();
362 - soundToggle.textContent = '🔊 Son ON';
363 - } else {
364 - stopSound();
365 - soundToggle.textContent = '🔇 Son OFF';
366 - }
367 -});
368 -
369 -// Événements de survol pour accélérer le son ET faire tomber le bouton
370 -hypnoticButton.addEventListener('mouseenter', function() {
371 - if (soundEnabled && isPlaying) {
372 - speedUpSound();
373 - }
374 -
375 - // Faire tomber le bouton !
376 - if (!hasFallen) {
377 - hypnoticButton.classList.add('falling');
378 - hasFallen = true;
379 -
380 - // Réinitialiser après l'animation
381 - setTimeout(() => {
382 - hypnoticButton.classList.remove('falling');
383 - hasFallen = false;
384 - }, 1200);
385 - }
386 -});
387 -
388 -hypnoticButton.addEventListener('mouseleave', function() {
389 - if (soundEnabled && isPlaying) {
390 - normalizeSound();
391 - }
392 -});
393 -
394 -// Démarrer automatiquement le son
395 -playTututu();
396 -</script>
397 -{{/html}}
38 +AWM vous aide et simplifie pour vous et vos utilisateurs la création et la gestion de vos informations.
39 +)))
40 +)))