<html>
<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">

<style>

.oc[data-darkmode="true"] .card {
  background: linear-gradient(var(--bg-gray), #657183);
}

.oc[data-darkmode="true"] .card .additional {
  background: linear-gradient(#337ab7, #657183);
}

.oc[data-darkmode="true"] .card .general .dler-title {
  color: #dfdfdf;
}

.oc[data-darkmode="true"] .card .general .dler-result {
  color: #dfdfdf;
}

.oc[data-darkmode="true"] .card .general .dler-result2 {
  color: #dfdfdf;
}

.oc[data-darkmode="true"] .card .general h1 {
  color: #dfdfdf;
}

.oc[data-darkmode="true"] .card .additional .user-card::after {
  border-left: 2px solid #ffffff33;
}

.oc[data-darkmode="true"] .card .additional .more-info h1 {
  color: #ededed;
}

.oc[data-darkmode="true"] .card .additional .coords {
  color: #ededed;
}

.oc[data-darkmode="true"] .card .general .dler-info::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.3);
}

.oc[data-darkmode="true"] .card .general .dler-info::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.4);
}

.oc .dler-main-container {
  background: var(--bg-white);
  margin: 0 auto;
  width: 100%;
  transition: all var(--transition-fast);
}

.oc .center {
  width: 100%;
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 12px;
  transition: all var(--transition-fast);
}

.oc .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;
  position: relative;
}

.oc .card h1 {
  text-align: center;
}

.oc .card .additional {
  position: absolute;
  width: 150px;
  height: 100%;
  background: linear-gradient(#337ab7, #fefefe);
  transition: width 0.5s cubic-bezier(0.4, 0.0, 0.2, 1), border-radius 0.5s ease;
  overflow: hidden;
  z-index: 2;
  display: flex;
  align-items: stretch;
  border-radius: var(--radius-lg);
}

.oc .card .additional.expanded {
  width: 100%;
}

.oc .card .additional.collapsed {
  width: 150px;
}

.oc .card .additional .user-card {
  width: 150px;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.oc .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);
}

.oc .card .additional .user-card .img {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.oc .card .additional .user-card img {
  width: 65%;
  border-radius: 50%;
  position: relative;
  top: auto;
  left: auto;
  bottom: auto;
}

.oc .card .additional .more-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1rem;
  text-align: center;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  opacity: 0;
  visibility: hidden;
  overflow: visible;
}

.oc .card .additional.expanded .more-info {
  opacity: 1;
  visibility: visible;
}

.oc .card .additional.collapsed .more-info {
  opacity: 0;
  visibility: hidden;
}

.oc .card .additional .more-info h1 {
  color: #fff;
  margin: 0.5rem 0;
  font-size: 2.5rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-bottom: none;
  position: relative;
  line-height: 1.2;
  padding-top: 0.2rem;
}

.oc .card .additional .more-info h1::after {
  content: "";
  position: absolute;
  bottom: -0.2rem;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 1px;
  background-color: #eee;
  margin-bottom: 5px;
}

.oc .card .additional .coords {
  color: #fff;
  font-size: 1rem;
  line-height: 1.4;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.oc .card .additional.expanded + .general {
  margin-left: 0;
  opacity: 0;
}

.oc .card .additional.collapsed + .general {
  opacity: 1;
}

.oc .card .general {
  width: auto;
  height: 100%;
  position: relative;
  margin-left: 180px;
  top: 0;
  right: 0;
  z-index: 1;
  overflow: hidden;
  padding-top: 0;
  padding-right: 10px;
  transition: margin-left 0.5s ease, opacity 0.5s ease;
  opacity: 1;
}

.oc .card .general h1 {
  font-size: 30px;
  text-align: center;
  padding-top: 10px;
  margin: 0 0 0 -15%;
  line-height: 35px;
  color: var(--text-title) !important;
}

.oc .card .general .dler-info {
  top: 8%;
  width: 90%;
  height: 65%;
  display: grid;
  grid-template-columns: 1fr 1fr 120px;
  gap: 5%;
  position: absolute;
  margin: 0 auto;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
}

.oc .card .general .dler-info-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: visible;
}

.oc .card .general .dler-info-center {
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: visible;
}

.oc .card .general .dler-info-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 100px;
  width: 100%;
  height: 100%;
  padding-right: 10px;
}

.oc .card .general .dler-btn-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  margin-bottom: 30px;
}

.oc .card .general .dler-info p {
  padding: 4px 0 !important;
  text-align: left;
  margin-bottom: 0;
  line-height: 25px;
  min-height: 25px;
}

.oc .card .general .dler-info div {
  position: relative;
}

.oc .card .general .dler-title {
  font-weight: bold;
  color: var(--text-primary) !important;
  font-size: 15px;
  display: inline-block;
  width: 45%;
  overflow: hidden;
  vertical-align: bottom;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: 25px;
  height: 25px;
  text-align: left;
}

.oc .card .general .dler-result {
  color: var(--text-secondary) !important;
  font-size: 15px;
  white-space: nowrap;
  display: inline-block;
  width: 55%;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
  text-align: right;
  line-height: 25px;
  height: 25px;
}

.oc .card .general .dler-result2 {
  color: var(--text-secondary) !important;
  font-size: 15px;
  white-space: nowrap;
  display: inline-block;
  width: 55%;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
  text-align: right;
  line-height: 25px;
  height: 25px;
}

.oc .card .general .btn {
  color: white !important;
  border-color: #337ab7 !important;
  background: #1473e6;
  background-color: var(--primary-color) !important;
  box-shadow: 0 8px 16px -8px rgba(0,0,0,0.4);
  border-radius: 6px;
  width: 90px;
  height: 90px !important;
  font-size: 15px;
  font-weight: bold;
  display: inline-block;
  overflow: hidden;
  appearance: button;
  -webkit-appearance: button;
  border: none !important;
  cursor: pointer;
  transition: all var(--transition-fast);
  text-shadow: none !important;
}

.oc .card .general .btn:hover {
  background: #2563eb !important;
}

.oc .card .general .more {
  font-size: 12px;
  line-height: 16px;
  padding: 0;
  margin: 0;
  pointer-events: auto;
  overflow: hidden;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  position: absolute;
  bottom: 8px;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 10;
  padding-right: 16px;
  padding-bottom: 5px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.oc .card .general .more p {
  margin: 0;
  font-size: 15px;
  padding: 0;
  color: var(--text-secondary) !important;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  width: 100%;
  min-width: 0;
  flex-shrink: 1;
  text-overflow: ellipsis;
}

.oc .card .general .more a {
  text-decoration: none;
  color: var(--primary-color);
  opacity: 0.8;
  transition: opacity var(--transition-fast);
  white-space: nowrap;
  font-weight: 500;
}

.oc .card .general .more a:hover {
  opacity: 1;
  text-decoration: underline;
}

.oc .card .general .dler-info::-webkit-scrollbar {
  width: 4px;
}

.oc .card .general .dler-info::-webkit-scrollbar-track {
  background: transparent;
}

.oc .card .general .dler-info::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.2);
  border-radius: 2px;
}

.oc .card .general .dler-info::-webkit-scrollbar-thumb:hover {
  background: rgba(0,0,0,0.3);
}

@media screen and (max-width: 1200px) {
  .oc .dler-main-container {
    width: calc(100% - 32px);
  }

  .oc .card .additional.collapsed {
    width: 140px;
  }

  .oc .card .additional .user-card {
    width: 140px;
  }

  .oc .card .additional .more-info h1 {
    font-size: 1.8rem;
  }

  .oc .card .additional .coords {
    font-size: 0.95rem;
  }

  .oc .card .general {
    margin-left: 120px;
    padding-right: 8px;
  }

  .oc .card .general .more {
    bottom: 6px;
    padding-right: 12px;
  }

}

@media screen and (max-width: 768px) {
  .oc .dler-main-container {
    width: 100%;
  }

  .oc .card .additional.collapsed {
    width: 125px;
  }

  .oc .card .additional .user-card {
    width: 125px;
  }

  .oc .card .additional .more-info h1 {
    font-size: 1.5rem;
  }

  .oc .card .additional .coords {
    font-size: 0.8rem;
  }

  .oc .card .general {
    margin-left: 110px;
    padding-right: 6px;
  }

  .oc .card .general h1 {
    font-size: 24px;
    line-height: 30px;
    margin: 0;
  }

  .oc .card .general .dler-info {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: 12px;
    padding-right: 8px;
    height: 50%;
  }

  .oc .card .general .dler-info-right {
    justify-content: flex-start;
    padding-top: 8px;
    gap: 12px;
  }

  .oc .card .general .btn {
    width: 80px !important;
    height: 80px !important;
    font-size: 14px;
    padding: 0 !important;
  }

  .oc .card .general .dler-title {
    font-size: 14px;
    width: 50%;
  }

  .oc .card .general .dler-result,
  .oc .card .general .dler-result2 {
    font-size: 14px;
    width: 50%;
  }

  .oc .card .general .more {
    bottom: 4px;
    padding-right: 10px;
  }

  .oc .card .general .more p {
    font-size: 13px;
  }

}

@media screen and (max-width: 575px) {
  .oc .center {
    padding: 8px;
  }

  .oc .card .additional.collapsed {
    width: 115px;
  }

  .oc .card .additional .user-card {
    width: 115px;
  }

  .oc .card .additional .more-info h1 {
    font-size: 1.3rem;
  }

  .oc .card .additional .coords {
    font-size: 0.7rem;
  }

  .oc .card .general {
    margin-left: 120px;
    padding-right: 4px;
  }

  .oc .card .general .dler-info {
    height: 50%;
  }

  .oc .card .general h1 {
    font-size: 18px;
    line-height: 26px;
    margin: 0;
  }

  .oc .card .general .dler-title {
    font-size: 12px;
    width: 50%;
  }

  .oc .card .general .dler-result,
  .oc .card .general .dler-result2 {
    font-size: 12px;
    width: 50%;
  }

  .oc .card .general .more {
    bottom: 2px;
    padding-right: 8px;
  }

  .oc .card .general .btn {
    width: 60px !important;
    height: 60px !important;
    font-size: 10px;
    padding: 0 !important;
  }

  .oc .card .general .more p {
    font-size: 11px;
  }
}
</style>
</head>

<body>
<fieldset class="cbi-section">
<table width="100%"><tr><td>
<div class="oc">
    <div class="dler-main-container">
        <div class="center">
            <div id="card" class="card">
                <div id="additional" class="additional">
                    <div class="user-card">
                        <div class="img">
                            <img id="dler_logo" src="data:image/png;base64, " loading="lazy" title="Dler Cloud" alt="Dler Cloud" onerror="return imgerrorfuns(this,this.src)" onclick="return show_more()" />
                        </div>
                    </div>
                    <div class="more-info" id="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 class="dler-info">
                        <div class="dler-info-left">
                            <div>
                                <p>
                                    <span class="dler-title" title="<%:Plan Expiration Time%>"><%:Plan Expiration Time%>:</span><span class="dler-result" id="dler-plantime" title="<%:Collecting data...%>"><%:Collecting data...%></span>
                                </p>
                                <p>
                                    <span class="dler-title" title="<%:Account Balances%>"><%:Account Balances%>:</span><span class="dler-result" id="dler-money" title="<%:Collecting data...%>"><%:Collecting data...%></span>
                                </p>
                                <p>
                                    <span class="dler-title" title="<%:Aff Balances%>"><%:Aff Balances%>:</span><span class="dler-result" id="dler-affmoney" title="<%:Collecting data...%>"><%:Collecting data...%></span>
                                </p>
                                <p>
                                    <span class="dler-title" title="<%:Account Integral%>"><%:Account Integral%>:</span><span class="dler-result" id="dler-integral" title="<%:Collecting data...%>"><%:Collecting data...%></span>
                                </p>
                            </div>
                        </div>

                        <div class="dler-info-center">
                            <div>
                                <p>
                                    <span class="dler-title" title="<%:Today Used%>"><%:Today Used%>:</span><span class="dler-result2" id="dler-today-used" title="<%:Collecting data...%>"><%:Collecting data...%></span>
                                </p>
                                <p>
                                    <span class="dler-title" title="<%:Plan Used%>"><%:Plan Used%>:</span><span class="dler-result2" id="dler-used" title="<%:Collecting data...%>"><%:Collecting data...%></span>
                                </p>
                                <p>
                                    <span class="dler-title" title="<%:Plan Unused%>"><%:Plan Unused%>:</span><span class="dler-result2" id="dler-unused" title="<%:Collecting data...%>"><%:Collecting data...%></span>
                                </p>
                                <p>
                                    <span class="dler-title" title="<%:Plan Traffic%>"><%:Plan Traffic%>:</span><span class="dler-result2" id="dler-traffic" title="<%:Collecting data...%>"><%:Collecting data...%></span>
                                </p>
                            </div>
                        </div>

                        <div class="dler-info-right">
                            <div class="dler-btn-container">
                                <input type="button" class="btn" value="<%:Checkin%>" onclick="return dler_checkin_btn(this)">
                            </div>
                        </div>
                    </div>
                    <div class="more">
                        <p>Powered by <a class="myip-footer" onclick="return web_dler()" href="javascript:void(0);">dlercloud.com</a></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</td></tr></table>
</fieldset>

<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');
  var obj = document.getElementById("additional");
  var card = document.getElementById("card");
  var dler_it = document.getElementById("dler_it");
  var more_info = document.getElementById("more_info");
  var dler_logo = document.getElementById("dler_logo");
  var showmore=1;

  document.addEventListener('DOMContentLoaded', function() {
      DarkModeDetector.init();
      obj.classList.remove('collapsed');
      obj.classList.add('expanded');
  });

  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_plantime.title = status.dler_info.plan_time;
        dler_money.innerHTML = status.dler_info.money;
        dler_money.title = status.dler_info.money;
        dler_affmoney.innerHTML = status.dler_info.aff_money;
        dler_affmoney.title = status.dler_info.aff_money;
        dler_today_used.innerHTML = status.dler_info.today_used;
        dler_today_used.title = status.dler_info.today_used;
        dler_used.innerHTML = status.dler_info.used;
        dler_used.title = status.dler_info.used;
        dler_unused.innerHTML = status.dler_info.unused;
        dler_unused.title = status.dler_info.unused;
        dler_traffic.innerHTML = status.dler_info.traffic;
        dler_traffic.title = status.dler_info.traffic;
        dler_integral.innerHTML = status.dler_info.integral;
        dler_integral.title = status.dler_info.integral;
        show_info();
    }
    else {
        show_less();
    }
  });

  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_plantime.title = status.dler_info.plan_time;
        dler_money.innerHTML = status.dler_info.money;
        dler_money.title = status.dler_info.money;
        dler_affmoney.innerHTML = status.dler_info.aff_money;
        dler_affmoney.title = status.dler_info.aff_money;
        dler_today_used.innerHTML = status.dler_info.today_used;
        dler_today_used.title = status.dler_info.today_used;
        dler_used.innerHTML = status.dler_info.used;
        dler_used.title = status.dler_info.used;
        dler_unused.innerHTML = status.dler_info.unused;
        dler_unused.title = status.dler_info.unused;
        dler_traffic.innerHTML = status.dler_info.traffic;
        dler_traffic.title = status.dler_info.traffic;
        dler_integral.innerHTML = status.dler_info.integral;
        dler_integral.title = status.dler_info.integral;
        if (showmore != 0) {
            show_info();
        }
        else {
            show_less();
      }
    }
    else {
        show_less();
    }
  });

  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://bit.ly/32mrABp';
    window.open(url);
  }

  function show_more()
  {
    if (obj.classList.contains('expanded')) {
      show_info();
      showmore = 1;
    }
    else {
      if (dler_plan.innerHTML != "") {
        show_less();
        showmore = 0;
      }
      else {
        web_dler();
      }
    }
  }

  function show_less()
  {
    if (!obj.classList.contains('expanded')) {
      obj.classList.add('expanded');
      obj.classList.remove('collapsed');
    }

    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()
  {
    if (!obj.classList.contains('collapsed')) {
      obj.classList.add('collapsed');
      obj.classList.remove('expanded');
    }
  }

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

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