e2e/index.html

<html>
  <head>
    <script async defer src="../dist/altcha.js" type="module"></script>
  </head>

  <body>
    <main>

      <div id="test-render">
        <altcha-widget
          challengeurl=""
        ></altcha-widget>
      </div>

      <div id="test-label">
        <altcha-widget
          challengeurl=""
          strings="{&quot;label&quot;:&quot;custom label&quot;}"
        ></altcha-widget>
      </div>

      <div id="test-hidelogo">
        <altcha-widget
          challengeurl=""
          hidelogo
        ></altcha-widget>
      </div>

      <div id="test-hidefooter">
        <altcha-widget
          challengeurl=""
          hidefooter
        ></altcha-widget>
      </div>

      <div id="test-expire">
        <altcha-widget
          challengeurl=""
          expire="2000"
        ></altcha-widget>
      </div>

      <div id="test-configure">
        <altcha-widget
          id="test-configure-altcha"
        ></altcha-widget>

        <script>
          window.addEventListener('load', () => {
            document.querySelector('#test-configure-altcha').configure({
              hidelogo: true,
              strings: {
                label: 'configured label',
              },
            });
          });
        </script>
      </div>

      <div id="test-verification">
        <form method="post">
          <altcha-widget
            id="test-verification-altcha"
            name="alctha-verification"
          ></altcha-widget>
        </form>

        <script>
          window.addEventListener('load', () => {
            document.querySelector('#test-verification-altcha').configure({
              test: 10,
            });
          });
        </script>
      </div>

    </main>
  </body>
</html>