47 lines
13 KiB
HTML
47 lines
13 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>Hermes Mobile | Your Hermes Agent, in your pocket</title>
|
||
<meta name="description" content="Hermes Mobile is the open-source native Android client for Hermes Agent. Chat, configure, automate, and manage your agent from your phone.">
|
||
<meta name="keywords" content="Hermes Agent, Hermes Mobile, Android, AI agent, mobile client, open source, F-Droid">
|
||
<link rel="canonical" href="https://hy4ri.github.io/hermes-mobile/">
|
||
<meta property="og:type" content="website">
|
||
<meta property="og:title" content="Hermes Mobile">
|
||
<meta property="og:description" content="Your Hermes Agent, in your pocket. Native Android client for Hermes Agent.">
|
||
<meta property="og:url" content="https://hy4ri.github.io/hermes-mobile/">
|
||
<meta name="theme-color" content="#0d0f12">
|
||
<style>
|
||
:root{--bg:#0d0f12;--bg-soft:#111419;--surface:#161a20;--surface-hover:#1b2028;--border:#262c36;--text:#f4f5f6;--muted:#9aa4b2;--muted-strong:#b5bdc8;--accent:#f5b842;--accent-soft:rgba(245,184,66,.12);--accent-border:rgba(245,184,66,.26);--accent-ink:#171109;--radius-md:16px;--radius-lg:24px;--shadow:0 24px 80px rgba(0,0,0,.35)}
|
||
*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}body{background:radial-gradient(circle at 50% -10%,rgba(245,184,66,.11),transparent 34%),var(--bg);color:var(--text);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased}a{color:inherit}img{display:block;max-width:100%}.wrap{width:min(1120px,calc(100% - 40px));margin:0 auto}
|
||
nav{display:flex;align-items:center;justify-content:space-between;min-height:72px}.brand{display:flex;align-items:center;gap:10px;color:var(--text);text-decoration:none;font-weight:700;letter-spacing:-.02em}.brand-dot{width:10px;height:10px;background:var(--accent);border-radius:50%;box-shadow:0 0 0 5px rgba(245,184,66,.08),0 0 24px rgba(245,184,66,.35)}.nav-links{display:flex;align-items:center;gap:22px}.nav-links a{color:var(--muted);text-decoration:none;font-size:14px;font-weight:500}.nav-links a:hover{color:var(--text)}
|
||
.hero{padding:92px 0 70px;text-align:center}.eyebrow{display:inline-flex;align-items:center;gap:8px;padding:7px 13px;margin-bottom:24px;border:1px solid var(--accent-border);border-radius:999px;background:var(--accent-soft);color:var(--accent);font-size:13px;font-weight:600}h1{max-width:900px;margin:0 auto;font-size:clamp(46px,8vw,82px);line-height:.98;letter-spacing:-.055em;font-weight:850}.accent{color:var(--accent)}.hero-sub{max-width:650px;margin:26px auto 0;color:var(--muted-strong);font-size:clamp(17px,2.5vw,20px);line-height:1.65}.hero-sub strong{color:var(--text)}.hero-actions{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:34px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border:1px solid var(--border);border-radius:12px;background:var(--surface);color:var(--text);font-size:14px;font-weight:650;text-decoration:none;transition:transform .15s ease,background .15s ease,border-color .15s ease}.btn:hover{transform:translateY(-2px);background:var(--surface-hover);border-color:#39414d}.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}.btn.primary:hover{background:#ffc454;border-color:#ffc454}.hero-note{margin-top:14px;color:var(--muted);font-size:12px}
|
||
.showcase{position:relative;max-width:900px;margin:74px auto 0;padding:24px;border:1px solid var(--border);border-radius:28px;background:linear-gradient(145deg,rgba(255,255,255,.03),transparent 40%),var(--bg-soft);box-shadow:var(--shadow);overflow:hidden}.showcase:before{content:"";position:absolute;width:420px;height:420px;top:-210px;left:50%;transform:translateX(-50%);border-radius:50%;background:rgba(245,184,66,.12);filter:blur(100px);pointer-events:none}.screens{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,1fr);align-items:end;gap:14px}.screen{border-radius:20px;overflow:hidden;border:1px solid rgba(255,255,255,.08);background:var(--surface);box-shadow:0 12px 30px rgba(0,0,0,.32)}.screen:nth-child(1),.screen:nth-child(4){transform:translateY(28px) scale(.94);opacity:.82}
|
||
section{padding:100px 0}.section-head{max-width:680px;margin-bottom:44px}.section-label{color:var(--accent);font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;margin-bottom:10px}h2{font-size:clamp(30px,5vw,46px);line-height:1.1;letter-spacing:-.04em;margin-bottom:14px}.section-sub{color:var(--muted);font-size:17px}.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.pillar{min-height:260px;padding:26px;border:1px solid var(--border);border-radius:var(--radius-lg);background:linear-gradient(150deg,rgba(255,255,255,.025),transparent 50%),var(--surface)}.pillar-icon{display:grid;place-items:center;width:44px;height:44px;margin-bottom:28px;border-radius:12px;background:var(--accent-soft);border:1px solid var(--accent-border);color:var(--accent);font-size:20px}.pillar h3{margin-bottom:9px;font-size:20px;letter-spacing:-.02em}.pillar p{color:var(--muted);font-size:14px;line-height:1.7}.details-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.detail{padding:22px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface)}.detail h3{margin-bottom:5px;font-size:15px}.detail p{color:var(--muted);font-size:14px}.setup{display:grid;grid-template-columns:.85fr 1.15fr;gap:52px;align-items:start}.steps{display:grid;gap:12px}.step{display:grid;grid-template-columns:42px 1fr;gap:14px;align-items:start;padding:20px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface)}.step-number{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--accent);color:var(--accent-ink);font-weight:800;font-size:14px}.step h3{margin-bottom:4px;font-size:15px}.step p{color:var(--muted);font-size:14px}code{padding:2px 7px;border:1px solid var(--border);border-radius:6px;background:var(--bg);color:#d8dde5;font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace;font-size:12px}.final{padding:94px 30px;text-align:center;border:1px solid var(--border);border-radius:28px;background:radial-gradient(circle at 50% 100%,rgba(245,184,66,.13),transparent 42%),var(--surface)}.final h2{max-width:700px;margin:0 auto 14px}.final p{max-width:560px;margin:0 auto;color:var(--muted);font-size:17px}.final .hero-actions{margin-top:28px}footer{padding:34px 0 56px;color:var(--muted);text-align:center;font-size:13px}footer a{color:var(--muted-strong);text-decoration:none}footer a:hover{color:var(--accent)}
|
||
@media(max-width:900px){.pillars{grid-template-columns:1fr}.setup{grid-template-columns:1fr;gap:34px}.screens{grid-template-columns:repeat(4,minmax(150px,1fr));overflow-x:auto;padding-bottom:10px}.screen{min-width:150px}}@media(max-width:700px){.nav-links a:not(.github-link){display:none}.hero{padding-top:62px}.hero-sub{font-size:16px}.showcase{margin-top:54px;padding:14px}.details-grid{grid-template-columns:1fr}section{padding:76px 0}.screen:nth-child(1),.screen:nth-child(4){transform:none;opacity:1}.screens{grid-template-columns:repeat(4,170px)}.final{padding:70px 22px}}@media(max-width:480px){.wrap{width:min(100% - 28px,1120px)}nav{min-height:64px}.hero{padding-top:50px}h1{font-size:46px}.hero-actions{display:grid;grid-template-columns:1fr}.btn{width:100%}}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="wrap">
|
||
<nav><a class="brand" href="#"><span class="brand-dot"></span>Hermes Mobile</a><div class="nav-links"><a href="#features">Features</a><a href="#setup">Setup</a><a class="github-link" href="https://github.com/Hy4ri/hermes-mobile">GitHub</a></div></nav>
|
||
<main>
|
||
<header class="hero">
|
||
<div class="eyebrow">Native Android client for Hermes Agent</div>
|
||
<h1>Your Hermes Agent. <span class="accent">In your pocket.</span></h1>
|
||
<p class="hero-sub">Chat, configure, automate, and manage your Hermes Agent from a native Android experience built for your phone.</p>
|
||
<div class="hero-actions"><a class="btn primary" href="https://f-droid.org/packages/com.m57.hermescontrol/">Get it on F-Droid</a><a class="btn" href="https://github.com/Hy4ri/hermes-mobile/releases/latest">Download APK</a><a class="btn" href="https://github.com/Hy4ri/hermes-mobile">View source</a></div>
|
||
<p class="hero-note">Free, open source, and built specifically for Android.</p>
|
||
<div class="showcase"><div class="screens"><div class="screen"><img src="screenshots/cron.png" alt="Hermes Mobile cron jobs"></div><div class="screen"><img src="screenshots/chat.png" alt="Hermes Mobile chat"></div><div class="screen"><img src="screenshots/skills.png" alt="Hermes Mobile skills"></div><div class="screen"><img src="screenshots/plugins.png" alt="Hermes Mobile plugins"></div></div></div>
|
||
</header>
|
||
<section><div class="section-head"><div class="section-label">Explore Hermes Mobile</div><h2>Everything in your pocket.</h2><p class="section-sub">Browse models, manage your agent’s extensions, and reach every control surface from one native Android app.</p></div><div class="showcase"><div class="screens"><div class="screen"><img src="screenshots/model.png" alt="Hermes Mobile models"></div><div class="screen"><img src="screenshots/plugins.png" alt="Hermes Mobile plugins"></div><div class="screen"><img src="screenshots/sidebar-1.png" alt="Hermes Mobile primary navigation"></div><div class="screen"><img src="screenshots/sidebar-2.png" alt="Hermes Mobile secondary navigation"></div></div></div></section>
|
||
<section id="features"><div class="section-head"><div class="section-label">Built for Hermes</div><h2>More than chat.</h2><p class="section-sub">Hermes Mobile brings the parts of your agent you actually use into one native Android interface.</p></div><div class="pillars"><article class="pillar"><div class="pillar-icon">◉</div><h3>Talk to Hermes</h3><p>Chat with your agent in real time, resume previous sessions, work with attachments, and stay connected through Android notifications.</p></article><article class="pillar"><div class="pillar-icon">⚙</div><h3>Control your agent</h3><p>Manage models, providers, skills, plugins, MCP servers, cron jobs, profiles, environment settings, and other Hermes configuration without returning to your desktop.</p></article><article class="pillar"><div class="pillar-icon">✓</div><h3>Keep work moving</h3><p>Check Kanban boards, inspect sessions, monitor your gateway, view logs, and keep an eye on what your agent is doing wherever you are.</p></article></div></section>
|
||
<section><div class="section-head"><div class="section-label">Native by design</div><h2>Made for Android. Not squeezed into it.</h2><p class="section-sub">Hermes Mobile is built as an Android app from the ground up, with a UI that belongs on your phone.</p></div><div class="details-grid"><div class="detail"><h3>Material 3 interface</h3><p>A modern native UI designed around Android navigation, gestures, layouts, and system behavior.</p></div><div class="detail"><h3>Material You</h3><p>Use dynamic device colors or choose from built-in Hermes color presets.</p></div><div class="detail"><h3>Live gateway status</h3><p>Keep an eye on your Hermes connection, integrations, channels, services, and agent state.</p></div><div class="detail"><h3>Automation controls</h3><p>Inspect and manage cron jobs, webhooks, processes, configuration, and operational tools.</p></div><div class="detail"><h3>Session continuity</h3><p>Resume your Hermes conversations instead of treating every mobile interaction as a fresh start.</p></div><div class="detail"><h3>Open source</h3><p>No black box. Browse the code, open issues, contribute fixes, or build it yourself.</p></div></div></section>
|
||
<section id="setup"><div class="setup"><div><div class="section-label">Quick start</div><h2>Connect and go.</h2><p class="section-sub">Hermes Mobile connects to the Hermes dashboard you already run.</p></div><div class="steps"><div class="step"><div class="step-number">1</div><div><h3>Install Hermes Mobile</h3><p>Get it from F-Droid, Obtainium, or the latest GitHub release.</p></div></div><div class="step"><div class="step-number">2</div><div><h3>Start your Hermes dashboard</h3><p>Run <code>hermes dashboard --host 0.0.0.0</code> on the machine hosting Hermes.</p></div></div><div class="step"><div class="step-number">3</div><div><h3>Sign in from your phone</h3><p>Enter the dashboard host and port. Hermes Mobile detects the available authentication method and handles the rest.</p></div></div></div></div></section>
|
||
<section><div class="final"><div class="section-label">Hermes goes mobile</div><h2>Take your agent with you.</h2><p>Your conversations, automation, configuration, and workflows are no longer tied to your desk.</p><div class="hero-actions"><a class="btn primary" href="https://f-droid.org/packages/com.m57.hermescontrol/">Install Hermes Mobile</a><a class="btn" href="https://github.com/Hy4ri/hermes-mobile/releases/latest">Latest release</a></div></div></section>
|
||
</main>
|
||
<footer><p>Hermes Mobile · Open source under the <a href="https://github.com/Hy4ri/hermes-mobile/blob/main/LICENSE">Apache License 2.0</a> · <a href="https://github.com/Hy4ri/hermes-mobile">GitHub</a></p></footer>
|
||
</div>
|
||
</body>
|
||
</html>
|