compare.html

<!DOCTYPE html>
<html lang="en" data-theme="dark">
<head>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/svg+xml" href="favicon.svg">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Compare Variants — PromptLean</title>
  <meta name="description" content="Compare Lean, Balanced, and Max Quality prompt variants side by side.">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="assets/css/main.css">
</head>
<body>

<nav>
  <div class="nav-inner">
    <a href="index.html" class="nav-logo">
      <img src="assets/img/logo.svg" alt="PromptLean" class="nav-logo-icon" style="border-radius:7px;">
      PromptLean
    </a>
    <div class="nav-links">
      <a href="browse.html" class="nav-link">Browse</a>
      <a href="compare.html" class="nav-link active">Compare</a>
      <a href="about.html" class="nav-link">About</a>
      <a href="contribute.html" class="nav-link">Contribute</a>
    </div>
    <div class="nav-actions">
      <a href="https://github.com/kishormorol/promptlean" target="_blank" rel="noopener" class="github-star-btn">
        <svg viewBox="0 0 16 16" fill="currentColor"><path d="M8 .25a7.75 7.75 0 1 0 0 15.5A7.75 7.75 0 0 0 8 .25Zm0 1.5a6.25 6.25 0 1 1 0 12.5A6.25 6.25 0 0 1 8 1.75Zm-.25 3.25a.75.75 0 0 1 .5 0l.963 2.97 3.124.022a.75.75 0 0 1 .44 1.354l-2.527 1.82.972 2.95a.75.75 0 0 1-1.154.838L8 12.845l-2.068 1.414a.75.75 0 0 1-1.154-.838l.972-2.95-2.527-1.82a.75.75 0 0 1 .44-1.354l3.124-.022L7.75 5Z"/></svg>
        <span>Star</span><span class="gh-star-sep">|</span><span id="gh-stars"></span>
      </a>
      <button class="theme-toggle" id="theme-toggle" title="Toggle theme">☀</button>
    </div>
  </div>
</nav>

<main class="page-content">
  <div class="container">

    <div class="mb-6">
      <h1 style="font-size: 1.75rem; margin-bottom: 6px;">Compare Variants</h1>
      <p>See Lean, Balanced, and Max Quality side by side. Choose when each makes sense.</p>
    </div>

    <!-- Selector -->
    <div class="mb-6" style="max-width: 480px;">
      <select id="prompt-selector" class="search-input" style="padding: 10px 14px; cursor: pointer;">
        <option value="">— Loading prompts... —</option>
      </select>
    </div>

    <!-- Placeholder -->
    <div id="compare-placeholder" class="empty-state" style="padding: 80px 20px;">
      <div class="empty-state-icon">⇄</div>
      <h3>Pick a prompt to compare</h3>
      <p>Select any prompt above to see all three variants side by side.</p>
    </div>

    <!-- Compare area -->
    <div id="compare-area" class="hidden">

      <div id="compare-title" class="mb-4"></div>
      <div id="savings-summary" class="mb-4"></div>

      <div class="compare-grid" id="compare-cols" style="grid-template-columns: 1fr 1fr 1fr; gap: 12px;"></div>

      <div style="margin-top: 16px; font-size: 0.8125rem; color: var(--text-3); text-align: center;">
        Click ⧉ to copy a variant. Tokens shown are approximate (GPT-3 tokenizer).
      </div>
    </div>

  </div>
</main>

<footer>
  <div class="footer-inner">
    <div class="footer-left">
      <span>⚡ PromptLean</span>
      <span>·</span>
      <span>Open source, MIT license</span>
    </div>
    <div class="footer-links">
      <a href="about.html" class="footer-link">About</a>
      <a href="contribute.html" class="footer-link">Contribute</a>
      <a href="https://github.com/kishormorol/promptlean/blob/main/ATTRIBUTION.md" class="footer-link" target="_blank">Attribution</a>
      <a href="https://github.com/kishormorol/promptlean" class="footer-link" target="_blank">GitHub</a>
    </div>
  </div>
</footer>

<div id="toast"></div>
<script src="assets/js/main.js"></script>
<script src="assets/js/compare.js"></script>

<style>
@media (max-width: 900px) {
  #compare-cols { grid-template-columns: 1fr !important; }
}
</style>
</body>
</html>