docs(site): keep landing page source (deployed to gh-pages root)
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
engineer
252
docs-site/index.html
Normal file
252
docs-site/index.html
Normal file
@@ -0,0 +1,252 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<title>OpenCode Mobile — OpenCode AI Coding Agent on Android</title>
|
||||||
|
<meta name="description" content="OpenCode Mobile is a free, open-source Android client for the OpenCode AI coding agent. Connect your phone to your own self-hosted OpenCode server over Tailscale, a tunnel, or your local network and code from anywhere. Get it on F-Droid or download the APK." />
|
||||||
|
<meta name="keywords" content="OpenCode Mobile, OpenCode Android client, AI coding agent on Android, self-hosted AI coding, mobile coding agent, OpenCode app, open source Android coding" />
|
||||||
|
<meta name="theme-color" content="#3b82f6" />
|
||||||
|
<link rel="canonical" href="https://dzianisv.github.io/opencode-mobile/" />
|
||||||
|
<link rel="icon" type="image/png" href="fdroid/repo/icons/icon.png" />
|
||||||
|
|
||||||
|
<!-- Open Graph -->
|
||||||
|
<meta property="og:type" content="website" />
|
||||||
|
<meta property="og:site_name" content="OpenCode Mobile" />
|
||||||
|
<meta property="og:title" content="OpenCode Mobile — OpenCode AI Coding Agent on Android" />
|
||||||
|
<meta property="og:description" content="Free, open-source Android client for the OpenCode AI coding agent. Connect to your own self-hosted OpenCode server and code from your phone." />
|
||||||
|
<meta property="og:url" content="https://dzianisv.github.io/opencode-mobile/" />
|
||||||
|
<meta property="og:image" content="https://dzianisv.github.io/opencode-mobile/fdroid/repo/icons/icon.png" />
|
||||||
|
|
||||||
|
<!-- Twitter -->
|
||||||
|
<meta name="twitter:card" content="summary" />
|
||||||
|
<meta name="twitter:title" content="OpenCode Mobile — OpenCode AI Coding Agent on Android" />
|
||||||
|
<meta name="twitter:description" content="Free, open-source Android client for the OpenCode AI coding agent. Connect to your own self-hosted OpenCode server and code from your phone." />
|
||||||
|
<meta name="twitter:image" content="https://dzianisv.github.io/opencode-mobile/fdroid/repo/icons/icon.png" />
|
||||||
|
|
||||||
|
<!-- Structured data -->
|
||||||
|
<script type="application/ld+json">
|
||||||
|
{
|
||||||
|
"@context": "https://schema.org",
|
||||||
|
"@type": "SoftwareApplication",
|
||||||
|
"name": "OpenCode Mobile",
|
||||||
|
"applicationCategory": "DeveloperApplication",
|
||||||
|
"operatingSystem": "Android",
|
||||||
|
"description": "Free, open-source Android client for the OpenCode AI coding agent. Connect to your own self-hosted OpenCode server over Tailscale, a tunnel, or your local network and write, review, and ship code from your phone.",
|
||||||
|
"url": "https://dzianisv.github.io/opencode-mobile/",
|
||||||
|
"downloadUrl": "https://github.com/dzianisv/opencode-mobile/releases/latest",
|
||||||
|
"license": "https://opensource.org/licenses/MIT",
|
||||||
|
"isAccessibleForFree": true,
|
||||||
|
"offers": {
|
||||||
|
"@type": "Offer",
|
||||||
|
"price": "0",
|
||||||
|
"priceCurrency": "USD"
|
||||||
|
},
|
||||||
|
"author": {
|
||||||
|
"@type": "Organization",
|
||||||
|
"name": "VIBE TECHNOLOGIES, LLC"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
:root{
|
||||||
|
--bg:#0b0f17;
|
||||||
|
--bg-soft:#121826;
|
||||||
|
--card:#161d2e;
|
||||||
|
--border:#243049;
|
||||||
|
--text:#e6ebf5;
|
||||||
|
--muted:#9aa6be;
|
||||||
|
--accent:#3b82f6;
|
||||||
|
--accent-2:#2563eb;
|
||||||
|
}
|
||||||
|
*{box-sizing:border-box}
|
||||||
|
html{scroll-behavior:smooth}
|
||||||
|
body{
|
||||||
|
margin:0;
|
||||||
|
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Helvetica Neue",Arial,sans-serif;
|
||||||
|
background:var(--bg);
|
||||||
|
color:var(--text);
|
||||||
|
line-height:1.6;
|
||||||
|
-webkit-font-smoothing:antialiased;
|
||||||
|
}
|
||||||
|
a{color:var(--accent);text-decoration:none}
|
||||||
|
a:hover{text-decoration:underline}
|
||||||
|
.wrap{max-width:880px;margin:0 auto;padding:0 20px}
|
||||||
|
section{padding:48px 0;border-top:1px solid var(--border)}
|
||||||
|
section:first-of-type{border-top:none}
|
||||||
|
h1,h2,h3{line-height:1.25;margin:0 0 .5em}
|
||||||
|
h2{font-size:1.5rem}
|
||||||
|
code{
|
||||||
|
font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
|
||||||
|
background:var(--bg-soft);
|
||||||
|
border:1px solid var(--border);
|
||||||
|
border-radius:6px;
|
||||||
|
padding:2px 6px;
|
||||||
|
font-size:.9em;
|
||||||
|
word-break:break-all;
|
||||||
|
}
|
||||||
|
pre{
|
||||||
|
background:var(--bg-soft);
|
||||||
|
border:1px solid var(--border);
|
||||||
|
border-radius:10px;
|
||||||
|
padding:14px 16px;
|
||||||
|
overflow-x:auto;
|
||||||
|
}
|
||||||
|
pre code{background:none;border:none;padding:0;word-break:normal}
|
||||||
|
|
||||||
|
/* Hero */
|
||||||
|
.hero{
|
||||||
|
text-align:center;
|
||||||
|
padding:64px 0 56px;
|
||||||
|
background:radial-gradient(900px 360px at 50% -10%,rgba(59,130,246,.18),transparent 70%);
|
||||||
|
}
|
||||||
|
.logo{width:84px;height:84px;margin:0 auto 20px;display:block}
|
||||||
|
.hero h1{font-size:2.3rem;margin-bottom:.2em}
|
||||||
|
.tagline{font-size:1.15rem;color:var(--muted);max-width:560px;margin:0 auto 28px}
|
||||||
|
.cta{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
|
||||||
|
.btn{
|
||||||
|
display:inline-block;
|
||||||
|
padding:12px 22px;
|
||||||
|
border-radius:10px;
|
||||||
|
font-weight:600;
|
||||||
|
font-size:1rem;
|
||||||
|
border:1px solid var(--border);
|
||||||
|
background:var(--card);
|
||||||
|
color:var(--text);
|
||||||
|
}
|
||||||
|
.btn:hover{text-decoration:none;border-color:var(--accent)}
|
||||||
|
.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}
|
||||||
|
.btn-primary:hover{background:var(--accent-2);border-color:var(--accent-2)}
|
||||||
|
|
||||||
|
/* Features */
|
||||||
|
.features{list-style:none;padding:0;margin:0;display:grid;gap:14px;grid-template-columns:1fr}
|
||||||
|
.features li{
|
||||||
|
background:var(--card);
|
||||||
|
border:1px solid var(--border);
|
||||||
|
border-radius:12px;
|
||||||
|
padding:16px 18px;
|
||||||
|
}
|
||||||
|
.features b{color:var(--text)}
|
||||||
|
.features span{color:var(--muted);display:block;font-size:.95rem}
|
||||||
|
|
||||||
|
/* Notes */
|
||||||
|
.note{
|
||||||
|
background:var(--bg-soft);
|
||||||
|
border:1px solid var(--border);
|
||||||
|
border-left:3px solid var(--accent);
|
||||||
|
border-radius:10px;
|
||||||
|
padding:16px 18px;
|
||||||
|
color:var(--muted);
|
||||||
|
}
|
||||||
|
.note strong{color:var(--text)}
|
||||||
|
.muted{color:var(--muted)}
|
||||||
|
.steps{padding-left:1.2em}
|
||||||
|
.steps li{margin-bottom:10px}
|
||||||
|
|
||||||
|
footer{
|
||||||
|
border-top:1px solid var(--border);
|
||||||
|
padding:32px 0 48px;
|
||||||
|
text-align:center;
|
||||||
|
color:var(--muted);
|
||||||
|
font-size:.9rem;
|
||||||
|
}
|
||||||
|
footer a{margin:0 8px}
|
||||||
|
|
||||||
|
@media(min-width:680px){
|
||||||
|
.features{grid-template-columns:1fr 1fr}
|
||||||
|
.hero h1{font-size:2.8rem}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<header class="hero">
|
||||||
|
<div class="wrap">
|
||||||
|
<svg class="logo" viewBox="0 0 84 84" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="OpenCode Mobile logo">
|
||||||
|
<rect x="2" y="2" width="80" height="80" rx="20" fill="#161d2e" stroke="#3b82f6" stroke-width="3"/>
|
||||||
|
<path d="M33 30 L23 42 L33 54" stroke="#3b82f6" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<path d="M51 30 L61 42 L51 54" stroke="#3b82f6" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<line x1="46" y1="26" x2="38" y2="58" stroke="#9aa6be" stroke-width="5" stroke-linecap="round"/>
|
||||||
|
</svg>
|
||||||
|
<h1>OpenCode Mobile</h1>
|
||||||
|
<p class="tagline">The free, open-source Android client for the OpenCode AI coding agent. Connect to your own self-hosted OpenCode server and write, review, and ship code from your phone.</p>
|
||||||
|
<div class="cta">
|
||||||
|
<a class="btn btn-primary" href="https://dzianisv.github.io/opencode-mobile/fdroid/repo">Get it on F-Droid</a>
|
||||||
|
<a class="btn" href="https://github.com/dzianisv/opencode-mobile/releases/latest">Download APK</a>
|
||||||
|
<a class="btn" href="https://github.com/dzianisv/opencode-mobile">View on GitHub</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<section id="what">
|
||||||
|
<div class="wrap">
|
||||||
|
<h2>What is OpenCode Mobile?</h2>
|
||||||
|
<p>OpenCode Mobile is a thin Android client for the <a href="https://github.com/sst/opencode">OpenCode</a> AI coding agent, built with React Native and Expo. It is not a standalone agent — it connects to an OpenCode server that <strong>you</strong> run yourself (on your laptop, a VPS, or anywhere you control) and speaks its HTTP + SSE API to browse sessions, stream responses, and review file changes.</p>
|
||||||
|
<p>All AI model calls happen on your server using your own API keys. The app never proxies your code or conversations through anyone else's servers. It is <strong>free and open-source</strong> under the MIT license — no feature gate, no ads, and no analytics you did not opt into.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="features">
|
||||||
|
<div class="wrap">
|
||||||
|
<h2>Key features</h2>
|
||||||
|
<ul class="features">
|
||||||
|
<li><b>Multi-connection management</b><span>Manage multiple OpenCode servers — local network, Cloudflare Tunnel, ngrok, or Tailscale.</span></li>
|
||||||
|
<li><b>Streaming chat</b><span>Token-by-token streaming responses directly from your OpenCode server.</span></li>
|
||||||
|
<li><b>Diff viewer</b><span>Inline side-by-side diffs of every file change the agent makes.</span></li>
|
||||||
|
<li><b>Tool call approval</b><span>Review and approve or reject tool calls before the agent executes them.</span></li>
|
||||||
|
<li><b>Biometric unlock</b><span>Face ID, Touch ID, or Android fingerprint protects the app and individual message sends.</span></li>
|
||||||
|
<li><b>Secure credential storage</b><span>Server credentials stored in the Android Keystore via expo-secure-store.</span></li>
|
||||||
|
<li><b>Session management</b><span>Browse, create, and resume coding sessions on your server.</span></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="install">
|
||||||
|
<div class="wrap">
|
||||||
|
<h2>How to install</h2>
|
||||||
|
<h3>Option A — F-Droid (recommended)</h3>
|
||||||
|
<p>Add this repository in any F-Droid client (F-Droid, Droid-ify, Neo Store), then install OpenCode Mobile and get automatic updates:</p>
|
||||||
|
<pre><code>https://dzianisv.github.io/opencode-mobile/fdroid/repo</code></pre>
|
||||||
|
<p class="muted">In F-Droid: Settings → Repositories → add the URL above, then search for "OpenCode Mobile".</p>
|
||||||
|
|
||||||
|
<h3>Option B — Direct APK</h3>
|
||||||
|
<p>Download the latest signed APK and install it (you may need to allow installation from unknown sources):</p>
|
||||||
|
<p><a class="btn btn-primary" href="https://github.com/dzianisv/opencode-mobile/releases/latest">Download latest APK</a></p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="requirements">
|
||||||
|
<div class="wrap">
|
||||||
|
<h2>Requirements</h2>
|
||||||
|
<div class="note">
|
||||||
|
<p><strong>You need your own OpenCode server.</strong> OpenCode Mobile is a client, not a hosted service. Before it is useful you must run an OpenCode server somewhere you control and make it reachable from your phone.</p>
|
||||||
|
<ol class="steps" style="margin-bottom:0">
|
||||||
|
<li>Install and run OpenCode on your machine:<br>
|
||||||
|
<pre style="margin-top:8px"><code>npm install -g opencode
|
||||||
|
OPENCODE_SERVER_PASSWORD=yourpassword opencode serve --hostname 0.0.0.0 --port 4096</code></pre>
|
||||||
|
</li>
|
||||||
|
<li>Make it reachable from your phone — the simplest secure option is <strong>Tailscale</strong> (connect to your machine's Tailscale IP, e.g. <code>http://100.x.x.x:4096</code>). A Cloudflare Tunnel, ngrok, or the same local network also work.</li>
|
||||||
|
<li>In the app, tap <strong>Add Connection</strong>, enter your server URL and password, and connect.</li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
<p class="muted" style="margin-top:14px">You bring your own AI provider keys (OpenAI, Anthropic, Gemini, etc.) on the server — your keys, your bill.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<div class="wrap">
|
||||||
|
<p>
|
||||||
|
<a href="https://github.com/dzianisv/opencode-mobile">GitHub</a>
|
||||||
|
<a href="https://dzianisv.github.io/opencode-mobile/fdroid/repo">F-Droid repo</a>
|
||||||
|
<a href="https://dzianisv.github.io/opencode-mobile/privacy/">Privacy policy</a>
|
||||||
|
<a href="https://github.com/dzianisv/opencode-mobile/blob/main/LICENSE">MIT License</a>
|
||||||
|
</p>
|
||||||
|
<p class="muted">Free and open-source. Built by VIBE TECHNOLOGIES, LLC. Not affiliated with the OpenCode upstream project beyond using its open API.</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user