Aller au contenu

Modifications pour le document Home

Modifié par Admin le 2026/05/11 09:26
Depuis la version 5.1
modifié par Admin
sur 2026/05/11 09:19
Commentaire de modification : Il n'y a aucun commentaire pour cette version
À 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

Résumé

Détails

Propriétés de la Page
Contenu
... ... @@ -22,6 +22,15 @@
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 +
25 25  .bouton-guide-multicolore::before {
26 26   content: '';
27 27   position: absolute;
... ... @@ -33,7 +33,7 @@
33 33   animation: shine 2s linear infinite;
34 34  }
35 35  
36 -.bouton-guide-multicolore:hover {
45 +.bouton-guide-multicolore:hover:not(.falling) {
37 37   transform: translateY(-8px) scale(1.15) rotate(2deg);
38 38   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);
39 39   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;
... ... @@ -43,6 +43,43 @@
43 43   transform: translateY(-3px) scale(1.1);
44 44  }
45 45  
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 +
46 46  /* Cercles hypnotiques */
47 47  .hypnotic-circle {
48 48   position: absolute;
... ... @@ -193,6 +193,25 @@
193 193   align-items: center;
194 194   justify-content: center;
195 195  }
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 +}
196 196  </style>
197 197  
198 198  <div class="bouton-container">
... ... @@ -207,8 +207,126 @@
207 207   <div class="ray"></div>
208 208   </div>
209 209  
210 - <a href="https://epn.doc.decalog.net/wiki/epn/view/Guide%20administrateur%20%26%20utilisateur/" class="bouton-guide-multicolore">
275 + <a href="https://epn.doc.decalog.net/wiki/epn/view/Guide%20administrateur%20%26%20utilisateur/" class="bouton-guide-multicolore" id="hypnoticButton">
211 211   Guide Administrateur & Utilisateur
212 212   </a>
278 +
279 + <button class="sound-control" id="soundToggle">🔊 Son ON</button>
213 213  </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>
214 214  {{/html}}