mirror of
https://github.com/caiwx86/small-packages.git
synced 2026-07-28 09:22:05 +08:00
129 lines
3.7 KiB
HTML
129 lines
3.7 KiB
HTML
<style>
|
|
.pure-img {
|
|
max-height: 100%;
|
|
width: auto;
|
|
}
|
|
.flag .pure-img {
|
|
max-height: none;
|
|
margin-top: -0.34rem;
|
|
}
|
|
.status-bar {
|
|
position: fixed;
|
|
bottom: 0;
|
|
right: 0;
|
|
box-shadow: 0 0 2rem 0 rgba(136, 152, 170, .3);
|
|
color: #525f7f;
|
|
background: #fff;
|
|
z-index: 5;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.status-bar .inner {
|
|
margin: 0.5em;
|
|
}
|
|
|
|
.status-bar .inner .flag {
|
|
height: 2.6em;
|
|
display: block;
|
|
float: left;
|
|
margin-right: 1em;
|
|
}
|
|
|
|
.status-bar .inner .status-info {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.status-bar .icon-con {
|
|
height: 2.6em;
|
|
text-align: right;
|
|
}
|
|
|
|
#cbi-passwall+.cbi-page-actions.control-group.fixed {
|
|
bottom: 3.3rem;
|
|
}
|
|
|
|
footer{
|
|
display:block !important;
|
|
}
|
|
|
|
@media screen and (max-width: 700px) {
|
|
.status-bar .icon-con {
|
|
height: 2.5em;
|
|
}
|
|
}
|
|
</style>
|
|
<div class="status-bar">
|
|
<div class="inner">
|
|
<div class="pure-g">
|
|
<div class="pure-u-1-2">
|
|
<span class="flag"><img src="/luci-static/passwall/flags/loading.svg" class="pure-img"></span> <span
|
|
class="status-info">获取中...</span>
|
|
</div>
|
|
<div class="pure-u-1-2">
|
|
<div class="icon-con">
|
|
<img src="/luci-static/passwall/img/site_icon1_01.png" class="pure-img i1">
|
|
<img src="/luci-static/passwall/img/site_icon1_02.png" class="pure-img i2">
|
|
<img src="/luci-static/passwall/img/site_icon1_03.png" class="pure-img i3">
|
|
<img src="/luci-static/passwall/img/site_icon1_04.png" class="pure-img i4">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const _ASSETS = '/luci-static/passwall/';
|
|
const CHECK_IP_URL = '<%=url([[admin]], [[services]], [[passwall]], [[ip]])%>';
|
|
|
|
let wW = window.innerWidth;
|
|
|
|
function resize() {
|
|
wW = window.innerWidth;
|
|
let lw = document.querySelector(".main-left").offsetWidth;
|
|
let statusBar = document.querySelector(".status-bar");
|
|
statusBar.style.width = (wW - lw) + 'px';
|
|
let flagElement = statusBar.querySelector(".flag");
|
|
flagElement.style.width = (flagElement.offsetHeight / 3 * 4) + 'px';
|
|
|
|
document.querySelectorAll(".flag-icon").forEach(function(el) {
|
|
if (el.offsetHeight < 60) {
|
|
el.parentElement.style.height = '60px';
|
|
el.style.width = '60px';
|
|
} else {
|
|
el.style.width = el.offsetHeight + 'px';
|
|
}
|
|
});
|
|
}
|
|
|
|
function write_status(data) {
|
|
document.querySelector(".flag img").src = _ASSETS + "flags/" + data.flag + ".svg";
|
|
document.querySelector(".status-info").innerHTML = data.ip + "<br>" + data.country + " " + data.isp;
|
|
document.querySelector(".i1").src = data.baidu ? _ASSETS + "img/site_icon_01.png" : _ASSETS + "img/site_icon1_01.png";
|
|
document.querySelector(".i2").src = data.taobao ? _ASSETS + "img/site_icon_02.png" : _ASSETS + "img/site_icon1_02.png";
|
|
document.querySelector(".i3").src = data.google ? _ASSETS + "img/site_icon_03.png" : _ASSETS + "img/site_icon1_03.png";
|
|
document.querySelector(".i4").src = data.youtube ? _ASSETS + "img/site_icon_04.png" : _ASSETS + "img/site_icon1_04.png";
|
|
setTimeout(function() {
|
|
let event = new Event('iploaded');
|
|
document.body.dispatchEvent(event);
|
|
}, 200);
|
|
}
|
|
|
|
XHR.poll(5, CHECK_IP_URL, null,
|
|
function (x, data) {
|
|
write_status(data);
|
|
}
|
|
);
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
setTimeout("resize()",100)
|
|
fetch(CHECK_IP_URL)
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
write_status(data);
|
|
})
|
|
.catch(error => console.error('Error:', error));
|
|
});
|
|
|
|
window.addEventListener('resize', resize);
|
|
</script>
|