Skip to content

Instantly share code, notes, and snippets.

@Sylvia1897

Sylvia1897/index.html

Last active April 15, 2025 13:55
Show Gist options
  • Save Sylvia1897/df1b3c27aa8feb5ca694329a0b05c482 to your computer and use it in GitHub Desktop.
Save Sylvia1897/df1b3c27aa8feb5ca694329a0b05c482 to your computer and use it in GitHub Desktop.
Download ZIP
in2x图片悬赏模板
Raw
index.html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>H5 活动页面</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
background-color: #ffffff;
}
.header {
width: 100%;
height: 180px;
background-image: url('your-image-url.jpg'); /* 替换为你的图片地址 */
background-size: cover;
background-position: center;
}
.container {
display: flex;
flex-direction: row;
width: 100%;
}
.sidebar {
width: 12%;
padding: 16px;
background-color: #f5f5f5;
text-align: left;
}
.sticky-sidebar {
position: sticky;
top: 0;
}
.sidebar h4 {
font-size: 14px;
margin-bottom: 12px;
color: #333;
}
.sidebar ul {
list-style: none;
padding-left: 0;
}
.sidebar li {
margin-bottom: 8px;
font-size: 13px;
}
.sidebar a {
text-decoration: none;
color: #333;
font-weight: normal;
}
.content {
width: 88%;
padding: 20px;
text-align: left;
}
.section {
margin-bottom: 40px;
}
.section h2 {
font-size: 22px;
margin-bottom: 16px;
border-left: 4px solid #333;
padding-left: 8px;
}
.section h3 {
font-size: 18px;
margin: 12px 0;
color: #444;
}
.template-box {
background-color: #f0f0f0;
padding: 12px;
margin-bottom: 10px;
border-radius: 6px;
font-size: 14px;
white-space: pre-line;
text-align: left;
}
.copy-button {
display: block;
margin: 10px auto 20px auto;
padding: 8px 20px;
font-size: 16px;
background-color: #007BFF;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
.bottom-button {
position: fixed;
bottom: 20px;
right: 20px;
padding: 12px 24px;
background-color: #ff4d4f;
color: white;
border: none;
border-radius: 25px;
font-size: 16px;
cursor: pointer;
z-index: 100;
}
</style>
</head>
<body>
<!-- 主图 -->
<div class="header"></div>
<!-- 主体区域 -->
<div class="container">
<!-- 左侧目录 -->
<div class="sidebar">
<div class="sticky-sidebar">
<h4>消息模板</h4>
<ul>
<li><a href="#basic">基础通用模板</a></li>
<li><a href="#character">角色</a></li>
<li><a href="#comic">漫画</a></li>
<li><a href="#oc">OC梦绘</a></li>
<li><a href="#avatar">头像</a></li>
<li><a href="#video">视频</a></li>
</ul>
</div>
</div>
<!-- 右侧内容 -->
<div class="content">
<!-- 基础通用模板 -->
<div class="section" id="basic">
<h2>基础通用模板</h2>
<div class="template-box" id="template-basic">这是基础通用模板的内容。
请根据实际情况修改文本。</div>
<button class="copy-button" onclick="copyToClipboard('template-basic')">复制</button>
</div>
<!-- 插画：角色 -->
<div class="section" id="character">
<h2>插画</h2>
<h3>角色</h3>
<div class="template-box" id="template-character">角色模板内容。
支持多行文本显示。</div>
<button class="copy-button" onclick="copyToClipboard('template-character')">复制</button>
</div>
<!-- 插画：漫画 -->
<div class="section" id="comic">
<h3>漫画</h3>
<div class="template-box" id="template-comic">漫画模板内容。
可以加换行，说明需求。</div>
<button class="copy-button" onclick="copyToClipboard('template-comic')">复制</button>
</div>
<!-- OC梦绘 -->
<div class="section" id="oc">
<h2>OC梦绘</h2>
<div class="template-box" id="template-oc">OC梦绘模板内容。
适合定制创作类内容。</div>
<button class="copy-button" onclick="copyToClipboard('template-oc')">复制</button>
</div>
<!-- 头像 -->
<div class="section" id="avatar">
<h2>头像</h2>
<div class="template-box" id="template-avatar">头像模板内容。
清晰地列出用户需要的头像风格。</div>
<button class="copy-button" onclick="copyToClipboard('template-avatar')">复制</button>
</div>
<!-- 视频 -->
<div class="section" id="video">
<h2>视频</h2>
<div class="template-box" id="template-video">视频模板内容。
简洁表达所需的画面、节奏与风格。</div>
<button class="copy-button" onclick="copyToClipboard('template-video')">复制</button>
</div>
</div>
</div>
<!-- 底部按钮 -->
<button class="bottom-button" onclick="window.location.href='your-app-scheme://open/submit-task'">发悬赏</button>
<!-- JS 复制逻辑 -->
<script>
function copyToClipboard(id) {
const text = document.getElementById(id).innerText;
navigator.clipboard.writeText(text).then(() => {
alert('模板内容已复制');
});
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment