Depuis la version 9.1
modifié par Admin
sur 2026/05/11 09:26
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
sur 2026/01/29 14:13
Commentaire de modification :
Install extension [org.xwiki.platform:xwiki-platform-distribution-flavor-common/17.10.2]
Résumé
-
Propriétés de la Page (2 modifications, 0 ajouts, 0 suppressions)
Détails
- Propriétés de la Page
-
- Auteur du document
-
... ... @@ -1,1 +1,1 @@ 1 - xwiki:XWiki.Admin1 +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§ion=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 +)))