<!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>{
15秒科技感智能手机广告视频提示词： 这是一支高端、极简、未来科技风格的智能手机商业广告，整体采用电影级布光与真实材质表现，画面干净、背景简约、强调金属与玻璃的高级质感，节奏流畅且具有呼吸感。 0–3秒：主视觉登场 画面从柔和的白色雾气与高光环境中开始，手机缓慢从虚到实浮现于画面中央，仿佛悬浮在空中。镜头以极慢速度向前推进，金属边框在光线下产生细腻反射，边缘高光勾勒出机身轮廓，整体氛围安静、昂贵、充满科技感，营造“旗舰登场”的第一印象。 3–5秒：镜头模组微距 切换至摄像头模组的超微距特写，镜头横向缓慢移动，光线从镜片表面滑过，产生清晰通透的反射与折射效果。浅景深让背景完全虚化，突出玻璃与金属的精密工艺，强化产品做工与影像能力的高端定位。 5–7秒：设计与比例展示 画面转至极简建筑风格空间，手机垂直立于地面，周围留有大量负空间。柔和侧光投射出修长阴影，强调机身的轻薄与比例美感。镜头可轻微环绕，让边角曲线与结构设计更加立体，整体风格克制而现代。 7–10秒：内部结构科技感 进入爆炸结构视图，手机在空中自动分解，芯片、电池与精密组件有序悬浮排列，各层之间保持完美间距。环境略微变暗，加入淡淡的科技光效或微弱粒子，突出工程精度与未来感，传达“强大源于内部”的视觉信息。 10–13秒：动能与性能爆发 所有组件瞬间回收组合成完整手机，机身在空中缓慢旋转。与此同时出现环绕机身的能量光轨与细小粒子，形成流动轨迹，画面对比增强，速度略微提升，让情绪达到小高潮，象征性能与动力。 13–15秒：轮廓收尾与品牌定格 画面快速过渡至黑色背景，只保留一道干净的边缘轮廓光勾勒手机外形。手机逐渐静止，品牌Logo优雅淡入，停留约1秒后整体缓慢淡出至纯黑，结束在高级、克制且具有记忆点的品牌画面上。 整体要求： 超写实质感、电影构图、柔和阴影、真实反射、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>
