<!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>{
基于提供的图像创建高端电影护肤广告。场景以平静反射水面打开，柔和涟漪缓慢移动。薄荷绿“ac GREENGRAM”瓶子完美居中、直立稳定，贯穿视频保持确切位置。相机运动：从缓慢顶视电影下降开始，轻轻靠近瓶子。相机缓和进入细微正面角度，停在英雄构图。无抖动。只有平滑、奢侈运动。水溅动画：冻结水溅逐渐在慢动作中活过来 — 液体弧线平滑从表面抬起，以优雅圆形运动包裹瓶子。液滴自然分离并落回水中，创建柔和涟漪和现实反射。气泡和成分运动：透明玻璃气泡开始轻轻向上和侧向漂浮，缓慢旋转。内部，绿豆微妙移动和沉降，添加现实和深度。一个较小气泡漂向前景以深度分离，然后缓慢移动回来。背景和照明：垂直柔和光束从背景微妙脉动，创建新鲜植物辉光。绿色渐变背景保持干净和优质，带有微弱光晕和高光。水面反射保持清晰和镜子般。微细节：微小水滴缓慢滑下瓶子表面。瓶子下方反射轻轻扭曲水运动。玻璃气泡高光柔和闪烁。心情和节奏：超缓慢、优雅、新鲜、优质护肤美学。无快速运动。无戏剧性剪切。一个连续电影镜头。最终帧：运动安定。水平静。气泡保持位置。瓶子作为英雄产品站立，完美照明、干净、奢侈。风格和质量：超现实液体物理，奢侈商业护肤广告，工作室照明，浅景深，超干净构图，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>
<!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>{
Create a high-end cinematic skincare advertisement based on the provided image. The scene opens with a calm reflective water surface, soft ripples moving slowly. The mint-green “ac GREENGRAM” bottle stands perfectly centered, upright and stable, maintaining its exact position throughout the video. Camera movement: Start with a slow top-down cinematic descent, gently moving closer to the bottle. The camera eases into a subtle frontal angle, stopping at a hero framing. No shaking. Smooth, luxury motion only. Water splash animation: The frozen water splash gradually comes alive in slow motion — liquid arcs lift smoothly from the surface, wrapping around the bottle in a graceful circular motion. Droplets separate naturally and fall back into the water, creating soft ripples and realistic reflections. Bubble & ingredient motion: The transparent glass bubbles begin to float gently upward and sideways, rotating slowly. Inside them, the green gram beans subtly shift and settle, adding realism and depth. One smaller bubble drifts closer to the foreground for depth separation, then slowly moves back. Background & lighting: Vertical soft light beams pulse subtly from the background, creating a fresh botanical glow. The green gradient background remains clean and premium, with faint light bloom and bokeh highlights. Reflections on the water surface remain crisp and mirror-like. Micro details: Tiny water droplets slide slowly down the bottle surface. The reflection beneath the bottle gently distorts with water movement. Highlights on glass bubbles shimmer softly. Mood & pacing: Ultra-slow, elegant, fresh, premium skincare aesthetic. No fast motion. No dramatic cuts. One continuous cinematic shot. Final frame: The motion settles. Water calms. Bubbles hold position. The bottle stands as a hero product, perfectly lit, clean, and luxurious. Style & quality: Hyper-realistic liquid physics, luxury commercial skincare ad, studio lighting, shallow depth of field, ultra-clean composition, 4K–8K quality, cinematic realism.
}</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>
