about.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>About Open Trends — Free Google Search Trend Analysis tool</title>
<meta name="description" content="Open Trends is a free, open-source browser app built by Sarth Jauhari that turns Google Keyword Planner exports into theme-level trend analysis for any category.">
<meta name="keywords" content="open trends, about, google keyword planner, trend analysis, search trends, keyword trends, free tool">
<meta name="author" content="Sarth Jauhari">
<meta name="robots" content="index, follow">
<link rel="icon" href="logo-short.svg" type="image/svg+xml">
<link rel="canonical" href="https://opentrends.win/about.html">
<meta name="theme-color" content="#1f2d4a">
<meta property="og:type" content="website">
<meta property="og:site_name" content="Open Trends">
<meta property="og:title" content="About Open Trends — Free Google Search Trend Analysis tool">
<meta property="og:description" content="Open Trends turns Google Keyword Planner exports into theme-level trend analysis for any category. Free, open source, runs in your browser.">
<meta property="og:url" content="https://opentrends.win/about.html">
<meta property="og:image" content="https://opentrends.win/og-image.png">
<meta property="og:image:secure_url" content="https://opentrends.win/og-image.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Open Trends — turn Google Keyword Planner exports into theme-level trend analysis">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="About Open Trends">
<meta name="twitter:description" content="A free, open-source browser app that turns Google Keyword Planner exports into theme-level trend analysis.">
<meta name="twitter:image" content="https://opentrends.win/og-image.png">
<meta name="twitter:image:alt" content="Open Trends — turn Google Keyword Planner exports into theme-level trend analysis">
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "AboutPage",
  "name": "About Open Trends",
  "url": "https://opentrends.win/about.html",
  "mainEntity": { "@type": "Person", "name": "Sarth Jauhari", "url": "https://github.com/saarth" }
}
</script>
<style>
  :root {
    color-scheme: light;
    --md-sys-color-primary: #6750A4;
    --md-sys-color-on-primary: #FFFFFF;
    --md-sys-color-primary-container: #EADDFF;
    --md-sys-color-on-primary-container: #21005D;
    --md-sys-color-secondary: #625B71;
    --md-sys-color-secondary-container: #E8DEF8;
    --md-sys-color-on-secondary-container: #1D192B;
    --md-sys-color-tertiary: #7D5260;
    --md-sys-color-on-tertiary: #FFFFFF;
    --md-sys-color-tertiary-container: #FFD8E4;
    --md-sys-color-on-tertiary-container: #31111D;
    --md-sys-color-error: #B3261E;
    --md-sys-color-background: #FFFBFE;
    --md-sys-color-on-background: #1C1B1F;
    --md-sys-color-surface: #FFFBFE;
    --md-sys-color-on-surface: #1C1B1F;
    --md-sys-color-surface-variant: #E7E0EC;
    --md-sys-color-on-surface-variant: #49454F;
    --md-sys-color-surface-container-lowest: #FFFFFF;
    --md-sys-color-surface-container-low: #F7F2FA;
    --md-sys-color-surface-container: #F3EDF7;
    --md-sys-color-surface-container-high: #ECE6F0;
    --md-sys-color-surface-container-highest: #E6E0E9;
    --md-sys-color-outline: #79747E;
    --md-sys-color-outline-variant: #CAC4D0;
    --md-sys-color-inverse-surface: #313033;
    --md-sys-color-inverse-on-surface: #F4EFF4;
    --bg: var(--md-sys-color-background);
    --bg-soft: var(--md-sys-color-surface-container-low);
    --panel: var(--md-sys-color-surface-container-lowest);
    --ink: var(--md-sys-color-on-surface);
    --ink-soft: var(--md-sys-color-on-surface-variant);
    --muted: var(--md-sys-color-on-surface-variant);
    --line: var(--md-sys-color-outline-variant);
    --line-strong: var(--md-sys-color-outline);
    --accent: var(--md-sys-color-primary);
    --accent-soft: var(--md-sys-color-primary-container);
    --gold: var(--md-sys-color-tertiary);
    --radius: 16px;
    --radius-sm: 12px;
    --font-sans: "Roboto", "Inter", "Helvetica Neue", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
    --font-display: "Roboto", "Inter", system-ui, sans-serif;
  }
  html[data-theme="dark"] {
    color-scheme: dark;
    --md-sys-color-primary: #D0BCFF;
    --md-sys-color-on-primary: #381E72;
    --md-sys-color-primary-container: #4F378B;
    --md-sys-color-on-primary-container: #EADDFF;
    --md-sys-color-secondary: #CCC2DC;
    --md-sys-color-secondary-container: #4A4458;
    --md-sys-color-on-secondary-container: #E8DEF8;
    --md-sys-color-tertiary: #EFB8C8;
    --md-sys-color-tertiary-container: #633B48;
    --md-sys-color-on-tertiary-container: #FFD8E4;
    --md-sys-color-background: #141218;
    --md-sys-color-on-background: #E6E1E5;
    --md-sys-color-surface: #141218;
    --md-sys-color-on-surface: #E6E1E5;
    --md-sys-color-surface-variant: #49454F;
    --md-sys-color-on-surface-variant: #CAC4D0;
    --md-sys-color-surface-container-lowest: #0F0D13;
    --md-sys-color-surface-container-low: #1D1B20;
    --md-sys-color-surface-container: #211F26;
    --md-sys-color-surface-container-high: #2B2930;
    --md-sys-color-surface-container-highest: #36343B;
    --md-sys-color-outline: #938F99;
    --md-sys-color-outline-variant: #49454F;
    --md-sys-color-inverse-surface: #E6E1E5;
    --md-sys-color-inverse-on-surface: #313033;
  }
  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  body { background: var(--bg); color: var(--ink); font-family: var(--font-sans); font-size: 14px; line-height: 1.55; min-height: 100vh; -webkit-font-smoothing: antialiased; transition: background-color .25s ease, color .25s ease; }
  h1 { font-family: var(--font-display); font-size: 40px; font-weight: 400; line-height: 1.1; letter-spacing: -0.02em; margin: 0; }
  h2 { font-family: var(--font-display); font-size: 22px; font-weight: 400; margin: 0 0 10px; }
  h3 { font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
  p { margin: 0 0 12px; color: var(--ink-soft); }
  a { color: var(--accent); text-decoration: none; }
  a:hover { text-decoration: underline; }
  .wrap { max-width: 980px; margin: 0 auto; padding: 0 40px 80px; }
  .header { padding: 40px 0 32px; background: var(--bg); border-bottom: 1px solid var(--line); }
  .header-inner { max-width: 980px; margin: 0 auto; padding: 0 40px; display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
  .brand-mark { display: flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.18em; color: var(--muted); margin-bottom: 18px; padding: 6px 12px 6px 6px; border-radius: 999px; background: var(--bg-soft); }
  .brand-mark .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
  .brand-logo { height: 108px; width: auto; max-width: 100%; display: block; }
  .header p { color: var(--muted); max-width: 640px; margin-top: 14px; font-size: 15px; line-height: 1.55; }
  .nav { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
  .nav a, .nav button {
    border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px; font-size: 13px; font-weight: 500;
    color: var(--ink); background: var(--panel); transition: all .2s; cursor: pointer; font-family: inherit;
  }
  .nav a:hover, .nav button:hover { background: var(--bg-soft); border-color: var(--line-strong); text-decoration: none; }
  .card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; margin-top: 24px; box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04); }
  .card-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
  .list { margin: 0; padding-left: 20px; }
  .list li { margin-bottom: 6px; color: var(--ink-soft); }
  .steps { counter-reset: step; list-style: none; padding: 0; }
  .steps li { counter-increment: step; padding: 10px 0 10px 44px; position: relative; border-bottom: 1px solid var(--line); color: var(--ink-soft); }
  .steps li:last-child { border-bottom: 0; }
  .steps li::before { content: counter(step); position: absolute; left: 0; top: 10px; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: var(--md-sys-color-on-primary); display: grid; place-items: center; font-size: 12px; font-weight: 600; }
  .kbd { display: inline-block; border: 1px solid var(--line); border-radius: 8px; padding: 2px 8px; font-size: 12px; background: var(--bg-soft); color: var(--ink); font-family: ui-monospace, Consolas, monospace; }
  .footer { color: var(--muted); font-size: 12px; margin-top: 40px; text-align: center; letter-spacing: 0.02em; }
  .footer a { color: var(--muted); }
  .footer a:hover { color: var(--ink); }
  .grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .qa { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 26px; margin-top: 16px; box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04); }
  .qa h2 { font-size: 18px; }
  .qa p:last-child { margin-bottom: 0; }
  .theme-fab {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 60;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: var(--panel);
    color: var(--ink);
    box-shadow: 0 4px 16px rgba(0,0,0,0.18);
    display: grid;
    place-items: center;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    transition: transform .2s ease, background .2s ease;
  }
  .theme-fab:hover { transform: scale(1.06); background: var(--bg-soft); }
  @media (max-width: 640px) { .wrap { padding: 0 20px 60px; } .header-inner { padding: 0 20px; } h1 { font-size: 30px; } .brand-logo { height: 72px; } .grid { grid-template-columns: 1fr; } }

</style>
<script>
  (function () {
    try {
      var stored = localStorage.getItem('opentrends-theme');
      var theme = stored || (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
      document.documentElement.setAttribute('data-theme', theme);
    } catch (e) { document.documentElement.setAttribute('data-theme', 'light'); }
  })();
</script>
</head>
<body>
<header class="header">
  <div class="header-inner">
    <div>
      <div class="brand-mark"><img src="logo-short.svg" alt="" width="14" height="14" style="display:block"> Trend intelligence</div>
      <a href="index.html" style="display:block"><img src="logo-full.svg" alt="OpenTrends" class="brand-logo" style="margin-bottom:14px"></a>
      <h1>About Open Trends</h1>
      <p>A local browser app that turns Google Keyword Planner exports into theme-level trend analysis for any category. You supply the category searches and the keyword buckets; Open Trends reports what is moving.</p>
    </div>
    <nav class="nav">
      <a href="index.html">App</a>
      <a href="faq.html">FAQ</a>
    </nav>
  </div>
</header>
<main class="wrap">
  <div class="card">
    <div class="card-head"><h3>What it does</h3></div>
    <p>Open Trends takes a Google Keyword Planner export (keywords plus monthly search volumes) and a dictionary of keyword buckets you define (themes), tags each search term against those buckets, and produces:</p>
    <ul class="list">
      <li>Theme-level size, share, latest month, short- and long-term growth</li>
      <li>Velocity map (short-term vs long-term growth, sized by search volume)</li>
      <li>Term-level drivers inside each theme</li>
      <li>Brand and product-type attribution</li>
      <li>Seasonality and monthly volume charts</li>
      <li>Top searches per theme</li>
      <li>A full Excel workbook and CSV/JSON exports</li>
    </ul>
    <p style="margin-top:12px">Everything runs in your browser. Your data is never uploaded anywhere.</p>
    <p style="margin-top:12px"><b>Free and open source.</b> No ads, no tracking, no accounts. A self-hostable version is available on <a href="https://github.com/saarth/OpenTrends" target="_blank" rel="noopener">GitHub</a>.</p>
  </div>

  <div class="grid">
    <div class="card">
      <div class="card-head"><h3>Inputs</h3></div>
      <ul class="list">
        <li><b>Category searches</b>  -  a Google Keyword Planner export (.xlsx, .xls or .csv) with a keyword column, an AMS / average monthly searches column, and monthly date columns.</li>
        <li><b>Keyword buckets (themes)</b>  -  a dictionary mapping each theme name to a Boolean query or a plain list of terms. Upload under <span class="kbd">Category definitions</span> or paste into the panel and press <span class="kbd">Apply dictionary</span>.</li>
        <li><b>Brands &amp; products (optional)</b>  -  brand and product-type dictionaries for a second attribution dimension. Upload them separately or as a combined file under <span class="kbd">Brand &amp; product dictionary</span>.</li>
      </ul>
    </div>
    <div class="card">
      <div class="card-head"><h3>Outputs</h3></div>
      <ul class="list">
        <li><b>Overview</b>  -  KPIs, velocity map, fastest-growing themes, coverage breakdown</li>
        <li><b>Theme growth</b>  -  per-theme size, share, growth, monthly chart</li>
        <li><b>Theme deep dive</b>  -  term contributions, risers/drags, brand &amp; product mix</li>
        <li><b>Terms</b>  -  term-level performance and keywords behind each term</li>
        <li><b>Brands &amp; products</b>  -  brand/product tables, spotlight, filters</li>
        <li><b>Top searches</b>, <b>Seasonality</b>, <b>Export</b></li>
      </ul>
    </div>
  </div>

  <div class="card">
    <div class="card-head"><h3>How to use it</h3></div>
    <ol class="steps">
      <li>Open <a href="index.html">the app</a>. A pre-computed sneakers &amp; footwear example is already loaded as a demo.</li>
      <li>Drop in a Keyword Planner export (.xlsx / .xls / .csv). Check the detected sheet, short/long windows and dedupe setting.</li>
      <li>(Optional) Load or upload your own theme dictionary under <span class="kbd">Category definitions</span>, and brand/product dictionaries under <span class="kbd">Brand &amp; product dictionary</span> (use the <span class="kbd">Load example …</span> buttons to start from the bundled sneakers set).</li>
      <li>(Optional) Adjust the context toggles: treat product words as search context, or also match bare descriptor searches.</li>
      <li>Click <span class="kbd">Run analysis</span>.</li>
      <li>Explore the tabs: Overview, Theme growth, Theme deep dive, Terms, Brands &amp; products, Top searches, Seasonality.</li>
      <li>Use <span class="kbd">Export &rarr; Download full Excel workbook</span> (or individual CSVs/JSON) for BI tools.</li>
      <li>To analyse your own category, upload or paste your own theme dictionary under <span class="kbd">Category definitions</span>, then re-run.</li>
    </ol>
  </div>

  <div class="card">
    <div class="card-head"><h3>Build themes, brands &amp; product types with an LLM</h3></div>
    <p>You can use any LLM (ChatGPT, Claude, Gemini, …) to draft your dictionaries, then paste or upload them into the app:</p>
    <ol class="list">
      <li>Export a sample of your Keyword Planner keywords (or describe the category) and paste it into the LLM.</li>
      <li>Ask for theme names with Boolean queries (OR, AND, NOT, NEAR/n, phrases, wildcards) or plain term lists, plus a brand alias list and a product-type list.</li>
      <li>Request the result as JSON in the app's dictionary shape (an object keyed by name; value is a query string or an array of terms), or as CSV/XLSX with <span class="kbd">Theme</span> / <span class="kbd">Query</span> columns.</li>
      <li>Paste into <span class="kbd">Category definitions</span> / the brand panels, or save and upload the file, then <span class="kbd">Apply dictionary</span> and re-run.</li>
    </ol>
    <p class="hint" style="margin-top:10px">Tip: share a few example keywords and the desired number of themes; ask the LLM to keep product words (shoes, boots, sandals, …) as context so searches like "running shoe" still match.</p>
  </div>

  <div class="card">
    <div class="card-head"><h3>About the author</h3></div>
    <p>Open Trends is built and maintained by Sarth Jauhari.</p>
    <div class="nav" style="justify-content:flex-start">
      <a href="https://github.com/saarth" target="_blank" rel="noopener">GitHub  -  @saarth</a>
      <a href="https://www.linkedin.com/in/saarth" target="_blank" rel="noopener">LinkedIn  -  /in/saarth</a>
    </div>
  </div>

  <p class="footer">Open Trends runs entirely in your browser. &middot; Built by Sarth Jauhari. <a href="faq.html">FAQ</a> &middot; <a href="index.html">App</a></p>
  <div class="nav" style="justify-content:center;margin-top:14px">
    <a href="https://github.com/saarth/OpenTrends" target="_blank" rel="noopener" aria-label="GitHub" title="GitHub"><svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor" aria-hidden="true"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a>
    <a href="https://www.linkedin.com/in/saarth" target="_blank" rel="noopener" aria-label="LinkedIn" title="LinkedIn"><svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor" aria-hidden="true"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.063 2.063 0 1 1 2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg></a>
  </div>
</main>
<button class="theme-fab" id="themeToggleBtn" type="button" aria-label="Toggle light/dark theme"></button>
<script>
  (function () {
    var btn = document.getElementById('themeToggleBtn');
    function sync() {
      var t = document.documentElement.getAttribute('data-theme') || 'light';
      if (btn) btn.textContent = t === 'dark' ? '☀' : '☾';
    }
    sync();
    if (btn) btn.addEventListener('click', function () {
      var cur = document.documentElement.getAttribute('data-theme') || 'light';
      var next = cur === 'dark' ? 'light' : 'dark';
      document.documentElement.setAttribute('data-theme', next);
      try { localStorage.setItem('opentrends-theme', next); } catch (e) {}
      sync();
    });
  })();
</script>
</body>
</html>