sorry3.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sorry Tata</title>
    <style>
        body {
            margin: 0;
            background-color: black;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            overflow: hidden;
        }

        h1 {
            font-size: 5rem;
            font-family: 'Comic Sans MS', 'Arial Rounded MT Bold', sans-serif;
            color: pink;
            text-align: center;
            position: relative;
            z-index: 1;
        }

        .fireworks {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
        }
    </style>
</head>
<body>
    <h1>Sorry Tata :(</h1>
    <canvas class="fireworks"></canvas>

    <script>
        const canvas = document.querySelector('.fireworks');
        const ctx = canvas.getContext('2d');

        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        class Firework {
            constructor(x, y, colors) {
                this.x = x;
                this.y = y;
                this.colors = colors;
                this.particles = [];

                for (let i = 0; i < 100; i++) {
                    this.particles.push(new Particle(this.x, this.y, this.colors));
                }
            }

            update() {
                this.particles.forEach(particle => particle.update());
            }

            draw() {
                this.particles.forEach(particle => particle.draw());
            }
        }

        class Particle {
            constructor(x, y, colors) {
                this.x = x;
                this.y = y;
                this.size = Math.random() * 2 + 1;
                this.color = colors[Math.floor(Math.random() * colors.length)];
                this.angle = Math.random() * Math.PI * 2;
                this.speed = Math.random() * 4 + 2;
                this.gravity = 0.05;
                this.opacity = 1;
                this.fade = 0.03;
            }

            update() {
                this.x += Math.cos(this.angle) * this.speed;
                this.y += Math.sin(this.angle) * this.speed + this.gravity;
                this.opacity -= this.fade;
            }

            draw() {
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
                ctx.fillStyle = `rgba(${this.color},${this.opacity})`;
                ctx.fill();
            }
        }

        let fireworks = [];

        function createFirework() {
            const x = Math.random() * canvas.width;
            const y = Math.random() * canvas.height;
            const colors = [
                '255, 99, 132',
                '54, 162, 235',
                '255, 206, 86',
                '75, 192, 192'
            ];

            fireworks.push(new Firework(x, y, colors));
        }

        function animate() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            fireworks.forEach((firework, index) => {
                firework.update();
                firework.draw();

                if (firework.particles[0].opacity <= 0) {
                    fireworks.splice(index, 1);
                }
            });

            requestAnimationFrame(animate);
        }

        setInterval(createFirework, 500);
        animate();
    </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Sorry Tata</title>
	<style>
	body {
	margin: 0;
	background-color: black;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	overflow: hidden;
	}

	h1 {
	font-size: 5rem;
	font-family: 'Comic Sans MS', 'Arial Rounded MT Bold', sans-serif;
	color: pink;
	text-align: center;
	position: relative;
	z-index: 1;
	}

	.fireworks {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	}
	</style>
	</head>
	<body>
	<h1>Sorry Tata :(</h1>
	<canvas class="fireworks"></canvas>

	<script>
	const canvas = document.querySelector('.fireworks');
	const ctx = canvas.getContext('2d');

	canvas.width = window.innerWidth;
	canvas.height = window.innerHeight;

	class Firework {
	constructor(x, y, colors) {
	this.x = x;
	this.y = y;
	this.colors = colors;
	this.particles = [];

	for (let i = 0; i < 100; i++) {
	this.particles.push(new Particle(this.x, this.y, this.colors));
	}
	}

	update() {
	this.particles.forEach(particle => particle.update());
	}

	draw() {
	this.particles.forEach(particle => particle.draw());
	}
	}

	class Particle {
	constructor(x, y, colors) {
	this.x = x;
	this.y = y;
	this.size = Math.random() * 2 + 1;
	this.color = colors[Math.floor(Math.random() * colors.length)];
	this.angle = Math.random() * Math.PI * 2;
	this.speed = Math.random() * 4 + 2;
	this.gravity = 0.05;
	this.opacity = 1;
	this.fade = 0.03;
	}

	update() {
	this.x += Math.cos(this.angle) * this.speed;
	this.y += Math.sin(this.angle) * this.speed + this.gravity;
	this.opacity -= this.fade;
	}

	draw() {
	ctx.beginPath();
	ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
	ctx.fillStyle = `rgba(${this.color},${this.opacity})`;
	ctx.fill();
	}
	}

	let fireworks = [];

	function createFirework() {
	const x = Math.random() * canvas.width;
	const y = Math.random() * canvas.height;
	const colors = [
	'255, 99, 132',
	'54, 162, 235',
	'255, 206, 86',
	'75, 192, 192'
	];

	fireworks.push(new Firework(x, y, colors));
	}

	function animate() {
	ctx.clearRect(0, 0, canvas.width, canvas.height);

	fireworks.forEach((firework, index) => {
	firework.update();
	firework.draw();

	if (firework.particles[0].opacity <= 0) {
	fireworks.splice(index, 1);
	}
	});

	requestAnimationFrame(animate);
	}

	setInterval(createFirework, 500);
	animate();
	</script>
	</body>
	</html>