add a simple browser based demo

Signed-off-by: hrj <harshad.rj@gmail.com>
2025-11-29 05:18:50 -05:00 · 2021-04-19 13:14:36 +05:30
parent f38d6ee191
commit 6189ffce89
3 changed files with 82 additions and 2 deletions
--- a/src/main/resources/index.html
+++ b/src/main/resources/index.html
@@ -0,0 +1,69 @@
+<html>
+  <style>
+    body {background-color: #e7f7f7;}
+    button {background-color: #b4ffff; font-size:1.66em;}
+    input[type=text] {font-size:1.66em;}
+    div.inputGroup {margin: 1em}
+    div.section {border: .33em solid #0b6767; margin:1em; padding: 1em}
+  </style>
+
+<script>
+  async function loadCaptcha() {
+    const levelInput = document.getElementById("levelInput").value
+    const mediaInput = document.getElementById("mediaInput").value
+    const typeInput = document.getElementById("typeInput").value
+    const resp = await fetch("/v1/captcha", {
+       method: 'POST',
+       body: JSON.stringify({level: levelInput, media: mediaInput, "input_type" : typeInput})
+    })
+    const respJson = await resp.json()
+    const id = respJson.id
+    const resultDiv = document.getElementById("result")
+    const result = `
+      <p>Id: ${id}</p>
+      <p><img src="/v1/media?id=${id}" /> </p>
+      <input type="text" id="answerInput" />
+      <button onClick="submitAnswer('${id}')">Submit</button>
+      <div id="answerResult" />
+    `
+    resultDiv.innerHTML = result;
+  }
+  async function submitAnswer(id) {
+    const ans = document.getElementById("answerInput").value;
+    const resp = await fetch("/v1/answer", {
+       method: 'POST',
+       body: JSON.stringify({id: id, answer: ans})
+    })
+    const respJson = await resp.json()
+    const resultDiv = document.getElementById("answerResult")
+    const result = `
+      <p>${JSON.stringify(respJson)}</p>
+    `
+    resultDiv.innerHTML = result;
+  }
+
+</script>
+<body>
+  <div class="section">
+    <div class="inputGroup">
+      <span>Level</span>
+      <input type="text" id="levelInput" value="easy"/>
+    </div>
+    <div class="inputGroup">
+      <span>Media</span>
+      <input type="text" id="mediaInput" value="image/png" />
+    </div>
+    <div class="inputGroup">
+      <span>Input Type</span>
+      <input type="text" id="typeInput" value="text" />
+    </div>
+    <div class="inputGroup">
+      <button onClick="loadCaptcha()">Get New CAPTCHA</button>
+    </div>
+  </div>
+  <div class="section">
+    <div id="result">...</div>
+  </div>
+</body>
+
+</html>