xieyao/opencode-mobile
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

site: add app screenshot strip to landing (connect → chat → diff)

Browse Source 
Visual proof above the fold-ish: 3 UI previews with captions + descriptive
alt text. Responsive flex strip, lazy-loaded. Conversion lever for first-time
visitors — landing had QR codes but no app visuals.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
engineer
2026-06-08 04:44:06 -07:00
parent 6232430fe6
commit b40651748f
4 changed files with 21 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
docs-site/index.html
View File

@@ -267,6 +267,27 @@ footer a{margin:0 8px}
</div>
</section>
<section id="screenshots">
<div class="wrap">
<h2>See it in action</h2>
<p class="muted" style="margin-bottom:18px">Connect to your server, chat with the agent, review every diff before it lands — all from your phone.</p>
<div style="display:flex;gap:16px;flex-wrap:wrap;justify-content:center">
<figure style="margin:0;flex:1 1 240px;max-width:300px">
<img src="screenshots/01.png" alt="OpenCode Mobile connection screen: add a server URL or connect via Cloudflare Tunnel or ngrok" width="1080" height="2400" loading="lazy" style="width:100%;height:auto;border-radius:14px;border:1px solid rgba(255,255,255,.08)" />
<figcaption class="muted" style="text-align:center;font-size:.9rem;margin-top:8px">Connect to your own server</figcaption>
</figure>
<figure style="margin:0;flex:1 1 240px;max-width:300px">
<img src="screenshots/02.png" alt="OpenCode Mobile streaming chat with the AI agent and an inline approve/reject tool-call prompt" width="1080" height="2400" loading="lazy" style="width:100%;height:auto;border-radius:14px;border:1px solid rgba(255,255,255,.08)" />
<figcaption class="muted" style="text-align:center;font-size:.9rem;margin-top:8px">Stream replies, approve tool calls</figcaption>
</figure>
<figure style="margin:0;flex:1 1 240px;max-width:300px">
<img src="screenshots/03.png" alt="OpenCode Mobile diff viewer showing added and removed lines for a file the agent changed" width="1080" height="2400" loading="lazy" style="width:100%;height:auto;border-radius:14px;border:1px solid rgba(255,255,255,.08)" />
<figcaption class="muted" style="text-align:center;font-size:.9rem;margin-top:8px">Review every diff before it lands</figcaption>
</figure>
</div>
</div>
</section>
<section id="features">
<div class="wrap">
<h2>Key features</h2>