Update index.html

index.html

@@ -1,19 +1,325 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ChineseSignLanguage — 中国手语学习与交流平台 · 支持、隐私与服务条款</title>
+    <meta name="description" content="ChineseSignLanguage 致力于为手语爱好者、听障人士及社会大众提供丰富、便捷的中国手语学习资源与工具。支持、隐私政策及服务条款。">
+    <style>
+        :root {
+            --primary-color: #2a72d7;
+            --primary-dark: #1d4ed8;
+            --text-color: #0f172a;
+            --bg-color: #f8fafc;
+            --container-bg: #ffffff;
+            --border-color: #e2e8f0;
+            --muted: #64748b;
+            --accent-red: #dc2626;
+            --afdian-color: #946ce6;
+            --afdian-dark: #7e57c2;
+        }
+        * { box-sizing: border-box; }
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
+            line-height: 1.65;
+            color: var(--text-color);
+            background-color: var(--bg-color);
+            margin: 0;
+            padding: 0;
+            -webkit-font-smoothing: antialiased;
+        }
+        .container {
+            max-width: 820px;
+            margin: 40px auto;
+            background: var(--container-bg);
+            padding: 44px;
+            border-radius: 14px;
+            box-shadow: 0 6px 20px rgba(15,23,42,0.06);
+        }
+        header {
+            text-align: center;
+            margin-bottom: 36px;
+            border-bottom: 2px solid var(--border-color);
+            padding-bottom: 24px;
+        }
+        .brand {
+            width: 56px;
+            height: 56px;
+            margin: 0 auto 14px;
+            border-radius: 15px;
+            background: linear-gradient(150deg, #3b82f6, #1d4ed8);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            box-shadow: 0 6px 14px rgba(37,99,235,0.28);
+        }
+        .brand svg { display: block; }
+        h1 {
+            color: var(--primary-dark);
+            font-size: 30px;
+            margin: 0 0 8px;
+            letter-spacing: -0.4px;
+        }
+        h2 {
+            color: var(--primary-dark);
+            font-size: 22px;
+            margin-top: 42px;
+            border-bottom: 1px solid var(--border-color);
+            padding-bottom: 10px;
+        }
+        h3 {
+            font-size: 17px;
+            margin-top: 26px;
+            color: #1c2b3a;
+        }
+        p { margin-bottom: 14px; }
+        ul { margin-bottom: 14px; padding-left: 22px; }
+        li { margin-bottom: 8px; }
+        hr {
+            border: 0;
+            height: 1px;
+            background: var(--border-color);
+            margin: 42px 0;
+        }
+        .highlight { font-weight: 700; color: var(--primary-dark); }
+        .callout {
+            background: #eff6ff;
+            border-left: 4px solid var(--primary-color);
+            padding: 14px 18px;
+            border-radius: 8px;
+            margin: 18px 0;
+            color: var(--muted);
+        }
+        .callout strong { color: var(--text-color); }
+        .warning {
+            background: #fef2f2;
+            border-left: 4px solid var(--accent-red);
+            padding: 14px 18px;
+            border-radius: 8px;
+            margin: 18px 0;
+            color: var(--muted);
+        }
+        .warning strong { color: var(--accent-red); }
+        .afdian-banner {
+            background: #f3e8ff;
+            border: 1px solid #d8b4fe;
+            border-left: 6px solid var(--afdian-color);
+            padding: 18px 20px;
+            border-radius: 10px;
+            margin: 24px 0;
+            text-align: center;
+        }
+        .afdian-banner h3 {
+            margin: 0 0 8px 0;
+            color: var(--afdian-dark);
+            font-size: 18px;
+        }
+        .afdian-banner p {
+            margin: 0 0 14px 0;
+            font-size: 14px;
+            color: #581c87;
+        }
+        .afdian-btn {
+            display: inline-block;
+            background-color: var(--afdian-color);
+            color: #ffffff !important;
+            padding: 10px 24px;
+            border-radius: 8px;
+            font-weight: bold;
+            text-decoration: none;
+            box-shadow: 0 4px 12px rgba(148, 108, 230, 0.3);
+            transition: background-color 0.2s ease;
+        }
+        .afdian-btn:hover {
+            background-color: var(--afdian-dark);
+        }
+        .nav {
+            margin-top: 16px;
+            font-size: 14px;
+        }
+        .nav a { margin: 0 6px; }
+        table {
+            width: 100%;
+            border-collapse: collapse;
+            margin: 18px 0;
+            font-size: 15px;
+        }
+        th, td {
+            border: 1px solid var(--border-color);
+            padding: 10px 12px;
+            text-align: left;
+            vertical-align: top;
+        }
+        th {
+            background: #f1f5f9;
+            color: var(--primary-dark);
+            font-weight: 600;
+        }
+        .disclaimer {
+            background: #fffbeb;
+            border: 1px solid #fef08a;
+            border-left: 4px solid #d97706;
+            border-radius: 10px;
+            padding: 16px 20px;
+            margin: 0 0 8px;
+            color: var(--muted);
+        }
+        .disclaimer strong { color: var(--text-color); }
+        .disclaimer p { margin: 8px 0 0; font-size: 15px; }
+        .disclaimer p:first-of-type { margin-top: 6px; }
+        footer {
+            text-align: center;
+            color: var(--muted);
+            font-size: 13px;
+            margin-top: 36px;
+        }
+        a { color: var(--primary-dark); }
+        code {
+            background: #f1f5f9;
+            padding: 1px 6px;
+            border-radius: 5px;
+            font-size: 13px;
+        }
+        @media (max-width: 640px) {
+            .container { margin: 0; border-radius: 0; padding: 26px 20px; }
+            h1 { font-size: 25px; }
+            h2 { font-size: 20px; }
+        }
+    </style>
+</head>
+<body>
+
+<div class="container">
+    <header>
+        <div class="brand" aria-hidden="true">
+            <!-- 手语 / 给予与交流手势图标 -->
+            <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M18 11V6a2 2 0 0 0-2-2v0a2 2 0 0 0-2 2v0"></path>
+                <path d="M14 10V4a2 2 0 0 0-2-2v0a2 2 0 0 0-2 2v8"></path>
+                <path d="M10 10.5V6a2 2 0 0 0-2-2v0a2 2 0 0 0-2 2v8.5"></path>
+                <path d="M7 15a6 6 0 0 0 12 0v-3a2 2 0 0 0-2-2v0a2 2 0 0 0-2 2"></path>
+            </svg>
+        </div>
+        <h1>ChineseSignLanguage</h1>
+        <p>让无声的世界被听见 — 专注于中国手语普及、学习与交流的开源/公益项目</p>
+        <p>爱发电赞助支持：<a href="https://afdian.com/a/ChineseSignLanguage" target="_blank" rel="noopener">afdian.com/a/ChineseSignLanguage</a></p>
+        <p class="nav">
+            <a href="#support">使用与支持</a> ·
+            <a href="#sponsor">赞助与发电</a> ·
+            <a href="#privacy">隐私政策</a> ·
+            <a href="#terms">服务条款</a>
+        </p>
+    </header>
+
+    <!-- 宣传爱发电赞助模块 -->
+    <div class="afdian-banner" id="sponsor">
+        <h3>⚡ 在“爱发电”支持 ChineseSignLanguage 创作</h3>
+        <p>如果 ChineseSignLanguage 为您的学习或工作带来了帮助，欢迎前往爱发电平台支持我们的持续开发、词库整理及维护工作！</p>
+        <a href="https://afdian.com/a/ChineseSignLanguage" target="_blank" rel="noopener" class="afdian-btn">去爱发电支持我们 ❤️</a>
+    </div>
+
+    <div class="disclaimer">
+        <strong>关于手语词汇与学习参考说明</strong>
+        <p>ChineseSignLanguage 中的所有手语词汇、演示与教学资料均收集整理自公共资源及国家标准手语规范。我们致力于帮助大家掌握和应用中国手语（CSL），促进无障碍沟通。</p>
+        <p>由于各地可能存在手语地方方言或习惯差异，请在具体交流场景中以实际使用者的沟通习惯为准。</p>
+    </div>
+
+    <!-- 支持与常见问题 Section -->
+    <section id="support">
+        <h2>使用与技术支持 (Support)</h2>
+
+        <p><span class="highlight">ChineseSignLanguage</span> 是一个专注于国家通用手语学习、词汇检索和无障碍沟通辅助的项目。旨在为手语学习者、听障人士、手语翻译及社会大众提供清晰、便捷的参考字典与检索工具。</p>
+
+        <div class="callout">
+            <strong>无障碍沟通·非官方代言：</strong> ChineseSignLanguage 为独立开发与整理的公益/开源项目，旨在推广手语知识与无障碍理念。
+        </div>
+
+        <p><span class="highlight">联系与反馈</span><br>
+        如果您在使用过程中遇到任何问题、有词条修正建议或合作意向，欢迎通过以下方式与我们联系：<br>
+        🌐 官方爱发电主页：<a href="https://afdian.com/a/ChineseSignLanguage" target="_blank" rel="noopener">https://afdian.com/a/ChineseSignLanguage</a><br>
+        📧 支持邮箱：<a href="mailto:710354687@qq.com">710354687@qq.com</a></p>
+
+        <p><span class="highlight">常见问题解答 (FAQ)</span></p>
+
+        <p><strong>ChineseSignLanguage 可以做什么？</strong><br>
+        提供通用手语词汇查询、手语拼音/汉字检索、手语动作图解与视频演示、日常场景对话以及无障碍交流卡片等功能。</p>
+
+        <p><strong>我需要联网才能使用吗？</strong><br>
+        大部分基础手语词库及图解内置于应用中，支持离线查询。在线更新或视频高清播放功能需要网络连接。</p>
+
+        <p><strong>如何支持 ChineseSignLanguage 项目的发展？</strong><br>
+        我们是一个长期维护的项目，维护服务器与整理手语词库需要大量精力。您可以直接访问我们的 <a href="https://afdian.com/a/ChineseSignLanguage" target="_blank" rel="noopener">爱发电主页</a> 进行赞助，您的支持将用于服务器续费、新词条录入以及手语教学视频的拍摄制作。</p>
+
+        <table>
+            <thead>
+                <tr><th style="width:50%">基础功能 (Free)</th><th>赞助与支持者权益 (Sponsors)</th></tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td>国家通用手语常用词汇检索与学习</td>
+                    <td>包含基础版的所有功能</td>
+                </tr>
+                <tr>
+                    <td>手语拼音与汉字查找</td>
+                    <td>爱发电专享更新日志与开发进度提前看</td>
+                </tr>
+                <tr>
+                    <td>离线常用手语图解卡片</td>
+                    <td>在项目贡献榜/致谢名单中留下您的名字</td>
+                </tr>
+                <tr>
+                    <td>日常基础场景沟通短语</td>
+                    <td>解锁高级高清手语教学示范视频与拓展词库</td>
+                </tr>
+            </tbody>
+        </table>
+    </section>
+
+    <hr>
+
+    <!-- 隐私政策 Section -->
+    <section id="privacy">
+        <h2>隐私政策 (Privacy Policy)</h2>
+
+        <p><strong>适用于：</strong> ChineseSignLanguage 平台及相关移动/网页应用。<br>
+        <strong>核心承诺：</strong> 我们尊重并保护所有用户的隐私，<span class="highlight">不强制收集个人身份信息，不进行广告追踪</span>。</p>
+
+        <p><strong>1. 数据收集说明</strong><br>
+        我们不会强制要求您注册账号即可使用基础查询功能。如果使用离线功能，所有检索历史和收藏词条均仅保存在您的本地设备上。</p>
+
+        <p><strong>2. 赞助与支付信息</strong><br>
+        所有的赞助与打赏均通过第三方合规平台（如爱发电 Afdian）完成，我们不会直接接触或存储您的银行卡、微信/支付宝支付敏感信息。</p>
+
+        <p><strong>3. 数据安全与隐私保障</strong><br>
+        保存在您本地设备上的个人收藏与笔记数据完全归您所有，您可以随时卸载或清除应用缓存以删除这些数据。</p>
+
+        <p><strong>联系方式：</strong> 如对隐私政策有任何疑问，请联系 📧 <a href="mailto:710354687@qq.com">710354687@qq.com</a>。</p>
+    </section>
+
+    <hr>
+
+    <!-- 服务条款 Section -->
+    <section id="terms">
+        <h2>服务条款 (Terms of Service)</h2>
+
+        <p><strong>1. 条款接受</strong><br>
+        通过访问或使用 ChineseSignLanguage，即表示您同意遵守本服务条款及相关法律法规。</p>
+
+        <p><strong>2. 知识产权与使用许可</strong><br>
+        ChineseSignLanguage 平台内的软件代码、界面设计、整理的手语数据库等版权归项目开发者所有。用户可将本产品用于个人学习、教学与无障碍交流，未经许可不得将数据库打包二次售卖。</p>
+
+        <p><strong>3. 爱发电赞助说明</strong><br>
+        通过 <a href="https://afdian.com/a/ChineseSignLanguage" target="_blank" rel="noopener">爱发电平台 (afdian.com)</a> 给予赞助属于自愿无偿支持或购买特定赞助者权益的行为，赞助款项将直接用于支持项目的持续更新与运营。</p>
+
+        <p><strong>4. 免责声明</strong><br>
+        本平台手语资料仅供学习参考，开发者不对因手语理解偏差导致的沟通误会承担法律责任。</p>
+    </section>
+
+    <footer>
+        <p>爱发电赞助主页：<a href="https://afdian.com/a/ChineseSignLanguage" target="_blank" rel="noopener">https://afdian.com/a/ChineseSignLanguage</a></p>
+        <p>ChineseSignLanguage — 普及中国手语，共建无障碍沟通环境。© 2026 ChineseSignLanguage. All rights reserved.</p>
+    </footer>
+</div>
+
+</body>
+</html>