<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style>
        html {
            margin: 0;
            padding: 0;
        }
        
        body {
            margin: 0;
            padding: 0;
            width: 1080px;
            background:#e9ecef 50%;
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
            position: relative;
            overflow: hidden;
        }
        
        .page-container {
            width: 1080px;
            height: 1920px;
            padding: 80px 70px 75px 70px;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            position: relative;
            z-index: 1;
        }
        
        /* 优雅纹理 */
        .elegant-texture {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0.04;
            background-image: 
                radial-gradient(circle at 25% 30%, rgba(45, 55, 72, 0.08) 1px, transparent 1px),
                radial-gradient(circle at 75% 70%, rgba(45, 55, 72, 0.06) 1px, transparent 1px);
            background-size: 90px 90px, 120px 120px;
            z-index: 0;
        }
        
        /* 背景装饰 */
        .bg-decoration {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
            overflow: hidden;
            pointer-events: none;
        }
        
        /* 对称圆环装饰 */
        .zen-circle {
            position: absolute;
            border-radius: 50%;
            border: 2px solid;
        }
        
        .circle-1 {
            width: 400px;
            height: 400px;
            top: 12%;
            left: -120px;
            border-color: rgba(45, 55, 72, 0.08);
        }
        
        .circle-2 {
            width: 350px;
            height: 350px;
            top: 45%;
            right: -100px;
            border-color: rgba(74, 85, 104, 0.06);
        }
        
        .circle-3 {
            width: 300px;
            height: 300px;
            bottom: 18%;
            left: -80px;
            border-color: rgba(45, 55, 72, 0.07);
        }
        
        /* 渐变光晕 */
        .soft-glow {
            position: absolute;
            border-radius: 50%;
            filter: blur(60px);
        }
        
        .glow-1 {
            width: 450px;
            height: 450px;
            top: -120px;
            right: -120px;
            background: radial-gradient(circle, rgba(99, 102, 241, 0.06), transparent 70%);
        }
        
        .glow-2 {
            width: 400px;
            height: 400px;
            bottom: -80px;
            left: -80px;
            background: radial-gradient(circle, rgba(79, 70, 229, 0.05), transparent 70%);
        }
        
        /* 标题区域 */
        .topic-wrapper {
            position: relative;
            text-align: center;
            padding: 35px 0;
        }
        
        /* 顶部优雅分界线 */
        .top-divider {
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 420px;
            height: 3px;
            background: linear-gradient(90deg, 
                transparent 0%, 
                rgba(45, 55, 72, 0.15) 15%,
                rgba(74, 85, 104, 0.25) 35%,
                rgba(99, 102, 241, 0.3) 50%,
                rgba(74, 85, 104, 0.25) 65%,
                rgba(45, 55, 72, 0.15) 85%,
                transparent 100%);
            border-radius: 2px;
        }
        
        /* 对称装饰点 */
        .top-divider::before,
        .top-divider::after {
            content: '';
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: radial-gradient(circle at 35% 35%, rgba(99, 102, 241, 0.5), rgba(79, 70, 229, 0.4));
            box-shadow: 0 0 12px rgba(99, 102, 241, 0.3);
        }
        
        .top-divider::before {
            left: 20%;
        }
        
        .top-divider::after {
            right: 20%;
        }
        
        .topic {
            font-size: 82px;
            font-weight: 800;
            background: linear-gradient(135deg, 
                #1e293b 0%, 
                #334155 25%, 
                #475569 45%,
                #6366f1 55%,
                #475569 70%,
                #334155 85%,
                #1e293b 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            line-height: 1.25;
            letter-spacing: 4px;
            padding: 30px 0;
            position: relative;
            display: inline-block;
            filter: drop-shadow(0 2px 12px rgba(99, 102, 241, 0.15));
        }
        
        /* 标题对称装饰点 */
        .title-accent {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: linear-gradient(135deg, rgba(99, 102, 241, 0.6), rgba(79, 70, 229, 0.5));
            box-shadow: 0 0 15px rgba(99, 102, 241, 0.4);
        }
        
        .title-accent.left {
            left: -25px;
        }
        
        .title-accent.right {
            right: -25px;
        }
        
        /* 图片区域 */
        .image-wrapper {
            position: relative;
            padding: 25px;
        }
        
        .image-frame-bg {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, 
                rgba(255, 255, 255, 0.95) 0%, 
                rgba(255, 255, 255, 0.98) 50%, 
                rgba(255, 255, 255, 0.95) 100%);
            border-radius: 30px;
            border: 1px solid rgba(99, 102, 241, 0.12);
            box-shadow: 
                0 0 0 1px rgba(255, 255, 255, 0.8),
                0 20px 60px rgba(99, 102, 241, 0.08),
                0 8px 25px rgba(79, 70, 229, 0.05),
                inset 0 1px 2px rgba(255, 255, 255, 0.9);
            z-index: 0;
        }
        
        .image-container {
            width: 100%;
            height: 900px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            z-index: 1;
        }
        
        .image-container img {
            width: 100%;
            height: 100%;
            border-radius: 25px;
            object-fit: cover;
            box-shadow: 
                0 15px 45px rgba(45, 55, 72, 0.08),
                0 5px 15px rgba(99, 102, 241, 0.05);
        }
        
        /* 四角对称L型装饰 */
        .corner-zen {
            position: absolute;
            z-index: 2;
        }
        
        .corner-zen::before,
        .corner-zen::after {
            content: '';
            position: absolute;
            background: linear-gradient(135deg, rgba(99, 102, 241, 0.35), rgba(79, 70, 229, 0.3));
            border-radius: 2px;
        }
        
        .corner-zen.tl {
            top: 12px;
            left: 12px;
            width: 45px;
            height: 45px;
        }
        
        .corner-zen.tl::before {
            width: 45px;
            height: 3px;
            top: 0;
            left: 0;
        }
        
        .corner-zen.tl::after {
            width: 3px;
            height: 45px;
            top: 0;
            left: 0;
        }
        
        .corner-zen.tr {
            top: 12px;
            right: 12px;
            width: 45px;
            height: 45px;
        }
        
        .corner-zen.tr::before {
            width: 45px;
            height: 3px;
            top: 0;
            right: 0;
        }
        
        .corner-zen.tr::after {
            width: 3px;
            height: 45px;
            top: 0;
            right: 0;
        }
        
        .corner-zen.bl {
            bottom: 12px;
            left: 12px;
            width: 45px;
            height: 45px;
        }
        
        .corner-zen.bl::before {
            width: 45px;
            height: 3px;
            bottom: 0;
            left: 0;
        }
        
        .corner-zen.bl::after {
            width: 3px;
            height: 45px;
            bottom: 0;
            left: 0;
        }
        
        .corner-zen.br {
            bottom: 12px;
            right: 12px;
            width: 45px;
            height: 45px;
        }
        
        .corner-zen.br::before {
            width: 45px;
            height: 3px;
            bottom: 0;
            right: 0;
        }
        
        .corner-zen.br::after {
            width: 3px;
            height: 45px;
            bottom: 0;
            right: 0;
        }
        
        /* 侧边对称点装饰 */
        .side-dots {
            position: absolute;
            display: flex;
            flex-direction: column;
            gap: 16px;
            z-index: 2;
        }
        
        .side-dots.left {
            left: -2px;
            top: 50%;
            transform: translateY(-50%);
        }
        
        .side-dots.right {
            right: -2px;
            top: 50%;
            transform: translateY(-50%);
        }
        
        .zen-dot {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: linear-gradient(135deg, rgba(99, 102, 241, 0.5), rgba(79, 70, 229, 0.4));
            box-shadow: 0 0 10px rgba(99, 102, 241, 0.3);
        }
        
        .zen-dot.large {
            width: 11px;
            height: 11px;
            background: linear-gradient(135deg, rgba(99, 102, 241, 0.7), rgba(79, 70, 229, 0.6));
            box-shadow: 0 0 15px rgba(99, 102, 241, 0.5);
        }
        
        /* 文字区域 */
        .text-wrapper {
            position: relative;
            padding: 45px 0;
        }
        
        .text-bg {
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 92%;
            height: 100%;
            background: linear-gradient(135deg, 
                rgba(255, 255, 255, 0.92) 0%, 
                rgba(255, 255, 255, 0.95) 50%,
                rgba(255, 255, 255, 0.92) 100%);
            border-radius: 25px;
            border: 1px solid rgba(99, 102, 241, 0.1);
            box-shadow: 
                0 0 0 1px rgba(255, 255, 255, 0.7),
                0 15px 45px rgba(99, 102, 241, 0.06),
                0 5px 15px rgba(79, 70, 229, 0.04),
                inset 0 1px 2px rgba(255, 255, 255, 0.8);
            z-index: 0;
        }
        
        .text {
            font-size: 48px;
            color: #2d3748;
            text-align: center;
            line-height: 1.75;
            padding: 40px 85px;
            position: relative;
            height: 237.6px;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1;
            letter-spacing: 1px;
            font-weight: 500;
        }
        
        /* 引号装饰 */
        .quote-mark {
            position: absolute;
            font-size: 70px;
            font-weight: 300;
            font-family: Georgia, serif;
            opacity: 0.1;
            z-index: 0;
            background: linear-gradient(135deg, rgba(99, 102, 241, 0.8), rgba(79, 70, 229, 0.7));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        .quote-mark.open {
            top: 20px;
            left: 65px;
        }
        
        .quote-mark.close {
            bottom: 20px;
            right: 65px;
        }
        
        /* 侧边对称线条 */
        .side-line {
            position: absolute;
            width: 2px;
            height: 150px;
            top: 50%;
            transform: translateY(-50%);
            background: linear-gradient(180deg, 
                transparent 0%,
                rgba(99, 102, 241, 0.2) 15%,
                rgba(79, 70, 229, 0.25) 50%,
                rgba(99, 102, 241, 0.2) 85%,
                transparent 100%);
            border-radius: 2px;
            z-index: 1;
        }
        
        .side-line.left {
            left: 50px;
        }
        
        .side-line.right {
            right: 50px;
        }
        
        /* 对称圆点组 */
        .side-line::before,
        .side-line::after {
            content: '';
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: linear-gradient(135deg, rgba(99, 102, 241, 0.5), rgba(79, 70, 229, 0.4));
            box-shadow: 0 0 10px rgba(99, 102, 241, 0.3);
        }
        
        .side-line::before {
            top: -3px;
        }
        
        .side-line::after {
            bottom: -3px;
        }
        
        /* 页脚 */
        .footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 32px 15px;
            position: relative;
        }
        
        /* 对称分隔线 */
        .footer::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: linear-gradient(90deg, 
                transparent 0%, 
                rgba(99, 102, 241, 0.2) 15%,
                rgba(79, 70, 229, 0.25) 35%,
                rgba(99, 102, 241, 0.3) 50%,
                rgba(79, 70, 229, 0.25) 65%,
                rgba(99, 102, 241, 0.2) 85%,
                transparent 100%);
            border-radius: 2px;
        }
        
        .footer::after {
            content: '';
            position: absolute;
            top: -5px;
            left: 50%;
            transform: translateX(-50%);
            width: 120px;
            height: 12px;
            background: radial-gradient(ellipse, 
                rgba(99, 102, 241, 0.15) 0%, 
                transparent 70%);
            border-radius: 50%;
        }
        
        .author {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        
        .author-name {
            font-size: 38px;
            font-weight: 700;
            background: linear-gradient(135deg, 
                #1e293b 0%, 
                #334155 40%,
                #6366f1 60%,
                #334155 80%,
                #1e293b 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            display: flex;
            align-items: center;
            gap: 12px;
        }
        
        /* 作者装饰点组 */
        .author-dots {
            display: flex;
            gap: 6px;
            align-items: center;
        }
        
        .author-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: linear-gradient(135deg, rgba(99, 102, 241, 0.6), rgba(79, 70, 229, 0.5));
        }
        
        .author-dot.large {
            width: 12px;
            height: 12px;
            background: linear-gradient(135deg, rgba(99, 102, 241, 0.8), rgba(79, 70, 229, 0.7));
            box-shadow: 0 0 12px rgba(99, 102, 241, 0.4);
        }
        
        .author-desc {
            font-size: 27px;
            color: #718096;
            line-height: 1.4;
            font-weight: 400;
        }
        
        /* Logo区域 */
        .logo-wrapper {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: 10px;
        }
        
        .logo {
            font-size: 30px;
            font-weight: 700;
            background: linear-gradient(135deg, 
                #6366f1 0%, 
                #4f46e5 50%,
                #6366f1 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            letter-spacing: 1.5px;
            position: relative;
            padding-right: 28px;
        }
        
        .logo::after {
            content: '';
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: linear-gradient(135deg, #6366f1, #4f46e5);
            box-shadow: 0 0 15px rgba(99, 102, 241, 0.5);
        }
        
        /* 对称指示条 */
        .zen-bars {
            display: flex;
            gap: 6px;
            align-items: center;
        }
        
        .zen-bar {
            height: 3px;
            border-radius: 2px;
        }
        
        .zen-bar:nth-child(1) {
            width: 38px;
            background: linear-gradient(90deg, 
                rgba(99, 102, 241, 0.6), 
                rgba(79, 70, 229, 0.5));
        }
        
        .zen-bar:nth-child(2) {
            width: 28px;
            background: linear-gradient(90deg, 
                rgba(99, 102, 241, 0.5), 
                rgba(79, 70, 229, 0.4));
            opacity: 0.8;
        }
        
        .zen-bar:nth-child(3) {
            width: 18px;
            background: linear-gradient(90deg, 
                rgba(99, 102, 241, 0.4), 
                rgba(79, 70, 229, 0.35));
            opacity: 0.6;
        }
        
    </style>
</head>
<body>
    <!-- 优雅纹理 -->
    <div class="elegant-texture"></div>
    
    <!-- 背景装饰元素 -->
    <div class="bg-decoration">
        <!-- 对称圆环 -->
        <div class="zen-circle circle-1"></div>
        <div class="zen-circle circle-2"></div>
        <div class="zen-circle circle-3"></div>
        
        <!-- 渐变光晕 -->
        <div class="soft-glow glow-1"></div>
        <div class="soft-glow glow-2"></div>
    </div>
    
    <div class="page-container">
        <!-- 标题区域 -->
        <div class="topic-wrapper">
            <div class="top-divider"></div>
            <div class="title-accent left"></div>
            <div class="title-accent right"></div>
            <div class="topic">{{title}}</div>
        </div>
        
        <!-- 图片区域 -->
        <div class="image-wrapper">
            <div class="image-frame-bg"></div>
            
            <!-- 四角装饰 -->
            <div class="corner-zen tl"></div>
            <div class="corner-zen tr"></div>
            <div class="corner-zen bl"></div>
            <div class="corner-zen br"></div>
            
            <!-- 侧边对称点 -->
            <div class="side-dots left">
                <div class="zen-dot"></div>
                <div class="zen-dot large"></div>
                <div class="zen-dot"></div>
            </div>
            <div class="side-dots right">
                <div class="zen-dot"></div>
                <div class="zen-dot large"></div>
                <div class="zen-dot"></div>
            </div>
            
            <div class="image-container">
                <img src="{{image}}" alt="Frame Image">
            </div>
        </div>
        
        <!-- 文字区域 -->
        <div class="text-wrapper">
            <div class="text-bg"></div>
            <div class="quote-mark open">"</div>
            <div class="quote-mark close">"</div>
            <div class="side-line left"></div>
            <div class="side-line right"></div>
            <div class="text">{{text}}</div>
        </div>
        
        <!-- 页脚区域 -->
        <div class="footer">
            <div class="author">
                <div class="author-name">
                    <div class="author-dots">
                        <div class="author-dot"></div>
                        <div class="author-dot large"></div>
                        <div class="author-dot"></div>
                    </div>
                </div>
            </div>
            <div class="logo-wrapper">
                <div class="zen-bars">
                    <div class="zen-bar"></div>
                    <div class="zen-bar"></div>
                    <div class="zen-bar"></div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
