Files
Mark-VIII/payload/user/remote_access/pager-webui/www/index.html
T
bzuccaro 99e6d1e948 ui: recon card redesign, channel-map hover, Send to PineAP prefill, recon hardening
- Top 5 recon cards restyled as stat cards: value + sub-line + mini chart,
  consistent 190px anatomy; Handshakes links to the handshakes page;
  Previous Scans shows count/latest plus a compact picker + action row
- Channel map records lobe geometry (canvas.__reconLobes / __reconLobesHit);
  hovering lists the networks under the cursor, click pins the tooltip,
  mouseleave hides it; empty states hide the tooltip too
- Recon focus sidebar gains 'Send to PineAP — Twin this network': routes to
  Evil WPA (psk2/sae/owe from recon encryption) or OpenAP (with BSSID) and
  prefills the form; one-shot PineAPPrefill is consumed by the attack
  launcher and never auto-deploys or leaks into manual forms
- Existing Actions verified end-to-end and hardened: capture/stop handshake
  sync the auto-collect toggle, examine buttons disable while pending
- Recon resilience: loadDetail retries after failed render or 503 (no more
  permanently blank page), scan-list errors surface in the scan bar, poll
  guard prevents overlapping loads, chart draws are individually isolated
- Auto-collect toggle re-syncs from get_config on the slow poll so the UI
  tracks the pager's own settings
2026-08-18 23:49:49 -05:00

275 lines
12 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="light dark">
<title>WiFi Pineapple</title>
<link rel="icon" type="image/png" href="assets/logo.png">
<link rel="stylesheet" href="css/app.css?v=20260819-1">
<link rel="stylesheet" href="js/xterm.css">
</head>
<body>
<section id="login-screen">
<form id="login-form" class="login-card">
<img class="login-logo" src="assets/logo.png" alt="WiFi Pineapple">
<h2 class="login-title">WiFi Pineapple</h2>
<input id="login-password" class="login-field" type="password" placeholder="Password" autocomplete="current-password" required>
<p id="login-error" class="login-error"></p>
<button id="login-button" class="btn" type="submit">Login</button>
</form>
</section>
<div id="app" class="hidden">
<header id="topbar">
<img id="brand-logo" class="brand-logo" src="assets/logo.png" alt="WiFi Pineapple">
<span id="brand-text" class="brand-text">Mark VIII</span>
<span class="toolbar-spacer"></span>
<span id="live-status"></span>
<span id="health-status" class="health-chip"></span>
<div class="toolbar-action">
<button id="notifications-btn" class="toolbar-icon-btn" type="button" title="Notifications"
aria-label="Notifications" aria-haspopup="menu" aria-controls="notifications-menu" aria-expanded="false"></button>
<span id="notification-badge" class="notification-badge hidden" aria-hidden="true"></span>
<section id="notifications-menu" class="toolbar-menu notifications-menu hidden" role="menu" aria-label="Notifications">
<header class="toolbar-menu-header">
<span>Notifications</span>
<button id="notifications-clear" class="menu-link" type="button">Clear all</button>
</header>
<div id="notifications-list" class="notifications-list"></div>
</section>
</div>
<button id="terminal-btn" class="toolbar-icon-btn" type="button" title="Terminal" aria-label="Open Terminal"></button>
<button id="pager-btn" class="toolbar-icon-btn" type="button" title="Virtual Pager" aria-label="Open Virtual Pager"></button>
<div class="toolbar-action">
<button id="overflow-btn" class="toolbar-icon-btn" type="button" title="More options"
aria-label="More options" aria-haspopup="menu" aria-controls="overflow-menu" aria-expanded="false"></button>
<section id="overflow-menu" class="toolbar-menu overflow-menu hidden" role="menu" aria-label="More options">
<button class="toolbar-menu-item" type="button" data-menu-action="help" role="menuitem">
<span class="menu-icon" data-icon="help"></span><span>Help</span>
</button>
<button class="toolbar-menu-item" type="button" data-menu-action="updates" role="menuitem">
<span class="menu-icon" data-icon="update"></span><span>Check for Updates</span>
</button>
<button class="toolbar-menu-item internet-menu-item" type="button" data-menu-action="internet" role="menuitem">
<span class="menu-icon" data-icon="wifi"></span>
<span>Internet Connection<small id="internet-status">Checking…</small></span>
<span id="internet-status-dot" class="connection-dot checking" aria-hidden="true"></span>
</button>
<div class="toolbar-menu-divider" role="separator"></div>
<button class="toolbar-menu-item" type="button" data-menu-action="logout" role="menuitem">
<span class="menu-icon" data-icon="logout"></span><span>Logout</span>
</button>
<button class="toolbar-menu-item danger-item" type="button" data-menu-action="reboot" role="menuitem">
<span class="menu-icon" data-icon="reboot"></span><span>Reboot</span>
</button>
</section>
</div>
</header>
<div id="layout">
<nav id="rail"></nav>
<main id="content"></main>
</div>
<div id="terminal-panel" class="hidden">
<div id="terminal-bar">
<span>Terminal</span>
<button id="terminal-close" class="btn ghost">×</button>
</div>
<div id="terminal"></div>
</div>
<div id="pager-panel" class="hidden">
<div id="pager-bar">
<span>Virtual Pager</span>
<button id="pager-close" class="btn ghost">×</button>
</div>
<div id="pager-body">
<div id="pager-scale-wrapper" class="pager-scale-wrapper">
<table id="pager_ui" width="745" height="531" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="13">
<img src="assets/pager/virtual_pager_01.png" width="744" height="67" alt="">
</td>
<td>
<img src="assets/pager/spacer.gif" width="1" height="67" alt="">
</td>
</tr>
<tr>
<td colspan="2" rowspan="3">
<img src="assets/pager/virtual_pager_02.png" width="132" height="324" alt="">
</td>
<td colspan="9" style="position:relative;padding:0;margin:0;font-size:0;line-height:0;">
<!-- IMPORTANT: this is the live screen surface -->
<img id="pager" width="480" height="222" tabindex="0">
<!-- hidden canvas used to convert RGBA framebuffer -> PNG -->
<canvas id="pager_canvas" width="480" height="222" style="display:none;"></canvas>
<div hidden id="pager_error">
Lost connection to virtual pager
<br>
<button id="screen_retry">Reconnect</button>
</div>
</td>
<td colspan="2" rowspan="2">
<img src="assets/pager/virtual_pager_04.png" width="132" height="287" alt="">
</td>
<td>
<img src="assets/pager/spacer.gif" width="1" height="222" alt="">
</td>
</tr>
<tr>
<td colspan="9">
<img src="assets/pager/virtual_pager_05.png" width="480" height="65" alt="">
</td>
<td>
<img src="assets/pager/spacer.gif" width="1" height="65" alt="">
</td>
</tr>
<tr>
<td colspan="4">
<img src="assets/pager/virtual_pager_06.png" width="228" height="37" alt="">
</td>
<td rowspan="5">
<img class="pager-btn" src="assets/pager/LEFT.png" role="button" width="87" height="109" alt="">
</td>
<td rowspan="6">
<img src="assets/pager/virtual_pager_08.png" width="7" height="176" alt="">
</td>
<td rowspan="2">
<img class="pager-btn" src="assets/pager/UP.png" role="button" width="139" height="49" alt="">
</td>
<td rowspan="6">
<img src="assets/pager/virtual_pager_10.png" width="9" height="176" alt="">
</td>
<td colspan="2" rowspan="5">
<img class="pager-btn" src="assets/pager/RIGHT.png" role="button" width="86" height="109" alt="">
</td>
<td rowspan="6">
<img src="assets/pager/virtual_pager_12.png" width="56" height="176" alt="">
</td>
<td>
<img src="assets/pager/spacer.gif" width="1" height="37" alt="">
</td>
</tr>
<tr>
<td rowspan="5">
<img src="assets/pager/virtual_pager_13.png" width="73" height="139" alt="">
</td>
<td colspan="2" rowspan="3">
<img class="pager-btn" src="assets/pager/B_Button.png" role="button" width="115" height="44" alt="">
</td>
<td rowspan="5">
<img src="assets/pager/virtual_pager_15.png" width="22" height="139" alt="">
</td>
<td rowspan="3">
<img class="pager-btn" src="assets/pager/A_Button.png" role="button" width="115" height="44" alt="">
</td>
<td rowspan="5">
<img src="assets/pager/virtual_pager_17.png" width="35" height="139" alt="">
</td>
<td>
<img src="assets/pager/spacer.gif" width="1" height="12" alt="">
</td>
</tr>
<tr>
<td>
<img src="assets/pager/virtual_pager_18.png" width="139" height="11" alt="">
</td>
<td>
<img src="assets/pager/spacer.gif" width="1" height="11" alt="">
</td>
</tr>
<tr>
<td rowspan="2">
<img class="pager-btn" src="assets/pager/DOWN.png" role="button" width="139" height="49" alt="">
</td>
<td>
<img src="assets/pager/spacer.gif" width="1" height="21" alt="">
</td>
</tr>
<tr>
<td colspan="2" rowspan="2">
<img src="assets/pager/virtual_pager_20.png" width="115" height="95" alt="">
</td>
<td rowspan="2">
<img src="assets/pager/virtual_pager_21.png" width="115" height="95" alt="">
</td>
<td>
<img src="assets/pager/spacer.gif" width="1" height="28" alt="">
</td>
</tr>
<tr>
<td>
<img src="assets/pager/virtual_pager_22.png" width="87" height="67" alt="">
</td>
<td>
<img src="assets/pager/virtual_pager_23.png" width="139" height="67" alt="">
</td>
<td colspan="2">
<img src="assets/pager/virtual_pager_24.png" width="86" height="67" alt="">
</td>
<td>
<img src="assets/pager/spacer.gif" width="1" height="67" alt="">
</td>
</tr>
<tr>
<td>
<img src="assets/pager/spacer.gif" width="73" height="1" alt="">
</td>
<td>
<img src="assets/pager/spacer.gif" width="59" height="1" alt="">
</td>
<td>
<img src="assets/pager/spacer.gif" width="56" height="1" alt="">
</td>
<td>
<img src="assets/pager/spacer.gif" width="22" height="1" alt="">
</td>
<td>
<img src="assets/pager/spacer.gif" width="115" height="1" alt="">
</td>
<td>
<img src="assets/pager/spacer.gif" width="35" height="1" alt="">
</td>
<td>
<img src="assets/pager/spacer.gif" width="87" height="1" alt="">
</td>
<td>
<img src="assets/pager/spacer.gif" width="7" height="1" alt="">
</td>
<td>
<img src="assets/pager/spacer.gif" width="139" height="1" alt="">
</td>
<td>
<img src="assets/pager/spacer.gif" width="9" height="1" alt="">
</td>
<td>
<img src="assets/pager/spacer.gif" width="10" height="1" alt="">
</td>
<td>
<img src="assets/pager/spacer.gif" width="76" height="1" alt="">
</td>
<td>
<img src="assets/pager/spacer.gif" width="56" height="1" alt="">
</td>
<td></td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div id="toast-container"></div>
<script src="js/config.js"></script>
<script src="js/icons.js?v=20260818-7"></script>
<script src="js/api.js?v=20260817-4"></script>
<script src="js/chart.js?v=20260819-1"></script>
<script src="js/xterm.min.js"></script>
<script src="js/xterm-addon-fit.min.js"></script>
<script src="js/terminal.js"></script>
<script src="js/pager.js"></script>
<script src="js/views.js?v=20260819-1"></script>
<script src="js/app.js?v=20260819-1"></script>
</body>
</html>