apx-toolkit
Version:
Automatically discover APIs and generate complete integration packages: code in 12 languages, TypeScript types, test suites, SDK packages, API documentation, mock servers, performance reports, and contract tests. Saves 2-4 weeks of work in seconds.
215 lines (198 loc) • 7.2 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>APX Toolkit - Interactive API Explorer</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: #1e1e1e;
color: #d4d4d4;
padding: 20px;
}
.container {
max-width: 1400px;
margin: 0 auto;
}
h1 {
color: #4ec9b0;
margin-bottom: 20px;
}
.api-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
gap: 20px;
margin-bottom: 30px;
}
.api-card {
background: #252526;
border: 1px solid #3e3e42;
border-radius: 8px;
padding: 20px;
cursor: pointer;
transition: all 0.2s;
}
.api-card:hover {
border-color: #4ec9b0;
transform: translateY(-2px);
}
.api-method {
display: inline-block;
padding: 4px 8px;
border-radius: 4px;
font-weight: bold;
font-size: 12px;
margin-right: 10px;
}
.method-get { background: #61afef; color: #1e1e1e; }
.method-post { background: #98c379; color: #1e1e1e; }
.api-url {
color: #d4d4d4;
word-break: break-all;
margin-top: 10px;
}
.test-panel {
background: #252526;
border: 1px solid #3e3e42;
border-radius: 8px;
padding: 20px;
margin-top: 20px;
}
.test-form {
display: flex;
flex-direction: column;
gap: 15px;
}
input, textarea, button {
padding: 10px;
border: 1px solid #3e3e42;
border-radius: 4px;
background: #1e1e1e;
color: #d4d4d4;
font-family: inherit;
}
button {
background: #4ec9b0;
color: #1e1e1e;
border: none;
cursor: pointer;
font-weight: bold;
}
button:hover {
background: #5dd4c0;
}
.response {
margin-top: 20px;
padding: 15px;
background: #1e1e1e;
border-radius: 4px;
border: 1px solid #3e3e42;
white-space: pre-wrap;
font-family: 'Courier New', monospace;
max-height: 400px;
overflow-y: auto;
}
</style>
</head>
<body>
<div class="container">
<h1>🚀 APX Toolkit - Interactive API Explorer</h1>
<p style="margin-bottom: 30px; color: #858585;">
Discover and test APIs interactively. Select an API below to test it.
</p>
<div id="api-list" class="api-list">
<!-- APIs will be loaded here -->
<div class="api-card">
<span class="api-method method-get">GET</span>
<div class="api-url">Loading APIs...</div>
</div>
</div>
<div id="test-panel" class="test-panel" style="display: none;">
<h2>Test API</h2>
<div class="test-form">
<div>
<label>Method:</label>
<input type="text" id="test-method" readonly>
</div>
<div>
<label>URL:</label>
<input type="text" id="test-url" readonly>
</div>
<div>
<label>Headers (JSON):</label>
<textarea id="test-headers" rows="4">{"Content-Type": "application/json"}</textarea>
</div>
<div>
<label>Body (JSON, for POST):</label>
<textarea id="test-body" rows="6"></textarea>
</div>
<button onclick="testAPI()">🚀 Test API</button>
</div>
<div id="response" class="response" style="display: none;"></div>
</div>
</div>
<script>
// Sample APIs (in production, load from APX output)
const apis = [
{ method: 'GET', url: 'https://api.example.com/users', headers: {} },
{ method: 'POST', url: 'https://api.example.com/users', headers: { 'Content-Type': 'application/json' } },
];
let selectedAPI = null;
function loadAPIs() {
const container = document.getElementById('api-list');
container.innerHTML = '';
apis.forEach(api => {
const card = document.createElement('div');
card.className = 'api-card';
card.onclick = () => selectAPI(api);
card.innerHTML = `
<span class="api-method method-${api.method.toLowerCase()}">${api.method}</span>
<div class="api-url">${api.url}</div>
`;
container.appendChild(card);
});
}
function selectAPI(api) {
selectedAPI = api;
document.getElementById('test-panel').style.display = 'block';
document.getElementById('test-method').value = api.method;
document.getElementById('test-url').value = api.url;
document.getElementById('test-headers').value = JSON.stringify(api.headers || {}, null, 2);
document.getElementById('response').style.display = 'none';
}
async function testAPI() {
const method = document.getElementById('test-method').value;
const url = document.getElementById('test-url').value;
const headersText = document.getElementById('test-headers').value;
const bodyText = document.getElementById('test-body').value;
let headers = {};
try {
headers = JSON.parse(headersText);
} catch (e) {
alert('Invalid JSON in headers');
return;
}
const responseDiv = document.getElementById('response');
responseDiv.style.display = 'block';
responseDiv.textContent = 'Testing...';
try {
const options = {
method,
headers,
};
if (method === 'POST' && bodyText) {
options.body = bodyText;
}
const response = await fetch(url, options);
const data = await response.text();
responseDiv.textContent = `Status: ${response.status} ${response.statusText}\n\n${data}`;
} catch (error) {
responseDiv.textContent = `Error: ${error.message}`;
}
}
loadAPIs();
</script>
</body>
</html>