分享一个自用的哪吒魔改美化源码

server主题的模版美化源码吧！！！

跑马灯进度条是偷别人的样式自己再修改下添加了倒计时功能
官方原白色模版下不透明改成了透明
由于代码原因导致该模版下的水滴壁纸和分组功能点击后会屏蔽表格样式所以直接隐藏了官方模版的水滴功能和分组功能，只留下了世界地图和开关灯
背景采用了判断浏览器内核是否支持视频播放否则，是则输出视频背景，否则输出图片，例如检测通过第三方平台打开浏览器内核低则输出图片背景，手机端 pc端各显示不同
affLinks那里就是添加的主机id信息，照抄改下就ok了，不填写id信息则显示无信息
能力不足，开发后台前端交互，添加主机对应id的信息只能通过手动修改代码去调整，不难，有手就行
可通过我的“鸡窝”查看事例：https://server.ariesjon.xyz/
代码都有注释备注的，喜欢可以随便改，基本上完工了，看这个进度条不顺眼想后面改成iPhone电量模式那样，后面再说吧，代码如下自取
<script>
  localStorage.setItem('showGroup', 'true');
</script>

<script>
    // 1.改首页logo,将https://替换为你的Logo URL
    window.addEventListener('DOMContentLoaded', (event) => {
        var logo = document.querySelector('.navbar-brand img');
        if (logo) {
            logo.src = 'https://deweb.ariesjon.xyz/Video /IMG_0408.webp'; // 将 URL 替换为你的Logo URL
        }
    });
</script>

<style>
/* 强制隐藏 toggleView 和 toggleSemiTransparent */
.toggleView, .toggleSemiTransparent {
    display: none !important; /* 强制隐藏这些元素 */
}
</style>

<script>
window.onload = function() {
    // 禁用 .toggleView 的交互
    var toggleView = document.querySelector('.toggleView');
    if (toggleView) {
        toggleView.style.pointerEvents = 'none'; // 禁用点击
        toggleView.style.cursor = 'default'; // 改变鼠标指针为默认状态
    }

    // 禁用 .toggleSemiTransparent 的交互
    var toggleSemiTransparent = document.querySelector('.toggleSemiTransparent');
    if (toggleSemiTransparent) {
        toggleSemiTransparent.style.pointerEvents = 'none'; // 禁用点击
        toggleSemiTransparent.style.cursor = 'default'; // 改变鼠标指针为默认状态
    }
};
</script>

<!-- 暗黑模版 -->
<style>
/* 暗黑自改样式 */
body[theme="dark"] {
    margin: 0;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    background: rgba(0, 0, 0, 0.64); /* 原透明度 0.8 降低 20% 为 0.64 */
    color: #f1f1f1;
    position: relative;
    overflow-x: hidden; /* 防止超出水平滚动 */
}

/* PC端视频背景设置 */
video#background-video-pc {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover; /* 视频自动适应屏幕 */
    z-index: -1;
    opacity: 1 !important; /* 视频完全不透明 */
}

/* 手机端视频背景设置 */
video#background-video-mobile {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover; /* 视频自动适应屏幕 */
    z-index: -1;
    opacity: 1 !important; /* 视频完全不透明 */
}

/* 隐藏内容区域 */
.overlay {
    display: none; /* 隐藏页面内容 */
}

/* 导航条和内容的背景与样式 */
body[theme="dark"] .navbar {
    background-color: rgba(0, 0, 0, 0.64); /* 原透明度 0.8 降低 20% 为 0.64 */
    box-shadow: none;
    border: none;
}

body[theme="dark"] .navbar .navbar-brand {
    color: #ffffff;
}

body[theme="dark"] .navbar .dropdown-menu {
    background-color: rgba(0, 0, 0, 0.68); /* 原透明度 0.85 降低 20% 为 0.68 */
    border-top: none;
    border-color: #31363b;
    box-shadow: rgba(0, 0, 0, 0.144) 0px 6px 12px; /* 原透明度 0.18 降低 20% */
}

body[theme="dark"] .navbar .dropdown-menu > li > a {
    color: #c8c3bc;
}

body[theme="dark"] .navbar .dropdown-menu > li > a:focus,
body[theme="dark"] .navbar .dropdown-menu > li > a:hover {
    background-color: rgba(0, 0, 0, 0.76); /* 原透明度 0.95 降低 20% 为 0.76 */
    background-image: linear-gradient(#1c1d26 0, #1c1d26 100%);
}

body[theme="dark"] .navbar .navbar-nav .open .dropdown-menu > li > a {
    color: #f1f1f1;
}

body[theme="dark"] .table,
body[theme="dark"] .table-condensed > tbody > tr,
body[theme="dark"] .table-hover > tbody > tr,
body[theme="dark"] .table-hover > tbody > tr:hover,
body[theme="dark"] .table-striped tbody > tr.even,
body[theme="dark"] .table-striped tbody > tr.odd,
body[theme="dark"] .table-striped tbody > tr.even > td,
body[theme="dark"] .table-striped tbody > tr.even > th,
body[theme="dark"] .table-striped tbody > tr.odd > td,
body[theme="dark"] .table-striped tbody > tr.odd > th,
body[theme="dark"] .table-striped tbody > tr.even > td:hover,
body[theme="dark"] .table-striped tbody > tr.even > th:hover,
body[theme="dark"] .table-striped tbody > tr.odd > td:hover,
body[theme="dark"] .table-striped tbody > tr.odd > th:hover,
body[theme="dark"] .table-striped tbody > tr.expandRow:hover {
    background-color: transparent !important;
}

body[theme="dark"] .content {
    background-color: rgba(28, 29, 38, 0.64); /* 原透明度 0.8 降低 20% 为 0.64 */
    border: none;
    box-shadow: rgba(0, 0, 0, 0.4) 0 0.625em 2em; /* 原透明度 0.5 降低 20% 为 0.4 */
    -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0 0.625em 2em; /* 原透明度 0.5 降低 20% 为 0.4 */
}

body[theme="dark"] .table > thead > tr.node-group-tag > th,
body[theme="dark"] .table > thead > tr.node-group-tag > th:before {
    background: unset;
}

body[theme="dark"] .table > tbody > tr > td:before,
body[theme="dark"] .table > tfoot > tr > td:before,
body[theme="dark"] .table > thead > tr > td:before,
body[theme="dark"] .table > thead > tr.node-group-cell > th:before {
    background-color: rgba(155, 155, 155, 0.08); /* 原透明度 0.1 降低 20% 为 0.08 */
}

body[theme="dark"] .table-hover > tbody > tr:not(.expandRow):hover > td {
    background-color: unset;
}

body[theme="dark"] .progress {
    background-image: none;
    background-color: rgba(255, 255, 255, 0.06); /* 原透明度 0.075 降低 20% 为 0.06 */
}
</style>

<!-- 白色透明模版 -->
<style>
/* 白色样式 */
body[theme="light"] {
    margin: 0;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    background: rgba(255, 255, 255, 0.4); /* 将背景透明度降低至50% */
    color: #333333; /* 深色字体 */
    position: relative;
    overflow-x: hidden; /* 防止超出水平滚动 */
}

/* PC端视频背景设置 */
video#background-video-pc {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover; /* 视频自动适应屏幕 */
    z-index: -1;
    opacity: 1; /* 视频透明度 */
}

/* 手机端视频背景设置 */
video#background-video-mobile {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover; /* 视频自动适应屏幕 */
    z-index: -1;
    opacity: 1; /* 视频透明度 */
}

/* 隐藏内容区域 */
.overlay {
    display: none; /* 隐藏页面内容 */
}

/* 导航条和内容的背景与样式 */
body[theme="light"] .navbar {
    background-color: rgba(255, 255, 255, 0.4); /* 导航栏透明度降低50% */
    box-shadow: none;
    border: none;
}

body[theme="light"] .navbar .navbar-brand {
    color: #333333; /* 深色文字 */
}

body[theme="light"] .navbar .dropdown-menu {
    background-color: rgba(255, 255, 255, 0.425); /* 菜单透明度降低50% */
    border-top: none;
    border-color: #cccccc;
    box-shadow: rgba(0, 0, 0, 0.18) 0px 6px 12px;
}

body[theme="light"] .navbar .dropdown-menu > li > a {
    color: #666666; /* 浅灰色文字 */
}

body[theme="light"] .navbar .dropdown-menu > li > a:focus,
body[theme="light"] .navbar .dropdown-menu > li > a:hover {
    background-color: rgba(255, 255, 255, 0.475);
    background-image: linear-gradient(#f9f9f9 0, #f9f9f9 100%);
}

body[theme="light"] .navbar .navbar-nav .open .dropdown-menu > li > a {
    color: #333333;
}

/* 表格透明背景 */
body[theme="light"] .table,
body[theme="light"] .table-condensed > tbody > tr,
body[theme="light"] .table-hover > tbody > tr,
body[theme="light"] .table-hover > tbody > tr:hover,
body[theme="light"] .table-striped tbody > tr.even,
body[theme="light"] .table-striped tbody > tr.odd,
body[theme="light"] .table-striped tbody > tr.even > td,
body[theme="light"] .table-striped tbody > tr.even > th,
body[theme="light"] .table-striped tbody > tr.odd > td,
body[theme="light"] .table-striped tbody > tr.odd > th,
body[theme="light"] .table-striped tbody > tr.even > td:hover,
body[theme="light"] .table-striped tbody > tr.even > th:hover,
body[theme="light"] .table-striped tbody > tr.odd > td:hover,
body[theme="light"] .table-striped tbody > tr.odd > th:hover,
body[theme="light"] .table-striped tbody > tr.expandRow:hover {
    background-color: transparent !important;
}

/* 明确设置thead和tbody的透明背景 */
body[theme="light"] .table > thead > tr,
body[theme="light"] .table > thead > tr > th,
body[theme="light"] .table > tbody > tr,
body[theme="light"] .table > tbody > tr > td {
    background-color: transparent !important; /* 确保thead, tbody, td, th透明 */
}

/* 表格hover状态透明 */
body[theme="light"] .table-hover > tbody > tr:not(.expandRow):hover > td {
    background-color: rgba(255, 255, 255, 0.1) !important; /* hover状态透明度降低至50% */
}

/* 内容透明背景 */
body[theme="light"] .content {
    background-color: rgba(255, 255, 255, 0.4); /* 内容透明度降低至50% */
    border: none;
    box-shadow: rgba(0, 0, 0, 0.5) 0 0.625em 2em;
}

/* 进度条 */
body[theme="light"] .progress {
    background-image: none;
    background-color: rgba(255, 255, 255, 0.0375); /* 进度条透明度降低至50% */
}
</style>


<!-- 视频标签 -->
<!-- PC端视频 -->
<video id="background-video-pc" autoplay muted loop playsinline style="display:none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;">
    <source src="https://deweb.ariesjon.xyz/Video /dn.MP4 " type="video/mp4">
    Your browser does not support the video tag.
</video>

<!-- 手机端视频 -->
<video id="background-video-mobile" autoplay muted loop playsinline style="display:none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;">
    <source src="https://deweb.ariesjon.xyz/Video /sj.MP4 " type="video/mp4">
    Your browser does not support the video tag.
</video>

<!-- 背景图片 -->
<div id="background-image-pc" style="display:none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: url('https://deweb.ariesjon.xyz/Video%20/dn1.JPG') no-repeat center center/cover; z-index: -1;"></div>
<div id="background-image-mobile" style="display:none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: url('https://deweb.ariesjon.xyz/Video%20/sj5.JPG') no-repeat center center/cover; z-index: -1;"></div>

<!-- 页面内容 -->
<div class="overlay" style="position: relative; z-index: 1;">
    <h1>动态背景视频</h1>
    <p>PC和手机端根据设备类型加载不同的背景。</p>
</div>

<!-- JavaScript 用于检测设备、浏览器内核支持 -->
<script>
    function isMobileDevice() {
        return (typeof window.orientation !== "undefined") || (navigator.userAgent.indexOf('IEMobile') !== -1);
    }

    function isBrowserSupported() {
        var videoElement = document.createElement('video');
        return !!videoElement.canPlayType && videoElement.canPlayType('video/mp4') !== '';
    }

    function isThirdPartyApp() {
        var userAgent = navigator.userAgent || navigator.vendor || window.opera;
        return /FBAN|FBAV|Instagram|Messenger|Line|WeChat|QQ|TikTok|Douyin/i.test(userAgent);
    }

    function canPlayVideo() {
        var videoElement = document.createElement('video');
        return !!videoElement.canPlayType && (videoElement.canPlayType('video/mp4') !== '' || videoElement.canPlayType('video/quicktime') !== '');
    }

    window.onload = function() {
        var videoPc = document.getElementById("background-video-pc");
        var videoMobile = document.getElementById("background-video-mobile");
        var imagePc = document.getElementById("background-image-pc");
        var imageMobile = document.getElementById("background-image-mobile");

        var isMobile = isMobileDevice();
        var supportVideo = canPlayVideo();
        var isThirdParty = isThirdPartyApp();

        if (supportVideo && !isThirdParty) {
            // 如果支持视频播放且不是第三方应用
            if (isMobile) {
                videoMobile.style.display = "block"; // 显示手机端视频
                videoMobile.play(); // 确保视频播放
            } else {
                videoPc.style.display = "block"; // 显示PC端视频
                videoPc.play(); // 确保视频播放
            }
        } else {
            // 如果不支持视频播放，显示图片背景
            if (isMobile) {
                imageMobile.style.display = "block"; // 显示手机端图片背景
            } else {
                imagePc.style.display = "block"; // 显示PC端图片背景
            }
        }
    };
</script>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        try {
            var downtimeCells = document.querySelectorAll('th.node-cell.os.center');
            if (!downtimeCells) throw new Error('找不到表头列');

            downtimeCells.forEach(function(cell) {
                var newTh = document.createElement('th');
                newTh.className = 'node-cell downtime center';
                newTh.textContent = '到期倒计时';
                newTh.style.minWidth = '120px'; 
                cell.parentNode.insertBefore(newTh, cell.nextSibling);

                var renewalTh = document.createElement('th');
                renewalTh.className = 'node-cell renewal center';
                renewalTh.textContent = '金额/周期/续费';
                renewalTh.style.minWidth = '120px';  
                cell.parentNode.insertBefore(renewalTh, newTh.nextSibling);
            });

            const affLinks = {
                1: { startDate: new Date('2024-09-13T00:00:00+08:00'), endDate: new Date('2024-10-13T00:00:00+08:00'), amount: '23 HKD / Monthly', link: 'https://members.juhost.com/clientarea.php?action=productdetails&id=6198' },
                2: { startDate: new Date('2024-09-04T00:00:00+08:00'), endDate: new Date('2025-09-04T00:00:00+08:00'), amount: '25 USD / Annually', link: 'https://server.zgocloud.cc/server/84f4fd2f-52fc-46cb-b370-de53cf9e3998' },
                3: { startDate: new Date('2024-09-13T00:00:00+08:00'), endDate: new Date('2024-10-13T00:00:00+08:00'), amount: '14 CNY / Monthly', link: 'https://wap.ac/clientarea.php?action=productdetails&id=18535' },
                4: { startDate: new Date('2024-09-10T00:00:00+08:00'), endDate: new Date('2024-10-10T00:00:00+08:00'), amount: '1.2 EUR / Monthly', link: 'https://index-hosting.de/clientarea.php' },
                13: { startDate: new Date('2024-09-18T00:00:00+08:00'), endDate: new Date('2024-10-18T00:00:00+08:00'), amount: '11 CNY / Monthly', link: 'https://yunyoo.cc/clientarea' },
                8: { startDate: new Date('2024-08-28T00:00:00+08:00'), endDate: new Date('2024-10-28T00:00:00+08:00'), amount: '3 USD / Monthly', link: 'https://yxvm.com/clientarea.php?action=productdetails&id=18054' },
                9: { startDate: new Date('2024-09-22T00:00:00+08:00'), endDate: new Date('2024-10-22T00:00:00+08:00'), amount: '3 USD / Monthly', link: 'https://yxvm.com/clientarea.php?action=productdetails&id=18054' },
                10: { startDate: new Date('2024-09-21T19:46:00+08:00'), endDate: new Date('2024-10-21T19:46:00+08:00'), amount: '2 CNY / Monthly', link: 'https://yunyoo.cc/clientarea' },
            };

            const createCountdown = (startDate, endDate) => {
                const $countdown = document.createElement('div');
                $countdown.className = 'countdown';
                $countdown.style.position = 'relative';
                $countdown.style.width = '100%';
                $countdown.style.height = '20px';
                $countdown.style.backgroundColor = '#3e3e3e';
                $countdown.style.borderRadius = '4px';
                $countdown.style.overflow = 'hidden';

                const $progress = document.createElement('div');
                $progress.className = 'progress';
                $progress.style.position = 'absolute';
                $progress.style.height = '100%';
                $progress.style.width = '0%';
                $progress.style.backgroundImage = 'linear-gradient(to right, #48dbfb, #feca57, #ff6b6b)';
                $progress.style.transition = 'width 0.6s ease';
                $progress.style.borderRadius = '4px 0 0 4px';

                const $countdownTime = document.createElement('div');
                $countdownTime.style.position = 'absolute';
                $countdownTime.style.width = '100%';
                $countdownTime.style.height = '100%';
                $countdownTime.style.display = 'flex';
                $countdownTime.style.alignItems = 'center';
                $countdownTime.style.justifyContent = 'space-between'; // 左右对齐
                $countdownTime.style.color = '#fff';
                $countdownTime.style.fontWeight = 'bold';
                $countdownTime.style.fontSize = 'inherit';
                $countdownTime.style.textShadow = '1px 1px 2px rgba(0,0,0,0.7)';
                $countdownTime.style.padding = '0 7.5px'; // 左右内边距

                const updateCountdown = () => {
                    const now = new Date();
                    const totalDuration = endDate.getTime() - startDate.getTime();
                    const elapsedDuration = now.getTime() - startDate.getTime();
                    const remainingDuration = endDate.getTime() - now.getTime();

                    if (remainingDuration <= 0) {
                        $countdownTime.innerHTML = '<span>已过期</span>';
                        $progress.style.width = '100%';
                        $progress.style.backgroundColor = '#ff0000';
                        $progress.style.backgroundImage = 'none';
                        return;
                    }

                    const days = Math.floor(remainingDuration / (1000 * 60 * 60 * 24));
                    const hours = Math.floor((remainingDuration % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                    const minutes = Math.floor((remainingDuration % (1000 * 60 * 60)) / (1000 * 60));
                    const seconds = Math.floor((remainingDuration % (1000 * 60)) / 1000);
                    const progressPercent = (elapsedDuration / totalDuration) * 100;

                    if (days > 0) {
                        $countdownTime.innerHTML = `
                            <span>${days} day</span>
                            <span>${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}</span>
                        `;
                    } else {
                        $countdownTime.innerHTML = `
                            <span></span>
                            <span>${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}</span>
                        `;
                    }
                    $progress.style.width = `${progressPercent}%`;
                };

                updateCountdown();
                setInterval(updateCountdown, 1000);

                $countdown.appendChild($progress);
                $countdown.appendChild($countdownTime);

                return $countdown;
            };

            const rows = document.querySelectorAll('tr');
            rows.forEach((row) => {
                let osCell = row.querySelector('td.node-cell.os.center');
                if (!osCell) return;

                let downtimeCell = document.createElement('td');
                downtimeCell.classList.add('node-cell', 'downtime', 'center');
                downtimeCell.style.minWidth = '120px';  

                let renewalCell = document.createElement('td');
                renewalCell.classList.add('node-cell', 'renewal', 'center');
                renewalCell.style.minWidth = '120px';  

                let nodeId = row.id ? row.id.substring(1) : null;
                if (!nodeId || !affLinks[nodeId]) {
                    downtimeCell.textContent = '无信息';
                    renewalCell.textContent = '无信息';
                    osCell.parentNode.insertBefore(downtimeCell, osCell.nextSibling);
                    osCell.parentNode.insertBefore(renewalCell, downtimeCell.nextSibling);
                    return;
                }

                let affLink = affLinks[nodeId];
                if (affLink.startDate && affLink.endDate) {
                    let countdown = createCountdown(affLink.startDate, affLink.endDate);
                    downtimeCell.appendChild(countdown);
                } else {
                    downtimeCell.textContent = '无到期信息';
                }

                let amountText = affLink.amount ? affLink.amount.replace(/[\$€¥]/g, '') : '无信息'; 
                let link = affLink.link || '#';

                renewalCell.className = "node-cell buy";
                renewalCell.style.textAlign = "center";
                                renewalCell.innerHTML = `
                    <div class="ui basic label mini" style="min-height: 20px; padding: 0 .5em; height: 20px; font-weight: normal; line-height: 20px; font-size: .78571429rem;">
                        ${amountText}
                    </div>
                    <a class="ui icon button mini green" href="${link}" target="_blank" style="min-height: 20px; padding: 0 5px; line-height: 20px;">续费</a>
                `;
                osCell.parentNode.insertBefore(downtimeCell, osCell.nextSibling);
                osCell.parentNode.insertBefore(renewalCell, downtimeCell.nextSibling);
            });
        } catch (error) {
            console.error('发生错误:', error.message);
        }
    });
</script>
 声明：本站所有文章，如无特殊说明或标注，均为演示数据。
server主题的模版美化源码吧！！！

发表评论 取消

发表评论取消
