release: Mark VIII 1.0
This commit is contained in:
c4ch3c4d3
@@ -0,0 +1,108 @@
|
||||
# Design: PineAP pages — Mark VII layout
|
||||
|
||||
Date: 2026-08-11
|
||||
Status: Approved
|
||||
|
||||
## Problem
|
||||
|
||||
The PineAP section of the Pager WebUI (8 tabs) uses the generic Pager WebUI card
|
||||
layout (`.section`, `.card`, `.tabbar`). The user wants the PineAP pages to look
|
||||
like the WiFi Pineapple Mark VII PineAP page: the `pineap-title-card-container`
|
||||
title-card anatomy (20px card titles with clickable title links, centered 24px
|
||||
values), a full-width Passive/Active/Advanced button group, and Mk7-style section
|
||||
cards. Scope is limited to the PineAP pages (all 8 tabs); the rest of the app and
|
||||
all behavior are unchanged.
|
||||
|
||||
## Reference (extracted from Mark VII firmware bundle)
|
||||
|
||||
The Mk7 PineAP page styles (verbatim class semantics from `mk7-main.js`):
|
||||
|
||||
```css
|
||||
.pineap-title-card-container { display:flex; width:100%; flex-wrap:wrap; justify-content:space-between; }
|
||||
.pineap-title-card { flex:1; }
|
||||
.pineap-card-title { font-size:20px; display:flex; align-items:center; margin-bottom:10px; }
|
||||
.pineap-card-title-link { color:inherit; text-decoration:none; } :visited inherit; :hover underline
|
||||
.pineap-card-title-content { display:flex; justify-content:center; align-items:center; font-size:24px; }
|
||||
.pineap-card-button-group { width:100%; height:30px; }
|
||||
.pineap-card-button { width:100%; }
|
||||
.pineap-card-settings, .pineap-card-pool, .pineap-card-handshakes, .pineap-card-inject { flex:1; }
|
||||
.pineap-handshakes-none { display:flex; justify-content:center; font-style:italic; color:grey; }
|
||||
```
|
||||
|
||||
The Recon page in this codebase already replicates this pattern as `recon-*`
|
||||
(`.recon-title-card-container`, `.recon-title-card`, `.recon-card-title-link`,
|
||||
`.recon-card-title-content`) — a proven precedent.
|
||||
|
||||
## Design
|
||||
|
||||
### 1. Layout vocabulary in `app.css`
|
||||
|
||||
Add the Mk7 `.pineap-*` classes above, using the codebase's design tokens where
|
||||
the Mk7 used hardcoded colors (e.g., `.pineap-handshakes-none` uses `var(--muted)`
|
||||
for the italic grey text). Card background/shadow come from the existing
|
||||
`.card`-like surface treatment (`var(--surface)` + `var(--shadow)`), applied to a
|
||||
new `.pineap-title-card` surface so title cards match the app's cards.
|
||||
|
||||
### 2. Overview tab (full Mk7 rebuild)
|
||||
|
||||
Three rows, each a `.pineap-title-card-container`:
|
||||
|
||||
- **Row 1 — stat title cards:** three `.pineap-title-card` cards.
|
||||
Total SSIDs in Pool (link → `#/pineap/impersonation`), Clients Connected (link →
|
||||
`#/pineap/clients`), Handshakes Captured (link → `#/pineap/evilwpa`). Each has a
|
||||
20px `.pineap-card-title-link` and a centered 24px `.pineap-card-title-content`
|
||||
value. Data and 5s polling unchanged from the current implementation.
|
||||
- **Row 2 — mode + quick settings:** a wide mode card containing the mode badge,
|
||||
the Passive/Active/Advanced `.pineap-card-button-group` (styled as the Mk7
|
||||
30px group; reuses the existing `.seg-btn` logic) and the mode description
|
||||
line; beside it a `.pineap-card-settings` Quick Settings card (Capture SSIDs
|
||||
to Pool, Advertise AP Impersonation Pool).
|
||||
Preset behavior unchanged (PineAP master + Karma only; `karmaOn` tracking;
|
||||
`modePending` guard; karma-off wins precedence).
|
||||
- **Row 3 — status title cards:** Karma, Open Network, Evil WPA, Evil Enterprise
|
||||
as four `.pineap-title-card` cards with `.pineap-card-title` headings and
|
||||
Configure links (to `#/pineap/open`, `#/pineap/evilwpa`, `#/pineap/enterprise`).
|
||||
|
||||
### 3. Other seven tabs
|
||||
|
||||
Same Mk7 card anatomy, existing tab bar retained as navigation:
|
||||
|
||||
- **Clients (`#/pineap/clients`):** a `.pineap-title-card-container` with a
|
||||
"Clients Connected" count `.pineap-title-card` above the clients table card.
|
||||
- **Impersonation (`#/pineap/impersonation`):** a "Total SSIDs in Pool" count
|
||||
`.pineap-title-card` (link → pool section) plus the `.pineap-card-pool` pool
|
||||
list card (add/clear, advertise/collect toggles, SSID table).
|
||||
- **Open AP (`#/pineap/open`):** toggle list and info in a `.pineap-card-settings`
|
||||
card with a `.pineap-card-title` heading.
|
||||
- **Evil WPA (`#/pineap/evilwpa`):** config form in a card with `.pineap-card-title`;
|
||||
the handshake capture list becomes `.pineap-card-handshakes` with the
|
||||
`.pineap-handshakes-none` empty state.
|
||||
- **Enterprise (`#/pineap/enterprise`):** enabled/auth toggles in a settings card;
|
||||
Basic/Challenge data tables in `.pineap-card-inject`-style cards.
|
||||
- **Filtering (`#/pineap/filtering`):** client/SSID filter cards with
|
||||
`.pineap-card-title` headings (mode selector + entry tables).
|
||||
- **APs (`#/pineap/aps`):** the AP scan table card with a `.pineap-card-title`
|
||||
heading.
|
||||
|
||||
### 4. Behavior unchanged
|
||||
|
||||
No API or logic changes. All toggles, tables, preset/mode logic, and actions keep
|
||||
their current behavior. The PineAP tab bar (8 tabs) remains the navigation.
|
||||
|
||||
## Files touched
|
||||
|
||||
- `payload/user/general/pager-webui/www/css/app.css` — add `.pineap-*` classes.
|
||||
- `payload/user/general/pager-webui/www/js/views.js` — rebuild the markup of the
|
||||
8 PineAP tab renderers to the Mk7 card anatomy.
|
||||
|
||||
No backend changes. No test-module changes.
|
||||
|
||||
## Verification
|
||||
|
||||
1. JS delimiter balance check (Python checker; no node available).
|
||||
2. All 13 backend unittest modules pass (unchanged).
|
||||
3. Deploy via `scripts/deploy.ps1` (password supplied securely), restart
|
||||
`/etc/init.d/pagerwebui`.
|
||||
4. On-device walk of all 8 PineAP tabs: title cards render with clickable links,
|
||||
counts populate on the 5s poll, mode toggle still applies presets, tables and
|
||||
forms still work.
|
||||
Reference in New Issue
Block a user