<!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>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: "Microsoft YaHei", sans-serif;
            overflow: hidden;
            background: #000;
            height: 100vh;
            width: 100vw;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        .bg-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url('https://picsum.photos/1080/1920?sunset') no-repeat center center / cover;
            filter: brightness(0.8);
            z-index: -2;
        }
        .overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.3);
            z-index: -1;
        }
        .header-text {
            position: absolute;
            top: 20px;
            width: 100%;
            text-align: center;
            color: white;
            font-size: 20px;
            text-shadow: 0 0 10px rgba(255,255,255,0.5);
            z-index: 10;
        }
        /* 花瓣动画 */
        .petal {
            position: absolute;
            top: -10px;
            width: 10px;
            height: 10px;
            background: #ffc0cb;
            border-radius: 50%;
            opacity: 0.8;
            animation: fall linear infinite;
            z-index: 5;
        }
        @keyframes fall {
            0% {
                transform: translateY(0) rotate(0deg);
                opacity: 0.8;
            }
            100% {
                transform: translateY(100vh) rotate(360deg);
                opacity: 0;
            }
        }
        /* 信封样式 */
        .envelope {
            position: relative;
            width: 70vw;
            max-width: 400px;
            aspect-ratio: 4/3;
            background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
            border-radius: 10px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
            display: flex;
            align-items: center;
            justify-content: center;
            animation: float 3s ease-in-out infinite;
        }
        .envelope::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to bottom right, transparent 49%, #ff7a85 50%, transparent 51%);
            border-radius: 10px;
        }
        .envelope::after {
            content: '';
            position: absolute;
            width: 40px;
            height: 40px;
            background: radial-gradient(circle, #ff3333 0%, #cc0000 100%);
            border-radius: 50%;
            box-shadow: 0 0 10px rgba(255,0,0,0.5);
        }
        @keyframes float {
            0%, 100% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-10px);
            }
        }
        /* 底部玫瑰装饰 */
        .roses {
            position: absolute;
            bottom: 30px;
            width: 100%;
            display: flex;
            justify-content: center;
            gap: 20px;
            padding-bottom: 10px;
            z-index: 3;
        }
        .rose {
            width: 60px;
            height: auto;
            filter: drop-shadow(0 5px 10px rgba(0,0,0,0.3));
        }
        /* 备案号样式 */
        .beian {
            position: fixed;
            bottom: 8px;
            left: 0;
            right: 0;
            text-align: center;
            font-size: 12px;
            color: #ffffff;
            opacity: 0.8;
            z-index: 999;
        }
        .beian a {
            color: #ffffff;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <div class="bg-container"></div>
    <div class="overlay"></div>

    <div class="header-text">愿你每天都有好心情</div>

    <div class="envelope"></div>

    <div class="roses">
        <svg class="rose" viewBox="0 0 100 150" fill="#b91c1c">
            <path d="M50,10 C60,30 80,50 70,80 C60,110 50,130 50,150 C50,130 40,110 30,80 C20,50 40,30 50,10Z" />
            <ellipse cx="35" cy="120" rx="15" ry="10" fill="#166534" />
            <ellipse cx="65" cy="130" rx="15" ry="10" fill="#166534" />
        </svg>
        <svg class="rose" viewBox="0 0 100 150" fill="#fda4af">
            <path d="M50,10 C60,30 80,50 70,80 C60,110 50,130 50,150 C50,130 40,110 30,80 C20,50 40,30 50,10Z" />
            <ellipse cx="35" cy="120" rx="15" ry="10" fill="#166534" />
            <ellipse cx="65" cy="130" rx="15" ry="10" fill="#166534" />
        </svg>
    </div>

    <!-- 备案号位置，备案下来后替换文字 -->
    <div class="beian">
        <a href="https://beian.miit.gov.cn/" target="_blank">
            粤ICP备2026061741号-1
        </a>
    </div>

    <script>
        // 生成飘落花瓣
        function createPetals() {
            const count = 30;
            for (let i = 0; i < count; i++) {
                const petal = document.createElement('div');
                petal.className = 'petal';
                petal.style.left = `${Math.random() * 100}vw`;
                petal.style.animationDuration = `${Math.random() * 5 + 5}s`;
                petal.style.animationDelay = `${Math.random() * 10}s`;
                document.body.appendChild(petal);
            }
        }
        createPetals();
    </script>
</body>
</html>