<!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 {
background-color: #ffffff; /* 页面背景改为白色，适配浅色容器 */
padding: 2rem;
}
/* 代码容器样式 - 浅色改版 */
.code-container {
position: relative;
background-color: #f8fafc; /* 浅灰背景，浅色核心 */
border: 1px solid #e2e8f0; /* 浅边框提升质感 */
border-radius: 6px;
padding: 1.2rem;
max-width: 900px;
margin: 0 auto;
box-shadow: 0 1px 3px rgba(0,0,0,0.05); /* 轻微阴影，增加层次感 */
}
/* 头部区域（标题+复制按钮） */
.header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
}
.title {
font-size: 1.1rem;
color: #1e293b; /* 深色标题，保证可读性 */
font-weight: 500;
/* 无需额外添加 text-align: left; 原布局默认居左，添加后可进一步强化，效果一致 */
/* text-align: left; */
}
.copy-btn {
background: transparent;
border: none;
color: #2563eb; /* 深蓝色文字，适配浅色风格且醒目 */
cursor: pointer;
font-size: 1rem;
padding: 0.4rem 0.6rem;
transition: color 0.2s ease;
}
.copy-btn:hover {
color: #3b82f6; /* 浅一点的蓝色，hover交互效果 */
}
/* 代码块样式 - 浅色适配 */
.code-block {
color: #1f2937; /* 深灰文字，保证代码可读性 */
font-family: 'Consolas', 'Monaco', monospace; /* 等宽字体 */
white-space: pre-wrap; /* 保留换行和空格 */
line-height: 1.6;
overflow-x: auto; /* 超出部分滚动 */
}
</style>
</head>
<body>
<div class="code-container">
<div class="header">
<!-- 核心修改：标题文字改为「中文提示词」，默认居左 -->
<span class="title">中文提示词</span>
<button class="copy-btn">复制</button>
</div>
<pre class="code-block"><code>{
{
"画面比例": "9:16",
"创意名称": "龙马精神企业会议邀请函海报",
"图片类型": "竖版大气商务邀请函海报",
"生成模式": "超写实光影合成设计",
"核心创意": {
"中文": "以“龙马精神 凝心聚力”为核心，结合奔腾的火焰骏马形象，打造大气磅礴的企业会议邀请函视觉"
},
"主体设计": {
"中文": "画面中心是奔腾的红金火焰质感骏马，马身带星光粒子特效，整体造型动感磅礴；画面上下排布核心书法文案，左右标注邀请函与英文主题，底部是会议时间、地点信息"
},
"场景设计": {
"地面": "无额外地面场景，骏马主体居于画面视觉中心"
},
"背景设计": {
"中文": "红蓝渐变的光影放射背景，带光束拖尾特效，整体氛围感拉满",
"目的": "突出奔腾骏马主体与核心会议文案"
},
"文案设计": {
"主标题": "“龙马精神 凝心聚力”",
"副标题": "“长风破浪，聚力新程”",
"竖排文案": [
"左侧“邀请函 Invitation Letter”",
"右侧“POOLING STRENGTH”"
],
"会议信息": [
"会议时间 01.26 Monday（周一）",
"16:50 新程开始 | 踏马新城",
"会议地址 广州市天河区北京路商业大厦15楼会议厅"
],
"底部标注": "扫一扫入会",
"顶部标注": "与行业精英面对面，拓展人脉，碰撞思想火花"
},
"光影设计": {
"中文": "强烈的光束光影，骏马带自发光火焰特效，整体光影动感磅礴，有强烈的视觉冲击力"
},
"配色方案": {
"中文": "主色调正红色、鎏金色、宝蓝色，高对比大气磅礴配色"
},
"构图方式": {
"中文": "对角线动感构图，骏马呈对角线奔腾姿态，标题在上，会议信息在下，视觉冲击力强，动感十足"
},
"整体气质": [
"大气磅礴",
"沉稳专业",
"动感有力量"
],
"渲染要求": {
"分辨率": "4K-8K",
"中文": "超写实光影合成，粒子光效特效，细腻的骏马质感表现，电影级光影质感"
}
}
}</code></pre>
</div>
<script>
// 复制按钮功能（保持不变，正常生效）
const copyBtn = document.querySelector('.copy-btn');
const codeText = document.querySelector('.code-block code').textContent;
copyBtn.addEventListener('click', () => {
// 复制文本到剪贴板
navigator.clipboard.writeText(codeText).then(() => {
// 临时修改按钮文字提示
const originalText = copyBtn.textContent;
copyBtn.textContent = '已复制';
setTimeout(() => {
copyBtn.textContent = originalText;
}, 2000);
}).catch(err => {
console.error('复制失败：', err);
});
});
</script>
</body>
</html>
