<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,minimal-ui">
	<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
	<style>

.center {
  top: 50%;
  left: 50%;
  min-width:1400px;
}

.card {
  width: 100%;
  height: 250px;
  background-color: #fff;
  background: linear-gradient(#f8f8f8, #fff);
  box-shadow: 0 8px 16px -8px rgba(0,0,0,0.4);
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  display: flex;
}

.card h1 {
  text-align: center;
}

.card .additional {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(#337ab7, #fefefe);
  transition: width 0.5s;
  overflow: hidden;
  z-index: 2;
}

.card .additional .user-card {
  width: 150px;
  height: 100%;
  position: relative;
  float: left;
}

.card .additional .user-card::after {
  content: "";
  display: block;
  position: absolute;
  top: 10%;
  right: -2px;
  height: 80%;
  border-left: 2px solid rgba(0,0,0,0.025);*/
}

.card .additional .user-card img {
  top: 30%;
  left: 20%;
  bottom: 30%;
  width: 60%;
  border-radius: 60%;
  position: absolute;
}

.card .additional .more-info {
  float: left;
  position: relative;
  left: 25%;
  top: 30%;
  height: 50%;
  width: 28%;
}

.card .additional .more-info h1 {
  color: #fff;
  width: 365px;
  margin-bottom: 0;
  margin: 0 1rem;
  font-size: 2rem;
  position: relative;
}

.card .additional .coords {
  margin: 0 1rem;
  color: #fff;
  font-size: 1rem;
  position: relative;
  top: 10%;
  text-align: center;
}

.card .general {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  box-sizing: border-box;
  padding: 1rem;
  padding-top: 0;
}

.card .general h1 {
  font-size: 2rem;
  text-align: center;
}

.card .general .dler-title {
  font-weight: bold;
  color: #444;
  font-size:15px;
  display: inline-block;
  width: 25%;
  vertical-align:bottom;
  padding-top: 6px;
}
        
.card .general .dler2-title {
  font-weight: bold;
  color: #444;
  font-size:15px;
  display: inline-block;
  width: 52%;
  vertical-align:bottom;
  padding-top: 6px;
}
        
.card .general .dler-result {
  color: #444;
  font-size:16px;
  margin:0px 0px 0px 30px;
  white-space: nowrap;
  display: inline-block;
  width: 40%;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align:bottom;
  transform: translate(30%,8%);
  text-align: right;
}

.card .general .dler-result2 {
  color: #444;
  font-size:16px;
  margin:0px 0px 0px 30px;
  white-space: nowrap;
  display: inline-block;
  width: 40%;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align:bottom;
  transform: translate(-35%,8%);
  text-align: right;
}

.card .general .btn {
  color: #fff;
  border-color: #337ab7;
  background-color: #1473e6;
  box-shadow: 0 8px 16px -8px rgba(0,0,0,0.4);
  border-radius: 6px;
  width: 90px;
  height: 90px;
  font-size: 15px;
  font-weight: bold;
  position: relative;
  top: 13%;
  left: 60%;
  -webkit-appearance:button;
}

.card .general .more {
  float: right;
  margin-top: 80%;
  font-size: 15px;
  padding-right: 25%;
  position: relative;
}
	</style>
</head>
<body>
<fieldset class="cbi-section">
<table width="100%"><tr><td>
<div class="center">
  <div id="card" class="card">
    <div id="additional" class="additional">
      <div class="user-card">
        <div class="img">
          <img src="https://gblobscdn.gitbook.com/spaces%2F-LA4MIEaZUSjdLrk1eJx%2Favatar-1586188293684.png?alt=media" loading="lazy" title="Dler Cloud" alt="Dler Cloud" onerror="return imgerrorfuns(this,this.src)" onclick="return show_more()" />
        </div>
      </div>
      <div class="more-info">
        <h1>Dler Cloud</h1>
        <div class="coords" id="dler_it">
        	<%:Simple & trustworthy%>
        </div>
      </div>
    </div>
    <div class="general">
      <h1 id="dler-plan" ></h1>
      	<div style="display: flex; left: 13%; top: 5%; position: relative; width: 90%">
      		<div style="width: 40%">
            <p>
                <span class="dler-title"><%:Plan Expiration Time%>:</span><span class="dler-result" id="dler-plantime"><%:Collecting data...%></span>
            </p>
            <p>
                <span class="dler-title"><%:Account Balances%>:</span><span class="dler-result" id="dler-money"><%:Collecting data...%></span>
            </p>
            <p>
                <span class="dler-title"><%:Aff Balances%>:</span><span class="dler-result" id="dler-affmoney"><%:Collecting data...%></span>
            </p>
            <p>
                <span class="dler-title"><%:Account Integral%>:</span><span class="dler-result" id="dler-integral"><%:Collecting data...%></span>
            </p>
        	</div>
        	<div style="width: 40%">
            <p>
                <span class="dler2-title"><%:Today Used%>:</span><span class="dler-result2" id="dler-today-used"><%:Collecting data...%></span>
            </p>
            <p>
                <span class="dler2-title"><%:Plan Used%>:</span><span class="dler-result2" id="dler-used"><%:Collecting data...%></span>
            </p>
            <p>
                <span class="dler2-title"><%:Plan Unused%>:</span><span class="dler-result2" id="dler-unused"><%:Collecting data...%></span>
            </p>
            <p>
                <span class="dler2-title"><%:Plan Traffic%>:</span><span class="dler-result2" id="dler-traffic"><%:Collecting data...%></span>
            </p>
        	</div>
        	<div style="width: 20%；text-align:center">
        	   <input type="button" class="btn" value="<%:Checkin%>" onclick="return dler_checkin_btn(this)"
        	</div>
    		</div>
    		<div>
       	 <p class="more">Powered by <a onclick="return web_dler()" href="javascript:void(0);">dlercloud.com</a></p>
    		</div>
      </div>
    </div>
  </div>
</div>
	    </td></tr>
	</table>
</fieldset>
</body>

<script type="text/javascript">//<![CDATA[
	var dler_plan = document.getElementById('dler-plan');
	var dler_plantime = document.getElementById('dler-plantime');
	var dler_money = document.getElementById('dler-money');
	var dler_affmoney = document.getElementById('dler-affmoney');
	var dler_today_used = document.getElementById('dler-today-used');
	var dler_used = document.getElementById('dler-used');
	var dler_unused = document.getElementById('dler-unused');
	var dler_traffic = document.getElementById('dler-traffic');
	var dler_integral = document.getElementById('dler-integral');
	var dler_checkin = document.getElementById('dler-checkin');

	XHR.get('<%=luci.dispatcher.build_url("admin", "services", "openclash", "dler_info")%>', null, function(x, status) {
		if ( x && x.status == 200 && status.dler_info != "error" ) {
			dler_plan.innerHTML = status.dler_info.plan;
			dler_plantime.innerHTML = status.dler_info.plan_time;
			dler_money.innerHTML = status.dler_info.money;
			dler_affmoney.innerHTML = status.dler_info.aff_money;
			dler_today_used.innerHTML = status.dler_info.today_used;
			dler_used.innerHTML = status.dler_info.used;
			dler_unused.innerHTML = status.dler_info.unused;
			dler_traffic.innerHTML = status.dler_info.traffic;
			dler_integral.innerHTML = status.dler_info.integral;
			show_info();
		}
		else if (x && x.status == 200 && status.dler_info == "errorget") {
			show_less();
		}
		else {
			show_ad();
		}
	});
	
	XHR.poll(5, '<%=luci.dispatcher.build_url("admin", "services", "openclash", "dler_info")%>', null, function(x, status) {
		if (x && x.status == 200 && status.dler_info != "error") {
			dler_plan.innerHTML = status.dler_info.plan;
			dler_plantime.innerHTML = status.dler_info.plan_time;
			dler_money.innerHTML = status.dler_info.money;
			dler_affmoney.innerHTML = status.dler_info.aff_money;
			dler_today_used.innerHTML = status.dler_info.today_used;
			dler_used.innerHTML = status.dler_info.used;
			dler_unused.innerHTML = status.dler_info.unused;
			dler_traffic.innerHTML = status.dler_info.traffic;
			dler_integral.innerHTML = status.dler_info.integral;
			show_info();
		}
		else if (x && x.status == 200 && status.dler_info == "errorget") {
			show_less();
		}
		else {
			show_ad();
		}
	});
	
function dler_checkin_btn(btn)
{
	XHR.get('<%=luci.dispatcher.build_url("admin", "services", "openclash", "dler_checkin")%>', null, function(x, status) {
		if ( x && x.status == 200 && status.dler_checkin != "error") {
			if (status.dler_checkin.ret == 200) {
				alert("<%:Dler Cloud Checkin Successful, Result:%>\n\n"+
				status.dler_checkin.data.checkin);
			}
			else if (status.dler_checkin.msg) {
				alert("<%:Dler Cloud Checkin Failed, Result:%>\n\n"+
				status.dler_checkin.msg);
			}
			else {
				alert("<%:Dler Cloud Checkin Failed! Please Check And Try Again...%>")
			}
		}
		else {
			alert("<%:Dler Cloud Checkin Failed! Please Check And Try Again...%>")
		}
	});
}
	
function web_dler()
{
   url='https://dlercloud.com';
   window.open(url);
}
       
function show_more()
{
   var obj = document.getElementById("additional");
   XHR.get('<%=luci.dispatcher.build_url("admin", "services", "openclash", "dler_info")%>', null, function(x, status) {
      if (x && x.status == 200 && status.dler_info != "error") {
         if (obj.style.width == "100%") {
            obj.style.width = "150px";
            obj.style.borderRadius = "0 0 0 0";
         }
         else {
   	        obj.style.width = "100%";
            obj.style.borderRadius = "0 5px 5px 0";
         }
		  }
		  else {
		     web_dler();
      }
	});
   
}

function show_less()
{
   var obj = document.getElementById("additional");
   if (obj.style.width != "100%") {
      obj.style.width = "100%";
      obj.style.borderRadius = "0 5px 5px 0";
   }
}

function show_ad()
{
   var obj = document.getElementById("additional");
   var card = document.getElementById("card");
   var dler_it = document.getElementById("dler_it");
   
   if (obj.style.width != "100%" || card.style.height != "180px") {
      obj.style.width = "100%";
      obj.style.borderRadius = "0 5px 5px 0";
      card.style.height = "180px";
   }
   var rdmdl=Math.floor(Math.random()*6)+1;
   if(rdmdl==1)
   {
      dler_it.innerHTML = '<%:Simple & trustworthy%>';
   }
   if(rdmdl==2)
   {
      dler_it.innerHTML = '<%:Cross-platform Support%>';
   }
   if(rdmdl==3)
   {
      dler_it.innerHTML = '<%:Global Acceleration Network%>';
   }
   if(rdmdl==4)
   {
      dler_it.innerHTML = '<%:Easy to Use%>';
   }
   if(rdmdl==5)
   {
      dler_it.innerHTML = '<%:Intelligent Shunting%>';
   }
   if(rdmdl==6)
   {
      dler_it.innerHTML = '<%:Perfect Technical Support%>';
   }
   
}

function show_info()
{
   var obj = document.getElementById("additional");
   if (obj.style.width != "150px") {
      obj.style.width = "150px";
      obj.style.borderRadius = "0 0 0 0";
   }
}

function imgerrorfuns(imgobj,imgSrc)
{
   setTimeout(function(){
      imgobj.src=imgSrc;
   },1000*10);
}

//]]></script>
</html>