openclawd/SnapAPI
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: tabbed code examples on landing page (cURL/Node.js/Python)
All checks were successful
Build & Deploy to Staging / Build & Deploy to Staging (push) Successful in 9m27s
Details

Browse source 
Shows SDK usage directly in hero section to improve developer trust and conversion.
This commit is contained in:
OpenClawd 2026-02-23 17:02:45 +00:00
parent 66ecc471cf
commit 253d03f58a
1 changed files with 45 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

47
public/index.html
View file

@ -73,6 +73,13 @@ nav{position:sticky;top:0;z-index:100;background:rgba(10,14,23,0.85);backdrop-fi
.code-body .flag{color:var(--orange)}
.code-body .cmt{color:#475569;font-style:italic}
.code-body .url{color:var(--primary-light)}
.code-body .fn{color:var(--primary-light)}
.code-body .prop{color:var(--orange)}
.code-body .num{color:var(--accent)}
.code-tabs{display:flex;gap:4px;flex:1;justify-content:center}
.code-tab{background:none;border:none;color:var(--muted);font-size:.8rem;font-family:inherit;font-weight:500;padding:4px 12px;border-radius:4px;cursor:pointer;transition:all .15s}
.code-tab:hover{color:var(--text-secondary)}
.code-tab.active{color:var(--text);background:rgba(255,255,255,0.08)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:0;max-width:700px;margin:0 auto;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}
.stat{padding:32px;text-align:center;border-right:1px solid var(--border)}
.stat:last-child{border-right:none}
@ -261,10 +268,14 @@ footer{border-top:1px solid var(--border);padding:48px 24px 32px;background:var(
<div class="code-window">
<div class="code-titlebar">
<div class="code-dot"></div><div class="code-dot"></div><div class="code-dot"></div>
<span>Terminal</span>
<div class="code-tabs">
<button class="code-tab active" onclick="switchCodeTab(this, 'code-curl')">cURL</button>
<button class="code-tab" onclick="switchCodeTab(this, 'code-node')">Node.js</button>
<button class="code-tab" onclick="switchCodeTab(this, 'code-python')">Python</button>
</div>
<div></div>
</div>
<div class="code-body">
<div class="code-body" id="code-curl">
<span class="cmt"># Take a screenshot of any URL</span>
<span class="kw">curl</span> <span class="flag">-X POST</span> <span class="url">https://snapapi.eu/v1/screenshot</span> \
<span class="flag">-H</span> <span class="str">"Authorization: Bearer YOUR_API_KEY"</span> \
@ -272,6 +283,31 @@ footer{border-top:1px solid var(--border);padding:48px 24px 32px;background:var(
<span class="flag">-d</span> <span class="str">'{"url":"https://example.com","format":"png"}'</span> \
<span class="flag">-o</span> <span class="str">screenshot.png</span>
</div>
<div class="code-body" id="code-node" style="display:none">
<span class="cmt">// npm install snapapi</span>
<span class="kw">import</span> { <span class="fn">SnapAPI</span> } <span class="kw">from</span> <span class="str">'snapapi'</span>;
<span class="kw">const</span> snap = <span class="kw">new</span> <span class="fn">SnapAPI</span>(<span class="str">'YOUR_API_KEY'</span>);
<span class="kw">const</span> screenshot = <span class="kw">await</span> snap.<span class="fn">capture</span>(<span class="str">'https://example.com'</span>, {
<span class="prop">format</span>: <span class="str">'png'</span>,
<span class="prop">width</span>: <span class="num">1920</span>,
<span class="prop">fullPage</span>: <span class="kw">true</span>,
});
</div>
<div class="code-body" id="code-python" style="display:none">
<span class="cmt"># pip install snapapi</span>
<span class="kw">from</span> <span class="fn">snapapi</span> <span class="kw">import</span> <span class="fn">SnapAPI</span>
snap = <span class="fn">SnapAPI</span>(<span class="str">"YOUR_API_KEY"</span>)
screenshot = snap.<span class="fn">capture</span>(
<span class="str">"https://example.com"</span>,
<span class="prop">format</span>=<span class="str">"png"</span>,
<span class="prop">width</span>=<span class="num">1920</span>,
<span class="prop">full_page</span>=<span class="kw">True</span>,
)
</div>
</div>
</div>
</div>
@ -662,6 +698,13 @@ footer{border-top:1px solid var(--border);padding:48px 24px 32px;background:var(
</footer>
<script>
// Code tab switcher
function switchCodeTab(btn, id){
btn.parentElement.querySelectorAll('.code-tab').forEach(function(t){t.classList.remove('active')});
btn.classList.add('active');
btn.closest('.code-window').querySelectorAll('.code-body').forEach(function(b){b.style.display='none'});
document.getElementById(id).style.display='';
}
// Playground - calls /v1/playground (no auth needed)
async function runPlayground(){
var url=document.getElementById('pg-url').value;