Merge pull request #279 from eraiza0816/translate-japanese

Support i18n & translate japanese

doc/support-multi-language.md

@@ -0,0 +1,135 @@
+# Supporting Multiple Languages in the Web UI
+
+The firmware uses a client-side i18n approach
+all translations are stored in a single JavaScript dictionary embedded in the firmware.
+No server-side changes are needed.
+
+## Architecture
+
+All translation logic lives in `html/i18n.js`. The file contains:
+
+- A `LANG` object with one sub-object per language (`en`, `ja`, ...)
+- Language auto-detection (browser language → `localStorage` override)
+- `t(key)` — look up a translated string
+- `setLang(lang)` — switch language and update the page
+- `applyTranslation(el)` — apply translation to one DOM element
+
+Translation keys are **flat strings** (no nesting). The English keys in `LANG.en` also serve as the fallback when a key is missing in another language.
+
+## How to Add a New Language
+
+### 1. Add a dictionary entry in `html/i18n.js`
+
+Append a new sub-object to the `LANG` object. Every key from `LANG.en` must be present:
+
+```js
+var LANG = {
+  en: {
+    nav_overview: 'Overview',
+    nav_port_config: 'Port Configuration',
+    // ... all keys for English
+  },
+  ja: {
+    nav_overview: '概要',
+    nav_port_config: 'ポート設定',
+    // ... all keys for Japanese
+  },
+  LANGCODE: {            // ← add your language here
+    nav_overview: '...',
+    nav_port_config: '...',
+    // ... translate every key
+  },
+};
+```
+
+### 2. Add the language to the navigation sidebar
+
+In `html/navigation.js`, add an `<option>` to the language selector:
+
+```js
++ "<option value='en'>English</option><option value='ja'>日本語</option>"
+```
+
+Replace with:
+
+```js
++ "<option value='en'>English</option><option value='ja'>日本語</option><option value='LANGCODE'>Native Name</option>"
+```
+
+### 3. Verify auto-detection
+
+The language detection code in `i18n.js` reads `navigator.language` and normalises it to the first two characters:
+
+```js
+var browser = (navigator.language || navigator.userLanguage || 'en').substring(0, 2);
+return LANG[browser] ? browser : 'en';
+```
+
+If the two-letter code matches a key in `LANG`, it will be auto-selected. No changes needed here.
+
+## Two Translation Mechanisms
+
+### (A) `data-i18n` attribute (declarative — for HTML)
+
+Add `data-i18n="key_name"` to any HTML element. The English text goes in the element content as a fallback:
+
+```html
+<h1 data-i18n="port_heading">Port Configuration</h1>
+<input type="button" data-i18n="port_apply" value="Apply">
+<option data-i18n="port_auto">Auto</option>
+<title data-i18n="port_title">Port Configuration</title>
+```
+
+On page load, `applyTranslation()` sets:
+
+- `el.value` for `<input type="submit|button">`
+- `el.textContent` for `<option>`, `<title>`
+- `el.innerHTML` for everything else
+
+### (B) `t('key')` call (imperative — for JavaScript strings)
+
+When generating HTML or text in JavaScript, wrap translatable strings with `t()`:
+
+```js
+td.appendChild(document.createTextNode(t('common_port') + i));
+td.innerHTML = t('port_auto');
+iHTML += "<tr><td>" + t('port_vendor') + "</td></tr>";
+```
+
+### Special Case: Link Speed Display
+
+The `linkS` array in `html/main.js` maps numeric link states to display strings. The first two entries (`speed_disabled`, `speed_down`) use `t()` for translation; the remaining entries are static literals (they are the same in all languages):
+
+```js
+const linkS = [
+  function(){return t('speed_disabled')},
+  function(){return t('speed_down')},
+  "10M", "100M", "1000M", "500M", "10G", "2.5G", "5G"
+];
+function linkText(idx) { var v = linkS[idx]; return typeof v === 'function' ? v() : v; }
+```
+
+Always use `linkText(idx)` (not `linkS[idx]`) to read these values.
+
+## Size Considerations
+
+- `html/i18n.js` is embedded in the firmware filesystem (~14 KB for two languages)
+- Each new language adds roughly the same number of bytes as the English dictionary (~3–4 KB)
+- The firmware binary is padded to 512 KiB, so a few extra KB do not change the flash footprint
+- Values that are identical in all languages should be inlined as literals rather than added to the dictionary (e.g., `"10M"`, `"2.5G"`, `"MAC"`, `"VLAN"`, `"CPU"`)
+
+## Build
+
+No special flags are needed. The `html/` directory is embedded by `fileadder` during the build.
+
+## Script Load Order
+
+`i18n.js` must be loaded after `main.js` (which defines `t()`'s dependencies like `LANG`) but before any page-specific JS that calls `t()`:
+
+```html
+<script src="/main.js"></script>
+<script src="/i18n.js"></script>
+<script src="/eee.js"></script>    <!-- uses t() -->
+```
+
+The `navigation.js` script is loaded last (bottom of `<body>`).

html/bandwidth.html

@@ -1,17 +1,18 @@
 <!DOCTYPE html>
 <html>
   <script src="/main.js"></script>
+  <script src="/i18n.js"></script>
   <link rel="stylesheet" href="style.css">
-  <title>Ingress and Egress Bandwidth</title>
+  <title data-i18n="bw_title">Ingress and Egress Bandwidth</title>
   </head>
   <body>
     <nav id="sidebar"></nav>
     <div style="margin-left:16%;padding:1px 16px;height:1000px;">
     <div id="ports"></div>
-    <h1>Ingress and Egress Bandwidth</h1>
+    <h1 data-i18n="bw_heading">Ingress and Egress Bandwidth</h1>
     <table id="bwtable">
-      <tr> <th> </th> <th colspan="3"> Ingress </th> <th colspan="2">Egress</th>  <th></th></tr>
+      <tr> <th> </th> <th colspan="3" data-i18n="bw_ingress"> Ingress </th> <th colspan="2" data-i18n="bw_egress">Egress</th>  <th></th></tr>
-      <tr> <th>Port</th> <th>Limit</th> <th>Bandwidth [kBit/s]</th> <th>Flow Control</th> <th>Limit</th> <th>Bandwidth [kBit/s]</th> <th>Apply</th></tr>
+      <tr> <th data-i18n="bw_col_port">Port</th> <th data-i18n="bw_col_limit">Limit</th> <th data-i18n="bw_col_bandwidth">Bandwidth [kBit/s]</th> <th data-i18n="bw_col_flow">Flow Control</th> <th data-i18n="bw_col_limit">Limit</th> <th data-i18n="bw_col_bandwidth">Bandwidth [kBit/s]</th> <th data-i18n="bw_col_apply">Apply</th></tr>
     </table>
     <script src="/bandwidth.js"></script>
     </div>

html/bandwidth.js

@@ -6,18 +6,18 @@ function createBW() {
      console.log("CREATING TABLE ", tbl.rows.length);
      for (let i = 2; i < 2 + numPorts; i++) {
        const tr = tbl.insertRow();
-       let td = tr.insertCell(); td.appendChild(document.createTextNode(`Port ${i-1}`));
+        let td = tr.insertCell(); td.appendChild(document.createTextNode(t('common_port') + (i-1)));
        td = tr.insertCell();
        td.innerHTML = limit.replaceAll("limit_port", "ilimit_port_" + i).replace("exec()", "iClicked(" + i + ")");
        td = tr.insertCell();
-       td.innerHTML = 'UNLIMITED';
+        td.innerHTML = t('bw_unlimited');
-       td = tr.insertCell();
+        td = tr.insertCell();
-       td.innerHTML = limit.replaceAll("limit_port", "fc_port_" + i).replace("exec()", "document.getElementById('bwapply_" + i + "').disabled=false;");
+        td.innerHTML = limit.replaceAll("limit_port", "fc_port_" + i).replace("exec()", "document.getElementById('bwapply_" + i + "').disabled=false;");
-       td = tr.insertCell();
+        td = tr.insertCell();
-       td.innerHTML = limit.replaceAll("limit_port", "elimit_port_" + i).replace("exec()", "eClicked(" + i + ")");
+        td.innerHTML = limit.replaceAll("limit_port", "elimit_port_" + i).replace("exec()", "eClicked(" + i + ")");
-       td = tr.insertCell();
+        td = tr.insertCell();
-       td.innerHTML = 'UNLIMITED';
+        td.innerHTML = t('bw_unlimited');
-       var button = '<button type="button" id="bwapply_' + i + '" style="margin: 0 0 0 24px" onclick="applyBandwidth(' + i + ');">Apply</button>';
+        var button = '<button type="button" id="bwapply_' + i + '" style="margin: 0 0 0 24px" onclick="applyBandwidth(' + i + ');">' + t('bw_col_apply') + '</button>';
        td = tr.insertCell();
        td.innerHTML = button;
        document.getElementById("bwapply_" + i).disabled = true;
@@ -31,7 +31,7 @@ function iClicked(i)
   var tbl = document.getElementById('bwtable');
   var tr = tbl.rows[i];
   if (!document.getElementById("ilimit_port_" + i).checked) {
-    tr.cells[2].innerHTML = "UNLIMITED";
+            tr.cells[2].innerHTML = t('bw_unlimited');
     document.getElementById("fc_port_" + i).disabled = true;
     document.getElementById("fc_port_" + i).checked = true;
   } else {
@@ -47,7 +47,7 @@ function eClicked(i)
   var tbl = document.getElementById('bwtable');
   var tr = tbl.rows[i];
   if (!document.getElementById("elimit_port_" + i).checked) {
-    tr.cells[5].innerHTML = "UNLIMITED";
+            tr.cells[5].innerHTML = t('bw_unlimited');
   } else {
     tr.cells[5].innerHTML = '<input id="ebw_' + i + iLayout + i + ')" value="0"/>';
   }
@@ -110,12 +110,12 @@ function getBW() {
           document.getElementById("ilimit_port_" + (n+1)).checked = p.iLimited;
           document.getElementById("elimit_port_" + (n+1)).checked = p.eLimited;
           if (!p.iLimited) {
-            tr.cells[2].innerHTML = "UNLIMITED";
+    tr.cells[2].innerHTML = t('bw_unlimited');
           } else {
             tr.cells[2].innerHTML = '<input id="ibw_' + (n+1) + iLayout + (n+1) + ')" value="' + iBW +'"/>';
           }
           if (!p.eLimited) {
-            tr.cells[5].innerHTML = "UNLIMITED";
+    tr.cells[5].innerHTML = t('bw_unlimited');
           } else {
             tr.cells[5].innerHTML = '<input id="ebw_' + (n+1) + iLayout + (n+1) + ')" value="' + eBW +'"/>';
           }

html/eee.html

@@ -1,21 +1,22 @@
 <!DOCTYPE html>
 <html>
   <script src="/main.js"></script>
+  <script src="/i18n.js"></script>
   <link rel="stylesheet" href="style.css">
-  <title>EEE Configuration</title>
+  <title data-i18n="eee_title">EEE Configuration</title>
   </head>
   <body>
     <nav id="sidebar"></nav>
     <div style="margin-left:16%;padding:1px 16px;height:1000px;">
     <div id="ports"></div>
-    <h1>EEE Status</h1>
+    <h1 data-i18n="eee_heading">EEE Status</h1>
     <table id="eeetable">
-      <tr> <th> </th> <th colspan="3"> Advertising </th> <th colspan="3">Link-Partner advertises</th>  <th></th></tr>
+      <tr> <th> </th> <th colspan="3" data-i18n="eee_advertising"> Advertising </th> <th colspan="3" data-i18n="eee_partner">Link-Partner advertises</th>  <th></th></tr>
-      <tr> <th>Port</th> <th>2.5G</th> <th>1G</th> <th>100M</th> <th>2.5G</th> <th>1G</th> <th>100M</th>  <th>Active?</th></tr>
+      <tr> <th data-i18n="eee_port">Port</th> <th>2.5G</th> <th>1G</th> <th>100M</th> <th>2.5G</th> <th>1G</th> <th>100M</th>  <th data-i18n="eee_active">Active?</th></tr>
     </table>
     <div>
-      <input style="width:20%;" class="action" id="eee_enable" onclick="eeeSub(0, 1);" type="button" value="Enable EEE">
+      <input style="width:20%;" class="action" id="eee_enable" onclick="eeeSub(0, 1);" type="button" data-i18n="eee_enable" value="Enable EEE">
-      <input style="width:20%;" class="action" id="eee_enable" onclick="eeeSub(0, 0);" type="button" value="Disable EEE">
+      <input style="width:20%;" class="action" id="eee_disable" onclick="eeeSub(0, 0);" type="button" data-i18n="eee_disable" value="Disable EEE">
     </div>
     <script src="/eee.js"></script>
     <script src="/eee_sub.js"></script>

html/eee.js

@@ -5,7 +5,7 @@ function createEEE() {
      for (let i = 2; i < 2 + numPorts; i++) {
       console.log("Table row: " + i + "pState: " + pState[i-2]);
       const tr = tbl.insertRow();
-      let td = tr.insertCell(); td.appendChild(document.createTextNode(`Port ${i-1}`));
+      let td = tr.insertCell(); td.appendChild(document.createTextNode(t('common_port') + (i-1)));
       for (let j = 0; j < 7; j++) {
         td = tr.insertCell(); td.appendChild(document.createTextNode(" "));
       }
@@ -28,8 +28,8 @@ function getEEE() {
           let tr = tbl.rows[n+1];
           if (!p.isSFP) {
             let eee = parseInt(p.eee,2); let lp = parseInt(p.eee_lp,2);
-            tr.cells[1].innerHTML = `${eee&4?"ON":"OFF"}`; tr.cells[2].innerHTML = `${eee&2?"ON":"OFF"}`; tr.cells[3].innerHTML = `${eee&1?"ON":"OFF"}`;
+            tr.cells[1].innerHTML = `${eee&4?t('eee_on'):t('eee_off')}`; tr.cells[2].innerHTML = `${eee&2?t('eee_on'):t('eee_off')}`; tr.cells[3].innerHTML = `${eee&1?t('eee_on'):t('eee_off')}`;
-            tr.cells[4].innerHTML = `${lp&4?"ON":"OFF"}`; tr.cells[5].innerHTML = `${lp&2?"ON":"OFF"}`; tr.cells[6].innerHTML = `${lp&1?"ON":"OFF"}`;
+            tr.cells[4].innerHTML = `${lp&4?t('eee_on'):t('eee_off')}`; tr.cells[5].innerHTML = `${lp&2?t('eee_on'):t('eee_off')}`; tr.cells[6].innerHTML = `${lp&1?t('eee_on'):t('eee_off')}`;
             tr.cells[7].innerHTML = `${p.active}`;
             tr.classList.toggle('disabled', pState[i-2] < 0); tr.classList.toggle('isNOK', !p.active); tr.classList.toggle('isOK', p.active);
           }

html/i18n.js

@@ -0,0 +1,398 @@
+var LANG = {
+  en: {
+    nav_overview: 'Overview',
+    nav_port_config: 'Port Configuration',
+    nav_port_stat: 'Port Statistics',
+    nav_l2: 'L2 Configuration',
+    nav_mirror: 'Mirroring',
+    nav_lag: 'Link Aggregation',
+    nav_eee: 'EEE',
+    nav_bandwidth: 'Bandwidth Limits',
+    nav_system: 'System Settings',
+    nav_fw_update: 'Firmware Update',
+
+    port_name: 'Name',
+    port_status: 'Status',
+    port_not_enabled: 'Not enabled.',
+    port_link_speed: 'Link speed',
+    port_vendor: 'Vendor',
+    port_model: 'Model',
+    port_serial: 'Serial',
+    port_temp: 'Temp',
+    port_vcc: 'Vcc',
+    port_tx_fault: 'TX-Fault',
+    port_tx_disabled: 'TX-Disabled',
+    port_tx_bias: 'TX-Bias',
+    port_tx_power: 'TX-Power',
+    port_rx_power: 'RX-Power',
+    port_rx_los: 'RX-LOS',
+
+    speed_disabled: 'Disabled',
+    speed_down: 'Down',
+
+    port_title: 'FreeSwitchOS Port Configuration',
+    port_heading: 'Port Configuration',
+    port_col_port: 'Port',
+    port_col_name: 'Name',
+    port_col_speed: 'Current Link Speed',
+    port_col_set_speed: 'Set Speed',
+    port_col_disabled: 'Disabled',
+    port_col_apply: 'Apply',
+    port_mtu_heading: 'Configure Maximum Frame Size (MTU) forwarded at Port',
+    port_auto: 'Auto',
+    port_2500m: '2500MBit/Full',
+    port_1000m: '1000MBit/Full',
+    port_100m_f: '100MBit/Full',
+    port_100m_h: '100MBit/Half',
+    port_10m_f: '10MBit/Full',
+    port_10m_h: '10MBit/Half',
+    port_apply: 'Apply',
+
+    stat_title: 'FreeSwitchOS Port Statistics',
+    stat_heading: 'Port Statistics',
+    stat_detailed: 'Detailed Port Statistics',
+    stat_close: 'Close',
+    stat_col_port: 'Port',
+    stat_col_name: 'Name',
+    stat_col_link: 'link',
+    stat_col_tx_good: 'TX Good',
+    stat_col_tx_bad: 'TX Bad',
+    stat_col_rx_good: 'RX Good',
+    stat_col_rx_bad: 'RX Bad',
+    stat_col_all: 'All Counters',
+    stat_counter: 'Counter',
+    stat_value: 'Value',
+    stat_show: 'Show',
+
+    vlan_title: 'FreeSwitchOS VLAN Configuration',
+    vlan_heading: 'VLAN Configuration',
+    vlan_select: 'VLAN Select:',
+    vlan_choose: '— VLAN Choose —',
+    vlan_id: 'VLAN ID:',
+    vlan_get_config: 'Get Configuration',
+    vlan_name: 'VLAN Name:',
+    vlan_tagged: 'Tagged Ports',
+    vlan_untagged: 'Untagged Ports',
+    vlan_select_all: 'Select all',
+    vlan_pvid: 'Use as default VLAN for incoming traffic (PVID)',
+    vlan_update: 'Update / Create',
+    vlan_configured: 'Configured VLANs',
+    vlan_col_name: 'Name',
+    vlan_col_member: 'Member Ports',
+    vlan_col_tagged: 'Tagged Ports',
+    vlan_col_untagged: 'Untagged Ports',
+    vlan_col_pvid: 'PVID Ports',
+    vlan_col_delete: 'Delete',
+    vlan_set_id_first: 'Set VLAN ID first',
+    vlan_delete_confirm: 'Delete VLAN ',
+
+    lag_title: 'Link Aggregation Configuration',
+    lag_heading: 'Link Aggregation Groups Configuration',
+    lag_update: 'Update / Create',
+
+    mirror_title: 'Mirror Configuration',
+    mirror_heading: 'Mirror Configuration',
+    mirror_enabled: 'Enabled:',
+    mirror_port: 'Mirroring Port:',
+    mirror_tx: 'Mirrored Ports (TX)',
+    mirror_rx: 'Mirrored Ports (RX)',
+    mirror_update: 'Update / Create',
+    mirror_disable: 'Disable Mirroring',
+    mirror_set_port_first: 'Set Mirroring Port first',
+    mirror_select_ports: 'Select Mirrored Ports',
+
+    eee_title: 'EEE Configuration',
+    eee_heading: 'EEE Status',
+    eee_advertising: 'Advertising',
+    eee_partner: 'Link-Partner advertises',
+    eee_port: 'Port',
+    eee_active: 'Active?',
+    eee_enable: 'Enable EEE',
+    eee_disable: 'Disable EEE',
+    eee_on: 'ON',
+    eee_off: 'OFF',
+
+    l2_title: 'FreeSwitchOS L2 Configuration',
+    l2_heading: 'L2 Configuration',
+    l2_col_port: 'Port',
+    l2_col_type: 'Type',
+    l2_col_remove: 'Remove Entry',
+    l2_delete: 'Delete',
+    l2_static: 'static',
+    l2_learned: 'learned',
+
+    bw_title: 'Ingress and Egress Bandwidth',
+    bw_heading: 'Ingress and Egress Bandwidth',
+    bw_ingress: 'Ingress',
+    bw_egress: 'Egress',
+    bw_col_port: 'Port',
+    bw_col_limit: 'Limit',
+    bw_col_bandwidth: 'Bandwidth [kBit/s]',
+    bw_col_flow: 'Flow Control',
+    bw_col_apply: 'Apply',
+    bw_unlimited: 'UNLIMITED',
+
+    sys_title: 'System Settings',
+    sys_tab_system: 'System',
+    sys_tab_advanced: 'Advanced',
+    sys_tab_console: 'Console',
+    sys_heading: 'System Settings',
+    sys_ip: 'IP address:',
+    sys_netmask: 'Netmask:',
+    sys_gateway: 'Gateway:',
+    sys_ip_note: 'When updating the above settings, remember to point your browser to the new IP afterwards:',
+    sys_update: 'Update Settings',
+    sys_save_label: 'Save all current settings to Flash:',
+    sys_save: 'Save Settings to Flash',
+    sys_advanced: 'Advanced Settings',
+    sys_startup_config: 'Startup configuration:',
+    sys_startup_warn: 'Be careful when saving the directly edited startup configuration, you can lock yourself out:',
+    sys_clear_config: 'Clear Startup Config',
+    sys_save_startup: 'Save Startup Settings to Flash',
+    sys_reset: 'Reset Switch',
+    sys_console: 'Console Command',
+    sys_enter_cmd: 'Enter command:',
+    sys_send_cmd: 'Send Command',
+    sys_console_warn: 'Be careful when entering console commands, you can lock yourself out!',
+    sys_invalid_ip: 'Invalid ip:',
+    sys_reset_confirm: 'Are you sure you want to reset the switch?',
+    sys_resetting: 'Switch is resetting. Please wait and refresh the page.',
+
+    login_title: 'RTL Switch Login',
+    login_heading: 'RTL Switch Login',
+    login_wrong: 'Wrong password!',
+    login_password: 'Password',
+    login_login: 'Login',
+
+    index_title: 'FreeSwitchOS Main Page',
+    index_heading: 'Switch Configuration',
+    index_settings: 'Settings',
+
+    update_title: 'Firmware update',
+    update_heading: 'Firmware Update',
+    update_instruction: 'Choose a firmware update file to upload:',
+    update_upload: 'Upload File',
+
+    common_port: 'Port ',
+    common_pkts: ' pkts',
+  },
+
+  ja: {
+    nav_overview: '概要',
+    nav_port_config: 'ポート設定',
+    nav_port_stat: 'ポート統計',
+    nav_l2: 'L2 設定',
+    nav_mirror: 'ミラーリング',
+    nav_lag: 'リンクアグリゲーション',
+    nav_eee: 'EEE',
+    nav_bandwidth: '帯域制限',
+    nav_system: 'システム設定',
+    nav_fw_update: 'ファームウェア更新',
+
+    port_name: '名前',
+    port_status: '状態',
+    port_not_enabled: '無効',
+    port_link_speed: 'リンク速度',
+    port_vendor: 'ベンダー',
+    port_model: 'モデル',
+    port_serial: 'シリアル',
+    port_temp: '温度',
+    port_vcc: '電圧',
+    port_tx_fault: 'TX 障害',
+    port_tx_disabled: 'TX 無効',
+    port_tx_bias: 'TX バイアス',
+    port_tx_power: 'TX 電力',
+    port_rx_power: 'RX 電力',
+    port_rx_los: 'RX 信号ロス',
+
+    speed_disabled: '無効',
+    speed_down: 'リンクダウン',
+
+    port_title: 'FreeSwitchOS ポート設定',
+    port_heading: 'ポート設定',
+    port_col_port: 'ポート',
+    port_col_name: '名前',
+    port_col_speed: '現在のリンク速度',
+    port_col_set_speed: '速度設定',
+    port_col_disabled: '無効',
+    port_col_apply: '適用',
+    port_mtu_heading: 'ポートの最大フレームサイズ (MTU) 設定',
+    port_auto: '自動',
+    port_2500m: '2500Mbps/全二重',
+    port_1000m: '1000Mbps/全二重',
+    port_100m_f: '100Mbps/全二重',
+    port_100m_h: '100Mbps/半二重',
+    port_10m_f: '10Mbps/全二重',
+    port_10m_h: '10Mbps/半二重',
+    port_apply: '適用',
+
+    stat_title: 'FreeSwitchOS ポート統計',
+    stat_heading: 'ポート統計',
+    stat_detailed: '詳細ポート統計',
+    stat_close: '閉じる',
+    stat_col_port: 'ポート',
+    stat_col_name: '名前',
+    stat_col_link: 'リンク',
+    stat_col_tx_good: 'TX 正常',
+    stat_col_tx_bad: 'TX 異常',
+    stat_col_rx_good: 'RX 正常',
+    stat_col_rx_bad: 'RX 異常',
+    stat_col_all: '全カウンタ',
+    stat_counter: 'カウンタ',
+    stat_value: '値',
+    stat_show: '表示',
+
+    vlan_title: 'FreeSwitchOS VLAN 設定',
+    vlan_heading: 'VLAN 設定',
+    vlan_select: 'VLAN 選択:',
+    vlan_choose: '— VLAN 選択 —',
+    vlan_id: 'VLAN ID:',
+    vlan_get_config: '設定取得',
+    vlan_name: 'VLAN 名:',
+    vlan_tagged: 'タグ付きポート',
+    vlan_untagged: 'タグ無しポート',
+    vlan_select_all: 'すべて選択',
+    vlan_pvid: '受信トラフィックのデフォルト VLAN (PVID)',
+    vlan_update: '更新 / 作成',
+    vlan_configured: '設定済み VLAN',
+    vlan_col_name: '名前',
+    vlan_col_member: 'メンバーポート',
+    vlan_col_tagged: 'タグ付きポート',
+    vlan_col_untagged: 'タグ無しポート',
+    vlan_col_pvid: 'PVID ポート',
+    vlan_col_delete: '削除',
+    vlan_set_id_first: 'VLAN ID を先に設定してください',
+    vlan_delete_confirm: 'VLAN 削除 ',
+
+    lag_title: 'リンクアグリゲーション設定',
+    lag_heading: 'リンクアグリゲーショングループ設定',
+    lag_update: '更新 / 作成',
+
+    mirror_title: 'ミラーリング設定',
+    mirror_heading: 'ミラーリング設定',
+    mirror_enabled: '有効:',
+    mirror_port: 'ミラーポート:',
+    mirror_tx: 'ミラー元ポート (TX)',
+    mirror_rx: 'ミラー元ポート (RX)',
+    mirror_update: '更新 / 作成',
+    mirror_disable: 'ミラーリング無効化',
+    mirror_set_port_first: 'ミラーポートを先に設定してください',
+    mirror_select_ports: 'ミラー元ポートを選択してください',
+
+    eee_title: 'EEE 設定',
+    eee_heading: 'EEE 状態',
+    eee_advertising: 'EEE アドバタイジング',
+    eee_partner: 'リンクパートナー広告',
+    eee_port: 'ポート',
+    eee_active: '有効?',
+    eee_enable: 'EEE 有効化',
+    eee_disable: 'EEE 無効化',
+    eee_on: 'オン',
+    eee_off: 'オフ',
+
+    l2_title: 'FreeSwitchOS L2 設定',
+    l2_heading: 'L2 設定',
+    l2_col_port: 'ポート',
+    l2_col_type: 'タイプ',
+    l2_col_remove: 'エントリ削除',
+    l2_delete: '削除',
+    l2_static: '静的',
+    l2_learned: '学習',
+
+    bw_title: '入力/出力帯域制限',
+    bw_heading: '入力/出力帯域制限',
+    bw_ingress: '入力',
+    bw_egress: '出力',
+    bw_col_port: 'ポート',
+    bw_col_limit: '制限',
+    bw_col_bandwidth: '帯域 [kbps]',
+    bw_col_flow: 'フロー制御',
+    bw_col_apply: '適用',
+    bw_unlimited: '制限無し',
+
+    sys_title: 'システム設定',
+    sys_tab_system: 'システム',
+    sys_tab_advanced: '詳細設定',
+    sys_tab_console: 'コンソール',
+    sys_heading: 'システム設定',
+    sys_ip: 'IP アドレス:',
+    sys_netmask: 'ネットマスク:',
+    sys_gateway: 'ゲートウェイ:',
+    sys_ip_note: '上記設定を変更した場合は、ブラウザで新しい IP にアクセスしてください:',
+    sys_update: '設定更新',
+    sys_save_label: '現在の設定をフラッシュに保存:',
+    sys_save: '設定をフラッシュに保存',
+    sys_advanced: '詳細設定',
+    sys_startup_config: '起動設定:',
+    sys_startup_warn: '起動設定を直接編集する際は注意してください。ロックアウトされる可能性があります:',
+    sys_clear_config: '起動設定クリア',
+    sys_save_startup: '起動設定をフラッシュに保存',
+    sys_reset: 'スイッチ再起動',
+    sys_console: 'コンソールコマンド',
+    sys_enter_cmd: 'コマンド入力:',
+    sys_send_cmd: 'コマンド送信',
+    sys_console_warn: 'コンソールコマンドは注意して入力してください。ロックアウトされる可能性があります!',
+    sys_invalid_ip: '無効な IP: ',
+    sys_reset_confirm: 'スイッチを再起動してもよろしいですか？',
+    sys_resetting: 'スイッチを再起動中です。しばらく待ってからページをリロードしてください。',
+
+    login_title: 'RTL スイッチ ログイン',
+    login_heading: 'RTL スイッチ ログイン',
+    login_wrong: 'パスワードが違います!',
+    login_password: 'パスワード',
+    login_login: 'ログイン',
+
+    index_title: 'FreeSwitchOS メインページ',
+    index_heading: 'スイッチ設定',
+    index_settings: '設定',
+
+    update_title: 'ファームウェア更新',
+    update_heading: 'ファームウェア更新',
+    update_instruction: 'アップロードするファームウェアファイルを選択:',
+    update_upload: 'ファイルをアップロード',
+
+    common_port: 'ポート ',
+    common_pkts: ' pkts',
+  }
+};
+
+var rtlLang = (function() {
+  var saved = localStorage.getItem('rtl_lang');
+  if (saved && LANG[saved]) return saved;
+  var browser = (navigator.language || navigator.userLanguage || 'en').substring(0, 2);
+  return LANG[browser] ? browser : 'en';
+})();
+
+function t(key) {
+  return LANG[rtlLang][key] || LANG['en'][key] || key;
+}
+
+function setLang(lang) {
+  if (LANG[lang]) {
+    localStorage.setItem('rtl_lang', lang);
+    rtlLang = lang;
+    document.querySelectorAll('[data-i18n]').forEach(function(el) {
+      applyTranslation(el);
+    });
+  }
+}
+
+function applyTranslation(el) {
+  var key = el.getAttribute('data-i18n');
+  if (!key) return;
+  if (el.tagName === 'INPUT' && (el.type === 'submit' || el.type === 'button')) {
+    el.value = t(key);
+  } else if (el.tagName === 'OPTION') {
+    el.textContent = t(key);
+  } else if (el.tagName === 'TITLE') {
+    el.textContent = t(key);
+  } else {
+    el.innerHTML = t(key);
+  }
+}
+
+document.addEventListener('DOMContentLoaded', function() {
+  document.querySelectorAll('[data-i18n]').forEach(function(el) {
+    applyTranslation(el);
+  });
+});

html/index.html

@@ -2,6 +2,7 @@
 <html>
   <script src="/main.js"></script>
   <script src="/main_info.js"></script>
+  <script src="/i18n.js"></script>
   <script>
   window.addEventListener("load", function() {
     update( () => {
@@ -10,17 +11,17 @@
   });
   </script>
   <link rel="stylesheet" href="style.css">
-  <title>FreeSwitchOS Main Page</title>
+  <title data-i18n="index_title">FreeSwitchOS Main Page</title>
 </head>
 
 <body>
   <nav id="sidebar"></nav>
   <div style="margin-left:16%;padding:1px 16px;height:1000px;">
     <div id="ports"></div>
-    <h1>Switch Configuration</h1>
+    <h1 data-i18n="index_heading">Switch Configuration</h1>
     <table id="infoTable">
       <tr>
-        <th colspan="2">Settings</th>
+        <th colspan="2" data-i18n="index_settings">Settings</th>
       </tr>
       <tbody>
       </tbody>

html/l2.html

@@ -1,16 +1,17 @@
 <!DOCTYPE html>
 <html>
   <script src="/main.js"></script>
+  <script src="/i18n.js"></script>
   <link rel="stylesheet" href="style.css">
-  <title>FreeSwitchOS L2 Configuration</title>
+  <title data-i18n="l2_title">FreeSwitchOS L2 Configuration</title>
   </head>
   <body>
     <nav id="sidebar"></nav>
     <div style="margin-left:16%;padding:1px 16px;height:1000px;">
     <div id="ports"></div>
-    <h1>L2 Configuration</h1>
+    <h1 data-i18n="l2_heading">L2 Configuration</h1>
     <table id="l2table">
-      <tr> <th>Port</th> <th>MAC</th> <th>VLAN</th> <th>Type</th> <th>Remove Entry</th></tr>
+      <tr> <th data-i18n="l2_col_port">Port</th> <th>MAC</th> <th>VLAN</th> <th data-i18n="l2_col_type">Type</th> <th data-i18n="l2_col_remove">Remove Entry</th></tr>
       <script src="/l2.js"></script>
     </table>
     </div>

html/l2.js

@@ -9,22 +9,22 @@ function fillStats() {
   if (tbl.rows.length > 1) {
     for (let i = 0; i < numPorts; i++) {
       console.log("Table Update row: " + i + " state " + pState[i] + " is " + linkS[pState[i] +1]);
-      tbl.rows[i+1].cells[1].innerHTML = `${linkS[pState[i]+1]}`;
+      tbl.rows[i+1].cells[1].innerHTML = linkText(pState[i]+1);
-      tbl.rows[i+1].cells[2].innerHTML = `${txG[i]} pkts`;
+      tbl.rows[i+1].cells[2].innerHTML = `${txG[i]}` + t('common_pkts');
-      tbl.rows[i+1].cells[3].innerHTML = `${txB[i]} pkts`;
+      tbl.rows[i+1].cells[3].innerHTML = `${txB[i]}` + t('common_pkts');
-      tbl.rows[i+1].cells[4].innerHTML = `${rxG[i]} pkts`;
+      tbl.rows[i+1].cells[4].innerHTML = `${rxG[i]}` + t('common_pkts');
-      tbl.rows[i+1].cells[5].innerHTML = `${rxB[i]} pkts`;
+      tbl.rows[i+1].cells[5].innerHTML = `${rxB[i]}` + t('common_pkts');
     }
   } else {
     for (let i = 0; i < numPorts; i++) {
       console.log("Table row: " + i);
       const tr = tbl.insertRow();
-      let td = tr.insertCell(); td.appendChild(document.createTextNode(`Port ${i+1}`));
+      let td = tr.insertCell(); td.appendChild(document.createTextNode(t('common_port') + (i+1)));
-      td = tr.insertCell(); td.appendChild(document.createTextNode(`${linkS[pState[i]+1]}`));
+      td = tr.insertCell(); td.appendChild(document.createTextNode(linkText(pState[i]+1)));
-      td = tr.insertCell(); td.appendChild(document.createTextNode(`${txG[i]} pkts`));
+      td = tr.insertCell(); td.appendChild(document.createTextNode(`${txG[i]}` + t('common_pkts')));
-      td = tr.insertCell();td.appendChild(document.createTextNode(`${txB[i]} pkts`));
+      td = tr.insertCell();td.appendChild(document.createTextNode(`${txB[i]}` + t('common_pkts')));
-      td = tr.insertCell();td.appendChild(document.createTextNode(`${rxG[i]} pkts`));
+      td = tr.insertCell();td.appendChild(document.createTextNode(`${rxG[i]}` + t('common_pkts')));
-      td = tr.insertCell();td.appendChild(document.createTextNode(`${rxB[i]} pkts`));
+      td = tr.insertCell();td.appendChild(document.createTextNode(`${rxB[i]}` + t('common_pkts')));
     }
   }
 }
@@ -71,7 +71,7 @@ function fillL2(s)
     return;
   s.sort(l2CMP);
   s = uniq(s);
-  var s = s.map(function(e) { e.port = e.port != 9 ? e.port : "CPU"; return e; });
+  var s = s.map(function(e) { e.port = e.port != 9 ? e.port : 'CPU'; return e; });
   console.log("L2: ", JSON.stringify(s));
   for (let i = 0; i < s.length; i++) {
     var e = s[i];
@@ -80,14 +80,14 @@ function fillL2(s)
       tbl.rows[i+1].cells[0].innerHTML = `${e.port}`;
       tbl.rows[i+1].cells[1].innerHTML = `${e.mac}`;
       tbl.rows[i+1].cells[2].innerHTML = `${e.vlan}`;
-      tbl.rows[i+1].cells[4].innerHTML = '<button type="button" onclick="delL2(' + e.idx + ');">Delete</button>';
+      tbl.rows[i+1].cells[4].innerHTML = '<button type="button" onclick="delL2(' + e.idx + ');">' + t('l2_delete') + '</button>';
     } else {
       const tr = tbl.insertRow();
       let td = tr.insertCell(); td.innerHTML = `${e.port}`;
       td = tr.insertCell(); td.innerHTML = `${e.mac}`;
       td = tr.insertCell(); td.innerHTML = `${e.vlan}`;
       td = tr.insertCell(); td.innerHTML = `${e.type}`;
-      td = tr.insertCell(); td.innerHTML = '<button type="button" onclick="delL2(' + e.idx + ');">Delete</button>';
+      td = tr.insertCell(); td.innerHTML = '<button type="button" onclick="delL2(' + e.idx + ');">' + t('l2_delete') + '</button>';
     }
   }
   for (let i = tbl.rows.length - 1; i > s.length; i--)
@@ -103,7 +103,7 @@ function getL2() {
       var s = s.map(function(e) { 
         e.vlan = parseInt(e.vlan, 16);
         e.idx = parseInt(e.idx, 16);
-        e.type = e.type == "s" ? "static" : "learned";
+        e.type = e.type == "s" ? t('l2_static') : t('l2_learned');
         e.port = e.port == 9 ? 9 : logToPhysPort[e.port];
       return e;
     });

html/lag.html

@@ -1,24 +1,25 @@
 <!DOCTYPE html>
 <html>
   <script src="/main.js"></script>
+  <script src="/i18n.js"></script>
   <link rel="stylesheet" href="style.css">
-  <title>Link Aggregation Configuration</title>
+  <title data-i18n="lag_title">Link Aggregation Configuration</title>
   </head>
   <body>
     <nav id="sidebar"></nav>
     <div style="margin-left:16%;padding:1px 16px;height:1000px;">
     <div id="ports"></div>
-    <h1>Link Aggregation Groups Configuration</h1>
+    <h1 data-i18n="lag_heading">Link Aggregation Groups Configuration</h1>
-    <h2>LAG 1 <input style="width:15%;margin-left: 3em;" class="action" id="l_sub0" onclick="lagSub(0);" type="button" value="Update / Create"></h2>
+    <h2>LAG 1 <input style="width:15%;margin-left: 3em;" class="action" id="l_sub0" onclick="lagSub(0);" type="button" data-i18n="lag_update" value="Update / Create"></h2>
     <div id="mLAG0"></div>
     <br />
-    <h2>LAG 2 <input style="width:15%;margin-left: 3em;" class="action" id="l_sub1" onclick="lagSub(1);" type="button" value="Update / Create"></h2>
+    <h2>LAG 2 <input style="width:15%;margin-left: 3em;" class="action" id="l_sub1" onclick="lagSub(1);" type="button" data-i18n="lag_update" value="Update / Create"></h2>
     <div id="mLAG1"></div>
     <br />
-    <h2>LAG 3 <input style="width:15%;margin-left: 3em;" class="action" id="l_sub2" onclick="lagSub(2);" type="button" value="Update / Create"></h2>
+    <h2>LAG 3 <input style="width:15%;margin-left: 3em;" class="action" id="l_sub2" onclick="lagSub(2);" type="button" data-i18n="lag_update" value="Update / Create"></h2>
     <div id="mLAG2"></div>
     <br />
-    <h2>LAG 4 <input style="width:15%;margin-left: 3em;" class="action" id="l_sub3" onclick="lagSub(3);" type="button" value="Update / Create"></h2>
+    <h2>LAG 4 <input style="width:15%;margin-left: 3em;" class="action" id="l_sub3" onclick="lagSub(3);" type="button" data-i18n="lag_update" value="Update / Create"></h2>
     <div id="mLAG3"></div>
     <script src="/lag.js"></script>
     </div>

html/login.html

@@ -1,30 +1,30 @@
 <!DOCTYPE html>
 <html>
-  <title>RTL Switch Login</title>
+  <title data-i18n="login_title">RTL Switch Login</title>
   <link rel="stylesheet" href="style.css">
+  <script src="/i18n.js"></script>
   <script>
     function removeNote() {
       document.getElementById("incorrect").innerHTML = "";
     }
     window.addEventListener("load", function() {
       if (document.referrer.endsWith("login.html"))
-      document.getElementById("incorrect").innerHTML = "Wrong password!";
+        document.getElementById("incorrect").innerHTML = t('login_wrong');
     });
-    </script>
+  </script>
 </head>
 
 <body class="login_page">
   <div class = "center">
-  <h1> RTL Switch Login</h1>
+  <h1 data-i18n="login_heading"> RTL Switch Login</h1>
   <form method="post" action="login">
   <div class="txt_field">
     <input name="pwd" type="password" onclick="removeNote()" required />
     <span></span>
-    <label>Password</label>
+    <label data-i18n="login_password">Password</label>
   </div>
-  <input type="submit" value="Login"/>
+  <input type="submit" data-i18n="login_login" value="Login"/>
   <h3 id="incorrect" style="margin-top: 5em;"></h3>
   </form>
 </body>
 </html>
-

html/main.js

@@ -2,11 +2,12 @@ var txG = new BigInt64Array(10);
 var txB = new BigInt64Array(10);
 var rxG = new BigInt64Array(10);
 var rxB = new BigInt64Array(10);
-const linkS = ["Disabled", "Down", "10M", "100M", "1000M", "500M", "10G", "2.5G", "5G"];
+const linkS = [function(){return t('speed_disabled')}, function(){return t('speed_down')}, "10M", "100M", "1000M", "500M", "10G", "2.5G", "5G"];
 var pState = new Int8Array(10);
 var pIsSFP = new Int8Array(10);
 var pAdvertised = new Int8Array(10);
 var numPorts = 0;
+function linkText(idx) { var v = linkS[idx]; return typeof v === 'function' ? v() : v; }
 var logToPhysPort = new Int8Array(10);
 var physToLogPort = new Int8Array(10);
 var portNames = new Array(10);
@@ -21,7 +22,7 @@ function drawPorts() {
     d.classList.add('tooltip');
     const s = document.createElement("span");
     s.classList.add("tooltiptext");
-    s.innerHTML = "Tooltip text";
+    s.innerHTML = t('common_port');
     s.id="tt_" + (i+1);
     const l = document.createElement("object");
     d.appendChild(l);
@@ -152,13 +153,13 @@ function update(callback) {
           continue;
 	const portName = p.name || portNames[p.logPort] || '';
 	var iHTML = "<table border=\"0\" class=\"tt_table\">";
-	if (portName) iHTML += "<tr><td align=\"left\">Name</td><td>:</td><td>" + portName + "</td></tr>";
+	if (portName) iHTML += "<tr><td align=\"left\">" + t('port_name') + "</td><td>:</td><td>" + portName + "</td></tr>";
 	if (p.enabled == 0) {
 	  pState[n] = -1;
 	  bgs[0].style.fill = "red";
 	  leds[0].style.fill = "black"; leds[1].style.fill = "black";
 	  psvg.style.opacity = 0.4;
-	  iHTML += "<tr><td align=\"left\">Status</td><td>:</td><td>Not enabled.</td></tr>";
+	  iHTML += "<tr><td align=\"left\">" + t('port_status') + "</td><td>:</td><td>" + t('port_not_enabled') + "</td></tr>";
 	  iHTML += "</table>";
 	  tt.innerHTML = iHTML;
 	} else {
@@ -174,31 +175,31 @@ function update(callback) {
 	    leds[0].style.fill = "black"; leds[1].style.fill = "black";
 	    psvg.style.opacity = 0.4
 	  }
-	  iHTML += "<tr><td align=\"left\">Link speed</td><td>:</td><td>" + linkS[p.link + 1] + "</td></tr>";
+	  iHTML += "<tr><td align=\"left\">" + t('port_link_speed') + "</td><td>:</td><td>" + linkText(p.link + 1) + "</td></tr>";
 	  if (p.isSFP) {
 	    pAdvertised[n] = 0;
 	    const hasExtendedStatus = p.sfp_options & 0x40;
-	    iHTML += "<tr><td>Vendor</td><td>:</td><td>" + p.sfp_vendor + "</td></tr>";
+	    iHTML += "<tr><td>" + t('port_vendor') + "</td><td>:</td><td>" + p.sfp_vendor + "</td></tr>";
-	    iHTML += "<tr><td>Model</td><td>:</td><td>" + p.sfp_model + "</td></tr>";
+	    iHTML += "<tr><td>" + t('port_model') + "</td><td>:</td><td>" + p.sfp_model + "</td></tr>";
-	    iHTML += "<tr><td>Serial</td><td>:</td><td>" + p.sfp_serial + "</td></tr>";
+	    iHTML += "<tr><td>" + t('port_serial') + "</td><td>:</td><td>" + p.sfp_serial + "</td></tr>";
 	    if (hasExtendedStatus) {
 	      let txPower = decodeSfpTxPower(p.sfp_txpower, p.sfp_txpower_cal);
 	      let txPowerdBm = convertPowerTodBm(txPower);
 	      let rxPower = decodeSfpRxPower(p.sfp_rxpower, p.sfp_rxpower_cal);
 	      let rxPowerdBm = convertPowerTodBm(rxPower);
-	      iHTML += "<tr><td>Temp</td><td>:</td><td>" + decodeSfpTemp(p.sfp_temp, p.sfp_temp_cal).toFixed(2) + "&#8239;&#8451;</td></tr>";
+	      iHTML += "<tr><td>" + t('port_temp') + "</td><td>:</td><td>" + decodeSfpTemp(p.sfp_temp, p.sfp_temp_cal).toFixed(2) + "&#8239;&#8451;</td></tr>";
-	      iHTML += "<tr><td>Vcc</td><td>:</td><td>" + decodeSfpVcc(p.sfp_vcc, p.sfp_vcc_cal).toFixed(2) + "&#8239;V</td></tr>";
+	      iHTML += "<tr><td>" + t('port_vcc') + "</td><td>:</td><td>" + decodeSfpVcc(p.sfp_vcc, p.sfp_vcc_cal).toFixed(2) + "&#8239;V</td></tr>";
-	      iHTML += "<tr><td>TX-Fault</td><td>:</td><td>" + (Boolean(Number(p.sfp_state) & 0x4)) + "</td></tr>";
+	      iHTML += "<tr><td>" + t('port_tx_fault') + "</td><td>:</td><td>" + (Boolean(Number(p.sfp_state) & 0x4)) + "</td></tr>";
-	      iHTML += "<tr><td>TX-Disabled</td><td>:</td><td>" + (Boolean(Number(p.sfp_state) & 0x80)) + "</td></tr>";
+	      iHTML += "<tr><td>" + t('port_tx_disabled') + "</td><td>:</td><td>" + (Boolean(Number(p.sfp_state) & 0x80)) + "</td></tr>";
-	      iHTML += "<tr><td>TX-Bias</td><td>:</td><td>" + decodeSfpTxBias(p.sfp_txbias, p.sfp_txbias_cal).toFixed(1) + "&#8239;mA</td></tr>";
+	      iHTML += "<tr><td>" + t('port_tx_bias') + "</td><td>:</td><td>" + decodeSfpTxBias(p.sfp_txbias, p.sfp_txbias_cal).toFixed(1) + "&#8239;mA</td></tr>";
-	      iHTML += "<tr><td>TX-Power</td><td>:</td><td>" + txPower.toFixed(3) + "&#8239;mW / " + txPowerdBm.toFixed(2) + "&#8239;dBm</td></tr>";
+	      iHTML += "<tr><td>" + t('port_tx_power') + "</td><td>:</td><td>" + txPower.toFixed(3) + "&#8239;mW / " + txPowerdBm.toFixed(2) + "&#8239;dBm</td></tr>";
-	      iHTML += "<tr><td>RX-Power</td><td>:</td><td>" + rxPower.toFixed(3) + "&#8239;mW / " + rxPowerdBm.toFixed(2) + "&#8239;dBm</td></tr>";
+	      iHTML += "<tr><td>" + t('port_rx_power') + "</td><td>:</td><td>" + rxPower.toFixed(3) + "&#8239;mW / " + rxPowerdBm.toFixed(2) + "&#8239;dBm</td></tr>";
 	    }
 	    // Not all devices & modules have LOS pin...
 	    const rx_los_pin = p.sfp_los !== null ? Boolean(Number(p.sfp_los)) : null;
 	    const rx_los_module = hasExtendedStatus ? Boolean(Number(p.sfp_state) & 0x2) : null;
 	    if (rx_los_module !== null || rx_los_pin !== null) {
-	      iHTML += `<tr><td>RX-LOS</td><td>:</td><td>${rxLosHTML(rx_los_pin, rx_los_module)}</td></tr>`;
+	      iHTML += `<tr><td>` + t('port_rx_los') + `</td><td>:</td><td>${rxLosHTML(rx_los_pin, rx_los_module)}</td></tr>`;
 	    }
 	  } else {
 	    pAdvertised[n] = parseInt(p.adv, 2);

html/mirror.html

@@ -1,23 +1,24 @@
 <!DOCTYPE html>
 <html>
   <script src="/main.js"></script>
+  <script src="/i18n.js"></script>
   <link rel="stylesheet" href="style.css">
-  <title>Mirror Configuration</title>
+  <title data-i18n="mirror_title">Mirror Configuration</title>
   </head>
   <body>
     <nav id="sidebar"></nav>
     <div style="margin-left:16%;padding:1px 16px;height:1000px;">
     <div id="ports"></div>
-    <h1>Mirror Configuration</h1>
+    <h1 data-i18n="mirror_heading">Mirror Configuration</h1>
-    <label class="tswitch">Enabled: <input id="me" type="checkbox"></label><br/>
+    <label class="tswitch"><span data-i18n="mirror_enabled">Enabled:</span> <input id="me" type="checkbox"></label><br/>
-    <label for="mp">Mirroring Port:</label> <input type="number" id="mp" name="mp" min="1" max="9"/>
+    <label for="mp"><span data-i18n="mirror_port">Mirroring Port:</span></label> <input type="number" id="mp" name="mp" min="1" max="9"/>
-    <h2>Mirrored Ports (TX)</h2>
+    <h2 data-i18n="mirror_tx">Mirrored Ports (TX)</h2>
     <div id="mPortsTX"></div>
     <br />
-    <h2>Mirrored Ports (RX)</h2>
+    <h2 data-i18n="mirror_rx">Mirrored Ports (RX)</h2>
     <div id="mPortsRX"></div>
-    <br/> <input style="width:15%;" class="action" id="mirror_sub" onclick="mirrorSub();" type="button" value="Update / Create">
+    <br/> <input style="width:15%;" class="action" id="mirror_sub" onclick="mirrorSub();" type="button" data-i18n="mirror_update" value="Update / Create">
-    <input style="width:15%;" class="action" id="mirror_del" onclick="mirrorDel();" type="button" value="Disable Mirroring">
+    <input style="width:15%;" class="action" id="mirror_del" onclick="mirrorDel();" type="button" data-i18n="mirror_disable" value="Disable Mirroring">
     <script src="/mirror.js"></script>
     <script src="/mirror_sub.js"></script>
     </div>

html/mirror_sub.js

@@ -2,7 +2,7 @@ async function mirrorSub() {
   var cmd = "mirror ";
   var mp=document.getElementById('mp').value
   if (!mp) {
-    alert("Set Mirroring Port first");
+    alert(t('mirror_set_port_first'));
     return;
   }
   document.getElementById(mirrors[0]+mp).checked=false;document.getElementById(mirrors[1]+mp).checked=false;
@@ -16,7 +16,7 @@ async function mirrorSub() {
       cmd = cmd + ` ${i}r`;
   }
   if (cmd.length < 10) {
-    alert("Select Mirrored Ports");
+    alert(t('mirror_select_ports'));
     return;
   }
   try {

html/navigation.js

@@ -1,12 +1,20 @@
 document.getElementById('sidebar').innerHTML =
- "<ul><li><a href='index.html'>Overview</a></li>"
+ "<ul><li><a href='index.html' data-i18n='nav_overview'>Overview</a></li>"
- + "<li><a href='ports.html'>Port Configuration</a></li>"
+ + "<li><a href='ports.html' data-i18n='nav_port_config'>Port Configuration</a></li>"
- + "<li><a href='stat.html'>Port Statistics</a></li>"
+ + "<li><a href='stat.html' data-i18n='nav_port_stat'>Port Statistics</a></li>"
- + "<li><a href='vlan.html'>VLAN</a></li>"
+ + "<li><a href='vlan.html' >VLAN</a></li>"
- + "<li><a href='l2.html'>L2 Configuration</a></li>"
+ + "<li><a href='l2.html' data-i18n='nav_l2'>L2 Configuration</a></li>"
- + "<li><a href='mirror.html'>Mirroring</a></li>"
+ + "<li><a href='mirror.html' data-i18n='nav_mirror'>Mirroring</a></li>"
- + "<li><a href='lag.html'>Link Aggregation</a></li>"
+ + "<li><a href='lag.html' data-i18n='nav_lag'>Link Aggregation</a></li>"
- + "<li><a href='eee.html'>EEE</a></li>"
+ + "<li><a href='eee.html' data-i18n='nav_eee'>EEE</a></li>"
- + "<li><a href='bandwidth.html'>Bandwidth Limits</a></li>"
+ + "<li><a href='bandwidth.html' data-i18n='nav_bandwidth'>Bandwidth Limits</a></li>"
- + "<li><a href='system.html'>System Settings</a></li>"
+ + "<li><a href='system.html' data-i18n='nav_system'>System Settings</a></li>"
- + "<li><a href='update.html'>Firmware Update</a></li></ul>";
+ + "<li><a href='update.html' data-i18n='nav_fw_update'>Firmware Update</a></li></ul>";
+
+document.addEventListener('DOMContentLoaded', function() {
+  var links = document.querySelectorAll('#sidebar a[data-i18n]');
+  links.forEach(function(el) {
+    var key = el.getAttribute('data-i18n');
+    if (key) el.textContent = t(key);
+  });
+});

html/ports.html

@@ -1,19 +1,20 @@
 <!DOCTYPE html>
 <html>
   <script src="/main.js"></script>
+  <script src="/i18n.js"></script>
   <link rel="stylesheet" href="style.css">
-  <title>FreeSwitchOS Port Configuration</title>
+  <title data-i18n="port_title">FreeSwitchOS Port Configuration</title>
   </head>
   <body>
     <nav id="sidebar"></nav>
     <div style="margin-left:16%;padding:1px 16px;height:1000px;">
     <div id="ports"></div>
-    <h1>Port Configuration</h1>
+    <h1 data-i18n="port_heading">Port Configuration</h1>
     <form id="vform" action="/vlan.html">
     <table id="speedtable">
-      <tr> <th>Port</th> <th>Name</th> <th>Current Link Speed</th><th>Set Speed</th><th>Disabled</th><th>Apply</th></tr>
+      <tr> <th data-i18n="port_col_port">Port</th> <th data-i18n="port_col_name">Name</th> <th data-i18n="port_col_speed">Current Link Speed</th><th data-i18n="port_col_set_speed">Set Speed</th><th data-i18n="port_col_disabled">Disabled</th><th data-i18n="port_col_apply">Apply</th></tr>
     </table>
-    <h2 style="margin-top:3em">Configure Maximum Frame Size (MTU) forwarded at Port</h2>
+    <h2 style="margin-top:3em" data-i18n="port_mtu_heading">Configure Maximum Frame Size (MTU) forwarded at Port</h2>
     <table id="mtutable" style="margin-top:1em">
     </table>
     <script src="/ports.js"></script>

html/ports.js

@@ -3,29 +3,29 @@ var clicked = new Int8Array(10);
 function createPortTable() {
   var tbl = document.getElementById('speedtable');
    if (tbl.rows.length <= 2 && numPorts) {
-     const sSelect = '<select name="speed_sel" id="speed_sel">'
+      const sSelect = '<select name="speed_sel" id="speed_sel">'
-      + '<option value="auto">Auto</option>'
+       + '<option value="auto">' + t('port_auto') + '</option>'
-      + '<option value="2g5">2500MBit/Full</option>'
+       + '<option value="2g5">' + t('port_2500m') + '</option>'
-      + '<option value="1g">1000MBit/Full</option>'
+       + '<option value="1g">' + t('port_1000m') + '</option>'
-      + '<option value="100m full">100MBit/Full</option>'
+       + '<option value="100m full">' + t('port_100m_f') + '</option>'
-      + '<option value="100m half">100MBit/Half</option>'
+       + '<option value="100m half">' + t('port_100m_h') + '</option>'
-      + '<option value="10m full">10MBit/Full</option>'
+       + '<option value="10m full">' + t('port_10m_f') + '</option>'
-      + '<option value="10m half">10MBit/Half</option>'
+       + '<option value="10m half">' + t('port_10m_h') + '</option>'
-      + '</select>';
+       + '</select>';
       const dSwitch = '<input type="checkbox" id="disable_port" onchange="portOnOff();">'
      for (let i = 1; i <= numPorts; i++) {
       if (pIsSFP[i-1])
         continue;
       console.log("Table row: " + i + "pState: " + pState[i-2]);
       const tr = tbl.insertRow();
-      let td = tr.insertCell(); td.appendChild(document.createTextNode(`Port ${i}`));
+      let td = tr.insertCell(); td.appendChild(document.createTextNode(t('common_port') + i));
       let portName = portNames[physToLogPort[i-1]] || '';
       td = tr.insertCell(); td.appendChild(document.createTextNode(portName));
-      td = tr.insertCell(); td.innerHTML = linkS[pState[i] + 1];
+      td = tr.insertCell(); td.innerHTML = linkText(pState[i] + 1);
       td = tr.insertCell(); td.innerHTML = sSelect.replaceAll("speed_sel", "speed_sel_" + i);
       td = tr.insertCell(); td.innerHTML = dSwitch.replaceAll("disable_port", "disable_port_" + i)
 						  .replace("portOnOff()", "portOnOff(" + i + ")");
-      var button = '<button type="button" style="margin: 0 0 0 24px" onclick="applySpeed(' + i + ');">Apply</button>';
+      var button = '<button type="button" style="margin: 0 0 0 24px" onclick="applySpeed(' + i + ');">' + t('port_apply') + '</button>';
       td = tr.insertCell();
       td.innerHTML = button;
     }
@@ -55,7 +55,7 @@ function createPortTable() {
       tr = tbl.insertRow();
       for (let i = 1; i <= numPorts; i++) {
         let td = tr.insertCell();
-        td.innerHTML = '<button type="button" style="margin: 0 0 0 24px" onclick="applyMTU(' + i + ');">Apply</button>';
+        td.innerHTML = '<button type="button" style="margin: 0 0 0 24px" onclick="applyMTU(' + i + ');">' + t('port_apply') + '</button>';
       }
   }
 }
@@ -68,7 +68,7 @@ function updatePortTable() {
   for (let i = 1; i <= numPorts ; i++) {
     if (pIsSFP[i-1])
       continue;
-    tbl.rows[i].cells[2].innerHTML = `${linkS[pState[i-1]+1]}`;
+    tbl.rows[i].cells[2].innerHTML = linkText(pState[i-1]+1);
     if (!clicked[i] && pState[i - 1] < 0) {
       document.getElementById('speed_sel_' + i).disabled = true;
       document.getElementById('disable_port_' + i).checked = true;

html/stat.html

@@ -1,8 +1,9 @@
 <!DOCTYPE html>
 <html>
   <script src="/main.js"></script>
+  <script src="/i18n.js"></script>
   <link rel="stylesheet" href="style.css">
-  <title>FreeSwitchOS Port Statistics</title>
+  <title data-i18n="stat_title">FreeSwitchOS Port Statistics</title>
   <style>
     .popup {
       display: none;
@@ -31,14 +32,14 @@
     <div id="ports"></div>
     <div id="popup" class="popup">
         <div class="popup-content">
-            <h2>Detailed Port Statistics</h2>
+            <h2 data-i18n="stat_detailed">Detailed Port Statistics</h2>
             <div id="popup_text"></div>
-            <button id="closePopup" class="action">Close</button>
+            <button id="closePopup" class="action" data-i18n="stat_close">Close</button>
         </div>
     </div>
-    <h1>Port Statistics</h1>
+    <h1 data-i18n="stat_heading">Port Statistics</h1>
     <table id="statstable">
-      <tr> <th>Port</th> <th>Name</th> <th>link</th> <th>TX Good</th> <th>TX Bad</th> <th>RX Good</th> <th>RX Bad</th> <th> All Counters </th></tr>
+      <tr> <th data-i18n="stat_col_port">Port</th> <th data-i18n="stat_col_name">Name</th> <th data-i18n="stat_col_link">link</th> <th data-i18n="stat_col_tx_good">TX Good</th> <th data-i18n="stat_col_tx_bad">TX Bad</th> <th data-i18n="stat_col_rx_good">RX Good</th> <th data-i18n="stat_col_rx_bad">RX Bad</th> <th data-i18n="stat_col_all"> All Counters </th></tr>
       <script src="/stat.js"></script>
     </table>
     </div>

html/stat.js

@@ -114,7 +114,7 @@ function getCounters(port) {
       const s = JSON.parse(xhttp.responseText);
       console.log("Counters: ", JSON.stringify(s));
       const ptext = document.getElementById('popup_text');
-      var t = "<table style='width:100%'> <tr> <th>Counter</th> <th>Value</th> <th>Counter</th> <th>Value</th></tr> <tr>";
+      var t = "<table style='width:100%'> <tr> <th>" + t('stat_counter') + "</th> <th>" + t('stat_value') + "</th> <th>" + t('stat_counter') + "</th> <th>" + t('stat_value') + "</th></tr> <tr>";
       console.log("Counter 0: ", BigInt(s[0]).toString(), " length: ", s.length);
       var c = 0;
       for (i = 0; i < mib_counters.length; i += 4) {
@@ -162,25 +162,25 @@ function fillStats() {
   if (tbl.rows.length > 1) {
     for (let i = 0; i < numPorts; i++) {
       console.log("Table Update row: " + i + " state " + pState[i] + " is " + linkS[pState[i] +1]);
-      tbl.rows[i+1].cells[2].innerHTML = `${linkS[pState[i]+1]}`;
+      tbl.rows[i+1].cells[2].innerHTML = linkText(pState[i]+1);
-      tbl.rows[i+1].cells[3].innerHTML = `${txG[i]} pkts`;
+      tbl.rows[i+1].cells[3].innerHTML = `${txG[i]}` + t('common_pkts');
-      tbl.rows[i+1].cells[4].innerHTML = `${txB[i]} pkts`;
+      tbl.rows[i+1].cells[4].innerHTML = `${txB[i]}` + t('common_pkts');
-      tbl.rows[i+1].cells[5].innerHTML = `${rxG[i]} pkts`;
+      tbl.rows[i+1].cells[5].innerHTML = `${rxG[i]}` + t('common_pkts');
-      tbl.rows[i+1].cells[6].innerHTML = `${rxB[i]} pkts`;
+      tbl.rows[i+1].cells[6].innerHTML = `${rxB[i]}` + t('common_pkts');
     }
   } else {
     for (let i = 0; i < numPorts; i++) {
       console.log("Table row: " + i);
       const tr = tbl.insertRow();
-      let td = tr.insertCell(); td.appendChild(document.createTextNode(`Port ${i+1}`));
+      let td = tr.insertCell(); td.appendChild(document.createTextNode(t('common_port') + (i+1)));
       let portName = portNames[physToLogPort[i]] || '';
       td = tr.insertCell(); td.appendChild(document.createTextNode(portName));
-      td = tr.insertCell(); td.appendChild(document.createTextNode(`${linkS[pState[i]+1]}`));
+      td = tr.insertCell(); td.appendChild(document.createTextNode(linkText(pState[i]+1)));
-      td = tr.insertCell(); td.appendChild(document.createTextNode(`${txG[i]} pkts`));
+      td = tr.insertCell(); td.appendChild(document.createTextNode(`${txG[i]}` + t('common_pkts')));
-      td = tr.insertCell();td.appendChild(document.createTextNode(`${txB[i]} pkts`));
+      td = tr.insertCell();td.appendChild(document.createTextNode(`${txB[i]}` + t('common_pkts')));
-      td = tr.insertCell();td.appendChild(document.createTextNode(`${rxG[i]} pkts`));
+      td = tr.insertCell();td.appendChild(document.createTextNode(`${rxG[i]}` + t('common_pkts')));
-      td = tr.insertCell();td.appendChild(document.createTextNode(`${rxB[i]} pkts`));
+      td = tr.insertCell();td.appendChild(document.createTextNode(`${rxB[i]}` + t('common_pkts')));
-      var button = '<button type="button" style="margin: 0 0 0 24px" onclick="getCounters(' + i + ');">Show</button>';
+      var button = '<button type="button" style="margin: 0 0 0 24px" onclick="getCounters(' + i + ');">' + t('stat_show') + '</button>';
       td = tr.insertCell(); td.innerHTML = button;
     }
   }

html/system.html

@@ -1,8 +1,9 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <script src="/i18n.js"></script>
     <link rel="stylesheet" href="style.css">
-    <title>System Settings</title>
+    <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; }
@@ -14,57 +15,56 @@
   </head>
   <body>
     <div class="tab-bar">
-      <button class="tab-btn active" onclick="openTab(event, 'system-tab')">System</button>
+      <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')">Advanced</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')">Console</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>System Settings</h1>
+      <h1 data-i18n="sys_heading">System Settings</h1>
       <div class="row">
-        <div class="lcol"> <label for="ip">IP address:</label></div>
+        <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">Netmask:</label></div>
+        <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">Gateway:</label></div>
+        <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>
       <br/>
-      When updating the above settings, remember to point your browser to the new IP afterwards:<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" value="Update Settings"><br/>
+      <input style="width:40%;" class="action" id="ip_sub" onclick="ipSub();" type="button" data-i18n="sys_update" value="Update Settings"><br/>
       <br/>
-      Save all current settings to Flash:<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" value="Save Settings to Flash">
+      <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>Advanced Settings</h1>
+      <h1 data-i18n="sys_advanced">Advanced Settings</h1>
-      <div class="lcol"> <label for="config_display">Startup configuration:</label></div>
+      <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/>
-       Be careful when saving the directly edited startup configuration, you can lock yourself out:<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" value="Clear Startup Config">
+      <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" value="Save Startup Settings to Flash">
+      <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" value="Reset Switch">
+      <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>Console Command</h1>
+      <h1 data-i18n="sys_console">Console Command</h1>
-      <label for="console_command">Enter command:</label>
+      <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" value="Send Command"><br/>
+      <input style="width:20%;" class="action" id="cmd_sub" onclick="cmdSub();" type="button" data-i18n="sys_send_cmd" value="Send Command"><br/>
       <br/><br/> 
-      Be careful when entering console commands, you can lock yourself out!<br/>
+      <span data-i18n="sys_console_warn">Be careful when entering console commands, you can lock yourself out!</span><br/>
-
 
     </div>
 

html/system.js

@@ -4,7 +4,7 @@ const ips = ["ip", "netmask", "gw"];
 
 function checkIp(ip) {
   const ipv4 = /^(\d{1,3}\.){3}\d{1,3}$/;
-  if (!ipv4.test(ip)) {alert(`Invalid ip:${ip}`); return false };
+  if (!ipv4.test(ip)) {alert(t('sys_invalid_ip') + ip); return false };
   return true;
 }
 
@@ -136,12 +136,12 @@ function fetchIP() {
 }
 
 function resetSwitch() {
-  if (!confirm('Are you sure you want to reset the switch?')) {
+  if (!confirm(t('sys_reset_confirm'))) {
     return;
   }
   fetch('/reset', { method: 'GET' }).catch(() => {});
   setTimeout(() => {
-    alert('Switch is resetting. Please wait and refresh the page.');
+    alert(t('sys_resetting'));
   }, 3000);
 }
 

html/update.html

@@ -1,18 +1,19 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <script src="/i18n.js"></script>
     <link rel="stylesheet" href="style.css">
-    <title>Firmware update</title>
+    <title data-i18n="update_title">Firmware update</title>
   </head>
   <body>
     <nav id="sidebar"></nav>
     <div style="margin-left:16%;padding:1px 16px;height:1000px;width:40%;">
-    <h1>Firmware Update</h1>
+    <h1 data-i18n="update_heading">Firmware Update</h1>
     <form enctype="multipart/form-data" action="/upload" method="POST">
     <input type="hidden" name="MAX_FILE_SIZE" value="1000000" />
-      Choose a firmware update file to upload: <br/> <br/>
+      <span data-i18n="update_instruction">Choose a firmware update file to upload:</span> <br/> <br/>
       <input name="uploadedfile" type="file" accept=".bin" /><br />
-    <input style="margin-top:3em" type="submit" value="Upload File" />
+    <input style="margin-top:3em" type="submit" data-i18n="update_upload" value="Upload File" />
     </form>
     <script src="/navigation.js"></script>
   </body>

html/vlan.html

@@ -1,52 +1,53 @@
 <!DOCTYPE html>
 <html>
   <script src="/main.js"></script>
+  <script src="/i18n.js"></script>
   <link rel="stylesheet" href="style.css">
-  <title>FreeSwitchOS VLAN Configuration</title>
+  <title data-i18n="vlan_title">FreeSwitchOS VLAN Configuration</title>
   </head>
   <body>
     <nav id="sidebar"></nav>
     <div style="margin-left:16%;padding:1px 16px;height:1000px;">
     <div id="ports"></div>
-    <h1>VLAN Configuration</h1>
+    <h1 data-i18n="vlan_heading">VLAN Configuration</h1>
     <form id="vform" action="/vlan.html">
       <div>
-        <label for="vlanSelect">VLAN auswählen:</label>
+        <label for="vlanSelect" data-i18n="vlan_select">VLAN Select:</label>
         <select id="vlanSelect" style="margin: 0 0 0 8px">
-          <option value="" disabled selected>— VLAN wählen —</option>
+          <option value="" disabled selected data-i18n="vlan_choose">— VLAN Choose —</option>
         </select>
       </div>
       <br/>
       <div>
-        <label for="vid">VLAN ID:</label>
+        <label for="vid" data-i18n="vlan_id">VLAN ID:</label>
         <input type="number" min="1" max="4094" id="vid" name="vid">
-        <button type="button" style="margin: 0 0 0 24px" onclick="fetchVLAN();">Get Configuration</button>
+        <button type="button" style="margin: 0 0 0 24px" onclick="fetchVLAN();" data-i18n="vlan_get_config">Get Configuration</button>
       </div>
       <br/><br/>
-      <label for="vname">VLAN Name:</label>
+      <label for="vname" data-i18n="vlan_name">VLAN Name:</label>
       <input type="text" id="vname" name="vname"><br><br>
       <br/>
-      <h2>Tagged Ports</h2>
+      <h2 data-i18n="vlan_tagged">Tagged Ports</h2>
-      <div id="tPorts"><button type="button" style="transform: translateY(-100%);margin: 0 50px 0 0" onclick="utClicked(true);">Select all</button></div>
+      <div id="tPorts"><button type="button" style="transform: translateY(-100%);margin: 0 50px 0 0" onclick="utClicked(true);" data-i18n="vlan_select_all">Select all</button></div>
-      <h2>Untagged Ports</h2>
+      <h2 data-i18n="vlan_untagged">Untagged Ports</h2>
-      <div id="uPorts"><button type="button" style="transform: translateY(-100%); margin: 0 50px 0 0" onclick="utClicked(false);">Select all</button> </div>
+      <div id="uPorts"><button type="button" style="transform: translateY(-100%); margin: 0 50px 0 0" onclick="utClicked(false);" data-i18n="vlan_select_all">Select all</button> </div>
-      <h2>Use as default VLAN for incoming traffic (PVID)</h2>
+      <h2 data-i18n="vlan_pvid">Use as default VLAN for incoming traffic (PVID)</h2>
-      <div id="pPorts"><button type="button" style="transform: translateY(-100%); margin: 0 50px 0 0" onclick="pvClicked(true);">Select all</button> </div>
+      <div id="pPorts"><button type="button" style="transform: translateY(-100%); margin: 0 50px 0 0" onclick="pvClicked(true);" data-i18n="vlan_select_all">Select all</button> </div>
       <script src="/vlan.js"></script>
-      <br/> <input style="width:40%;" class="action" id="vlan_sub" onclick="vlanSub();" type="button" value="Update / Create">
+      <br/> <input style="width:40%;" class="action" id="vlan_sub" onclick="vlanSub();" type="button" data-i18n="vlan_update" value="Update / Create">
       <script src="/vlan_sub.js"></script>
     </form>
-    <h2>Configured VLANs</h2>
+    <h2 data-i18n="vlan_configured">Configured VLANs</h2>
     <table id="vlanTable" style="width:90%">
       <thead>
         <tr>
           <th>VLAN</th>
-          <th>Name</th>
+          <th data-i18n="vlan_col_name">Name</th>
-          <th>Member Ports</th>
+          <th data-i18n="vlan_col_member">Member Ports</th>
-          <th>Tagged Ports</th>
+          <th data-i18n="vlan_col_tagged">Tagged Ports</th>
-          <th>Untagged Ports</th>
+          <th data-i18n="vlan_col_untagged">Untagged Ports</th>
-          <th>PVID Ports</th>
+          <th data-i18n="vlan_col_pvid">PVID Ports</th>
-          <th>Delete</th>
+          <th data-i18n="vlan_col_delete">Delete</th>
         </tr>
       </thead>
       <tbody id="vlanTableBody">

html/vlan.js

@@ -76,7 +76,7 @@ function fetchVLAN() {
   };
   var v=document.getElementById('vid').value
   if (!v) {
-    alert("Set VLAN ID first");
+    alert(t('vlan_set_id_first'));
     return;
   }
   xhttp.open("GET", `/vlan.json?vid=${v}`, true);
@@ -161,7 +161,7 @@ async function loadVlanTable() {
 }
 
 function deleteVlan(id) {
-  if (!confirm('Delete VLAN ' + id + '?')) return;
+  if (!confirm(t('vlan_delete_confirm') + id + '?')) return;
   fetch('/cmd', { method: 'POST', body: 'vlan ' + id + ' d' })
     .then(function() { refreshVlanViews(); })
     .catch(function(err) { console.error('Delete failed:', err); });

html/vlan_sub.js

@@ -3,7 +3,7 @@ async function vlanSub() {
   var cmd = "vlan ";
   var v=document.getElementById('vid').value
   if (!v) {
-    alert("Set VLAN ID first");
+    alert(t('vlan_set_id_first'));
     return;
   }
   cmd = cmd + v;