Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Township Business Registration</title> | |
| <style> | |
| body { font-family: sans-serif; padding: 1rem; max-width: 600px; margin: auto; } | |
| input, textarea { width: 100%; margin: 0.5rem 0; padding: 0.5rem; } | |
| button { padding: 0.7rem 1.5rem; margin-top: 1rem; } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>Register Your Township Business</h1> | |
| <form id="register-form"> | |
| <input type="text" id="name" placeholder="Business Name" required /> | |
| <textarea id="description" placeholder="Description" required></textarea> | |
| <input type="text" id="address" placeholder="Address" required /> | |
| <input type="text" id="phone" placeholder="Phone" required /> | |
| <input type="hidden" id="latitude" /> | |
| <input type="hidden" id="longitude" /> | |
| <button type="submit">Register Business</button> | |
| </form> | |
| <h2>Find Nearby Businesses</h2> | |
| <button onclick="getNearbyBusinesses()">Get Nearby</button> | |
| <pre id="output"></pre> | |
| <script> | |
| const mcpUrl = "https://puseletso55-township-mcp-server.hf.space"; | |
| navigator.geolocation.getCurrentPosition(position => { | |
| document.getElementById("latitude").value = position.coords.latitude; | |
| document.getElementById("longitude").value = position.coords.longitude; | |
| }); | |
| document.getElementById("register-form").addEventListener("submit", async (e) => { | |
| e.preventDefault(); | |
| const data = { | |
| method: "registerBusiness", | |
| params: { | |
| name: document.getElementById("name").value, | |
| description: document.getElementById("description").value, | |
| address: document.getElementById("address").value, | |
| phone: document.getElementById("phone").value, | |
| latitude: document.getElementById("latitude").value, | |
| longitude: document.getElementById("longitude").value | |
| }, | |
| id: 1 | |
| }; | |
| const response = await fetch(mcpUrl, { | |
| method: "POST", | |
| headers: { "Content-Type": "application/json" }, | |
| body: JSON.stringify({ data: JSON.stringify(data) }) | |
| }); | |
| const result = await response.json(); | |
| alert("Business Registered!\n" + JSON.stringify(result, null, 2)); | |
| }); | |
| async function getNearbyBusinesses() { | |
| const lat = document.getElementById("latitude").value; | |
| const lon = document.getElementById("longitude").value; | |
| const data = { | |
| method: "getNearbyBusinesses", | |
| params: { latitude: lat, longitude: lon, radius_km: 15 }, | |
| id: 2 | |
| }; | |
| const response = await fetch(mcpUrl, { | |
| method: "POST", | |
| headers: { "Content-Type": "application/json" }, | |
| body: JSON.stringify({ data: JSON.stringify(data) }) | |
| }); | |
| const result = await response.json(); | |
| document.getElementById("output").textContent = JSON.stringify(result, null, 2); | |
| } | |
| </script> | |
| </body> | |
| </html> | |