| ... |
... |
@@ -22,15 +22,6 @@ |
| 22 |
22 |
z-index: 10; |
| 23 |
23 |
} |
| 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 |
|
-} |
| 33 |
|
- |
| 34 |
34 |
.bouton-guide-multicolore::before { |
| 35 |
35 |
content: ''; |
| 36 |
36 |
position: absolute; |
| ... |
... |
@@ -42,7 +42,7 @@ |
| 42 |
42 |
animation: shine 2s linear infinite; |
| 43 |
43 |
} |
| 44 |
44 |
|
| 45 |
|
-.bouton-guide-multicolore:hover:not(.falling) { |
|
36 |
+.bouton-guide-multicolore:hover { |
| 46 |
46 |
transform: translateY(-8px) scale(1.15) rotate(2deg); |
| 47 |
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 |
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; |
| ... |
... |
@@ -52,43 +52,6 @@ |
| 52 |
52 |
transform: translateY(-3px) scale(1.1); |
| 53 |
53 |
} |
| 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 |
|
-} |
| 82 |
|
- |
| 83 |
|
-@keyframes rotate-fall { |
| 84 |
|
- 0% { |
| 85 |
|
- transform: rotate(0deg); |
| 86 |
|
- } |
| 87 |
|
- 100% { |
| 88 |
|
- transform: rotate(720deg); |
| 89 |
|
- } |
| 90 |
|
-} |
| 91 |
|
- |
| 92 |
92 |
/* Cercles hypnotiques */ |
| 93 |
93 |
.hypnotic-circle { |
| 94 |
94 |
position: absolute; |
| ... |
... |
@@ -272,7 +272,7 @@ |
| 272 |
272 |
<div class="ray"></div> |
| 273 |
273 |
</div> |
| 274 |
274 |
|
| 275 |
|
- <a href="https://epn.doc.decalog.net/wiki/epn/view/Guide%20administrateur%20%26%20utilisateur/" class="bouton-guide-multicolore" id="hypnoticButton"> |
|
229 |
+ <a href="https://epn.doc.decalog.net/wiki/epn/view/Guide%20administrateur%20%26%20utilisateur/" class="bouton-guide-multicolore"> |
| 276 |
276 |
📚 Guide Administrateur & Utilisateur |
| 277 |
277 |
</a> |
| 278 |
278 |
|
| ... |
... |
@@ -285,8 +285,6 @@ |
| 285 |
285 |
let oscillator = null; |
| 286 |
286 |
let gainNode = null; |
| 287 |
287 |
let isPlaying = false; |
| 288 |
|
-let currentDuration = 0.1; // Durée normale de chaque "tu" |
| 289 |
|
-let patternTimeout = null; |
| 290 |
290 |
|
| 291 |
291 |
function playTututu() { |
| 292 |
292 |
if (oscillator) return; // Déjà en train de jouer |
| ... |
... |
@@ -308,22 +308,22 @@ |
| 308 |
308 |
isPlaying = true; |
| 309 |
309 |
|
| 310 |
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 |
318 |
let time = audioContext.currentTime; |
|
264 |
+ const pattern = [800, 900, 800, 950, 800, 900, 800, 1000]; // Variation de fréquences |
|
265 |
+ const duration = 0.1; // Durée de chaque "tu" |
| 319 |
319 |
|
| 320 |
|
- pattern.forEach((freq, index) => { |
| 321 |
|
- if (oscillator) { |
| 322 |
|
- oscillator.frequency.setValueAtTime(freq, time + (index * currentDuration)); |
| 323 |
|
- } |
| 324 |
|
- }); |
|
267 |
+ function schedulePattern() { |
|
268 |
+ if (!isPlaying) return; |
|
269 |
+ |
|
270 |
+ pattern.forEach((freq, index) => { |
|
271 |
+ oscillator.frequency.setValueAtTime(freq, time + (index * duration)); |
|
272 |
+ }); |
|
273 |
+ |
|
274 |
+ time += pattern.length * duration; |
|
275 |
+ setTimeout(schedulePattern, pattern.length * duration * 1000); |
|
276 |
+ } |
| 325 |
325 |
|
| 326 |
|
- patternTimeout = setTimeout(schedulePattern, pattern.length * currentDuration * 1000); |
|
278 |
+ schedulePattern(); |
| 327 |
327 |
} |
| 328 |
328 |
|
| 329 |
329 |
function stopSound() { |
| ... |
... |
@@ -335,25 +335,11 @@ |
| 335 |
335 |
gainNode.disconnect(); |
| 336 |
336 |
gainNode = null; |
| 337 |
337 |
} |
| 338 |
|
- if (patternTimeout) { |
| 339 |
|
- clearTimeout(patternTimeout); |
| 340 |
|
- patternTimeout = null; |
| 341 |
|
- } |
| 342 |
342 |
} |
| 343 |
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 |
352 |
// Contrôle du bouton |
| 353 |
353 |
const soundToggle = document.getElementById('soundToggle'); |
| 354 |
|
-const hypnoticButton = document.getElementById('hypnoticButton'); |
| 355 |
355 |
let soundEnabled = true; |
| 356 |
|
-let hasFallen = false; |
| 357 |
357 |
|
| 358 |
358 |
soundToggle.addEventListener('click', function() { |
| 359 |
359 |
soundEnabled = !soundEnabled; |
| ... |
... |
@@ -366,31 +366,6 @@ |
| 366 |
366 |
} |
| 367 |
367 |
}); |
| 368 |
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 |
394 |
// Démarrer automatiquement le son |
| 395 |
395 |
playTututu(); |
| 396 |
396 |
</script> |