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 6.1
modifié par Admin
sur 2026/05/11 09:22
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,110 @@
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  
25 +.bouton-guide-multicolore::before {
26 + content: '';
27 + position: absolute;
28 + top: -50%;
29 + left: -50%;
30 + width: 200%;
31 + height: 200%;
32 + background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
33 + animation: shine 2s linear infinite;
34 +}
35 +
22 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;
37 + transform: translateY(-8px) scale(1.15) rotate(2deg);
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 + 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;
27 27  }
28 28  
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);
43 + transform: translateY(-3px) scale(1.1);
32 32  }
33 33  
46 +/* Cercles hypnotiques */
47 +.hypnotic-circle {
48 + position: absolute;
49 + border-radius: 50%;
50 + border: 3px solid;
51 + animation: spin-hypnotic 4s linear infinite;
52 +}
53 +
54 +.circle1 {
55 + width: 300px;
56 + height: 300px;
57 + border-color: rgba(102, 126, 234, 0.6) transparent rgba(240, 147, 251, 0.6) transparent;
58 + animation: spin-hypnotic 3s linear infinite;
59 +}
60 +
61 +.circle2 {
62 + width: 400px;
63 + height: 400px;
64 + border-color: transparent rgba(118, 75, 162, 0.5) transparent rgba(79, 172, 254, 0.5);
65 + animation: spin-hypnotic-reverse 4s linear infinite;
66 +}
67 +
68 +.circle3 {
69 + width: 500px;
70 + height: 500px;
71 + border-color: rgba(0, 242, 254, 0.4) transparent rgba(240, 147, 251, 0.4) transparent;
72 + animation: spin-hypnotic 5s linear infinite;
73 +}
74 +
75 +.circle4 {
76 + width: 600px;
77 + height: 600px;
78 + border-color: transparent rgba(102, 126, 234, 0.3) transparent rgba(118, 75, 162, 0.3);
79 + animation: spin-hypnotic-reverse 6s linear infinite;
80 +}
81 +
82 +/* Spirale hypnotique */
83 +.spiral {
84 + position: absolute;
85 + width: 700px;
86 + height: 700px;
87 + border-radius: 50%;
88 + background: conic-gradient(
89 + from 0deg,
90 + transparent 0deg,
91 + rgba(102, 126, 234, 0.3) 90deg,
92 + transparent 180deg,
93 + rgba(240, 147, 251, 0.3) 270deg,
94 + transparent 360deg
95 + );
96 + animation: spin-hypnotic 8s linear infinite;
97 +}
98 +
99 +/* Rayons rotatifs */
100 +.ray {
101 + position: absolute;
102 + width: 400px;
103 + height: 4px;
104 + background: linear-gradient(90deg, transparent, rgba(79, 172, 254, 0.8), transparent);
105 + transform-origin: center;
106 + animation: spin-ray 3s linear infinite;
107 +}
108 +
109 +.ray:nth-child(2) {
110 + animation-delay: -1s;
111 +}
112 +
113 +.ray:nth-child(3) {
114 + animation-delay: -2s;
115 +}
116 +
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  
123 +@keyframes pulse-glow {
124 + 0%, 100% {
125 + box-shadow: 0 0 40px rgba(102, 126, 234, 0.8), 0 0 80px rgba(118, 75, 162, 0.6);
126 + }
127 + 50% {
128 + 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);
129 + }
130 +}
131 +
132 +@keyframes flash-extreme {
133 + 0%, 49%, 51%, 100% {
134 + opacity: 1;
135 + filter: brightness(1);
136 + }
137 + 50% {
138 + opacity: 0.7;
139 + filter: brightness(1.8) saturate(1.5);
140 + }
141 +}
142 +
143 +@keyframes shine {
144 + 0% {
145 + transform: translateX(-100%) translateY(-100%) rotate(45deg);
146 + }
147 + 100% {
148 + transform: translateX(100%) translateY(100%) rotate(45deg);
149 + }
150 +}
151 +
152 +@keyframes shake {
153 + 0%, 100% { transform: translateY(-8px) scale(1.15) rotate(0deg); }
154 + 25% { transform: translateY(-8px) scale(1.15) rotate(-3deg); }
155 + 75% { transform: translateY(-8px) scale(1.15) rotate(3deg); }
156 +}
157 +
158 +@keyframes spin-hypnotic {
159 + from { transform: translate(-50%, -50%) rotate(0deg); }
160 + to { transform: translate(-50%, -50%) rotate(360deg); }
161 +}
162 +
163 +@keyframes spin-hypnotic-reverse {
164 + from { transform: translate(-50%, -50%) rotate(360deg); }
165 + to { transform: translate(-50%, -50%) rotate(0deg); }
166 +}
167 +
168 +@keyframes spin-ray {
169 + from { transform: translate(-50%, -50%) rotate(0deg); }
170 + to { transform: translate(-50%, -50%) rotate(360deg); }
171 +}
172 +
40 40  .bouton-container {
41 41   text-align: center;
42 42   padding: 100px 20px;
... ... @@ -44,12 +44,134 @@
44 44   display: flex;
45 45   align-items: center;
46 46   justify-content: center;
180 + background: radial-gradient(circle at center, #1a1a2e 0%, #0f0f1e 100%);
181 + position: relative;
182 + overflow: hidden;
47 47  }
184 +
185 +.hypnotic-background {
186 + position: absolute;
187 + top: 50%;
188 + left: 50%;
189 + transform: translate(-50%, -50%);
190 + width: 100%;
191 + height: 100%;
192 + display: flex;
193 + align-items: center;
194 + justify-content: center;
195 +}
196 +
197 +.sound-control {
198 + position: fixed;
199 + bottom: 20px;
200 + right: 20px;
201 + background: rgba(102, 126, 234, 0.8);
202 + color: white;
203 + border: none;
204 + padding: 10px 20px;
205 + border-radius: 30px;
206 + cursor: pointer;
207 + font-size: 16px;
208 + z-index: 1000;
209 + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
210 +}
211 +
212 +.sound-control:hover {
213 + background: rgba(118, 75, 162, 0.9);
214 +}
48 48  </style>
49 49  
50 50  <div class="bouton-container">
218 + <div class="hypnotic-background">
219 + <div class="spiral"></div>
220 + <div class="hypnotic-circle circle1"></div>
221 + <div class="hypnotic-circle circle2"></div>
222 + <div class="hypnotic-circle circle3"></div>
223 + <div class="hypnotic-circle circle4"></div>
224 + <div class="ray"></div>
225 + <div class="ray"></div>
226 + <div class="ray"></div>
227 + </div>
228 +
51 51   <a href="https://epn.doc.decalog.net/wiki/epn/view/Guide%20administrateur%20%26%20utilisateur/" class="bouton-guide-multicolore">
52 - Guide Administrateur & Utilisateur
230 + 📚 Guide Administrateur & Utilisateur
53 53   </a>
232 +
233 + <button class="sound-control" id="soundToggle">🔊 Son ON</button>
54 54  </div>
235 +
236 +<script>
237 +// Création du contexte audio
238 +const audioContext = new (window.AudioContext || window.webkitAudioContext)();
239 +let oscillator = null;
240 +let gainNode = null;
241 +let isPlaying = false;
242 +
243 +function playTututu() {
244 + if (oscillator) return; // Déjà en train de jouer
245 +
246 + oscillator = audioContext.createOscillator();
247 + gainNode = audioContext.createGain();
248 +
249 + oscillator.connect(gainNode);
250 + gainNode.connect(audioContext.destination);
251 +
252 + // Fréquence pour le son "tu"
253 + oscillator.frequency.value = 800;
254 + oscillator.type = 'square'; // Son électronique
255 +
256 + // Volume
257 + gainNode.gain.value = 0.1;
258 +
259 + oscillator.start();
260 + isPlaying = true;
261 +
262 + // Créer l'effet tututututu en modulant la fréquence
263 + 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"
266 +
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 + }
277 +
278 + schedulePattern();
279 +}
280 +
281 +function stopSound() {
282 + if (oscillator) {
283 + isPlaying = false;
284 + oscillator.stop();
285 + oscillator.disconnect();
286 + oscillator = null;
287 + gainNode.disconnect();
288 + gainNode = null;
289 + }
290 +}
291 +
292 +// Contrôle du bouton
293 +const soundToggle = document.getElementById('soundToggle');
294 +let soundEnabled = true;
295 +
296 +soundToggle.addEventListener('click', function() {
297 + soundEnabled = !soundEnabled;
298 + if (soundEnabled) {
299 + playTututu();
300 + soundToggle.textContent = '🔊 Son ON';
301 + } else {
302 + stopSound();
303 + soundToggle.textContent = '🔇 Son OFF';
304 + }
305 +});
306 +
307 +// Démarrer automatiquement le son
308 +playTututu();
309 +</script>
55 55  {{/html}}