<!doctype html>

<html>

<head>

  <meta charset="utf-8" />

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

  <title>Sleep Journal Thanks</title>

  <style>

    body { font-family: Arial, sans-serif; padding: 16px; }

    .card { border: 1px solid #ddd; border-radius: 12px; padding: 16px; max-width: 720px; margin: 0 auto; }

    h2 { margin: 0 0 8px 0; font-size: 18px; }

    .joke { font-size: 16px; line-height: 1.35; }

    .small { margin-top: 12px; font-size: 12px; opacity: 0.7; }

  </style>

</head>

<body>

  <div class="card">

    <h2>Thank you for filling out today’s sleep journal 🙏</h2>

    <div id="joke" class="joke"></div>

    <div class="small">You can close this tab.</div>

  </div>


  <script>

    const jokes = [

      "I sleep like a baby… waking up every few hours.",

      "My bed and I are in a committed relationship.",

      "Sleep is the only time travel I can afford.",

      // ... paste the rest of your 35 jokes here ...

      "Sleep and I are getting to know each other.",

      "My body rested, even if my thoughts wandered."

    ];


    const params = new URLSearchParams(window.location.search);

    const day = parseInt(params.get("day"), 10);


    let idx;

    if (!Number.isNaN(day) && day >= 1) {

      idx = (day - 1) % jokes.length;

    } else {

      idx = Math.floor(Math.random() * jokes.length);

    }


    document.getElementById("joke").textContent = jokes[idx];

  </script>

</body>

</html>