Aller au contenu

Modifications pour le document Home

Modifié par Admin le 2026/05/11 09:26
Depuis la version 4.1
modifié par Admin
sur 2026/05/11 09:15
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
... ... @@ -10,27 +10,156 @@
10 10   background: linear-gradient(135deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #4facfe 75%, #00f2fe 100%);
11 11   background-size: 300% 300%;
12 12   border-radius: 60px;
13 - box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
14 - transition: all 3s ease;
15 - animation: gradient-shift 30s ease infinite;
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 16   text-align: center;
17 - border: none;
17 + border: 3px solid rgba(255, 255, 255, 0.5);
18 18   cursor: pointer;
19 19   font-family: Arial, sans-serif;
20 + position: relative;
21 + overflow: hidden;
22 + z-index: 10;
20 20  }
21 21  
22 -.bouton-guide-multicolore:hover {
23 - transform: translateY(-8px) scale(1.1);
24 - box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
25 - text-decoration: none;
26 - color: white;
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);
27 27  }
28 28  
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 +}
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 +}
50 +
29 29  .bouton-guide-multicolore:active {
30 - transform: translateY(-3px) scale(1.05);
31 - box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
52 + transform: translateY(-3px) scale(1.1);
32 32  }
33 33  
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 +/* Cercles hypnotiques */
93 +.hypnotic-circle {
94 + position: absolute;
95 + border-radius: 50%;
96 + border: 3px solid;
97 + animation: spin-hypnotic 4s linear infinite;
98 +}
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 +}
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 +}
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 +}
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 +}
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 +}
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 +}
154 +
155 +.ray:nth-child(2) {
156 + animation-delay: -1s;
157 +}
158 +
159 +.ray:nth-child(3) {
160 + animation-delay: -2s;
161 +}
162 +
34 34  @keyframes gradient-shift {
35 35   0% { background-position: 0% 50%; }
36 36   50% { background-position: 100% 50%; }
... ... @@ -37,6 +37,56 @@
37 37   100% { background-position: 0% 50%; }
38 38  }
39 39  
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 +
40 40  .bouton-container {
41 41   text-align: center;
42 42   padding: 100px 20px;
... ... @@ -44,12 +44,175 @@
44 44   display: flex;
45 45   align-items: center;
46 46   justify-content: center;
226 + background: radial-gradient(circle at center, #1a1a2e 0%, #0f0f1e 100%);
227 + position: relative;
228 + overflow: hidden;
47 47  }
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 +}
48 48  </style>
49 49  
50 50  <div class="bouton-container">
51 - <a href="https://epn.doc.decalog.net/wiki/epn/view/Guide%20administrateur%20%26%20utilisateur/" class="bouton-guide-multicolore">
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">
52 52   Guide Administrateur & Utilisateur
53 53   </a>
278 +
279 + <button class="sound-control" id="soundToggle">🔊 Son ON</button>
54 54  </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>
55 55  {{/html}}