Instrução
请按照这个JSON结构中的规范，使用我的HTML示例模板为[具体主题]生成内容页面：
{
"visual_design": {
"style": "Magazine Layout",
"theme": "浅色，类似发黄的信纸色",
"atmosphere": "现代高端氛围"
},
"typography": {
"core_highlight": "超大字体或数字突出核心要点",
"chinese": {
"size": "大号粗体",
"effect": "强调视觉冲击力"
},
"english": {
"size": "小号字体",
"role": "点缀",
"contrast": "与中文形成比例反差，提升设计层次感"
}
},
"visual_elements": {
"large_elements": "超大视觉元素（标题、背景图或装饰）突出重点",
"contrast": "与小型元素形成强烈对比",
"graphics": "简洁的勾线风格图形（用于数据可视化或配图），保持现代感和清晰度"
},
"colors_and_effects": {
"highlight": "高亮色（单色透明度渐变）营造科技感",
"usage_rule": "每种高亮色独立使用，避免不同高亮色之间的渐变混杂"
},
"technical_requirements": {
"icons": {
"library": ["Font Awesome", "Material Icons"],
"load_method": "CDN",
"note": "避免使用emoji作为主要图标"
}
},
"content": {
"requirement": "完整呈现所有内容要点，不省略任何信息",
"language": "中文为主展示"
},
"layout": {
"scrolling": "支持滚动"
}
}
HTML示例模板：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{PAGE_TITLE}}</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
/* 标题字体：思源宋体（Noto Serif SC） */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;700;900&display=swap');
/* 正文字体：霞鹜文楷（LXGW WenKai） */
@import url("https://cdn.jsdelivr.net/gh/lxgw/LxgwWenKai/Webfont/lxgwwenkai.css");
/* 英文字体：Inter（保留原设计） */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "LXGW WenKai", serif;
font-weight: 400;
background: linear-gradient(135deg, #f9f6f0 0%, #f3ede1 100%);
color: #2c2419;
line-height: 1.6;
overflow-x: hidden;
}
.magazine-container {
width: 1400px;
min-height: 1800px;
margin: 0 auto;
padding: 60px;
background: #fbf8f2;
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
position: relative;
}
.header {
text-align: center;
margin-bottom: 40px;
position: relative;
}
.main-title {
font-size: 96px;
font-family: 'Noto Serif SC', serif;
font-weight: 900;
color: #1a1611;
margin-bottom: 15px;
letter-spacing: -2px;
text-shadow: 2px 2px 0px rgba(255,165,0,0.3);
}
.subtitle {
font-family: 'Inter', sans-serif;
font-weight: 300;
letter-spacing: 3px;
font-size: 22px;
color: #8b7355;
text-transform: uppercase;
}
.quote-mark {
position: absolute;
font-size: 200px;
color: rgba(255,165,0,0.15);
top: -80px;
left: -40px;
font-family: serif;
}
/* 双栏布局 */
.content-grid {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 40px;
margin-bottom: 30px;
}
/* 观察框/侧边栏样式 */
.observation-box {
font-size: 36px;
background: linear-gradient(135deg, rgba(255,165,0,0.1) 0%, rgba(255,140,0,0.05) 100%);
padding: 30px;
border-left: 6px solid #ff8c00;
border-radius: 0 10px 10px 0;
}
.observation-title {
font-family: 'Noto Serif SC', serif;
font-size: 40px;
font-weight: 700;
color: #d2691e;
margin-bottom: 15px;
display: flex;
align-items: center;
gap: 10px;
}
/* 主要内容区域 */
.main-content {
font-size: 36px;
line-height: 1.8;
}
/* 高亮区域样式 */
.highlight-section {
background: linear-gradient(135deg, rgba(70,130,180,0.1) 0%, rgba(100,149,237,0.05) 100%);
padding: 25px;
margin: 25px 0;
border-radius: 10px;
border-left: 4px solid #4682b4;
}
/* 三栏卡片布局 */
.three-column-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin: 30px 0;
}
.card {
background: white;
padding: 20px;
border-radius: 10px;
text-align: center;
box-shadow: 0 5px 15px rgba(0,0,0,0.08);
border-top: 4px solid #ff6b6b;
transition: transform 0.3s ease;
}
.card:hover {
transform: translateY(-5px);
}
.card-number {
font-size: 70px;
font-weight: 900;
color: #ff6b6b;
margin-bottom: 10px;
opacity: 0.8;
}
.card-title {
font-size: 36px;
font-weight: 700;
margin-bottom: 8px;
color: #333;
}
.card-desc {
font-size: 30px;
color: #666;
line-height: 1.5;
}
/* 统计数据展示 */
.stats-section {
display: flex;
justify-content: space-between;
margin: 30px 0;
background: white;
padding: 25px;
border-radius: 15px;
box-shadow: 0 8px 25px rgba(0,0,0,0.06);
}
.stat-item {
text-align: center;
flex: 1;
}
.stat-number {
font-size: 70px;
font-weight: 900;
color: #e74c3c;
display: block;
}
.stat-label {
font-family: 'Inter', sans-serif;
font-size: 30px;
color: #7f8c8d;
text-transform: uppercase;
letter-spacing: 1px;
}
/* 特殊高亮框（紫色主题） */
.special-highlight {
background: linear-gradient(135deg, rgba(138,43,226,0.1) 0%, rgba(147,112,219,0.05) 100%);
padding: 20px;
border-radius: 10px;
margin: 20px 0;
border: 2px dashed #9370db;
}
/* 绿色主题高亮框 */
.green-highlight {
background: linear-gradient(135deg, rgba(46,204,113,0.1) 0%, rgba(39,174,96,0.05) 100%);
padding: 20px;
border-radius: 10px;
margin: 20px 0;
border-left: 4px solid #27ae60;
}
/* 红色主题高亮框 */
.red-highlight {
background: linear-gradient(135deg, rgba(231,76,60,0.1) 0%, rgba(192,57,43,0.05) 100%);
padding: 20px;
border-radius: 10px;
margin: 20px 0;
border-left: 4px solid #e74c3c;
}
/* 结论区域 */
.conclusion {
background: #2c3e50;
color: white;
padding: 30px;
border-radius: 15px;
margin-top: 30px;
text-align: center;
}
.conclusion-text {
font-size: 40px;
font-weight: 700;
margin-bottom: 10px;
}
.conclusion-subtitle {
font-family: 'Inter', sans-serif;
font-size: 36px;
opacity: 0.8;
}
/* 通用样式 */
.icon {
margin-right: 8px;
}
.decorative-line {
height: 2px;
background: linear-gradient(90deg, transparent 0%, #ddd 50%, transparent 100%);
margin: 20px 0;
}
strong {
color: #d2691e;
font-weight: 700;
}
.pattern-bg {
position: absolute;
top: 0;
right: 0;
width: 300px;
height: 300px;
background: radial-gradient(circle, rgba(255,165,0,0.05) 0%, transparent 70%);
pointer-events: none;
}
/* 两栏等宽布局 */
.two-column-equal {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
margin: 30px 0;
}
/* 四栏布局 */
.four-column-cards {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 15px;
margin: 30px 0;
}
/* 全宽内容区域 */
.full-width-content {
margin: 30px 0;
padding: 20px;
background: rgba(255,255,255,0.5);
border-radius: 10px;
}
/* 引用样式 */
.quote-section {
font-size: 40px;
font-style: italic;
text-align: center;
padding: 30px;
margin: 30px 0;
background: linear-gradient(135deg, rgba(52,73,94,0.1) 0%, rgba(44,62,80,0.05) 100%);
border-radius: 15px;
position: relative;
}
.quote-section::before {
content: '"';
font-size: 100px;
color: rgba(52,73,94,0.2);
position: absolute;
top: -20px;
left: 20px;
}
/* 时间轴样式 */
.timeline {
position: relative;
padding: 20px 0;
margin: 30px 0;
}
.timeline::before {
content: '';
position: absolute;
left: 50%;
top: 0;
bottom: 0;
width: 2px;
background: #ddd;
transform: translateX(-50%);
}
.timeline-item {
margin: 20px 0;
position: relative;
}
.timeline-item:nth-child(odd) {
text-align: right;
padding-right: 60%;
}
.timeline-item:nth-child(even) {
text-align: left;
padding-left: 60%;
}
.timeline-item::after {
content: '';
position: absolute;
top: 50%;
width: 12px;
height: 12px;
background: #ff6b6b;
border-radius: 50%;
transform: translateY(-50%);
}
.timeline-item:nth-child(odd)::after {
right: calc(40% - 6px);
}
.timeline-item:nth-child(even)::after {
left: calc(40% - 6px);
}
</style>
</head>
<body>
<div class="magazine-container">
<div class="pattern-bg"></div>
<!-- 标题区域 -->
<div class="header">
<div class="quote-mark">"</div>
<h1 class="main-title">{{MAIN_TITLE}}</h1>
<p class="subtitle">{{SUBTITLE}}</p>
</div>
<!-- 双栏布局：侧边栏 + 主要内容 -->
<div class="content-grid">
<div class="observation-box">
<h2 class="observation-title">
<i class="fas fa-lightbulb icon"></i>
{{SIDEBAR_TITLE}}
</h2>
<p>{{SIDEBAR_CONTENT}}</p>
</div>
<div class="main-content">
<p>{{INTRO_PARAGRAPH}}</p>
<div class="highlight-section">
<strong>{{HIGHLIGHT_LABEL}}：</strong>{{HIGHLIGHT_CONTENT}}
</div>
</div>
</div>
<!-- 三栏卡片展示 -->
<div class="three-column-cards">
<div class="card">
<div class="card-number">{{CARD1_NUMBER}}</div>
<div class="card-title">{{CARD1_TITLE}}</div>
<div class="card-desc">{{CARD1_DESC}}</div>
</div>
<div class="card">
<div class="card-number">{{CARD2_NUMBER}}</div>
<div class="card-title">{{CARD2_TITLE}}</div>
<div class="card-desc">{{CARD2_DESC}}</div>
</div>
<div class="card">
<div class="card-number">{{CARD3_NUMBER}}</div>
<div class="card-title">{{CARD3_TITLE}}</div>
<div class="card-desc">{{CARD3_DESC}}</div>
</div>
</div>
<!-- 统计数据区域 -->
<div class="stats-section">
<div class="stat-item">
<span class="stat-number">{{STAT1_NUMBER}}</span>
<span class="stat-label">{{STAT1_LABEL}}</span>
</div>
<div class="stat-item">
<span class="stat-number">{{STAT2_NUMBER}}</span>
<span class="stat-label">{{STAT2_LABEL}}</span>
</div>
<div class="stat-item">
<span class="stat-number">{{STAT3_NUMBER}}</span>
<span class="stat-label">{{STAT3_LABEL}}</span>
</div>
</div>
<!-- 主要内容继续 -->
<div class="main-content">
<p>{{MAIN_PARAGRAPH_1}}</p>
<p>{{MAIN_PARAGRAPH_2}}</p>
<!-- 特殊高亮框 -->
<div class="special-highlight">
<p><i class="fas fa-star icon"></i><strong>{{SPECIAL_HIGHLIGHT_TITLE}}：</strong>{{SPECIAL_HIGHLIGHT_CONTENT}}</p>
</div>
<div class="decorative-line"></div>
<p>{{MAIN_PARAGRAPH_3}}</p>
<p>{{MAIN_PARAGRAPH_4}}</p>
</div>
<!-- 结论区域 -->
<div class="conclusion">
<div class="conclusion-text">
<i class="fas fa-quote-left icon"></i>
{{CONCLUSION_TEXT}}
</div>
<div class="conclusion-subtitle">{{CONCLUSION_SUBTITLE}}</div>
</div>
</div>
<!--
可选的其他布局组件示例：
1. 两栏等宽布局：
<div class="two-column-equal">
<div>左栏内容</div>
<div>右栏内容</div>
</div>
2. 四栏布局：
<div class="four-column-cards">
<div class="card">卡片1</div>
<div class="card">卡片2</div>
<div class="card">卡片3</div>
<div class="card">卡片4</div>
</div>
3. 引用样式：
<div class="quote-section">
重要的引用内容
</div>
4. 不同颜色的高亮框：
<div class="green-highlight">绿色主题内容</div>
<div class="red-highlight">红色主题内容</div>
5. 全宽内容区域：
<div class="full-width-content">
全宽显示的内容
</div>
6. 时间轴：
<div class="timeline">
<div class="timeline-item">事件1</div>
<div class="timeline-item">事件2</div>
<div class="timeline-item">事件3</div>
</div>
-->
</body>
</html>
Agent
