编辑页面

HTML内容
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我们的友谊纪念日 ☀️</title>
    <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600&display=swap" rel="stylesheet">
    <style>
        :root {
            --bg-light: #f5f2eb;
            --bg-soft: #e8e3d5;
            --card-bg: rgba(255, 255, 255, 0.65);
            --text-primary: #4a3f35;
            --text-secondary: #7b6e60;
            --accent: #c7a97b;
            --accent-soft: #dac29c;
            --shadow-soft: 0 8px 30px rgba(0,0,0,0.06);
            --border-soft: 1px solid rgba(180, 160, 130, 0.25);
            --golden: #bfa67a;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            width: 100vw;
            height: 100vh;
            height: 100dvh;
            overflow: hidden;
            font-family: 'PingFang SC', 'Hiragino Sans GB', 'STKaiti', 'KaiTi', 'Noto Serif SC', 'Quicksand', sans-serif;
            background: linear-gradient(145deg, #f5f2eb 0%, #ede7db 50%, #f0eadc 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            user-select: none;
            -webkit-user-select: none;
            -webkit-tap-highlight-color: transparent;
            cursor: default;
            position: relative;
        }

        /* 极简背景光点 */
        .bg-soft-glow {
            position: fixed;
            border-radius: 50%;
            filter: blur(80px);
            pointer-events: none;
            z-index: 0;
            opacity: 0.35;
        }
        .bg-soft-glow--1 {
            width: 40vw;
            height: 40vw;
            max-width: 500px;
            max-height: 500px;
            background: #e7dcc8;
            top: 10%;
            left: 5%;
        }
        .bg-soft-glow--2 {
            width: 35vw;
            height: 35vw;
            max-width: 450px;
            max-height: 450px;
            background: #d8cfb9;
            bottom: 5%;
            right: 8%;
        }

        /* Canvas 层 */
        #particleCanvas {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 1;
        }

        /* 主卡片 */
        .card-wrapper {
            position: relative;
            z-index: 10;
            perspective: 1000px;
        }

        .card {
            position: relative;
            background: rgba(255, 255, 255, 0.6);
            backdrop-filter: blur(18px);
            -webkit-backdrop-filter: blur(18px);
            border: 1px solid rgba(200, 180, 150, 0.3);
            border-radius: 32px;
            padding: clamp(30px, 5vw, 48px) clamp(28px, 6vw, 56px);
            text-align: center;
            box-shadow:
                0 6px 30px rgba(80, 60, 40, 0.08),
                0 0 0 1px rgba(255, 250, 245, 0.5) inset,
                0 0 50px rgba(200, 170, 130, 0.15);
            animation: cardSoftFloat 6s ease-in-out infinite;
            transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1.2),
                box-shadow 0.4s ease;
            max-width: 92vw;
            cursor: default;
        }

        .card:hover {
            transform: translateY(-4px);
            box-shadow:
                0 12px 40px rgba(80, 60, 40, 0.12),
                0 0 0 1px rgba(255, 250, 245, 0.7) inset,
                0 0 70px rgba(200, 170, 130, 0.25);
        }

        .card:active {
            transform: translateY(-1px) scale(0.985);
            transition: transform 0.1s ease, box-shadow 0.1s ease;
            box-shadow:
                0 4px 20px rgba(80, 60, 40, 0.1),
                0 0 0 1px rgba(255, 250, 245, 0.6) inset;
        }

        @keyframes cardSoftFloat {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-6px); }
        }

        /* 卡片内部装饰线 */
        .card::before {
            content: '';
            position: absolute;
            top: 15px;
            left: 50%;
            transform: translateX(-50%);
            width: 60px;
            height: 2px;
            background: #dac29c;
            border-radius: 2px;
            opacity: 0.35;
            pointer-events: none;
        }

        /* 装饰小元素（小太阳、云朵） */
        .decor-icon {
            position: absolute;
            pointer-events: none;
            z-index: 2;
            font-size: 22px;
            animation: gentleFloat 4s ease-in-out infinite;
            opacity: 0.5;
        }
        .decor-icon--1 { top: -20px; left: 15%; animation-delay: 0s; font-size: 24px; }
        .decor-icon--2 { top: 35%; right: -24px; animation-delay: -1.5s; font-size: 18px; }
        .decor-icon--3 { bottom: -18px; left: 40%; animation-delay: -0.8s; font-size: 20px; }
        .decor-icon--4 { top: 15%; left: -22px; animation-delay: -2s; font-size: 17px; }

        @keyframes gentleFloat {
            0%, 100% { transform: translateY(0) scale(1); opacity: 0.45; }
            50% { transform: translateY(-8px) scale(1.08); opacity: 0.7; }
        }

        /* 文字样式 */
        .label-text {
            font-size: clamp(16px, 2.2vw, 19px);
            color: #7b6e60;
            letter-spacing: 0.1em;
            margin-bottom: 8px;
            font-weight: 400;
        }

        .days-number {
            font-family: 'Quicksand', 'PingFang SC', 'KaiTi', sans-serif;
            font-size: clamp(64px, 11vw, 120px);
            font-weight: 500;
            color: #4a3f35;
            line-height: 1;
            letter-spacing: 0.02em;
            text-shadow: 0 2px 10px rgba(180, 140, 100, 0.2);
            transition: transform 0.3s ease;
            display: inline-block;
        }

        .days-unit {
            font-size: clamp(18px, 3vw, 28px);
            color: #8b7b68;
            letter-spacing: 0.04em;
            margin-top: 4px;
            font-weight: 400;
        }

        .divider {
            width: 50px;
            height: 2px;
            background: linear-gradient(90deg, transparent, #c7a97b, transparent);
            margin: 18px auto;
            border-radius: 1px;
            opacity: 0.6;
        }

        .date-text {
            font-size: clamp(15px, 2vw, 18px);
            color: #8b7a65;
            letter-spacing: 0.08em;
            font-weight: 400;
        }

        .friend-icon {
            display: inline-block;
            font-size: clamp(20px, 3vw, 28px);
            margin: 0 5px;
            vertical-align: middle;
            animation: softPulse 3s ease-in-out infinite;
        }
        @keyframes softPulse {
            0%, 100% { transform: scale(1); opacity: 0.75; }
            50% { transform: scale(1.1); opacity: 1; }
        }

        /* 响应式 */
        @media (max-width: 600px) {
            .card {
                padding: 26px 22px;
                border-radius: 24px;
            }
            .decor-icon { font-size: 16px; }
            .decor-icon--1 { font-size: 18px; top: -16px; left: 12%; }
            .decor-icon--2 { font-size: 13px; right: -16px; }
            .decor-icon--3 { font-size: 15px; bottom: -14px; left: 35%; }
            .decor-icon--4 { font-size: 12px; left: -14px; }
            .bg-soft-glow--1 { width: 60vw; height: 60vw; }
            .bg-soft-glow--2 { width: 55vw; height: 55vw; }
        }

        @media (max-width: 380px) {
            .card { padding: 20px 14px; border-radius: 18px; }
            .days-number { font-size: 50px; }
            .label-text { font-size: 14px; }
            .days-unit { font-size: 16px; }
            .date-text { font-size: 13px; }
        }
    </style>
</head>
<body>

    <!-- 背景柔和光晕 -->
    <div class="bg-soft-glow bg-soft-glow--1"></div>
    <div class="bg-soft-glow bg-soft-glow--2"></div>

    <!-- 粒子画布：轻盈光点与柔软飘浮物 -->
    <canvas id="particleCanvas"></canvas>

    <!-- 主卡片 -->
    <div class="card-wrapper">
        <div class="card" id="mainCard">
            <!-- 装饰图标：小太阳、云、叶子 -->
            <span class="decor-icon decor-icon--1">☀️</span>
            <span class="decor-icon decor-icon--2">☁️</span>
            <span class="decor-icon decor-icon--3">🍃</span>
            <span class="decor-icon decor-icon--4">✨</span>

            <p class="label-text">我们成为好朋友已经</p>
            <div class="days-number" id="daysCount">--</div>
            <p class="days-unit">天</p>
            <div class="divider"></div>
            <p class="date-text">
                <span class="friend-icon">🤝</span> 2024.04.20 <span class="friend-icon">🤝</span>
            </p>
        </div>
    </div>

    <script>
        (function() {
            // ============ 天数计算 ============
            const START_DATE = new Date(2024, 3, 20); // 2024年4月20日
            const now = new Date();
            const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
            const diffTime = today - START_DATE;
            const diffDays = Math.max(0, Math.floor(diffTime / (1000 * 60 * 60 * 24)));

            const daysEl = document.getElementById('daysCount');
            daysEl.textContent = diffDays;

            // 入场微小动画
            function animateNumber() {
                daysEl.style.transform = 'scale(1.1)';
                daysEl.style.transition = 'transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275)';
                setTimeout(() => {
                    daysEl.style.transform = 'scale(1)';
                }, 500);
            }
            setTimeout(animateNumber, 350);

            // ============ Canvas 粒子系统（柔和光点与飘浮叶片） ============
            const canvas = document.getElementById('particleCanvas');
            const ctx = canvas.getContext('2d');

            let canvasWidth = window.innerWidth;
            let canvasHeight = window.innerHeight;
            let dpr = Math.min(window.devicePixelRatio || 1, 2);

            function resizeCanvas() {
                canvasWidth = window.innerWidth;
                canvasHeight = window.innerHeight;
                canvas.width = canvasWidth * dpr;
                canvas.height = canvasHeight * dpr;
                canvas.style.width = canvasWidth + 'px';
                canvas.style.height = canvasHeight + 'px';
                ctx.setTransform(1, 0, 0, 1, 0, 0);
                ctx.scale(dpr, dpr);
            }
            resizeCanvas();
            window.addEventListener('resize', () => {
                resizeCanvas();
                adjustParticleCounts();
            });

            // 温暖光点类
            class SoftDot {
                constructor() {
                    this.reset(true);
                }
                reset(initial) {
                    this.x = Math.random() * canvasWidth;
                    this.y = initial ? Math.random() * canvasHeight : Math.random() * canvasHeight;
                    this.size = Math.random() * 2.5 + 1;
                    this.baseOpacity = Math.random() * 0.25 + 0.15;
                    this.opacity = this.baseOpacity;
                    this.floatSpeed = Math.random() * 0.02 + 0.008;
                    this.floatAmp = Math.random() * 15 + 4;
                    this.floatOffset = Math.random() * Math.PI * 2;
                    this.initialY = this.y;
                    this.driftX = (Math.random() - 0.5) * 0.15;
                }
                update(time) {
                    this.opacity = this.baseOpacity + Math.sin(time * 0.05 + this.floatOffset) * 0.1;
                    this.y = this.initialY + Math.sin(time * this.floatSpeed + this.floatOffset) * this.floatAmp;
                    this.x += this.driftX;
                    if (this.x > canvasWidth + 20) this.x = -20;
                    if (this.x < -20) this.x = canvasWidth + 20;
                    if (this.y > canvasHeight + 30) { this.y = -10; this.initialY = this.y; }
                    if (this.y < -30) { this.y = canvasHeight + 10; this.initialY = this.y; }
                }
                draw(ctx) {
                    ctx.save();
                    ctx.globalAlpha = this.opacity;
                    ctx.translate(this.x, this.y);
                    const gradient = ctx.createRadialGradient(0,0,0,0,0,this.size);
                    gradient.addColorStop(0, 'rgba(220,200,160,0.9)');
                    gradient.addColorStop(0.6, 'rgba(200,180,140,0.25)');
                    gradient.addColorStop(1, 'rgba(180,150,100,0)');
                    ctx.fillStyle = gradient;
                    ctx.beginPath();
                    ctx.arc(0,0,this.size,0,Math.PI*2);
                    ctx.fill();
                    ctx.restore();
                }
            }

            // 小叶片类（代替花瓣）
            class TinyLeaf {
                constructor() {
                    this.reset(true);
                }
                reset(initial) {
                    this.x = Math.random() * canvasWidth;
                    this.y = initial ? Math.random() * -canvasHeight * 0.5 : -20 - Math.random() * 50;
                    this.size = Math.random() * 10 + 5;
                    this.rotation = Math.random() * Math.PI * 2;
                    this.rotSpeed = (Math.random() - 0.5) * 0.02;
                    this.swayAmp = Math.random() * 30 + 10;
                    this.swayFreq = Math.random() * 0.01 + 0.004;
                    this.swayOffset = Math.random() * Math.PI * 2;
                    this.fallSpeed = Math.random() * 0.9 + 0.4;
                    this.opacity = Math.random() * 0.18 + 0.12;
                    this.color = {
                        r: 160 + Math.floor(Math.random()*30),
                        g: 155 + Math.floor(Math.random()*35),
                        b: 110 + Math.floor(Math.random()*30)
                    };
                }
                update(time) {
                    this.y += this.fallSpeed;
                    this.rotation += this.rotSpeed;
                    const swayX = Math.sin(time * this.swayFreq + this.swayOffset) * this.swayAmp;
                    this.currentX = this.x + swayX;
                    if (this.y > canvasHeight + 50) {
                        this.y = -40 - Math.random()*40;
                        this.x = Math.random() * canvasWidth;
                    }
                    if (this.currentX < -50 || this.currentX > canvasWidth + 50) {
                        this.x = Math.random() * canvasWidth;
                    }
                }
                draw(ctx) {
                    ctx.save();
                    ctx.globalAlpha = this.opacity;
                    ctx.translate(this.currentX, this.y);
                    ctx.rotate(this.rotation);
                    const w = this.size;
                    const h = this.size * 0.5;
                    ctx.beginPath();
                    ctx.moveTo(0, -h/2);
                    ctx.bezierCurveTo(w/2.5, -h/3, w/2.8, h/3.5, 0, h/2);
                    ctx.bezierCurveTo(-w/2.8, h/3.5, -w/2.5, -h/3, 0, -h/2);
                    ctx.closePath();
                    ctx.fillStyle = `rgba(${this.color.r},${this.color.g},${this.color.b},${this.opacity})`;
                    ctx.fill();
                    ctx.restore();
                }
            }

            let softDots = [];
            let leaves = [];
            let DOT_COUNT = 55;
            let LEAF_COUNT = 12;

            function adjustParticleCounts() {
                if (canvasWidth < 400) {
                    DOT_COUNT = 30; LEAF_COUNT = 6;
                } else if (canvasWidth < 768) {
                    DOT_COUNT = 42; LEAF_COUNT = 9;
                } else {
                    DOT_COUNT = 55; LEAF_COUNT = 12;
                }
                while (softDots.length < DOT_COUNT) softDots.push(new SoftDot());
                while (softDots.length > DOT_COUNT) softDots.pop();
                while (leaves.length < LEAF_COUNT) leaves.push(new TinyLeaf());
                while (leaves.length > LEAF_COUNT) leaves.pop();
            }

            function initParticles() {
                adjustParticleCounts();
                softDots = [];
                leaves = [];
                for (let i=0; i<DOT_COUNT; i++) softDots.push(new SoftDot());
                for (let i=0; i<LEAF_COUNT; i++) leaves.push(new TinyLeaf());
            }
            initParticles();

            let animTime = 0;
            let lastTime = performance.now();

            function animate(timestamp) {
                const dt = Math.min(timestamp - lastTime, 50);
                lastTime = timestamp;
                animTime += dt * 0.05;
                ctx.clearRect(0,0,canvasWidth,canvasHeight);
                for (let dot of softDots) { dot.update(animTime); dot.draw(ctx); }
                for (let leaf of leaves) { leaf.update(animTime); leaf.draw(ctx); }
                requestAnimationFrame(animate);
            }
            requestAnimationFrame(animate);

            // 卡片点击互动：轻柔光点扩散
            const card = document.getElementById('mainCard');
            card.addEventListener('click', (e) => {
                daysEl.style.transform = 'scale(1.1)';
                daysEl.style.transition = 'transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275)';
                setTimeout(() => { daysEl.style.transform = 'scale(1)'; }, 300);

                // 短暂增加几个光点
                const extraDots = [];
                const rect = card.getBoundingClientRect();
                const cx = rect.left + rect.width/2;
                const cy = rect.top + rect.height/2;
                for (let i=0; i<8; i++) {
                    const dot = new SoftDot();
                    dot.x = cx + (Math.random()-0.5)*200;
                    dot.y = cy + (Math.random()-0.5)*150;
                    dot.size = Math.random()*3+1;
                    dot.opacity = 0.4;
                    extraDots.push(dot);
                }
                const origDots = softDots;
                softDots = [...origDots, ...extraDots];
                setTimeout(() => { softDots = origDots; }, 2000);
            });

            console.log(`☀️ 友谊纪念日 | ${diffDays}天 | 2024.04.20 → ${today.getFullYear()}.${String(today.getMonth()+1).padStart(2,'0')}.${String(today.getDate()).padStart(2,'0')}`);
        })();
    </script>
</body>
</html>