066eb8f820
Music Creation Page: - Vinyl 3D flip to view lyrics, tonearm animation, glow rotation effect - Circular SVG progress ring, speech bubble feedback, confirm dialog - Playlist modal, free creation input, lyrics formatting optimization - MiniMax API real music generation with SSE streaming progress Backend: - FastAPI proxy server.py for MiniMax API calls - Music + lyrics file persistence to Capybara music/ directory - GET /api/playlist endpoint for auto-building playlist from files UI/UX Refinements: - frontend-design skill compliance across all pages - Glassmorphism effects, modal interactions, scroll tap prevention - iPhone 12 Pro responsive layout (390x844) Flutter Development Preparation: - Installed flutter-expert skill with 6 reference docs - Added 5 Cursor Rules: official Flutter, clean architecture, UI performance, testing, Dart standards Assets: - 9 Capybara music MP3 files + lyrics TXT files - MiniMax API documentation Co-authored-by: Cursor <cursoragent@cursor.com>
217 lines
7.9 KiB
HTML
217 lines
7.9 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport"
|
||
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
|
||
<title>Airhub - 个人信息收集清单</title>
|
||
<link rel="stylesheet" href="styles.css">
|
||
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=DM+Sans:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||
<style>
|
||
.page-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 16px 20px;
|
||
padding-top: calc(env(safe-area-inset-top, 20px) + 48px);
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
position: absolute;
|
||
top: 0;
|
||
z-index: 10;
|
||
}
|
||
|
||
.back-btn {
|
||
background: rgba(255, 255, 255, 0.25);
|
||
backdrop-filter: blur(8px);
|
||
border: 1px solid rgba(255, 255, 255, 0.4);
|
||
width: 44px;
|
||
height: 44px;
|
||
border-radius: 22px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #1F2937;
|
||
cursor: pointer;
|
||
transition: all 0.2s;
|
||
}
|
||
|
||
.back-btn:active {
|
||
transform: scale(0.92);
|
||
}
|
||
|
||
.page-title {
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
color: #1F2937;
|
||
}
|
||
|
||
.content-scroll {
|
||
padding: calc(env(safe-area-inset-top, 20px) + 120px) 24px 40px;
|
||
overflow-y: auto;
|
||
flex: 1;
|
||
width: 100%;
|
||
height: 100%;
|
||
box-sizing: border-box;
|
||
color: #374151;
|
||
line-height: 1.6;
|
||
font-size: 15px;
|
||
position: relative;
|
||
z-index: 2;
|
||
scrollbar-width: none;
|
||
/* Firefox */
|
||
-webkit-mask-image: linear-gradient(to bottom, transparent 0px, transparent 100px, black 130px, black 100%);
|
||
mask-image: linear-gradient(to bottom, transparent 0px, transparent 100px, black 130px, black 100%);
|
||
}
|
||
|
||
.content-scroll::-webkit-scrollbar {
|
||
display: none;
|
||
/* Chrome/Safari */
|
||
}
|
||
|
||
.info-card {
|
||
background: rgba(255, 255, 255, 0.7);
|
||
padding: 20px;
|
||
border-radius: 16px;
|
||
margin-bottom: 16px;
|
||
border: 1px solid rgba(255, 255, 255, 0.4);
|
||
backdrop-filter: blur(10px);
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
|
||
}
|
||
|
||
.info-title {
|
||
font-weight: 700;
|
||
color: #1F2937;
|
||
margin-bottom: 12px;
|
||
font-size: 16px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.info-title::before {
|
||
content: '';
|
||
width: 4px;
|
||
height: 16px;
|
||
background: linear-gradient(to bottom, #ECCFA8, #C99672);
|
||
border-radius: 2px;
|
||
display: block;
|
||
}
|
||
|
||
.info-row {
|
||
display: flex;
|
||
flex-direction: column;
|
||
margin-bottom: 12px;
|
||
font-size: 14px;
|
||
border-bottom: 1px dashed rgba(0, 0, 0, 0.05);
|
||
padding-bottom: 10px;
|
||
}
|
||
|
||
.info-row:last-child {
|
||
border-bottom: none;
|
||
margin-bottom: 0;
|
||
padding-bottom: 0;
|
||
}
|
||
|
||
.info-label {
|
||
color: #6B7280;
|
||
font-size: 12px;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.info-val {
|
||
color: #374151;
|
||
font-weight: 500;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<div class="app-container">
|
||
<div class="gradient-bg">
|
||
<div class="gradient-layer layer-1"></div>
|
||
</div>
|
||
<header class="page-header">
|
||
<button class="back-btn" onclick="history.back()">
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path d="M15 18l-6-6 6-6"></path>
|
||
</svg>
|
||
</button>
|
||
<span class="page-title">个人信息收集清单</span>
|
||
<div style="width: 44px;"></div>
|
||
</header>
|
||
<main class="content-scroll">
|
||
<p style="margin-bottom: 20px; font-size: 13px; color: #6B7280;">为了向您提供 Airhub
|
||
的核心服务，我们需要收集以下类型的个人信息。我们将严格遵守法律法规，保护您的个人信息安全。</p>
|
||
|
||
<div class="info-card">
|
||
<div class="info-title">基础功能服务</div>
|
||
<div class="info-row">
|
||
<span class="info-label">收集信息类型</span>
|
||
<span class="info-val">手机号码、登录密码</span>
|
||
</div>
|
||
<div class="info-row">
|
||
<span class="info-label">使用目的</span>
|
||
<span class="info-val">用于账号注册、登录、找回密码及身份认证</span>
|
||
</div>
|
||
<div class="info-row">
|
||
<span class="info-label">收集场景</span>
|
||
<span class="info-val">用户注册或登录 APP 时</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="info-card">
|
||
<div class="info-title">硬件连接与控制</div>
|
||
<div class="info-row">
|
||
<span class="info-label">收集信息类型</span>
|
||
<span class="info-val">Wi-Fi信息(SSID/BSSID)、蓝牙信息、设备序列号(SN)、MAC地址</span>
|
||
</div>
|
||
<div class="info-row">
|
||
<span class="info-label">使用目的</span>
|
||
<span class="info-val">用于发现附近设备、建立蓝牙/Wi-Fi连接、设备配网及固件升级</span>
|
||
</div>
|
||
<div class="info-row">
|
||
<span class="info-label">收集场景</span>
|
||
<span class="info-val">绑定设备、连接设备或使用设备控制功能时</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="info-card">
|
||
<div class="info-title">AI 语音交互业务</div>
|
||
<div class="info-row">
|
||
<span class="info-label">收集信息类型</span>
|
||
<span class="info-val">语音录音、对话文本、交互时间</span>
|
||
</div>
|
||
<div class="info-row">
|
||
<span class="info-label">使用目的</span>
|
||
<span class="info-val">将语音转换为文本以理解指令、生成 AI 回复、优化语音识别模型</span>
|
||
</div>
|
||
<div class="info-row">
|
||
<span class="info-label">收集场景</span>
|
||
<span class="info-val">使用语音对话功能与 AI 角色互动时</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="info-card">
|
||
<div class="info-title">应用安全保障</div>
|
||
<div class="info-row">
|
||
<span class="info-label">收集信息类型</span>
|
||
<span class="info-val">设备IMSI/IMEI、Android ID、IP地址、操作日志</span>
|
||
</div>
|
||
<div class="info-row">
|
||
<span class="info-label">使用目的</span>
|
||
<span class="info-val">风控验证、安全防范、故障排查与分析</span>
|
||
</div>
|
||
<div class="info-row">
|
||
<span class="info-label">收集场景</span>
|
||
<span class="info-val">APP 运行期间（包括后台运行）</span>
|
||
</div>
|
||
</div>
|
||
|
||
<p style="margin-top: 20px; color: #9CA3AF; font-size: 12px; text-align: center;">更新日期：2025年1月15日</p>
|
||
</main>
|
||
</div>
|
||
</body>
|
||
|
||
</html> |