Merge pull request #77 from zonghaoyuan/feat/legal-pages

feat(web): add privacy & terms pages for Google OAuth verification

README.md

@@ -132,7 +132,7 @@ docker compose up -d
 
 ## 团队与愿景
 
-我们是一群来自清华大学、兰州大学、西安交通大学等高校的年轻人。
+我们是一群来自清华大学、兰州大学等高校的年轻人。
 
 一方面，我们本来就是galgame、乙女游戏、FMV、AI角色扮演游戏这类游戏的深度用户，在享受游戏体验的同时，也会想象如果能选择不被预设的剧情选项，或者和对话的AI角色深度互动而不只是通过聊天软件聊天，该是多么愉快刺激的体验。
 
@@ -145,9 +145,9 @@ docker compose up -d
 
 联系方式：hi@infiplot.com
 
-欢迎扫码加入 **InfiPlot 内测交流群**（QQ 群号 `575404333`），一起反馈体验、参与共建：
+欢迎扫码加入 **InfiPlot 公测交流群**（QQ 群号 `575404333`），一起反馈体验、参与共建：
 
-<img src="public/qq-group.webp" alt="InfiPlot 内测交流群 QQ 二维码" width="200" />
+<img src="public/qq-group.webp" alt="InfiPlot 公测交流群 QQ 二维码" width="200" />
 
 ---
 

app/page.tsx

@@ -1742,7 +1742,7 @@ export default function HomePage() {
               >
                 <i className="fa-solid fa-file-import text-sm" />
                 <span className="pointer-events-none absolute -bottom-8 left-1/2 -translate-x-1/2 whitespace-nowrap rounded bg-clay-900 px-2 py-1 font-sans text-[11px] text-cream-50 opacity-0 transition-opacity group-hover:opacity-100">
-                  载入infiplot剧情
+                  载入剧情
                 </span>
               </button>
             </div>
@@ -1846,7 +1846,7 @@ export default function HomePage() {
           <div>
             <p className="text-[10px] smallcaps text-clay-500 mb-3">团 队</p>
             <p className="font-serif italic text-clay-700 text-base leading-relaxed">
-              我们来自清华大学、兰州大学、西安交通大学等高校，希望探索多模态模型在「直接生成图片、视频」这类 <span className="not-italic">one-shot</span> 能力之外，更多的可能性。本项目目前仍处于早期阶段，我们还在招募成员，如果你也感兴趣，欢迎联系我们，期待你的加入。
+              我们来自清华大学、兰州大学等高校，希望探索多模态模型在「直接生成图片、视频」这类 <span className="not-italic">oneshot</span> 能力之外，更多的可能性。本项目目前仍处于早期阶段，我们还在招募成员，如果你也感兴趣，欢迎联系我们，期待你的加入。
             </p>
           </div>
 
@@ -1888,7 +1888,7 @@ export default function HomePage() {
             <p className="text-[10px] smallcaps text-clay-500 mb-3">内 测 用 户 群</p>
             <img
               src="/qq-group.webp"
-              alt="InfiPlot 内测交流群 QQ 群二维码（群号 575404333）"
+              alt="InfiPlot 公测交流群 QQ 群二维码（群号 575404333）"
               width={760}
               height={760}
               loading="lazy"
@@ -1903,9 +1903,9 @@ export default function HomePage() {
 
         <div className="hairline-full w-full mt-14 md:mt-20 mb-12 md:mb-16" />
         <p className="mx-auto max-w-3xl text-center font-sans text-xs md:text-[13px] leading-[1.85] text-clay-500">
-          内测期间本产品可免费使用，但稳定性可能会随并发用户数量而有波动。寻找算力赞助商ing，欢迎联系^-^
+          公测期间本产品可免费使用，但稳定性可能会随并发用户数量而有波动。
           <br />
-          目前，内测期间生成的内容不会被保存，如有需要，请通过录屏或截图等方式保存游玩体验，并记录下生成故事时的提示词与风格选项等。
+          公测期间生成的内容不会在服务器上保存。如需留存，请在游玩结束后使用导出图集或分享剧情功能保存您的游玩体验。
           <br />
           AI 生成的内容不代表本团队立场。
           {analyticsOn && (
@@ -1928,8 +1928,13 @@ export default function HomePage() {
 
       <footer className="mx-auto w-full max-w-[1640px] px-6 md:px-16 pb-10 mt-auto">
         <div className="hairline-full w-full mb-5" />
-        <div className="flex flex-col items-center text-[10px] smallcaps text-clay-500">
+        <div className="flex flex-col items-center gap-2 text-[10px] smallcaps text-clay-500">
           <span>© 2026 InfiPlot. All rights reserved.</span>
+          <span className="flex items-center gap-3 normal-case tracking-normal text-[11px]">
+            <a href="/privacy" className="hover:text-ember-500 transition-colors">隐私政策</a>
+            <span className="text-clay-300">·</span>
+            <a href="/terms" className="hover:text-ember-500 transition-colors">服务条款</a>
+          </span>
         </div>
       </footer>
 

app/privacy/page.tsx

@@ -0,0 +1,217 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+
+export const metadata: Metadata = {
+  title: "隐私政策 — InfiPlot",
+  description: "InfiPlot 隐私政策：了解我们如何收集、使用和保护您的个人信息。",
+};
+
+export default function PrivacyPage() {
+  return (
+    <main className="mx-auto w-full max-w-3xl px-6 md:px-16 py-16 md:py-24">
+      <Link
+        href="/"
+        className="inline-flex items-center gap-2 text-clay-500 hover:text-ember-500 transition-colors text-sm mb-12"
+      >
+        <i className="fa-solid fa-arrow-left text-xs" />
+        <span>返回首页</span>
+      </Link>
+
+      <h1 className="font-serif text-3xl md:text-4xl text-clay-900 mb-4">
+        隐私政策
+      </h1>
+      <p className="text-sm text-clay-500 mb-12">
+        生效日期：2026 年 6 月 14 日 &nbsp;|&nbsp; 最后更新：2026 年 6 月 14 日
+      </p>
+
+      <div className="hairline-full w-full mb-12" />
+
+      <div className="space-y-10 text-clay-800 text-[15px] leading-[1.85]">
+        <section>
+          <h2 className="font-serif text-xl text-clay-900 mb-3">概述</h2>
+          <p>
+            InfiPlot（以下简称"我们"）是一款用 AI
+            实时生成内容的交互式剧情游戏。我们重视您的隐私，并致力于以透明的方式处理您的个人信息。本隐私政策说明了我们在您使用
+            InfiPlot 服务时如何收集、使用、存储和保护您的数据。
+          </p>
+        </section>
+
+        <section>
+          <h2 className="font-serif text-xl text-clay-900 mb-3">
+            我们收集的信息
+          </h2>
+          <p className="mb-3">
+            当您通过第三方账号（Google 或 GitHub）登录时，我们会接收以下信息：
+          </p>
+          <ul className="list-disc pl-6 space-y-1">
+            <li>您的电子邮件地址</li>
+            <li>您的显示名称</li>
+            <li>您的头像图片 URL</li>
+          </ul>
+          <p className="mt-3">
+            当您通过电子邮件验证码登录时，我们仅收集您的电子邮件地址。
+          </p>
+          <p className="mt-3">
+            您在游戏中输入的故事提示词和对话选择会被传输至服务器以供 AI 模型实时处理，但不会在我们的服务器上持久存储。游戏会话结束后，相关数据不会被保留。
+          </p>
+        </section>
+
+        <section>
+          <h2 className="font-serif text-xl text-clay-900 mb-3">
+            我们如何使用您的信息
+          </h2>
+          <p>我们仅将收集到的信息用于以下目的：</p>
+          <ul className="list-disc pl-6 space-y-1 mt-3">
+            <li>
+              <strong>身份验证</strong>
+              ：验证您的身份并维持登录状态。
+            </li>
+            <li>
+              <strong>个性化显示</strong>
+              ：在界面中展示您的用户名和头像。
+            </li>
+            <li>
+              <strong>服务沟通</strong>
+              ：使用您的电子邮件地址向您发送与服务相关的重要通知，例如产品更新、功能变更或运营信息。
+            </li>
+          </ul>
+          <p className="mt-3">
+            我们不会将您的个人信息用于广告投放、用户画像、行为分析或任何其他未在本政策中明确说明的用途。
+          </p>
+        </section>
+
+        <section>
+          <h2 className="font-serif text-xl text-clay-900 mb-3">
+            数据存储与安全
+          </h2>
+          <p>
+            您的账户信息存储在{" "}
+            <a
+              href="https://supabase.com/"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-ember-500 hover:text-ember-400 transition-colors underline decoration-clay-900/20 underline-offset-2"
+            >
+              Supabase
+            </a>{" "}
+            提供的托管数据库中。Supabase
+            采用行业标准的安全措施来保护数据，包括传输加密（TLS）和静态加密。
+          </p>
+        </section>
+
+        <section>
+          <h2 className="font-serif text-xl text-clay-900 mb-3">
+            第三方共享
+          </h2>
+          <p>
+            我们不会出售、出租或以其他方式向第三方共享您的个人信息。我们不会将您的数据用于第三方广告或营销目的。
+          </p>
+        </section>
+
+        <section>
+          <h2 className="font-serif text-xl text-clay-900 mb-3">
+            数据保留与删除
+          </h2>
+          <p>
+            我们在您持有有效账户期间保留您的账户信息。您可以随时通过发送邮件至{" "}
+            <a
+              href="mailto:hi@infiplot.com"
+              className="text-ember-500 hover:text-ember-400 transition-colors"
+            >
+              hi@infiplot.com
+            </a>{" "}
+            请求删除您的账户及所有相关数据。我们将在收到请求后的 30
+            个自然日内完成数据删除。
+          </p>
+        </section>
+
+        <section>
+          <h2 className="font-serif text-xl text-clay-900 mb-3">
+            匿名统计分析
+          </h2>
+          <p>
+            本站可能使用开源的{" "}
+            <a
+              href="https://umami.is/"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-ember-500 hover:text-ember-400 transition-colors underline decoration-clay-900/20 underline-offset-2"
+            >
+              Umami
+            </a>{" "}
+            进行隐私友好的匿名访问与交互统计。该分析工具不使用
+            Cookie、不收集个人信息、不发送任何您输入的内容、不做跨站追踪。此功能为可选配置，可能不会在所有部署中启用。
+          </p>
+        </section>
+
+        <section>
+          <h2 className="font-serif text-xl text-clay-900 mb-3">
+            Google API 服务用户数据政策
+          </h2>
+          <p>
+            InfiPlot 对通过 Google API
+            获取的用户数据的使用和转移，遵守{" "}
+            <a
+              href="https://developers.google.com/terms/api-services-user-data-policy"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-ember-500 hover:text-ember-400 transition-colors underline decoration-clay-900/20 underline-offset-2"
+            >
+              Google API Services User Data Policy
+            </a>
+            ，包括有限使用（Limited Use）要求。具体而言：
+          </p>
+          <ul className="list-disc pl-6 space-y-1 mt-3">
+            <li>我们仅请求提供服务所必需的最小权限范围（电子邮件、个人资料）。</li>
+            <li>我们不会将 Google 用户数据用于广告投放或再营销。</li>
+            <li>我们不会将 Google 用户数据出售给第三方。</li>
+            <li>我们不会将 Google 用户数据用于信用评估或贷款。</li>
+            <li>我们不会将 Google 用户数据用于训练通用 AI/ML 模型。</li>
+          </ul>
+        </section>
+
+        <section>
+          <h2 className="font-serif text-xl text-clay-900 mb-3">
+            儿童隐私
+          </h2>
+          <p>
+            InfiPlot
+            不面向 13 岁以下的儿童。我们不会有意收集 13
+            岁以下儿童的个人信息。如果您认为我们无意中收集了儿童的信息，请联系我们，我们将立即采取措施删除相关数据。
+          </p>
+        </section>
+
+        <section>
+          <h2 className="font-serif text-xl text-clay-900 mb-3">
+            隐私政策的变更
+          </h2>
+          <p>
+            我们可能会不时更新本隐私政策。如有重大变更，我们将通过在网站上发布更新后的政策并修改"最后更新"日期来通知您。继续使用我们的服务即表示您接受更新后的隐私政策。
+          </p>
+        </section>
+
+        <section>
+          <h2 className="font-serif text-xl text-clay-900 mb-3">联系我们</h2>
+          <p>
+            如果您对本隐私政策有任何疑问或希望行使您的数据权利，请通过以下方式联系我们：
+          </p>
+          <p className="mt-3">
+            邮箱：{" "}
+            <a
+              href="mailto:hi@infiplot.com"
+              className="text-ember-500 hover:text-ember-400 transition-colors"
+            >
+              hi@infiplot.com
+            </a>
+          </p>
+        </section>
+      </div>
+
+      <div className="hairline-full w-full mt-16 mb-8" />
+
+      <footer className="text-center text-[10px] smallcaps text-clay-500 pb-10">
+        <span>© 2026 InfiPlot. All rights reserved.</span>
+      </footer>
+    </main>
+  );
+}

app/terms/page.tsx

@@ -0,0 +1,196 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+
+export const metadata: Metadata = {
+  title: "服务条款 — InfiPlot",
+  description: "InfiPlot 服务条款：使用 InfiPlot 服务前请阅读本条款。",
+};
+
+export default function TermsPage() {
+  return (
+    <main className="mx-auto w-full max-w-3xl px-6 md:px-16 py-16 md:py-24">
+      <Link
+        href="/"
+        className="inline-flex items-center gap-2 text-clay-500 hover:text-ember-500 transition-colors text-sm mb-12"
+      >
+        <i className="fa-solid fa-arrow-left text-xs" />
+        <span>返回首页</span>
+      </Link>
+
+      <h1 className="font-serif text-3xl md:text-4xl text-clay-900 mb-4">
+        服务条款
+      </h1>
+      <p className="text-sm text-clay-500 mb-12">
+        生效日期：2026 年 6 月 14 日 &nbsp;|&nbsp; 最后更新：2026 年 6 月 14 日
+      </p>
+
+      <div className="hairline-full w-full mb-12" />
+
+      <div className="space-y-10 text-clay-800 text-[15px] leading-[1.85]">
+        <section>
+          <h2 className="font-serif text-xl text-clay-900 mb-3">
+            服务说明
+          </h2>
+          <p>
+            InfiPlot（以下简称"我们"或"本服务"）是一款用 AI
+            实时生成图片、语音与剧情分支的交互式剧情游戏。本服务目前处于公测阶段，功能和可用性可能随时发生变化。
+          </p>
+          <p className="mt-3">
+            使用本服务即表示您同意遵守本服务条款。如果您不同意本条款的任何部分，请停止使用本服务。
+          </p>
+        </section>
+
+        <section>
+          <h2 className="font-serif text-xl text-clay-900 mb-3">
+            账户与登录
+          </h2>
+          <p>
+            您可以通过 Google、GitHub 账户或电子邮件验证码登录本服务。您有责任保管好自己的账户凭证，并对通过您的账户进行的所有活动负责。
+          </p>
+        </section>
+
+        <section>
+          <h2 className="font-serif text-xl text-clay-900 mb-3">
+            用户行为准则
+          </h2>
+          <p>使用本服务时，您同意不会：</p>
+          <ul className="list-disc pl-6 space-y-1 mt-3">
+            <li>利用本服务生成违反法律法规的内容。</li>
+            <li>尝试对服务进行逆向工程、攻击或以非正常方式使用 API。</li>
+            <li>干扰或破坏服务的正常运行，或对服务基础设施造成不合理的负担。</li>
+            <li>冒充他人或虚假陈述您与任何个人或实体的关系。</li>
+          </ul>
+        </section>
+
+        <section>
+          <h2 className="font-serif text-xl text-clay-900 mb-3">
+            AI 生成内容
+          </h2>
+          <p>
+            本服务中的图片、文字、语音等内容均由 AI
+            实时生成。AI 生成的内容不代表本团队的观点或立场。我们无法完全控制 AI
+            生成内容的准确性、适当性或完整性。
+          </p>
+          <p className="mt-3">
+            您理解并同意，AI
+            生成的内容可能存在不准确、不恰当或令人不适的情况。您应自行判断和承担使用
+            AI 生成内容的风险。
+          </p>
+        </section>
+
+        <section>
+          <h2 className="font-serif text-xl text-clay-900 mb-3">
+            知识产权
+          </h2>
+          <p>
+            InfiPlot 的源代码基于{" "}
+            <a
+              href="https://www.gnu.org/licenses/agpl-3.0.html"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-ember-500 hover:text-ember-400 transition-colors underline decoration-clay-900/20 underline-offset-2"
+            >
+              AGPL-3.0
+            </a>{" "}
+            许可证开源。
+          </p>
+          <p className="mt-3">
+            通过本服务生成的游戏内容（包括故事文本、图片和语音）由您在游戏会话期间创造性地引导产生。我们不主张对您个人游戏会话中生成的内容拥有所有权。
+          </p>
+        </section>
+
+        <section>
+          <h2 className="font-serif text-xl text-clay-900 mb-3">
+            数据与隐私
+          </h2>
+          <p>
+            公测期间生成的游戏内容不会被持久保存在我们的服务器上。为提供 AI 生成服务，相关内容会在请求处理过程中临时传输和处理，处理完成后不会被保留。有关我们如何处理您的个人信息，请参阅我们的{" "}
+            <Link
+              href="/privacy"
+              className="text-ember-500 hover:text-ember-400 transition-colors underline decoration-clay-900/20 underline-offset-2"
+            >
+              隐私政策
+            </Link>
+            。
+          </p>
+        </section>
+
+        <section>
+          <h2 className="font-serif text-xl text-clay-900 mb-3">
+            服务可用性
+          </h2>
+          <p>
+            本服务目前处于公测阶段，免费提供使用。我们不保证服务的持续可用性、稳定性或性能。服务可能会因维护、升级或不可抗力因素而中断。
+          </p>
+          <p className="mt-3">
+            我们保留随时修改、暂停或终止服务（或其任何部分）的权利，无论是否通知。
+          </p>
+        </section>
+
+        <section>
+          <h2 className="font-serif text-xl text-clay-900 mb-3">
+            免责声明
+          </h2>
+          <p>
+            本服务按"现状"和"可用"的基础提供，不附带任何明示或暗示的保证。在法律允许的最大范围内，我们明确否认所有保证，包括但不限于对适销性、特定用途适用性和非侵权性的暗示保证。
+          </p>
+        </section>
+
+        <section>
+          <h2 className="font-serif text-xl text-clay-900 mb-3">
+            责任限制
+          </h2>
+          <p>
+            在法律允许的最大范围内，InfiPlot
+            团队及其成员在任何情况下均不对因使用或无法使用本服务而产生的任何间接、附带、特殊、后果性或惩罚性损害负责。
+          </p>
+        </section>
+
+        <section>
+          <h2 className="font-serif text-xl text-clay-900 mb-3">
+            账户终止
+          </h2>
+          <p>
+            我们保留在以下情况下暂停或终止您的账户的权利：
+          </p>
+          <ul className="list-disc pl-6 space-y-1 mt-3">
+            <li>您违反了本服务条款。</li>
+            <li>您的行为对服务或其他用户构成风险。</li>
+            <li>法律法规要求我们这样做。</li>
+          </ul>
+        </section>
+
+        <section>
+          <h2 className="font-serif text-xl text-clay-900 mb-3">
+            条款变更
+          </h2>
+          <p>
+            我们可能会不时更新本服务条款。如有重大变更，我们将通过在网站上发布更新后的条款来通知您。继续使用本服务即表示您接受更新后的条款。
+          </p>
+        </section>
+
+        <section>
+          <h2 className="font-serif text-xl text-clay-900 mb-3">联系我们</h2>
+          <p>
+            如果您对本服务条款有任何疑问，请通过以下方式联系我们：
+          </p>
+          <p className="mt-3">
+            邮箱：{" "}
+            <a
+              href="mailto:hi@infiplot.com"
+              className="text-ember-500 hover:text-ember-400 transition-colors"
+            >
+              hi@infiplot.com
+            </a>
+          </p>
+        </section>
+      </div>
+
+      <div className="hairline-full w-full mt-16 mb-8" />
+
+      <footer className="text-center text-[10px] smallcaps text-clay-500 pb-10">
+        <span>© 2026 InfiPlot. All rights reserved.</span>
+      </footer>
+    </main>
+  );
+}