Add interactive /playground page with 25 endpoint cards

Browser-based API playground — try every endpoint with zero setup.
4 categories: Domain Intelligence (15), CVE (4), Threat (4), Code Security (2).
Pre-filled examples, live Run button with fetch(), JSON syntax highlighting.
Nav updated across all pages, CTA links to /playground.
CSS v=9, mcp-setup 25 tools count fix.

Author: UPinar

app/main.py

@@ -373,7 +373,7 @@ def quickstart():
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Quick Start | ContrastAPI</title>
   <link rel="icon" type="image/svg+xml" href="/static/favicon.svg">
-  <link rel="stylesheet" href="/static/style.css?v=8">
+  <link rel="stylesheet" href="/static/style.css?v=9">
   <style>
     .page { max-inline-size: 52rem; margin-inline: auto; padding: 3rem 2rem; position: relative; z-index: 1; }
     .page h1 { font-size: 2.25rem; font-weight: 800; letter-spacing: -0.04em; margin-block-end: 0.5rem; }
@@ -403,7 +403,7 @@ def quickstart():
     <div class="nav-links">
       <a href="/quickstart">API Start</a>
       <a href="/mcp-setup">MCP Setup</a>
-      <a href="https://github.com/UPinar/contrastapi#endpoints">Docs</a>
+      <a href="/playground">Playground</a>
       <a href="https://contrastcyber.com/pricing">Pricing</a>
     </div>
   </nav>
@@ -510,7 +510,7 @@ def mcp_setup():
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>MCP Setup | ContrastAPI</title>
   <link rel="icon" type="image/svg+xml" href="/static/favicon.svg">
-  <link rel="stylesheet" href="/static/style.css?v=8">
+  <link rel="stylesheet" href="/static/style.css?v=9">
   <style>
     .page { max-inline-size: 52rem; margin-inline: auto; padding: 3rem 2rem; position: relative; z-index: 1; }
     .page h1 { font-size: 2.25rem; font-weight: 800; letter-spacing: -0.04em; margin-block-end: 0.5rem; }
@@ -546,7 +546,7 @@ def mcp_setup():
     <div class="nav-links">
       <a href="/quickstart">API Start</a>
       <a href="/mcp-setup">MCP Setup</a>
-      <a href="https://github.com/UPinar/contrastapi#endpoints">Docs</a>
+      <a href="/playground">Playground</a>
       <a href="https://contrastcyber.com/pricing">Pricing</a>
     </div>
   </nav>
@@ -628,7 +628,7 @@ def mcp_setup():
       <p><em>"Is user@example.com a disposable email?"</em></p>
     </div>
 
-    <h2>24 Tools</h2>
+    <h2>25 Tools</h2>
     <div class="tools-grid">
       <div class="tool"><span class="name">domain_report</span> <span class="desc">Full domain security audit</span></div>
       <div class="tool"><span class="name">dns_lookup</span> <span class="desc">DNS records</span></div>
@@ -651,6 +651,7 @@ def mcp_setup():
       <div class="tool"><span class="name">password_check</span> <span class="desc">Breach database check</span></div>
       <div class="tool"><span class="name">phishing_check</span> <span class="desc">URL phishing detection</span></div>
       <div class="tool"><span class="name">phone_lookup</span> <span class="desc">Phone number OSINT</span></div>
+      <div class="tool"><span class="name">username_lookup</span> <span class="desc">Username OSINT across 16 platforms</span></div>
       <div class="tool"><span class="name">check_secrets</span> <span class="desc">Hardcoded secret scan</span></div>
       <div class="tool"><span class="name">check_injection</span> <span class="desc">SQL/command injection</span></div>
       <div class="tool"><span class="name">check_headers</span> <span class="desc">Header validation</span></div>
@@ -683,6 +684,11 @@ def mcp_setup():
     )
 
 
+@app.get("/playground", response_class=HTMLResponse, include_in_schema=False)
+def playground(request: Request):
+    return templates.TemplateResponse(request, "playground.html")
+
+
 @app.get("/docs", include_in_schema=False)
 def custom_docs():
     return JSONResponse(

app/static/style.css

@@ -519,3 +519,41 @@ footer p { color: var(--text-dim); }
   .auth-tiers { grid-template-columns: 1fr; }
   footer { padding: 1.5rem 1.25rem; }
 }
+
+/* Playground */
+.page { max-inline-size: 64rem; margin-inline: auto; padding: 3rem 2rem; position: relative; z-index: 1; }
+.page h1 { font-size: 2.25rem; font-weight: 800; letter-spacing: -0.04em; margin-block-end: 0.5rem; }
+.page h1 span { background: linear-gradient(135deg, var(--primary), var(--purple)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
+.page .subtitle { color: var(--text-dim); margin: 0 0 3rem; max-width: none; }
+
+.pg-card { background: var(--bg-card); border: 1px solid var(--border-dim); border-radius: 0.5rem; padding: 1rem 1.25rem; margin-block-end: 0.75rem; }
+.pg-card-header { display: flex; align-items: center; gap: 0.75rem; margin-block-end: 0.75rem; }
+.pg-card-header .name { font-size: 0.85rem; font-weight: 600; color: var(--text); }
+.pg-card-header .desc { font-size: 0.7rem; color: var(--text-dim); margin-inline-start: auto; }
+.pg-inputs { display: flex; align-items: center; gap: 0.5rem; margin-block-end: 0.75rem; flex-wrap: wrap; }
+.pg-inputs label { font-size: 0.7rem; color: var(--text-muted); min-width: 3rem; }
+.pg-inputs input { flex: 1; min-width: 10rem; background: var(--bg); border: 1px solid var(--border); border-radius: 0.375rem; padding: 0.5rem 0.75rem; color: var(--text); font-family: var(--font-mono); font-size: 0.75rem; outline: none; }
+.pg-inputs input:focus { border-color: var(--primary); }
+.pg-inputs select { background: var(--bg); border: 1px solid var(--border); border-radius: 0.375rem; padding: 0.5rem 0.75rem; color: var(--text); font-family: var(--font-mono); font-size: 0.75rem; outline: none; }
+.pg-inputs select:focus { border-color: var(--primary); }
+.btn-run { background: var(--primary); color: #fff; border: none; border-radius: 0.375rem; padding: 0.5rem 1rem; font-family: var(--font-mono); font-size: 0.75rem; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background 0.2s; }
+.btn-run:hover { background: var(--primary-hover); }
+.btn-run:disabled { opacity: 0.5; cursor: not-allowed; }
+.pg-response { background: rgba(9,9,11,0.8); border: 1px solid var(--border-dim); border-radius: 0.375rem; padding: 1rem; max-height: 20rem; overflow: auto; font-size: 0.7rem; line-height: 1.6; }
+.pg-response .key { color: #60a5fa; }
+.pg-response .str { color: #34d399; }
+.pg-response .num { color: #f59e0b; }
+.pg-response .bool { color: #c084fc; }
+.pg-error { color: var(--red); font-size: 0.75rem; padding: 0.5rem; }
+.pg-textarea { width: 100%; background: var(--bg); border: 1px solid var(--border); border-radius: 0.375rem; padding: 0.75rem; color: var(--text); font-family: var(--font-mono); font-size: 0.75rem; resize: vertical; outline: none; }
+.pg-textarea:focus { border-color: var(--primary); }
+.pg-inputs-col { flex-direction: column; align-items: stretch; }
+.pg-inputs-row { display: flex; gap: 0.5rem; align-items: center; margin-block-end: 0.5rem; }
+.pg-inputs-row .btn-run { margin-inline-start: auto; }
+
+@media (max-width: 639px) {
+  .page h1 { font-size: 1.75rem; }
+  .pg-card-header .desc { display: none; }
+  .pg-inputs { flex-direction: column; align-items: stretch; }
+  .pg-inputs input { min-width: 0; }
+}

app/templates/index.html

@@ -20,7 +20,7 @@
   <link rel="alternate" hreflang="en" href="https://api.contrastcyber.com/">
   <link rel="alternate" hreflang="zh" href="https://api.contrastcyber.com/cn/">
   <link rel="icon" type="image/svg+xml" href="/static/favicon.svg">
-  <link rel="stylesheet" href="/static/style.css?v=8">
+  <link rel="stylesheet" href="/static/style.css?v=9">
   <link rel="alternate" type="text/plain" href="/llms.txt" title="LLM Discovery">
   <link rel="alternate" type="application/json" href="/openapi.json" title="OpenAPI Spec">
   <script type="application/ld+json">
@@ -54,7 +54,7 @@
     <div class="nav-links">
       <a href="/quickstart">API Start</a>
       <a href="/mcp-setup">MCP Setup</a>
-      <a href="https://github.com/UPinar/contrastapi#endpoints">Docs</a>
+      <a href="/playground">Playground</a>
       <a href="https://contrastcyber.com/pricing">Pricing</a>
     </div>
   </nav>
@@ -65,7 +65,7 @@ <h1>Security data for<br><span class="gradient">AI models & developers</span></h
     <p class="subtitle">35+ endpoints: CVE intelligence, domain reconnaissance, SSL analysis, IP reputation, IOC/malware lookup, exploit search, email security, phone validation, and code security. Structured JSON with LLM-optimized summaries. Free tier included.</p>
     <!-- counter removed -->
     <div style="text-align:center;margin-top:0.5rem">
-      <a href="https://contrastcyber.com" class="btn-cta">Try it out →</a>
+      <a href="/playground" class="btn-cta">Try it out →</a>
     </div>
   </section>
 

app/templates/index_cn.html

@@ -21,7 +21,7 @@
   <link rel="alternate" hreflang="en" href="https://api.contrastcyber.com/">
   <link rel="alternate" hreflang="zh" href="https://api.contrastcyber.com/cn/">
   <link rel="icon" type="image/svg+xml" href="/static/favicon.svg">
-  <link rel="stylesheet" href="/static/style.css?v=8">
+  <link rel="stylesheet" href="/static/style.css?v=9">
   <link rel="alternate" type="text/plain" href="/llms.txt" title="LLM Discovery">
   <link rel="alternate" type="application/json" href="/openapi.json" title="OpenAPI Spec">
   <script type="application/ld+json">
@@ -55,7 +55,7 @@
     <div class="nav-links">
       <a href="/quickstart">快速入门</a>
       <a href="/mcp-setup">MCP 配置</a>
-      <a href="https://github.com/UPinar/contrastapi">文档</a>
+      <a href="/playground">Playground</a>
       <a href="https://contrastcyber.com/pricing">价格</a>
       <a href="/" style="font-size:0.8rem;opacity:0.7">English</a>
     </div>
@@ -66,7 +66,7 @@
     <h1>为 AI 智能体和开发者<br><span class="gradient">提供安全数据</span></h1>
     <p class="subtitle">35+ 个接口：CVE 情报、域名侦察、SSL 分析、IP 信誉、IOC/恶意软件查询、漏洞利用搜索、电子邮件安全、电话号码验证和代码安全扫描。结构化 JSON + LLM 优化摘要。支持 DeepSeek、Qwen、Claude 等 MCP 兼容模型。免费使用。</p>
     <div style="text-align:center;margin-top:0.5rem">
-      <a href="https://contrastcyber.com" class="btn-cta">立即试用 →</a>
+      <a href="/playground" class="btn-cta">立即试用 →</a>
     </div>
   </section>