av-planner/site/index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Diagrav — Plan your wiring before you buy a single cable</title>
  <meta name="description" content="Diagrav is a visual tool for planning AV and DAWless synth setups: drag devices onto a canvas, wire them up with real connector compatibility checking, and get an automatic shopping list." />
  <link rel="canonical" href="https://diagrav.com/" />
  <meta property="og:type" content="website" />
  <meta property="og:url" content="https://diagrav.com/" />
  <meta property="og:title" content="Diagrav" />
  <meta property="og:description" content="Plan your AV or DAWless synth wiring visually, catch incompatible connections before you buy anything, and get an automatic shopping list." />
  <link rel="stylesheet" href="style.css" />
</head>
<body>

  <nav class="nav">
    <div class="wrap">
      <a class="brand" href="#top"><span class="dot"></span>Diagrav</a>
      <div class="nav-right">
        <div class="nav-links">
          <a href="#features">Features</a>
          <a href="#canvas">How it works</a>
          <a href="#library">Library</a>
        </div>
        <div class="nav-auth">
          <a class="nav-login app-link" href="https://app.diagrav.com/">Log in</a>
          <a class="btn btn-primary btn-sm app-link" href="https://app.diagrav.com/">Sign up</a>
        </div>
      </div>
    </div>
  </nav>

  <header class="hero" id="top">
    <div class="wrap">
      <span class="eyebrow">🔌 Plan the whole rig before you buy anything</span>
      <h1>Wire up your gear <span class="accent">on screen</span><br>before you touch a cable</h1>
      <p class="lede">
        Diagrav is a visual planning tool for anyone wiring together audio/video gear or a
        DAWless synth setup. Drag devices onto a canvas, connect their ports, and let the app
        catch incompatible connections and total up your shopping list — before you've spent a dollar.
      </p>
      <div class="hero-shot">
        <img src="images/canvas.jpg" alt="A wired synth rig diagram in Diagrav, showing a MIDI keyboard, drum machine, synth, mixer, and studio monitors connected with labeled cables" />
      </div>
    </div>
  </header>

  <section id="features">
    <div class="wrap">
      <div class="section-head">
        <h2>Everything you need to plan a rig, nothing you don't</h2>
        <p>Built for the moment before a purchase — when you're still figuring out what actually connects to what.</p>
      </div>
      <div class="features">
        <div class="feature">
          <div class="icon">🖱️</div>
          <h3>Drag-and-drop canvas</h3>
          <p>Place devices from a library of ports and connectors, then draw cables between them exactly like you would on a whiteboard — except it remembers everything.</p>
        </div>
        <div class="feature">
          <div class="icon">✅</div>
          <h3>Real compatibility checking</h3>
          <p>Every connector type knows what it physically mates with. Try to wire an XLR into a 1/4" jack and the app tells you why not, instead of finding out at the store.</p>
        </div>
        <div class="feature">
          <div class="icon">🧾</div>
          <h3>Automatic shopping list</h3>
          <p>Every cable and device on the canvas rolls up into a bill of materials — grouped by cable type and length, with running costs, so you know exactly what to order.</p>
        </div>
        <div class="feature">
          <div class="icon">🎚️</div>
          <h3>Multi-cable bundles</h3>
          <p>A stereo pair or an 8-channel snake is really one purchase, not several. Bundle the individual runs together so the shopping list counts it the way you'd actually buy it.</p>
        </div>
        <div class="feature">
          <div class="icon">📚</div>
          <h3>A growing shared library</h3>
          <p>Connector types, cable types, and device templates are shared across everyone using the app — with your own private additions for anything niche or proprietary.</p>
        </div>
        <div class="feature">
          <div class="icon">🤝</div>
          <h3>Share &amp; collaborate</h3>
          <p>Share a diagram with view or edit access, keep a version history as it evolves, and pick up right where you left off.</p>
        </div>
      </div>
    </div>
  </section>

  <section id="canvas">
    <div class="wrap">

      <div class="showcase-row">
        <div class="showcase-copy">
          <div class="showcase-tag">The canvas</div>
          <h3>See your whole signal path at a glance</h3>
          <p>
            Drop a device onto the canvas, expand it to see its individual ports, and drag a
            connection from one port to another. Every wire is a real object — it knows which
            two ports it joins, what cable type it needs, and how long a run it is.
          </p>
          <ul>
            <li>Devices collapse to a compact view when you don't need the detail</li>
            <li>MIDI, audio, video, network, and power connectors, side by side</li>
            <li>Bundle related runs (like a stereo pair) into one visually distinct cable</li>
          </ul>
        </div>
        <div class="showcase-shot">
          <img src="images/canvas.jpg" alt="Wired device diagram on the Diagrav canvas" />
        </div>
      </div>

      <div class="showcase-row reverse">
        <div class="showcase-copy">
          <div class="showcase-tag">The shopping list</div>
          <h3>A bill of materials that updates itself</h3>
          <p>
            As you wire things up, Diagrav keeps a running bill of materials in the side
            panel — every cable type you'll need, grouped by length, with a running cost total.
            Bundled cables count as the single item you'll actually order.
          </p>
          <ul>
            <li>Cables grouped by type, then by length, so you know exactly what to buy and how many</li>
            <li>Device and cable costs roll up into one grand total</li>
            <li>Anything missing a cost is flagged, never silently treated as free</li>
          </ul>
        </div>
        <div class="showcase-shot">
          <img src="images/bom.jpg" alt="Bill of materials panel showing cables grouped by type and length with a running cost total" />
        </div>
      </div>

      <div class="showcase-row" id="library">
        <div class="showcase-copy">
          <div class="showcase-tag">The library</div>
          <h3>A device catalog that grows with you</h3>
          <p>
            Browse built-in devices and connectors by category or manufacturer, search across
            everything at once, and drop in your own custom gear when something isn't in the
            catalog yet — synths, mixers, adapters, whatever your rack actually has.
          </p>
          <ul>
            <li>Organize by category or by manufacturer, whichever matches how you think</li>
            <li>Add your own devices and connector types in minutes</li>
            <li>Submit your additions back to the shared catalog for everyone else to use</li>
          </ul>
        </div>
        <div class="showcase-shot">
          <img src="images/palette.jpg" alt="Device library panel organized by category, showing built-in and custom devices" />
        </div>
      </div>

    </div>
  </section>

  <section>
    <div class="wrap">
      <div class="strip">
        <h2>Stop guessing which cable you need</h2>
        <p>Plan the wiring first. Buy the right cables once.</p>
        <a class="btn btn-primary btn-lg strip-cta app-link" href="https://app.diagrav.com/">Sign up</a>
      </div>
    </div>
  </section>

  <footer>
    <div class="wrap" style="display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;">
      <span>Diagrav</span>
      <span>Built for planning AV and DAWless synth setups.</span>
    </div>
  </footer>

  <script>
    // site/ has no build step (served as-is, no per-environment templating),
    // so the app links above are hardcoded to production in the markup —
    // this is the one place that needs to differ on staging.diagrav.com,
    // rewritten at load time rather than maintaining a second copy of this
    // file. Defaults to production's app host for anything else (the real
    // domain, a bare file preview, etc.) — the safe assumption everywhere
    // that isn't specifically the staging hostname.
    (function () {
      var appHost = location.hostname === 'staging.diagrav.com' ? 'staging-app.diagrav.com' : 'app.diagrav.com';
      document.querySelectorAll('.app-link').forEach(function (a) {
        a.href = 'https://' + appHost + '/';
      });
    })();
  </script>

</body>
</html>