lusyus/gist:5d0c02ab60b72ac7c82ec786e065e3bb

## gistfile1.txt
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Be My Valentine?</title>
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;500&display=swap" rel="stylesheet">
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      font-family: 'Poppins', sans-serif;
      background: linear-gradient(135deg, #ffe6e6, #ffb3b3);
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      overflow: hidden;
      color: #333;
    }
    .container {
      text-align: center;
      background: rgba(255, 255, 255, 0.9);
      padding: 40px 20px;
      border-radius: 12px;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
      max-width: 400px;
    }
    h1 {
      font-size: 2.8rem;
      color: #ff4d4d;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    }
    p {
      font-size: 1.3rem;
      margin-top: 10px;
    }
    button {
      background-color: #ff4d4d;
      color: white;
      border: none;
      padding: 12px 24px;
      border-radius: 10px;
      font-size: 1.1rem;
      cursor: pointer;
      margin-top: 20px;
      transition: transform 0.3s, background-color 0.3s;
    }
    button:hover {
      background-color: #ff1a1a;
      transform: scale(1.1);
    }
    #confetti {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 10;
    }
    .button-container {
      display: flex;
      justify-content: space-around;
      margin-top: 30px;
    }
    #no-button {
      position: relative;
    }
    .hearts-animation {
      position: absolute;
      animation: floatUp 3s infinite;
      color: #ff4d4d;
      font-size: 2rem;
    }
    @keyframes floatUp {
      0% {
        transform: translateY(0) scale(1);
        opacity: 1;
      }
      100% {
        transform: translateY(-100px) scale(0.7);
        opacity: 0;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>Will You Be My Valentine, Rose Andrea D. Kisol? ❤️</h1>
    <p>It would make me the happiest person, Mimon!</p>
    <div class="button-container">
      <button onclick="revealLoveMessage()">YES! 💕</button>
      <button id="no-button" onclick="moveButton()">NO 😭</button>
    </div>
    <p id="hidden-message" style="display: none; margin-top: 20px; font-weight: bold;">Yay! Dahil jan may utang ako sayo ng unli wings puhon HAHAHAHAHAH 💖</p>
  </div>
  <canvas id="confetti"></canvas>
  <script>
    function revealLoveMessage() {
      document.getElementById('hidden-message').style.display = 'block';
      startConfetti();
      triggerHearts();
    }

    // Confetti animation
    const confetti = document.getElementById('confetti');
    const ctx = confetti.getContext('2d');
    confetti.width = window.innerWidth;
    confetti.height = window.innerHeight;

    const confettiParticles = [];
    const particleCount = 150;
    const colors = ['#ff4d4d', '#ff9999', '#ffd1d1', '#ffffff'];

    class ConfettiParticle {
      constructor() {
        this.x = Math.random() * confetti.width;
        this.y = Math.random() * confetti.height - confetti.height;
        this.size = Math.random() * 8 + 4;
        this.color = colors[Math.floor(Math.random() * colors.length)];
        this.speed = Math.random() * 3 + 1;
        this.angle = Math.random() * Math.PI * 2;
      }

      update() {
        this.y += this.speed;
        if (this.y > confetti.height) this.y = -this.size;
        this.x += Math.sin(this.angle) * 2;
      }

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

    for (let i = 0; i < particleCount; i++) {
      confettiParticles.push(new ConfettiParticle());
    }

    function startConfetti() {
      requestAnimationFrame(updateConfetti);
    }

    function updateConfetti() {
      ctx.clearRect(0, 0, confetti.width, confetti.height);
      confettiParticles.forEach(particle => {
        particle.update();
        particle.draw();
      });
      requestAnimationFrame(updateConfetti);
    }

    // Floating hearts animation
    function triggerHearts() {
      for (let i = 0; i < 10; i++) {
        createFloatingHeart();
      }
    }

    function createFloatingHeart() {
      const heart = document.createElement('div');
      heart.classList.add('hearts-animation');
      heart.innerText = '❤️';
      document.body.appendChild(heart);

      const startX = Math.random() * window.innerWidth;
      heart.style.left = `${startX}px`;
      heart.style.bottom = '0px';

      heart.animate(
        [
          { transform: 'translateY(0px)', opacity: 1 },
          { transform: 'translateY(-150px) scale(0.7)', opacity: 0 }
        ],
        { duration: 3000, easing: 'ease-out', iterations: 1 }
      ).onfinish = () => heart.remove();
    }

    // Move NO button on hover
    const noButton = document.getElementById('no-button');

    function moveButton() {
      const container = noButton.parentElement;
      const containerBounds = container.getBoundingClientRect();

      let randomX = Math.random() * (containerBounds.width - noButton.offsetWidth);
      let randomY = Math.random() * (containerBounds.height - noButton.offsetHeight);

      noButton.style.position = 'absolute';
      noButton.style.left = `${randomX}px`;
      noButton.style.top = `${randomY}px`;
    }
  </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>Be My Valentine?</title>
	<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;500&display=swap" rel="stylesheet">
	<style>
	* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	}
	body {
	font-family: 'Poppins', sans-serif;
	background: linear-gradient(135deg, #ffe6e6, #ffb3b3);
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	overflow: hidden;
	color: #333;
	}
	.container {
	text-align: center;
	background: rgba(255, 255, 255, 0.9);
	padding: 40px 20px;
	border-radius: 12px;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
	max-width: 400px;
	}
	h1 {
	font-size: 2.8rem;
	color: #ff4d4d;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
	}
	p {
	font-size: 1.3rem;
	margin-top: 10px;
	}
	button {
	background-color: #ff4d4d;
	color: white;
	border: none;
	padding: 12px 24px;
	border-radius: 10px;
	font-size: 1.1rem;
	cursor: pointer;
	margin-top: 20px;
	transition: transform 0.3s, background-color 0.3s;
	}
	button:hover {
	background-color: #ff1a1a;
	transform: scale(1.1);
	}
	#confetti {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 10;
	}
	.button-container {
	display: flex;
	justify-content: space-around;
	margin-top: 30px;
	}
	#no-button {
	position: relative;
	}
	.hearts-animation {
	position: absolute;
	animation: floatUp 3s infinite;
	color: #ff4d4d;
	font-size: 2rem;
	}
	@keyframes floatUp {
	0% {
	transform: translateY(0) scale(1);
	opacity: 1;
	}
	100% {
	transform: translateY(-100px) scale(0.7);
	opacity: 0;
	}
	}
	</style>
	</head>
	<body>
	<div class="container">
	<h1>Will You Be My Valentine, Rose Andrea D. Kisol? ❤️</h1>
	<p>It would make me the happiest person, Mimon!</p>
	<div class="button-container">
	<button onclick="revealLoveMessage()">YES! 💕</button>
	<button id="no-button" onclick="moveButton()">NO 😭</button>
	</div>
	<p id="hidden-message" style="display: none; margin-top: 20px; font-weight: bold;">Yay! Dahil jan may utang ako sayo ng unli wings puhon HAHAHAHAHAH 💖</p>
	</div>
	<canvas id="confetti"></canvas>
	<script>
	function revealLoveMessage() {
	document.getElementById('hidden-message').style.display = 'block';
	startConfetti();
	triggerHearts();
	}

	// Confetti animation
	const confetti = document.getElementById('confetti');
	const ctx = confetti.getContext('2d');
	confetti.width = window.innerWidth;
	confetti.height = window.innerHeight;

	const confettiParticles = [];
	const particleCount = 150;
	const colors = ['#ff4d4d', '#ff9999', '#ffd1d1', '#ffffff'];

	class ConfettiParticle {
	constructor() {
	this.x = Math.random() * confetti.width;
	this.y = Math.random() * confetti.height - confetti.height;
	this.size = Math.random() * 8 + 4;
	this.color = colors[Math.floor(Math.random() * colors.length)];
	this.speed = Math.random() * 3 + 1;
	this.angle = Math.random() * Math.PI * 2;
	}

	update() {
	this.y += this.speed;
	if (this.y > confetti.height) this.y = -this.size;
	this.x += Math.sin(this.angle) * 2;
	}

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

	for (let i = 0; i < particleCount; i++) {
	confettiParticles.push(new ConfettiParticle());
	}

	function startConfetti() {
	requestAnimationFrame(updateConfetti);
	}

	function updateConfetti() {
	ctx.clearRect(0, 0, confetti.width, confetti.height);
	confettiParticles.forEach(particle => {
	particle.update();
	particle.draw();
	});
	requestAnimationFrame(updateConfetti);
	}

	// Floating hearts animation
	function triggerHearts() {
	for (let i = 0; i < 10; i++) {
	createFloatingHeart();
	}
	}

	function createFloatingHeart() {
	const heart = document.createElement('div');
	heart.classList.add('hearts-animation');
	heart.innerText = '❤️';
	document.body.appendChild(heart);

	const startX = Math.random() * window.innerWidth;
	heart.style.left = `${startX}px`;
	heart.style.bottom = '0px';

	heart.animate(
	[
	{ transform: 'translateY(0px)', opacity: 1 },
	{ transform: 'translateY(-150px) scale(0.7)', opacity: 0 }
	],
	{ duration: 3000, easing: 'ease-out', iterations: 1 }
	).onfinish = () => heart.remove();
	}

	// Move NO button on hover
	const noButton = document.getElementById('no-button');

	function moveButton() {
	const container = noButton.parentElement;
	const containerBounds = container.getBoundingClientRect();

	let randomX = Math.random() * (containerBounds.width - noButton.offsetWidth);
	let randomY = Math.random() * (containerBounds.height - noButton.offsetHeight);

	noButton.style.position = 'absolute';
	noButton.style.left = `${randomX}px`;
	noButton.style.top = `${randomY}px`;
	}
	</script>
	</body>
	</html>