simple_test.html•3.74 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Frontend Test</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
background: #f0f0f0;
}
.container {
max-width: 600px;
margin: 0 auto;
background: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
button {
background: #28a745;
color: white;
border: none;
padding: 15px 30px;
margin: 10px;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}
button:hover { background: #218838; }
.result {
margin: 15px 0;
padding: 15px;
border-radius: 5px;
font-family: monospace;
}
.success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.error { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
.info { background: #d1ecf1; color: #0c5460; border: 1px solid #bee5eb; }
pre { background: #f8f9fa; padding: 10px; border-radius: 3px; overflow-x: auto; }
h1 { color: #333; text-align: center; }
</style>
</head>
<body>
<div class="container">
<h1>🔧 Simple Frontend Test</h1>
<p>This is a minimal test to check frontend-backend connection.</p>
<button onclick="simpleTest()">Test Connection</button>
<button onclick="clearResults()">Clear</button>
<div id="results"></div>
</div>
<script>
function addResult(message, type = 'info') {
const results = document.getElementById('results');
const div = document.createElement('div');
div.className = `result ${type}`;
div.innerHTML = `<strong>${new Date().toLocaleTimeString()}:</strong> ${message}`;
results.appendChild(div);
}
function clearResults() {
document.getElementById('results').innerHTML = '';
}
async function simpleTest() {
addResult('🔍 Starting simple connection test...', 'info');
try {
// Simple fetch request
const response = await fetch('http://localhost:8000/api/health');
addResult(`📡 Response status: ${response.status}`, 'info');
if (response.ok) {
const data = await response.json();
addResult('✅ SUCCESS! Backend connected!', 'success');
addResult(`🗄️ MongoDB: ${data.mongodb}`, 'success');
addResult(`⏰ Timestamp: ${data.timestamp}`, 'info');
} else {
addResult(`❌ HTTP Error: ${response.status}`, 'error');
}
} catch (error) {
addResult(`❌ Connection Error: ${error.message}`, 'error');
addResult('🔧 Possible causes:', 'info');
addResult('- Server not running on port 8000', 'info');
addResult('- CORS blocking the request', 'info');
addResult('- Network connectivity issue', 'info');
}
}
// Auto-test on page load
window.addEventListener('load', function() {
addResult('🚀 Page loaded, running auto-test...', 'info');
setTimeout(simpleTest, 1000);
});
</script>
</body>
</html>