我注意到你想要"HTML5网页制作模板下载"，但作为对话式AI，我无法提供文件下载功能，我可以为你创建一个精美的、可直接使用的HTML5模板，你可以直接复制代码保存为.html文件使用。
让我为你设计一个现代感十足的模板下载展示页面,包含多个模板卡片和交互效果：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">HTML5模板库 - 精选网页模板</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
<style>
:root {
--bg: #0a0f0d;
--bg-secondary: #111916;
--fg: #e8f0ec;
--muted: #6b7c74;
--accent: #00d992;
--accent-dim: #00d99233;
--card: #151d19;
--border: #243029;
--glow: rgba(0, 217, 146, 0.15);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: 'Noto Sans SC', 'Space Grotesk', sans-serif;
background: var(--bg);
color: var(--fg);
min-height: 100vh;
overflow-x: hidden;
}
.font-display {
font-family: 'Space Grotesk', sans-serif;
}
/* 背景动态网格 */
.bg-grid {
position: fixed;
inset: 0;
background-image:
linear-gradient(var(--border) 1px, transparent 1px),
linear-gradient(90deg, var(--border) 1px, transparent 1px);
background-size: 60px 60px;
opacity: 0.3;
pointer-events: none;
z-index: 0;
}
/* 动态光晕 */
.glow-orb {
position: fixed;
width: 600px;
height: 600px;
border-radius: 50%;
background: radial-gradient(circle, var(--glow) 0%, transparent 70%);
pointer-events: none;
z-index: 1;
transition: transform 0.3s ease-out, opacity 0.3s;
}
.glow-orb-1 {
top: -200px;
right: -200px;
animation: float1 20s ease-in-out infinite;
}
.glow-orb-2 {
bottom: -300px;
left: -200px;
background: radial-gradient(circle, rgba(0, 180, 216, 0.1) 0%, transparent 70%);
animation: float2 25s ease-in-out infinite;
}
@keyframes float1 {
0%, 100% { transform: translate(0, 0) scale(1); }
50% { transform: translate(-100px, 100px) scale(1.1); }
}
@keyframes float2 {
0%, 100% { transform: translate(0, 0) scale(1); }
50% { transform: translate(80px, -80px) scale(1.15); }
}
/* 入场动画 */
.reveal {
opacity: 0;
transform: translateY(40px);
transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.visible {
opacity: 1;
transform: translateY(0);
}
/* 卡片样式 */
.template-card {
background: var(--card);
border: 1px solid var(--border);
border-radius: 16px;
overflow: hidden;
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
position: relative;
}
.template-card::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, var(--accent-dim) 0%, transparent 50%);
opacity: 0;
transition: opacity 0.4s;
pointer-events: none;
}
.template-card:hover {
transform: translateY(-8px);
border-color: var(--accent);
box-shadow: 0 20px 60px -20px var(--glow);
}
.template-card:hover::before {
opacity: 1;
}
.card-preview {
height: 200px;
background: var(--bg-secondary);
position: relative;
overflow: hidden;
}
.card-preview::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to bottom, transparent 60%, var(--card));
}
/* 模拟浏览器窗口 */
.browser-mockup {
padding: 12px;
background: #1a2420;
border-radius: 8px 8px 0 0;
display: flex;
gap: 6px;
}
.browser-dot {
width: 10px;
height: 10px;
border-radius: 50%;
}
.browser-dot:nth-child(1) { background: #ff5f57; }
.browser-dot:nth-child(2) { background: #ffbd2e; }
.browser-dot:nth-child(3) { background: #28ca42; }
/* 标签样式 */
.tag {
display: inline-flex;
align-items: center;
padding: 4px 12px;
background: var(--bg);
border: 1px solid var(--border);
border-radius: 20px;
font-size: 12px;
color: var(--muted);
transition: all 0.3s;
}
.tag:hover {
border-color: var(--accent);
color: var(--accent);
}
/* 按钮样式 */
.btn-primary {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 24px;
background: var(--accent);
color: var(--bg);
font-weight: 600;
border-radius: 8px;
border: none;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
position: relative;
overflow: hidden;
}
.btn-primary::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
transform: translateX(-100%);
transition: transform 0.5s;
}
.btn-primary:hover {
transform: scale(1.02);
box-shadow: 0 8px 30px -10px var(--accent);
}
.btn-primary:hover::before {
transform: translateX(100%);
}
.btn-secondary {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 24px;
background: transparent;
color: var(--fg);
font-weight: 500;
border-radius: 8px;
border: 1px solid var(--border);
cursor: pointer;
transition: all 0.3s;
}
.btn-secondary:hover {
border-color: var(--accent);
color: var(--accent);
}
/* 搜索框 */
.search-box {
position: relative;
}
.search-box input {
width: 100%;
padding: 14px 20px 14px 48px;
background: var(--card);
border: 1px solid var(--border);
border-radius: 12px;
color: var(--fg);
font-size: 15px;
transition: all 0.3s;
}
.search-box input:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-dim);
}
.search-box input::placeholder {
color: var(--muted);
}
.search-box svg {
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
color: var(--muted);
}
/* 统计数字动画 */
.stat-number {
font-size: 48px;
font-weight: 700;
background: linear-gradient(135deg, var(--fg) 0%, var(--accent) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* 导航栏 */
.navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
padding: 16px 24px;
background: rgba(10, 15, 13, 0.8);
backdrop-filter: blur(20px);
border-bottom: 1px solid var(--border);
transition: all 0.3s;
}
.navbar.scrolled {
padding: 12px 24px;
}
/* 筛选标签 */
.filter-tabs {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.filter-tab {
padding: 8px 20px;
background: transparent;
border: 1px solid var(--border);
border-radius: 24px;
color: var(--muted);
font-size: 14px;
cursor: pointer;
transition: all 0.3s;
}
.filter-tab:hover,
.filter-tab.active {
background: var(--accent);
border-color: var(--accent);
color: var(--bg);
}
/* 粒子效果 */
.particle {
position: fixed;
width: 4px;
height: 4px;
background: var(--accent);
border-radius: 50%;
pointer-events: none;
opacity: 0;
z-index: 1000;
}
/* 响应式 */
@media (max-width: 768px) {
.stat-number {
font-size: 36px;
}
.card-preview {
height: 160px;
}
}
/* 减少动画偏好 */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* 下载模态框 */
.modal-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(8px);
z-index: 200;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: all 0.3s;
}
.modal-overlay.active {
opacity: 1;
visibility: visible;
}
.modal-content {
background: var(--card);
border: 1px solid var(--border);
border-radius: 20px;
padding: 32px;
max-width: 500px;
width: 90%;
transform: scale(0.9) translateY(20px);
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.modal-overlay.active .modal-content {
transform: scale(1) translateY(0);
}
/* 代码预览区 */
.code-preview {
background: #0d1210;
border: 1px solid var(--border);
border-radius: 12px;
padding: 20px;
font-family: 'JetBrains Mono', monospace;
font-size: 13px;
line-height: 1.6;
overflow-x: auto;
max-height: 300px;
}
.code-line {
display: flex;
gap: 16px;
}
.line-number {
color: var(--muted);
user-select: none;
min-width: 24px;
}
.code-tag { color: #ff7b72; }
.code-attr { color: #79c0ff; }
.code-string { color: #a5d6ff; }
.code-comment { color: var(--muted); }
</style>
</head>
<body>
<!-- 背景元素 -->
<div class="bg-grid"></div>
<div class="glow-orb glow-orb-1"></div>
<div class="glow-orb glow-orb-2"></div>
<!-- 导航栏 -->
<nav class="navbar">
<div class="max-w-7xl mx-auto flex items-center justify-between">
<a href="#" class="font-display text-xl font-bold flex items-center gap-2">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none">
<rect width="32" height="32" rx="8" fill="var(--accent)"/>
<path d="M8 12L16 8L24 12V20L16 24L8 20V12Z" stroke="var(--bg)" stroke-width="2" fill="none"/>
<circle cx="16" cy="16" r="3" fill="var(--bg)"/>
</svg>
<span>TemplateHub</span>
</a>
<div class="hidden md:flex items-center gap-8">
<a href="#templates" class="text-sm text-[var(--muted)] hover:text-[var(--fg)] transition-colors">模板库</a>
<a href="#features" class="text-sm text-[var(--muted)] hover:text-[var(--fg)] transition-colors">特性</a>
<a href="#docs" class="text-sm text-[var(--muted)] hover:text-[var(--fg)] transition-colors">文档</a>
<button class="btn-primary text-sm py-2 px-4">开始使用</button>
</div>
<button class="md:hidden p-2" id="menuBtn" aria-label="菜单">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<line x1="3" y1="6" x2="21" y2="6"/>
<line x1="3" y1="12" x2="21" y2="12"/>
<line x1="3" y1="18" x2="21" y2="18"/>
</svg>
</button>
</div>
</nav>
<!-- Hero 区域 -->
<header class="relative z-10 pt-32 pb-20 px-6">
<div class="max-w-7xl mx-auto">
<div class="reveal max-w-3xl">
<div class="inline-flex items-center gap-2 px-4 py-2 bg-[var(--card)] border border-[var(--border)] rounded-full mb-6">
<span class="w-2 h-2 bg-[var(--accent)] rounded-full animate-pulse"></span>
<span class="text-sm text-[var(--muted)]">2025年全新更新 · 新增50+模板</span>
</div>
<h1 class="font-display text-5xl md:text-7xl font-bold leading-tight mb-6">
精选<span class="text-[var(--accent)]">HTML5</span>网页模板
<br />即刻下载使用
</h1>
<p class="text-lg md:text-xl text-[var(--muted)] mb-10 max-w-2xl">
响应式设计、现代化代码、开箱即用，无需框架依赖，复制代码即可快速启动你的下一个项目。
</p>
<div class="flex flex-wrap gap-4">
<button class="btn-primary" onclick="scrollToTemplates()">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
<polyline points="7 10 12 15 17 10"/>
<line x1="12" y1="15" x2="12" y2="3"/>
</svg>
浏览模板库
</button>
<button class="btn-secondary">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"/>
</svg>
GitHub
</button>
</div>
</div>
<!-- 统计数据 -->
<div class="reveal grid grid-cols-2 md:grid-cols-4 gap-8 mt-20 pt-10 border-t border-[var(--border)]" style="transition-delay: 0.2s">
<div>
<div class="stat-number" data-target="128">0</div>
<div class="text-[var(--muted)] mt-1">精选模板</div>
</div>
<div>
<div class="stat-number" data-target="45">0</div>
<div class="text-[var(--muted)] mt-1">响应式设计</div>
</div>
<div>
<div class="stat-number" data-target="12">0</div>
<div class="text-[var(--muted)] mt-1">行业分类</div>
</div>
<div>
<div class="stat-number" data-target="99">0</div>
<div class="text-[var(--muted)] mt-1 flex items-center gap-1">满意度 <span class="text-[var(--accent)]">%</span></div>
</div>
</div>
</div>
</header>
<!-- 搜索和筛选 -->
<section id="templates" class="relative z-10 py-16 px-6">
<div class="max-w-7xl mx-auto">
<div class="reveal flex flex-col md:flex-row gap-6 items-start md:items-center justify-between mb-10">
<div class="search-box w-full md:w-96">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="11" cy="11" r="8"/>
<line x1="21" y1="21" x2="16.65" y2="16.65"/>
</svg>
<input type="text" placeholder="搜索模板..." id="searchInput" aria-label="搜索模板">
</div>
<div class="filter-tabs">
<button class="filter-tab active" data-filter="all">全部</button>
<button class="filter-tab" data-filter="landing">落地页</button>
<button class="filter-tab" data-filter="portfolio">作品集</button>
<button class="filter-tab" data-filter="dashboard">仪表盘</button>
<button class="filter-tab" data-filter="ecommerce">电商</button>
</div>
</div>
<!-- 模板网格 -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" id="templateGrid">
<!-- 模板卡片会通过JS渲染 -->
</div>
</div>
</section>
<!-- 特性区域 -->
<section id="features" class="relative z-10 py-24 px-6">
<div class="max-w-7xl mx-auto">
<div class="reveal text-center mb-16">
<h2 class="font-display text-3xl md:text-5xl font-bold mb-4">为什么选择我们</h2>
<p class="text-[var(--muted)] text-lg max-w-2xl mx-auto">每个模板都经过精心设计和严格测试，确保最佳的开发体验</p>
</div>
<div class="grid md:grid-cols-3 gap-8">
<div class="reveal p-8 bg-[var(--card)] border border-[var(--border)] rounded-2xl hover:border-[var(--accent)] transition-all duration-300" style="transition-delay: 0.1s">
<div class="w-14 h-14 bg-[var(--accent-dim)] rounded-xl flex items-center justify-center mb-6">
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" stroke-width="2">
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
<line x1="3" y1="9" x2="21" y2="9"/>
<line x1="9" y1="21" x2="9" y2="9"/>
</svg>
</div>
<h3 class="font-display text-xl font-semibold mb-3">响应式设计</h3>
<p class="text-[var(--muted)]">所有模板完美适配桌面端、平板和移动设备，一次编写，处处运行。</p>
</div>
<div class="reveal p-8 bg-[var(--card)] border border-[var(--border)] rounded-2xl hover:border-[var(--accent)] transition-all duration-300" style="transition-delay: 0.2s">
<div class="w-14 h-14 bg-[var(--accent-dim)] rounded-xl flex items-center justify-center mb-6">
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" stroke-width="2">
<polyline points="16 18 22 12 16 6"/>
<polyline points="8 6 2 12 8 18"/>
</svg>
</div>
<h3 class="font-display text-xl font-semibold mb-3">纯净代码</h3>
<p class="text-[var(--muted)]">语义化HTML5、模块化CSS、零依赖JavaScript，代码清晰易维护。</p>
</div>
<div class="reveal p-8 bg-[var(--card)] border border-[var(--border)] rounded-2xl hover:border-[var(--accent)] transition-all duration-300" style="transition-delay: 0.3s">
<div class="w-14 h-14 bg-[var(--accent-dim)] rounded-xl flex items-center justify-center mb-6">
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" stroke-width="2">
<circle cx="12" cy="12" r="10"/>
<polyline points="12 6 12 12 16 14"/>
</svg>
</div>
<h3 class="font-display text-xl font-semibold mb-3">即下即用</h3>
<p class="text-[var(--muted)]">复制代码保存为HTML文件即可在浏览器中打开，无需构建工具和复杂配置。</p>
</div>
</div>
</div>
</section>
<!-- 代码预览区 -->
<section class="relative z-10 py-16 px-6">
<div class="max-w-7xl mx-auto">
<div class="reveal bg-[var(--card)] border border-[var(--border)] rounded-2xl overflow-hidden">
<div class="p-6 border-b border-[var(--border)] flex items-center justify-between">
<div class="flex items-center gap-3">
<div class="flex gap-2">
<span class="w-3 h-3 rounded-full bg-[#ff5f57]"></span>
<span class="w-3 h-3 rounded-full bg-[#ffbd2e]"></span>
<span class="w-3 h-3 rounded-full bg-[#28ca42]"></span>
</div>
<span class="text-sm text-[var(--muted)] ml-4">template.html</span>
</div>
<button class="text-sm text-[var(--muted)] hover:text-[var(--accent)] transition-colors flex items-center gap-2" onclick="copyCode()">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<rect x="9" y="9" width="13" height="13" rx="2" ry="2"/>
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>
</svg>
<span id="copyText">复制代码</span>
</button>
</div>
<div class="code-preview">
<div class="code-line"><span class="line-number">1</span><span class="code-tag"><!DOCTYPE html></span></div>
<div class="code-line"><span class="line-number">2</span><span class="code-tag"><html</span> <span class="code-attr">lang</span>=<span class="code-string">"zh-CN"</span><span class="code-tag">></span></div>
<div class="code-line"><span class="line-number">3</span><span class="code-tag"><head></span></div>
<div class="code-line"><span class="line-number">4</span> <span class="code-tag"><meta</span> <span class="code-attr">charset</span>=<span class="code-string">"UTF-8"</span><span class="code-tag">></span></div>
<div class="code-line"><span class="line-number">5</span> <span class="code-tag"><meta</span> <span class="code-attr">name</span>=<span class="code-string">"viewport"</span> <span class="code-attr">content</span>=<span class="code-string">"width=device-width, initial-scale=1.0"</span><span class="code-tag">></span></div>
<div class="code-line"><span class="line-number">6</span> <span class="code-tag"><title></span>我的网页<span class="code-tag"></title></span></div>
<div class="code-line"><span class="line-number">7</span> <span class="code-comment"><!-- 引入样式 --></span></div>
<div class="code-line"><span class="line-number">8</span> <span class="code-tag"><link</span> <span class="code-attr">rel</span>=<span class="code-string">"stylesheet"</span> <span class="code-attr">href</span>=<span class="code-string">"style.css"</span><span class="code-tag">></span></div>
<div class="code-line"><span class="line-number">9</span><span class="code-tag"></head></span></div>
<div class="code-line"><span class="line-number">10</span><span class="code-tag"><body></span></div>
<div class="code-line"><span class="line-number">11</span> <span class="code-comment"><!-- 你的内容从这里开始 --></span></div>
<div class="code-line"><span class="line-number">12</span><span class="code-tag"></body></span></div>
<div class="code-line"><span class="line-number">13</span><span class="code-tag"></html></span></div>
</div>
</div>
</div>
</section>
<!-- 页脚 -->
<footer class="relative z-10 py-16 px-6 border-t border-[var(--border)]">
<div class="max-w-7xl mx-auto">
<div class="flex flex-col md:flex-row justify-between items-center gap-6">
<div class="font-display text-xl font-bold flex items-center gap-2">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none">
<rect width="32" height="32" rx="8" fill="var(--accent)"/>
<path d="M8 12L16 8L24 12V20L16 24L8 20V12Z" stroke="var(--bg)" stroke-width="2" fill="none"/>
<circle cx="16" cy="16" r="3" fill="var(--bg)"/>
</svg>
<span>TemplateHub</span>
</div>
<p class="text-[var(--muted)] text-sm">精心设计的HTML5模板，助力快速开发</p>
<div class="flex gap-4">
<a href="#" class="w-10 h-10 rounded-full border border-[var(--border)] flex items-center justify-center hover:border-[var(--accent)] hover:text-[var(--accent)] transition-all" aria-label="Twitter">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"/>
</svg>
</a>
<a href="#" class="w-10 h-10 rounded-full border border-[var(--border)] flex items-center justify-center hover:border-[var(--accent)] hover:text-[var(--accent)] transition-all" aria-label="GitHub">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"/>
</svg>
</a>
</div>
</div>
</div>
</footer>
<!-- 下载模态框 -->
<div class="modal-overlay" id="downloadModal">
<div class="modal-content">
<div class="flex items-center justify-between mb-6">
<h3 class="font-display text-xl font-semibold" id="modalTitle">下载模板</h3>
<button onclick="closeModal()" class="w-8 h-8 rounded-full hover:bg-[var(--border)] flex items-center justify-center transition-colors" aria-label="关闭">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<line x1="18" y1="6" x2="6" y2="18"/>
<line x1="6" y1="6" x2="18" y2="18"/>
</svg>
</button>
</div>
<p class="text-[var(--muted)] mb-6" id="modalDesc">复制下方代码，保存为 .html 文件即可使用。</p>
<div class="code-preview text-xs mb-6" id="modalCode">
<!-- 代码内容 -->
</div>
<div class="flex gap-3">
<button class="btn-primary flex-1 justify-center" onclick="copyModalCode()">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<rect x="9" y="9" width="13" 
