| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Test /add_points_and_refresh_fn API</title> |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.js"></script> |
| </head> |
| <body class="bg-gray-100 p-8"> |
| <div class="max-w-2xl mx-auto bg-white rounded-lg shadow-lg p-6"> |
| <h1 class="text-3xl font-bold mb-6">Test /add_points_and_refresh_fn API</h1> |
| |
| <div class="mb-4"> |
| <label class="block text-gray-700 text-sm font-bold mb-2" for="email"> |
| Email |
| </label> |
| <input type="email" |
| id="email" |
| class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" |
| placeholder="Enter email"> |
| </div> |
|
|
| <div class="mb-4"> |
| <button id="submit" |
| class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"> |
| Submit |
| </button> |
| </div> |
|
|
| <div class="mb-4"> |
| <label class="block text-gray-700 text-sm font-bold mb-2"> |
| Status |
| </label> |
| <div id="status" |
| class="border rounded w-full py-2 px-3 text-gray-700 bg-gray-100"> |
| </div> |
| </div> |
|
|
| <div class="mb-4"> |
| <label class="block text-gray-700 text-sm font-bold mb-2"> |
| Value |
| </label> |
| <div id="value" |
| class="border rounded w-full py-2 px-3 text-gray-700 bg-gray-100"> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| document.getElementById('submit').addEventListener('click', async () => { |
| const email = document.getElementById('email').value; |
| const statusElement = document.getElementById('status'); |
| const valueElement = document.getElementById('value'); |
| |
| |
| statusElement.textContent = 'Processing...'; |
| valueElement.innerHTML = ''; |
| |
| try { |
| const response = await fetch('https://ginipick-Dokdo-pay.hf.space/add_points_and_refresh_fn', { |
| method: 'POST', |
| headers: { |
| 'Content-Type': 'application/json', |
| }, |
| body: JSON.stringify({ email: email }) |
| }); |
| |
| if (!response.ok) { |
| throw new Error(`HTTP error! status: ${response.status}`); |
| } |
| |
| const data = await response.json(); |
| |
| |
| statusElement.textContent = data[0]; |
| valueElement.innerHTML = data[1]; |
| |
| } catch (error) { |
| statusElement.textContent = `Error: ${error.message}`; |
| valueElement.innerHTML = 'Error occurred'; |
| console.error('Error:', error); |
| } |
| }); |
| </script> |
| </body> |
| </html> |
