Untitled

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Card Stacks</title>
  <style>
    body {
      background-color: #0b3d91;
      color: white;
      font-family: Arial, sans-serif;
      text-align: center;
      margin: 0;
      padding: 30px;
    }

    #shuffleBtn {
      margin-bottom: 50px;
      padding: 15px 30px;
      font-size: 18px;
      background-color: #ffcc00;
      border: none;
      border-radius: 8px;
      cursor: pointer;
    }

    .table {
      display: flex;
      justify-content: center;
      gap: 80px;
      perspective: 1000px;
    }

    .stack {
      display: flex;
      flex-direction: column;
      gap: 10px;
      cursor: pointer;
      transition: transform 0.3s;
    }

    .foreground {
      transform: scale(1.2);
      z-index: 2;
    }

    .background {
      transform: translateZ(-100px) scale(0.9);
      opacity: 0.8;
      z-index: 1;
    }

    .card {
      width: 100px;
      height: 140px;
      background-color: white;
      border: 2px solid #333;
      border-radius: 8px;
      background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/5/54/Card_back_06.svg/200px-Card_back_06.svg.png');
      background-size: cover;
      transition: transform 0.5s;
    }

    .card.face-up {
      background-image: none;
      background-color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 30px;
      font-weight: bold;
    }

    .black { color: black; }
    .red { color: red; }
  </style>
</head>
<body>

  <button id="shuffleBtn">Shuffle Stacks</button>

  <div class="table" id="table">
    <!-- Stacks inserted here by JavaScript -->
  </div>

  <script>
    const cardData = [
      ['K♠', 'K♠'],    // King of Spades
      ['K♠', 'Q♥'],    // King of Spades and Queen of Hearts
      ['Q♥', 'Q♥']     // Two Queens of Hearts
    ];

    let table = document.getElementById('table');
    let states = [0, 0, 0]; // 0 = all down, 1 = top up, 2 = both up

    function createCard(face) {
      const div = document.createElement('div');
      div.className = 'card';
      div.dataset.face = face;
      return div;
    }

    function setCardFace(card, faceUp) {
      if (faceUp) {
        card.classList.add('face-up');
        card.textContent = card.dataset.face;

        if (card.dataset.face.includes('♥')) {
          card.classList.remove('black');
          card.classList.add('red');
        } else {
          card.classList.remove('red');
          card.classList.add('black');
        }

        card.style.backgroundImage = 'none';
      } else {
        card.classList.remove('face-up', 'red', 'black');
        card.textContent = '';
        card.style.backgroundImage = 'url("https://upload.wikimedia.org/wikipedia/commons/thumb/5/54/Card_back_06.svg/200px-Card_back_06.svg.png")';
      }
    }

    function renderStacks(order) {
      table.innerHTML = '';
      order.forEach((index, pos) => {
        const stackDiv = document.createElement('div');
        stackDiv.className = 'stack';
        stackDiv.classList.add(pos === 1 ? 'foreground' : 'background');
        stackDiv.dataset.index = index;

        const topCard = createCard(cardData[index][0]);
        const bottomCard = createCard(cardData[index][1]);
        stackDiv.appendChild(topCard);
        stackDiv.appendChild(bottomCard);

        stackDiv.addEventListener('click', () => handleClick(stackDiv));
        table.appendChild(stackDiv);
      });
    }

    function handleClick(stackDiv) {
      const index = +stackDiv.dataset.index;
      const cards = stackDiv.querySelectorAll('.card');

      states[index] = (states[index] + 1) % 3;

      if (states[index] === 0) {
        cards.forEach(card => setCardFace(card, false));
      } else if (states[index] === 1) {
        setCardFace(cards[0], true);
        setCardFace(cards[1], false);
      } else if (states[index] === 2) {
        cards.forEach(card => setCardFace(card, true));
      }
    }

    function shuffleStacks() {
      const newOrder = [0, 1, 2].sort(() => Math.random() - 0.5);
      renderStacks(newOrder);
    }

    document.getElementById('shuffleBtn').addEventListener('click', shuffleStacks);

    // Initial render
    renderStacks([0, 1, 2]);
  </script>

</body>
</html>