我将为您创建一个单页应用，包含用户协议和隐私政策内容，支持Markdown格式转换，采用圆角布局和清新配色方案。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>用户协议与隐私政策</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
:root {
--primary-color: #4a6fa5;
--secondary-color: #6b8cae;
--accent-color: #ff7e5f;
--text-color: #333;
--light-bg: #f8f9fa;
--card-bg: #ffffff;
--border-radius: 12px;
--box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
--transition: all 0.3s ease;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background-color: var(--light-bg);
color: var(--text-color);
line-height: 1.6;
padding: 20px;
}
.container {
max-width: 1000px;
margin: 0 auto;
padding: 20px;
}
header {
text-align: center;
margin-bottom: 30px;
animation: fadeInDown 0.8s ease;
}
.logo {
width: 80px;
height: 80px;
margin-bottom: 15px;
border-radius: 50%;
object-fit: cover;
box-shadow: var(--box-shadow);
transition: var(--transition);
}
.logo:hover {
transform: rotate(15deg) scale(1.05);
}
h1 {
color: var(--primary-color);
margin-bottom: 10px;
font-size: 2.2rem;
}
.subtitle {
color: var(--secondary-color);
font-size: 1.1rem;
margin-bottom: 20px;
}
.tabs {
display: flex;
justify-content: center;
margin-bottom: 30px;
gap: 10px;
animation: fadeIn 1s ease;
}
.tab-btn {
padding: 12px 25px;
background-color: var(--card-bg);
border: none;
border-radius: var(--border-radius);
cursor: pointer;
font-size: 1rem;
font-weight: 600;
color: var(--secondary-color);
transition: var(--transition);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}
.tab-btn:hover {
background-color: var(--primary-color);
color: white;
transform: translateY(-3px);
}
.tab-btn.active {
background-color: var(--primary-color);
color: white;
}
.content-card {
background-color: var(--card-bg);
border-radius: var(--border-radius);
padding: 30px;
box-shadow: var(--box-shadow);
margin-bottom: 30px;
animation: fadeInUp 0.8s ease;
}
.content-section {
display: none;
animation: fadeIn 0.5s ease;
}
.content-section.active {
display: block;
}
.markdown-content {
max-height: 500px;
overflow-y: auto;
padding-right: 15px;
}
.markdown-content h2 {
color: var(--primary-color);
margin: 25px 0 15px;
padding-bottom: 8px;
border-bottom: 1px solid #eee;
}
.markdown-content h3 {
color: var(--secondary-color);
margin: 20px 0 10px;
}
.markdown-content p {
margin-bottom: 15px;
}
.markdown-content ul,
.markdown-content ol {
margin-bottom: 15px;
padding-left: 20px;
}
.markdown-content li {
margin-bottom: 8px;
}
.markdown-content a {
color: var(--accent-color);
text-decoration: none;
transition: var(--transition);
}
.markdown-content a:hover {
text-decoration: underline;
}
.markdown-content blockquote {
border-left: 4px solid var(--secondary-color);
padding-left: 15px;
margin: 15px 0;
color: #666;
font-style: italic;
}
footer {
text-align: center;
margin-top: 30px;
color: var(--secondary-color);
font-size: 0.9rem;
animation: fadeIn 1s ease;
}
.agree-btn {
display: block;
width: 200px;
margin: 30px auto 0;
padding: 12px;
background-color: var(--accent-color);
color: white;
border: none;
border-radius: var(--border-radius);
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: var(--transition);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.agree-btn:hover {
background-color: #ff6a45;
transform: translateY(-3px);
box-shadow: 0 6px 15px rgba(255, 126, 95, 0.3);
}
/* 滚动条样式 */
.markdown-content::-webkit-scrollbar {
width: 6px;
}
.markdown-content::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 3px;
}
.markdown-content::-webkit-scrollbar-thumb {
background: var(--secondary-color);
border-radius: 3px;
}
.markdown-content::-webkit-scrollbar-thumb:hover {
background: var(--primary-color);
}
/* 动画效果 */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeInDown {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* 响应式设计 */
@media (max-width: 768px) {
.container {
padding: 15px;
}
.content-card {
padding: 20px;
}
.tabs {
flex-direction: column;
align-items: center;
}
.tab-btn {
width: 100%;
max-width: 300px;
}
}
</style>
</head>
<body>
<div class="container">
<header>
<img src="https://page.mixinnet.cn/api/placeholder?w=600&h=300" alt="Logo" class="logo">
<h1>用户协议与隐私政策</h1>
<p class="subtitle">请仔细阅读以下条款和条件</p>
</header>
<div class="tabs">
<button class="tab-btn active" data-tab="agreement">用户协议</button>
<button class="tab-btn" data-tab="privacy">隐私政策</button>
<button class="tab-btn" data-tab="cookies">Cookie政策</button>
</div>
<div class="content-card">
<div class="content-section active" id="agreement">
<div class="markdown-content">
<h2>用户协议</h2>
<p>最后更新日期：2023年6月1日</p>
<h3>1. 接受条款</h3>
<p>通过访问和使用本服务，您表示接受并同意遵守本协议的所有条款和条件。如果您不同意这些条款，请不要使用本服务。</p>
<h3>2. 服务描述</h3>
<p>我们提供的服务包括但不限于：</p>
<ul>
<li>内容浏览</li>
<li>用户账户管理</li>
<li>个性化推荐</li>
<li>社交互动功能</li>
</ul>
<h3>3. 用户义务</h3>
<p>作为用户，您同意：</p>
<ol>
<li>提供准确、完整和最新的注册信息</li>
<li>对您的账户和密码保密</li>
<li>不从事任何非法活动</li>
<li>不干扰或破坏服务的安全性或正常运行</li>
</ol>
<blockquote>
请注意：违反本协议可能导致您的账户被暂停或终止，恕不另行通知。
</blockquote>
<h3>4. 知识产权</h3>
<p>本服务及其原始内容、功能和外观均为我们的专有财产，受版权、商标、专利和其他知识产权法律的保护。</p>
<h3>5. 免责声明</h3>
<p>本服务按"原样"和"可用"的基础提供。我们不保证服务不会中断或没有错误。</p>
</div>
</div>
<div class="content-section" id="privacy">
<div class="markdown-content">
<h2>隐私政策</h2>
<p>最后更新日期：2023年6月1日</p>
<h3>1. 我们收集的信息</h3>
<p>我们可能收集以下类型的信息：</p>
<ul>
<li><strong>个人信息：</strong>姓名、电子邮件地址、电话号码等</li>
<li><strong>使用数据：</strong>IP地址、浏览器类型、访问时间等</li>
<li><strong>位置数据：</strong>您使用服务时的地理位置</li>
</ul>
<h3>2. 信息使用方式</h3>
<p>我们使用收集的信息用于以下目的：</p>
<ol>
<li>提供和维护我们的服务</li>
<li>通知您有关服务的更改</li>
<li>允许您参与服务的互动功能</li>
<li>提供客户支持</li>
<li>改进我们的服务</li>
</ol>
<h3>3. 数据共享</h3>
<p>我们不会出售您的个人信息。我们可能在以下情况下共享信息：</p>
<ul>
<li>与服务提供商合作</li>
<li>遵守法律义务</li>
<li>保护我们的权利和财产</li>
</ul>
<h3>4. 数据安全</h3>
<p>我们采取合理的安全措施来保护您的个人信息，但无法保证绝对安全。</p>
</div>
</div>
<div class="content-section" id="cookies">
<div class="markdown-content">
<h2>Cookie政策</h2>
<p>最后更新日期：2023年6月1日</p>
<h3>1. 什么是Cookie</h3>
<p>Cookie是网站存储在您设备上的小型文本文件，用于记住您的偏好和其他信息。</p>
<h3>2. 我们使用的Cookie类型</h3>
<ul>
<li><strong>必要Cookie：</strong>使网站正常运行</li>
<li><strong>偏好Cookie：</strong>记住您的选择和偏好</li>
<li><strong>统计Cookie：</strong>帮助我们了解用户如何使用网站</li>
<li><strong>营销Cookie：</strong>用于展示相关广告</li>
</ul>
<h3>3. 如何管理Cookie</h3>
<p>您可以通过浏览器设置控制或删除Cookie。但请注意，禁用Cookie可能会影响网站功能。</p>
</div>
</div>
<button class="agree-btn">
<i class="fas fa-check-circle"></i> 我已阅读并同意
</button>
</div>
<footer>
<p>© 2023 公司名称. 保留所有权利.</p>
<p>如有任何问题，请联系：support@example.com</p>
</footer>
</div>
<script>
// 标签切换功能
document.querySelectorAll('.tab-btn').forEach(btn => {
btn.addEventListener('click', () => {
// 移除所有按钮的active类
document.querySelectorAll('.tab-btn').forEach(b => {
b.classList.remove('active');
});
// 添加当前按钮的active类
btn.classList.add('active');
// 隐藏所有内容区域
document.querySelectorAll('.content-section').forEach(section => {
section.classList.remove('active');
});
// 显示对应的内容区域
const tabId = btn.getAttribute('data-tab');
document.getElementById(tabId).classList.add('active');
});
});
// 简单的Markdown转换函数（实际项目中建议使用专门的库如marked.js）
function convertMarkdown(content) {
// 这里可以添加更复杂的Markdown转换逻辑
return content
.replace(/^### (.*$)/gm, '<h3>$1</h3>')
.replace(/^## (.*$)/gm, '<h2>$1</h2>')
.replace(/^\* (.*$)/gm, '<li>$1</li>')
.replace(/^> (.*$)/gm, '<blockquote>$1</blockquote>')
.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
.replace(/\*(.*?)\*/g, '<em>$1</em>')
.replace(/\[(.*?)\]\((.*?)\)/g, '<a href="$2">$1</a>');
}
// 同意按钮动画
const agreeBtn = document.querySelector('.agree-btn');
agreeBtn.addEventListener('mouseenter', () => {
agreeBtn.innerHTML = '<i class="fas fa-thumbs-up"></i> 确认同意';
});
agreeBtn.addEventListener('mouseleave', () => {
agreeBtn.innerHTML = '<i class="fas fa-check-circle"></i> 我已阅读并同意';
});
agreeBtn.addEventListener('click', () => {
agreeBtn.innerHTML = '<i class="fas fa-check"></i> 已确认';
agreeBtn.style.backgroundColor = '#4CAF50';
setTimeout(() => {
alert('感谢您的确认！');
}, 300);
});
// 页面加载动画
document.addEventListener('DOMContentLoaded', () => {
setTimeout(() => {
document.body.style.opacity = '1';
}, 100);
});
</script>
</body>
</html>这个单页应用具有以下特点：
- 清新配色方案：使用柔和的蓝色和橙色作为主色调
- 圆角布局：所有元素都采用圆角设计
- Markdown支持：内置简单的Markdown转换功能（实际项目中建议使用专门的库如marked.js）
- 标签切换：用户协议、隐私政策和Cookie政策可通过标签切换
- 动画效果：包含页面加载动画、按钮悬停效果和内容切换动画
- 响应式设计：适配不同屏幕尺寸
- 用户友好：清晰的排版、舒适的阅读体验和交互反馈
页面包含三个主要部分：用户协议、隐私政策和Cookie政策，每个部分都使用Markdown风格的格式编写，便于维护和更新。
需支付 5元 阅读剩余内容
