### Install and Start SAP Proxy Node via VPS

Source: https://github.com/yonggekkk/argosbx/blob/main/SAP.md

Use these commands to download, set permissions, and execute the installation script for the SAP proxy node on a VPS. The shortcut 'sap.sh' can be used for subsequent access.

```bash
curl -sSL https://raw.githubusercontent.com/yonggekkk/argosbx/main/sap.sh -o sap.sh && chmod +x sap.sh && bash sap.sh
```

```bash
wget -q https://raw.githubusercontent.com/yonggekkk/argosbx/main/sap.sh -O sap.sh && chmod +x sap.sh && bash sap.sh
```

--------------------------------

### Install and Start SAP Keep-Alive Service via VPS

Source: https://github.com/yonggekkk/argosbx/blob/main/SAP.md

Use these commands to download, set permissions, and execute the keep-alive script for SAP on a VPS. The shortcut 'saph.sh' can be used for subsequent access.

```bash
curl -sSL https://raw.githubusercontent.com/yonggekkk/argosbx/main/saph.sh -o saph.sh && chmod +x saph.sh && bash saph.sh
```

```bash
wget -q https://raw.githubusercontent.com/yonggekkk/argosbx/main/saph.sh -O saph.sh && chmod +x saph.sh && bash saph.sh
```

--------------------------------

### Acme-yg Domain IP Certificate Script

Source: https://github.com/yonggekkk/argosbx/blob/main/index.html

Command to install or run the Acme-yg script for managing domain IP certificates.

```bash
bash <(curl -Ls https://raw.githubusercontent.com/yonggekkk/acme-yg/main/acme.sh)
```

--------------------------------

### Output Rendering and Parsing

Source: https://github.com/yonggekkk/argosbx/blob/main/index.html

Functions to update the output field with the generated command and parse existing commands back into the UI.

```javascript
function render(){ if (isUpdatingFromOutput) return; const m = collectVars(); const vars = toBashVars(m); const selectedCommand = document.querySelector('input[name="commandType"]:checked').value === 'curl' ? CURL : WGET; output.value = (vars ? vars + ' ' : '') + selectedCommand; } function parseAndFillOutput() { const text = output.value.trim(); if (!text) return; isUpdatingFromOutput = true; if (text.includes('wget')) {
```

--------------------------------

### Variable Collection and Bash Formatting

Source: https://github.com/yonggekkk/argosbx/blob/main/index.html

Logic to collect form values into an object and convert them into a bash-compatible string format.

```javascript
function collectVars(){ const m = {}; protoKeys.forEach(k => { const ck = document.querySelector(`[data-proto="${k}"]`); const pt = document.querySelector(`[data-port="${k}"]`); if (ck && ck.checked) { const v = (pt.value || '').trim(); m[k] = v; } }); optIds.forEach(id => { const el = document.getElementById(id); const v = (el.value || '').trim(); if (v !== '' && !el.disabled) { m[id] = v; } }); const argoValue = argoSelect.value; if (argoValue !== '') { m['argo'] = argoValue; const _agn = (agn.value || '').trim(); const _agk = (agk.value || '').trim(); if (!agn.disabled && _agn) m['agn'] = _agn; if (!agk.disabled && _agk) m['agk'] = _agk; } return m; } function toBashVars(m){ const keys = Object.keys(m); const ordered = []; protoKeys.forEach(k => { if (keys.includes(k)) ordered.push(k); }); ['warp', 'uuid', 'reym', 'cfip', 'alns', 'hyjpt', 'cdnym', 'name', 'ippz', 'sub', 'subid', 'subpt'].forEach(k => { if (keys.includes(k)) ordered.push(k); }); if (keys.includes('argo')) ordered.push('argo'); if (keys.includes('agn')) ordered.push('agn'); if (keys.includes('agk')) ordered.push('agk'); if (keys.includes('oap')) ordered.push('oap'); keys.forEach(k => { if (!ordered.includes(k)) ordered.push(k); }); return ordered.map(k => { const val = m[k]; if (val === '') return `${k}=""`; if (/[^\w\-\.:/]/.test(val)) { return `${k}="${val.replace(/"/g, '\\"')}"`; } return `${k}="${val}"`; }).join(' '); }
```

--------------------------------

### Dynamic Input State Management

Source: https://github.com/yonggekkk/argosbx/blob/main/index.html

Functions to handle UI state updates based on user selections, such as enabling or disabling input fields based on checkbox states.

```javascript
document.getElementById('alns').value = ''; document.getElementById('hyjpt').value = ''; document.getElementById('name').value = ''; sub.value = ''; updateSubState(); argoSelect.value = ''; updateArgoState(''); updateDynamicInputs(); } function updateDynamicInputs() { const isCdnEnabled = vmessWsCheckbox.checked || vlessXhttpCheckbox.checked || vlessWsVCheckbox.checked; cdnymInput.disabled = !isCdnEnabled; if (!isCdnEnabled) cdnymInput.value = ''; const isRealityEnabled = vlessTcpRealityCheckbox.checked || vlessXhttpRealityCheckbox.checked || anyRealityCheckbox.checked; reymInput.disabled = !isRealityEnabled; if (!isRealityEnabled) reymInput.value = ''; const isAlnsEnabled = alnsSelect.value === 'y'; nvptCheckbox.disabled = !isAlnsEnabled; nvptPortInput.disabled = !isAlnsEnabled; if (!isAlnsEnabled) { nvptCheckbox.checked = false; nvptPortInput.value = ''; } const isHy2Enabled = hy2Checkbox.checked; hyjptInput.disabled = !isHy2Enabled; if (!isHy2Enabled) hyjptInput.value = ''; const isCfipEnabled = vlessXhttpTlsCheckbox.checked || vlessWsVCheckbox.checked || vlessXhttpCheckbox.checked || vmessWsCheckbox.checked; cfip.disabled = !isCfipEnabled; if (!isCfipEnabled) { cfip.value = ''; } render(); } sub.addEventListener('change', updateSubState); alnsSelect.addEventListener('change', updateDynamicInputs); argoSelect.addEventListener('change', () => { const argoValue = argoSelect.value; const isEnabled = argoValue !== ''; [agn, agk].forEach(i => i.disabled = !isEnabled); if (argoValue === 'vwpt') { vlessWsVCheckbox.checked = true; } else if (argoValue === 'vmpt') { vmessWsCheckbox.checked = true; } if (!isEnabled) { agn.value = ''; agk.value = ''; } updateDynamicInputs(); render(); }); [vmessWsCheckbox, vlessWsVCheckbox, vlessXhttpCheckbox, vlessTcpRealityCheckbox, vlessXhttpRealityCheckbox, vlessXhttpTlsCheckbox, anyRealityCheckbox, hy2Checkbox].forEach(ck => { ck.addEventListener('change', () => { if (!vlessWsVCheckbox.checked && argoSelect.value === 'vwpt') { argoSelect.value = ''; updateArgoState(''); } if (!vmessWsCheckbox.checked && argoSelect.value === 'vmpt') { argoSelect.value = ''; updateArgoState(''); } updateDynamicInputs(); }); }); document.querySelectorAll('[data-port]').forEach(inp => { inp.addEventListener('input', () => { const key = inp.getAttribute('data-port'); const ck = document.querySelector(`[data-proto="${key}"]`); if (!ck) return; if (inp.value.trim() !== '' && !ck.checked) { ck.checked = true; } updateDynamicInputs(); render(); }); }); document.querySelectorAll('[data-proto]').forEach(ck => { ck.addEventListener('change', () => { if (!ck.checked) { const key = ck.getAttribute('data-proto'); const pt = document.querySelector(`[data-port="${key}"]`); if (pt) { pt.value = ''; } } updateDynamicInputs(); render(); }); }); generateUuidBtn.addEventListener('click', () => { uuidInput.value = crypto.randomUUID(); render(); }); commandTypeRadios.forEach(radio => { radio.addEventListener('change', render); });
```

--------------------------------

### ArgoSBX Configuration Generator Logic

Source: https://github.com/yonggekkk/argosbx/blob/main/index.html

JavaScript logic used for managing the ArgoSBX configuration generator, including theme toggling, form state management for Argo tunnels, and subscription settings.

```javascript
(function(){ const CURL = 'bash <(curl -Ls https://raw.githubusercontent.com/yonggekkk/argosbx/main/argosbx.sh)'; const WGET = 'bash <(wget -qO- https://raw.githubusercontent.com/yonggekkk/argosbx/main/argosbx.sh)'; const protoKeys = ['sopt','vmpt','vlpt','xhpt','vxpt','vwpt','xupt','xcpt','hypt','tupt','nvpt','anpt','arpt','sspt']; const optIds = ['warp','ippz','uuid','reym','cfip','alns','hyjpt','cdnym','name', 'oap', 'sub', 'subid', 'subpt']; const argoSelect = document.getElementById('argoSelect'); const agn = document.getElementById('agn'); const agk = document.getElementById('agk'); const cfip = document.getElementById('cfip'); const sub = document.getElementById('sub'); const subid = document.getElementById('subid'); const subpt = document.getElementById('subpt'); const vmessWsCheckbox = document.querySelector('[data-proto="vmpt"]'); const vlessWsVCheckbox = document.querySelector('[data-proto="vwpt"]'); const vlessXhttpCheckbox = document.querySelector('[data-proto="vxpt"]'); const vlessTcpRealityCheckbox = document.querySelector('[data-proto="vlpt"]'); const vlessXhttpRealityCheckbox = document.querySelector('[data-proto="xhpt"]'); const vlessXhttpTlsCheckbox = document.querySelector('[data-proto="xcpt"]'); const anyRealityCheckbox = document.querySelector('[data-proto="arpt"]'); const hy2Checkbox = document.querySelector('[data-proto="hypt"]'); const nvptCheckbox = document.querySelector('[data-proto="nvpt"]'); const nvptPortInput = document.querySelector('[data-port="nvpt"]'); const reymInput = document.getElementById('reym'); const alnsSelect = document.getElementById('alns'); const hyjptInput = document.getElementById('hyjpt'); const cdnymInput = document.getElementById('cdnym'); const output = document.getElementById('output'); const allInputs = document.querySelectorAll('input, select'); const checkboxes = document.querySelectorAll('input[type="checkbox"]'); const textInputs = document.querySelectorAll('input[type="text"]'); const ippzSelect = document.getElementById('ippz'); const oapSelect = document.getElementById('oap'); const generateUuidBtn = document.getElementById('generateUuidBtn'); const uuidInput = document.getElementById('uuid'); const themeSwitchCheckbox = document.getElementById('theme-switch-checkbox'); const commandTypeRadios = document.querySelectorAll('input[name="commandType"]'); let isUpdatingFromOutput = false; function initTheme() { const isLightMode = localStorage.getItem('theme') === 'light'; if (isLightMode) { document.body.classList.add('light-mode'); themeSwitchCheckbox.checked = true; } } function toggleTheme() { document.body.classList.toggle('light-mode'); const isLightMode = document.body.classList.contains('light-mode'); localStorage.setItem('theme', isLightMode ? 'light' : 'dark'); } themeSwitchCheckbox.addEventListener('change', toggleTheme); function updateArgoState(argoValue) { const isEnabled = argoValue !== ''; if (!isEnabled) { agn.value = ''; agk.value = ''; } [agn, agk].forEach(i => i.disabled = !isEnabled); } function updateSubState() { const isEnabled = sub.value === 'y'; if (!isEnabled) { subid.value = ''; subpt.value = ''; } [subid, subpt].forEach(i => i.disabled = !isEnabled); render(); } function resetForm(preserveIppz = false) { checkboxes.forEach(cb => { cb.checked = false; }); textInputs.forEach(inp => { inp.value = ''; }); document.getElementById('warp').value = ''; if (!preserveIppz) { ippzSelect.value = ''; } oapSelect.value = ''; document.getElementById('uuid').value = ''; document.getElementById('reym').value = ''; document.getElementById('cfip').value = '';
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.