<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>for scoey</title>
  <link rel="stylesheet" href="index.css">
  <style>
    button {
      padding: 10px 20px;
      background: none;
      border-radius: 0px;
      box-shadow: none;
      border: 2px black solid;
      font-size: 1rem;
      margin-right: 10px;
    }

    .hidden {
      display: none;
    }
  </style>
</head>

<body>
  <div class="main-container">
    <div class="main">
      <div class="page hidden" id="incorrect">
        <h2 id="message">bruh.</h2>
        <button id="back">one more chance pls</button>
      </div>
      <div class="page" id="p1">
        <h2 id="message">are u rlly my scoey</h2>
        <button id="ru">yes</button>
        <button class="incorrect" id="no">idk</button>
      </div>
      <div class="page hidden" id="p2">
        <h2 id="message">good!</h2>
        <button id="ok">ok...</button>
      </div>
      <div class="page hidden" id="p3">
        <h2 id="message">how many nippers</h2>
        <button class="incorrect" id="two">2</button>
        <button id="four">4</button>
        <button class="incorrect" id="thousand">1000</button>
        <button class="incorrect" id="zero">0</button>
        <button class="incorrect" id="what">what</button>
      </div>
      <div class="page hidden" id="p4">
        <h2 id="message">how much do u love me</h2>
        <button class="incorrect">very</button>
        <button class="incorrect">a lot a lot</button>
        <button id="more">more than anything</button>
      </div>
      <div class="page hidden" id="p5">
        <h2 id="message">who is more chou</h2>
        <button class="incorrect">bachy</button>
        <button id="scoey">scoey</button>
      </div>
      <div class="page hidden" id="p6">
        <h2 id="message">i love you lots scoey ❤️ 🫵<br> happy two months!</h2>
        <button id="mua">MUAAA</button>
      </div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/js-confetti@0.12.0/dist/js-confetti.browser.min.js"></script>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"
    integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
  <script>
    $('#ru').click(() => {
      $('#p1').hide()
      $('#p2').show()
    })
    $('#ok').click(() => {
      $('#p2').hide()
      $('#p3').show()
    })
    $('#four').click(() => {
      $('#p3').hide()
      $('#p4').show()
    })
    $('#more').click(() => {
      $('#p4').hide()
      $('#p5').show()
    })
    $('#scoey').click(() => {
      $('#p5').hide()
      $('#p6').show()
    })
    $('.incorrect').click(() => {
      $('.page').hide()
      $('#incorrect').show()
    })
    $('#back').click(() => {
      $('.page').hide()
      $('#p1').show()
    })
    $('#mua').click(() => {
      const jsConfetti = new JSConfetti()
      jsConfetti.addConfetti({
        emojis: ['❤️', '🐽', '😍', '🧌'],
        emojiSize: 50,
      })
    })
  </script>
</body>

</html>