mirror of
https://github.com/logicog/RTLPlayground.git
synced 2026-10-29 17:54:14 +08:00
eraiza0816
caa7874bb3
All 17 page scripts (i18n, shared helpers, navigation and the per-page scripts) are merged into one html/main.js that every page loads as its only script, so the browser fetches it once and gzip can compress across all of it. The page-specific initialisation is guarded by the presence of the matching page elements (it used to be selected implicitly by which script a page loaded); the sidebar fill and the stat popup wiring moved into DOMContentLoaded handlers because the bundle loads in <head>, before the body exists. tools/httpd_sim.h: BUFFER_SIZE 24000 -> 131072 so the simulator can serve the larger bundle (the firmware is unaffected, it serves the gzip'd bundle of ~17 KB). Measured (make MACHINE=KP_9000_6XHML_X2): the JS drops from 23,302 to 16,948 bytes gzip; the whole Web UI from 34,784 to 28,200 bytes (25.3 % of the raw 111,280); the data block ends at 0x46e28. Verified with a headless browser against httpd_sim and against a real PCB-K0402WS-V3: all pages render, the sidebar and the port strip are drawn, no JavaScript errors.
105 lines
5.6 KiB
HTML
105 lines
5.6 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<script src="/main.js"></script>
|
|
<link rel="stylesheet" href="style.css">
|
|
<title data-i18n="sys_title">System Settings</title>
|
|
<style>
|
|
.tab-bar { display: flex; border-bottom: 2px solid #226; margin-bottom: 0; margin-left: 16%; padding: 1px 16px; padding-bottom: 0; }
|
|
.tab-btn { padding: 10px 20px; background-color: #ddf; border: none; cursor: pointer; font-size: 1em; border-radius: 8px 8px 0 0; margin-right: 4px; }
|
|
.tab-btn:hover { background-color: #aaf; }
|
|
.tab-btn.active { background-color: #aaf; font-weight: bold; border-bottom: 2px solid #aaf; margin-bottom: -2px; }
|
|
.tab-content { display: none; }
|
|
.tab-content.active { display: block; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="tab-bar">
|
|
<button class="tab-btn active" onclick="openTab(event, 'system-tab')" data-i18n="sys_tab_system">System</button>
|
|
<button class="tab-btn" onclick="openTab(event, 'advanced-tab')" data-i18n="sys_tab_advanced">Advanced</button>
|
|
<button class="tab-btn" onclick="openTab(event, 'console-tab')" data-i18n="sys_tab_console">Console</button>
|
|
</div>
|
|
<nav id="sidebar"></nav>
|
|
<div style="margin-left:16%;padding:1px 16px;height:1000px;">
|
|
<div id="ports"></div>
|
|
|
|
<div id="system-tab" class="tab-content active">
|
|
<h1 data-i18n="sys_heading">System Settings</h1>
|
|
<div class="row">
|
|
<div class="lcol"> <label for="hostname" data-i18n="sys_hostname">Hostname:</label></div>
|
|
<div class="rcol"> <input id="hostname" type="text" maxlength="23" size="20"/>
|
|
<button onclick="hostSub()" data-i18n="sys_apply">Apply</button></div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="lcol"> <label data-i18n="sys_model">Model:</label></div>
|
|
<div class="rcol"><span id="model" class="rotext"></span></div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="lcol"> <label for="ip" data-i18n="sys_ip">IP address:</label></div>
|
|
<div class="rcol"> <input id="ip" class="ip" type="text" minlength="7" maxlength="15" size="15"/></div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="lcol"> <label for="netmask" data-i18n="sys_netmask">Netmask:</label></div>
|
|
<div class="rcol"><input id="netmask" class="ip" type="text" minlength="7" maxlength="15" size="15"/></div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="lcol"> <label for="gw" data-i18n="sys_gateway">Gateway:</label></div>
|
|
<div class="rcol"><input id="gw" class="ip" type="text" minlength="7" maxlength="15" size="15"/></div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="lcol"> <label for="mgmtvlan" data-i18n="sys_mgmt_vlan">Management VLAN:</label></div>
|
|
<div class="rcol"><select id="mgmtvlan" class="ip" onchange="mgmtVlanChanged()"></select></div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="lcol"> <label data-i18n="sys_language">Language:</label></div>
|
|
<div class="rcol">
|
|
<select id="lang-select" onchange="changeLang()">
|
|
<option value="en">English</option>
|
|
<option value="ja">日本語</option>
|
|
<option value="zh">中文</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<br/>
|
|
<span data-i18n="sys_ip_note">When updating the above settings, remember to point your browser to the new IP afterwards:</span><br/>
|
|
<input style="width:40%;" class="action" id="ip_sub" onclick="ipSub();" type="button" data-i18n="sys_update" value="Update Settings"><br/>
|
|
<br/>
|
|
<span data-i18n="sys_save_label">Save all current settings to Flash:</span><br/>
|
|
<input style="width:40%;" class="action" id="flash_sub" onclick="flashSave();" type="button" data-i18n="sys_save" value="Save Settings to Flash">
|
|
</div>
|
|
|
|
<div id="advanced-tab" class="tab-content">
|
|
<h1 data-i18n="sys_advanced">Advanced Settings</h1>
|
|
<div class="lcol"> <label for="config_display" data-i18n="sys_startup_config">Startup configuration:</label></div>
|
|
<textarea id="config_display" rows="8" cols="60"></textarea>
|
|
<br/><br/>
|
|
<span data-i18n="sys_startup_warn">Be careful when saving the directly edited startup configuration, you can lock yourself out:</span><br/>
|
|
<input style="width:40%;" class="action" id="clear_config" onclick="clearConfig();" type="button" data-i18n="sys_clear_config" value="Clear Startup Config">
|
|
<br/>
|
|
<input style="width:40%;" class="action" id="flash_startup_sub" onclick="flashStartupSave();" type="button" data-i18n="sys_save_startup" value="Save Startup Settings to Flash">
|
|
<br/>
|
|
<input style="width:40%;" class="action" id="switch_reset" onclick="resetSwitch();" type="button" data-i18n="sys_reset" value="Reset Switch">
|
|
</div>
|
|
|
|
<div id="console-tab" class="tab-content">
|
|
<h1 data-i18n="sys_console">Console Command</h1>
|
|
<label for="console_command" data-i18n="sys_enter_cmd">Enter command:</label>
|
|
<input type="text" id="console_cmd" name="console_cmd" style="width:40%;">
|
|
<input style="width:20%;" class="action" id="cmd_sub" onclick="cmdSub();" type="button" data-i18n="sys_send_cmd" value="Send Command"><br/>
|
|
<br/><br/>
|
|
<span data-i18n="sys_console_warn">Be careful when entering console commands, you can lock yourself out!</span><br/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
<script>
|
|
function openTab(evt, tabId) {
|
|
document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
|
|
document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
|
|
document.getElementById(tabId).classList.add('active');
|
|
evt.currentTarget.classList.add('active');
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|