<head>
<style>
.dot-typing{position:relative;left:-9999px;width:10px;height:10px;border-radius:5px;background-color:#9880ff;color:#9880ff;box-shadow:9984px 0 0 0 #9880ff,9999px 0 0 0 #9880ff,10014px 0 0 0 #9880ff;animation:dotTyping 1.5s infinite linear}@keyframes dotTyping{0%{box-shadow:9984px 0 0 0 #9880ff,9999px 0 0 0 #9880ff,10014px 0 0 0 #9880ff}16.667%{box-shadow:9984px -10px 0 0 #9880ff,9999px 0 0 0 #9880ff,10014px 0 0 0 #9880ff}33.333%{box-shadow:9984px 0 0 0 #9880ff,9999px 0 0 0 #9880ff,10014px 0 0 0 #9880ff}50%{box-shadow:9984px 0 0 0 #9880ff,9999px -10px 0 0 #9880ff,10014px 0 0 0 #9880ff}66.667%{box-shadow:9984px 0 0 0 #9880ff,9999px 0 0 0 #9880ff,10014px 0 0 0 #9880ff}83.333%{box-shadow:9984px 0 0 0 #9880ff,9999px 0 0 0 #9880ff,10014px -10px 0 0 #9880ff}100%{box-shadow:9984px 0 0 0 #9880ff,9999px 0 0 0 #9880ff,10014px 0 0 0 #9880ff}}
.radio-button{
	display: none;
	white-space: nowrap;
	background-color: #d1d1d1;
	border-radius: 4px;
}

.radio-button input[type="radio"] {
	display: none;
}
   
.radio-button label {
	display: inline-block;
	font-size: 14px;
	padding: 4px 5px;
	color: white;
	cursor: pointer;
	border-radius: 4px;
}

.radio-button input[type="radio"]:checked+label {
	background-color: #1080c1;
}
</style>
</head>
<%
	local uci = require("luci.model.uci").cursor()
	local RELEASE_BRANCH = uci:get("openclash", "config", "release_branch")
	local random = tostring(os.time()):reverse():sub(1, 9)
%>
<fieldset class="cbi-section">
	<table width="100%">
	    <tr>
	  	<td colspan="4" width="100%">
	  		<p style="margin: 10px 0; text-align: center">
				<%
					if uci:get("openclash", "config", "enable_meta_core") ~= '1' then
				%>
	      				<img id="_logo" src="/luci-static/resources/openclash/img/logo.png?<%=random%>" loading="lazy" width="150px" height="150px" onload="return logo_check(this,this.src,'https://raw.githubusercontent.com/vernesong/OpenClash/<%=RELEASE_BRANCH%>/img/logo.png')" onerror="return logo_error(this,'/luci-static/resources/openclash/img/logo.png?<%=random%>')" title="Hello, World!" alt="OpenClash" onclick="return homepage()" />
				<%
					else
				%>
						<img id="_logo" src="/luci-static/resources/openclash/img/meta.png?<%=random%>" loading="lazy" width="150px" height="150px" onload="return logo_check(this,this.src,'https://raw.githubusercontent.com/vernesong/OpenClash/<%=RELEASE_BRANCH%>/img/meta.png')" onerror="return logo_error(this,'/luci-static/resources/openclash/img/meta.png?<%=random%>')" title="Hello, World!" alt="OpenClash" onclick="return homepage()" />
				<%
					end
				%>
			</p>
	  		<p id="_clashversion" style="margin: 10px 0; text-align: center">
				<img src="/luci-static/resources/openclash/img/version.svg?<%=random%>" alt="currentversion" height="21px" onclick="return go_update()">
	  		</p>
	    </td></tr>
	    <tr><td colspan="4" width="100%">
     		<p style="margin: 10px 0; text-align: center">
				<img id="gitbook" src="/luci-static/resources/openclash/img/Wiki.svg?<%=random%>" loading="lazy" alt="GitBook" width="50px" height="20px" onerror="return imgerrorfuns(this,'https://img.shields.io/badge/Wiki--lightgrey?logo=GitBook&style=social')" onclick="return gitbookpage()" />
				&nbsp;&nbsp;&nbsp;
				<img id="wiki" src="/luci-static/resources/openclash/img/Tutorials.svg?<%=random%>" loading="lazy" alt="Wiki" width="75px" height="20px" onerror="return imgerrorfuns(this,'https://img.shields.io/badge/Tutorials--lightgrey?logo=Wikipedia&style=social')" onclick="return wikipage()" />
				&nbsp;&nbsp;&nbsp;
				<img id="star" src="/luci-static/resources/openclash/img/Star.svg?<%=random%>g" loading="lazy" alt="star" width="50px" height="20px" onerror="return imgerrorfuns(this,'https://img.shields.io/badge/Star--lightgrey?logo=github&style=social')" onclick="return homepage()" />
				&nbsp;&nbsp;&nbsp;
				<img id="telegram" src="/luci-static/resources/openclash/img/Telegram.svg?<%=random%>" loading="lazy" alt="Telegram" onerror="return imgerrorfuns(this,'https://img.shields.io/badge/Telegram--lightgrey?logo=Telegram&style=social')" onclick="return telegrampage()" />
				&nbsp;&nbsp;&nbsp;
				<img id="sponsor" src="/luci-static/resources/openclash/img/Sponsor.svg?<%=random%>" loading="lazy" alt="Sponsor" width="73px" height="20px" onerror="return imgerrorfuns(this,'https://img.shields.io/badge/Sponsor--lightgrey?logo=ko-fi&style=social')" onclick="return sponsorpage()" />
        	</p>
        </td></tr>
	    <tr><td width="100%" colspan="4">
	  		<div style="margin: 10px 0; text-align: center" id="_clashstart">
	  			<b><%:Tip: after started, please wait patiently until the connection is normal%></b>
			</div>
	    </td></tr>
		<tr><td width="25%"><%:Main Program%></td><td  width="25%" align="left"><span id="_clash"><%:Collecting data...%></span><span id="_watchdog"></span></td><td width="25%"><%:Control Panel Login IP%></td><td width="25%" align="left" id="_daip"><%:Collecting data...%></td></tr>
		<tr><td width="20%"><%:Running Mode%></td><td  width="30%" align="left"><span id="_mode"><%:Collecting data...%></span><span id="radio-ru-mode" class="radio-button">
				<input type="radio" id="normal" name="radios-ru" value="" checked onclick="return switch_run_mode(this.value)"/>
				<label for="normal" id="run_normal"><%:Compatible%></label>
				<input type="radio" id="tun" name="radios-ru" value="-tun" onclick="return switch_run_mode(this.value)"/>
				<label for="tun"><%:TUN%></label>
				<input type="radio" id="mix" name="radios-ru" value="-mix" onclick="return switch_run_mode(this.value)"/>
				<label for="mix"><%:Mix%></label>
				</span></td><td width="25%"><%:Control Panel Login Port%></td><td width="25%" align="left" id="_dapo"><%:Collecting data...%></td></tr>
		<tr><td width="25%"><%:Proxy Mode%></td><td width="25%" align="left"><span id="radio-de"><%:Collecting data...%></span><span id="radio-mode" class="radio-button">
				<input type="radio" id="rule" name="radios" value="rule" checked onclick="return switch_rule_mode(this.value)"/>
				<label for="rule">Rule</label>
				<input type="radio" id="global" name="radios" value="global" onclick="return switch_rule_mode(this.value)"/>
				<label for="global">Global</label>
				<input type="radio" id="direct" name="radios" value="direct" onclick="return switch_rule_mode(this.value)"/>
				<label for="direct">Direct</label>
				</span></td><td width="25%"><%:Control Panel Login Secret%></td><td width="25%" align="left" id="_dase"><%:Collecting data...%></td></tr>
		<tr><td colspan="4"><div style="margin: 10px 0; text-align: center"><span id="_web" style="width: 33%; display: inline-block;"></span><span id="_webm" style="width: 33%; display: inline-block;"><%:Collecting data...%></span><span id="_webo" style="width: 33%; display: inline-block;"></span></div></td></tr>
		<tr id="tool_label2"><td colspan="4">
			<div style="margin: 10px 0; text-align: center">
<span>
&nbsp;&nbsp;<%:Up:%>&nbsp;
	<span id="upload_">
		<font style=color:green>
		0 KB/S
		</font>
	</span>
</span>

<span>
&nbsp;&nbsp;<%:Down:%>&nbsp;
	<span id="download_">
		<font style=color:green>
		0 KB/S
		</font>
	</span>
</span>

<span>
&nbsp;&nbsp;<%:Up Total:%>&nbsp;
	<span id="uploadtotal_">
		<font style=color:green>
		0 KB
		</font>
	</span>
</span>

<span>
&nbsp;&nbsp;<%:Down Total:%>&nbsp;
	<span id="downloadtotal_">
		<font style=color:green>
		0 KB
		</font>
	</span>
</span>

<span>
&nbsp;&nbsp;<%:Connections:%>&nbsp;
	<span id="connect_t">
		<font style=color:green>
		0
		</font>
	</span>
</span>

<span>
&nbsp;&nbsp;<%:Ram:%>&nbsp;
	<span id="mem_t">
		<font style=color:green>
		0 KB
		</font>
	</span>
</span>

<span>
&nbsp;&nbsp;<%:CPU:%>&nbsp;
	<span id="cpu_t">
		<font style=color:green>
		0 %
		</font>
	</span>
	&nbsp;&nbsp;
</span>
</div>
</td></tr>
	<tr height="50px">
		<td width="100%" colspan="4">
			<div id="hid_btn" style="height: 25px;width: 100px;margin: 0 auto;" onclick="hid_btn_action()">
				<div style="margin: 0 auto; top: 50%;" class="dot-typing"></div>
			</div>
		</td>
	</tr>
	<tr id="hid_1"><td width="100%" colspan="4"><p style="margin: 10px 0; text-align: center"><b><%:Quick Operation%></b></p></td></tr>
    <tr id="hid_2">
		<td width="25%" align="center"><p style="margin: 10px 0; text-align: center" id="_close_all_connection"><%:Collecting data...%></p></td>
		<td width="25%" align="center"><p style="margin: 10px 0; text-align: center" id="_reload_firewall"><%:Collecting data...%></p></td>
		<td width="25%" align="center"><p style="margin: 10px 0; text-align: center" id="_flush_fakeip_cache"><%:Collecting data...%></p></td>
		<td width="25%" align="center"><p style="margin: 10px 0; text-align: center" id="_update_subscribe"><%:Collecting data...%></p></td>
	</tr>
	<tr id="hid_3">
		<td width="25%" align="center"><p style="margin: 10px 0; text-align: center" id="_update_other_rules"><%:Collecting data...%></p></td>
		<td width="25%" align="center"><p style="margin: 10px 0; text-align: center" id="_update_geoip"><%:Collecting data...%></p></td>
		<td width="25%" align="center"><p style="margin: 10px 0; text-align: center" id="_update_geosite"><%:Collecting data...%></p></td>
		<td width="25%" align="center"><p style="margin: 10px 0; text-align: center" id="_one_key_update"><%:Collecting data...%></p></td>
	</tr>
</table>
</fieldset>
<fieldset id="state" class="cbi-section">
	<table>
		<tr><td width="100%" colspan="4">
			<p style="margin: 10px 0; text-align: center">
				<b><%:Please ensure that all items are displayed normally before running. If you need to update, please go to the global settings page%></b>
			</p>
		</td></tr>
		<tr><td width="25%"><%:Node Select Backup%></td><td width="25%" align="left" id="_historychecktime"><%:Collecting data...%></td><td width="25%"><%:lhie1 Rule Update%></td><td width="25%" align="left" id="_lhie1"><%:Collecting data...%></td></tr>
		<tr><td width="25%"><%:ConnersHua Rule Update%></td><td width="25%" align="left" id="_ConnersHua"><%:Collecting data...%></td><td width="25%"><%:ConnersHua Return Rule Update%></td><td width="25%" align="left" id="_ConnersHua_return"><%:Collecting data...%></td></tr>
		<tr><td width="25%"><%:Mainland IP Update%></td><td width="25%" align="left" id="_chnroute"><%:Collecting data...%></td><td width="25%"><%: Mainland IPv6 Update%></td><td width="25%" align="left" id="_chnroutev6"><%:Collecting data...%></td></tr>
		<tr><td width="25%"><%:GEOIP Data Update%></td><td width="25%" align="left" id="_ipdb"><%:Collecting data...%></td><td width="25%"><%:GeoSite Data Update%></td><td width="25%" align="left" id="_geosite"><%:Collecting data...%></td></tr>
	</table>
</fieldset>
<script type="text/javascript">//<![CDATA[
	var clash = document.getElementById('_clash');
	var mode = document.getElementById('_mode');
	var web = document.getElementById('_web');
	var webo = document.getElementById('_webo');
	var webm = document.getElementById('_webm');
	var watchdog = document.getElementById('_watchdog');
	var daip = document.getElementById('_daip');
	var dase = document.getElementById('_dase');
	var dapo = document.getElementById('_dapo');
	var startlog = document.getElementById('_clashstart');
	var clashversion = document.getElementById('_clashversion');
	var close_all_connection = document.getElementById('_close_all_connection');
	var reload_firewall = document.getElementById('_reload_firewall');
	var one_key_update = document.getElementById('_one_key_update');
	var update_subscribe = document.getElementById('_update_subscribe');
	var update_other_rules = document.getElementById('_update_other_rules');
	var update_geoip = document.getElementById('_update_geoip');
	var update_geosite = document.getElementById('_update_geosite');
	var flush_fakeip_cache= document.getElementById('_flush_fakeip_cache');
	var ipdb = document.getElementById('_ipdb');
	var geosite = document.getElementById('_geosite');
	var lhie1 = document.getElementById('_lhie1');
	var ConnersHua = document.getElementById('_ConnersHua');
	var ConnersHua_return = document.getElementById('_ConnersHua_return');
	var chnroute = document.getElementById('_chnroute');
	var chnroutev6 = document.getElementById('_chnroutev6');
	var historychecktime = document.getElementById('_historychecktime');
	var hid_1 = document.getElementById("hid_1");
	var hid_2 = document.getElementById("hid_2");
	var hid_3 = document.getElementById("hid_3");
	var state = document.getElementById("state");
	var hid_btn = document.getElementById("hid_btn");
	var tool_label2 = document.getElementById('tool_label2');
	var radio_mode = document.getElementById('radio-mode');
	var radio = document.getElementsByName("radios");
	var radio_de = document.getElementById('radio-de');
	var radio_ru_mode = document.getElementById('radio-ru-mode');
	var radio_ru = document.getElementsByName("radios-ru");
	var radio_run_normal = document.getElementById("run_normal");
	var script_radio;
	var script_radio_label;
	var hid_btn_if = true;
	var ws_connect = false;
	var ws_error = false;
	var ws_retry = 0;
	var luci_protocol;
	var ws_t;
	var ws_c;
	var state_refresh;
	var s;
	var gr;
	
	hid_1.style.display = "none";
	hid_2.style.display = "none";
	hid_3.style.display = "none";
	state.style.display="none";

	XHR.poll(3, '<%=luci.dispatcher.build_url("admin", "services", "openclash", "status")%>', null, function(x, status) {
		if ( x && x.status == 200 ) {
			if ( status.restricted_mode != "1" )
			{
			   clash.innerHTML = status.clash ? '<b style=color:green>' + status.core_type +'&nbsp;&nbsp;&nbsp;<%:Running%></b>' : '<b style=color:red><%:Not Running%></b>';
			}
			else
			{
			   clash.innerHTML = status.clash ? '<b style=color:green>' + status.core_type +'&nbsp;&nbsp;&nbsp;<%:Running%>&nbsp;&nbsp;&nbsp;<%:<Limited State>%></b>' : '<b style=color:red><%:Not Running%></b>';
			}
			watchdog.innerHTML = status.watchdog ? '&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;<%:Daemons%>:&nbsp;&nbsp;&nbsp;<b style=color:green><%:Running%></b>' : '&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;<%:Daemons%>:&nbsp;&nbsp;&nbsp;<b style=color:red><%:Not Running%></b>';
			dase.innerHTML = status.dase ? "<b style=color:green>"+status.dase+"</b>" : "<b style=color:red>"+"<%:Not Set%>"+"</b>";
			web.innerHTML = status.web ? '<input type="button" class="btn cbi-button cbi-button-reload" value="<%:Yacd Control Panel%>" onclick="return ycad_dashboard(this)"/>' : '<b style=color:red><%:Not Running%></b>';
			webo.innerHTML = status.web ? '<input type="button" class="btn cbi-button cbi-button-reload" value="<%:Dashboard Control Panel%>" onclick="return net_dashboard(this)"/>' : '<b style=color:red><%:Not Running%></b>';
			webm.innerHTML = status.web ? '<input type="button" class="btn cbi-button cbi-button-reload" value="<%:Metacubexd Control Panel%>" onclick="return meta_dashboard(this)"/>' : '<b style=color:red><%:Not Running%></b>';
			close_all_connection.innerHTML = status.clash ? '<input type="button" class="btn cbi-button cbi-button-reload" value="<%:Close All Connections%>" onclick="return b_close_all_connection(this)"/>' : '<b style=color:red><%:Not Running%></b>';
			reload_firewall.innerHTML = status.clash ? '<input type="button" class="btn cbi-button cbi-button-reload" value="<%:Reload Firewall Rules%>" onclick="return b_reload_firewall(this)"/>' : '<b style=color:red><%:Not Running%></b>';
			flush_fakeip_cache.innerHTML = status.clash ? '<input type="button" class="btn cbi-button cbi-button-reload" value="<%:Flush Fake-IP Cache%>" onclick="return b_flush_fakeip_cache(this)"/>' : '<b style=color:red><%:Not Running%></b>';
			one_key_update.innerHTML = '<input type="button" class="btn cbi-button cbi-button-reload" value="<%:Check All Components Update%>" onclick="return all_one_key_update(this)"/>';
			update_subscribe.innerHTML = '<input type="button" class="btn cbi-button cbi-button-reload" value="<%:Check Config Update%>" onclick="return b_update_subscribe(this)"/>';
			update_other_rules.innerHTML = '<input type="button" class="btn cbi-button cbi-button-reload" value="<%:Check Third Party Rules Update%>" onclick="return b_update_other_rules(this)"/>';
			update_geoip.innerHTML = '<input type="button" class="btn cbi-button cbi-button-reload" value="<%:Check GEOIP Data Update%>" onclick="return b_update_geoip(this)"/>';
			update_geosite.innerHTML = '<input type="button" class="btn cbi-button cbi-button-reload" value="<%:Check GeoSite Data Update%>" onclick="return b_update_geosite(this)"/>';
			if (status.daip && window.location.hostname == status.daip) {
			   daip.innerHTML = status.daip ? "<b style=color:green>"+status.daip+"</b>" : "<b style=color:red>"+"<%:Not Set%>"+"</b>";
			   dapo.innerHTML = status.cn_port ? "<b style=color:green>"+status.cn_port+"</b>" : "<b style=color:red>"+"<%:Not Set%>"+"</b>";
			   luci_protocol = (window.location.protocol == "http:" ? "ws://" : "wss://") + status.daip + ":" + status.cn_port;
			}
			else if (status.daip && window.location.hostname != status.daip && status.db_foward_domain && status.db_foward_port)
			{
			   daip.innerHTML = status.db_foward_domain ? "<b style=color:green>"+status.db_foward_domain+"</b>" : "<b style=color:red>"+"<%:Not Set%>"+"</b>";
			   dapo.innerHTML = status.db_foward_port ? "<b style=color:green>"+status.db_foward_port+"</b>" : "<b style=color:red>"+"<%:Not Set%>"+"</b>";
			   luci_protocol = (window.location.protocol == "http:" ? "ws://" : "wss://") + status.db_foward_domain + ":" + status.db_foward_port;
			}
			else {
			   daip.innerHTML = status.daip ? "<b style=color:green>"+status.daip+"</b>" : "<b style=color:red>"+"<%:Not Set%>"+"</b>";
			   dapo.innerHTML = status.cn_port ? "<b style=color:green>"+status.cn_port+"</b>" : "<b style=color:red>"+"<%:Not Set%>"+"</b>";
			   luci_protocol = (window.location.protocol == "http:" ? "ws://" : "wss://") + status.daip + ":" + status.cn_port;
			};
			
			if (status.clash && status.watchdog) {
				radio_mode.style.display = "inline-block";
				radio_de.style.display = "none";
			}
			else {
				radio_mode.style.display = "none";
				radio_de.style.display = "";
				radio_de.innerHTML = "<b style=color:red><%:Not Running%></b>";
			};
			
			if (status.clash && status.watchdog) {
				radio_ru_mode.style.display = "inline-block";
			}
			else {
				radio_ru_mode.style.display = "none";
			};
			
			function ws_open() {
				ws_t = new WebSocket(luci_protocol+"/traffic?token="+status.dase);
				ws_c = new WebSocket(luci_protocol+"/connections?token="+status.dase);
				ws_t.onmessage = ws_tmessage;
				ws_c.onmessage = ws_cmessage;
				ws_t.onerror = ws_terror;
				ws_t.onopen = function (event) {
					ws_connect = true;
					ws_error = false;
				};
			};

			if (status.watchdog && status.clash) {
				if (!ws_connect) {
					if (!ws_error) {
						ws_open();
					}
					else if (ws_retry < 3)
					{
						ws_retry=ws_retry+1;
						ws_open();
					}
					else
					{
						ws_terror();
					};
				};
			}
			else
			{
				ws_connect = false;
				ws_error = false;
				if (status.clash) {
					ws_terror();
				};
			};
		};
	});

	XHR.poll(3, '<%=luci.dispatcher.build_url("admin", "services", "openclash", "startlog")%>', null, function(x, status) {
	  if ( x && x.status == 200 ) {
	  	if ( status.startlog.match("level=fatal") || status.startlog.indexOf("FTL [Config]") != "-1" ) {
	    	XHR.get('<%=luci.dispatcher.build_url("admin", "services", "openclash", "del_start_log")%>', null, function(x) {});
			if ( status.startlog.match("level=fatal") ) {
				alert('<%:OpenClash Start Failed%> :\n\n' + status.startlog.split('msg=')[1]);
			}
	    	else {
				alert('<%:OpenClash Start Failed%> :\n\n' + status.startlog.split('FTL [Config] ')[1]);
			};
		}
		else if ( status.startlog != "\n" && status.startlog != "" ) {
			if ( status.startlog.match("Tip:") || status.startlog.match("提示：")) {
				startlog.innerHTML = '<b style=color:#ff6f00>'+status.startlog+'</b>';
			}
			else if ( status.startlog.match("Error:") || status.startlog.match("错误：")) {
				startlog.innerHTML = '<b style=color:#FF0000>'+status.startlog+'</b>';
			}
			else if ( status.startlog.match("Warning:") || status.startlog.match("警告：")) {
	    		startlog.innerHTML = '<b style=color:#ff00bb>'+status.startlog+'</b>';
			}
			else if ( status.startlog.match("Watchdog:") || status.startlog.match("守护程序：")) {
	    		startlog.innerHTML = '<b style=color:#b300ff>'+status.startlog+'</b>';
			}
			else {
	    		startlog.innerHTML = '<b style=color:green>'+status.startlog+'</b>';
			};
		};
	  };
	});
	
	XHR.poll(6, '<%=luci.dispatcher.build_url("admin", "services", "openclash", "startlog")%>', null, function(x, status) {
		if ( x && x.status == 200 ) {
			if ( status.startlog == "\n" || status.startlog == "" ) {
				var rdmdl=Math.floor(Math.random()*16)+1;
				if(rdmdl==1)
				{
					startlog.innerHTML = '<b><font><%:Tip: You can modify the profile on the profile page (for content that is not taken over)%></font></b>';
				}
				if(rdmdl==2)
				{
					startlog.innerHTML = '<b><font><%:Tip: click the version icon above to jump to the client publishing page%></font></b>';
				}
				if(rdmdl==3)
				{
					startlog.innerHTML = '<b><font><%:Tip: do not write configuration files? Try to create one click on the server page%></font></b>';
				}
				if(rdmdl==4)
				{
					startlog.innerHTML = '<b><font><%:Tip: some website are abnormal? Try switching modes or using third-party rules%></font></b>';
				}
				if(rdmdl==5)
				{
					startlog.innerHTML = '<b><font><%:Tip: using the fake IP mode can get a faster access experience%></font></b>';
				}
				if(rdmdl==6)
				{
					startlog.innerHTML = '<b><font><%:Tip: query DNS by TLS & TCP & HTTPS can get better anti pollution effect%></font></b>';
				}
				if(rdmdl==7)
				{
					startlog.innerHTML = '<b><font><%:Tip: openlash will check the configuration file parameters to ensure that it works properly%></font></b>';
				}
				if(rdmdl==8)
				{
					startlog.innerHTML = '<b><font><%:Tip: the nameserver group must have at least one server set when using custom DNS%></font></b>';
				}
				if(rdmdl==9)
				{
					startlog.innerHTML = '<b><font><%:Tip: the website access check shows the connection of the device currently logged in to the Luci page%></font></b>';
				}
				if(rdmdl==10)
				{
					startlog.innerHTML = '<b><font><%:Tip: after started, please wait patiently until the connection is normal%></font></b>';
				}
				if(rdmdl==11)
				{
					startlog.innerHTML = '<b><font><%:Tip: if you don not use IPv6, please turn off the DHCP service of IPv6, otherwise the connection will be abnormal%></font></b>';
				}
				if(rdmdl==12)
				{
					startlog.innerHTML = '<b><font><%:Tip: you can update the version in the global settings page%></font></b>';
				}
				if(rdmdl==13)
				{
					startlog.innerHTML = '<b><font><%:Note: It is not recommended to enable IPv6 and related services for routing. Most of the network connection problems reported so far are related to it%></font></b>';
				}
				if(rdmdl==14)
				{
					startlog.innerHTML = '<b><font><%:Note: Turning on secure DNS in the browser will cause abnormal shunting, please be careful to turn it off%></font></b>';
				}
				if(rdmdl==15)
				{
					startlog.innerHTML = '<b><font><%:Note: Some software will modify the device HOSTS, which will cause abnormal shunt, please pay attention to check%></font></b>';
				}
				if(rdmdl==16)
				{
					startlog.innerHTML = '<b><font><%:Note: The default proxy routes local traffic, BT, PT download, etc., please use Redir-Host mode as much as possible and pay attention to traffic avoidance%></font></b>';
				}
      		}
	 	}
	});

	get_rule_mode();
	get_run_mode();
	state_get();
	clashversion_check();
	check_core();

	function get_rule_mode() {
		XHR.get('<%=luci.dispatcher.build_url("admin", "services", "openclash", "rule_mode")%>', null, function(x, status) {
			if (x && x.status == 200 && status.mode != "") {
				if (status.core_type == "TUN" && radio.length != 4) {
					script_radio = document.createElement("input")
					script_radio.setAttribute("type", "radio");
					script_radio.setAttribute("id", "script");
					script_radio.setAttribute("name", "radios");
					script_radio.setAttribute("value", "script");
					script_radio.setAttribute("onclick", "javascript:return switch_rule_mode(this.value);");
					script_radio_label = document.createElement("label")
					script_radio_label.setAttribute("for", "script");
					script_radio_label.innerHTML = "Script";
					radio_mode.appendChild(script_radio);
					radio_mode.appendChild(script_radio_label);
				}
				else if (status.core_type != "TUN" && radio.length == 4) {
					radio_mode.removeChild(script_radio)
					radio_mode.removeChild(script_radio_label)
				}
				for (i=0; i<radio.length; i++) {
					if (radio[i].value == status.mode && ! radio[i].checked) {
						radio[i].checked = true;
						break
					}
				}
			}
		});
		s = setTimeout("get_rule_mode()",5000);
	};
	
	function switch_rule_mode(value)
	{
		clearTimeout(s);
		XHR.get('<%=luci.dispatcher.build_url("admin", "services", "openclash", "switch_rule_mode")%>', {rule_mode: value}, function(x, status) {
			if (x && x.status == 200) {
    		alert(' <%:Proxy Mode%>: ' + value + ' <%:switching succeeded!%>');
    		get_rule_mode();
			}
			else {
				alert(' <%:Proxy Mode%>: ' + value + ' <%:switching failed!%>');
				get_rule_mode();
			}
		});
	};
	
	function get_run_mode() {
		XHR.get('<%=luci.dispatcher.build_url("admin", "services", "openclash", "get_run_mode")%>', null, function(x, status) {
			if (x && x.status == 200 && status.mode) {
				if (status.mode == "fake-ip" || status.mode == "fake-ip-tun" || status.mode == "fake-ip-mix")
				{
					mode.innerHTML = status.clash && status.watchdog ? "<b style=color:green><%:Fake-IP%></b>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;" : '<b style=color:red><%:Not Running%></b>&nbsp;&nbsp;&nbsp;';
					radio_run_normal.innerHTML = "<%:Enhance%>"
				}
				else if (status.mode == "redir-host" || status.mode == "redir-host-tun" ||  status.mode == "redir-host-mix")
				{
					mode.innerHTML = status.clash && status.watchdog ? "<b style=color:green><%:Redir-Host%></b>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;" : '<b style=color:red><%:Not Running%></b>&nbsp;&nbsp;&nbsp;';
					radio_run_normal.innerHTML = "<%:Compatible%>"
				};
				for (i=0; i<radio_ru.length; i++) {
					if (radio_ru[i].value == (status["mode"].split("-")[2] == undefined ? "" : ("-" + status["mode"].split("-")[2])) && ! radio_ru[i].checked) {
						radio_ru[i].checked = true;
					}
				};
			};
		});
		gr = setTimeout("get_run_mode()",2000);
	};
	
	function switch_run_mode(value)
	{
		var r = confirm("<%:Are you sure want to switch the running mode?%>")
    	if (r == true) {
    		clearTimeout(gr);
			XHR.get('<%=luci.dispatcher.build_url("admin", "services", "openclash", "switch_run_mode")%>', {run_mode: value}, function(x, status) {
			if (x && x.status == 200) {
				get_run_mode();
			}
			else {
				get_run_mode();
			}
			});
		}
	};
	
	function state_get() {
		XHR.get('<%=luci.dispatcher.build_url("admin", "services", "openclash", "state")%>', null, function(x, status) {
			if ( x && x.status == 200 ) {
				ipdb.innerHTML = status.ipdb ? "<b style=color:green>"+status.ipdb+"</b>" : "<b style=color:red>"+"<%:File Not Exist%>"+"</b>";
				geosite.innerHTML = status.geosite ? "<b style=color:green>"+status.geosite+"</b>" : "<b style=color:red>"+"<%:File Not Exist%>"+"</b>";
				lhie1.innerHTML = status.lhie1 ? "<b style=color:green>"+status.lhie1+"</b>" : "<b style=color:red>"+"<%:File Not Exist%>"+"</b>";
				ConnersHua.innerHTML = status.ConnersHua ? "<b style=color:green>"+status.ConnersHua+"</b>" : "<b style=color:red>"+"<%:File Not Exist%>"+"</b>";
				ConnersHua_return.innerHTML = status.ConnersHua_return ? "<b style=color:green>"+status.ConnersHua_return+"</b>" : "<b style=color:red>"+"<%:File Not Exist%>"+"</b>";
				chnroute.innerHTML = status.chnroute ? "<b style=color:green>"+status.chnroute+"</b>" : "<b style=color:red>"+"<%:File Not Exist%>"+"</b>";
				chnroutev6.innerHTML = status.chnroutev6 ? "<b style=color:green>"+status.chnroutev6+"</b>" : "<b style=color:red>"+"<%:File Not Exist%>"+"</b>";
				if ( status.historychecktime != "0" ) {
				   historychecktime.innerHTML = "<b style=color:green>"+status.historychecktime+"</b>";
				}
		  	else {
		 	 	 historychecktime.innerHTML = "<b style=color:green>"+"<%:No Backup%>"+"</b>";
		 	 }
			}
		});
	};
	
	function hid_btn_action() {
		if (hid_btn_if) {
			hid_1.style.display = "";
			hid_2.style.display = "";
			hid_3.style.display = "";
			state.style.display = "block";
			hid_btn_if = false;
			clearInterval(state_refresh);
			state_refresh=setInterval("state_get()",1000*2);
		} else {
			hid_1.style.display = "none";
			hid_2.style.display = "none";
			hid_3.style.display = "none";
			state.style.display = "none";
			hid_btn_if = true;
			clearInterval(state_refresh);
		}
	};
	
	function winOpen(url)
	{
		var winOpen = window.open(url);
		if(winOpen == null || typeof(winOpen) == 'undefined'){
			window.location.href=url;
		}
	};
	 
	function ws_terror() {
		ws_error = true;
		XHR.get('<%=luci.dispatcher.build_url("admin", "services", "openclash", "toolbar_show")%>', null, function(x, status) {
			if (x && x.status == 200 && x.responseText != "") {
				document.getElementById("upload_").innerHTML = "<font style=\"color:green\">"+status.up+"</font>";
				document.getElementById("download_").innerHTML = "<font style=\"color:green\">"+status.down+"</font>";
				document.getElementById("uploadtotal_").innerHTML = "<font style=\"color:green\">"+status.up_total+"</font>";
				document.getElementById("downloadtotal_").innerHTML = "<font style=\"color:green\">"+status.down_total+"</font>";
				document.getElementById("mem_t").innerHTML = "<font style=\"color:green\">"+status.mem+"</font>";
				document.getElementById("connect_t").innerHTML = "<font style=\"color:green\">"+status.connections+"</font>";
				if (status.cpu <= 50) {
					document.getElementById("cpu_t").innerHTML = "<font style=\"color:green\">"+status.cpu+" %</font>";
				}
				else if (status.cpu >= 50 && status.cpu <= 80) {
					document.getElementById("cpu_t").innerHTML = "<font style=\"color:orange\">"+status.cpu+" %</font>";
				}
				else if (status.cpu <= 100) {
					document.getElementById("cpu_t").innerHTML = "<font style=\"color:red\">"+status.cpu+" %</font>";
				}
				else {
					document.getElementById("cpu_t").innerHTML = "<font style=\"color:green\">0 %</font>";
				}
			}
			else {
				document.getElementById("upload_").innerHTML = "<font style=\"color:green\">0 B/S</font>";
				document.getElementById("download_").innerHTML = "<font style=\"color:green\">0 B/S</font>";
				document.getElementById("uploadtotal_").innerHTML = "<font style=\"color:green\">0 KB</font>";
				document.getElementById("downloadtotal_").innerHTML = "<font style=\"color:green\">0 KB</font>";
				document.getElementById("mem_t").innerHTML = "<font style=\"color:green\">0 KB</font>";
				document.getElementById("cpu_t").innerHTML = "<font style=\"color:green\">0 %</font>";
				document.getElementById("connect_t").innerHTML = "<font style=\"color:green\">0</font>";
			}
		});
	};
	
	function show_sys() {
		XHR.get('<%=luci.dispatcher.build_url("admin", "services", "openclash", "toolbar_show_sys")%>', null, function(x, status) {
			if (x && x.status == 200 && x.responseText != "") {
				document.getElementById("mem_t").innerHTML = "<font style=\"color:green\">"+status.mem+"</font>";
				if (status.cpu <= 50) {
					document.getElementById("cpu_t").innerHTML = "<font style=\"color:green\">"+status.cpu+" %</font>";
				}
				else if (status.cpu >= 50 && status.cpu <= 80) {
					document.getElementById("cpu_t").innerHTML = "<font style=\"color:orange\">"+status.cpu+" %</font>";
				}
				else if (status.cpu <= 100) {
					document.getElementById("cpu_t").innerHTML = "<font style=\"color:red\">"+status.cpu+" %</font>";
				}
				else {
					document.getElementById("cpu_t").innerHTML = "<font style=\"color:green\">0 %</font>";
				}
			}
			else {
				document.getElementById("mem_t").innerHTML = "<font style=\"color:green\">0 KB</font>";
				document.getElementById("cpu_t").innerHTML = "<font style=\"color:green\">0 %</font>";
			}
		});
	};
	
	function ws_tmessage(event) {
		var data = JSON.parse(event.data)
		if (data.up) {
			document.getElementById("upload_").innerHTML = "<font style=\"color:green\">"+bytesToSize(data.up)+"/S</font>";
		}
		else {
			document.getElementById("upload_").innerHTML = "<font style=\"color:green\">0 B/S</font>";
		}
		if (data.down) {
			document.getElementById("download_").innerHTML = "<font style=\"color:green\">"+bytesToSize(data.down)+"/S</font>";
		}
		else {
			document.getElementById("download_").innerHTML = "<font style=\"color:green\">0 B/S</font>";
		}
	};
	
	function ws_cmessage(event) {
		var data = JSON.parse(event.data)
		if (data.uploadTotal) {
			document.getElementById("uploadtotal_").innerHTML = "<font style=\"color:green\">"+bytesToSize(data.uploadTotal)+"</font>";
		}
		else {
			document.getElementById("uploadtotal_").innerHTML = "<font style=\"color:green\">0 KB</font>";
		}
		if (data.downloadTotal) {
			document.getElementById("downloadtotal_").innerHTML = "<font style=\"color:green\">"+bytesToSize(data.downloadTotal)+"</font>";
		}
		else {
			document.getElementById("downloadtotal_").innerHTML = "<font style=\"color:green\">0 KB</font>";
		}
		if (data.connections) {
			document.getElementById("connect_t").innerHTML = "<font style=\"color:green\">"+Object.keys(data.connections).length+"</font>";
		}
		else {
			document.getElementById("connect_t").innerHTML = "<font style=\"color:green\">0</font>";
		}
		show_sys();
	};
	
	function bytesToSize(bytes) {
		var sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
		if (bytes == 0) return '0 B';
		var i = Math.floor(Math.log(bytes) / Math.log(1024));
		return i == 0 ? (bytes / Math.pow(1024, i)) + ' ' + sizes[i] : (bytes / Math.pow(1024, i)).toFixed(1) + ' ' + sizes[i];
	};
	  
	function all_one_key_update(btn)
    {
        btn.value    = '<%:Check All Components Update%>';
        btn.disabled = true;
        var r = confirm("<%:Check and Update all Cores and OpenClash?%>")
        if (r == true) {
			XHR.get('<%=luci.dispatcher.build_url("admin", "services", "openclash", "one_key_update_check")%>', null, function(x, status) {
				if ( x && x.status == 200 ) {
					if ( status.corever != "0" ) {
						XHR.get('<%=luci.dispatcher.build_url("admin", "services", "openclash", "one_key_update")%>', null, function(x, status) {
							if ( x && x.status != 200 ) {
								alert('<%:Check failed, Please try again later!%>')
							}
						});
					}
					else {
						alert('<%:No compiled version is selected. Please configure it in the General Settings tab!%>')
					}
				}
				else {
					alert('<%:Check failed, Please try again later!%>')
				}
			});
		}
        btn.disabled = false;
        return false; 
    };
    
    function b_update_other_rules(btn)
    {
        btn.disabled = true;
        btn.value    = '<%:Checking...%>';
        XHR.get('<%=luci.dispatcher.build_url("admin", "services", "openclash", "update_other_rules")%>', null, function(x, status) {
        if ( x && x.status == 200 ) {
           btn.disabled = false;
           btn.value    = '<%:Check Third Party Rules Update%>';
        }
        else {
        	btn.disabled = false;
        	btn.value    = '<%:Check Third Party Rules Update%>';
        }
        return false;
        });
    };
    
    function b_update_geoip(btn)
    {
        btn.disabled = true;
        btn.value    = '<%:Checking...%>';
        XHR.get('<%=luci.dispatcher.build_url("admin", "services", "openclash", "update_geoip")%>', null, function(x, status) {
        if ( x && x.status == 200 ) {
           btn.disabled = false;
           btn.value    = '<%:Check GEOIP Data Update%>';
        }
        else {
        	btn.disabled = false;
          btn.value    = '<%:Check GEOIP Data Update%>';
        }
        return false;
        });
    };
    
    function b_update_geosite(btn)
    {
        btn.disabled = true;
        btn.value    = '<%:Checking...%>';
        XHR.get('<%=luci.dispatcher.build_url("admin", "services", "openclash", "update_geosite")%>', null, function(x, status) {
        if ( x && x.status == 200 ) {
           btn.disabled = false;
           btn.value    = '<%:Check GeoSite Data Update%>';
        }
        else {
        	btn.disabled = false;
          btn.value    = '<%:Check GeoSite Data Update%>';
        }
        return false;
        });
    };
    
    function b_flush_fakeip_cache(btn)
    {
		btn.disabled = true;
		btn.value    = '<%:Flushing...%> ';
		XHR.get('<%=luci.dispatcher.build_url("admin", "services", "openclash","flush_fakeip_cache")%>',
			null,
			function(x,status)
			{
				if ( x && x.status == 200 ) {
					if(status.flush_status == "0" || status.flush_status != "")
					{
						btn.value = '<%:Flush Failed%>';
					
					}
					else
					{
					btn.value = '<%:Flush Successful%>';
					}
				}
				else {
				btn.value = '<%:Flush Timeout%>';
				}
			}
		);
		btn.disabled = false;
		return false;
	};
    
    function b_update_subscribe(btn)
    {
        btn.disabled = true;
        btn.value    = '<%:Checking...%>';
        XHR.get('<%=luci.dispatcher.build_url("admin", "services", "openclash", "update_subscribe")%>', null, function(x, status) {
        if ( x && x.status == 200 ) {
           btn.disabled = false;
           btn.value    = '<%:Check Config Update%>';
        }
        else {
        	btn.disabled = false;
          btn.value    = '<%:Check Config Update%>';
        }
        return false;
        });
    };
    
	function b_reload_firewall(btn)
    {
        btn.disabled = true;
        btn.value    = '<%:Reloading...%>';
        XHR.get('<%=luci.dispatcher.build_url("admin", "services", "openclash", "reload_firewall")%>', null, function(x, status) {
        if ( x && x.status == 200 ) {
           btn.disabled = false;
           btn.value    = '<%:Reload Firewall Rules%>';
        }
        else {
        	btn.disabled = false;
          btn.value    = '<%:Firewall Rules Reset Failed%>';
        }
        return false;
        });
    };
    
	function b_close_all_connection(btn)
    {
        btn.disabled = true;
        btn.value    = '<%:Reloading...%>';
        XHR.get('<%=luci.dispatcher.build_url("admin", "services", "openclash", "close_all_connection")%>', null, function(x, status) {
        if ( x && x.status == 200 ) {
           btn.disabled = false;
           btn.value    = '<%:Close All Connections%>';
        }
        else {
        	btn.disabled = false;
          btn.value    = '<%:Close All Connections Failed%>';
        }
        return false;
        });
    };
    
	function meta_dashboard(btn)
    {
        XHR.get('<%=luci.dispatcher.build_url("admin", "services", "openclash", "status")%>', null, function(x, status) {
        btn.disabled = true;
        btn.value    = '<%:Metacubexd Control Panel%>';
        if (status.daip && window.location.hostname == status.daip) {
            url9='<%="http://'+window.location.hostname+':'+status.cn_port+'/ui/metacubexd/#/?hostname='+ window.location.hostname + '&port=' + status.cn_port + '&secret=' + status.dase +'"%>';
        }
        else if (status.daip && window.location.hostname != status.daip && status.db_foward_domain && status.db_foward_port) {
            var ui_proto = status.db_forward_ssl == 0 ? 'http://' : 'https://';
            url9='<%="'+ui_proto+status.db_foward_domain+':'+status.db_foward_port+'/ui/metacubexd/#/?hostname='+ status.db_foward_domain + '&port=' + status.db_foward_port + '&secret=' + status.dase +'"%>';
        }
        else {
            url9='<%="http://'+window.location.hostname+':'+status.cn_port+'/ui/metacubexd/"%>';
        }
        winOpen(url9);
        return false;
        });
    };

	function ycad_dashboard(btn)
    {
        XHR.get('<%=luci.dispatcher.build_url("admin", "services", "openclash", "status")%>', null, function(x, status) {
        btn.disabled = true;
        btn.value    = '<%:Yacd Control Panel%>';
        if (status.daip && window.location.hostname == status.daip) {
            url1='<%="http://'+window.location.hostname+':'+status.cn_port+'/ui/yacd/?hostname='+ window.location.hostname + '&port=' + status.cn_port + '&secret=' + status.dase +'"%>';
        }
        else if (status.daip && window.location.hostname != status.daip && status.db_foward_domain && status.db_foward_port) {
            var ui_proto = status.db_forward_ssl == 0 ? 'http://' : 'https://';
            url1='<%="'+ui_proto+status.db_foward_domain+':'+status.db_foward_port+'/ui/yacd/?hostname='+ status.db_foward_domain + '&port=' + status.db_foward_port + '&secret=' + status.dase +'"%>';
        }
        else {
            url1='<%="http://'+window.location.hostname+':'+status.cn_port+'/ui/yacd/"%>';
        }
        winOpen(url1);
        return false;
        });
    };
    
    function net_dashboard(btn)
    {
        XHR.get('<%=luci.dispatcher.build_url("admin", "services", "openclash", "status")%>', null, function(x, status) {
        btn.disabled = true;
        btn.value    = '<%:Dashboard Control Panel%>';
        if (status.daip && window.location.hostname == status.daip) {
            url2='<%="http://'+window.location.hostname+':'+status.cn_port+'/ui/dashboard/#/?host='+ window.location.hostname + '&port=' + status.cn_port + '&secret=' + status.dase +'"%>';
        }
        else if (status.daip && window.location.hostname != status.daip && status.db_foward_domain && status.db_foward_port) {
            var ui_proto = status.db_forward_ssl == 0 ? 'http://' : 'https://';
            url2='<%="'+ui_proto+status.db_foward_domain+':'+status.db_foward_port+'/ui/dashboard/#/?host='+ status.db_foward_domain + '&port=' + status.db_foward_port + '&secret=' + status.dase +'"%>';
        }
        else {
            url2='<%="http://'+window.location.hostname+':'+status.cn_port+'/ui/dashboard/"%>';
        }
        winOpen(url2);
        return false;
        });
    };
    
    function homepage()
    {
        url3='https://github.com/vernesong/OpenClash';
        winOpen(url3);
    };
    
    
    function gitbookpage()
    {
        url8='https://lancellc.gitbook.io/clash';
        winOpen(url8);
    };
    
    function wikipage()
    {
        url5='https://github.com/vernesong/OpenClash/wiki';
        winOpen(url5);
    };
    
    function telegrampage()
    {
        url6='https://t.me/ctcgfw_openwrt_discuss';
        winOpen(url6);
    };
    
    function sponsorpage()
    {
        url7='https://ko-fi.com/vernesong';
        winOpen(url7);
    };

	function logo_check(imgobj,imgSrc,imgNewSrc)
    {
		var newimg = new Image();
		newimg.src = imgNewSrc;
		newimg.onload = function() {
    		imgobj.src = imgNewSrc;
			imgobj.loading = "lazy";
			imgobj.onload = function() {};
		};
		newimg.onerror = function() {
			imgobj.onload = function() {};
			imgerrorfuns(imgobj,imgSrc);
		};
    };

    function clashversion_check()
    {
    	XHR.get('<%=luci.dispatcher.build_url("admin", "services", "openclash", "lastversion")%>', null, function(x, status) {
    		if ( x && x.status == 200 ) {
        		if ( status.lastversion != "" )
        		{
            		clashversion.innerHTML = '<img id="lastver" src="'+status.lastversion+'" alt="lastversion" onerror="return clashversion_error()" onclick="return go_update()">';
        		}
    		}
    	});
    };

    function clashversion_error()
    {
        clashversion.innerHTML = '<img id="clashversion" src="/luci-static/resources/openclash/img/version.svg?<%=random%>" alt="currentversion" height="21px" onclick="return go_update()">';
    };

	function logo_error(imgobj,imgSrc)
    {
		imgobj.src=imgSrc;
    };
    
    function imgerrorfuns(imgobj,imgSrc){
    	setTimeout(function(){
        imgobj.src = imgSrc;
		imgobj.loading = "lazy";
      },1000*10);
    };
     
    function go_update()
    {
       url4='https://github.com/vernesong/OpenClash/releases';
       winOpen(url4);
    };

	function check_core()
	{
		XHR.get('<%=luci.dispatcher.build_url("admin", "services", "openclash", "check_core")%>', null, function(x, status) {
			if ( x && x.status == 200 ) {
        		if ( status.core_status != "1" )
        		{
            		var r = confirm("<%:You have not installed the core yet, do you want to download and install it now?%>")
					if (r == true) {
						return select_git_cdn("core_download");
					}
        		}
    		}
        });
	};
//]]></script>

