<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>IRELNET</title>
  <style>
  body {
    background: linear-gradient(to right,#4facfe, #00f2fe);
    font-weight: bold;
    text-align: center;
    padding: 20px;
    overflow-x: hidden;
  }
  .confetti-piece{
    position: fixed;
    border-radius: 50%;
    opacity: 0.9;
    pointer-events: none;
    will-change: transform, opacity;
    z-index: 9999;
    animation: confetti-fountain linear forwards;
    box-shadow: 0 0 8px rgba(255,255,255,0.6);
  }
  @keyframes confetti-fountain {
    0%   { transform: translateY(0) scale(1); opacity: 1; }
    60%  { opacity: 1; }
    100% { transform: translateY(-100vh) translateX(var(--tx)) scale(0.8); opacity: 0; }
  }
  button {
    height: 3em;
    font-weight: bold;
    font-size: 1.3rem;
    min-width: 70%;
    margin: 5px;
    border-radius: 20px;
    border: none;
    transition: background 0.2s, transform 0.2s;
  }
  button:disabled {
    background: rgb(160, 160, 160) !important;
    color: white !important;
    cursor: not-allowed !important;
  }
  button:not(#btn_test) {
    background: linear-gradient(135deg, #ff9a9e, #fad0c4);
    color: white;
  }
  button:not(#btn_test):hover {
    background: linear-gradient(135deg, #fad0c4, #ff9a9e);
    transform: scale(1.05);
    cursor: pointer;
  }
  </style>
</head>

<body>

  <h1>سوالات جشن ریاضی 🎉</h1>

  <span>آیا 32 بر 8 بخش پذیر است؟</span><br>
  <button class="q1" type="button" onclick="this.style.background='red'; alert('اشتباه')">الف- خیر</button>
  <button type="button" onclick="this.style.background='green'; hideIt('.q1'); shootConfetti(event);">ب- بله</button>

  <br><br><span>جواب تقسیم 132 / 3</span><br>
  <button type="button" onclick="this.style.background='green'; hideIt('.q3'); shootConfetti(event);">الف-44</button>
  <button class="q3" type="button" onclick="this.style.background='red'; alert('اشتباه')">ب- 43</button>

  <script>
  function hideIt(cn) {
    for (let element of Array.from(document.querySelectorAll(cn))) {
      element.setAttribute('disabled', '');
    }
  }

  function shootConfetti(e, options = {}) {
    const count = options.count || 200; // تعداد زیادتر
    const spread = options.spread || 300;
    const sizeMin = options.sizeMin || 6;
    const sizeMax = options.sizeMax || 14;
    const colors = options.colors || [
      'rgba(255,99,132,0.9)',
      'rgba(54,162,235,0.9)',
      'rgba(255,206,86,0.9)',
      'rgba(75,192,192,0.9)',
      'rgba(153,102,255,0.9)',
      'rgba(255,159,64,0.9)'
    ];

    let clientX = window.innerWidth / 2;
    let clientY = window.innerHeight - 30; // از پایین صفحه

    if (e && e.clientX) {
      clientX = e.clientX;
      clientY = window.innerHeight - 30;
    }

    for (let i = 0; i < count; i++) {
      const el = document.createElement('div');
      el.className = 'confetti-piece';
      const w = Math.round(Math.random()*(sizeMax-sizeMin)+sizeMin);
      el.style.width = w + 'px';
      el.style.height = w + 'px';
      el.style.background = colors[Math.floor(Math.random()*colors.length)];
      const tx = (Math.random()*spread - spread/2) + 'px';
      el.style.setProperty('--tx', tx);
      el.style.left = (clientX - w/2) + 'px';
      el.style.top  = (clientY - w/2) + 'px';
      const duration = (Math.random()*1 + 1.5).toFixed(2) + 's';
      el.style.animationDuration = duration;
      document.body.appendChild(el);
      setTimeout(()=> el.remove(), (parseFloat(duration) * 1000) + 300);
    }
  }
  </script>

</body>
</html>