rtc_prd/sharing-list.html
seaislee1209 066eb8f820 feat: music-creation page + MiniMax API integration + Flutter dev setup
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>
2026-02-06 18:23:19 +08:00

192 lines
7.7 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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 */
}
.share-item {
background: rgba(255, 255, 255, 0.7);
border-radius: 16px;
padding: 20px;
margin-bottom: 16px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
border: 1px solid rgba(255, 255, 255, 0.4);
}
.share-header {
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
padding-bottom: 12px;
margin-bottom: 12px;
}
.share-company {
font-weight: 700;
font-size: 16px;
color: #1F2937;
margin-bottom: 2px;
}
.share-type {
font-size: 12px;
color: #B07D5A;
background: rgba(176, 125, 90, 0.1);
padding: 2px 8px;
border-radius: 4px;
display: inline-block;
}
.share-row {
display: flex;
margin-bottom: 8px;
font-size: 13px;
line-height: 1.5;
}
.share-label {
color: #6B7280;
width: 70px;
flex-shrink: 0;
}
.share-val {
color: #374151;
flex: 1;
}
</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
的相关功能实现与应用安全稳定运行我们可能会接入第三方提供的软件开发包SDK或服务。我们将审慎评估合作方的安全保障能力并要求其遵守严格的保密协议。</p>
<div class="share-item">
<div class="share-header">
<div class="share-company">阿里云计算有限公司</div>
<div class="share-type">阿里云对象存储/API网关 SDK</div>
</div>
<div class="share-row"><span class="share-label">使用目的</span><span
class="share-val">用于存储角色记忆数据、用户头像及语音文件提供云端API服务稳定性。</span></div>
<div class="share-row"><span class="share-label">收集数据</span><span
class="share-val">设备信息(IP地址)、网络连接状态。</span></div>
<div class="share-row"><span class="share-label">共享方式</span><span class="share-val">SDK 本机采集</span>
</div>
<div class="share-row"><span class="share-label">隐私政策</span><span
class="share-val">https://terms.aliyun.com/legal-agreement/terms</span></div>
</div>
<div class="share-item">
<div class="share-header">
<div class="share-company">深圳市腾讯计算机系统有限公司</div>
<div class="share-type">微信开放平台 SDK</div>
</div>
<div class="share-row"><span class="share-label">使用目的</span><span
class="share-val">用于支持微信账号一键登录、分享内容至微信朋友圈或会话。</span></div>
<div class="share-row"><span class="share-label">收集数据</span><span
class="share-val">设备标识信息、微信个人授权信息(昵称、头像)。</span></div>
<div class="share-row"><span class="share-label">共享方式</span><span class="share-val">SDK 本机采集</span>
</div>
<div class="share-row"><span class="share-label">隐私政策</span><span
class="share-val">https://weixin.qq.com/cgi-bin/readtemplate?t=weixin_agreement</span></div>
</div>
<div class="share-item">
<div class="share-header">
<div class="share-company">深圳市和讯华谷信息技术有限公司</div>
<div class="share-type">极光推送 (JPush) SDK</div>
</div>
<div class="share-row"><span class="share-label">使用目的</span><span
class="share-val">用于实现消息推送功能,向您发送设备状态更新通知或系统公告。</span></div>
<div class="share-row"><span class="share-label">收集数据</span><span
class="share-val">设备标识符(IMEI/MAC/Android ID/IDFA)、网络信息、应用安装列表。</span></div>
<div class="share-row"><span class="share-label">共享方式</span><span class="share-val">SDK 本机采集</span>
</div>
<div class="share-row"><span class="share-label">隐私政策</span><span
class="share-val">https://www.jiguang.cn/license/privacy</span></div>
</div>
<p style="margin-top: 20px; color: #9CA3AF; font-size: 12px; text-align: center;">更新日期2025年1月15日</p>
</main>
</div>
</body>
</html>