paste this at /www/status.htm..... then make it work
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>OpenWrt - Interfaces - LuCI</title>
<meta name="viewport" content="initial-scale=1.0">
<link rel="stylesheet" href="/luci-static/bootstrap/cascade.css?v=git-19.020.41695-6f6641d">
<link rel="stylesheet" media="only screen and (max-device-width: 854px)" href="/luci-static/bootstrap/mobile.css?v=git-19.020.41695-6f6641d" type="text/css" />
<link rel="shortcut icon" href="/luci-static/bootstrap/favicon.ico">
<script src="/luci-static/resources/cbi.js?v=git-19.020.41695-6f6641d"></script>
<script src="/luci-static/resources/xhr.js?v=git-19.020.41695-6f6641d"></script>
</head>
<span id="xhr_poll_status" style="display:none" onclick="XHR.running() ? XHR.halt() : XHR.run()">
<span class="label success" id="xhr_poll_status_on">Auto Refresh on</span>
<span class="label" id="xhr_poll_status_off" style="display:none">Auto Refresh off</span>
</span>
<div class="cbi-map" id="cbi-network"><h2 name="content">Interfaces</h2>
<div class="cbi-section-node"><div class="table"><div class="tr cbi-rowstyle-2">
<div class="td col-3 center middle"><div class="ifacebox">
<div class="ifacebox-head" style="background-color:#90f090" title="Part of zone "lan"">
<strong>LAN</strong></div>
<div class="ifacebox-body" id="lan-ifc-devices" data-network="lan">
<img src="/luci-static/resources/icons/ethernet_disabled.png" style="width:16px; height:16px" /><br /><small>?</small></div></div></div>
<div class="td col-5 left middle" id="lan-ifc-description"><em>Collecting data...</em>
</div></div>
<div class="tr cbi-rowstyle-1"><div class="td col-3 center middle"><div class="ifacebox">
<div class="ifacebox-head" style="background-color:#bd90f9" title="Part of zone "vpnfirewall"">
<strong>NORDVPNTUN</strong></div><div class="ifacebox-body" id="nordvpntun-ifc-devices" data-network="nordvpntun"><img src="/luci-static/resources/icons/ethernet_disabled.png" style="width:16px; height:16px" /><br /><small>?</small>
</div></div></div>
<div class="td col-5 left middle" id="nordvpntun-ifc-description"><em>Collecting data...</em>
</div></div><div class="tr cbi-rowstyle-2"><div class="td col-3 center middle">
<div class="ifacebox">
<div class="ifacebox-head" style="background-color:#f09090" title="Part of zone "wan"">
<strong>WAN</strong></div><div class="ifacebox-body" id="wan-ifc-devices" data-network="wan">
<img src="/luci-static/resources/icons/ethernet_disabled.png" style="width:16px; height:16px" /><br /><small>?</small></div></div></div>
<div class="td col-5 left middle" id="wan-ifc-description"><em>Collecting data...</em></div></div>
</div>
</div>
<script type="text/javascript">//<![CDATA[
function iface_reconnect(id) {
XHR.halt();
var d = document.getElementById(id + '-ifc-description');
if (d) d.innerHTML = '<em>Interface is reconnecting...</em>';
(new XHR()).post('/cgi-bin/luci/admin/network/iface_reconnect/' + id,
{ token: 'c48dd69319e896f5093d6149f013621c' }, XHR.run);
}
function iface_delete(ev) {
if (!confirm("Really delete this interface? The deletion cannot be undone! You might lose access to this device if you are connected via this interface")) {
ev.preventDefault();
return false;
}
ev.target.previousElementSibling.value = '1';
return true;
}
var networks = [];
document.querySelectorAll('[data-network]').forEach(function(n) {
networks.push(n.getAttribute('data-network'));
});
function render_iface(ifc) {
return E('span', { class: 'cbi-tooltip-container' }, [
E('img', { 'class' : 'middle', 'src': '/luci-static/resources/icons/%s%s.png'.format(
ifc.is_alias ? 'alias' : ifc.type,
ifc.is_up ? '' : '_disabled') }),
E('span', { 'class': 'cbi-tooltip ifacebadge large' }, [
E('img', { 'src': '/luci-static/resources/icons/%s%s.png'.format(
ifc.type, ifc.is_up ? '' : '_disabled') }),
E('span', { 'class': 'left' }, [
E('strong', 'Type: '), ifc.typename, E('br'),
E('strong', 'Device: '), ifc.ifname, E('br'),
E('strong', 'Connected: '), ifc.is_up ? 'yes' : 'no', E('br'),
ifc.macaddr ? E('strong', 'MAC: ') : '',
ifc.macaddr ? ifc.macaddr : '',
ifc.macaddr ? E('br') : '',
E('strong', 'RX: '), '%.2mB (%d Pkts.)'.format(ifc.rx_bytes, ifc.rx_packets), E('br'),
E('strong', 'TX: '), '%.2mB (%d Pkts.)'.format(ifc.tx_bytes, ifc.tx_packets)
])
])
]);
}
XHR.poll(5, '/cgi-bin/luci/admin/network/iface_status/' + networks.join(','), null,
function(x, ifcs)
{
if (ifcs)
{
for (var idx = 0; idx < ifcs.length; idx++)
{
var ifc = ifcs[idx];
var html = '';
var s = document.getElementById(ifc.id + '-ifc-devices');
if (s)
{
while (s.firstChild)
s.removeChild(s.firstChild);
s.appendChild(render_iface(ifc));
if (ifc.subdevices && ifc.subdevices.length)
{
var sifs = [ ' (' ];
for (var j = 0; j < ifc.subdevices.length; j++)
sifs.push(render_iface(ifc.subdevices[j]));
sifs.push(')');
s.appendChild(E('span', {}, sifs));
}
s.appendChild(E('br'));
s.appendChild(E('small', {}, ifc.is_alias ? 'Alias of "%s"'.format(ifc.is_alias) : ifc.name));
}
var d = document.getElementById(ifc.id + '-ifc-description');
if (d && ifc.proto && ifc.ifname)
{
var desc = null;
if (ifc.is_dynamic)
desc = 'Virtual dynamic interface';
else if (ifc.is_alias)
desc = 'Alias Interface';
if (ifc.desc)
desc = desc ? '%s (%s)'.format(desc, ifc.desc) : ifc.desc;
html += String.format('<strong>Protocol:</strong> %h<br />', desc || '?');
if (ifc.is_up)
{
html += String.format('<strong>Uptime:</strong> %t<br />', ifc.uptime);
}
if (!ifc.is_dynamic && !ifc.is_alias)
{
if (ifc.macaddr)
html += String.format('<strong>MAC:</strong> %s<br />', ifc.macaddr);
html += String.format(
'<strong>RX:</strong> %.2mB (%d Pkts.)<br />' +
'<strong>TX:</strong> %.2mB (%d Pkts.)<br />',
ifc.rx_bytes, ifc.rx_packets,
ifc.tx_bytes, ifc.tx_packets
);
}
if (ifc.ipaddrs && ifc.ipaddrs.length)
{
for (var i = 0; i < ifc.ipaddrs.length; i++)
html += String.format(
'<strong>IPv4:</strong> %s<br />',
ifc.ipaddrs[i]
);
}
if (ifc.ip6addrs && ifc.ip6addrs.length)
{
for (var i = 0; i < ifc.ip6addrs.length; i++)
html += String.format(
'<strong>IPv6:</strong> %s<br />',
ifc.ip6addrs[i]
);
}
if (ifc.ip6prefix)
html += String.format('<strong>IPv6-PD:</strong> %s<br />', ifc.ip6prefix);
if (ifc.errors)
{
for (var i = 0; i < ifc.errors.length; i++)
html += String.format(
'<em class="error"><strong>Error:</strong> %h</em><br />',
ifc.errors[i]
);
}
d.innerHTML = html;
}
else if (d && !ifc.proto)
{
var e = document.getElementById(ifc.id + '-ifc-edit');
if (e)
e.disabled = true;
d.innerHTML = String.format(
'<em>Unsupported protocol type.</em><br />' +
'<a href="%h">Install protocol extensions...</a>',
'/cgi-bin/luci/admin/system/packages?query=luci-proto&display=available'
);
}
else if (d && !ifc.ifname)
{
d.innerHTML = String.format(
'<em>Network without interfaces.</em><br />' +
'<a href="/cgi-bin/luci/admin/network/network/%s?tab.network.%s=physical">Assign interfaces...</a>',
ifc.name, ifc.name
);
}
else if (d)
{
d.innerHTML = '<em>Interface not present or not connected yet.</em>';
}
}
}
}
);
//]]></script>
<!-- /nsection -->
</div>
</form>
<script type="text/javascript">cbi_init();</script>
<footer>
<a href="https://github.com/openwrt/luci">Powered by LuCI openwrt-18.06 branch (git-19.020.41695-6f6641d)</a> / OpenWrt 18.06.2 r7676-cddd7b4c77
</footer></div></div></body></html>
Seriously tho... i'd do a php version of the above and iptables DNAT it when VPN is down et. al.