# FlowGit — Landing Page

> **A terminal-grade, single-page landing site for FlowGit**, crafted strictly according to the **Axiom Design System** (`DESIGN.md`) and the technical core documented in `README.md`.

---

## ⚡ Quick Preview

You can view the site immediately without installing heavy dependencies:

### Option A: Direct Browser Open
Double-click `index.html` or open it with your browser:
```cmd
start index.html
```

### Option B: Local Web Server
If you prefer running a local HTTP server:
```cmd
npx serve . -l 3000
```
Then navigate to `http://localhost:3000`.

---

## 🎨 Axiom Design System Compliance

This site strictly follows the tokens and visual rules specified in `DESIGN.md`:

| Token / Spec | Value | Implementation |
|---|---|---|
| **Palette Canvas** | `#000000` (Void) | Main page background, nav surface, terminal canvas |
| **Primary Surface** | `#111111` (Carbon) | Feature card surfaces, app chrome, code containers |
| **Elevated Surface**| `#191919` (Graphite) | Case study cards, product mock sub-panels |
| **Hairline Dividers**| `#202020` (Iron) | Structural hairline borders & row dividers |
| **Secondary Borders**| `#3a3a3a` (Slate) | Interactive controls, ghost buttons |
| **Primary Accent** | `#da5c2c` (Ember) | Action CTAs, active tab underlines, graph HEAD highlights, and the 2px left border on case-study cards |
| **Typography** | BerkeleyMono / JetBrains Mono | Universal monospace grid across headers, body, nav, buttons, and tables |
| **Geometry** | `2px` corners | Applied to cards, buttons, inputs, panels. `9999px` strictly for status pills |
| **Shadows & Gradients**| Flat / None | No soft blur shadows, no neon gradients, zero decorative slop |

---

## 🚀 Key Interactive Features

1. **Live Blueprint DAG Graph Engine (SVG)**:
   - Interactive directed acyclic graph with topological commit ancestry.
   - Panning (drag canvas) & smooth mouse-wheel zooming (0.4x to 2.5x).
   - Parent-child cubic Bezier connector splines with branch color indicators.
   - Live Minimap Radar widget synced with viewport coordinates.
   - Click any commit node to slide open the **Commit Inspector Drawer** with file diff stats.
   - Toolbar with live commit search filter, zoom-to-fit, and jump-to-HEAD.

2. **Porcelain-v1 Staging Simulator**:
   - Interactive Staged / Unstaged / Untracked file matrix.
   - Stage, unstage, or batch-stage files with immediate index feedback.
   - Commit message input with live 72-character limit counter.

3. **Advanced Diff Viewer**:
   - Interactive toggle between **Unified** and **Side-by-Side (Split)** diff views.
   - Syntax-highlighted additions (`+`), deletions (`-`), and folded hunk headers.

4. **Branch Matrix & Stashes**:
   - Local/remote branch tracking with `↑ ahead / ↓ behind` upstream indicators.
   - Stash list with one-click action feedback.

5. **Terminal Code Tabs with One-Click Copy**:
   - `Portable (.exe)`, `Compiled Binaries (.zip)`, and `source build` instructions.
   - Instant clipboard copy with monospaced toast confirmation.

6. **Global Keyboard Shortcuts**:
   - `1` — Switch to Blueprint Graph tab
   - `2` — Switch to Porcelain Staging tab
   - `3` — Switch to Diff Viewer tab
   - `4` — Switch to Branch Matrix tab
   - `H` — Jump to HEAD commit in DAG
   - `F` — Zoom-to-fit canvas
   - `Esc` — Close Commit Inspector drawer

---

## 📁 File Structure

```
website/
├── index.html       # Semantic single-page HTML5 structure
├── styles.css       # Authoritative Axiom design tokens & layout
├── app.js           # Interactive DAG engine, tabs, diff toggle, staging
├── package.json     # Optional local preview runner
└── README.md        # Documentation and design specifications
```