275 lines
12 KiB
HTML
275 lines
12 KiB
HTML
<!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=20260811-9">
|
||
<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=20260811-6"></script>
|
||
<script src="js/api.js?v=20260817-4"></script>
|
||
<script src="js/chart.js"></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=20260818-2"></script>
|
||
<script src="js/app.js?v=20260811-9"></script>
|
||
</body>
|
||
</html>
|