Masquer les derniers auteurs
| author | version | line-number | content |
|---|---|---|---|
 |
2.1 | 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.1 | 24 | |
| |
2.1 | 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 | } | ||
| |
1.1 | 33 | |
| |
2.1 | 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 | } | ||
| |
1.1 | 44 | |
| |
2.1 | 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 | } | ||
| |
1.1 | 50 | |
| |
2.1 | 51 | .bouton-guide-multicolore:active { |
| 52 | transform: translateY(-3px) scale(1.1); | ||
| 53 | } | ||
| |
1.1 | 54 | |
| |
2.1 | 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 | } | ||
| |
1.1 | 82 | |
| |
2.1 | 83 | @keyframes rotate-fall { |
| 84 | 0% { | ||
| 85 | transform: rotate(0deg); | ||
| 86 | } | ||
| 87 | 100% { | ||
| 88 | transform: rotate(720deg); | ||
| 89 | } | ||
| 90 | } | ||
| |
1.1 | 91 | |
| |
2.1 | 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 | } | ||
| |
1.1 | 99 | |
| |
2.1 | 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 | } | ||
| |
1.1 | 106 | |
| |
2.1 | 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 | } | ||
| |
1.1 | 113 | |
| |
2.1 | 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 | } | ||
| |
1.1 | 120 | |
| |
2.1 | 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 | } | ||
| |
1.1 | 127 | |
| |
2.1 | 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 | } | ||
| |
1.1 | 144 | |
| |
2.1 | 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 | } | ||
| |
1.1 | 154 | |
| |
2.1 | 155 | .ray:nth-child(2) { |
| 156 | animation-delay: -1s; | ||
| 157 | } | ||
| |
1.1 | 158 | |
| |
2.1 | 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}} |