diff --git a/README.md b/README.md index 9e20041..ce751a4 100644 --- a/README.md +++ b/README.md @@ -1,41 +1,81 @@ -# DropPilot +
-> **Download:** Grab the latest Windows installer from -> [GitHub Releases](https://github.com/rxm96/droppilot/releases). + + + DropPilot + -DropPilot is a desktop app that automates Twitch Drops — quietly, in the -background, while staying transparent about what it's doing. It tracks your drop +

Automate Twitch Drops — quietly in the background, transparent about what it's doing.

+ +

+Build +Latest release +Platforms +License: MIT +

+ +

+Download for Windows +

+ +
+ +--- + +DropPilot is a desktop app that automates Twitch Drops. It tracks your drop inventory, picks and watches an eligible stream, switches when that stream goes -down, and (optionally) claims drops for you. +down, and (optionally) claims drops for you — all in the background, while +staying transparent about what it's doing. -## Features +[![Overview](docs/screenshots/overview.png)](docs/screenshots/overview.png) -- **Live inventory** — drop progress, claim status, and per-drop ETA in real time. -- **Target + priority** — build a priority list of games; the app focuses on the - most important actionable game and rotates through the list. -- **Auto-watch** — auto-selects a stream, auto-switches when the current one - disappears, and recovers from stalls (no watch-time progress) on its own. -- **Auto-claim** (optional) — claims completed drops and keeps an activity audit. -- **Warmup mode** (optional) — briefly watches a stream to discover drops when no - priority game is currently active. -- **Alerts** — new drops, auto-claim, drop ending soon, watch errors. -- **Browser-based login** — no credentials are stored by the app. -- **Demo mode** — explore the full UI without a live Twitch account. -- **Debug tools** — live logs, a state snapshot, and perf/CPU sampling (off by default). +## Contents -## Screenshots +- [Features](#features) +- [Screenshots](#screenshots) +- [Quick start](#quick-start) +- [How it works](#how-it-works) +- [Releases & updates](#releases--updates) +- [Configuration & data](#configuration--data) +- [Debug tools](#debug-tools) +- [Troubleshooting](#troubleshooting) +- [Tech stack](#tech-stack) +- [Acknowledgements](#acknowledgements) +- [License](#license) + +## Features -> Dark theme with demo data. + + + + + + + + + + + + + + + + + +
Live inventory
Every drop's progress, claim status and time left, in real time.		 Priority list
Rank your games; DropPilot works the highest one it can progress right now.
Hands-off watching
Picks an eligible stream, switches when one goes offline, and recovers when progress stalls.		 Auto-claim
Optionally claims finished drops for you and keeps a record of everything it's done.
Desktop alerts
New drops, auto-claims, stream switches, drops about to end, and watch errors.		 Discord / webhook
The same alerts in Discord (or any compatible webhook), with a one-click test send.
Browser-based login
Sign in through Twitch's own page; DropPilot never stores your credentials.		 Demo mode
Explore the whole interface with sample data — no Twitch account needed.
+ +DropPilot also stays out of your way while it works: a live status readout +(scanning, watching, recovering…), claim-retry countdowns, and a one-click prompt +to sign back in when your Twitch session expires. A **Debug** tab (off by +default) adds live logs and a state snapshot for when you need to dig in. -| Overview | Stats | -| --- | --- | -| [![Overview](docs/screenshots/overview.png)](docs/screenshots/overview.png) | [![Stats](docs/screenshots/stats.png)](docs/screenshots/stats.png) | -| **Inventory** | **Control** | -| [![Inventory](docs/screenshots/inventory.png)](docs/screenshots/inventory.png) | [![Control](docs/screenshots/control.png)](docs/screenshots/control.png) | +## Screenshots -## Tech stack +> Dark theme with demo data. (Overview is shown above.) -Electron 40 · React 19 · Vite 7 · TypeScript · Tailwind CSS v4 · Vitest +| Stats | Inventory | Control | +| --- | --- | --- | +| [![Stats](docs/screenshots/stats.png)](docs/screenshots/stats.png) | [![Inventory](docs/screenshots/inventory.png)](docs/screenshots/inventory.png) | [![Control](docs/screenshots/control.png)](docs/screenshots/control.png) | ## Quick start @@ -78,10 +118,11 @@ in [`docs/watch-flow.puml`](docs/watch-flow.puml). ## Releases & updates -Releases are published to GitHub Releases (Windows `.exe` + macOS artifacts) and +Releases are published to GitHub Releases (Windows `.exe` + a macOS `.dmg`) and built by CI when a `v*` tag is pushed. The app auto-updates on Windows and offers two channels — **stable** and **preview** — selectable in Settings → Updates, which -also shows the in-app release history. See `CONTRIBUTING.md` for how to cut a release. +also shows the in-app release history. See [`CONTRIBUTING.md`](CONTRIBUTING.md) for +how to cut a release. ## Configuration & data @@ -100,6 +141,10 @@ CPU snapshots appear in the Debug snapshot. - **App feels slow** → disable the Debug tab and restart. - **Need verbose logs** → enable Debug tools in Settings. +## Tech stack + +Electron 42 · React 19 · Vite 7 · TypeScript · Tailwind CSS v4 · Vitest + ## Acknowledgements DropPilot's drop-mining approach is heavily informed by @@ -114,5 +159,4 @@ reproduced in [`THIRD_PARTY_NOTICES.md`](THIRD_PARTY_NOTICES.md). ## License -MIT - +MIT — see [`LICENSE`](LICENSE). diff --git a/docs/brand/banner-dark.svg b/docs/brand/banner-dark.svg new file mode 100644 index 0000000..fdac493 --- /dev/null +++ b/docs/brand/banner-dark.svg @@ -0,0 +1,9 @@ + + + + + + + DropPilot + + diff --git a/docs/brand/banner-light.svg b/docs/brand/banner-light.svg new file mode 100644 index 0000000..82f9b3c --- /dev/null +++ b/docs/brand/banner-light.svg @@ -0,0 +1,9 @@ + + + + + + + DropPilot + + diff --git a/docs/brand/feat-alerts.svg b/docs/brand/feat-alerts.svg new file mode 100644 index 0000000..09972fc --- /dev/null +++ b/docs/brand/feat-alerts.svg @@ -0,0 +1,4 @@ + + + + diff --git a/docs/brand/feat-autoclaim.svg b/docs/brand/feat-autoclaim.svg new file mode 100644 index 0000000..6d6fbef --- /dev/null +++ b/docs/brand/feat-autoclaim.svg @@ -0,0 +1,4 @@ + + + + diff --git a/docs/brand/feat-demo.svg b/docs/brand/feat-demo.svg new file mode 100644 index 0000000..a41345f --- /dev/null +++ b/docs/brand/feat-demo.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/docs/brand/feat-discord.svg b/docs/brand/feat-discord.svg new file mode 100644 index 0000000..504155a --- /dev/null +++ b/docs/brand/feat-discord.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/docs/brand/feat-inventory.svg b/docs/brand/feat-inventory.svg new file mode 100644 index 0000000..817ce16 --- /dev/null +++ b/docs/brand/feat-inventory.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/docs/brand/feat-login.svg b/docs/brand/feat-login.svg new file mode 100644 index 0000000..ce3304f --- /dev/null +++ b/docs/brand/feat-login.svg @@ -0,0 +1,4 @@ + + + + diff --git a/docs/brand/feat-priority.svg b/docs/brand/feat-priority.svg new file mode 100644 index 0000000..f2058d2 --- /dev/null +++ b/docs/brand/feat-priority.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/docs/brand/feat-watching.svg b/docs/brand/feat-watching.svg new file mode 100644 index 0000000..a063e69 --- /dev/null +++ b/docs/brand/feat-watching.svg @@ -0,0 +1,3 @@ + + + diff --git a/docs/superpowers/plans/2026-06-15-readme-overhaul-brand-assets.md b/docs/superpowers/plans/2026-06-15-readme-overhaul-brand-assets.md new file mode 100644 index 0000000..129092a --- /dev/null +++ b/docs/superpowers/plans/2026-06-15-readme-overhaul-brand-assets.md @@ -0,0 +1,441 @@ +# README overhaul + brand assets Implementation Plan + +> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking. + +**Goal:** Ship a resolution-independent SVG logo (droplet + heading) and a fresher, cooler README with a full hero, download CTA, and an icon-backed feature grid. + +**Architecture:** Pure docs + brand-assets change. All visual richness lives in committed SVG files (one banner per theme, eight feature icons, one mark) because GitHub strips inline CSS/`style`/`class` from markdown. The README references them via ``, ``, shields badges, and a markdown/HTML table. No application source code changes. + +**Tech Stack:** Hand-authored SVG, GitHub-flavoured Markdown with the safe HTML subset (`
`, ``, ``, ``), shields.io. + +--- + +## Why no unit tests here + +The project's testing convention (`CLAUDE.md`) covers pure functions only — there is nothing executable in this change. `format:check` globs only `src/**/*.{ts,tsx,css}` and `scripts/release-notes/**/*.mjs`, so it does **not** touch `README.md`, `docs/**`, or `icons/**` — no Prettier gate applies to these files. Verification per task is therefore: (a) the SVG/HTML is well-formed XML, and (b) it renders as intended. Well-formedness check (Windows PowerShell, zero deps): + +```powershell +[xml](Get-Content -Raw ); 'OK' +``` + +It prints `OK` on success and throws on malformed markup. + +## File structure + +Create: + +- `icons/logo.svg` — the mark only (droplet + white arrow). Single source of truth for future app-icon/tray raster. +- `docs/brand/banner-dark.svg`, `docs/brand/banner-light.svg` — hero lockup (mark above wordmark), one per theme. +- `docs/brand/feat-inventory.svg`, `feat-priority.svg`, `feat-watching.svg`, `feat-autoclaim.svg`, `feat-alerts.svg`, `feat-discord.svg`, `feat-login.svg`, `feat-demo.svg` — eight monoline feature icons. + +Modify: + +- `README.md` — new hero, download CTA, feature table, light copy pass. + +Leave untouched: `icons/icon.png` and `icons/tray/` (app-icon/tray regeneration is a later, separate step). + +--- + +### Task 1: The mark — `icons/logo.svg` + +**Files:** +- Create: `icons/logo.svg` + +- [ ] **Step 1: Create the file** + +```svg + + + + +``` + +- [ ] **Step 2: Verify it is well-formed** + +Run: `[xml](Get-Content -Raw icons/logo.svg); 'OK'` +Expected: prints `OK`, no exception. + +- [ ] **Step 3: Eyeball it** + +Open `icons/logo.svg` in a browser (or VS Code SVG preview). Expected: a violet teardrop with a crisp white upward navigation arrow centered in the bulb. No clipping, no stray fills. + +- [ ] **Step 4: Commit** + +```bash +git add icons/logo.svg +git commit -m "feat(brand): add vector logo mark (icons/logo.svg)" +``` + +--- + +### Task 2: Hero banners — `docs/brand/banner-{dark,light}.svg` + +**Files:** +- Create: `docs/brand/banner-dark.svg` +- Create: `docs/brand/banner-light.svg` + +- [ ] **Step 1: Create `docs/brand/banner-dark.svg`** + +```svg + + + + + + + DropPilot + + +``` + +- [ ] **Step 2: Create `docs/brand/banner-light.svg`** (same geometry, light-theme colors) + +```svg + + + + + + + DropPilot + + +``` + +- [ ] **Step 3: Verify both are well-formed** + +Run: +```powershell +[xml](Get-Content -Raw docs/brand/banner-dark.svg); [xml](Get-Content -Raw docs/brand/banner-light.svg); 'OK' +``` +Expected: prints `OK`. + +- [ ] **Step 4: Eyeball both** + +Open each in a browser. Expected: mark centered on top, "Drop" + "Pilot" wordmark centered beneath (Pilot in violet), wordmark not clipped by the 320-wide viewBox. The light banner should be legible on a white page, the dark on a near-black page. + +- [ ] **Step 5: Commit** + +```bash +git add docs/brand/banner-dark.svg docs/brand/banner-light.svg +git commit -m "feat(brand): add dark/light README hero banners" +``` + +--- + +### Task 3: Feature icons — `docs/brand/feat-*.svg` + +All eight share root attributes `fill="none" stroke="#a78bfa" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"` so a single mid-tone violet line reads on both GitHub themes. Discord eye-dots override with a solid fill. + +**Files:** +- Create: `docs/brand/feat-inventory.svg`, `feat-priority.svg`, `feat-watching.svg`, `feat-autoclaim.svg`, `feat-alerts.svg`, `feat-discord.svg`, `feat-login.svg`, `feat-demo.svg` + +- [ ] **Step 1: `feat-inventory.svg`** + +```svg + + + + + + +``` + +- [ ] **Step 2: `feat-priority.svg`** + +```svg + + + + + + +``` + +- [ ] **Step 3: `feat-watching.svg`** + +```svg + + + +``` + +- [ ] **Step 4: `feat-autoclaim.svg`** + +```svg + + + + +``` + +- [ ] **Step 5: `feat-alerts.svg`** + +```svg + + + + +``` + +- [ ] **Step 6: `feat-discord.svg`** (eye-dots get a solid violet fill) + +```svg + + + + + + + + +``` + +- [ ] **Step 7: `feat-login.svg`** + +```svg + + + + +``` + +- [ ] **Step 8: `feat-demo.svg`** + +```svg + + + + + +``` + +- [ ] **Step 9: Verify all eight are well-formed** + +Run: +```powershell +Get-ChildItem docs/brand/feat-*.svg | ForEach-Object { [xml](Get-Content -Raw $_.FullName) | Out-Null; "$($_.Name) OK" } +``` +Expected: one ` OK` line per file, no exception. + +- [ ] **Step 10: Eyeball the set** + +Open the eight files (or drag the `docs/brand` folder into a browser). Expected: each is a recognizable violet line icon at 24px — list+check, two sort arrows, play triangle, circled check, bell, Discord mark with two solid eyes, browser window, flask. Each must still read at 20px (the README render size). + +- [ ] **Step 11: Commit** + +```bash +git add docs/brand/feat-inventory.svg docs/brand/feat-priority.svg docs/brand/feat-watching.svg docs/brand/feat-autoclaim.svg docs/brand/feat-alerts.svg docs/brand/feat-discord.svg docs/brand/feat-login.svg docs/brand/feat-demo.svg +git commit -m "feat(brand): add eight monoline feature icons" +``` + +--- + +### Task 4: README — hero, download CTA, feature grid, copy pass + +**Files:** +- Modify: `README.md` (replace the whole file with the content below) + +- [ ] **Step 1: Replace `README.md` with this exact content** + +````markdown +
+ + + + DropPilot + + +

Automate Twitch Drops — quietly in the background, transparent about what it's doing.

+ +

+Build +Latest release +Platforms +License: MIT +

+ +

+Download for Windows +

+ +
+ +--- + +DropPilot is a desktop app that automates Twitch Drops. It tracks your drop +inventory, picks and watches an eligible stream, switches when that stream goes +down, and (optionally) claims drops for you — all in the background, while +staying transparent about what it's doing. + +[![Overview](docs/screenshots/overview.png)](docs/screenshots/overview.png) + +## Contents + +- [Features](#features) +- [Screenshots](#screenshots) +- [Quick start](#quick-start) +- [How it works](#how-it-works) +- [Releases & updates](#releases--updates) +- [Configuration & data](#configuration--data) +- [Debug tools](#debug-tools) +- [Troubleshooting](#troubleshooting) +- [Tech stack](#tech-stack) +- [Acknowledgements](#acknowledgements) +- [License](#license) + +## Features + +
+ + + + + + + + + + + + + + + + +
Live inventory
Every drop's progress, claim status and time left, in real time.		 Priority list
Rank your games; DropPilot works the highest one it can progress right now.
Hands-off watching
Picks an eligible stream, switches when one goes offline, and recovers when progress stalls.		 Auto-claim
Optionally claims finished drops for you and keeps a record of everything it's done.
Desktop alerts
New drops, auto-claims, stream switches, drops about to end, and watch errors.		 Discord / webhook
The same alerts in Discord (or any compatible webhook), with a one-click test send.
Browser-based login
Sign in through Twitch's own page; DropPilot never stores your credentials.		 Demo mode
Explore the whole interface with sample data — no Twitch account needed.
+ +DropPilot also stays out of your way while it works: a live status readout +(scanning, watching, recovering…), claim-retry countdowns, and a one-click prompt +to sign back in when your Twitch session expires. A **Debug** tab (off by +default) adds live logs and a state snapshot for when you need to dig in. + +## Screenshots + +> Dark theme with demo data. (Overview is shown above.) + +| Stats | Inventory | Control | +| --- | --- | --- | +| [![Stats](docs/screenshots/stats.png)](docs/screenshots/stats.png) | [![Inventory](docs/screenshots/inventory.png)](docs/screenshots/inventory.png) | [![Control](docs/screenshots/control.png)](docs/screenshots/control.png) | + +## Quick start + +```bash +npm install +npm run dev # launches the app (Vite + Electron, hot reload) +``` + +The most common scripts: + +| Script | Purpose | +| --- | --- | +| `npm run dev` | Run the app in development (hot reload) | +| `npm run build` | Build the renderer (`dist/`) + main & preload (`dist-electron/`) | +| `npm test` | Run the test suite (Vitest); `npm run test:watch` to watch | +| `npm run lint` | ESLint | +| `npm run format` | Prettier (`format:check` to verify) | + +For local-dev details, testing conventions, commit style, and the release process, +see [`CONTRIBUTING.md`](CONTRIBUTING.md). + +## How it works + +DropPilot is a standard three-layer Electron app: + +- **`src/main`** — Electron main process: app lifecycle, the IPC handlers, JSON + persistence in the user-data directory, and the entire Twitch integration + (`src/main/twitch`: GQL client, high-level service, live PubSub events, channel + tracking, watch-minute pings). **All network calls happen here**, never in the + renderer. +- **`src/preload`** — the context-bridge that exposes `window.electronAPI`. +- **`src/renderer`** — the React UI. `shared/hooks/app/useAppModel.ts` is the + central hook that composes auth, inventory, channels, watch ping, priority, and + stats into the app state the views render. + +The trickiest subsystem is the **watch engine** (auto-select / auto-switch / stall +recovery / target suppression). It's documented in +[`docs/watch-engine.md`](docs/watch-engine.md), with an end-to-end sequence diagram +in [`docs/watch-flow.puml`](docs/watch-flow.puml). + +## Releases & updates + +Releases are published to GitHub Releases (Windows `.exe` + a macOS `.dmg`) and +built by CI when a `v*` tag is pushed. The app auto-updates on Windows and offers +two channels — **stable** and **preview** — selectable in Settings → Updates, which +also shows the in-app release history. See [`CONTRIBUTING.md`](CONTRIBUTING.md) for +how to cut a release. + +## Configuration & data + +Settings and stats are stored as JSON in the Electron user-data directory +(`settings.json`, `stats.json`) and managed through the in-app Settings view. + +## Debug tools + +The Debug tab is **off by default** to keep background work minimal. Enable it in +Settings → **Debug tools**. Debug logs are only collected while it's on; perf and +CPU snapshots appear in the Debug snapshot. + +## Troubleshooting + +- **"Not logged in"** → use **Login with browser** in the top bar. +- **App feels slow** → disable the Debug tab and restart. +- **Need verbose logs** → enable Debug tools in Settings. + +## Tech stack + +Electron 42 · React 19 · Vite 7 · TypeScript · Tailwind CSS v4 · Vitest + +## Acknowledgements + +DropPilot's drop-mining approach is heavily informed by +[**Twitch Drops Miner**](https://github.com/DevilXD/TwitchDropsMiner) by +[DevilXD](https://github.com/DevilXD). Much of the core behavior — stream-less +watch pings, drop/campaign validation, automatic channel switching, and +PubSub-based status tracking — is derived from that project. Huge thanks to +DevilXD and the Twitch Drops Miner contributors. + +Twitch Drops Miner is MIT-licensed (Copyright © 2024 DevilXD); its license is +reproduced in [`THIRD_PARTY_NOTICES.md`](THIRD_PARTY_NOTICES.md). + +## License + +MIT — see [`LICENSE`](LICENSE). +```` + +- [ ] **Step 2: Verify all referenced local assets exist** + +Run: +```powershell +'docs/brand/banner-dark.svg','docs/brand/banner-light.svg','docs/brand/feat-inventory.svg','docs/brand/feat-priority.svg','docs/brand/feat-watching.svg','docs/brand/feat-autoclaim.svg','docs/brand/feat-alerts.svg','docs/brand/feat-discord.svg','docs/brand/feat-login.svg','docs/brand/feat-demo.svg','docs/screenshots/overview.png','docs/screenshots/stats.png','docs/screenshots/inventory.png','docs/screenshots/control.png' | ForEach-Object { if (Test-Path $_) { "$_ OK" } else { throw "MISSING $_" } } +``` +Expected: one `... OK` per path; throws if any asset is missing. + +- [ ] **Step 3: Verify the old logo reference is gone and the new one is in** + +Use Grep: search `README.md` for `icons/icon.png` → expect **zero** matches. Search for `banner-dark.svg` → expect **one** match. Search for `docs/brand/feat-` → expect **eight** matches. + +- [ ] **Step 4: Render-check the README** + +Preview `README.md` (VS Code "Open Preview", or push the branch and view on GitHub — GitHub is the source of truth for ``/SVG-``/table rendering). Expected: + - Banner renders and swaps with the OS/GitHub light/dark theme. + - The four shields badges + the violet "Download for Windows" button all resolve and the button links to `/releases/latest`. + - The overview screenshot loads. + - The Features table shows two columns, each row with a violet icon + bold title + one line. + - The "Contents" links all jump to their sections (anchors unchanged). + +- [ ] **Step 5: Commit** + +```bash +git add README.md +git commit -m "docs(readme): new SVG hero, download CTA, and icon feature grid" +``` + +--- + +## Self-review (completed during planning) + +- **Spec coverage:** mark → Task 1; banners + `` swap → Task 2 + README Step 1; eight feature icons → Task 3; hero/badges/download CTA → README Step 1; feature table + mini-icons → README Step 1; copy pass + retained sections → README Step 1; out-of-scope (icon.png/tray, translation, source) → not touched. No gaps. +- **Placeholder scan:** none — every SVG and the full README are spelled out. +- **Type/name consistency:** every `docs/brand/feat-*.svg` filename created in Task 3 matches exactly the eight `` paths in README Step 1; banner filenames match the `` sources; `icons/logo.svg` is created but intentionally not yet referenced by README (it is the source for the later app-icon step). +- **GitHub-safety:** no inline `style`/`class` anywhere; visuals are committed SVGs + shields + a table; ``/`align`/`width` are within GitHub's allowed HTML subset. diff --git a/docs/superpowers/specs/2026-06-15-readme-overhaul-brand-design.md b/docs/superpowers/specs/2026-06-15-readme-overhaul-brand-design.md new file mode 100644 index 0000000..99389e5 --- /dev/null +++ b/docs/superpowers/specs/2026-06-15-readme-overhaul-brand-design.md @@ -0,0 +1,146 @@ +# README overhaul + brand assets — design + +**Date:** 2026-06-15 +**Branch:** `docs/readme-overhaul` +**Status:** approved (brainstorm), pending implementation plan + +## Goal + +Give DropPilot a "stable" logo and a fresher, cooler-looking README. "Stable" +means resolution-independent: one SVG source the mark is drawn from, so it stays +crisp from a 16px tray icon to a 1024px app icon to the README header, and stays +visually consistent everywhere. The README gets a full hero, a download CTA, and +a feature grid, with the copy tightened. + +App-icon (`icon.png`) and tray-icon regeneration are **explicitly out of scope** +for this pass — handled later as its own step. This pass produces the vector +sources so that follow-up is a pure raster step. + +## The mark + +A water **droplet** (the "Drop") with a white **navigation arrow** inside it (the +"Pilot" / heading). Filled execution — the most robust at tiny sizes and on any +background, including a transparent tray. + +Canonical geometry (24×24 viewBox), reused verbatim everywhere: + +``` +droplet: M12 2 C12 2 5 9 5 14 a7 7 0 1 0 14 0 C19 9 12 2 12 2 Z +arrow: M12 9 L15.5 18.5 L12 16 L8.5 18.5 Z +``` + +Colors (from the app's `--dp-*` tokens): + +| Use | Dark | Light | +| ------------ | ------------------------------ | ------------------------------- | +| Droplet fill | `#a78bfa` (`--dp-accent` dark) | `#7c5fe6` (`--dp-accent` light) | +| Arrow fill | `#ffffff` | `#ffffff` | + +The arrow is a solid white fill on top of the droplet in both themes (white reads +on both violets). No gradients, no filters — flat fills only, so it rasterizes +cleanly later. + +## Wordmark + +"Drop" + "Pilot" as a two-tone wordmark: + +- "Drop" → `#e6edf3` (dark) / `#1a1c1f` (light) +- "Pilot" → `#a78bfa` (dark) / `#7c5fe6` (light) +- Weight 500, slight negative letter-spacing (~-0.5px). Font: the SVG bakes in a + generic sans (`font-family` system stack) since GitHub won't load a webfont + into an ``-referenced SVG. + +## New asset files + +- `icons/logo.svg` — the mark only (droplet + arrow), dark-theme colors, square + viewBox. Single source of truth; the future app-icon/tray raster derives from + this. +- `docs/brand/banner-dark.svg` and `docs/brand/banner-light.svg` — the hero + lockup: mark above the "DropPilot" wordmark, centered (matches the approved + mockup). One file per theme. `alt="DropPilot"`. +- `docs/brand/feat-*.svg` — eight monoline feature icons (24×24, stroke + `#a78bfa`, `stroke-width` 2, round caps, no fill — a mid-tone violet line reads + on both GitHub themes). One file per feature (see grid below). Tabler-outline + shapes are the visual reference. + +## README structure + +Centered hero (HTML `
`, the only HTML GitHub reliably +renders): + +1. **Banner** via `` so GitHub swaps dark/light automatically: + ```html + + + DropPilot + + ``` +2. **Tagline** (markdown text, stays selectable/SEO): "Automate Twitch Drops — + quietly in the background, transparent about what it's doing." +3. **Badges** — keep the existing shields (build, latest release, platforms, + license). +4. **Download CTA** — a shields `for-the-badge` styled link to the latest + release, e.g. `https://img.shields.io/badge/⬇_Download_for_Windows-7c5fe6?style=for-the-badge` linking to `/releases/latest`. Looks like a button, no CSS needed. +5. **Screenshot** — the existing `docs/screenshots/overview.png`. + +Then the body sections. + +### Features — table + mini-icons + +A 2-column markdown table; each cell = `` mini-icon + **bold +title** + one line. Markdown tables and per-cell `` both render on GitHub; +the icons carry their own styling internally (so no stripped CSS). Eight +features, 4 rows × 2: + +| # | Title | One-liner | Icon ref | +| --- | ------------------- | ---------------------------------------------------------------- | ------------- | +| 1 | Live inventory | Every drop's progress, claim status and time left, in real time. | list-check | +| 2 | Priority list | Rank your games; it works the highest one it can progress now. | arrows-sort | +| 3 | Hands-off watching | Picks a stream, switches on offline, recovers on stall. | player-play | +| 4 | Auto-claim | Claims finished drops and keeps a record of everything. | circle-check | +| 5 | Desktop alerts | New drops, auto-claims, switches, drops ending, errors. | bell | +| 6 | Discord / webhook | The same alerts in Discord or any compatible webhook. | brand-discord | +| 7 | Browser-based login | Sign in on Twitch's own page; credentials never stored. | browser | +| 8 | Demo mode | Explore the whole UI with sample data, no account needed. | flask | + +"Stays transparent", "Debug tools", and Windows auto-update remain as prose / +their existing sections (transparency is already carried by the tagline + +intro). Warmup mode stays gone. + +### Remaining sections + +Keep the current set (Quick start, How it works, Releases & updates, +Configuration & data, Debug tools, Troubleshooting, Tech stack, +Acknowledgements, License). Light copy pass only: tighten wording, kill +redundancy, verify facts (Electron 42 / React 19 / Vite 7 are already correct). +The "Contents" TOC is updated if anchors change. + +## GitHub rendering constraints (the load-bearing decisions) + +- GitHub **strips `style` attributes, `class`, and `