Truth or Dare 💜

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Truth or Dare 💜</title>

<style>

* { box-sizing: border-box; }

body {

  margin: 0;

  min-height: 100vh;

  font-family: Arial, sans-serif;

  background: linear-gradient(135deg, #f8d8ff, #d9d5ff, #ffe1ed);

  display: grid;

  place-items: center;

  padding: 20px;

  color: #39234f;

}

.game {

  background: white;

  max-width: 420px;

  width: 100%;

  padding: 28px 22px;

  border-radius: 28px;

  text-align: center;

  box-shadow: 0 15px 45px #66408025;

}

h1 { font-size: 32px; margin-bottom: 8px; }

p { line-height: 1.5; }

.tag {

  color: #8b55bd;

  font-size: 13px;

  font-weight: bold;

  letter-spacing: 2px;

}

button {

  border: 0;

  border-radius: 14px;

  padding: 15px;

  width: 100%;

  margin-top: 12px;

  font-size: 17px;

  font-weight: bold;

  cursor: pointer;

  color: white;

  touch-action: manipulation;

}

.truth { background: #a16bdb; }

.dare { background: #f06da8; }

.next { background: #49345e; }

button:active { transform: scale(.98); }

#card {

  margin-top: 22px;

  padding: 25px 16px;

  min-height: 155px;

  background: #f8f1ff;

  border: 2px dashed #ddc4f4;

  border-radius: 20px;

  display: flex;

  flex-direction: column;

  justify-content: center;

}

#kind {

  font-size: 13px;

  font-weight: bold;

  letter-spacing: 2px;

  color: #8b55bd;

}

#prompt {

  font-size: 21px;

  font-weight: bold;

  margin: 12px 0;

}

.small {

  font-size: 12px;

  color: #887795;

  margin-top: 20px;

}

</style>

</head>

<body>

<main class="game">

  <div class="tag">✨ FRIENDS EDITION ✨</div>

  <h1>Truth or Dare 💜</h1>

  <p>Ready to laugh? Choose your challenge!</p>

  <section id="card" aria-live="polite">

    <div id="kind">YOUR TURN</div>

    <div id="prompt">Pick Truth or Dare! 👀</div>

  </section>

  <button class="truth" onclick="pick('truth')">

    💜 TRUTH

  </button>

  <button class="dare" onclick="pick('dare')">

    💗 DARE

  </button>

  <button class="next" onclick="resetGame()">

    🔄 New Turn

  </button>

  <p class="small">

    Made with 💗 by Zho Wan<br>

    Skip any question or challenge you dislike!

  </p>

</main>

<script>

const truths = [

  "What's your funniest embarrassing moment?",

  "Who makes you laugh the most?",

  "What's your weirdest habit?",

  "What's one skill you wish you had?",

  "What's your most-used emoji?",

  "What's a song you secretly love?",

  "What's the funniest dream you remember?",

  "What's your favourite memory with friends?",

  "What fictional character are you most like?",

  "What's something that always cheers you up?"

];

const dares = [

  "Do your funniest dance for 10 seconds!",

  "Speak like a robot for one minute!",

  "Make your silliest face!",

  "Sing the chorus of your favourite song!",

  "Talk in a dramatic movie voice for one turn!",

  "Invent a new handshake!",

  "Pretend you're accepting an award!",

  "Draw a cat in 20 seconds!",

  "Tell a joke in your most serious voice!",

  "Try to say a tongue twister three times!"

];

let previous = -1;

function pick(type) {

  const list = type === "truth" ? truths : dares;

  let index;

  do {

    index = Math.floor(Math.random() * list.length);

  } while (list.length > 1 && index === previous);

  previous = index;

  document.getElementById("kind").textContent =

    type === "truth" ? "💜 TRUTH" : "💗 DARE";

  document.getElementById("prompt").textContent =

    list[index];

}

function resetGame() {

  previous = -1;

  document.getElementById("kind").textContent = "YOUR TURN";

  document.getElementById("prompt").textContent =

    "Pick Truth or Dare! 👀";

}

</script>

</body>

</html>