templates/index.html at master

mirror of https://github.com/hanzoai/templates.git synced 2026-10-30 18:20:05 +00:00

Files

T

zeekay 6bc8094492 feat(oss): redesign oss.hanzo.ai into an educational, discoverable OSS explorer + one-click launcher

Replaces the old lorem-ipsum e-commerce demo with a best-in-class human gallery over the
REAL 1,030-app catalog (meta.json), sharing templates.hanzo.ai's machine-readable contract
(meta.json + blueprints/ UNTOUCHED — only the human UI changed).

- Educational: hero + live app count + a 'How it works' Pick→Deploy→Manage strip + a
  'Why Hanzo' (managed / scalable / pay-as-you-go / your own org) section.
- Discoverable: fast debounced client-side search (name/desc/id/tags) + 16 data-driven
  category chips + Load-more, with #q=&tag= URL sync for shareable views + keyboard (/ , Esc).
- Quick-launcher: each card's Deploy CTA deep-links the REAL PaaS deploy flow
  platform.hanzo.ai/templates?deploy=<id> (verified against platform source + a live 200).
- Removed the public 'earn 20% compute revenue' claims; fixed a latent CSP bug (inline
  onerror → DOM-attached). 100% self-contained/CSP-safe (inline SVG icons, data-URI favicon,
  NO external CDN/font/style), theme-aware (light/dark), responsive (390 mobile → 1680 desktop,
  no horizontal scroll). Purged the old demo cruft (18 CSS + 11 JS + 30 img + fonts + stubs).

Verified headless under the exact prod CSP: cards render (0 violations/0 JS errors), search/
filter/load-more/96-of-96-logos/theme-toggle all work, 390px no-h-scroll. Catalog contract
untouched (UI only READS meta.json/blueprints).

2026-07-24 17:18:29 -07:00

112 lines

7.3 KiB

HTML

Raw Permalink Blame History

 <!doctype html>
 <html lang="en">
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>Hanzo OSS — deploy 1,000+ open-source apps</title>
   <meta name="description" content="Browse and one-click deploy 1,000+ open-source apps — Postgres, n8n, Grafana, Ghost, Uptime Kuma and more — onto managed Hanzo Cloud. Pick, deploy, get a managed URL, pay only for the compute you use." />
   <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="css/oss.css" />
   <script src="js/theme.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="https://docs.hanzo.ai" target="_blank" rel="noopener">Docs</a>
       <a class="hide-sm" href="https://github.com/hanzoai" target="_blank" rel="noopener">GitHub</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 -->
   <section class="hero">
     <span class="eyebrow">Open-source catalog · managed on Hanzo Cloud</span>
     <h1>Deploy open source in one click</h1>
     <p class="lead">
       Browse <strong id="count">1,000+</strong> ready-to-run open-source apps — Postgres, n8n,
       Grafana, Ghost, Uptime&nbsp;Kuma and more. One click sends the app to Hanzo Cloud and hands you a managed URL.
     </p>
     <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, n8n, grafana, ghost…" 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>
   </section>
   <!-- how it works -->
   <section class="how" aria-label="How it works">
     <div class="how-grid">
       <div class="step">
         <span class="n" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg></span>
         <div><h3>1 · Pick</h3><p>Search the curated catalog of open-source apps — databases, dashboards, automation, AI and more.</p></div>
       </div>
       <div class="step">
         <span class="n" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3v12M7 10l5 5 5-5"/><path d="M5 21h14"/></svg></span>
         <div><h3>2 · Deploy</h3><p>One click hands the app's blueprint to the Hanzo PaaS, which provisions it and wires up networking.</p></div>
       </div>
       <div class="step">
         <span class="n" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 17l6-6-6-6"/><path d="M12 19h8"/></svg></span>
         <div><h3>3 · Manage</h3><p>Get a managed URL, scale it, and pay only for the compute you use — all inside your own org.</p></div>
       </div>
     </div>
   </section>
   <!-- catalog grid -->
   <main>
     <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>
   <!-- why hanzo -->
   <section class="why" aria-label="Why deploy on Hanzo">
     <h2>Why run it on Hanzo</h2>
     <p class="sub">The same open-source apps you'd self-host, without the servers to babysit.</p>
     <div class="why-grid">
       <div class="val">
         <span class="vi" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg></span>
         <h3>Managed</h3><p>Hanzo runs the infrastructure — provisioning, TLS and the deploy pipeline are handled for you.</p>
       </div>
       <div class="val">
         <span class="vi" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 17l5-5 4 4 8-8"/><path d="M21 8v5M21 8h-5"/></svg></span>
         <h3>Scalable</h3><p>Start with a single container and grow to a full cluster — the same catalog, the same one click.</p>
       </div>
       <div class="val">
         <span class="vi" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 7v10M9.5 9.5h4a1.8 1.8 0 0 1 0 3.6h-3a1.8 1.8 0 0 0 0 3.6h4"/></svg></span>
         <h3>Pay as you go</h3><p>No idle bills — you pay for the compute your deployments actually use.</p>
       </div>
       <div class="val">
         <span class="vi" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.9"/></svg></span>
         <h3>Your own org</h3><p>Everything deploys into your Hanzo organization — your data, your access, your control.</p>
       </div>
     </div>
   </section>
   <!-- footer -->
   <footer class="foot">
     <span>Curated from the open-source Dokploy, Coolify, CapRover, CasaOS &amp; 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>
     </span>
   </footer>
   <script src="js/oss.js" defer></script>
 </body>
 </html>

112 lines 7.3 KiB HTML Raw Permalink Blame History

112 lines

7.3 KiB

HTML

Raw Permalink Blame History