seija-captcha/index.html at master · sym233/seija-captcha · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Seija Captcha</title>
    <style>
      div.main {
        max-width: 80%;
        background-color: #eeeeee;
        margin: 0 auto;
        padding: 1em;
      }
    </style>
  </head>
  <body>
    <div class="main">
      <h3>Seiji Captcha Example</h3>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Sem integer vitae
        justo eget magna fermentum iaculis eu. Dis parturient montes nascetur
        ridiculus mus mauris vitae ultricies leo. Quisque non tellus orci ac
        auctor augue mauris augue neque. Lectus quam id leo in vitae turpis
        massa sed elementum. Varius morbi enim nunc faucibus a pellentesque sit
        amet porttitor. Vitae elementum curabitur vitae nunc sed velit dignissim
        sodales ut. Libero justo laoreet sit amet cursus sit. Eu ultrices vitae
        auctor eu augue ut. Facilisis mauris sit amet massa vitae tortor. Nulla
        facilisi etiam dignissim diam quis. Bibendum enim facilisis gravida
        neque convallis a. Vitae elementum curabitur vitae nunc sed velit
        dignissim. Pretium lectus quam id leo. Habitant morbi tristique senectus
        et. Imperdiet massa tincidunt nunc pulvinar sapien et. At volutpat diam
        ut venenatis. Lorem donec massa sapien faucibus et molestie ac feugiat.
        Sed adipiscing diam donec adipiscing tristique risus.
      </p>
      <h5>↓ Click Button Here ↓</h5>
      <button id="btn">Captcha</button>
      <p>
        Volutpat maecenas volutpat blandit aliquam etiam erat velit scelerisque.
        Eu turpis egestas pretium aenean pharetra magna. Tincidunt lobortis
        feugiat vivamus at augue eget arcu dictum varius. Neque ornare aenean
        euismod elementum nisi quis eleifend quam. Cras fermentum odio eu
        feugiat pretium. Morbi quis commodo odio aenean sed adipiscing diam.
        Tincidunt id aliquet risus feugiat in ante metus dictum at. In est ante
        in nibh mauris cursus. Tempor nec feugiat nisl pretium fusce id velit.
        Interdum consectetur libero id faucibus nisl. Tellus pellentesque eu
        tincidunt tortor aliquam nulla facilisi.
      </p>
    </div>
    <script type="module">
      import seijaCaptcha from '/src/index';
      const close = { current: null };
      document.getElementById('btn')?.addEventListener('click', () => {
        close.current = seijaCaptcha(b => {
          if (b) {
            alert('successful');
            close.current?.();
          }
        });
      });
    </script>
  </body>
</html>