paperclip-docs/site/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <title>Paperclip Docs</title>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
  <link rel="icon" type="image/svg+xml" href="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48'/></svg>" />
  <script src="https://cdn.jsdelivr.net/npm/marked@12/marked.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/lucide.min.js"></script>
  <link rel="stylesheet" href="styles.css" />
</head>
<body>

<header id="header">
  <div id="header-inner">
    <a id="logo" href="#" data-nav="home">
      <div id="logo-mark" aria-hidden="true">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg>
      </div>
      <span id="logo-name">Paperclip</span>
      <span id="logo-sub">Docs</span>
    </a>
    <div id="breadcrumb" aria-hidden="true"></div>
    <div id="header-spacer"></div>
    <div id="search-wrap">
      <svg id="search-icon" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" aria-hidden="true">
        <circle cx="7" cy="7" r="5"/><path d="m11 11 3 3"/>
      </svg>
      <input id="search-input" type="search" placeholder="Search the docs…" autocomplete="off" spellcheck="false" aria-label="Search guides" aria-haspopup="listbox" />
      <kbd id="search-kbd">⌘K</kbd>
      <div id="search-results" role="listbox" aria-label="Search results"></div>
    </div>
    <button class="icon-btn" id="theme-toggle" aria-label="Toggle theme">
      <svg class="icon-moon" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round">
        <path d="M15 10a6 6 0 1 1-7-7 4.5 4.5 0 0 0 7 7Z"/>
      </svg>
      <svg class="icon-sun" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round">
        <circle cx="9" cy="9" r="3"/>
        <path d="M9 1.5v2M9 14.5v2M1.5 9h2M14.5 9h2M3.5 3.5l1.5 1.5M13 13l1.5 1.5M3.5 14.5 5 13M13 5l1.5-1.5"/>
      </svg>
    </button>
    <button class="icon-btn" id="hamburger" aria-label="Open menu" aria-expanded="false">
      <svg viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round">
        <path d="M3 5h12M3 9h12M3 13h12"/>
      </svg>
    </button>
    <a class="icon-btn" id="github-link" href="https://github.com/paperclipai/paperclip" target="_blank" rel="noopener" aria-label="GitHub">
      <svg viewBox="0 0 18 18" fill="currentColor"><path d="M9 1.5a7.5 7.5 0 0 0-2.4 14.6c.4 0 .5-.2.5-.4v-1.3c-2 .5-2.5-.9-2.5-.9-.3-.9-.8-1.1-.8-1.1-.7-.4 0-.4 0-.4.7 0 1.1.8 1.1.8.6 1.1 1.7.8 2.1.6 0-.5.2-.8.4-1-1.7-.2-3.4-.8-3.4-3.7 0-.8.3-1.5.8-2-.1-.2-.3-1 .1-2 0 0 .6-.2 2.1.8a7.2 7.2 0 0 1 3.8 0c1.5-1 2.1-.8 2.1-.8.4 1 .2 1.8.1 2 .5.5.8 1.2.8 2 0 2.9-1.7 3.5-3.4 3.7.3.3.5.7.5 1.4v2.2c0 .2.1.4.5.4A7.5 7.5 0 0 0 9 1.5Z"/></svg>
    </a>
  </div>
</header>

<div id="drawer-backdrop"></div>
<aside id="drawer" aria-label="Mobile navigation" aria-hidden="true">
  <div id="drawer-head">
    <span class="label">Documentation</span>
    <button class="icon-btn" id="drawer-close" aria-label="Close menu">
      <svg viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="m4 4 10 10M14 4 4 14"/></svg>
    </button>
  </div>
  <a class="sb-back" data-nav="home">
    <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M8 2 4 6l4 4"/></svg>
    All docs
  </a>
  <div id="drawer-sections"></div>
</aside>

<!-- ─── Landing page ─────────────────────────────────────── -->
<section id="landing">
  <div id="landing-hero">
    <div id="landing-eyebrow">Paperclip Documentation</div>
    <h1 id="landing-title">Run your company with <em>autonomous agents.</em></h1>
    <p id="landing-desc">Paperclip is a control plane for AI-run companies. Hire agents, delegate tasks, approve the risky ones, and watch the work happen. Start with a quickstart, or jump to any section below.</p>
  </div>

  <div class="card-grid" id="landing-cards"></div>
</section>

<!-- ─── Article view ─────────────────────────────────────── -->
<div id="article-view">
  <div id="body">
    <nav id="sidebar" aria-label="Documentation">
      <a class="sb-back" data-nav="home">
        <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M8 2 4 6l4 4"/></svg>
        All docs
      </a>
      <div id="sb-sections"></div>
    </nav>

    <main id="content">
      <div id="loading"><div class="spinner"></div><span>Loading…</span></div>
      <div id="error-state" style="display:none">
        <span>Could not load this guide.</span>
        <span id="error-detail" style="font-size:12px;color:var(--ash);margin-top:4px"></span>
      </div>
      <article id="article" style="display:none"></article>
      <div id="page-nav" style="display:none"></div>
    </main>
  </div>
</div>

<footer id="site-foot">
  <div class="foot-col">
    <h4>Quick links</h4>
    <div id="landing-quicklinks"></div>
  </div>
  <div class="foot-col">
    <h4>Resources</h4>
    <a href="https://github.com/paperclipai/paperclip" target="_blank" rel="noopener">GitHub</a>
    <a href="https://github.com/paperclipai/paperclip/releases" target="_blank" rel="noopener">Changelog</a>
  </div>
  <div class="foot-col">
    <h4>Community</h4>
    <a href="https://discord.gg/m4HZY7xNG3" target="_blank" rel="noopener">Discord</a>
    <a href="https://github.com/paperclipai/paperclip/issues" target="_blank" rel="noopener">Feedback</a>
    <a href="https://github.com/paperclipai/paperclip/discussions" target="_blank" rel="noopener">Discussions</a>
  </div>
  <div class="foot-colophon">
    <div class="foot-license">
      &copy; 2026 Paperclip Community. Documentation is licensed under <a href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank" rel="noopener">CC BY-NC-ND 4.0</a>
      — no commercial use without prior written permission.
    </div>
  </div>
</footer>

<script src="app.js" defer></script>
</body>
</html>