gitex2026/AttackSurface/src/static/index.html
2026-04-24 20:11:23 +00:00

147 lines
5.8 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>AASD — API Attack Surface Discovery</title>
<script src="https://cdn.tailwindcss.com/"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
aasd: {
dark: '#0f172a',
card: '#1e293b',
border: '#334155',
blue: '#3b82f6',
purple: '#8b5cf6',
text: '#f1f5f9',
muted: '#94a3b8',
dim: '#64748b',
}
}
}
}
}
</script>
<style>
* { -webkit-tap-highlight-color: transparent; }
body { overscroll-behavior: none; }
.btn-primary { background: linear-gradient(90deg, #3b82f6, #8b5cf6); }
.btn-primary:active { transform: scale(0.97); }
input:-webkit-autofill { -webkit-box-shadow: 0 0 0 30px #0f172a inset !important; -webkit-text-fill-color: #f1f5f9 !important; }
</style>
</head>
<body class="bg-slate-900 text-slate-100 min-h-screen flex flex-col items-center justify-center px-4 py-6">
<div class="w-full max-w-sm mx-auto text-center">
<!-- Logo -->
<div class="mb-6">
<h1 class="text-4xl font-extrabold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent tracking-tight">
AASD
</h1>
<p class="text-sm text-slate-400 mt-1">API Attack Surface Discovery</p>
</div>
<!-- Main Card -->
<div class="bg-slate-800 rounded-2xl p-6 shadow-2xl border border-slate-700">
<h2 class="text-xl font-bold text-slate-100 mb-2">Discover Your Attack Surface</h2>
<p class="text-sm text-slate-400 mb-6 leading-relaxed">
Enter your corporate email. We'll discover subdomains, test your WAF, and generate a resilience report.
</p>
<div id="error" class="hidden mb-4 p-3 bg-red-900/50 border border-red-700 rounded-xl text-sm text-red-300"></div>
<form id="emailForm" action="/start" method="POST">
<div class="mb-4 text-left">
<label for="email" class="block text-sm font-semibold text-slate-300 mb-1.5">Corporate Email</label>
<input type="email" id="email" name="email" placeholder="name@company.com" required autofocus
class="w-full px-4 py-3.5 bg-slate-900 border-2 border-slate-600 rounded-xl text-slate-100 text-base focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500/50 placeholder-slate-500 transition-all">
</div>
<button type="submit" id="submitBtn"
class="btn-primary w-full text-white font-bold py-4 px-6 rounded-xl text-lg shadow-lg hover:shadow-blue-500/25 active:scale-[0.97] transition-all">
Start Attack Surface Discovery
</button>
</form>
</div>
<!-- Scan Steps Preview -->
<div class="mt-6 bg-slate-800/50 rounded-xl p-4 border border-slate-700/50">
<p class="text-xs font-semibold text-slate-500 uppercase tracking-wider mb-3">What happens next</p>
<div class="space-y-2 text-left">
<div class="flex items-center gap-2 text-sm">
<span class="w-5 h-5 rounded-full bg-blue-500/20 text-blue-400 text-xs flex items-center justify-center shrink-0">1</span>
<span class="text-slate-400">Domain discovery scans your org</span>
</div>
<div class="flex items-center gap-2 text-sm">
<span class="w-5 h-5 rounded-full bg-purple-500/20 text-purple-400 text-xs flex items-center justify-center shrink-0">2</span>
<span class="text-slate-400">GoTestWAF probes your WAF defense</span>
</div>
<div class="flex items-center gap-2 text-sm">
<span class="w-5 h-5 rounded-full bg-green-500/20 text-green-400 text-xs flex items-center justify-center shrink-0">3</span>
<span class="text-slate-400">AI generates your resilience report</span>
</div>
</div>
</div>
<!-- CTA -->
<div class="mt-6 p-3 bg-slate-800/30 rounded-xl border border-blue-500/20">
<p class="text-xs text-slate-500">
GITEX 2026 Booth Demo — <span class="text-blue-400">Bring your code to BU 4</span>
</p>
</div>
</div>
<script>
const form = document.getElementById('emailForm');
const errorDiv = document.getElementById('error');
const submitBtn = document.getElementById('submitBtn');
form.addEventListener('submit', async (e) => {
e.preventDefault();
const email = document.getElementById('email').value.trim();
if (!email.includes('@') || !email.includes('.')) {
showError('Please enter a valid corporate email address.');
return;
}
submitBtn.disabled = true;
submitBtn.textContent = 'Starting Discovery...';
submitBtn.classList.add('opacity-75');
const formData = new FormData(form);
try {
const response = await fetch('/start', { method: 'POST', body: formData });
if (response.redirected) {
window.location.href = response.url;
} else if (!response.ok) {
const data = await response.json();
showError(data.error || 'Something went wrong.');
resetButton();
} else {
// Shouldn't get here, but handle gracefully
window.location.href = '/analysing?domain=' + encodeURIComponent(email.split('@')[1]);
}
} catch (err) {
showError('Network error. Please check your connection.');
resetButton();
}
});
function showError(msg) {
errorDiv.textContent = msg;
errorDiv.classList.remove('hidden');
setTimeout(() => errorDiv.classList.add('hidden'), 5000);
}
function resetButton() {
submitBtn.disabled = false;
submitBtn.textContent = 'Start Attack Surface Discovery';
submitBtn.classList.remove('opacity-75');
}
</script>
</body>
</html>