❄ Pluie de Neige •

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>❄️ Neige avec bouton ON/OFF</title>
<style type="text/css">
html, body {
	margin: 0;
	padding: 0;
	overflow: hidden;
	background: #1e1e2f; /* Fond sombre */
	height: 100%;
	text-align: center;
	user-select: none;
}

canvas {
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 0;
}

#toggleSnowBtn {
	position: fixed;
	top: 15px;
	right: 15px;
	z-index: 10;
	background: rgba(255, 255, 255, 0.2);
	color: white;
	border: 0px solid white;
	padding: 8px 12px;
	border-radius: 10px;
	cursor: pointer;
	font-family: sans-serif;
	font-size: 12px;
	transition: background 0.3s;
}

#toggleSnowBtn:hover {
	background: rgba(255, 255, 255, 0.4);
}
</style>
</head>
<body>
<button id="toggleSnowBtn">❄️ Neige : ON </button>
<canvas id="snowCanvas"></canvas>

let snowing = true;

const flakes = [];
	const numFlakes = 150;

function drawFlakes() {
		ctx.clearRect(0, 0, width, height);
		ctx.fillStyle = 'white';
		ctx.beginPath();
	for (let i = 0; i < flakes.length; i++) {
		const flake = flakes[i];
		ctx.moveTo(flake.x, flake.y);
		ctx.arc(flake.x, flake.y, flake.radius, 0, Math.PI * 2);
	}
		ctx.fill();
		moveFlakes();
}

function moveFlakes() {
	for (let i = 0; i < flakes.length; i++) {
		const flake = flakes[i];
		flake.y += flake.speed;
		flake.x += flake.wind;

if (flake.y > height) {
			flake.y = -flake.radius;
			flake.x = Math.random() * width;
		}
		if (flake.x > width) {
			flake.x = 0;
		} else if (flake.x < 0) {
			flake.x = width;
		}
	}
}

function animateSnow() {
	if (snowing) {
		drawFlakes();
	} else {
		ctx.clearRect(0, 0, width, height);
	}
	requestAnimationFrame(animateSnow);
}

window.addEventListener('resize', () => {
	width = window.innerWidth;
	height = window.innerHeight;
	canvas.width = width;
	canvas.height = height;
});

document.getElementById('toggleSnowBtn').addEventListener('click', () => {
	snowing = !snowing;
	// document.getElementById('toggleSnowBtn').textContent = snowing ? '❄️ Neige : ON ' : '🌙 Neige : OFF'; doc txt (❄️, *, ✦, ☃️)
	document.getElementById('toggleSnowBtn').innerHTML = snowing ? '☃️ Neige : ON ' : '🌙 Neige : OFF'; // doc html (❄️, *, ✦, ☃️)
});
	createFlakes();
	animateSnow();
</script>
</body>
<p style="margin: 5;">
<footer style="position:relative; margin:0 auto; width:50%; text-align:center; border-radius:20px; overflow:hidden; box-shadow:0 0 12px rgba(0,0,0,0.3); padding:10px 0; font-family:sans-serif; font-size:12px;"><p style="margin: 0;"><a href="https://feuille-heures-angelique.neocities.org/" style="text-decoration: none; color: inherit;">Calculatrice d’heures - Feuille d'Heures Angélique (FR)</a></p></footer></p>
</html>