mirror of
https://github.com/hanzoai/templates-blueprints.git
synced 2026-10-01 00:43:09 +00:00
zeekay
402659d209
Merge the two half-storefronts into ONE canonical page: - KEEP the educational story (hero · beliefs · makers band). - FOLD IN the searchable 1,030-app launcher below it: search box, 16 data-driven category chips, paginated card grid (Deploy + Source), load-more, #q=&tag= URL sync, / and Esc keys. - STRIP every public compute-share percentage — the makers band now promises a share metered per second, paid automatically, no number. - ONE reconciled stylesheet: theme-aware (light default, dark via OS + [data-theme] toggle persisted to localStorage), responsive 390→1680, no horizontal body scroll. Editorial sections converted from hardcoded black/white to design tokens. - ONE JS: theme bootstrap (blocking in <head>, no flash) + launcher. DOM-built, never innerHTML; logos degrade to a monogram on error. meta.json + blueprints (the machine contract the PaaS loader reads) are untouched. Verified headless under the exact prod CSP at 390 + 1280: hero + real cards render, search + chip filter work, Deploy href = platform.hanzo.ai/templates?deploy=<id>, zero CSP/JS errors, zero '%', theme toggle persists, scrollWidth<=innerWidth.
115 lines
6.3 KiB
HTML
115 lines
6.3 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Hanzo OSS — deploy the open-source internet in one click</title>
|
|
<meta name="description" content="The world runs on open source. Browse and one-click deploy 1,030 apps — Postgres, Ghost, n8n, Grafana, Ollama — on your machine or Hanzo Cloud. Build one, and earn a share when the world runs it." />
|
|
<meta name="color-scheme" content="light dark" />
|
|
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='7' fill='%230a0a0b'/%3E%3Cpath d='M10 8v16M22 8v16M10 16h12' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E" />
|
|
<link rel="stylesheet" href="/catalog.css" />
|
|
<script src="/app.js"></script>
|
|
</head>
|
|
<body>
|
|
<!-- header -->
|
|
<header class="top">
|
|
<a class="brand" href="https://hanzo.ai" aria-label="Hanzo">
|
|
<svg class="mark" viewBox="0 0 32 32" aria-hidden="true"><rect width="32" height="32" rx="7" fill="currentColor"/><path d="M10 8v16M22 8v16M10 16h12" stroke="var(--bg)" stroke-width="2.4" stroke-linecap="round"/></svg>
|
|
<span>Hanzo <span class="sub">OSS</span></span>
|
|
</a>
|
|
<nav class="topnav" aria-label="Primary">
|
|
<a class="hide-sm" href="#explore">Explore</a>
|
|
<a class="hide-sm" href="#makers">Earn</a>
|
|
<a class="hide-sm" href="https://docs.hanzo.ai" target="_blank" rel="noopener">Docs</a>
|
|
<a class="cta" href="https://platform.hanzo.ai" target="_blank" rel="noopener">Deploy console</a>
|
|
<button id="theme-toggle" class="icon-btn" type="button" aria-label="Toggle color theme" title="Toggle theme">
|
|
<svg class="sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg>
|
|
<svg class="moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"/></svg>
|
|
</button>
|
|
</nav>
|
|
</header>
|
|
|
|
<!-- HERO — the story, in three seconds. Static: paints instantly, survives any data failure. -->
|
|
<section class="hero">
|
|
<p class="eyebrow">The open-source cloud</p>
|
|
<h1>The world runs on open source.<br /><span class="dim">Deploy any of it in one click.</span></h1>
|
|
<p class="lead">
|
|
Postgres, Ghost, n8n, Grafana, Ollama — <strong id="count">1,030</strong> apps,
|
|
packaged and ready to run on your machine, your GPU, your cluster.
|
|
Build one, and earn when the world runs it.
|
|
</p>
|
|
<div class="cta">
|
|
<a class="btn primary" href="#explore">Browse apps</a>
|
|
<a class="btn ghost" href="#makers">How makers earn →</a>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- PHILOSOPHY — what Hanzo believes. Static. -->
|
|
<section class="beliefs" aria-label="What we believe">
|
|
<div class="belt">
|
|
<article class="belief">
|
|
<h3>One binary. One API.</h3>
|
|
<p>The whole network is the cloud — no control planes to babysit, no YAML to appease.</p>
|
|
</article>
|
|
<article class="belief">
|
|
<h3>Deploy anything. Own everything.</h3>
|
|
<p>Your data, your keys, your machine. Self-host it or run it on Hanzo. Leave anytime — nothing's locked in.</p>
|
|
</article>
|
|
<article class="belief">
|
|
<h3>Earn when others run it.</h3>
|
|
<p>Ship a template, and keep a share of the compute it earns — paid out automatically. Open source that pays its makers.</p>
|
|
</article>
|
|
</div>
|
|
<p class="signature">Open by default. Building in the open since Techstars '17.</p>
|
|
</section>
|
|
|
|
<!-- MAKERS — the economic story, first-class. Static. -->
|
|
<section class="makers" id="makers">
|
|
<p class="eyebrow">For makers</p>
|
|
<h2>Open source that pays.</h2>
|
|
<p class="makers-lead">
|
|
Every app here is somebody's work. When your project runs on Hanzo you keep a
|
|
<strong>share of the compute it earns</strong> — metered per second, paid out automatically.
|
|
No invoices. No gatekeepers.
|
|
</p>
|
|
<ol class="steps">
|
|
<li><span class="step-n">01</span> Claim your GitHub repo</li>
|
|
<li><span class="step-n">02</span> People deploy it</li>
|
|
<li><span class="step-n">03</span> You earn, automatically</li>
|
|
</ol>
|
|
<a class="btn primary" href="https://console.hanzo.ai/authors">Claim your project →</a>
|
|
</section>
|
|
|
|
<!-- EXPLORE — the searchable 1,030-app launcher. JS-rendered from /meta.json. -->
|
|
<main id="explore">
|
|
<div class="section-head">
|
|
<h2>Explore the catalog</h2>
|
|
<p>Search <span id="count-2">1,030</span> open-source apps, or filter by category — one click sends any of them to Hanzo Cloud.</p>
|
|
</div>
|
|
|
|
<div class="search-wrap">
|
|
<svg class="glass" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>
|
|
<input id="q" class="search" type="search" placeholder="Search apps — postgres, ghost, n8n, grafana, ollama…" autocomplete="off" autocapitalize="off" spellcheck="false" aria-label="Search open-source apps" />
|
|
<span class="kbd" aria-hidden="true">/</span>
|
|
</div>
|
|
<p class="result-count" id="result-count" role="status" aria-live="polite"></p>
|
|
<div class="tags" id="tags" role="group" aria-label="Filter by category"></div>
|
|
|
|
<div id="grid" class="grid" aria-label="Open-source apps" aria-live="polite"></div>
|
|
<p id="empty" class="empty" hidden>No apps match — try another term.</p>
|
|
<button id="more" class="more" type="button" hidden>Load more</button>
|
|
</main>
|
|
|
|
<!-- footer -->
|
|
<footer class="foot">
|
|
<span>Sourced from the open-source Dokploy, Coolify, CapRover, CasaOS & Runtipi catalogs — each app keeps its upstream license.</span>
|
|
<span class="links">
|
|
<a href="/meta.json">Catalog API</a>
|
|
<a href="https://platform.hanzo.ai" target="_blank" rel="noopener">Hanzo PaaS</a>
|
|
<a href="https://docs.hanzo.ai" target="_blank" rel="noopener">Docs</a>
|
|
<a href="https://github.com/hanzoai" target="_blank" rel="noopener">GitHub</a>
|
|
</span>
|
|
</footer>
|
|
</body>
|
|
</html>
|