<div class="my-4">
  <h1 class="text-2xl py-2">CAPTCHA Code Instructions</h1>
  <ul class="pb-6 pl-4 list-disc">
    <li>Open
      <a href="https://authorize.kobo.com/signin" class="text-blue-700">https://authorize.kobo.com/signin</a>
      in a <b>private or incognito</b> window in your browser. <b>Do not login!</b>
    </li>
    <li>
      Open the developer tools. Press F12 in Firefox/Chrome, or right click the window and select "Inspect"
    </li>
    <li>
      Select the console tab, and copy-and-pase the following code, then press enter.
    </li>
    <li>A captcha should show up below the Sign-in form. Once you solve the captcha its response will be written
      below the pasted code in the browser's console. Copy the response (the line below "Captcha response:")
      and paste it here.</li>
  </ul>
  <div class="flex flex-wrap items-start">
    <img class="mr-4" width="580px" src="https://raw.githubusercontent.com/subdavis/kobo-book-downloader/master/docs/captcha.gif">
    <div class="flex-shrink rounded px-4 overflow-x-auto text-xs whitespace-pre font-mono" style="background-color: #f5f2f0; min-width: 420px;">
var newCaptchaDiv = document.createElement("div");
newCaptchaDiv.id = "new-hcaptcha-container";
var siteKey = document.getElementById('hcaptcha-container')
  .getAttribute('data-sitekey');
document.body.replaceChildren(newCaptchaDiv);
grecaptcha.render( newCaptchaDiv.id, {
    sitekey: siteKey,
    callback: function(r) {
      console.log("Captcha response:");
      console.log(r);
    }
});
console.log('Click the checkbox to get the code');</code></pre>
    </div>
  </div>
</div>
