网站底部信息编辑

1、图床服务编辑

 {{-- 底部 --}}
        <footer class="relative z-10 py-4" style="background: rgba(255,255,255,0.6); border-top: 1px solid rgba(16,185,129,0.08);">
            <p class="text-center text-slate-400 text-xs">
                图床服务:&nbsp;<a href="https://pic.wshlyl.cn" target="_blank" rel="noreferrer" class="hover:text-emerald-500 transition-colors">Norpho图床</a>
                &nbsp;|&nbsp;
                官网主站:&nbsp;<a href="https://wshlyl.cn" target="_blank" rel="noreferrer" class="hover:text-emerald-500 transition-colors">西北技术支持中心</a>
				&nbsp;|&nbsp;
                办公云盘:&nbsp;<a href="https://doc.wshlyl.cn" target="_blank" rel="noreferrer" class="hover:text-emerald-500 transition-colors">NTSC办公云平台</a>
				&nbsp;|&nbsp;
                Git服务:&nbsp;<a href="https://git.wshlyl.cn" target="_blank" rel="noreferrer" class="hover:text-emerald-500 transition-colors">Git代码云托管</a>
            </p>
            <p class="text-center text-slate-400 text-xs mt-1">
                &copy; {{ date('Y') }} {{ \App\Utils::config(\App\Enums\ConfigKey::AppName) }}. All rights reserved.
                @if(\App\Utils::config(\App\Enums\ConfigKey::IcpNo))
                &nbsp;&middot;&nbsp; <a href="https://beian.miit.gov.cn/" target="_blank" rel="noreferrer" class="hover:text-emerald-500 transition-colors">{{ \App\Utils::config(\App\Enums\ConfigKey::IcpNo) }}</a>
                @endif
            </p>
        </footer>

2、本站页脚内容修改

3、右侧人生倒计时代码

<!DOCTYPE html>

<html lang="zh-CN">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>人生进度侧边栏</title>

<style>

/*

核心防冲突设置：

将所有默认样式重置，确保这个卡片在任何网站都能正常显示

*/

.life-progress-wrapper * {

box-sizing: border-box;

margin: 0;

padding: 0;

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

}

/* 卡片容器：控制整体大小和阴影 */

.life-progress-wrapper {

width: 100%;

background-color: #ffffff;

border-radius: 10px;

padding: 20px;

box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);

color: #333;

font-size: 14px;

line-height: 1.6;

display: flex;

flex-direction: column;

gap: 16px; /* 控制每个进度条之间的间距 */

}/* 头部标题 */
.progress-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 5px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

/* 奖杯图标 */
.icon-trophy {
    font-size: 18px;
    color: #f1c40f;
}

/* 每一行的容器 */
.progress-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* 标签和百分比（同一行） */
.progress-label-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #555;
    font-size: 13px;
}

.progress-percent {
    font-weight: bold;
    color: #444;
}

/* 进度条背景轨道 */
.progress-bar-bg {
    width: 100%;
    height: 12px;
    background-color: #e9ecef;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
}

/* 进度条填充部分 */
.progress-bar-fill {
    height: 100%;
    border-radius: 6px;
    transition: width 0.5s ease-in-out;
    position: relative;
    background-image: linear-gradient(
        -45deg,
        rgba(255, 255, 255, 0.3) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.3) 50%,
        rgba(255, 255, 255, 0.3) 75%,
        transparent 75%,
        transparent
    );
    background-size: 20px 20px;
    animation: progress-animation 1s linear infinite;
}

/* 流动动画 */
@keyframes progress-animation {
    0% { background-position: 0 0; }
    100% { background-position: 20px 0; }
}

/* 不同颜色的进度条 */
.color-blue { background-color: #3498db; }
.color-orange { background-color: #f39c12; }
.color-red { background-color: #e74c3c; }
.color-green { background-color: #2ecc71; }

</style></head>

<body><!-- 
  这是一个独立的组件容器。
  您只需要把这个 div 放到您网站的右侧边栏里即可。
-->
<div class="life-progress-wrapper">
    
    <!-- 头部 -->
    <div class="progress-header">
        <span class="icon-trophy">🏆</span>
        <span>人生进度</span>
    </div>

    <!-- 1. 今日进度 -->
    <div class="progress-row">
        <div class="progress-label-group">
            <span>今日已经过去</span>
            <span class="progress-percent" id="percent-today">0%</span>
        </div>
        <div class="progress-bar-bg">
            <div class="progress-bar-fill color-blue" id="bar-today"></div>
        </div>
    </div>

    <!-- 2. 本周进度 -->
    <div class="progress-row">
        <div class="progress-label-group">
            <span>本周已经过去</span>
            <span class="progress-percent" id="percent-week">0%</span>
        </div>
        <div class="progress-bar-bg">
            <div class="progress-bar-fill color-orange" id="bar-week"></div>
        </div>
    </div>

    <!-- 3. 本月进度 -->
    <div class="progress-row">
        <div class="progress-label-group">
            <span>本月已经过去</span>
            <span class="progress-percent" id="percent-month">0%</span>
        </div>
        <div class="progress-bar-bg">
            <div class="progress-bar-fill color-red" id="bar-month"></div>
        </div>
    </div>

    <!-- 4. 今年进度 -->
    <div class="progress-row">
        <div class="progress-label-group">
            <span>今年已经过去</span>
            <span class="progress-percent" id="percent-year">0%</span>
        </div>
        <div class="progress-bar-bg">
            <div class="progress-bar-fill color-green" id="bar-year"></div>
        </div>
    </div>

</div>

<script>
    /**
     * 核心逻辑：计算时间并更新进度条
     */
    function updateLifeProgress() {
        const now = new Date();
        const h = now.getHours();
        const d = now.getDate();
        const m = now.getMonth();
        const y = now.getFullYear();

        // 1. 今日进度 (小时)
        const pctToday = (h / 24) * 100;
        
        // 2. 本周进度 (周一为第1天，周日为第7天)
        let dayOfWeek = now.getDay();
        if (dayOfWeek === 0) dayOfWeek = 7; 
        const pctWeek = (dayOfWeek / 7) * 100;

        // 3. 本月进度
        const daysInMonth = new Date(y, m + 1, 0).getDate();
        const pctMonth = (d / daysInMonth) * 100;

        // 4. 今年进度 (按天数计算，更平滑)
        const startOfYear = new Date(y, 0, 1);
        const diff = now - startOfYear;
        const oneDay = 1000 * 60 * 60 * 24;
        const dayOfYear = Math.floor(diff / oneDay) + 1;
        const pctYear = (dayOfYear / 365) * 100;

        // 更新 DOM
        applyWidth('today', pctToday);
        applyWidth('week', pctWeek);
        applyWidth('month', pctMonth);
        applyWidth('year', pctYear);
    }

    function applyWidth(id, percent) {
        const num = Math.min(100, Math.max(0, percent));
        const bar = document.getElementById('bar-' + id);
        const text = document.getElementById('percent-' + id);
        
        if (bar && text) {
            bar.style.width = num.toFixed(1) + '%';
            text.textContent = num.toFixed(0) + '%';
        }
    }

    // 初始化及定时更新
    updateLifeProgress();
    setInterval(updateLifeProgress, 1000);
</script></body>

</html>

4、网站音乐插件引用

<script src="https://myhkw.cn/player/js/jquery.min.js" type="text/javascript"></script>
<script src="https://myhkw.cn/api/player/demo" id="myhk" key="demo" au="1" m="1"></script>

阅读工具

1、图床服务编辑

2、本站页脚内容修改

3、右侧人生倒计时代码

4、网站音乐插件引用

切换评论系统

阅读工具

大家喜欢

热门文章