723 lines
36 KiB
HTML
723 lines
36 KiB
HTML
|
{% extends "base.html" %}
|
||
|
|
{% block title %}Remote Monitor Station - AUTARCH{% endblock %}
|
||
|
|
|
||
|
|
{% block content %}
|
||
|
|
<div class="page-header">
|
||
|
|
<h1>Remote Monitoring Station</h1>
|
||
|
|
<p style="margin:0;font-size:0.85rem;color:var(--text-secondary)">
|
||
|
|
Connect and control remote WiFi monitoring devices via .piap profiles.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Device Selector -->
|
||
|
|
<div class="section" style="margin-bottom:1rem">
|
||
|
|
<div style="display:flex;gap:0.5rem;align-items:center;flex-wrap:wrap">
|
||
|
|
<select id="piap-select" onchange="rmLoadPiap()" style="min-width:200px;padding:0.4rem">
|
||
|
|
<option value="">— Select Device —</option>
|
||
|
|
{% for p in piap_files %}
|
||
|
|
<option value="{{ p.filename }}">{{ p.name }}</option>
|
||
|
|
{% endfor %}
|
||
|
|
<option value="__new__">+ Create New</option>
|
||
|
|
</select>
|
||
|
|
<button class="btn btn-primary" id="rm-connect-btn" onclick="rmConnect()" disabled>Connect</button>
|
||
|
|
<button class="btn" id="rm-disconnect-btn" onclick="rmDisconnect()" disabled style="display:none">Disconnect</button>
|
||
|
|
<span id="rm-conn-status" style="font-size:0.85rem;color:var(--text-secondary)"></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Device Panel (hidden until loaded) -->
|
||
|
|
<div id="rm-device-panel" style="display:none">
|
||
|
|
|
||
|
|
<!-- Device Info Bar -->
|
||
|
|
<div class="section" style="margin-bottom:1rem;padding:0.5rem 1rem;display:flex;gap:2rem;flex-wrap:wrap;font-size:0.85rem" id="rm-device-info-bar">
|
||
|
|
<span><strong>Model:</strong> <span id="rm-model"></span></span>
|
||
|
|
<span><strong>OS:</strong> <span id="rm-os"></span></span>
|
||
|
|
<span><strong>Chipset:</strong> <span id="rm-chipset"></span></span>
|
||
|
|
<span><strong>Host:</strong> <span id="rm-host"></span></span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Sub-tab bar (built dynamically from .piap) -->
|
||
|
|
<div class="tab-bar" id="rm-tab-bar">
|
||
|
|
<button class="tab active" onclick="rmTab('radios')">Radios</button>
|
||
|
|
<!-- Additional tabs built from features -->
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- ==================== RADIOS TAB ==================== -->
|
||
|
|
<div class="rm-tab-panel" id="rm-tab-radios">
|
||
|
|
<div id="rm-radios-container"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- ==================== CAPTURE TAB ==================== -->
|
||
|
|
<div class="rm-tab-panel hidden" id="rm-tab-capture">
|
||
|
|
<div class="section">
|
||
|
|
<h2>Packet Capture</h2>
|
||
|
|
<div style="display:flex;gap:0.5rem;align-items:center;margin-bottom:1rem;flex-wrap:wrap">
|
||
|
|
<label>Radio:</label>
|
||
|
|
<select id="rm-cap-radio" style="padding:0.4rem"></select>
|
||
|
|
<button class="btn btn-primary" onclick="rmCaptureStart()">Start Capture</button>
|
||
|
|
<button class="btn btn-danger" onclick="rmCaptureStop()">Stop Capture</button>
|
||
|
|
</div>
|
||
|
|
<div id="rm-capture-status" style="font-size:0.85rem;color:var(--text-secondary);margin-bottom:0.5rem"></div>
|
||
|
|
<pre id="rm-capture-output" style="max-height:400px;overflow:auto;background:var(--bg-secondary);padding:1rem;border-radius:4px;font-size:0.8rem"></pre>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- ==================== SCAN TAB ==================== -->
|
||
|
|
<div class="rm-tab-panel hidden" id="rm-tab-scan">
|
||
|
|
<div class="section">
|
||
|
|
<h2>WiFi Scan</h2>
|
||
|
|
<div style="display:flex;gap:0.5rem;align-items:center;margin-bottom:1rem;flex-wrap:wrap">
|
||
|
|
<label>Radio:</label>
|
||
|
|
<select id="rm-scan-radio" style="padding:0.4rem"></select>
|
||
|
|
<button class="btn btn-primary" onclick="rmWifiScan()">Scan</button>
|
||
|
|
</div>
|
||
|
|
<div id="rm-scan-status" style="font-size:0.85rem;color:var(--text-secondary);margin-bottom:0.5rem"></div>
|
||
|
|
<pre id="rm-scan-output" style="max-height:400px;overflow:auto;background:var(--bg-secondary);padding:1rem;border-radius:4px;font-size:0.8rem"></pre>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- ==================== DEAUTH TAB ==================== -->
|
||
|
|
<div class="rm-tab-panel hidden" id="rm-tab-deauth">
|
||
|
|
<div class="section">
|
||
|
|
<h2>Deauthentication</h2>
|
||
|
|
<div style="display:flex;gap:0.5rem;align-items:center;margin-bottom:1rem;flex-wrap:wrap">
|
||
|
|
<label>Radio:</label>
|
||
|
|
<select id="rm-deauth-radio" style="padding:0.4rem"></select>
|
||
|
|
<label>BSSID:</label>
|
||
|
|
<input type="text" id="rm-deauth-bssid" placeholder="AA:BB:CC:DD:EE:FF" style="padding:0.4rem;width:180px">
|
||
|
|
<label>Count:</label>
|
||
|
|
<input type="number" id="rm-deauth-count" value="10" min="1" max="1000" style="padding:0.4rem;width:60px">
|
||
|
|
<button class="btn btn-danger" onclick="rmDeauth()">Send Deauth</button>
|
||
|
|
</div>
|
||
|
|
<pre id="rm-deauth-output" style="max-height:300px;overflow:auto;background:var(--bg-secondary);padding:1rem;border-radius:4px;font-size:0.8rem"></pre>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- ==================== CHANNEL HOP TAB ==================== -->
|
||
|
|
<div class="rm-tab-panel hidden" id="rm-tab-chanhop">
|
||
|
|
<div class="section">
|
||
|
|
<h2>Channel Hopper</h2>
|
||
|
|
<div style="display:flex;gap:0.5rem;align-items:center;margin-bottom:1rem;flex-wrap:wrap">
|
||
|
|
<label>Radio:</label>
|
||
|
|
<select id="rm-hop-radio" style="padding:0.4rem"></select>
|
||
|
|
<label>Dwell (ms):</label>
|
||
|
|
<input type="number" id="rm-hop-dwell" value="500" min="100" max="5000" step="100" style="padding:0.4rem;width:80px">
|
||
|
|
<button class="btn btn-primary" onclick="rmHopStart()">Start Hopping</button>
|
||
|
|
<button class="btn btn-danger" onclick="rmHopStop()">Stop</button>
|
||
|
|
</div>
|
||
|
|
<div style="margin-bottom:0.5rem">
|
||
|
|
<label>Channels (comma separated, leave blank for all):</label>
|
||
|
|
<input type="text" id="rm-hop-channels" placeholder="1,6,11 or blank for all" style="width:100%;padding:0.4rem;margin-top:0.25rem">
|
||
|
|
</div>
|
||
|
|
<pre id="rm-hop-output" style="max-height:200px;overflow:auto;background:var(--bg-secondary);padding:0.5rem;border-radius:4px;font-size:0.8rem"></pre>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- ==================== AIRODUMP TAB ==================== -->
|
||
|
|
<div class="rm-tab-panel hidden" id="rm-tab-airodump">
|
||
|
|
<div class="section">
|
||
|
|
<h2>Airodump-ng</h2>
|
||
|
|
<div style="display:flex;gap:0.5rem;align-items:center;margin-bottom:1rem;flex-wrap:wrap">
|
||
|
|
<label>Radio:</label>
|
||
|
|
<select id="rm-airo-radio" style="padding:0.4rem"></select>
|
||
|
|
<label>Channel:</label>
|
||
|
|
<input type="text" id="rm-airo-channel" placeholder="all or specific" value="" style="padding:0.4rem;width:80px">
|
||
|
|
<label>Band:</label>
|
||
|
|
<select id="rm-airo-band" style="padding:0.4rem">
|
||
|
|
<option value="">All</option>
|
||
|
|
<option value="--band a">5GHz</option>
|
||
|
|
<option value="--band bg">2.4GHz</option>
|
||
|
|
</select>
|
||
|
|
<button class="btn btn-primary" onclick="rmAirodumpStart()">Start</button>
|
||
|
|
<button class="btn btn-danger" onclick="rmAirodumpStop()">Stop</button>
|
||
|
|
<button class="btn" onclick="rmAirodumpRefresh()">Refresh</button>
|
||
|
|
</div>
|
||
|
|
<div style="margin-bottom:0.5rem;font-size:0.85rem;color:var(--text-secondary)" id="rm-airo-status"></div>
|
||
|
|
<h3>Access Points</h3>
|
||
|
|
<div id="rm-airo-aps" style="overflow-x:auto;margin-bottom:1rem"></div>
|
||
|
|
<h3>Clients</h3>
|
||
|
|
<div id="rm-airo-clients" style="overflow-x:auto"></div>
|
||
|
|
<pre id="rm-airo-raw" style="max-height:300px;overflow:auto;background:var(--bg-secondary);padding:0.5rem;border-radius:4px;font-size:0.8rem;display:none"></pre>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- ==================== HANDSHAKE TAB ==================== -->
|
||
|
|
<div class="rm-tab-panel hidden" id="rm-tab-handshake">
|
||
|
|
<div class="section">
|
||
|
|
<h2>Handshake Capture</h2>
|
||
|
|
<p style="font-size:0.85rem;color:var(--text-secondary);margin-bottom:1rem">
|
||
|
|
Capture WPA/WPA2 handshakes for offline cracking. Optionally deauth clients to force reconnection.
|
||
|
|
</p>
|
||
|
|
<div style="display:flex;gap:0.5rem;align-items:center;margin-bottom:1rem;flex-wrap:wrap">
|
||
|
|
<label>Radio:</label>
|
||
|
|
<select id="rm-hs-radio" style="padding:0.4rem"></select>
|
||
|
|
<label>Target BSSID:</label>
|
||
|
|
<input type="text" id="rm-hs-bssid" placeholder="AA:BB:CC:DD:EE:FF" style="padding:0.4rem;width:180px">
|
||
|
|
<label>Channel:</label>
|
||
|
|
<input type="text" id="rm-hs-channel" placeholder="6" style="padding:0.4rem;width:50px">
|
||
|
|
</div>
|
||
|
|
<div style="display:flex;gap:0.5rem;align-items:center;margin-bottom:1rem;flex-wrap:wrap">
|
||
|
|
<button class="btn btn-primary" onclick="rmHsCapture()">Start Capture</button>
|
||
|
|
<button class="btn btn-danger" onclick="rmHsDeauth()">Deauth + Capture</button>
|
||
|
|
<button class="btn" onclick="rmHsStop()">Stop</button>
|
||
|
|
<button class="btn" onclick="rmHsPull()">Pull Capture File</button>
|
||
|
|
<label><input type="checkbox" id="rm-hs-auto-deauth" checked> Auto-deauth clients</label>
|
||
|
|
</div>
|
||
|
|
<div id="rm-hs-status" style="font-size:0.85rem;color:var(--text-secondary);margin-bottom:0.5rem"></div>
|
||
|
|
<pre id="rm-hs-output" style="max-height:300px;overflow:auto;background:var(--bg-secondary);padding:0.5rem;border-radius:4px;font-size:0.8rem"></pre>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- ==================== RECON TAB ==================== -->
|
||
|
|
<div class="rm-tab-panel hidden" id="rm-tab-recon">
|
||
|
|
<div class="section">
|
||
|
|
<h2>Wireless Recon</h2>
|
||
|
|
<p style="font-size:0.85rem;color:var(--text-secondary);margin-bottom:1rem">
|
||
|
|
Passive reconnaissance — discover APs, clients, probe requests, and hidden networks.
|
||
|
|
</p>
|
||
|
|
<div style="display:flex;gap:0.5rem;align-items:center;margin-bottom:1rem;flex-wrap:wrap">
|
||
|
|
<label>Radio:</label>
|
||
|
|
<select id="rm-recon-radio" style="padding:0.4rem"></select>
|
||
|
|
<label>Duration (sec):</label>
|
||
|
|
<input type="number" id="rm-recon-duration" value="30" min="5" max="300" style="padding:0.4rem;width:60px">
|
||
|
|
<button class="btn btn-primary" onclick="rmReconStart()">Start Recon</button>
|
||
|
|
<button class="btn btn-danger" onclick="rmReconStop()">Stop</button>
|
||
|
|
</div>
|
||
|
|
<div id="rm-recon-status" style="font-size:0.85rem;color:var(--text-secondary);margin-bottom:0.5rem"></div>
|
||
|
|
<h3>Discovered Networks</h3>
|
||
|
|
<div id="rm-recon-networks" style="overflow-x:auto;margin-bottom:1rem"></div>
|
||
|
|
<h3>Probe Requests</h3>
|
||
|
|
<div id="rm-recon-probes" style="overflow-x:auto;margin-bottom:1rem"></div>
|
||
|
|
<h3>Raw Output</h3>
|
||
|
|
<pre id="rm-recon-raw" style="max-height:300px;overflow:auto;background:var(--bg-secondary);padding:0.5rem;border-radius:4px;font-size:0.8rem"></pre>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- ==================== INJECTION TAB ==================== -->
|
||
|
|
<div class="rm-tab-panel hidden" id="rm-tab-injection">
|
||
|
|
<div class="section">
|
||
|
|
<h2>Frame Injection</h2>
|
||
|
|
<p style="font-size:0.85rem;color:var(--text-secondary);margin-bottom:1rem">
|
||
|
|
Test frame injection capability and send custom frames.
|
||
|
|
</p>
|
||
|
|
<div style="display:flex;gap:0.5rem;align-items:center;margin-bottom:1rem;flex-wrap:wrap">
|
||
|
|
<label>Radio:</label>
|
||
|
|
<select id="rm-inj-radio" style="padding:0.4rem"></select>
|
||
|
|
<button class="btn btn-primary" onclick="rmInjTest()">Test Injection</button>
|
||
|
|
</div>
|
||
|
|
<div style="margin-bottom:1rem">
|
||
|
|
<label>Custom aireplay-ng command:</label>
|
||
|
|
<div style="display:flex;gap:0.5rem;margin-top:0.25rem">
|
||
|
|
<input type="text" id="rm-inj-cmd" placeholder="--fakeauth 0 -a AA:BB:CC:DD:EE:FF" style="flex:1;padding:0.4rem">
|
||
|
|
<button class="btn" onclick="rmInjCustom()">Run</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<pre id="rm-inj-output" style="max-height:300px;overflow:auto;background:var(--bg-secondary);padding:0.5rem;border-radius:4px;font-size:0.8rem"></pre>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- ==================== TERMINAL TAB ==================== -->
|
||
|
|
<div class="rm-tab-panel hidden" id="rm-tab-terminal">
|
||
|
|
<div class="section">
|
||
|
|
<h2>Remote Terminal</h2>
|
||
|
|
<div style="display:flex;gap:0.5rem;margin-bottom:1rem">
|
||
|
|
<input type="text" id="rm-cmd-input" placeholder="Command..." style="flex:1;padding:0.4rem" onkeypress="if(event.key==='Enter')rmExec()">
|
||
|
|
<button class="btn btn-primary" onclick="rmExec()">Run</button>
|
||
|
|
</div>
|
||
|
|
<pre id="rm-terminal-output" style="max-height:500px;overflow:auto;background:var(--bg-secondary);padding:1rem;border-radius:4px;font-size:0.8rem"></pre>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- ==================== INFO TAB ==================== -->
|
||
|
|
<div class="rm-tab-panel hidden" id="rm-tab-info">
|
||
|
|
<div class="section">
|
||
|
|
<h2>Device Info</h2>
|
||
|
|
<button class="btn" onclick="rmGetInfo()" style="margin-bottom:1rem">Refresh</button>
|
||
|
|
<div id="rm-info-output"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Create New Dialog -->
|
||
|
|
<div id="rm-new-dialog" style="display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.7);z-index:999;display:none;align-items:center;justify-content:center">
|
||
|
|
<div style="background:var(--bg-primary);padding:2rem;border-radius:8px;max-width:500px;width:90%">
|
||
|
|
<h2 style="margin-top:0">Create New Device Profile</h2>
|
||
|
|
<p>To add a new device:</p>
|
||
|
|
<ol>
|
||
|
|
<li>Navigate to <code>data/piap/</code></li>
|
||
|
|
<li>Copy <code>template.piap</code> to a new file</li>
|
||
|
|
<li>Edit the file with your device's information</li>
|
||
|
|
<li>Fill in all fields marked <code>CHANGEME</code></li>
|
||
|
|
<li>Save and refresh this page</li>
|
||
|
|
</ol>
|
||
|
|
<p style="font-size:0.85rem;color:var(--text-secondary)">
|
||
|
|
Template location: <code>/data/piap/template.piap</code>
|
||
|
|
</p>
|
||
|
|
<button class="btn" onclick="document.getElementById('rm-new-dialog').style.display='none'">Close</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
let rmPiap = null;
|
||
|
|
let rmConnected = false;
|
||
|
|
|
||
|
|
function rmTab(name) {
|
||
|
|
document.querySelectorAll('.rm-tab-panel').forEach(p => p.classList.add('hidden'));
|
||
|
|
document.querySelectorAll('#rm-tab-bar .tab').forEach(t => t.classList.remove('active'));
|
||
|
|
const panel = document.getElementById('rm-tab-' + name);
|
||
|
|
if (panel) panel.classList.remove('hidden');
|
||
|
|
event.target.classList.add('active');
|
||
|
|
}
|
||
|
|
|
||
|
|
function rmLoadPiap() {
|
||
|
|
const sel = document.getElementById('piap-select');
|
||
|
|
const filename = sel.value;
|
||
|
|
|
||
|
|
if (filename === '__new__') {
|
||
|
|
document.getElementById('rm-new-dialog').style.display = 'flex';
|
||
|
|
sel.value = '';
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
if (!filename) {
|
||
|
|
document.getElementById('rm-device-panel').style.display = 'none';
|
||
|
|
document.getElementById('rm-connect-btn').disabled = true;
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
fetch('/remote-monitor/api/load', {
|
||
|
|
method: 'POST',
|
||
|
|
headers: {'Content-Type': 'application/json'},
|
||
|
|
body: JSON.stringify({filename: filename})
|
||
|
|
})
|
||
|
|
.then(r => r.json())
|
||
|
|
.then(data => {
|
||
|
|
if (!data.ok) { alert(data.error); return; }
|
||
|
|
rmPiap = data.data;
|
||
|
|
rmBuildUI();
|
||
|
|
document.getElementById('rm-connect-btn').disabled = false;
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function rmBuildUI() {
|
||
|
|
const d = rmPiap.device;
|
||
|
|
document.getElementById('rm-model').textContent = d.model || '';
|
||
|
|
document.getElementById('rm-os').textContent = d.os || '';
|
||
|
|
document.getElementById('rm-chipset').textContent = d.wifi_chipset || d.chipset || '';
|
||
|
|
document.getElementById('rm-host').textContent = rmPiap.connection.host || '';
|
||
|
|
|
||
|
|
// Build tab bar
|
||
|
|
const tabBar = document.getElementById('rm-tab-bar');
|
||
|
|
tabBar.innerHTML = '<button class="tab active" onclick="rmTab(\'radios\')">Radios</button>';
|
||
|
|
const features = rmPiap.features;
|
||
|
|
if (features.capture === 'true') tabBar.innerHTML += '<button class="tab" onclick="rmTab(\'capture\')">Capture</button>';
|
||
|
|
if (features.wifi_scan === 'true') tabBar.innerHTML += '<button class="tab" onclick="rmTab(\'scan\')">WiFi Scan</button>';
|
||
|
|
tabBar.innerHTML += '<button class="tab" onclick="rmTab(\'recon\')">Recon</button>';
|
||
|
|
if (features.aircrack === 'true') tabBar.innerHTML += '<button class="tab" onclick="rmTab(\'airodump\')">Airodump</button>';
|
||
|
|
tabBar.innerHTML += '<button class="tab" onclick="rmTab(\'handshake\')">Handshake</button>';
|
||
|
|
if (features.deauth === 'true') tabBar.innerHTML += '<button class="tab" onclick="rmTab(\'deauth\')">Deauth</button>';
|
||
|
|
if (features.channel_hop === 'true') tabBar.innerHTML += '<button class="tab" onclick="rmTab(\'chanhop\')">Channel Hop</button>';
|
||
|
|
tabBar.innerHTML += '<button class="tab" onclick="rmTab(\'injection\')">Injection</button>';
|
||
|
|
tabBar.innerHTML += '<button class="tab" onclick="rmTab(\'terminal\')">Terminal</button>';
|
||
|
|
tabBar.innerHTML += '<button class="tab" onclick="rmTab(\'info\')">Info</button>';
|
||
|
|
|
||
|
|
// Build radio panels
|
||
|
|
const container = document.getElementById('rm-radios-container');
|
||
|
|
container.innerHTML = '';
|
||
|
|
rmPiap.radios.forEach((radio, idx) => {
|
||
|
|
const channels = (radio.channel_list || []).map(c =>
|
||
|
|
`<option value="${c}" ${c === radio.default_channel ? 'selected' : ''}>${c}</option>`
|
||
|
|
).join('');
|
||
|
|
const modes = (radio.mode_list || []).map(m =>
|
||
|
|
`<span style="background:var(--bg-tertiary);padding:2px 8px;border-radius:3px;font-size:0.8rem">${m}</span>`
|
||
|
|
).join(' ');
|
||
|
|
|
||
|
|
container.innerHTML += `
|
||
|
|
<div class="section" style="margin-bottom:1rem">
|
||
|
|
<h2>${radio.name || 'Radio ' + idx}</h2>
|
||
|
|
<div style="display:flex;gap:1rem;flex-wrap:wrap;align-items:center;margin-bottom:0.5rem">
|
||
|
|
<span><strong>PHY:</strong> ${radio.phy}</span>
|
||
|
|
<span><strong>Band:</strong> ${radio.band || ''}</span>
|
||
|
|
<span><strong>Modes:</strong> ${modes}</span>
|
||
|
|
<span><strong>Injection:</strong> ${radio.injection === 'true' ? 'Yes' : 'No'}</span>
|
||
|
|
<span><strong>Radiotap:</strong> ${radio.radiotap === 'true' ? 'Yes' : 'No'}</span>
|
||
|
|
</div>
|
||
|
|
<div style="display:flex;gap:0.5rem;align-items:center;flex-wrap:wrap;margin-bottom:0.5rem">
|
||
|
|
<label>Channel:</label>
|
||
|
|
<select id="rm-radio-${idx}-ch" style="padding:0.4rem">${channels}</select>
|
||
|
|
<button class="btn btn-primary" onclick="rmMonitorOn(${idx})">Monitor ON</button>
|
||
|
|
<button class="btn btn-danger" onclick="rmMonitorOff(${idx})">Monitor OFF</button>
|
||
|
|
<button class="btn" onclick="rmSetChannel(${idx})">Set Channel</button>
|
||
|
|
<button class="btn" onclick="rmRadioStatus(${idx})">Status</button>
|
||
|
|
</div>
|
||
|
|
<pre id="rm-radio-${idx}-output" style="max-height:200px;overflow:auto;background:var(--bg-secondary);padding:0.5rem;border-radius:4px;font-size:0.8rem"></pre>
|
||
|
|
</div>`;
|
||
|
|
});
|
||
|
|
|
||
|
|
// Populate radio selects in feature tabs
|
||
|
|
const radioOpts = rmPiap.radios.map((r, i) =>
|
||
|
|
`<option value="${i}">${r.name || 'Radio ' + i}</option>`
|
||
|
|
).join('');
|
||
|
|
['rm-cap-radio', 'rm-scan-radio', 'rm-deauth-radio', 'rm-hop-radio', 'rm-airo-radio', 'rm-hs-radio', 'rm-recon-radio', 'rm-inj-radio'].forEach(id => {
|
||
|
|
const el = document.getElementById(id);
|
||
|
|
if (el) el.innerHTML = radioOpts;
|
||
|
|
});
|
||
|
|
|
||
|
|
document.getElementById('rm-device-panel').style.display = 'block';
|
||
|
|
}
|
||
|
|
|
||
|
|
function _rmPost(url, extra) {
|
||
|
|
const body = {connection: rmPiap.connection, features: rmPiap.features, ...extra};
|
||
|
|
return fetch('/remote-monitor/api/' + url, {
|
||
|
|
method: 'POST',
|
||
|
|
headers: {'Content-Type': 'application/json'},
|
||
|
|
body: JSON.stringify(body)
|
||
|
|
}).then(r => r.json());
|
||
|
|
}
|
||
|
|
|
||
|
|
function rmConnect() {
|
||
|
|
document.getElementById('rm-conn-status').textContent = 'Connecting...';
|
||
|
|
_rmPost('connect', {}).then(data => {
|
||
|
|
if (data.ok) {
|
||
|
|
rmConnected = true;
|
||
|
|
document.getElementById('rm-conn-status').innerHTML = '<span style="color:#4caf50">Connected</span>';
|
||
|
|
document.getElementById('rm-connect-btn').style.display = 'none';
|
||
|
|
document.getElementById('rm-disconnect-btn').style.display = '';
|
||
|
|
document.getElementById('rm-disconnect-btn').disabled = false;
|
||
|
|
} else {
|
||
|
|
document.getElementById('rm-conn-status').innerHTML = '<span style="color:#f44336">Failed: ' + (data.stderr || 'unknown') + '</span>';
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function rmDisconnect() {
|
||
|
|
rmConnected = false;
|
||
|
|
document.getElementById('rm-conn-status').textContent = 'Disconnected';
|
||
|
|
document.getElementById('rm-connect-btn').style.display = '';
|
||
|
|
document.getElementById('rm-connect-btn').disabled = false;
|
||
|
|
document.getElementById('rm-disconnect-btn').style.display = 'none';
|
||
|
|
}
|
||
|
|
|
||
|
|
function rmMonitorOn(idx) {
|
||
|
|
const channel = document.getElementById('rm-radio-' + idx + '-ch').value;
|
||
|
|
const out = document.getElementById('rm-radio-' + idx + '-output');
|
||
|
|
out.textContent = 'Enabling monitor mode...';
|
||
|
|
_rmPost('radio/monitor-on', {radio: rmPiap.radios[idx], channel: channel}).then(data => {
|
||
|
|
out.textContent = data.ok ? 'Monitor mode enabled on channel ' + channel : 'Error: ' + (data.stderr || data.stdout);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function rmMonitorOff(idx) {
|
||
|
|
const out = document.getElementById('rm-radio-' + idx + '-output');
|
||
|
|
out.textContent = 'Disabling monitor mode...';
|
||
|
|
_rmPost('radio/monitor-off', {radio: rmPiap.radios[idx]}).then(data => {
|
||
|
|
out.textContent = data.ok ? 'Monitor mode disabled' : 'Error: ' + (data.stderr || data.stdout);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function rmSetChannel(idx) {
|
||
|
|
const channel = document.getElementById('rm-radio-' + idx + '-ch').value;
|
||
|
|
const out = document.getElementById('rm-radio-' + idx + '-output');
|
||
|
|
_rmPost('radio/set-channel', {radio: rmPiap.radios[idx], channel: channel}).then(data => {
|
||
|
|
out.textContent = data.ok ? 'Channel set to ' + channel : 'Error: ' + (data.stderr || data.stdout);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function rmRadioStatus(idx) {
|
||
|
|
const out = document.getElementById('rm-radio-' + idx + '-output');
|
||
|
|
out.textContent = 'Getting status...';
|
||
|
|
_rmPost('radio/status', {radio: rmPiap.radios[idx]}).then(data => {
|
||
|
|
out.textContent = data.stdout || data.stderr || 'No output';
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function rmCaptureStart() {
|
||
|
|
const idx = document.getElementById('rm-cap-radio').value;
|
||
|
|
document.getElementById('rm-capture-status').textContent = 'Starting capture...';
|
||
|
|
_rmPost('capture/start', {radio: rmPiap.radios[idx]}).then(data => {
|
||
|
|
document.getElementById('rm-capture-status').textContent = data.ok ? 'Capture running' : 'Error: ' + (data.stderr || '');
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function rmCaptureStop() {
|
||
|
|
document.getElementById('rm-capture-status').textContent = 'Stopping...';
|
||
|
|
_rmPost('capture/stop', {}).then(data => {
|
||
|
|
document.getElementById('rm-capture-status').textContent = 'Capture stopped';
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function rmWifiScan() {
|
||
|
|
const idx = document.getElementById('rm-scan-radio').value;
|
||
|
|
const out = document.getElementById('rm-scan-output');
|
||
|
|
document.getElementById('rm-scan-status').textContent = 'Scanning...';
|
||
|
|
out.textContent = '';
|
||
|
|
_rmPost('scan', {radio: rmPiap.radios[idx]}).then(data => {
|
||
|
|
document.getElementById('rm-scan-status').textContent = data.ok ? 'Scan complete' : 'Error';
|
||
|
|
out.textContent = data.stdout || data.stderr || 'No results';
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function rmDeauth() {
|
||
|
|
const idx = document.getElementById('rm-deauth-radio').value;
|
||
|
|
const bssid = document.getElementById('rm-deauth-bssid').value;
|
||
|
|
const count = document.getElementById('rm-deauth-count').value;
|
||
|
|
if (!bssid) { alert('Enter a BSSID'); return; }
|
||
|
|
_rmPost('deauth', {radio: rmPiap.radios[idx], bssid: bssid, count: count}).then(data => {
|
||
|
|
document.getElementById('rm-deauth-output').textContent = data.stdout || data.stderr || 'Sent';
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function rmExec() {
|
||
|
|
const cmd = document.getElementById('rm-cmd-input').value;
|
||
|
|
if (!cmd) return;
|
||
|
|
const out = document.getElementById('rm-terminal-output');
|
||
|
|
out.textContent += '$ ' + cmd + '\n';
|
||
|
|
_rmPost('exec', {cmd: cmd}).then(data => {
|
||
|
|
out.textContent += (data.stdout || data.stderr || '') + '\n';
|
||
|
|
out.scrollTop = out.scrollHeight;
|
||
|
|
});
|
||
|
|
document.getElementById('rm-cmd-input').value = '';
|
||
|
|
}
|
||
|
|
|
||
|
|
function rmGetInfo() {
|
||
|
|
const out = document.getElementById('rm-info-output');
|
||
|
|
out.innerHTML = '<em>Loading...</em>';
|
||
|
|
_rmPost('info', {info: rmPiap.info}).then(data => {
|
||
|
|
if (!data.ok) { out.textContent = 'Error'; return; }
|
||
|
|
let html = '';
|
||
|
|
for (const [key, val] of Object.entries(data.info)) {
|
||
|
|
html += `<div class="section" style="margin-bottom:0.5rem"><h3>${key}</h3><pre style="background:var(--bg-secondary);padding:0.5rem;border-radius:4px;font-size:0.8rem">${val}</pre></div>`;
|
||
|
|
}
|
||
|
|
out.innerHTML = html;
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
// ── Channel Hopper ──────────────────────────────────────────────────────
|
||
|
|
let rmHopRunning = false;
|
||
|
|
function rmHopStart() {
|
||
|
|
const idx = document.getElementById('rm-hop-radio').value;
|
||
|
|
const radio = rmPiap.radios[idx];
|
||
|
|
const dwell = document.getElementById('rm-hop-dwell').value;
|
||
|
|
const customCh = document.getElementById('rm-hop-channels').value.trim();
|
||
|
|
const channels = customCh || radio.channels;
|
||
|
|
const out = document.getElementById('rm-hop-output');
|
||
|
|
out.textContent = 'Starting channel hopper...';
|
||
|
|
|
||
|
|
const cmd = `sh -c 'while true; do for ch in ${channels.replace(/,/g, ' ')}; do iw dev ${radio.monitor_interface} set channel $ch 2>/dev/null && echo "Channel: $ch"; sleep ${dwell / 1000}; done; done' &`;
|
||
|
|
_rmPost('exec', {cmd: cmd, radio: radio}).then(data => {
|
||
|
|
rmHopRunning = true;
|
||
|
|
out.textContent = 'Hopping across channels: ' + channels;
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function rmHopStop() {
|
||
|
|
_rmPost('exec', {cmd: "pkill -f 'while true; do for ch'"}).then(data => {
|
||
|
|
rmHopRunning = false;
|
||
|
|
document.getElementById('rm-hop-output').textContent = 'Stopped';
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
// ── Airodump ────────────────────────────────────────────────────────────
|
||
|
|
function rmAirodumpStart() {
|
||
|
|
const idx = document.getElementById('rm-airo-radio').value;
|
||
|
|
const radio = rmPiap.radios[idx];
|
||
|
|
const channel = document.getElementById('rm-airo-channel').value.trim();
|
||
|
|
const band = document.getElementById('rm-airo-band').value;
|
||
|
|
document.getElementById('rm-airo-status').textContent = 'Starting airodump-ng...';
|
||
|
|
|
||
|
|
let cmd = `airodump-ng ${radio.monitor_interface} --write /tmp/airo --output-format csv -w /tmp/airo --write-interval 2`;
|
||
|
|
if (channel) cmd += ` -c ${channel}`;
|
||
|
|
if (band) cmd += ` ${band}`;
|
||
|
|
cmd += ' &';
|
||
|
|
|
||
|
|
_rmPost('exec', {cmd: cmd, radio: radio}).then(data => {
|
||
|
|
document.getElementById('rm-airo-status').textContent = 'Airodump running. Click Refresh to see results.';
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function rmAirodumpStop() {
|
||
|
|
_rmPost('exec', {cmd: 'killall airodump-ng 2>/dev/null'}).then(data => {
|
||
|
|
document.getElementById('rm-airo-status').textContent = 'Stopped';
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function rmAirodumpRefresh() {
|
||
|
|
_rmPost('exec', {cmd: 'cat /tmp/airo-01.csv 2>/dev/null || echo "No data yet"'}).then(data => {
|
||
|
|
const raw = data.stdout || '';
|
||
|
|
document.getElementById('rm-airo-raw').textContent = raw;
|
||
|
|
document.getElementById('rm-airo-raw').style.display = 'block';
|
||
|
|
rmParseAirodump(raw);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function rmParseAirodump(csv) {
|
||
|
|
const lines = csv.split('\n');
|
||
|
|
let aps = [], clients = [], section = 'ap';
|
||
|
|
|
||
|
|
lines.forEach(line => {
|
||
|
|
if (line.includes('Station MAC')) { section = 'client'; return; }
|
||
|
|
if (line.trim() === '' || line.startsWith('BSSID') || line.startsWith('\r')) return;
|
||
|
|
const cols = line.split(',').map(c => c.trim());
|
||
|
|
if (section === 'ap' && cols.length >= 14) {
|
||
|
|
aps.push({bssid: cols[0], power: cols[8], channel: cols[3], enc: cols[5], essid: cols[13]});
|
||
|
|
} else if (section === 'client' && cols.length >= 6) {
|
||
|
|
clients.push({mac: cols[0], power: cols[3], bssid: cols[5], probes: cols[6] || ''});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
let apHtml = '<table style="width:100%;font-size:0.8rem"><tr><th>BSSID</th><th>Ch</th><th>Pwr</th><th>Enc</th><th>ESSID</th></tr>';
|
||
|
|
aps.forEach(a => { apHtml += `<tr><td>${a.bssid}</td><td>${a.channel}</td><td>${a.power}</td><td>${a.enc}</td><td>${a.essid}</td></tr>`; });
|
||
|
|
apHtml += '</table>';
|
||
|
|
document.getElementById('rm-airo-aps').innerHTML = aps.length ? apHtml : '<em>No APs found</em>';
|
||
|
|
|
||
|
|
let clHtml = '<table style="width:100%;font-size:0.8rem"><tr><th>MAC</th><th>Pwr</th><th>BSSID</th><th>Probes</th></tr>';
|
||
|
|
clients.forEach(c => { clHtml += `<tr><td>${c.mac}</td><td>${c.power}</td><td>${c.bssid}</td><td>${c.probes}</td></tr>`; });
|
||
|
|
clHtml += '</table>';
|
||
|
|
document.getElementById('rm-airo-clients').innerHTML = clients.length ? clHtml : '<em>No clients found</em>';
|
||
|
|
}
|
||
|
|
|
||
|
|
// ── Handshake Capture ───────────────────────────────────────────────────
|
||
|
|
function rmHsCapture() {
|
||
|
|
const idx = document.getElementById('rm-hs-radio').value;
|
||
|
|
const radio = rmPiap.radios[idx];
|
||
|
|
const bssid = document.getElementById('rm-hs-bssid').value;
|
||
|
|
const channel = document.getElementById('rm-hs-channel').value;
|
||
|
|
if (!bssid) { alert('Enter target BSSID'); return; }
|
||
|
|
|
||
|
|
const out = document.getElementById('rm-hs-output');
|
||
|
|
document.getElementById('rm-hs-status').textContent = 'Starting handshake capture...';
|
||
|
|
|
||
|
|
let cmd = `iw dev ${radio.monitor_interface} set channel ${channel} 2>/dev/null; airodump-ng ${radio.monitor_interface} --bssid ${bssid} -c ${channel} --write /tmp/handshake --output-format pcap -w /tmp/handshake &`;
|
||
|
|
_rmPost('exec', {cmd: cmd, radio: radio}).then(data => {
|
||
|
|
document.getElementById('rm-hs-status').textContent = 'Capturing on channel ' + channel + ' for ' + bssid;
|
||
|
|
out.textContent = 'Waiting for handshake...\n';
|
||
|
|
|
||
|
|
if (document.getElementById('rm-hs-auto-deauth').checked) {
|
||
|
|
setTimeout(() => rmHsDeauth(), 3000);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function rmHsDeauth() {
|
||
|
|
const idx = document.getElementById('rm-hs-radio').value;
|
||
|
|
const radio = rmPiap.radios[idx];
|
||
|
|
const bssid = document.getElementById('rm-hs-bssid').value;
|
||
|
|
if (!bssid) { alert('Enter target BSSID'); return; }
|
||
|
|
|
||
|
|
document.getElementById('rm-hs-status').textContent = 'Sending deauth to force reconnection...';
|
||
|
|
const cmd = `aireplay-ng --deauth 5 -a ${bssid} ${radio.monitor_interface}`;
|
||
|
|
_rmPost('exec', {cmd: cmd, radio: radio}).then(data => {
|
||
|
|
document.getElementById('rm-hs-output').textContent += (data.stdout || data.stderr || '') + '\n';
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function rmHsStop() {
|
||
|
|
_rmPost('exec', {cmd: 'killall airodump-ng 2>/dev/null; killall aireplay-ng 2>/dev/null'}).then(data => {
|
||
|
|
document.getElementById('rm-hs-status').textContent = 'Stopped';
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function rmHsPull() {
|
||
|
|
document.getElementById('rm-hs-status').textContent = 'Checking for capture files...';
|
||
|
|
_rmPost('exec', {cmd: 'ls -la /tmp/handshake* 2>/dev/null'}).then(data => {
|
||
|
|
document.getElementById('rm-hs-output').textContent = data.stdout || 'No capture files found';
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
// ── Wireless Recon ──────────────────────────────────────────────────────
|
||
|
|
function rmReconStart() {
|
||
|
|
const idx = document.getElementById('rm-recon-radio').value;
|
||
|
|
const radio = rmPiap.radios[idx];
|
||
|
|
const duration = document.getElementById('rm-recon-duration').value;
|
||
|
|
document.getElementById('rm-recon-status').textContent = 'Running passive recon for ' + duration + 's...';
|
||
|
|
|
||
|
|
const cmd = `timeout ${duration} tcpdump -i ${radio.monitor_interface} -e -c 500 2>&1`;
|
||
|
|
_rmPost('exec', {cmd: cmd, radio: radio}).then(data => {
|
||
|
|
const raw = data.stdout || '';
|
||
|
|
document.getElementById('rm-recon-raw').textContent = raw;
|
||
|
|
document.getElementById('rm-recon-status').textContent = 'Recon complete';
|
||
|
|
rmParseRecon(raw);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function rmReconStop() {
|
||
|
|
_rmPost('exec', {cmd: 'killall tcpdump 2>/dev/null'}).then(data => {
|
||
|
|
document.getElementById('rm-recon-status').textContent = 'Stopped';
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function rmParseRecon(raw) {
|
||
|
|
const lines = raw.split('\n');
|
||
|
|
const networks = {};
|
||
|
|
const probes = {};
|
||
|
|
|
||
|
|
lines.forEach(line => {
|
||
|
|
// Extract beacons
|
||
|
|
const beaconMatch = line.match(/Beacon \(([^)]*)\)/);
|
||
|
|
const bssidMatch = line.match(/BSSID:([0-9a-f:]+)/i);
|
||
|
|
const sigMatch = line.match(/(-?\d+)dBm/);
|
||
|
|
if (beaconMatch && bssidMatch) {
|
||
|
|
const ssid = beaconMatch[1] || '(hidden)';
|
||
|
|
const bssid = bssidMatch[1];
|
||
|
|
networks[bssid] = {ssid: ssid, bssid: bssid, signal: sigMatch ? sigMatch[1] : '', count: (networks[bssid]?.count || 0) + 1};
|
||
|
|
}
|
||
|
|
|
||
|
|
// Extract probe requests
|
||
|
|
const probeMatch = line.match(/Probe Request \(([^)]*)\)/);
|
||
|
|
const saMatch = line.match(/SA:([0-9a-f:]+)/i);
|
||
|
|
if (probeMatch && saMatch) {
|
||
|
|
const ssid = probeMatch[1] || '(broadcast)';
|
||
|
|
const sa = saMatch[1];
|
||
|
|
const key = sa + ':' + ssid;
|
||
|
|
probes[key] = {mac: sa, ssid: ssid, count: (probes[key]?.count || 0) + 1};
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
let netHtml = '<table style="width:100%;font-size:0.8rem"><tr><th>SSID</th><th>BSSID</th><th>Signal</th><th>Beacons</th></tr>';
|
||
|
|
Object.values(networks).sort((a, b) => b.count - a.count).forEach(n => {
|
||
|
|
netHtml += `<tr><td>${n.ssid}</td><td>${n.bssid}</td><td>${n.signal}dBm</td><td>${n.count}</td></tr>`;
|
||
|
|
});
|
||
|
|
netHtml += '</table>';
|
||
|
|
document.getElementById('rm-recon-networks').innerHTML = Object.keys(networks).length ? netHtml : '<em>No networks found</em>';
|
||
|
|
|
||
|
|
let probeHtml = '<table style="width:100%;font-size:0.8rem"><tr><th>Client MAC</th><th>Probing For</th><th>Count</th></tr>';
|
||
|
|
Object.values(probes).sort((a, b) => b.count - a.count).forEach(p => {
|
||
|
|
probeHtml += `<tr><td>${p.mac}</td><td>${p.ssid}</td><td>${p.count}</td></tr>`;
|
||
|
|
});
|
||
|
|
probeHtml += '</table>';
|
||
|
|
document.getElementById('rm-recon-probes').innerHTML = Object.keys(probes).length ? probeHtml : '<em>No probe requests found</em>';
|
||
|
|
}
|
||
|
|
|
||
|
|
// ── Frame Injection ─────────────────────────────────────────────────────
|
||
|
|
function rmInjTest() {
|
||
|
|
const idx = document.getElementById('rm-inj-radio').value;
|
||
|
|
const radio = rmPiap.radios[idx];
|
||
|
|
const out = document.getElementById('rm-inj-output');
|
||
|
|
out.textContent = 'Testing injection capability...';
|
||
|
|
const cmd = `aireplay-ng --test ${radio.monitor_interface} 2>&1`;
|
||
|
|
_rmPost('exec', {cmd: cmd, radio: radio}).then(data => {
|
||
|
|
out.textContent = data.stdout || data.stderr || 'No output';
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function rmInjCustom() {
|
||
|
|
const idx = document.getElementById('rm-inj-radio').value;
|
||
|
|
const radio = rmPiap.radios[idx];
|
||
|
|
const args = document.getElementById('rm-inj-cmd').value;
|
||
|
|
const out = document.getElementById('rm-inj-output');
|
||
|
|
const cmd = `aireplay-ng ${args} ${radio.monitor_interface} 2>&1`;
|
||
|
|
_rmPost('exec', {cmd: cmd, radio: radio}).then(data => {
|
||
|
|
out.textContent += (data.stdout || data.stderr || '') + '\n';
|
||
|
|
out.scrollTop = out.scrollHeight;
|
||
|
|
});
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.rm-tab-panel { margin-top: 1rem; }
|
||
|
|
.rm-tab-panel table { border-collapse: collapse; }
|
||
|
|
.rm-tab-panel th, .rm-tab-panel td { padding: 4px 8px; border-bottom: 1px solid var(--border-color, #333); text-align: left; }
|
||
|
|
.rm-tab-panel th { color: var(--text-secondary); font-weight: 600; }
|
||
|
|
</style>
|
||
|
|
{% endblock %}
|