feat: add index.html for Edge Proxy Relay interface with request handling

2026-05-07 19:46:00 +07:00
parent cfbc4609b5
commit 4cf3a520d5
1 changed files with 66 additions and 0 deletions
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Edge Proxy Relay</title>
+  <style>
+    body { font-family: monospace; padding: 2rem; background: #1a1a2e; color: #eee; }
+    h1 { color: #00d9ff; }
+    pre { background: #16213e; padding: 1rem; border-radius: 8px; overflow-x: auto; }
+    .log { color: #00ff88; }
+    .error { color: #ff6b6b; }
+    input, button { padding: 0.5rem 1rem; margin: 0.5rem 0; }
+    input { background: #16213e; border: 1px solid #00d9ff; color: #fff; width: 300px; }
+    button { background: #00d9ff; border: none; cursor: pointer; font-weight: bold; }
+    button:hover { background: #00b8d9; }
+  </style>
+</head>
+<body>
+  <h1>Edge Proxy Relay</h1>
+  <p>Forward requests to external APIs via Vercel Edge</p>
+
+  <div>
+    <input type="text" id="target" value="https://httpbin.org/anything" placeholder="Target URL" />
+    <button onclick="sendRequest()">Send Request</button>
+  </div>
+
+  <h3>Response:</h3>
+  <pre id="output" class="log">Waiting for request...</pre>
+
+  <script>
+    async function sendRequest() {
+      const target = document.getElementById('target').value;
+      const output = document.getElementById('output');
+
+      output.textContent = 'Sending request...';
+      output.className = 'log';
+
+      try {
+        const start = Date.now();
+        const res = await fetch('/', {
+          method: 'POST',
+          headers: {
+            'x-relay-target': target,
+            'Content-Type': 'application/json'
+          },
+          body: JSON.stringify({ hello: 'world', timestamp: Date.now() })
+        });
+
+        const data = await res.json();
+        const elapsed = Date.now() - start;
+
+        output.textContent = JSON.stringify({
+          status: res.status,
+          elapsed: elapsed + 'ms',
+          data
+        }, null, 2);
+        output.className = 'log';
+      } catch (err) {
+        output.textContent = 'Error: ' + err.message;
+        output.className = 'error';
+      }
+    }
+  </script>
+</body>
+</html>