Website Analysis Tool
Published on October 16, 2025 at 12:36 PM
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Website Analysis Tool</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
body{font-family:Inter,Arial, sans-serif;background:#f6f8fb;color:#111;margin:0;padding:20px}
.card{max-width:980px;margin:0 auto;background:#fff;padding:20px;border-radius:12px;box-shadow:0 6px 20px rgba(2,6,23,0.06)}
input[type="text"]{width:100%;padding:12px;border:1px solid #e6edf3;border-radius:8px}
button{padding:10px 14px;background:#1565d8;color:#fff;border:none;border-radius:8px;cursor:pointer}
pre{background:#f4f6fb;padding:12px;border-radius:8px;overflow:auto}
.grid{display:grid;grid-template-columns:1fr 320px;gap:18px}
@media(max-width:900px){.grid{grid-template-columns:1fr}}
.meta{font-size:13px;color:#666}
.row{margin-bottom:12px}
</style>
</head>
<body>
<div class="card">
<h2>Website Analysis Tool</h2>
<p class="meta">Enter a URL and get a quick technical + SEO analysis.</p>
<div class="row">
<input id="target" placeholder="https://example.com or example.com">
</div>
<div class="row">
<button id="analyzeBtn">Analyze</button>
</div>
<div class="grid" style="margin-top:18px">
<div>
<h3>Results</h3>
<pre id="output">No results yet.</pre>
</div>
<div>
<h3>Quick Summary</h3>
<div id="summary">—</div>
</div>
</div>
</div>
<script>
const analyzeBtn = document.getElementById('analyzeBtn');
const targetEl = document.getElementById('target');
const outputEl = document.getElementById('output');
const summaryEl = document.getElementById('summary');
analyzeBtn.addEventListener('click', async () => {
const url = targetEl.value.trim();
if (!url) return alert('Enter a URL');
outputEl.textContent = 'Analyzing...';
summaryEl.innerHTML = '...';
try {
const resp = await fetch('/api/analyze', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ url })
});
const data = await resp.json();
outputEl.textContent = JSON.stringify(data, null, 2);
// nice summary
if (data.error) {
summaryEl.innerHTML = `<div style="color:#c00">${data.error}</div>`;
} else {
const status = data.statusCode || '-';
const t = data.responseTimeMs ? data.responseTimeMs + ' ms' : '-';
const title = data.analysis && data.analysis.title ? data.analysis.title : '-';
const desc = data.analysis && data.analysis.metaDescription ? data.analysis.metaDescription : '-';
const h1count = data.analysis ? data.analysis.h1.length : 0;
const imagesMissingAlt = data.accessibility ? data.accessibility.imagesMissingAlt : 0;
const robots = data.robots && data.robots.found ? 'Yes' : 'No';
const sitemap = data.sitemap && data.sitemap.found ? 'Yes' : 'No';
summaryEl.innerHTML = `
<div><strong>Status:</strong> ${status}</div>
<div><strong>Response Time:</strong> ${t}</div>
<div><strong>Title:</strong> ${title}</div>
<div><strong>Meta desc:</strong> ${desc}</div>
<div><strong>H1 count:</strong> ${h1count}</div>
<div><strong>Images missing alt:</strong> ${imagesMissingAlt}</div>
<div><strong>robots.txt:</strong> ${robots}</div>
<div><strong>sitemap.xml:</strong> ${sitemap}</div>
`;
}
} catch (err) {
outputEl.textContent = 'Error: ' + (err.message || err);
summaryEl.innerHTML = '<div style="color:#c00">Request failed</div>';
}
});
</script>
</body>
</html>
Tags:
#f6f8fb
#111
#fff
#e6edf3
#1565d8
#fff
#f4f6fb
#666
#c00
#c00
Written by Paul Singh
Please login to comment on this post.