Modifications pour le document Home

Résumé

• Propriétés de la Page (1 modifications, 0 ajouts, 0 suppressions)

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;
...	...	@@ -226,8 +226,8 @@
226	226	<div class="ray"></div>
227	227	</div>
228	228
229		- <a href="https://epn.doc.decalog.net/wiki/epn/view/Guide%20administrateur%20%26%20utilisateur/" class="bouton-guide-multicolore">
230		- 📚 Guide Administrateur & Utilisateur
	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
231	231	</a>
232	232
233	233	<button class="sound-control" id="soundToggle">🔊 Son ON</button>
...	...	@@ -239,6 +239,8 @@
239	239	let oscillator = null;
240	240	let gainNode = null;
241	241	let isPlaying = false;
	288	+let currentDuration = 0.1; // Durée normale de chaque "tu"
	289	+let patternTimeout = null;
242	242
243	243	function playTututu() {
244	244	if (oscillator) return; // Déjà en train de jouer
...	...	@@ -260,22 +260,22 @@
260	260	isPlaying = true;
261	261
262	262	// 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];
263	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	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		- }
	320	+ pattern.forEach((freq, index) => {
	321	+ if (oscillator) {
	322	+ oscillator.frequency.setValueAtTime(freq, time + (index * currentDuration));
	323	+ }
	324	+ });
277	277
278		- schedulePattern();
	326	+ patternTimeout = setTimeout(schedulePattern, pattern.length * currentDuration * 1000);
279	279	}
280	280
281	281	function stopSound() {
...	...	@@ -287,11 +287,25 @@
287	287	gainNode.disconnect();
288	288	gainNode = null;
289	289	}
	338	+ if (patternTimeout) {
	339	+ clearTimeout(patternTimeout);
	340	+ patternTimeout = null;
	341	+ }
290	290	}
291	291
	344	+function speedUpSound() {
	345	+ currentDuration = 0.03; // Super rapide au survol !
	346	+}
	347	+
	348	+function normalizeSound() {
	349	+ currentDuration = 0.1; // Vitesse normale
	350	+}
	351	+
292	292	// Contrôle du bouton
293	293	const soundToggle = document.getElementById('soundToggle');
	354	+const hypnoticButton = document.getElementById('hypnoticButton');
294	294	let soundEnabled = true;
	356	+let hasFallen = false;
295	295
296	296	soundToggle.addEventListener('click', function() {
297	297	soundEnabled = !soundEnabled;
...	...	@@ -304,6 +304,31 @@
304	304	}
305	305	});
306	306
	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	+
307	307	// Démarrer automatiquement le son
308	308	playTututu();
309	309	</script>