🌴 Sync 2026-03-05 23:51:42

luci-app-passwall/luasrc/view/passwall/global/status_bottom.htm

@@ -0,0 +1,128 @@
+<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 ?? 5;
+    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 + "&nbsp;" + 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()",200)
+    fetch(CHECK_IP_URL)
+        .then(response => response.json())
+        .then(data => {
+            write_status(data);
+        })
+        .catch(error => console.error('Error:', error));
+});
+
+window.addEventListener('resize', resize);
+</script>