document.write(`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>API Key Check</title>
</head>
<body>
<div id="leftContainer">
<div id="leftPanelTitle">Enter API Key</div>
<input type="text" id="apiKeyInput" placeholder="Enter your API key...">
<button id="sendRequest" onclick="sendAPIRequest()">Check API Key</button>
<div id="loading" class="hidden">Loading...</div>
</div>
<div id="rightContainer">
<div id="consoleTitle">Console Output</div>
<div id="console"></div>
</div>
<script>
function sendAPIRequest() {
const apiKey = document.getElementById('apiKeyInput').value.trim();
if (!apiKey) {
document.getElementById('console').innerText = 'Error: API key is missing.';
return;
}
document.getElementById('loading').classList.remove('hidden');
// Replace with actual API request details
fetch('https://api.example.com/check', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer ' + apiKey
},
body: JSON.stringify({}) // Actual request body if needed for your API
})
.then(response => {
document.getElementById('loading').classList.add('hidden');
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.text(); // Or .json() if the response is JSON
})
.then(result => {
document.getElementById('console').innerText = 'Hello World';
})
.catch(error => {
document.getElementById('console').innerText = 'Error: ' + error.message;
});
}
</script>
</body>
</html>
`);