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;
...	...	@@ -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">
211		- 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
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}}