comi-logic/duooomi-official
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

隐私协议与服务政策

Browse Source
This commit is contained in:
郭文文
2026-03-27 14:29:49 +08:00
parent 55d1ecf684
commit c8dbd56b4a
10 changed files with 2915 additions and 308 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
package.json
View File

@@ -10,11 +10,14 @@
"preview": "vite preview"
},
"dependencies": {
"markdown-it": "^14.1.1",
"react": "^19.2.0",
"react-dom": "^19.2.0"
"react-dom": "^19.2.0",
"react-router-dom": "^7.13.2"
},
"devDependencies": {
"@eslint/js": "^9.39.1",
"@types/markdown-it": "^14.1.2",
"@types/node": "^24.10.1",
"@types/react": "^19.2.5",
"@types/react-dom": "^19.2.3",

2212
pnpm-lock.yaml generated Normal file
View File

File diff suppressed because it is too large Load Diff

68
public/content/privacy.md Normal file
View File

@@ -0,0 +1,68 @@
# 隐私协议 / Privacy Policy
## 1. 引言 / Introduction
多米（深圳）创意科技有限公司（以下简称"我们"）非常重视您的隐私。本隐私政策说明了我们在您使用服务时如何处理您的信息。
DuoooMi (Shenzhen) Creative Technology Co., Ltd (hereinafter referred to as “we")values your privacy highly. This Privacy Policy explains how we handle your information when you use our services.
## 2. 信息收集最小化声明 / Data Minimization Statement
### 2.1 我们收集的信息 / Information We Collect
我们遵循数据最小化原则。为了提供服务及进行登录认证，我们仅收集和存您注册时提供的手机号码。
We adhere to the principle of data minimization. To provide our services and facilitate login authentication, we only collect and store the phone number provided by youduring registration.
### 2.2 我们不收集的信息 / Information We Do NOT Collect
我们不存储您的姓名、物理地址或任何其他个人身份信息。
We do not store your name, physical address, or any other personally identifiable information.
## 3. 支付信息安全 / Payment Information Security
### 3.1 支付数据处理 / Payment Data Processing
所有的支付交易均由第三方支付处理商支付宝、苹果支付安全处理。我们不会在其服务器上存储或处理您的信用卡号、银行账户详情或任何敏感的支付信息。
All payment transactions are securely processed by third-party payment processors.Alipay and Apple Pay. We do not store or process your credit card numbers, bankaccount details, or any other sensitive payment information on our servers.
### 3.2 支付隐私政策 / Payment Privacy Policy
您提供的支付信息受第三方支付处理商隐私政策的约束。我们建议您阅读相应处理商的隐私政策以了解其数据处理惯例。
The payment information you provide is subject to the privacy policies of the respectivethird-party payment processors. We encourage you to review the privacy policy of therelevant processor to understand their data handling practices.
## 4. 信息的使用 / Use of Information
您提供的手机号码仅用于以下用途：
Your phone number is used solely for the following purposes:
1. 作为您登录系统的唯一凭证；
As your unique credential for logging into the system;
2. 接收关于订阅状态、发票和系统更新的通知；
Receiving notifications regarding subscription status, invoices, and system updates;
3. 处理客户支持和退款请求。
Processing customer support and refund requests.
## 5. 数据共享与披露 / Data Sharing and Disclosure
除法律要求或为了执行我们的服务条款（例如通过支付宝处理付款）外，我们不会向任何第三方出售、出租或共享您的手机号码。
We do not sell, rent, or share your phone number with any third parties, except asrequired by law or as necessary to enforce our Terms of Service (such as processingpayments through Alipay).
## 6. 联系我们 / Contact Us
如果您对本隐私政策有任何疑问，请通过以下方式联系我们：
If you have any questions regarding this Privacy Policy, please contact us at:
- 公司名称 / Company Name: 多米（深圳l） 创意科技有限公司 / DuoooMi (Shenzhen) Creative Technology Co., Ltd
- 客服邮箱 / Support Email: support@duooomi.com

196
public/content/terms.md Normal file
View File

@@ -0,0 +1,196 @@
# 服务条款 / Terms of Service
## 1. 引言 / Introduction
欢迎使用 多米（深圳）创意科技有限公司（以下简称"我们"）提供的服务。在使用我们的服务之前，请仔细阅读本服务条款。通过访问或使用我们的服务，您同意受本条款的约束。
Welcome to the services provided by BOWONG AI (HK) LIMITED (hereinafter referred to as "we" or "our company"). Please read these Terms of Service carefully before using our services. By accessing or using our services, you agree to be bound by these terms.
## 2. 服务描述 / Service Description
### 2.1 服务内容 / Service Content
我们提供基于人工智能的设计和内容生成服务，包括但不限于：
We provide AI-based design and content generation services, including but not limited to:
- AI 驱动的设计工具和模板生成
AI-powered design tools and template generation;
- 创意内容生成和编辑功能
Creative content generation and editing features;
- 设计项目管理和协作工具
Design project management and collaboration tools;
- 其他相关技术服务
Other related technical services.
### 2.2 服务变更 / Service Modifications
我们保留随时修改、暂停或终止任何服务的权利，恕不另行通知。我们不对因服务变更而可能导致的任何损失承担责任。
We reserve the right to modify, suspend, or terminate any service at any time without prior notice. We shall not be liable for any losses that may result from service modifications.
## 3. 用户账户 / User Accounts
### 3.1 账户注册 / Account Registration
要使用我们的服务，您需要创建一个账户。注册时，您必须：
To use our services, you need to create an account. When registering, you must:
- 提供真实、准确、完整的信息
Provide true, accurate, and complete information;
- 维护并及时更新您的账户信息
Maintain and promptly update your account information;
- 对您账户下的所有活动负责
Be responsible for all activities under your account.
### 3.2 账户安全 / Account Security
您有责任维护账户信息的机密性，包括您的密码。您同意对您账户下的所有活动负责，并立即通知我们任何未经授权的使用。
You are responsible for maintaining the confidentiality of your account information, including your password. You agree to be responsible for all activities under your account and to immediately notify us of any unauthorized use.
## 4. 使用规范 / Acceptable Use
### 4.1 合法使用 / Legal Use
您同意仅将我们的服务用于合法目的，并遵守所有适用的法律法规。
You agree to use our services only for lawful purposes and in compliance with all applicable laws and regulations.
### 4.2 禁止行为 / Prohibited Activities
您不得：
You shall not:
- 使用服务从事任何非法活动
Use the service for any illegal activities;
- 上传、发布或传输任何违法、有害、威胁、辱骂、骚扰、诽谤、粗俗、淫秽或其他令人反感的内容
Upload, post, or transmit any illegal, harmful, threatening, abusive, harassing, defamatory, vulgar, obscene, or otherwise objectionable content;
- 侵犯他人的知识产权或其他权利
Infringe upon the intellectual property or other rights of others;
- 干扰或破坏服务的正常运行
Interfere with or disrupt the normal operation of the service;
- 尝试未经授权访问任何系统或网络
Attempt to gain unauthorized access to any system or network;
- 使用自动化工具或脚本滥用服务
Abuse the service using automated tools or scripts.
## 5. 知识产权 / Intellectual Property
### 5.1 我们的权利 / Our Rights
服务及其所有内容，包括但不限于文本、图形、徽标、图标、图像、音频剪辑、数字下载、数据编译和软件，均为我们或我们的内容提供商的财产，受版权、商标和其他知识产权法保护。
The service and all its content, including but not limited to text, graphics, logos, icons, images, audio clips, digital downloads, data compilations, and software, are the property of us or our content providers and are protected by copyright, trademark, and other intellectual property laws.
### 5.2 用户内容 / User Content
您保留对您上传或创建的内容的所有权利。通过使用我们的服务，您授予我们使用、复制、修改、分发和公开展示此类内容的非独占、全球性、免版税的许可，仅用于提供和改进我们的服务。
You retain all rights to the content you upload or create. By using our services, you grant us a non-exclusive, worldwide, royalty-free license to use, copy, modify, distribute, and publicly display such content solely for the purpose of providing and improving our services.
## 6. 付费服务 / Paid Services
### 6.1 订阅和付款 / Subscriptions and Payments
某些服务可能需要付费订阅。您同意按照我们网站上显示的价格支付所有费用。所有费用均以美元或其他指定货币支付，且不可退还，除非法律另有规定或我们另有说明。
Certain services may require paid subscriptions. You agree to pay all fees as displayed on our website. All fees are payable in USD or other specified currency and are non-refundable unless otherwise stated by law or us.
### 6.2 自动续订 / Auto-Renewal
除非您取消订阅，否则订阅将自动续订。您可以在订阅设置中随时取消自动续订。
Subscriptions will automatically renew unless you cancel them. You may cancel auto-renewal at any time in your subscription settings.
### 6.3 退款政策 / Refund Policy
除非法律另有规定或我们另有说明，所有付款均为最终付款且不可退还。如果您对服务不满意，请联系我们的客户支持。
All payments are final and non-refundable unless otherwise required by law or stated by us. If you are dissatisfied with the service, please contact our customer support.
## 7. 隐私保护 / Privacy
我们非常重视您的隐私。有关我们如何收集、使用和保护您的信息，请参阅我们的[隐私协议](/privacy)。
We take your privacy seriously. Please refer to our [Privacy Policy](/privacy) for information on how we collect, use, and protect your information.
## 8. 免责声明 / Disclaimer
### 8.1 服务"按现状"提供 / Service "As Is"
服务按"现状"和"可用"的基础提供，不提供任何明示或暗示的保证，包括但不限于适销性、特定用途的适用性和非侵权性的保证。
The service is provided on an "as is" and "as available" basis without any express or implied warranties, including but not limited to warranties of merchantability, fitness for a particular purpose, and non-infringement.
### 8.2 责任限制 / Limitation of Liability
在法律允许的最大范围内，我们不对任何间接、偶然、特殊、后果性或惩罚性损害承担责任，即使我们已被告知此类损害的可能性。
To the maximum extent permitted by law, we shall not be liable for any indirect, incidental, special, consequential, or punitive damages, even if we have been advised of the possibility of such damages.
## 9. 服务终止 / Termination
### 9.1 终止权利 / Termination Rights
我们保留随时终止或暂停您对服务的访问的权利，无论是否事先通知，原因包括但不限于违反本条款。
We reserve the right to terminate or suspend your access to the service at any time, with or without prior notice, for reasons including but not limited to violation of these terms.
### 9.2 终止后果 / Consequences of Termination
服务终止后，您访问服务的权利将立即终止。本条款中在终止后仍然有效的条款将继续适用。
Upon termination, your right to access the service will immediately cease. The provisions of these terms that by their nature should survive termination will continue to apply.
## 10. 条款修改 / Modifications to Terms
我们保留随时修改本条款的权利。重大变更将通过电子邮件或网站公告通知您。继续使用服务即表示您接受修改后的条款。
We reserve the right to modify these terms at any time. Material changes will be notified to you via email or website notice. Continued use of the service constitutes your acceptance of the modified terms.
## 11. 适用法律 / Governing Law
本条款受香港特别行政区法律管辖，并按其解释。任何争议应提交香港特别行政区有管辖权的法院解决。
These terms shall be governed by and construed in accordance with the laws of the Hong Kong Special Administrative Region. Any disputes shall be submitted to the competent courts of the Hong Kong Special Administrative Region.
## 12. 联系我们 / Contact Us
如果您对本服务条款有任何疑问，请通过以下方式联系我们：
If you have any questions regarding these Terms of Service, please contact us at:
- **公司名称 / Company Name:** B多米（深圳l） 创意科技有限公司 / DuoooMi (Shenzhen) Creative Technology Co., Ltd
- **客服邮箱 / Support Email:** support@duooomi.com
---
通过使用我们的服务，您确认已阅读、理解并同意遵守本服务条款。
By using our services, you acknowledge that you have read, understood, and agree to be bound by these Terms of Service.

321
src/App.tsx
View File

@@ -1,310 +1,19 @@
import { useState } from 'react'
import './App.css'
// src/App.tsx
import { Routes, Route } from 'react-router-dom';
import Home from './pages/home';
import Terms from './pages/terms';
import Privacy from './pages/privacy';
function App() {
const [openFaq, setOpenFaq] = useState<number | null>(0)
return (
<div className="app">
{/* Hero 区 */}
<section className="hero">
<div className="container">
<h1 className="hero-title">duooomi · 你的电子吧唧情绪宇宙</h1>
<p className="hero-subtitle">
用数字吧唧记录每一次心动、每一段关系，把情绪变成可以收藏、分享和互动的「小宇宙」。
</p>
<p className="hero-desc">
不再只是聊天记录，而是可以捏、可以展示的电子吧唧，专属于你和他/她。
</p>
<div className="hero-features">
<span className="feature-tag">情绪上链：用电子吧唧记录每个瞬间</span>
<span className="feature-tag">关系养成：和 Ta 一起解锁专属徽章与记忆</span>
<span className="feature-tag">轻量社交：用吧唧表达自己，不必解释太多</span>
</div>
<div className="hero-cta">
<button className="btn-primary">立即下载 duooomi</button>
<button className="btn-secondary">看看 duooomi 怎么玩</button>
</div>
</div>
</section>
{/* 区块一：我们在解决什么问题？ */}
<section className="section">
<div className="container">
<h2 className="section-title">聊天记录翻不到的瞬间，duooomi 都帮你留住</h2>
<p className="section-subtitle">
情绪来得快、消失也快；关系再亲密，很多小心意都会被时间冲淡。duooomi 想做的，是帮你把这些"转瞬即逝"，变成可以被看见、被收藏的「电子吧唧」。
</p>
<div className="pain-points">
<div className="pain-point">
<h3>记不住</h3>
<p>重要的日子、表情包、截图，全都散落在聊天记录和相册里。</p>
</div>
<div className="pain-point">
<h3>说不清</h3>
<p>想表达在意、想感谢、想道歉，却总觉得话说得太重或太轻。</p>
</div>
<div className="pain-point">
<h3>没仪式感</h3>
<p>感情再好，也常常只有一句"收到"，缺少一点属于你们的小仪式。</p>
</div>
</div>
<p className="section-summary">
所以，我们发明了"电子吧唧"——一种更轻、更可爱、更有仪式感的表达方式。
</p>
</div>
</section>
{/* 区块二：什么是「电子吧唧」？ */}
<section className="section section-alt">
<div className="container">
<h2 className="section-title">电子吧唧，就是可以点亮、收集、互动的情绪徽章</h2>
<p className="section-desc">
在 duooomi 里，每一个电子吧唧都是一段情绪的缩影：可能是一句口头禅、一个只有你们懂的梗、一次难忘的约会、甚至是一句没说出口的「谢谢」或「对不起」。
<br />
你可以把它送给自己，也可以送给在意的人，让"感觉"变成一个可以看见、可以点亮的小物件。
</p>
<div className="features-list">
<div className="feature-item">
<div className="feature-number">01</div>
<div className="feature-content">
<h3>自定义吧唧</h3>
<p>名字、图标、颜色、含义，都由你来设定。</p>
</div>
</div>
<div className="feature-item">
<div className="feature-number">02</div>
<div className="feature-content">
<h3>互动点亮</h3>
<p>对方可以收下、点亮、回复，形成一条完整的情绪互动链路。</p>
</div>
</div>
<div className="feature-item">
<div className="feature-number">03</div>
<div className="feature-content">
<h3>情绪档案</h3>
<p>所有送出/收到的吧唧，都会沉淀为「情绪档案」，成为你的小小人生博物馆。</p>
</div>
</div>
</div>
</div>
</section>
{/* 区块三：核心场景示例 */}
<section className="section">
<div className="container">
<h2 className="section-title">他们在用 duooomi 记录生活的细小闪光</h2>
<div className="scenarios">
<div className="scenario-card">
<h3>从"早安晚安"，到有故事的电子吧唧</h3>
<p className="scenario-label">情侣 / 暧昧关系</p>
<p className="scenario-desc">
用 duooomi 为 TA 做一整套「恋爱吧唧」：第一次见面、第一次牵手、第一次吵架和好……每一个节点都对应一枚电子吧唧。
<br />
比起"今天开心""今天不开心"，你们会多了一整面只属于两个人的「情绪墙」。
</p>
</div>
<div className="scenario-card">
<h3>你们的梗，值得一个专属吧唧</h3>
<p className="scenario-label">好朋友 / 室友 / 搭子</p>
<p className="scenario-desc">
为"图书馆自习搭子""打游戏队友""健身监督官"做一套搭子吧唧。每次见面、互相打卡、互相调侃，都能用吧唧记录下来。
<br />
哪天翻开来看，你会发现，你的人生是由一串串小吧唧串成的。
</p>
</div>
<div className="scenario-card">
<h3>就算只给自己，也很值得</h3>
<p className="scenario-label">一个人的情绪角落</p>
<p className="scenario-desc">
一次鼓起勇气的演讲、一场失眠的夜晚、一次不被理解的崩溃……也可以是一个电子吧唧。
<br />
duooomi 不只是用来送人，也是你和自己好好相处的一种方式。
</p>
</div>
</div>
</div>
</section>
{/* 区块四：核心功能一览 */}
<section className="section section-alt">
<div className="container">
<h2 className="section-title">不只是可爱，还很好用</h2>
<div className="functions-list">
<div className="function-item">
<h3>电子吧唧编辑器</h3>
<p>自定义名称、图案、颜色、情绪标签，一分钟做出专属吧唧。</p>
</div>
<div className="function-item">
<h3>情绪统计与回顾</h3>
<p>以日/周/月为单位，看看你最近都在为什么事情「吧唧」，重新认识自己的情绪习惯。</p>
</div>
<div className="function-item">
<h3>一键生成专属吧唧图</h3>
<p>快速生成精美的吧唧图片，方便分享到社交平台。</p>
</div>
<div className="function-item">
<h3>多端同步</h3>
<p>手机多设备同步，换机不丢记忆。</p>
</div>
</div>
</div>
</section>
{/* 区块五：为什么是现在？ */}
<section className="section">
<div className="container">
<h2 className="section-title">在信息爆炸的时代，真正稀缺的是「被看见的情绪」</h2>
<p className="section-desc">
聊天软件、短视频、社交网络，让我们说了很多话，却不一定真正表达了自己。
<br />
duooomi 想做的，是一个更慢一点、更真诚一点的空间，用电子吧唧帮你看见：
</p>
<ul className="vision-list">
<li>自己正在经历什么</li>
<li>谁在认真回应你</li>
<li>哪些瞬间，值得被重复回味</li>
</ul>
<p className="vision-motto">
duooomi 相信，每一次情绪，都值得一个小小的纪念。
</p>
</div>
</section>
{/* 区块六：常见问题 */}
<section className="section section-alt">
<div className="container">
<h2 className="section-title">常见问题</h2>
<div className="faq-list">
<div
className={`faq-item ${openFaq === 0 ? 'open' : ''}`}
onClick={() => setOpenFaq(openFaq === 0 ? null : 0)}
>
<div className="faq-question">
<h3>电子吧唧是虚拟货币吗？</h3>
<span className="faq-icon">{openFaq === 0 ? '^' : 'v'}</span>
</div>
{openFaq === 0 && (
<div className="faq-answer">
<p>不是。电子吧唧是一种情绪/关系的数字徽章，用于表达、记录和互动，而不是金融产品或代币。</p>
</div>
)}
</div>
<div
className={`faq-item ${openFaq === 1 ? 'open' : ''}`}
onClick={() => setOpenFaq(openFaq === 1 ? null : 1)}
>
<div className="faq-question">
<h3>我的数据会安全吗？</h3>
<span className="faq-icon">{openFaq === 1 ? '^' : 'v'}</span>
</div>
{openFaq === 1 && (
<div className="faq-answer">
<p>你在 duooomi 的情绪记录和关系数据，会严格加密存储。你可以为敏感吧唧设置仅自己可见，任何第三方（包括我们）都无法查看你的私密内容。</p>
</div>
)}
</div>
<div
className={`faq-item ${openFaq === 2 ? 'open' : ''}`}
onClick={() => setOpenFaq(openFaq === 2 ? null : 2)}
>
<div className="faq-question">
<h3>一个人也可以用 duooomi 吗？</h3>
<span className="faq-icon">{openFaq === 2 ? '^' : 'v'}</span>
</div>
{openFaq === 2 && (
<div className="faq-answer">
<p>当然可以。你可以给自己送吧唧，把它当成一个"情绪日记本"，记录成长和心境变化。</p>
</div>
)}
</div>
<div
className={`faq-item ${openFaq === 4 ? 'open' : ''}`}
onClick={() => setOpenFaq(openFaq === 4 ? null : 4)}
>
<div className="faq-question">
<h3>如何创建一个电子吧唧？</h3>
<span className="faq-icon">{openFaq === 4 ? '^' : 'v'}</span>
</div>
{openFaq === 4 && (
<div className="faq-answer">
<p>创建电子吧唧非常简单：打开 duooomi，点击"创建吧唧"，选择图标、颜色，输入名称和含义，一分钟就能完成。你可以为不同的情绪和场景创建专属的吧唧。</p>
</div>
)}
</div>
<div
className={`faq-item ${openFaq === 6 ? 'open' : ''}`}
onClick={() => setOpenFaq(openFaq === 6 ? null : 6)}
>
<div className="faq-question">
<h3>电子吧唧可以删除或修改吗？</h3>
<span className="faq-icon">{openFaq === 6 ? '^' : 'v'}</span>
</div>
{openFaq === 6 && (
<div className="faq-answer">
<p>可以。你可以随时编辑或删除自己创建的电子吧唧。但已经送出的吧唧会保留在对方的情绪档案中，这是你们共同记忆的一部分。</p>
</div>
)}
</div>
{/* <div
className={`faq-item ${openFaq === 7 ? 'open' : ''}`}
onClick={() => setOpenFaq(openFaq === 7 ? null : 7)}
>
<div className="faq-question">
<h3>duooomi 是免费的吗？</h3>
<span className="faq-icon">{openFaq === 7 ? '^' : 'v'}</span>
</div>
{openFaq === 7 && (
<div className="faq-answer">
<p>duooomi 提供免费版本，包含核心功能。未来我们可能会推出高级功能，但基础的情绪记录和互动功能将始终保持免费，让每个人都能记录和分享自己的情绪瞬间。</p>
</div>
)}
</div> */}
<div
className={`faq-item ${openFaq === 3 ? 'open' : ''}`}
onClick={() => setOpenFaq(openFaq === 3 ? null : 3)}
>
<div className="faq-question">
<h3>未来会有更多玩法吗？</h3>
<span className="faq-icon">{openFaq === 3 ? '^' : 'v'}</span>
</div>
{openFaq === 3 && (
<div className="faq-answer">
<p>我们会逐步增加更多互动玩法，比如吧唧主题活动、关系等级、特殊时期限定吧唧等，让你的情绪宇宙持续长出新星球。</p>
</div>
)}
</div>
</div>
</div>
</section>
{/* 底部 CTA 区 */}
<section className="section cta-section">
<div className="container">
<div className="cta-card">
<h2 className="cta-card-title">开始收集你的第一枚电子吧唧</h2>
<p className="cta-card-subtitle">AI never sleep，情绪永远被看见</p>
<button className="cta-card-button">
立即下载 duooomi
<span className="cta-arrow">→</span>
</button>
</div>
</div>
</section>
{/* Footer */}
<footer className="footer">
<div className="container">
<p className="footer-brand">duooomi · 电子吧唧情绪宇宙</p>
<p className="footer-tagline">AI never sleep，情绪永远被看见</p>
<p className="footer-icp">
<a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener noreferrer">
粤ICP备2025483956号-2
</a>
</p>
</div>
</footer>
</div>
)
return (
<div className="App">
<Routes>
<Route path="/" element={<Home />} />
<Route path="/terms" element={<Terms />} />
<Route path="/privacy" element={<Privacy />} />
</Routes>
</div>
);
}
export default App
export default App;

13
src/index.css
View File

@@ -27,3 +27,16 @@ body {
width: 100%;
min-height: 100vh;
}
.markdown-body p {
margin-bottom: 0.8em !important;
}
.markdown-body h1, .markdown-body h2, .markdown-body h3 {
margin-top: 1.2em !important;
margin-bottom: 0.5em !important;
}
.markdown-body ul {
margin-bottom: 1em !important;
}
.markdown-body li {
margin-bottom: 0.5em !important;
}

5
src/main.tsx
View File

@@ -2,9 +2,12 @@ import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.tsx'
import { BrowserRouter } from 'react-router-dom';
createRoot(document.getElementById('root')!).render(
<StrictMode>
<App />
<BrowserRouter>
<App />
</BrowserRouter>
</StrictMode>,
)

309
src/pages/home.tsx Normal file
View File

@@ -0,0 +1,309 @@
import { useState } from 'react'
import '../App.css'
const Home = () => {
const [openFaq, setOpenFaq] = useState<number | null>(0)
return (
<div className="app">
{/* Hero 区 */}
<section className="hero">
<div className="container">
<h1 className="hero-title">duooomi · 你的电子吧唧情绪宇宙</h1>
<p className="hero-subtitle">
用数字吧唧记录每一次心动、每一段关系，把情绪变成可以收藏、分享和互动的「小宇宙」。
</p>
<p className="hero-desc">
不再只是聊天记录，而是可以捏、可以展示的电子吧唧，专属于你和他/她。
</p>
<div className="hero-features">
<span className="feature-tag">情绪上链：用电子吧唧记录每个瞬间</span>
<span className="feature-tag">关系养成：和 Ta 一起解锁专属徽章与记忆</span>
<span className="feature-tag">轻量社交：用吧唧表达自己，不必解释太多</span>
</div>
<div className="hero-cta">
<button className="btn-primary">立即下载 duooomi</button>
<button className="btn-secondary">看看 duooomi 怎么玩</button>
</div>
</div>
</section>
{/* 区块一：我们在解决什么问题？ */}
<section className="section">
<div className="container">
<h2 className="section-title">聊天记录翻不到的瞬间，duooomi 都帮你留住</h2>
<p className="section-subtitle">
情绪来得快、消失也快；关系再亲密，很多小心意都会被时间冲淡。duooomi 想做的，是帮你把这些"转瞬即逝"，变成可以被看见、被收藏的「电子吧唧」。
</p>
<div className="pain-points">
<div className="pain-point">
<h3>记不住</h3>
<p>重要的日子、表情包、截图，全都散落在聊天记录和相册里。</p>
</div>
<div className="pain-point">
<h3>说不清</h3>
<p>想表达在意、想感谢、想道歉，却总觉得话说得太重或太轻。</p>
</div>
<div className="pain-point">
<h3>没仪式感</h3>
<p>感情再好，也常常只有一句"收到"，缺少一点属于你们的小仪式。</p>
</div>
</div>
<p className="section-summary">
所以，我们发明了"电子吧唧"——一种更轻、更可爱、更有仪式感的表达方式。
</p>
</div>
</section>
{/* 区块二：什么是「电子吧唧」？ */}
<section className="section section-alt">
<div className="container">
<h2 className="section-title">电子吧唧，就是可以点亮、收集、互动的情绪徽章</h2>
<p className="section-desc">
在 duooomi 里，每一个电子吧唧都是一段情绪的缩影：可能是一句口头禅、一个只有你们懂的梗、一次难忘的约会、甚至是一句没说出口的「谢谢」或「对不起」。
<br />
你可以把它送给自己，也可以送给在意的人，让"感觉"变成一个可以看见、可以点亮的小物件。
</p>
<div className="features-list">
<div className="feature-item">
<div className="feature-number">01</div>
<div className="feature-content">
<h3>自定义吧唧</h3>
<p>名字、图标、颜色、含义，都由你来设定。</p>
</div>
</div>
<div className="feature-item">
<div className="feature-number">02</div>
<div className="feature-content">
<h3>互动点亮</h3>
<p>对方可以收下、点亮、回复，形成一条完整的情绪互动链路。</p>
</div>
</div>
<div className="feature-item">
<div className="feature-number">03</div>
<div className="feature-content">
<h3>情绪档案</h3>
<p>所有送出/收到的吧唧，都会沉淀为「情绪档案」，成为你的小小人生博物馆。</p>
</div>
</div>
</div>
</div>
</section>
{/* 区块三：核心场景示例 */}
<section className="section">
<div className="container">
<h2 className="section-title">他们在用 duooomi 记录生活的细小闪光</h2>
<div className="scenarios">
<div className="scenario-card">
<h3>从"早安晚安"，到有故事的电子吧唧</h3>
<p className="scenario-label">情侣 / 暧昧关系</p>
<p className="scenario-desc">
用 duooomi 为 TA 做一整套「恋爱吧唧」：第一次见面、第一次牵手、第一次吵架和好……每一个节点都对应一枚电子吧唧。
<br />
比起"今天开心""今天不开心"，你们会多了一整面只属于两个人的「情绪墙」。
</p>
</div>
<div className="scenario-card">
<h3>你们的梗，值得一个专属吧唧</h3>
<p className="scenario-label">好朋友 / 室友 / 搭子</p>
<p className="scenario-desc">
为"图书馆自习搭子""打游戏队友""健身监督官"做一套搭子吧唧。每次见面、互相打卡、互相调侃，都能用吧唧记录下来。
<br />
哪天翻开来看，你会发现，你的人生是由一串串小吧唧串成的。
</p>
</div>
<div className="scenario-card">
<h3>就算只给自己，也很值得</h3>
<p className="scenario-label">一个人的情绪角落</p>
<p className="scenario-desc">
一次鼓起勇气的演讲、一场失眠的夜晚、一次不被理解的崩溃……也可以是一个电子吧唧。
<br />
duooomi 不只是用来送人，也是你和自己好好相处的一种方式。
</p>
</div>
</div>
</div>
</section>
{/* 区块四：核心功能一览 */}
<section className="section section-alt">
<div className="container">
<h2 className="section-title">不只是可爱，还很好用</h2>
<div className="functions-list">
<div className="function-item">
<h3>电子吧唧编辑器</h3>
<p>自定义名称、图案、颜色、情绪标签，一分钟做出专属吧唧。</p>
</div>
<div className="function-item">
<h3>情绪统计与回顾</h3>
<p>以日/周/月为单位，看看你最近都在为什么事情「吧唧」，重新认识自己的情绪习惯。</p>
</div>
<div className="function-item">
<h3>一键生成专属吧唧图</h3>
<p>快速生成精美的吧唧图片，方便分享到社交平台。</p>
</div>
<div className="function-item">
<h3>多端同步</h3>
<p>手机多设备同步，换机不丢记忆。</p>
</div>
</div>
</div>
</section>
{/* 区块五：为什么是现在？ */}
<section className="section">
<div className="container">
<h2 className="section-title">在信息爆炸的时代，真正稀缺的是「被看见的情绪」</h2>
<p className="section-desc">
聊天软件、短视频、社交网络，让我们说了很多话，却不一定真正表达了自己。
<br />
duooomi 想做的，是一个更慢一点、更真诚一点的空间，用电子吧唧帮你看见：
</p>
<ul className="vision-list">
<li>自己正在经历什么</li>
<li>谁在认真回应你</li>
<li>哪些瞬间，值得被重复回味</li>
</ul>
<p className="vision-motto">
duooomi 相信，每一次情绪，都值得一个小小的纪念。
</p>
</div>
</section>
{/* 区块六：常见问题 */}
<section className="section section-alt">
<div className="container">
<h2 className="section-title">常见问题</h2>
<div className="faq-list">
<div
className={`faq-item ${openFaq === 0 ? 'open' : ''}`}
onClick={() => setOpenFaq(openFaq === 0 ? null : 0)}
>
<div className="faq-question">
<h3>电子吧唧是虚拟货币吗？</h3>
<span className="faq-icon">{openFaq === 0 ? '^' : 'v'}</span>
</div>
{openFaq === 0 && (
<div className="faq-answer">
<p>不是。电子吧唧是一种情绪/关系的数字徽章，用于表达、记录和互动，而不是金融产品或代币。</p>
</div>
)}
</div>
<div
className={`faq-item ${openFaq === 1 ? 'open' : ''}`}
onClick={() => setOpenFaq(openFaq === 1 ? null : 1)}
>
<div className="faq-question">
<h3>我的数据会安全吗？</h3>
<span className="faq-icon">{openFaq === 1 ? '^' : 'v'}</span>
</div>
{openFaq === 1 && (
<div className="faq-answer">
<p>你在 duooomi 的情绪记录和关系数据，会严格加密存储。你可以为敏感吧唧设置仅自己可见，任何第三方（包括我们）都无法查看你的私密内容。</p>
</div>
)}
</div>
<div
className={`faq-item ${openFaq === 2 ? 'open' : ''}`}
onClick={() => setOpenFaq(openFaq === 2 ? null : 2)}
>
<div className="faq-question">
<h3>一个人也可以用 duooomi 吗？</h3>
<span className="faq-icon">{openFaq === 2 ? '^' : 'v'}</span>
</div>
{openFaq === 2 && (
<div className="faq-answer">
<p>当然可以。你可以给自己送吧唧，把它当成一个"情绪日记本"，记录成长和心境变化。</p>
</div>
)}
</div>
<div
className={`faq-item ${openFaq === 4 ? 'open' : ''}`}
onClick={() => setOpenFaq(openFaq === 4 ? null : 4)}
>
<div className="faq-question">
<h3>如何创建一个电子吧唧？</h3>
<span className="faq-icon">{openFaq === 4 ? '^' : 'v'}</span>
</div>
{openFaq === 4 && (
<div className="faq-answer">
<p>创建电子吧唧非常简单：打开 duooomi，点击"创建吧唧"，选择图标、颜色，输入名称和含义，一分钟就能完成。你可以为不同的情绪和场景创建专属的吧唧。</p>
</div>
)}
</div>
<div
className={`faq-item ${openFaq === 6 ? 'open' : ''}`}
onClick={() => setOpenFaq(openFaq === 6 ? null : 6)}
>
<div className="faq-question">
<h3>电子吧唧可以删除或修改吗？</h3>
<span className="faq-icon">{openFaq === 6 ? '^' : 'v'}</span>
</div>
{openFaq === 6 && (
<div className="faq-answer">
<p>可以。你可以随时编辑或删除自己创建的电子吧唧。但已经送出的吧唧会保留在对方的情绪档案中，这是你们共同记忆的一部分。</p>
</div>
)}
</div>
{/* <div
className={`faq-item ${openFaq === 7 ? 'open' : ''}`}
onClick={() => setOpenFaq(openFaq === 7 ? null : 7)}
>
<div className="faq-question">
<h3>duooomi 是免费的吗？</h3>
<span className="faq-icon">{openFaq === 7 ? '^' : 'v'}</span>
</div>
{openFaq === 7 && (
<div className="faq-answer">
<p>duooomi 提供免费版本，包含核心功能。未来我们可能会推出高级功能，但基础的情绪记录和互动功能将始终保持免费，让每个人都能记录和分享自己的情绪瞬间。</p>
</div>
)}
</div> */}
<div
className={`faq-item ${openFaq === 3 ? 'open' : ''}`}
onClick={() => setOpenFaq(openFaq === 3 ? null : 3)}
>
<div className="faq-question">
<h3>未来会有更多玩法吗？</h3>
<span className="faq-icon">{openFaq === 3 ? '^' : 'v'}</span>
</div>
{openFaq === 3 && (
<div className="faq-answer">
<p>我们会逐步增加更多互动玩法，比如吧唧主题活动、关系等级、特殊时期限定吧唧等，让你的情绪宇宙持续长出新星球。</p>
</div>
)}
</div>
</div>
</div>
</section>
{/* 底部 CTA 区 */}
<section className="section cta-section">
<div className="container">
<div className="cta-card">
<h2 className="cta-card-title">开始收集你的第一枚电子吧唧</h2>
<p className="cta-card-subtitle">AI never sleep，情绪永远被看见</p>
<button className="cta-card-button">
立即下载 duooomi
<span className="cta-arrow">→</span>
</button>
</div>
</div>
</section>
{/* Footer */}
<footer className="footer">
<div className="container">
<p className="footer-brand">duooomi · 电子吧唧情绪宇宙</p>
<p className="footer-tagline">AI never sleep，情绪永远被看见</p>
<p className="footer-icp">
<a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener noreferrer">
粤ICP备2025483956号-2
</a>
</p>
</div>
</footer>
</div>
)
};
export default Home;

47
src/pages/privacy.tsx Normal file
View File

@@ -0,0 +1,47 @@
import { useMemo, useEffect, useState } from 'react';
import MarkdownIt from 'markdown-it';
const Privacy = () => {
const [content, setContent] = useState('');
const md = useMemo(() => new MarkdownIt({
html: true,
linkify: true,
typographer: true,
}), []);
// 从 public/content/privacy.md 加载内容
useEffect(() => {
fetch('/content/privacy.md')
.then(res => res.text())
.then(text => setContent(text));
}, []);
const html = useMemo(() => md.render(content), [md, content]);
return (
<div style={{
background: '#f7f7f7',
minHeight: '100vh',
padding: '60px 20px',
fontFamily: '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif'
}}>
<div style={{
maxWidth: '800px',
margin: '0 auto',
background: '#fff',
borderRadius: '12px',
padding: '50px 60px',
boxShadow: '0 4px 12px rgba(0,0,0,0.05)',
lineHeight: '2.1',
fontSize: '15px',
color: '#222'
}}>
<div
className="markdown-body"
dangerouslySetInnerHTML={{ __html: html }} />
</div>
</div>
);
};
export default Privacy;

47
src/pages/terms.tsx Normal file
View File

@@ -0,0 +1,47 @@
import { useMemo, useEffect, useState } from 'react';
import MarkdownIt from 'markdown-it';
const Terms = () => {
const [content, setContent] = useState('');
const md = useMemo(() => new MarkdownIt({
html: true,
linkify: true,
typographer: true,
}), []);
// 从 public/content/terms.md 加载内容
useEffect(() => {
fetch('/content/terms.md')
.then(res => res.text())
.then(text => setContent(text));
}, []);
const html = useMemo(() => md.render(content), [md, content]);
return (
<div style={{
background: '#f7f7f7',
minHeight: '100vh',
padding: '60px 20px',
fontFamily: '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif'
}}>
<div style={{
maxWidth: '800px',
margin: '0 auto',
background: '#fff',
borderRadius: '12px',
padding: '50px 60px',
boxShadow: '0 4px 12px rgba(0,0,0,0.05)',
lineHeight: '2.1',
fontSize: '15px',
color: '#222'
}}>
<div
className="markdown-body"
dangerouslySetInnerHTML={{ __html: html }} />
</div>
</div>
);
};
export default Terms;