<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>{% if tool.label == 'Phantomline desktop' %}Install Phantomline{% else %}Install {{ tool.label }} for Phantomline{% endif %}</title>
<meta name="description" content="One-click install for {{ tool.label }}: power up Phantomline with {{ tool.subtitle }}." />
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<meta name="theme-color" content="#090b0c" />
{% if not indexable %}<meta name="robots" content="noindex" />{% endif %}
<link rel="icon" type="image/png" href="{{ '/static/phantomline-favicon.png' | versioned }}" />
<link rel="stylesheet" href="{{ '/static/landing.css' | versioned }}" />
<link rel="stylesheet" href="{{ '/static/article.css' | versioned }}" />
<link rel="stylesheet" href="{{ '/static/install.css' | versioned }}" />
</head>
<body>
<div class="wrap">
  <nav class="top">
    <a class="brand" href="/" aria-label="Phantomline home">
      <img class="brand-img" src="{{ '/static/phantomline-logo-primary.png' | versioned }}" alt="Phantomline" />
    </a>
    <div class="navlinks">
      <a href="/pricing">Pricing</a>
      <a href="/blog">Blog</a>
      <a class="cta secondary" href="/app">Open Studio</a>
    </div>
  </nav>
</div>
<div class="install-hero">
  <div id="mobileHint" style="display:none; margin-top:14px; padding:14px; background:#3a2f0c; border:1px solid #c9a93a; border-radius:8px; color:#fff8d4;">
    <strong>You're on mobile.</strong> {{ tool.label }} can't be installed on a phone. It runs on your desktop or laptop. Open this page on your computer (<a href="/app" style="color:#ffe48a; text-decoration:underline;">phantomline.xyz/install/{{ tool.label.split()[0]|lower }}</a>) to continue.
  </div>
  <h1 style="margin-top:14px;">Install {{ tool.label }}</h1>
  <p class="lead">{{ tool.subtitle }}</p>

  {% if tool.downloads %}
  <div class="download-hero">
    <h2>Easiest path: download &amp; double-click<span id="osPill" class="os-detected-pill" style="display:none;">your OS detected</span></h2>
    <p class="sub">{% if tool.downloads_note %}{{ tool.downloads_note }}{% else %}Pick the build for your OS. The installer is signed by the vendor, so Windows SmartScreen / macOS Gatekeeper will let it run after a click-through.{% endif %}</p>
    <div class="download-buttons" id="downloadButtons">
      {% for d in tool.downloads %}
      <a class="download-btn" data-os="{{ d.os }}" href="{{ d.url }}" target="_blank" rel="noopener">
        <span>{{ d.label }}</span>
        <span class="download-size">{{ d.size }}</span>
      </a>
      {% endfor %}
    </div>
  </div>
  {% endif %}

  <div class="install-options-tabs" role="tablist">
    <button class="active" data-pane="manual">Manual steps <span style="background:#22E7F5;color:#0a1722;padding:1px 6px;border-radius:8px;font-size:10px;margin-left:4px;font-weight:700;">RECOMMENDED</span></button>
    <button data-pane="oneline">One-line install (terminal)</button>
    <button data-pane="claude">Open in Claude Code</button>
  </div>

  <!-- ONE-LINE INSTALL -->
  <div id="pane-oneline" class="install-pane">
    <div class="install-block">
      <h3><span class="badge-os">Windows</span> PowerShell. Paste &amp; run.</h3>
      <pre class="cmd" id="cmdWin">{{ tool.windows_oneliner }}</pre>
      <button class="copy-btn" data-copy="cmdWin">Copy</button>
      <div style="margin-top:8px; color:#7a96ad; font-size:12px;">Open <strong>Windows Terminal</strong> or <strong>PowerShell</strong>, paste the line above, hit Enter. The script handles Python check, install, and model download.</div>
    </div>
    <div class="install-block">
      <h3><span class="badge-os">macOS</span> <span class="badge-os">Linux</span> Terminal. Paste &amp; run.</h3>
      <pre class="cmd" id="cmdMac">{{ tool.unix_oneliner }}</pre>
      <button class="copy-btn" data-copy="cmdMac">Copy</button>
      <div style="margin-top:8px; color:#7a96ad; font-size:12px;">Open <strong>Terminal</strong>, paste, hit Enter.</div>
    </div>
  </div>

  <!-- CLAUDE CODE PROMPT -->
  <div id="pane-claude" class="install-pane">
    <div class="install-block">
      <h3>Paste this into Claude Code (works in Cursor / Codex / Cline too)</h3>
      <p style="color:#cdd6df; font-size:14px; margin:0 0 12px;">
        Open <a href="https://claude.com/download" target="_blank" rel="noopener">Claude</a> (the desktop app or web), click <strong>+ New session</strong>, switch to the <strong>Code</strong> tab, then paste the prompt below as your first message. Claude does the install, downloads, and verification for you. No terminal commands you have to type yourself.
      </p>
      <div style="display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px;">
        <a class="download-btn" href="https://claude.com/download" target="_blank" rel="noopener" style="font-size:13px; padding:10px 16px;">
          <span>Get Claude (free)</span>
        </a>
        <a class="download-btn secondary" href="https://docs.claude.com/en/docs/claude-code/quickstart" target="_blank" rel="noopener" style="font-size:13px; padding:10px 16px;">
          <span>Claude Code quickstart</span>
        </a>
      </div>
      <pre class="cmd" id="cmdClaude">{{ tool.claude_prompt }}</pre>
      <button class="copy-btn" data-copy="cmdClaude">Copy prompt</button>
      <div style="margin-top:14px; padding:12px; background:#06141d; border-radius:6px; border:1px solid #1f3447;">
        <strong style="color:#22E7F5; font-size:13px;">What Claude will do for you:</strong>
        <ol style="color:#cdd6df; font-size:13px; margin:6px 0 0 18px; padding:0;">
          <li>Detect your OS</li>
          <li>Check whether prerequisites are installed (Python, Git, etc.)</li>
          <li>Install anything missing</li>
          <li>Install {{ tool.label }} and download model weights</li>
          <li>Verify the install worked</li>
          <li>Tell you when it's done</li>
        </ol>
        <div style="color:#7a96ad; font-size:12px; margin-top:6px;">
          You'll see Claude ask for permission before running each install command. You can approve all or step through.
        </div>
      </div>
    </div>
  </div>

  <!-- MANUAL -->
  <div id="pane-manual" class="install-pane active">
    {% for step in tool.manual_steps %}
    <div class="install-block">
      <h3><span class="step-num">{{ loop.index }}</span>{{ step.title }}</h3>
      <p style="color:#cdd6df; font-size:14px; margin:0 0 8px;">{{ step.body | safe }}</p>
      {% if step.command %}
      <pre class="cmd" id="cmdManual{{ loop.index }}">{{ step.command }}</pre>
      <button class="copy-btn" data-copy="cmdManual{{ loop.index }}">Copy</button>
      {% endif %}
      {% if step.expected %}
      <details style="margin-top:10px;">
        <summary style="cursor:pointer; color:#22E7F5; font-size:13px; padding:6px 0;">What you should see &raquo;</summary>
        <pre class="cmd" style="background:#011018; border-color:#0d2230; color:#7adfb8;">{{ step.expected }}</pre>
      </details>
      {% endif %}
      {% if step.screenshot %}
      <div style="margin-top:10px; border:1px dashed #1f3447; border-radius:6px; padding:10px; background:#020c12;">
        <img src="/static/install-screenshots/{{ step.screenshot }}" alt="Step {{ loop.index }} screenshot"
             style="width:100%; max-width:540px; border-radius:4px; display:block;"
             onerror="this.parentNode.innerHTML='<div style=&quot;color:#7a96ad; font-size:12px; text-align:center; padding:12px;&quot;>Screenshot coming soon</div>';" />
      </div>
      {% endif %}
    </div>
    {% endfor %}
  </div>

  <div class="install-block" style="margin-top:24px; border-color:#22E7F5;">
    <h3>Verify it worked</h3>
    <p style="color:#cdd6df; font-size:14px; margin:0 0 10px;">{{ tool.verify_text | safe }}</p>
    {% if tool.verify_command %}
    <pre class="cmd" id="cmdVerify">{{ tool.verify_command }}</pre>
    <button class="copy-btn" data-copy="cmdVerify">Copy</button>
    {% endif %}
    <div class="verify-row" style="margin-top:14px;">
      <strong style="color:#22E7F5;">Then:</strong>
      <span style="color:#cdd6df;">Reload <a href="/app" style="color:#22E7F5;">/app</a> &mdash; the readiness checklist will flip {{ tool.label }} to READY.</span>
    </div>
  </div>

  <div style="margin-top:20px; padding:14px; background:#06141d; border-radius:8px; border:1px solid #1f3447;">
    <strong style="color:#cdd6df;">Stuck?</strong>
    <span style="color:#7a96ad; font-size:13px;"> Email <a href="mailto:support@phantomline.xyz" style="color:#22E7F5;">support@phantomline.xyz</a> with your OS and the error and we'll send you exact steps.</span>
  </div>
</div>

<script src="{{ '/static/install.js' | versioned }}" defer></script>
</body>
</html>
