<!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 PRODUCT]被重新想象成迷人咖啡馆，融合产品设计与建筑在俏皮却优质方式。产品形成建筑物上部结构，而地面层转化为 уют 咖啡馆店面，发光温暖、邀请光。透明玻璃窗揭示详细微型内部带有微小桌子、凳子和细微装饰，强调工艺和规模。周围街道周到风格带有精致街灯、小城市细节和干净路面，创建欢迎邻里氛围。柔和、电影照明增强异想天开心情，带有温柔高光和自然阴影。超详细、超现实微型渲染，优质广告美学，超现实却可信规模，精炼艺术指导，高分辨率。
}</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 dreamlike miniature urban scene where an oversized [BRAND PRODUCT] is reimagined as a charming café, blending product design with architecture in a playful yet premium way. The product forms the upper structure of the building, while the ground level transforms into a cozy café storefront, glowing with warm, inviting light. Transparent glass windows reveal a detailed miniature interior with tiny tables, stools, and subtle décor, emphasizing craftsmanship and scale. The surrounding street is thoughtfully styled with delicate street lamps, small urban details, and clean pavement, creating a welcoming neighborhood atmosphere. Soft, cinematic lighting enhances the whimsical mood, with gentle highlights and natural shadows. Ultra-detailed, hyperrealistic miniature rendering, premium advertising aesthetic, surreal yet believable scale, refined art direction, high resolution.
}</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>
