<div class="hand-flip-container">
  <h2 class="hand-flip-title">हाथों को फ्लिप करें और देखें कौन सा हाथ गिरता है!</h2>
  <div class="hands-container">
    <div class="hand" id="hand1">
      <img src="https://example.com/hand1.png" alt="Hand 1">
    </div>
    <div class="hand" id="hand2">
      <img src="https://example.com/hand2.png" alt="Hand 2">
    </div>
  </div>
  <button class="flip-button" onclick="flipHands()">हाथ फ्लिप करें</button>
  <p id="result" class="hand-flip-result"></p>
</div>

<style>
.hand-flip-container {
  text-align: center;
  margin: 50px auto;
  padding: 20px;
  background: #f9fafc;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  max-width: 500px;
}

.hand-flip-title {
  font-size: 24px;
  margin-bottom: 20px;
  color: #333;
}

.hands-container {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin: 30px 0;
}

.hand {
  width: 150px;
  height: 150px;
  transition: transform 1.5s ease-in-out;
}

.hand img {
  width: 100%;
  height: 100%;
}

.flip-button {
  background: #0078d4;
  color: white;
  border: none;
  padding: 10px 20px;
  font-size: 16px;
  border-radius: 5px;
  cursor: pointer;
  margin-top: 20px;
}

.flip-button:hover {
  background: #005bb5;
}

.hand-flip-result {
  margin-top: 20px;
  font-size: 18px;
  font-weight: bold;
  color: #444;
}
</style>

<script>
function flipHands() {
  const hand1 = document.getElementById('hand1');
  const hand2 = document.getElementById('hand2');
  const result = document.getElementById('result');
  const random = Math.random();

  // Reset both hands before flipping again
  hand1.style.transform = 'rotateX(0deg)';
  hand2.style.transform = 'rotateX(0deg)';
  result.innerText = '';

  // Animate both hands spinning
  hand1.style.transform = 'rotateX(1080deg)';
  hand2.style.transform = 'rotateX(1080deg)';

  setTimeout(() => {
    if (random < 0.5) {
      hand1.style.transform = 'translateY(50px) rotate(30deg)';
      hand2.style.transform = 'translateY(0)';
      result.innerText = 'पहला हाथ गिरा!';
    } else {
      hand2.style.transform = 'translateY(50px) rotate(-30deg)';
      hand1.style.transform = 'translateY(0)';
      result.innerText = 'दूसरा हाथ गिरा!';
    }
  }, 1500);
}
</script>