From 2e37fcb5301506e2d106763dce73d437d49ea58b Mon Sep 17 00:00:00 2001
From: Randall <randall@randallanjie.com>
Date: Sun, 8 Sep 2024 22:21:36 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=20index.html?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html | 991 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 991 insertions(+)
 create mode 100644 index.html

diff --git a/index.html b/index.html
new file mode 100644
index 0000000..bcd74b2
--- /dev/null
+++ b/index.html
@@ -0,0 +1,991 @@
+<script>
+    var rPaddingTop = 60;
+</script>
+<script src="https://notification.randallanjie.com/r_notification.js"></script>
+<script>
+    let messagekey1, messagekey2, messagekey3, messagekey4;
+    rShowMessage('欢迎光临Randall的探针～<br /><a href="https://randallanjie.com/">Powered By Randall | randallanjie.com ©</a>', 0, 'up', 2000);
+    function hideMessage() {
+        sessionStorage.setItem('hide', 'true');
+        try {
+            rChangeMessage(messagekey4, '已经隐藏本次页面对话的所有弹窗，请刷新页面生效');
+        } catch (e) {
+            console.log(e);
+        }
+
+    }
+    // 检查sessionStorage查看hide字段是否存在
+    if (!sessionStorage.getItem('hide')) {
+        messagekey1 = rShowMessage('如果有你想要的机器，可以跟我联系以获得详细资料，如果你想买机器但不知道好不好用，可以联系我让我去替你试试水👀', 0, 'down', 0);
+        setTimeout(() => {
+            messagekey2 = rShowMessage('点击每个设备右上角查看详情，价格，评价，购买链接（如果有的话）', 0, 'down', 0);
+        }, 500);
+        setTimeout(() => {
+            messagekey3 = rShowMessage('BTW，如果消息挡到内容了，按住对应到消息往右滑即可删除消息', 0, 'down', 0);
+            messagekey4 = rShowMessage(`已经知道了？点下方隐藏本次页面对话（包括刷新）的所有弹窗<br /><button class="hide-button" onclick="hideMessage()">知道了,隐藏弹窗</button>`, 0, 'down', 0);
+        }, 5000);
+    }
+    window.onload = function() {
+        const affLinks = {
+            1: {
+                price: '￥139.00/月',
+                notice: '24年7月30号之后续费变为149/月，新购入机器续费变为159/月'
+            },
+            2: {
+                price: '￥139.00/月',
+                notice: '24年7月30号之后续费变为149/月，新购入机器续费变为159/月'
+            },
+            3: {
+                price: 'FREE',
+                notice: '小埋六一免费送的半年，只能用来挂个探针了'
+            },
+            4: {
+                price: '$46.60/年',
+                url: 'https://bwh81.net/cart.php?a=add&pid=94'
+            },
+            5: {
+                notice: '去年黑五购入',
+            },
+            6: {
+                notice: '去年黑五购入',
+            },
+            7: {
+                price: 'FREE',
+                notice: '2024/06/21新开的号，看看能存活几天'
+            },
+            8: {
+                price: 'FREE',
+                notice: '2024/06/21新开的号，看看能存活几天'
+            },
+            9: {
+                price: '$99.95/年',
+                url: 'https://vps.hosting/cart/san-jose-cloud-kvm-vps/?id=145'
+            },
+            10: {
+                price: '¥845.00/年',
+                url: 'https://lisahost.com/cart.php?a=confproduct&i=0'
+            },
+
+            13: {
+                price: '$49.99/年',
+                url: 'https://www.justg.com/cart.php?a=confproduct&i=1'
+            },
+
+            14: {
+                price: '$1/月',
+                notice: 'Sharon打1折的机器，只有一个月，续费恢复10刀，当然我肯定不续费'
+            },
+            18: {
+                price: '$92.29/年',
+                url: 'https://bwh81.net/cart.php?a=add&pid=144'
+            },
+            19: {
+                price: '$119.00/年',
+                url: 'https://bwh81.net/cart.php?a=add&pid=131'
+            },
+            22: {
+                price: '$3.00/月',
+                url: 'https://ipraft.com/server/purchase',
+                notice: '好像现在新购买的一个月就只有750G的流量了'
+            },
+            23: {
+                price: '¥852.00/年',
+                notice: '官网就是这个价，一般我等暑期特惠续费或者过年的时候续费'
+            },
+            24: {
+                price: '¥99.00/年'
+            },
+            25: {
+                price: '¥68.00/月'
+            },
+            26: {
+                notice: '家里云'
+            },
+        };
+
+        const createPriceTag = (price) => {
+            if (!price) return null;
+            // const $priceTag = document.createElement('span');
+            // $priceTag.setAttribute('style', 'background-color: rgba(0, 0, 0, 0.7); color: white; padding: 3px 6px; border-radius: 3px; margin-left: 5px;');
+            // $priceTag.textContent = price;
+            // return $priceTag;
+            return '价格: ' + price + '<br />';
+
+        };
+
+        const createPurchaseLink = (url) => {
+            if (!url) return null;
+            const $aLink = document.createElement('a');
+            $aLink.setAttribute('class', 'buy-same-link');
+            $aLink.setAttribute('target', '_blank');
+            $aLink.textContent = '购买同款';
+            $aLink.href = url;
+            return $aLink;
+        };
+
+        const createNotifyButton = (notice) => {
+            if (!notice) return null;
+          //   const $btnDiv = document.createElement('div');
+          //   $btnDiv.setAttribute('class', 'tooltip');
+          //   $btnDiv.innerHTML = `<span class="tooltip-text">
+          //       ${notice}
+          //     </span>
+          // <div class="tooltip-circle">
+          //   <span class="exclamation">!</span>
+          // </div>`
+          //   return $btnDiv;
+            return '注意事项: ' + notice + '<br />';
+        };
+
+        const uiCards = document.querySelectorAll('.ui.card');
+        uiCards.forEach((card) => {
+            let cardId = card.id;
+
+            if (cardId && affLinks[cardId]) {
+                let $aLinkBox = document.createElement('div');
+                $aLinkBox.setAttribute('style', 'display: flex;\n' +
+                    '    align-items: flex-start;\n' +
+                    '    flex-direction: column;');
+
+                let $priceTag = createPriceTag((typeof affLinks[cardId] === 'object') ? affLinks[cardId].price : null);
+                if ($priceTag) {
+                    // $aLinkBox.appendChild($priceTag);
+                    // $aLinkBox.innerHTML += $priceTag;
+                    let $purchaseLink = createPurchaseLink((typeof affLinks[cardId] === 'object') ? affLinks[cardId].url : null);
+                    if ($purchaseLink) {
+                        const $priceAndLink = document.createElement('div');
+                        $priceAndLink.setAttribute('style', 'display: flex; align-items: center;');
+                        $priceAndLink.innerHTML = $priceTag + $purchaseLink.outerHTML;
+                        $aLinkBox.appendChild($priceAndLink);
+                    } else {
+                        $aLinkBox.innerHTML += $priceTag;
+                    }
+                }
+
+
+
+                let $notifyBunnon = createNotifyButton((typeof affLinks[cardId] === 'object') ? affLinks[cardId].notice : null);
+                if ($notifyBunnon) {
+                    // $aLinkBox.appendChild($notifyBunnon);
+                    $aLinkBox.innerHTML += $notifyBunnon;
+                }
+
+
+                // card.appendChild($aLinkBox);
+                card.querySelector('.content .header .popup').insertBefore($aLinkBox, card.querySelector('.content .header .popup').children[card.querySelector('.content .header .popup').children.length - 1]);
+            }
+        });
+
+        const tooltips = document.querySelectorAll('.tooltip');
+        tooltips.forEach(tooltip => {
+            const tooltipText = tooltip.querySelector('.tooltip-text');
+            tooltip.addEventListener('mouseenter', () => {
+                // TODO: 优化位置
+            });
+        });
+
+        const td = document.querySelector('td');
+        td.innerHTML = td.textContent;
+    };
+
+</script>
+<style>
+
+    .hide-button {
+        background-color: #4CAF50;
+        border: none;
+        color: white;
+        padding: 5px 10px;
+        text-align: center;
+        text-decoration: none;
+        display: inline-block;
+        font-size: 16px;
+        margin: 4px 2px;
+        cursor: pointer;
+        border-radius: 5px;
+        border: 1px solid;
+    }
+
+    .buy-same-link {
+        background-color: rgb(10, 148, 242);
+        color: white;
+        padding: 0 5px;
+        border-radius: 5px;
+        margin-left: 5px;
+        text-decoration: none;
+    }
+
+    .tooltip {
+        position: relative;
+        display: inline-block;
+        margin-left: 6px;
+    }
+
+    .tooltip-circle {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 15px;
+        height: 15px;
+        background-color: white;
+        border: 1px solid black;
+        border-radius: 50%;
+        position: relative;
+    }
+
+    .exclamation {
+        color: black;
+        font-size: 10pt;
+        font-weight: bold;
+    }
+
+    .tooltip-text {
+        visibility: hidden;
+        width: max-content;
+        max-width: 300px;
+        background-color: #555;
+        color: #fff;
+        text-align: left;
+        padding: 5px;
+        border-radius: 6px;
+        font-size: 10pt;
+        position: absolute;
+        z-index: 1;
+        bottom: 125%;
+        left: 50%;
+        transform: translateX(-50%);
+        opacity: 0;
+        transition: opacity 0.5s;
+    }
+
+    .tooltip:hover .tooltip-text {
+        visibility: visible;
+        opacity: 1;
+    }
+
+    body {cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><text y="1em">🍗</text></svg>'), auto;}
+
+
+    .footer {
+        display: none;
+    }
+
+    .nezha-primary-btn {
+        background-color: #00000073 !important;
+        color: #ff84a3 !important;
+        transition: background-color 0.3s, color 0.3s;
+    }
+
+    .menu .container:first-child a:first-child img {
+        content: url('https://randallanjie.com/static/index/img/logo.png');
+    }
+
+    .nezha-primary-btn:hover {
+        background-color: #000000 !important;
+        color: #ffffff !important;
+    }
+
+    :root {
+        --lc-color-light: rgba(235, 235, 235, 0.4);
+        --bc-color-light: rgba(235, 235, 235, 0.4);
+        --the-color-light: rgba(235, 235, 235, 0.6);
+        --he-color-light: rgba(235, 235, 235, 0.8);
+        --message-color-light: rgb(22, 22, 22, 1);
+        --popup-color-light:rgba(235, 235, 235, 1);
+
+        --bc-color-dark: rgba(0, 0, 0, 0.4);
+        --lc-color-dark: rgba(55, 55, 55, 0.4);
+        --the-color-dark: rgba(35, 35, 35, 0.3);
+        --he-color-dark: rgba(35, 35, 35, 0.8);
+        --message-color-dark: rgb(235, 235, 235, 0.8);
+        --popup-color-dark:rgba(78, 78, 78, 1);
+
+
+        /* 注释上面一段颜色代码并取消下面注释的代码开启毛玻璃效果（图形性能开销巨大，可能导致掉帧） */
+
+        /* --bb: blur(15px) brightness(110%);
+        --lc-color-light: rgba(255, 255, 255, 0.7);
+        --bc-color-light: rgba(255, 255, 255, 0.1);
+        --the-color-light: rgba(255, 255, 255, 0.4);
+        --he-color-light: rgba(255, 255, 255, 0.5);
+        --message-color-light: rgb(22, 22, 22, 1);
+        --popup-color-light:rgba(235, 235, 235, 1);
+
+        --bc-color-dark: rgba(0, 0, 0, 0.3);
+        --lc-color-dark: rgba(55, 55, 55, 0.8);
+        --the-color-dark: rgba(70, 70, 70, 0.1);
+        --he-color-dark: rgba(35, 35, 35, 0.7);
+        --message-color-dark: rgb(235, 235, 235, 0.8);
+        --popup-color-dark:rgba(78, 78, 78, 1); */
+
+    }
+
+    /* 暗色模式适配 */
+    @media (prefers-color-scheme: dark) {
+        *:not(.icon, i) {
+            color: rgba(220, 220, 220, 0.95) !important;
+        }
+
+        .ui.menu .ui.dropdown .menu>.item {
+            color: rgba(220, 220, 220, 0.95) !important;
+        }
+
+
+        .ui .cards>.card {
+            background-color: var(--lc-color-dark) !important;
+            border-color: var(--lc-color-dark) !important;
+        }
+
+        .ui .cards>.card i:not(.flag) {
+            filter: saturate(60%) !important;
+        }
+
+
+        .ui.table thead th,
+        .ui.table thead {
+            background-color: var(--the-color-dark) !important;
+        }
+
+        .ui.table {
+            background-color: none !important;
+        }
+
+        .ui.large.menu,
+        .right.menu .menu,
+        .service-status h2,
+        .footer,
+        .floating.message.warning,
+        .floating.message.success {
+            background-color: var(--he-color-dark) !important;
+        }
+
+        .floating.message.warning,
+        .floating.message.success {
+            color: var(--message-color-dark) !important;
+        }
+
+        #app .ui.fluid.accordion,
+        .table {
+            background-color: var(--bc-color-dark) !important;
+        }
+
+        .ui.content.popup {
+            background-color: var(--popup-color-dark) !important;
+        }
+        .ui.content.popup:before{
+            background-color: var(--popup-color-dark) !important;
+        }
+
+        .ui.progress small,
+        td:not(.button):not(.bar):not(:has(.button, .bar)):not(:has(> small)) {
+            filter: brightness(115%);
+        }
+
+        .ui.progress .bar,
+        .nb-container .ui.icon.button,
+        .service-status .delay-today>i {
+            filter: brightness(85%);
+        }
+
+        .ui.button:hover {
+            filter: brightness(100%) !important;
+        }
+
+        .ui.popup:before {
+            background-color: var(--popup-color-dark) !important;
+            box-shadow: 0px 0px 0 0 #ffffff !important;
+        }
+
+        .amzayo-custom-button {
+            background-color: #4d4d4d8f !important;
+            color: rgba(178, 178, 178, 0.95) !important;
+            border: 2px solid #292929ae !important;
+        }
+
+        .amzayo-custom-button:hover {
+            background-color: #ff8457 !important;
+            color: #ffffffbd !important;
+            font-weight: bolder !important;
+        }
+
+        i.amzayo-secondary-font {
+            color: #727272ae !important;
+        }
+
+        .ui.popup {
+            background-color: var(--popup-color-dark) !important;
+        }
+
+        .ui.menu .item:before {
+            background: rgba(125, 125, 125, 0.15);
+        }
+
+        .ui.menu .active.item {
+            background: rgba(10, 10, 10, 0.2);
+        }
+
+        .ui.menu:not(.secondary):not(.text):not(.tabular):not(.borderless)>.container>.item:not(.right):not(.borderless):first-child {
+            border-left: 1px solid rgba(125, 125, 125, 0.15);
+        }
+    }
+
+    /* 屏幕适配 */
+
+    @media (min-width: 320px) {
+        .ui-alerts.top-center {
+            margin-left: 0px !important;
+            left: 50%;
+            transform: translate(-50%, -0%);
+        }
+    }
+
+    @media (min-width: 766px) {
+        .ui.container {
+            width: 80%;
+        }
+
+        /* 表格样式 */
+        .ui.table thead th {
+            backdrop-filter:var(--bb);
+            background-color: var(--the-color-light);
+        }
+
+        thead tr :first-child {
+            border-radius: 1rem 0 0 1rem !important;
+        }
+
+        thead tr :last-child {
+            border-radius: 0 1rem 1rem 0 !important;
+        }
+
+        /* 小卡片 */
+        .ui .cards>.card {
+            border-radius: 1rem;
+            border: none !important;
+            background-color: var(--lc-color-light);
+            padding: .25rem .25rem !important;
+            margin: .5rem .3rem !important;
+        }
+
+        .cards{
+            padding-left: 3.5em;
+        }
+
+        /* 小卡片头部调整 */
+        .ui.card>.content>.header,
+        .ui.cards>.card>.content>.header {
+            padding-top: 0;
+            display: flex;
+            color: rgba(0, 0, 0, .85);
+            align-items: center;
+            padding-bottom: .2em;
+            border-bottom: 1px solid rgba(0, 0, 0, .2);
+        }
+
+        .header_info {
+            font-size: 1rem !important;
+            line-height: 1rem !important;
+            margin-top: .3rem !important;
+            padding-right: .38rem !important;
+        }
+    }
+
+    @media (max-width: 766px) {
+
+        /* 表格样式 */
+        .ui.table thead {
+            backdrop-filter:var(--bb);
+            background-color: var(--the-color-light);
+        }
+
+        thead {
+            border-radius: 1rem !important;
+        }
+
+        thead tr {
+            padding: 0 !important;
+        }
+
+        /* 小卡片 */
+        .ui .cards>.card {
+            border-radius: 1rem;
+            background-color: var(--lc-color-light);
+            outline: none !important;
+        }
+
+        /* 小卡片头部调整 */
+        .ui.card>.content>.header,
+        .ui.cards>.card>.content>.header {
+            padding-top: 0.5rem;
+            display: flex;
+            color: rgba(0, 0, 0, .85);
+            align-items: center;
+            padding-bottom: .2em;
+            border-bottom: 1px solid rgba(0, 0, 0, .2);
+        }
+
+        .header_info {
+            font-size: 1rem !important;
+            line-height: 1rem !important;
+            padding-top: -.1rem !important;
+            padding-right: .38rem !important;
+        }
+    }
+
+    /* 自定义字体 */
+    @font-face {
+        font-family: 'Harmony Hans';
+        src: url(https://cdn.amzayo.top/static/fonts/HarmonyOSHans-Medium.woff2) format('woff2');
+    }
+
+    * {
+        font-family: 'Harmony Hans';
+    }
+
+    *:not(.content) {
+        transition: all .2s;
+    }
+
+    /* 背景图片 */
+    body::before {
+        content: "";
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        z-index: -1;
+        background: url('https://randallanjie.com/static/index/img/bg.jpg') center/cover no-repeat;
+    }
+
+    /* 菜单颜色 */
+    .ui.large.menu {
+        backdrop-filter:var(--bb);
+        background-color: var(--he-color-light);
+        border-radius: 0 0 1rem 1rem !important;
+    }
+
+    .ui.menu .item:last-child {
+        padding: 0 1.142em !important;
+    }
+
+    /* 登录按钮区域 */
+    .ui.simple.dropdown {
+        height: 100%;
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+    }
+
+    /* 登录之后的下拉菜单 */
+    .right.menu .menu {
+        border-radius: 0 0 1rem 1rem !important;
+        position: absolute;
+        top: 0 !important;
+        background-color: var(--he-color-light);
+        padding: 0 0.3em !important;
+    }
+
+    /* 登录按钮颜色（需要使用配套自定义主题） */
+    .amzayo-custom-button {
+        backdrop-filter:var(--bb);
+        background-color: #ffffff8f;
+        color: #000000cf;
+        border: 2px solid #ebe1d9;
+        border-radius: 1rem;
+        padding: 10px 20px;
+        font-size: 16px;
+    }
+
+    .amzayo-custom-button:hover {
+        background-color: #ff8457;
+        color: #ffffffbd;
+        font-weight: bolder;
+    }
+
+    /* 大卡片 */
+    #app .ui.fluid.accordion {
+        backdrop-filter:var(--bb);
+        background-color: var(--bc-color-light);
+        border-radius: 1rem;
+    }
+
+    #app :last-child.accordion {
+        margin-bottom: 0 !important;
+    }
+
+    /* 小卡片靠哪个方向对齐 */
+    .cards {
+        justify-content: left;
+    }
+
+    .ui.card,
+    .ui.cards>.card {
+        box-shadow: none !important;
+    }
+
+    /* 取消下方注释调整下面的数字以调整卡片宽度（非移动端页面，移动端页面让它自适应吧） */
+    /* .ui.card,
+    .ui.cards>.card {
+        width: 300px !important;
+    } */
+
+    /* 小卡片右上角的图标 */
+
+    i.amzayo-secondary-font {
+        margin-left: auto;
+        color: rgba(255, 153, 1, 0.65);
+    }
+
+    /* 头部配置信息样式 */
+    .header_info i {
+        margin-top: .25rem;
+        margin-right: .3rem;
+        margin-left: .3rem;
+    }
+
+    /* 更多信息卡片 */
+    .ui.content.popup {
+        border: none !important;
+        border-radius: 1rem;
+        margin: 0;
+        padding: 1em !important;
+        background-color: var(--popup-color-light);
+        width: max-content;
+        height: max-content;
+    }
+
+    .ui.popup {
+        border: none !important;
+    }
+
+    /* 小三角 */
+    .ui.content.popup:before {
+        background-color: var(--popup-color-light);
+        z-index: 9999 !important;
+        border: none !important;
+        box-shadow: 0px 0px 0 0 #ffffff !important;
+    }
+
+    .ui.bottom.popup:before {
+        clip-path: polygon(0 0, 100% 0, 50% 50%, 0 100%);
+    }
+
+    .ui.top.popup:before {
+        clip-path: polygon(100% 100%, 0% 100%, 100% 0);
+    }
+
+    /* 进度条圆角和颜色 */
+    .ui.progress {
+        border-radius: 50rem;
+        height: 1.5rem;
+    }
+
+    .ui.card>.content>.header:not(.ui), .ui.cards>.card>.content>.header:not(.ui){
+        display: flex;
+        align-items: flex-start;
+        justify-content: space-between;
+    }
+
+    /* 卡片内间距，如需调整小卡片高度，可以修改下面的2rem的数字 */
+    .status.cards .wide.column {
+        padding-top: 0 !important;
+        padding-bottom: 0 !important;
+        height: 2rem !important;
+    }
+
+    .bi::before,
+    [class^="bi-"]::before,
+    [class*=" bi-"]::before {
+        vertical-align: middle;
+        margin-bottom: .2rem;
+    }
+
+    /* 状态进度条 */
+    .card .bar {
+        height: 1.5rem;
+    }
+
+    .card .bar small {
+        vertical-align: super;
+        line-height: 1.5rem;
+    }
+
+    .card .ui.progress .bar {
+        min-width: 1.8em !important;
+        border-radius: 13px;
+        line-height: 1.65em;
+        height: 1.5rem;
+    }
+
+    table .ui.progress .bar {
+        border-radius: 13px;
+    }
+
+    /* 正常状态进度条颜色 */
+    .nb-container .ui.progress.fine .bar {
+        background-image: linear-gradient(to right, rgba(125, 252, 0, 0.6), rgba(50, 205, 50, 0.6));
+    }
+
+    /*有点累状态进度条颜色 */
+    .nb-container .ui.progress.warning .bar {
+        background-image: linear-gradient(to right, rgba(255, 215, 0, 0.6), rgba(255, 125, 80, 0.6));
+    }
+
+    /*高负载状态进度条颜色 */
+    .nb-container .ui.progress.error .bar {
+        background-image: linear-gradient(to right, rgba(255, 160, 120, 0.6), rgba(255, 70, 0, 0.6));
+    }
+
+    /* 离线状态进度条颜色 */
+    .ui.progress.offline .bar {
+        background-color: #000;
+    }
+
+    /* 上传下载图标颜色 */
+    i.arrow.alternate.circle.down.outline.icon {
+        color: rgb(0, 157, 255);
+    }
+
+    i.arrow.alternate.circle.up.outline.icon {
+        color: #ff0000;
+    }
+
+    /*服务状态*/
+    .nb-container .service-status .good {
+        background: rgba(50, 205, 50, 0.75);
+    }
+
+    .nb-container .service-status .warning {
+        background: rgba(250, 155, 40, 0.75);
+    }
+
+    .nb-container .service-status .danger {
+        background: rgba(255, 35, 0, 0.75);
+    }
+
+    /* 服务页面大表格背景 */
+    .table {
+        backdrop-filter:var(--bb);
+        background-color: var(--bc-color-light);
+        border-radius: 1rem !important;
+    }
+
+    .ui.table {
+        background-color: var(--bc-color-light);
+    }
+
+    .ui.button:not(.good):not(.warning):not(.danger):hover {
+        background: #e0e1e2 none;
+    }
+
+    .ui.button:hover {
+        filter: brightness(0.9);
+    }
+
+    .service-status .delay-today {
+        vertical-align: sub;
+    }
+
+    /* 循环流量统计标题 */
+    .service-status h2 {
+        backdrop-filter:var(--bb);
+        background-color: var(--he-color-light);
+        border-radius: 1rem !important;
+        margin: 0 !important;
+    }
+
+    /*底部*/
+    .footer {
+        backdrop-filter:var(--bb);
+        background-color: var(--he-color-light);
+        position: fixed !important;
+        bottom: 0 !important;
+        left: 0 !important;
+        right: 0 !important;
+        border-radius: 1rem 1rem 0 0 !important;
+    }
+
+    .ui.inverted.segment,
+    .ui.primary.inverted.segment {
+        background-color: var(--he-color-light);
+    }
+
+    .footer .container,
+    .footer .container a {
+        color: var(--message-color-light);
+    }
+
+    .footer .container a:hover {
+        color: #ff8457 !important;
+    }
+
+    /* 提示消息 */
+    .floating.message.success {
+        backdrop-filter: blur(15px) brightness(110%);
+        background-color: var(--he-color-light);
+        border: 3px solid rgba(255.255.255.0.5);
+        border-radius: 1rem !important;
+        color: var(--message-color-light);
+        box-shadow: 0 0 15px rgba(1, 132, 255, 0.65);
+    }
+
+    .floating.message.success .header {
+        color: var(--message-color-light);
+    }
+
+    .floating.message.warning {
+        backdrop-filter: blur(15px) brightness(110%);
+        background-color: var(--he-color-light);
+        border: 1px solid rgba(255.255.255.0.5);
+        border-radius: 1rem !important;
+        color: var(--message-color-light);
+        box-shadow: 0 0 15px rgba(255, 153, 1, 0.65);
+    }
+
+    .floating.message.warning .header {
+        color: var(--message-color-light);
+    }
+
+    .cpucontent {
+        display: inline-block;
+    }
+
+    .rollanimation {
+        animation: scroll 10s cubic-bezier(.2, 0, .8, 1) infinite;
+    }
+
+    @keyframes scroll {
+
+        0% {
+            transform: translateX(0%);
+        }
+
+        30% {
+            transform: translateX(0%);
+        }
+
+        100% {
+            transform: translateX(-100%);
+        }
+
+    }
+
+
+    /*
+
+    以下样式为部分原版主题样式，由于原版主题样式有些强制性，不方便二次修改，故拿出来
+
+    */
+
+    .ui.mini.message {
+        width: 17rem;
+    }
+
+    .ui-alerts {
+        padding: 23px 0 !important;
+    }
+
+    td {
+        word-wrap: break-word;
+        word-break: break-all;
+    }
+
+    .nb-container {
+        padding-top: 75px;
+        min-height: 100vh;
+        padding-bottom: 65px;
+        margin-bottom: -47px;
+    }
+
+    #app .ui.fluid.accordion {
+        margin-bottom: 1rem;
+    }
+
+    .login.nb-container {
+        display: flex;
+        align-items: center;
+        padding-top: unset;
+    }
+
+    .login.nb-container>.grid {
+        width: 100%;
+        margin: 0 auto;
+    }
+
+    .login.nb-container>.grid .column {
+        max-width: 450px;
+    }
+
+    .status.cards .flag {
+        margin-right: 0 !important;
+    }
+
+    .status.cards .header>.info.icon {
+        float: right;
+        margin-right: 0;
+    }
+
+    .status.cards .wide.column {
+        padding-top: 0 !important;
+        padding-bottom: 0 !important;
+        height: 2rem !important;
+    }
+
+    .status.cards .three.wide.column {
+        padding-right: 0 !important;
+    }
+
+    .status.cards .wide.column:nth-child(1) {
+        margin-top: 1rem !important;
+    }
+
+    .status.cards .wide.column:nth-child(2) {
+        margin-top: 1rem !important;
+    }
+
+    .status.cards .description {
+        padding-bottom: 1rem !important;
+    }
+
+    .status.cards .ui.content.popup {
+        min-width: 250px;
+    }
+
+    .status.cards .outline.icon {
+        margin-right: 0 !important;
+    }
+
+    .ui.progress .bar {
+        min-width: 1.26em !important;
+        text-align: right;
+        padding-right: 0.4em;
+        line-height: 1.75em;
+        color: rgba(255, 255, 255, 0.7);
+        font-weight: 700;
+        max-width: 100% !important;
+    }
+
+    .service-status .delay-today {
+        display: flex;
+        align-items: center;
+    }
+
+    .service-status .delay-today>i {
+        display: inline-block;
+        width: 1.2em;
+        height: 1.2em;
+        border-radius: 0.6em;
+        background-color: grey;
+        margin-right: 0.3em;
+    }
+</style>
+<!-- 网页特效 - 樱花 -->
+<script src="https://cdn.jsdelivr.net/gh/mocchen/cssmeihua/js/yinghua.js"></script>
+
+<!-- 网页鼠标点击特效 - 爱心 -->
+<script src="https://cdn.jsdelivr.net/gh/mocchen/cssmeihua/js/aixin.js"></script>
+
+<!-- 网页鼠标点击特效 - 烟花波纹 -->
+<script src="https://cdn.jsdelivr.net/gh/mocchen/cssmeihua/js/yanhuabowen.js"></script>