<!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>{
高端、超现实编辑时尚摄影三联画活动为品牌：[BRAND NAME]。任务：作为世界级时尚摄影师（例如Steven Meisel, Paolo Roversi, or Harley Weir）为[BRAND NAME]拍摄定义图像活动。你必须创建连贯3面板编辑布局，水平堆叠（顶部、中间、底部面板）。焦点强烈在电影特写和纹理细节。缪斯（AI自主）：分析[BRAND NAME]的最深原型、美学、哲学和目标受众生活方式。仅基于此分析，自主生成品牌终极人类缪斯。你确定他们的性别、年龄、独特民族、醒目特征和魅力态度。这个人不是摆姿势的模特；他们是品牌精神的活体现。三联画叙事和构图（水平堆叠 - 特写焦点）：三个堆叠面板必须形成统一的、亲密视觉散文关于品牌本质，优先紧框架。顶部面板（激烈肖像）：电影、紧头像焦点在眼睛和面部。激烈、沟通目光。高光皮肤纹理和情感。中部面板（姿势/动作）：紧裁剪焦点在特定身体部分在运动或休息 — 手抓住东西，颈曲线，嘴抽烟，姿势。它传达角色态度而不显示整个身体。底部面板（终极纹理/符号）：极端微距特写。一个独特服装织物细节，一件珠宝，相关品牌生活方式的符号道具，或他们环境的抽象纹理。造型和大胆选择（关键）：推动边界。造型必须是前卫高端时尚。融入意外元素创建“艺术之家”感觉：奇怪配件、并置服装、道具，甚至故意荒谬如果适合品牌氛围。图像必须感觉原始、昂贵和触感。技术美学：超现实主义：强胶片颗粒，高度详细纹理（毛孔、织物织法），现实景深。照明：大胆、电影和戏剧性。根据品牌DNA使用明暗对比、彩色凝胶、刺眼阳光或心情阴影。颜色：一个精致、编辑颜色分级调色板完美和谐和相关[BRAND NAME]。
}</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>{
A high-end, hyper-realistic editorial fashion photography triptych campaign for brand: [BRAND NAME]. THE TASK: Act as a world-class fashion photographer (e.g., Steven Meisel, Paolo Roversi, or Harley Weir) shooting a defining image campaign for [BRAND NAME]. You must create a cohesive 3-panel editorial layout, stacked horizontally (top, middle, bottom panels). The focus is intensely on cinematic close-ups and textural details. THE MUSE (AI AUTONOMY): Analyze the deepest archetype, aesthetic, philosophy, and target audience lifestyle of [BRAND NAME]. Based only on this analysis, autonomously generate the ultimate human muse for the brand. You determine their gender, age, unique ethnicity, striking features, and charismatic attitude. This person is not a model posing; they are the living embodiment of the brand's spirit. THE TRIPTYCH NARRATIVE & COMPOSITION (HORIZONTAL STACK - CLOSE-UP FOCUS): The three stacked panels must form a unified, intimate visual essay about the brand's essence, prioritizing tight framing. Top Panel (The Intense Portrait): A cinematic, tight headshot focusing on the eyes and face. Intense, communicative gaze. Highlighting skin texture and emotion. Middle Panel (The Gesture/Action): A tight crop focusing on a specific body part in motion or repose—hands clutching something, the curve of a neck, a mouth smoking a cigarette, posture. It conveys the character's attitude without showing the whole body. Bottom Panel (The Ultimate Texture/Symbol): An extreme macro close-up. A detail of a unique garment fabric, a piece of jewelry, a symbolic prop relevant to the brand's lifestyle, or an abstract texture from their environment. STYLING & BOLD CHOICES (CRITICAL): Push boundaries. The styling must be avant-garde high fashion. Incorporate unexpected elements to create an "art-house" feel: weird accessories, juxtaposed garments, props, or even a touch of deliberate absurdity if it fits the brand's vibe. The image must feel raw, expensive, and tactile. TECHNICAL AESTHETICS: Hyper-realism: Strong film grain, highly detailed textures (pores, fabric weave), realistic depth of field. Lighting: Bold, cinematic, and dramatic. Use chiaroscuro, colored gels, harsh sunlight, or moody shadows depending on the brand's DNA. Color: A sophisticated, editorial color grading palette that is perfectly harmonious and relevant to [BRAND NAME].
}</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>