<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="dns-prefetch" href="//cdn.jsdelivr.net">	
<meta name="referrer" content="no-referrer">
<link rel="preconnect" href="https://myip.ipip.net">
<link rel="preconnect" href="https://api.ip.sb/geoip/">
<link rel="preconnect" href="https://ipinfo.io/json">
</head>
</html>	
<style>
.pure-g{letter-spacing:-.31em;text-rendering:optimizespeed;font-family:FreeSans,Arimo,"Droid Sans",Helvetica,Arial,sans-serif;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-flow:row wrap;-ms-flex-flow:row wrap;flex-flow:row wrap;-webkit-align-content:flex-start;-ms-flex-line-pack:start;align-content:flex-start}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){table .pure-g{display:block}}.opera-only :-o-prefocus,.pure-g{word-spacing:-.43em}.pure-u{display:inline-block;zoom:1;letter-spacing:normal;word-spacing:normal;vertical-align:top;text-rendering:auto}.pure-g [class*=pure-u]{font-family:sans-serif}.pure-u-1,.pure-u-1-1,.pure-u-1-12,.pure-u-1-2,.pure-u-1-24,.pure-u-1-3,.pure-u-1-4,.pure-u-1-5,.pure-u-1-6,.pure-u-1-8,.pure-u-10-24,.pure-u-11-12,.pure-u-11-24,.pure-u-12-24,.pure-u-13-24,.pure-u-14-24,.pure-u-15-24,.pure-u-16-24,.pure-u-17-24,.pure-u-18-24,.pure-u-19-24,.pure-u-2-24,.pure-u-2-3,.pure-u-2-5,.pure-u-20-24,.pure-u-21-24,.pure-u-22-24,.pure-u-23-24,.pure-u-24-24,.pure-u-3-24,.pure-u-3-4,.pure-u-3-5,.pure-u-3-8,.pure-u-4-24,.pure-u-4-5,.pure-u-5-12,.pure-u-5-24,.pure-u-5-5,.pure-u-5-6,.pure-u-5-8,.pure-u-6-24,.pure-u-7-12,.pure-u-7-24,.pure-u-7-8,.pure-u-8-24,.pure-u-9-24{display:inline-block;zoom:1;letter-spacing:normal;word-spacing:normal;vertical-align:top;text-rendering:auto}.pure-u-1-24{width:4.1667%}.pure-u-1-12,.pure-u-2-24{width:8.3333%}.pure-u-1-8,.pure-u-3-24{width:12.5%}.pure-u-1-6,.pure-u-4-24{width:16.6667%}.pure-u-1-5{width:20%}.pure-u-5-24{width:20.8333%}.pure-u-1-4,.pure-u-6-24{width:25%}.pure-u-7-24{width:29.1667%}.pure-u-1-3,.pure-u-8-24{width:33.3333%}.pure-u-3-8,.pure-u-9-24{width:37.5%}.pure-u-2-5{width:40%}.pure-u-10-24,.pure-u-5-12{width:41.6667%}.pure-u-11-24{width:45.8333%}.pure-u-1-2,.pure-u-12-24{width:50%}.pure-u-13-24{width:54.1667%}.pure-u-14-24,.pure-u-7-12{width:58.3333%}.pure-u-3-5{width:60%}.pure-u-15-24,.pure-u-5-8{width:62.5%}.pure-u-16-24,.pure-u-2-3{width:66.6667%}.pure-u-17-24{width:70.8333%}.pure-u-18-24,.pure-u-3-4{width:75%}.pure-u-19-24{width:79.1667%}.pure-u-4-5{width:80%}.pure-u-20-24,.pure-u-5-6{width:83.3333%}.pure-u-21-24,.pure-u-7-8{width:87.5%}.pure-u-11-12,.pure-u-22-24{width:91.6667%}.pure-u-23-24{width:95.8333%}.pure-u-1,.pure-u-1-1,.pure-u-24-24,.pure-u-5-5{width:100%}
	.block{
		margin: 0.5rem;
		padding: 0;
		font-weight: normal;
		font-style: normal;
		line-height: 1;
		font-family: inherit;
		min-width: inherit;
		overflow-x: auto;
		overflow-y: hidden;
		border: 1px solid rgba(0,0,0,.05);
		border-radius: .375rem;
		background-color: #fff;
		box-shadow: 0 0 2rem 0 rgba(136,152,170,.15);
	}
	.img-con{
		margin: 1rem;
		margin-left: -20px;

	}
	.green{
		font-size:.9rem;
		color: #2dce89;
	}
	.red{
		font-size:.9rem;
		color: #fb6340;
	}
	.yellow{
		font-size:.9rem;
		color: #fb9a05;
	}
	.block img{
		width: 48px;
		height: auto;
		float:right;
	}
	.pure-u-5-8{
		display:flex;
		align-items:center;
	}

	.block h4{
		font-size: .8125rem;
		font-weight: 600;
		margin: 1rem;
		color:#8898aa!important;
		line-height: 1.8em;
		min-height: 48px;
	}
	
	.check {
		cursor: pointer;
	}

	@media screen and (max-width: 720px) {
		.block{
			margin: 0.2rem;
		}
		.pure-u-1-4{
			width: 50%;
		}
		.pure-u-1-2{
			width: 100%;
		}
		

	}
	
	@media screen and (max-width: 480px) {
		.img-con{
			margin: 1.5rem 0.5rem;
		}
		.block img{
			width: 36px;
		}
		
	}
@media only screen and (max-width: 600px) {
  .siz {
    width: 100%;
  }
}

@media only screen and (min-width: 768px) {
  .siz {
    width: 50%;
  }
}

@media only screen and (min-width: 600px) {
  .siz {
    width: 50%;
  }
}

@media only screen and (max-width: 480px) {
  .siz {
    width: 100%;
  }
}

</style>

<fieldset class="cbi-section">
	  <p width="100%" align="center"><font color="blue"><b id="_realtimelog">Clash for OpenWRT</b></font></p>
	  <p width="100%" align="center"><%:Rule-based Custom Proxy Client%></p>
	  <p width="100%" align="center" id="_downloadnew"></p>
	  
</fieldset>

<fieldset class="cbi-section">
	
<div class="pure-g status">

		<div class="pure-u-1-4 ">
			<div class="block pure-g">
				<div class="pure-u-8-24">
					<div class="img-con">
						<img src="data:image/png;base64,[encoded data, 12740 characters]" />
					</div>
				</div>
				<div class="pure-u-16-24">
					<h4><%:Baidu%><br><br><span id="status_baidu" class="red"><em><%:Collecting data...%></em></span></h4>
				</div>
			</div>
		</div>
		
		
		<div class="pure-u-1-4 " >
			<div class="block pure-g">
				<div class="pure-u-8-24">
					<div class="img-con">
						<img src="data:image/png;base64,[encoded data, 12572 characters]">
						</div>
				</div>
				<div class="pure-u-16-24">
					<h4><%:Google%><br><br><span id="status_google" class="red"><em><%:Collecting data...%></em></span></h4>
				</div>
			</div>
		</div>
		
		<div class="pure-u-1-4 ">
			<div class="block pure-g">
				<div class="pure-u-8-24">
					<div class="img-con">
						<img src="data:image/png;base64,[encoded data, 48216 characters]"/>
					</div>
				</div>
				<div class="pure-u-16-24">
					<h4 ><%:Youtube%><br><br><span id="status_youtube" class="red"><em><%:Collecting data...%></em></span></h4>
				</div>
			</div>
		</div>
		
		<div class="pure-u-1-4" >
			<div class="block pure-g">
				<div class="pure-u-8-24">
					<div class="img-con">
						<img src="data:image/jpg;base64,[encoded data, 53408 characters]" />
						</div>
				</div>
				<div class="pure-u-16-24">
					<h4 ><%:GitHub%><br><br><span id="status_github" class="red"><em><%:Collecting data...%></em></span></h4>
				</div>
			</div>
		</div>
		
	  </div>
</fieldset>

<% if luci.i18n.context.lang == "zh-cn" then %>

<fieldset  class="cbi-section">

	<div class="pure-g status">
	
		<div class="siz">
			<div class="block pure-g">
				<div class="pure-u-8-24">
					<div class="img-con">
						<img src="data:image/png;base64,[encoded data, 92688 characters]"/>
					</div>
				</div>
				<div class="pure-u-16-24">
					<h4><%:Global IP%><br><br><span class="green" id="ip-ipify"><%:Checking...%></span> <span class="green" id="ip-ipify-ipip"></span></h4>
				</div>
			</div>
		</div>
		
		
		<div class="siz">
			<div class="block pure-g">
				<div class="pure-u-8-24">
					<div class="img-con">
						<img src="data:image/png;base64,[encoded data, 46844 characters]"/>
					</div>
				</div>
				<div class="pure-u-16-24">
					<h4 ><%:Domestic IP%><br><br><span id="d-ip" class="green"><%:Checking...%></span><span class="green" id="ipify-ipip"></span></h4>
				</div>
			</div>
		</div>
		
    </div>
</fieldset>

<%end%>

<% if luci.i18n.context.lang == "en" or luci.i18n.context.lang == "auto" then %>	
<fieldset  class="cbi-section">

	<div class="pure-g status">
	
		<div class="siz">
			<div class="block pure-g">
				<div class="pure-u-8-24">
					<div class="img-con">
						<img src="data:image/png;base64,[encoded data, 92688 characters]"/>
					</div>
				</div>
				<div class="pure-u-16-24">
					<h4><%:Global IP%><br><br><span id="d-ip-g" class="green"><%:Checking...%></span><span class="green" id="ipip-g"></span></h4>
				</div>
			</div>
		</div>
		
		
		<div class="siz">
			<div class="block pure-g">
				<div class="pure-u-8-24">
					<div class="img-con">
						<img src="data:image/png;base64,[encoded data, 46844 characters]"/>
					</div>
				</div>
				<div class="pure-u-16-24">
					<h4 ><%:Domestic IP%><br><br><span id="d-ip" class="green"><%:Checking...%></span><span class="green" id="ipip"></span></h4>
				</div>
			</div>
		</div>
		
    </div>
</fieldset>	
<%end%>	


<fieldset class="cbi-section">
	<table width="100%" cellspacing="10">
		<tr><td width="50%"><span><%:Clash Client%></span></td><td id="_clash"><em><%:Collecting data...%></em></td> </tr>
		<tr><td width="50%"><span><%:Clash Mode%></span></td><td id="_emode"><em><%:Collecting data...%></em></td> </tr>
		<tr><td width="50%"><span><%:Clash Config%></span></td><td id="_conf"><em><%:Collecting data...%></em></td> </tr>
		<tr><td width="50%"><span><%:Config Type%></span></td><td id="_conf_path"><em><%:Collecting data...%></em></td> </tr>
		<tr><td width="50%"><span><%:Clash Dashboard%></span></td><td id="_web"><em> <%:Collecting data...%> </em></td> </tr>
		<tr><td width="50%"><span><%:Yacd Dashboard%></span></td><td id="_webb"><em> <%:Collecting data...%> </em></td> </tr>
		
	</table>
</fieldset>

<fieldset class="cbi-section">
	<table width="100%" cellspacing="10">
		<tr><td width="50%"> <%:Dashboard Host%></td><td  id="_ip"><em><%:Collecting data...%></em></td></tr>
		<tr><td width="50%"> <%:Dashboard Port%></td><td  id="_port"><em><%:Collecting data...%></em></td></tr>
		<tr><td width="50%"> <%:Dashboard Secret%></td> <td  id="_secret"><em><%:Collecting data...%></em></td></tr>
	</table>
</fieldset>



<script type="text/javascript">//<![CDATA[


<% if luci.i18n.context.lang == "zh-cn" then %>
		let random = parseInt(Math.random() * 100000000);
		let IP = {
					get: (url, type) =>
						fetch(url, { method: 'GET' }).then((resp) => {
							if (type === 'text')
								return Promise.all([resp.ok, resp.status, resp.text(), resp.headers]);
							else {
								return Promise.all([resp.ok, resp.status, resp.json(), resp.headers]);
							}
						}).then(([ok, status, data, headers]) => {
							if (ok) {
								let json = {
									ok,
									status,
									data,
									headers
								}
								return json;
							} else {
								throw new Error(JSON.stringify(json.error));
							}
						}).catch(error => {
							throw error;
						}),
				  parseIPIpip: (ip, elID) => {
							IP.get(`https://api.ip.sb/geoip/${ip}`, 'json')
							.then(resp => {
								 document.getElementById(elID).innerHTML = `国家:${resp.data.country}<br>运营商:${resp.data.isp}`
							})
					},

					getIpipnetIP: () => {
						IP.get(`http://myip.ipip.net/?z=${random}`, 'text')
							.then((resp) => {
								let data = resp.data.replace('当前 IP：', '').split(' 来自于：');
								//var u= data[0].indexOf("来自于：")
								document.getElementById('d-ip').innerHTML = `IP地址:${data[0]}<br>`
								return `${data[0]}`
							})
							.then(ip => {
								IP. parseIPIpip(ip, 'ipify-ipip');
							})
					},
					
					
					getIpifyIP: () => {
						IP.get(`https://ipinfo.io/json?z=${random}`, 'json')
						.then(resp => {
						document.getElementById('ip-ipify').innerHTML = `IP地址:${resp.data.ip}<br>`;
							return resp.data.ip
						})
						.then(ip => {
								IP. parseIPIpip(ip, 'ip-ipify-ipip');
							})
						
					}

		
				   
		}
<%end%>

<% if luci.i18n.context.lang == "en" or luci.i18n.context.lang == "auto" then %>

		let random = parseInt(Math.random() * 100000000);
		let IP = {
					get: (url, type) =>
						fetch(url, { method: 'GET' }).then((resp) => {
							if (type === 'text')
								return Promise.all([resp.ok, resp.status, resp.text(), resp.headers]);
							else {
								return Promise.all([resp.ok, resp.status, resp.json(), resp.headers]);
							}
						}).then(([ok, status, data, headers]) => {
							if (ok) {
								let json = {
									ok,
									status,
									data,
									headers
								}
								return json;
							} else {
								throw new Error(JSON.stringify(json.error));
							}
						}).catch(error => {
							throw error;
						}),
					Ipip: (ip, elID) => {
						IP.get(`https://api.ip.sb/geoip/${ip}`, 'json')
							.then(resp => {
								 document.getElementById(elID).innerHTML = `Country:${resp.data.country}<br>ISP:${resp.data.isp}`
							})
					},
					


					getIpipnetIP: () => {
						IP.get(`http://myip.ipip.net/?z=${random}`, 'text')
							.then((resp) => {
								let data = resp.data.replace('当前 IP：', '').split(' 来自于：');
								//var u= data[0].indexOf("来自于：")
								document.getElementById('d-ip').innerHTML = `IP:${data[0]}<br>`
								return `${data[0]}`
							})
							.then(ip => {
								IP.Ipip(ip, 'ipip');
							})
					},
					
					
					getIpifyIP: () => {
						IP.get(`https://ipinfo.io/json?z=${random}`, 'json')
						.then(resp => {
						document.getElementById('d-ip-g').innerHTML = `IP:${resp.data.ip}<br>`;
							return resp.data.ip
						})
						.then(ip => {
								IP.Ipip(ip, 'ipip-g');
							})
						
					}

						
				   
		}

<%end%>			
	    var HTTP = {
			checker: (domain, cbElID) => {
				let img = new Image;
				let timeout = setTimeout(() => {
					img.onerror = img.onload = null;
					img = null;
					document.getElementById(cbElID).innerHTML = '<b class="red"><%:NO ACCESS%></b>'
				}, 1000);
				img.onerror = () => {
					clearTimeout(timeout);
					document.getElementById(cbElID).innerHTML = '<b class="red"><%:TIMEOUT%></b>'
				}
				img.onload = () => {
					clearTimeout(timeout);
					document.getElementById(cbElID).innerHTML = '<b class="green"><%:NORMAL%></b>'
				}
				img.src = `https://${domain}/favicon.ico?${+(new Date)}`
			}

	    }


		   

	  
		   		   
		   
	var dnew = document.getElementById('_downloadnew');	   
	var web = document.getElementById('_web');
	var webb = document.getElementById('_webb');
	var clash = document.getElementById('_clash');
	var ip = document.getElementById('_ip');
	var port = document.getElementById('_port');
	var secret = document.getElementById('_secret');
	var emode = document.getElementById('_emode');
	var logo = document.getElementById('_logo');
	var conf = document.getElementById('_conf');
	var conf_path = document.getElementById('_conf_path');

	
	XHR.poll(5, '<%=luci.dispatcher.build_url("admin", "services", "clash", "status")%>', null, function(x, status) {
		if ( x && x.status == 200 ) {
			web.innerHTML = status.clash ? '<a type="button" class="btn" style="background-color:black;padding: 5px;"  href="http://'+window.location.hostname+':'+status.dash_port+'/ui" target="_blank"><b><font color="green"><%:DASHBOARD%></font></b></a>' : '<b><font color="red"><%:NOT RUNNING%></font></b>';
			webb.innerHTML = status.clash ? '<a type="button" class="btn" style="background-color:black;padding: 5px;"  href="http://'+window.location.hostname+status.uhttp_port+'/luci-static/yacd?hostname='+ status.localip + '&port=' + status.dash_port + '&secret=' + status.dash_pass +'" target="_blank"><b><font color="green"><%:DASHBOARD%></font></b></a>' : '<b><font color="red"><%:NOT RUNNING%></font></b>';
			clash.innerHTML = status.clash ? '<b><font color="green"><%:RUNNING%></font> </b>' : '<b><font color="red"><%:NOT RUNNING%></font></b>';
			ip.innerHTML = status.localip ? '<b><font color="green">'+status.localip+'</font> </b>' : '<em><b><font color="red"><%:NOT SET%></font></b></em>';
			port.innerHTML = status.dash_port ? '<b><font color="green">'+status.dash_port+'</font> </b>' : '<em><b><font color="red"><%:NOT SET%></font></b></em>';
			secret.innerHTML = status.dash_pass ? '<b><font color="green">'+status.dash_pass+'</font> </b>' : '<em><b><font color="red"><%:NOT SET%></font></b></em>';
			emode.innerHTML = status.clash ? '<b><font color="green" style="text-transform: uppercase;">'+status.e_mode+'</font> </b>' : '<b><font color="red"><%:NOT RUNNING%></font></b>';
			if(status.typeconf != 0 || status.typeconf != ''){
				conf.innerHTML = status.typeconf ? '<b><input type="button" class="btn" style="background-color:black;padding: 5px;font-color:green;color:green;font-weight:bold" value="<%:VIEW CONFIG%>" onclick="return view(this)" /></b>' : '<b><font color="red"><%:NOT RUNNING%></font></b>';
			}
			if(status.typeconf==1){
				conf_path.innerHTML = status.clash ? '<b><font color="green"><%:SUBSCRIBE%> </font></b>' : '<b><font color="red"><%:NOT RUNNING%></font></b>';
			}
			if(status.typeconf==2){
				conf_path.innerHTML = status.clash ? '<b><font color="green"><%:UPLOAD%></font></b>' : '<b><font color="red"><%:NOT RUNNING%></font></b>';
			}
			if(status.typeconf==3){
				conf_path.innerHTML = status.clash ? '<b><font color="green"><%:CUSTOM%></font></b>' : '<b><font color="red"><%:NOT RUNNING%></font></b>';
			}	
			if(status.typeconf==0 || status.typeconf==''){
				conf_path.innerHTML = status.typeconf ? '<b><font color="red"><%:NOT SELECTED%></font></b>' : '<b><font color="red"><%:NOT RUNNING%></font></b>';
			}	
			if(status.new_version > status.current_version)
			{
				dnew.innerHTML ='<center><br><a href="https://github.com/frainzy1477/luci-app-clash/releases/download/'+status.new_version+'/luci-app-clash_'+status.new_version+'_all.ipk" class="btn" style="height:20px;font-size:15px;margin-top:-20px;background-color:#568fa1;color:#ffffff;" target="_blank"><%:Download Update%></a></center>';
			}			
			IP.getIpifyIP();
			IP.getIpipnetIP();


		}
	});


	XHR.poll(5, '<%=luci.dispatcher.build_url("admin", "services", "clash", "status")%>', null, function(x, status) {
		if ( x && x.status == 200 ) {			
				HTTP.checker('www.baidu.com', 'status_baidu');
				HTTP.checker('www.google.com', 'status_google');
				HTTP.checker('www.youtube.com', 'status_youtube');
				HTTP.checker('github.com', 'status_github');

		}
	});
		IP.getIpifyIP();
		IP.getIpipnetIP();
		HTTP.checker('www.baidu.com', 'status_baidu');
		HTTP.checker('www.google.com', 'status_google');
		HTTP.checker('www.youtube.com', 'status_youtube');
		HTTP.checker('github.com', 'status_github');


	var rtlog = document.getElementById('_realtimelog');
	XHR.poll(1, '<%=luci.dispatcher.build_url("admin", "services", "clash", "readlog")%>', status.readlog, function(x, status) {
	  if ( x && x.status == 200 ) {
		 if ( status.readlog != "\n" || status.readlog != "" ) {
			rtlog.innerHTML = '<b>'+status.readlog+'</b>';
		}
	  }
	});
	
	

	XHR.poll(5,'<%=luci.dispatcher.build_url("admin", "services", "clash", "check_status")%>', null, function(x, status) {});

//]]></script>

<style>
    .modals-bg{
        position: fixed;
        z-index: 90;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        background: rgba(0,0,0,0.8);
        display: none;
    }
    .modals {
        position: fixed;
        z-index: 100;
        width: 70%;
        height: 650px;
        background: #FFFFFF;
        left: 20%;
        top: 15%;
        color: #fff;
        border-radius: 10px;
        padding: 20px;

        box-sizing: border-box;
        -moz-box-sizing: border-box;
        /* Firefox */
        -webkit-box-sizing: border-box;
        /* Safari */
    }

    .modals h2 {}

    .modals h3 {
        font-size: 14px;
        color: red;
        background: transparent;
        margin: 0;
        padding: 0;
    }
    @media screen and (max-width: 1024px) {
        .modals {
            position: fixed;
            z-index: 100;
            width: 80%;
            height: 550px;
            background: #FFFFFF;
            left: 10%;
            top: 15%;
            color: #fff;
            border-radius: 10px;
            padding: 20px;
        }
    }
    @media screen and (max-width: 700px) {
        .modals-bg{
            position: fixed;
            z-index: 100000;

        }
        .modals {
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
        }
    }
	
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}	
</style>
<div class="modals-bg">
	
    <div class="modals">
	<span><input type="button" class="cbi-button cbi-button-apply" value="<%:Download%>" style=" display:inline;" onclick=" return download_conf()" /></span><br /><span class="close">&times;</span>
	<br /><h3 style="margin-left:0;"><%:If config does not show refresh page%></h3><br />
	 <span><textarea id="cbid.logview.1.conf" style="width:100%;height:80%; font-family:'Lucida Console'; font-size:12px;padding-left:3px;padding-right:22px;" readonly="readonly" wrap="off" rows="25"><%=pcdata(nixio.fs.readfile("/etc/clash/config.yaml"))%></textarea></span>
   </div>
</div>
<script>
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
var cfg = document.getElementsByClassName("modals-bg")[0];
span.onclick = function() {
  cfg.style.display = "none";
}
function view(btn) {
  cfg.style.display = "inline";
}

function createAndDownloadFile(fileName, content) {
    var aTag = document.createElement('a');
    var blob = new Blob([content]);
    aTag.download = fileName;
    aTag.href = URL.createObjectURL(blob);
    aTag.click();
    URL.revokeObjectURL(blob);
}
function download_conf(){
	var lv = document.getElementById('cbid.logview.1.conf');
	var dt = new Date();
	createAndDownloadFile("config.yaml",lv.innerHTML)
	return
}
</script>

