Spaces:
Runtime error
Runtime error
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>SafeAIScan | AI Cybersecurity Platform</title> | |
| <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> | |
| <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet"> | |
| <link rel="stylesheet" href="styles.css"> | |
| <style> | |
| .feature-icon { | |
| width: 44px; height: 44px; | |
| border-radius: 12px; | |
| display: flex; align-items: center; justify-content: center; | |
| font-size: 20px; | |
| margin-bottom: 14px; | |
| } | |
| .fi-blue { background: rgba(91,123,254,0.15); } | |
| .fi-cyan { background: rgba(56,189,248,0.12); } | |
| .fi-green { background: rgba(52,211,153,0.12); } | |
| .fi-orange { background: rgba(251,146,60,0.12); } | |
| .fi-pink { background: rgba(244,63,94,0.1); } | |
| .fi-purple { background: rgba(192,38,211,0.12); } | |
| .stat-num { | |
| font-family: 'Syne', sans-serif; | |
| font-size: 36px; | |
| font-weight: 800; | |
| letter-spacing: -0.04em; | |
| background: linear-gradient(135deg, #5b7bfe, #38bdf8); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| @media (max-width: 480px) { | |
| .stat-num { font-size: 26px; } | |
| } | |
| .badge-new { | |
| background: rgba(91,123,254,0.15); | |
| color: #93aaff; | |
| border: 1px solid rgba(91,123,254,0.25); | |
| border-radius: 99px; | |
| font-size: 10px; | |
| padding: 3px 9px; | |
| text-transform: uppercase; | |
| letter-spacing: 0.8px; | |
| font-weight: 600; | |
| } | |
| .tech-stack { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 8px; | |
| justify-content: center; | |
| margin-top: 32px; | |
| } | |
| .tech-pill { | |
| background: var(--bg-2); | |
| border: 1px solid var(--border); | |
| border-radius: 99px; | |
| padding: 5px 14px; | |
| font-size: 12px; | |
| color: var(--text-muted); | |
| transition: border-color 0.2s; | |
| } | |
| .tech-pill:hover { border-color: var(--accent); color: var(--text-primary); } | |
| .cta-glow { | |
| box-shadow: 0 0 40px rgba(91,123,254,0.35), 0 8px 32px rgba(0,0,0,0.4); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- NAVBAR --> | |
| <nav class="navbar navbar-dark"> | |
| <a class="navbar-brand" href="#"> | |
| <span class="brand-dot">Safe</span>AIScan | |
| <span style="color:var(--border-bright);margin-left:3px;font-size:16px;">⬡</span> | |
| </a> | |
| <div class="d-flex gap-2 align-items-center"> | |
| <span class="badge-new">v2.0</span> | |
| <button class="btn btn-outline-light btn-sm" onclick="document.getElementById('registerModal').style.display='flex'"> | |
| Sign Up Free | |
| </button> | |
| <a href="login.html" class="btn btn-primary btn-sm">Login</a> | |
| </div> | |
| </nav> | |
| <!-- HERO --> | |
| <section class="hero"> | |
| <div class="hero-bg"></div> | |
| <div style="position:relative;z-index:1;"> | |
| <div style="display:inline-flex;align-items:center;gap:8px;background:rgba(91,123,254,0.08);border:1px solid rgba(91,123,254,0.2);border-radius:99px;padding:5px 14px;font-size:12px;color:#93aaff;margin-bottom:20px;"> | |
| <span style="width:6px;height:6px;border-radius:50%;background:#34d399;animation:pulse 2s infinite;display:inline-block;"></span> | |
| AI Scanner Online · 99.9% Uptime | |
| </div> | |
| <h1 class="hero-title"> | |
| Find Security Flaws<br> | |
| <span class="glow">Before Attackers Do</span> | |
| </h1> | |
| <p class="hero-sub"> | |
| AI-powered vulnerability detection for code & repositories. | |
| Get instant analysis, CVE mapping, and smart fix suggestions. | |
| </p> | |
| <div class="d-flex gap-3 justify-content-center mt-5 flex-wrap"> | |
| <button class="btn btn-primary btn-lg cta-glow" onclick="document.getElementById('registerModal').style.display='flex'" style="padding:14px 32px;"> | |
| <i class="bi bi-rocket-takeoff me-2"></i>Start Free Scan | |
| </button> | |
| <a href="login.html" class="btn btn-outline-light btn-lg" style="padding:14px 28px;"> | |
| <i class="bi bi-arrow-right-circle me-2"></i>Dashboard | |
| </a> | |
| </div> | |
| <div class="tech-stack"> | |
| <span class="tech-pill"><i class="bi bi-shield-check me-1"></i>Bandit</span> | |
| <span class="tech-pill"><i class="bi bi-code-slash me-1"></i>Semgrep</span> | |
| <span class="tech-pill"><i class="bi bi-bug me-1"></i>Trivy</span> | |
| <span class="tech-pill"><i class="bi bi-cpu me-1"></i>GPT-4 Analysis</span> | |
| <span class="tech-pill"><i class="bi bi-database me-1"></i>NVD CVE DB</span> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- STATS --> | |
| <section class="container fade-in" style="padding:40px 20px;"> | |
| <div class="row g-4 text-center"> | |
| <div class="col-6 col-md-3"> | |
| <div class="stat-num">2M+</div> | |
| <div style="color:var(--text-muted);font-size:13px;">Scans Completed</div> | |
| </div> | |
| <div class="col-6 col-md-3"> | |
| <div class="stat-num">340K</div> | |
| <div style="color:var(--text-muted);font-size:13px;">Vulnerabilities Found</div> | |
| </div> | |
| <div class="col-6 col-md-3"> | |
| <div class="stat-num">12K</div> | |
| <div style="color:var(--text-muted);font-size:13px;">Developers Protected</div> | |
| </div> | |
| <div class="col-6 col-md-3"> | |
| <div class="stat-num">99.9%</div> | |
| <div style="color:var(--text-muted);font-size:13px;">Uptime SLA</div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- FEATURES --> | |
| <section class="section container fade-in"> | |
| <div class="text-center mb-5"> | |
| <div class="section-title">Everything You Need to Ship Secure Code</div> | |
| <div class="section-sub">One platform for vulnerability detection, CVE mapping, and AI-powered remediation.</div> | |
| </div> | |
| <div class="row g-4"> | |
| <div class="col-md-4"> | |
| <div class="card p-4 h-100"> | |
| <div class="feature-icon fi-blue"><i class="bi bi-cpu" style="color:#5b7bfe;"></i></div> | |
| <h5 style="font-family:'Syne',sans-serif;font-weight:700;margin-bottom:8px;">AI Detection Engine</h5> | |
| <p style="color:var(--text-muted);font-size:13px;margin:0;">GPT-4 powered static analysis detects OWASP Top 10, injection flaws, and logic vulnerabilities instantly.</p> | |
| </div> | |
| </div> | |
| <div class="col-md-4"> | |
| <div class="card p-4 h-100"> | |
| <div class="feature-icon fi-cyan"><i class="bi bi-github" style="color:#38bdf8;"></i></div> | |
| <h5 style="font-family:'Syne',sans-serif;font-weight:700;margin-bottom:8px;">GitHub Repo Scanning</h5> | |
| <p style="color:var(--text-muted);font-size:13px;margin:0;">Point to any public repo. Full recursive scan with Semgrep + Bandit + Trivy in seconds.</p> | |
| </div> | |
| </div> | |
| <div class="col-md-4"> | |
| <div class="card p-4 h-100"> | |
| <div class="feature-icon fi-green"><i class="bi bi-bug" style="color:#34d399;"></i></div> | |
| <h5 style="font-family:'Syne',sans-serif;font-weight:700;margin-bottom:8px;">CVE Intelligence</h5> | |
| <p style="color:var(--text-muted);font-size:13px;margin:0;">Every finding enriched with NVD CVE data, CVSS scores, and real exploit references.</p> | |
| </div> | |
| </div> | |
| <div class="col-md-4"> | |
| <div class="card p-4 h-100"> | |
| <div class="feature-icon fi-orange"><i class="bi bi-wrench-adjustable" style="color:#fb923c;"></i></div> | |
| <h5 style="font-family:'Syne',sans-serif;font-weight:700;margin-bottom:8px;">Smart Auto-Fixes</h5> | |
| <p style="color:var(--text-muted);font-size:13px;margin:0;">AI generates before/after code diffs with remediation explanations you can apply immediately.</p> | |
| </div> | |
| </div> | |
| <div class="col-md-4"> | |
| <div class="card p-4 h-100"> | |
| <div class="feature-icon fi-pink"><i class="bi bi-person-lock" style="color:#f43f5e;"></i></div> | |
| <h5 style="font-family:'Syne',sans-serif;font-weight:700;margin-bottom:8px;">Enterprise Auth</h5> | |
| <p style="color:var(--text-muted);font-size:13px;margin:0;">Multi-tenant orgs, JWT + API key auth, role-based access, and full audit logs.</p> | |
| </div> | |
| </div> | |
| <div class="col-md-4"> | |
| <div class="card p-4 h-100"> | |
| <div class="feature-icon fi-purple"><i class="bi bi-file-earmark-pdf" style="color:#c026d3;"></i></div> | |
| <h5 style="font-family:'Syne',sans-serif;font-weight:700;margin-bottom:8px;">PDF Reports</h5> | |
| <p style="color:var(--text-muted);font-size:13px;margin:0;">Export professional security reports for compliance audits, client deliverables, or team reviews.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- LIVE THREAT CHART --> | |
| <section class="section container text-center fade-in"> | |
| <div class="section-title">Real-Time Threat Intelligence</div> | |
| <div class="section-sub">Live scan activity from the SafeAIScan network</div> | |
| <div class="chart-wrap"> | |
| <canvas id="chart" height="90"></canvas> | |
| </div> | |
| </section> | |
| <!-- PRICING --> | |
| <section class="section container fade-in"> | |
| <div class="text-center mb-5"> | |
| <div class="section-title">Simple, Transparent Pricing</div> | |
| <div class="section-sub">No credit card required. Start free today.</div> | |
| </div> | |
| <div class="row g-4 justify-content-center"> | |
| <div class="col-md-4"> | |
| <div class="pricing-card h-100"> | |
| <div style="font-size:12px;text-transform:uppercase;letter-spacing:1px;color:var(--text-muted);margin-bottom:10px;">Starter</div> | |
| <div class="price-amount">$0</div> | |
| <div class="price-period">forever free</div> | |
| <hr style="border-color:var(--border);margin:20px 0;"> | |
| <div class="price-feature"><i class="bi bi-check-lg"></i> 5 scans / day</div> | |
| <div class="price-feature"><i class="bi bi-check-lg"></i> AI code analysis</div> | |
| <div class="price-feature"><i class="bi bi-check-lg"></i> CVE lookup</div> | |
| <div class="price-feature"><i class="bi bi-check-lg"></i> API access</div> | |
| <button class="btn btn-outline-light w-100 mt-4" onclick="document.getElementById('registerModal').style.display='flex'"> | |
| Get Started | |
| </button> | |
| </div> | |
| </div> | |
| <div class="col-md-4"> | |
| <div class="pricing-card featured h-100"> | |
| <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;"> | |
| <div style="font-size:12px;text-transform:uppercase;letter-spacing:1px;color:var(--accent);">Pro</div> | |
| <span class="badge-pill sev-medium">Popular</span> | |
| </div> | |
| <div class="price-amount">$1<span style="font-size:24px;">.99</span></div> | |
| <div class="price-period">per month · 30-day free trial</div> | |
| <hr style="border-color:var(--border);margin:20px 0;"> | |
| <div class="price-feature"><i class="bi bi-check-lg"></i> Unlimited scans</div> | |
| <div class="price-feature"><i class="bi bi-check-lg"></i> GitHub repo scanning</div> | |
| <div class="price-feature"><i class="bi bi-check-lg"></i> PDF + JSON export</div> | |
| <div class="price-feature"><i class="bi bi-check-lg"></i> Full AI analysis</div> | |
| <div class="price-feature"><i class="bi bi-check-lg"></i> CVE enrichment</div> | |
| <button class="btn btn-primary w-100 mt-4 cta-glow" onclick="window.location.href='login.html'" style="background:linear-gradient(135deg,#00ffa3,#5b7bfe);color:#0f172a;border:none;font-weight:700;">🎁 Start Free 30-Day Trial</button> | |
| </div> | |
| </div> | |
| <div class="col-md-4"> | |
| <div class="pricing-card h-100"> | |
| <div style="font-size:12px;text-transform:uppercase;letter-spacing:1px;color:var(--text-muted);margin-bottom:10px;">Enterprise</div> | |
| <div class="price-amount">$49</div> | |
| <div class="price-period">per month</div> | |
| <hr style="border-color:var(--border);margin:20px 0;"> | |
| <div class="price-feature"><i class="bi bi-check-lg"></i> Unlimited scans</div> | |
| <div class="price-feature"><i class="bi bi-check-lg"></i> Team management</div> | |
| <div class="price-feature"><i class="bi bi-check-lg"></i> SSO / SAML</div> | |
| <div class="price-feature"><i class="bi bi-check-lg"></i> SLA + dedicated support</div> | |
| <button class="btn btn-outline-light w-100 mt-4">Contact Sales</button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- FOOTER --> | |
| <footer> | |
| <div style="margin-bottom:4px;"> | |
| <span style="font-family:'Syne',sans-serif;font-weight:700;color:var(--text-muted);"> | |
| <span style="color:var(--accent);">Safe</span>AIScan | |
| </span> | |
| </div> | |
| © 2025 SafeAIScan · Built for developers who ship secure code | |
| <div style="margin-top:8px;display:flex;justify-content:center;gap:20px;flex-wrap:wrap;"> | |
| <a href="privacy.html" style="color:var(--text-faint);font-size:11px;text-decoration:none;">Privacy Policy</a> | |
| <a href="terms.html" style="color:var(--text-faint);font-size:11px;text-decoration:none;">Terms of Service</a> | |
| <a href="enterprise.html" style="color:var(--text-faint);font-size:11px;text-decoration:none;">Enterprise</a> | |
| <a href="pricing.html" style="color:var(--text-faint);font-size:11px;text-decoration:none;">Pricing</a> | |
| </div> | |
| </footer> | |
| <!-- REGISTER MODAL --> | |
| <div id="registerModal" style="display:none;position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,0.7);backdrop-filter:blur(6px);align-items:center;justify-content:center;overflow-y:auto;padding:20px 0;"> | |
| <div class="login-card" style="max-width:420px;width:100%;margin:20px;animation:popIn 0.25s ease both;max-height:90vh;overflow-y:auto;"> | |
| <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;"> | |
| <div class="login-brand" style="font-size:18px;"><span style="color:var(--accent);">Safe</span>AIScan</div> | |
| <button onclick="document.getElementById('registerModal').style.display='none'" style="background:none;border:none;color:var(--text-muted);font-size:20px;cursor:pointer;"> | |
| <i class="bi bi-x"></i> | |
| </button> | |
| </div> | |
| <div style="margin-bottom:16px;"> | |
| <div class="input-label" style="font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.7px;margin-bottom:5px;">Email</div> | |
| <input id="mEmail" type="email" class="form-control" placeholder="you@company.com"> | |
| </div> | |
| <div style="margin-bottom:16px;"> | |
| <div class="input-label" style="font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.7px;margin-bottom:5px;">Organization</div> | |
| <input id="mOrg" type="text" class="form-control" placeholder="Your company"> | |
| </div> | |
| <div style="margin-bottom:20px;"> | |
| <div class="input-label" style="font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.7px;margin-bottom:5px;">Password</div> | |
| <input id="mPassword" type="password" class="form-control" placeholder="Min 8 characters"> | |
| </div> | |
| <button id="modalRegBtn" onclick="modalRegister()" class="btn btn-primary w-100" style="height:44px;font-size:14px;"> | |
| Create Free Account | |
| </button> | |
| <div id="modalAlert" class="alert mt-3 d-none"></div> | |
| <div style="text-align:center;margin-top:14px;font-size:12px;color:var(--text-faint);"> | |
| Already have an account? | |
| <a href="login.html" style="color:var(--accent);text-decoration:none;">Sign in</a> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script> | |
| <script> | |
| // Scroll reveal | |
| const observer = new IntersectionObserver(entries => { | |
| entries.forEach(e => { if (e.isIntersecting) e.target.classList.add("show"); }); | |
| }, { threshold: 0.1 }); | |
| document.querySelectorAll(".fade-in").forEach(el => observer.observe(el)); | |
| // Chart | |
| const ctx = document.getElementById("chart").getContext("2d"); | |
| const grad = ctx.createLinearGradient(0, 0, 0, 220); | |
| grad.addColorStop(0, "rgba(91,123,254,0.4)"); | |
| grad.addColorStop(1, "rgba(91,123,254,0)"); | |
| new Chart(ctx, { | |
| type: "line", | |
| data: { | |
| labels: ["Mon","Tue","Wed","Thu","Fri","Sat","Sun"], | |
| datasets: [{ | |
| label: "Threats Detected", | |
| data: [42, 87, 53, 120, 98, 145, 203], | |
| borderColor: "#5b7bfe", | |
| borderWidth: 2.5, | |
| backgroundColor: grad, | |
| fill: true, | |
| tension: 0.45, | |
| pointBackgroundColor: "#5b7bfe", | |
| pointRadius: 5, | |
| pointHoverRadius: 8 | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| plugins: { | |
| legend: { display: false }, | |
| tooltip: { backgroundColor: "#0f1a2e", titleColor: "#e8edf8", bodyColor: "#8296b3", borderColor: "#1e3a5f", borderWidth: 1 } | |
| }, | |
| scales: { | |
| x: { grid: { color: "rgba(255,255,255,0.04)" }, ticks: { color: "#8296b3", font: { size: 11 } } }, | |
| y: { grid: { color: "rgba(255,255,255,0.04)" }, ticks: { color: "#8296b3", font: { size: 11 } }, beginAtZero: true } | |
| } | |
| } | |
| }); | |
| // Modal register | |
| async function modalRegister() { | |
| const email = document.getElementById("mEmail")?.value?.trim(); | |
| const org_name = document.getElementById("mOrg")?.value?.trim(); | |
| const password = document.getElementById("mPassword")?.value; | |
| const alertEl = document.getElementById("modalAlert"); | |
| function showAlert(msg, type="danger") { | |
| alertEl.className = `alert alert-${type} mt-3`; | |
| alertEl.innerHTML = msg; | |
| alertEl.classList.remove("d-none"); | |
| } | |
| if (!email || !password || !org_name) { showAlert("Please fill in all fields"); return; } | |
| if (!email.includes("@")) { showAlert("Enter a valid email"); return; } | |
| if (password.length < 8) { showAlert("Password must be 8+ characters"); return; } | |
| const btn = document.getElementById("modalRegBtn"); | |
| btn.disabled = true; | |
| btn.innerHTML = `<span class="spinner-border spinner-border-sm me-2"></span>Creating account…`; | |
| try { | |
| const res = await fetch("https://rathious-safeaiscan.hf.space/auth/register", { | |
| method: "POST", | |
| headers: { "Content-Type": "application/json" }, | |
| body: JSON.stringify({ email, password, org_name }) | |
| }); | |
| const data = await res.json(); | |
| if (!res.ok) { showAlert(data.detail || "Registration failed"); return; } | |
| if (data.access_token) { | |
| localStorage.setItem("access_token", data.access_token); | |
| if (data.api_key) localStorage.setItem("api_key", data.api_key); | |
| } | |
| showAlert("Account created! Redirecting to dashboard…", "success"); | |
| setTimeout(() => window.location.href = "dashboard.html", 1000); | |
| } catch (err) { | |
| showAlert("Network error. Please try again."); | |
| } finally { | |
| btn.disabled = false; | |
| btn.innerHTML = "Create Free Account"; | |
| } | |
| } | |
| // Close modal on backdrop click | |
| document.getElementById("registerModal").addEventListener("click", e => { | |
| if (e.target === e.currentTarget) e.currentTarget.style.display = "none"; | |
| }); | |
| </script> | |
| </body> | |
| </html> | |