feat(web): rebuild web with Astro 6 + React 19 + Tailwind 4
Replace static HTML website with Astro SSG framework: - Astro 6 + React 19 (client islands) + Tailwind CSS 4 + shadcn/ui - i18n: zh/zh_Hant/en with URL prefix routing - Pages: Landing, Features, Pricing, About, Privacy, Terms (3 locales) - Responsive full-width layout with scroll reveal animations - Cyber gradient theme with particle effects inspired by Kimi - Features page: alternating layout with hexagram illustrations - Legal pages: markdown rendering with side info card - Language switcher preserves current page path - Assets shared via symlinks to web/design/assets/ (no duplication) Tech decisions documented in .trellis/spec/web/index.md Task: .trellis/tasks/05-08-web-astro-react-tailwind-shadcn-ui
This commit is contained in:
zl-q
@@ -197,6 +197,15 @@ unlinked_spec.ds
|
||||
# IDE
|
||||
.idea/
|
||||
|
||||
# Codex local workspace helpers and runtime state
|
||||
.codex/
|
||||
|
||||
# Web (Astro)
|
||||
node_modules/
|
||||
.astro/
|
||||
web/dist/
|
||||
web/package-lock.json
|
||||
|
||||
# Android related
|
||||
**/android/**/gradle-wrapper.jar
|
||||
.gradle/
|
||||
|
||||
@@ -0,0 +1,232 @@
|
||||
# Web Development Guidelines
|
||||
|
||||
> Astro 6 + React 19 + Tailwind CSS 4 + shadcn/ui
|
||||
|
||||
---
|
||||
|
||||
## Tech Stack
|
||||
|
||||
| Layer | Technology | Version |
|
||||
|-------|-----------|---------|
|
||||
| Framework | Astro | 6.x |
|
||||
| Interactive UI | React | 19.x (client-only, no RSC) |
|
||||
| Styling | Tailwind CSS | 4.x (via `@tailwindcss/vite`) |
|
||||
| Component Library | shadcn/ui | latest |
|
||||
| Language | TypeScript | 5.x (strict) |
|
||||
| i18n | Built-in (type-safe object in `src/i18n/utils.ts`) | - |
|
||||
| Markdown Rendering | `marked` | latest |
|
||||
| Auth | Supabase Auth JS SDK | - |
|
||||
|
||||
### Architecture Decision
|
||||
|
||||
- **Astro SSG** for marketing/public pages (SEO-critical)
|
||||
- **React client islands** for interactive parts (Login, Dashboard, Notifications)
|
||||
- **No React Server Components** — CVE-2025-55182 risk eliminated
|
||||
- **No Next.js** — multiple critical CVEs (CVE-2025-55182, CVE-2025-29927, CVE-2025-66478)
|
||||
|
||||
### Actual Dependencies
|
||||
|
||||
```
|
||||
astro, @astrojs/react, react, react-dom, @tailwindcss/vite, tailwindcss, marked
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Pre-Development Checklist
|
||||
|
||||
Before writing web code, read:
|
||||
|
||||
- [ ] This index
|
||||
- [ ] Design file: `web/design/eryao.pen`
|
||||
- [ ] Backend API contracts: `docs/protocols/`
|
||||
- [ ] Error code mapping: `docs/protocols/common/http-error-codes.md`
|
||||
- [ ] Mobile i18n files (for translation sync): `apps/lib/l10n/app_*.arb`
|
||||
|
||||
---
|
||||
|
||||
## Project Structure
|
||||
|
||||
```
|
||||
web/
|
||||
├── design/ # Pencil design files (.pen)
|
||||
│ ├── eryao.pen
|
||||
│ └── assets/ # Shared assets (images, legal)
|
||||
│ ├── images/
|
||||
│ └── legal/{zh,zh_Hant,en}/
|
||||
├── public/
|
||||
│ ├── images -> ../design/assets/images # symlink, no duplication
|
||||
│ ├── legal -> ../design/assets/legal # symlink, no duplication
|
||||
│ ├── favicon.ico
|
||||
│ └── favicon.svg
|
||||
├── src/
|
||||
│ ├── components/
|
||||
│ │ ├── Navbar.astro # Marketing nav (responsive, lang switcher)
|
||||
│ │ ├── Footer.astro # Marketing footer (responsive)
|
||||
│ │ ├── Hero.astro # Landing hero section
|
||||
│ │ ├── Showcase.astro # Landing showcase section
|
||||
│ │ ├── Testimonials.astro # Landing testimonials section
|
||||
│ │ ├── CtaSection.astro # Landing CTA section
|
||||
│ │ ├── FeaturesPage.astro # Features grid page
|
||||
│ │ ├── PricingPage.astro # Pricing cards page
|
||||
│ │ ├── AboutPage.astro # About + company info page
|
||||
│ │ └── LegalPage.astro # Markdown legal page (generic)
|
||||
│ ├── layouts/
|
||||
│ │ └── Marketing.astro # Nav + content + footer + scroll animations
|
||||
│ ├── pages/
|
||||
│ │ ├── index.astro # Root redirect -> /zh/
|
||||
│ │ ├── {zh,zh_Hant,en}/
|
||||
│ │ │ ├── index.astro # Landing
|
||||
│ │ │ ├── features.astro
|
||||
│ │ │ ├── pricing.astro
|
||||
│ │ │ ├── about.astro
|
||||
│ │ │ ├── privacy.astro
|
||||
│ │ │ └── terms.astro
|
||||
│ ├── i18n/
|
||||
│ │ └── utils.ts # Type-safe translations (all inline)
|
||||
│ └── styles/
|
||||
│ ├── global.css # Tailwind entry
|
||||
│ └── animations.css # Scroll reveal animations
|
||||
├── astro.config.mjs
|
||||
├── tsconfig.json
|
||||
└── package.json
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Responsive Layout
|
||||
|
||||
**All pages must be fully responsive: full-width sections, no fixed pixel widths.**
|
||||
|
||||
### Layout Principles
|
||||
|
||||
1. **Full-width sections** — Each section spans `w-full`, content is centered with `max-w-7xl mx-auto`
|
||||
2. **No fixed pixel widths** — Use `w-full`, `max-w-*`, and `flex/grid` for all layouts
|
||||
3. **Mobile-first** — Base styles target mobile, `md:` breakpoint for desktop
|
||||
4. **Viewport-filling sections** — Hero and CTA use `min-h-screen` or generous padding to fill viewport
|
||||
5. **Smooth scroll transitions** — Each section flows into the next with gradients or color changes
|
||||
|
||||
### Breakpoints
|
||||
|
||||
| Breakpoint | Target |
|
||||
|-----------|--------|
|
||||
| Base (< 768px) | Mobile phones |
|
||||
| `md:` (>= 768px) | Tablets and desktop |
|
||||
|
||||
### Section Patterns
|
||||
|
||||
```
|
||||
Hero: w-full, min-h-screen, bg-gradient, centered content
|
||||
Showcase: w-full, flex-col md:flex-row, gap, centered max-w
|
||||
Testimonials: w-full, bg-slate-900, grid cols-1 md:cols-3
|
||||
CTA: w-full, bg-violet-600, centered
|
||||
Footer: w-full, bg-slate-950, responsive flex
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Design Tokens
|
||||
|
||||
All colors from design map directly to Tailwind defaults:
|
||||
|
||||
| Token | Tailwind | Hex |
|
||||
|-------|----------|-----|
|
||||
| Primary | `violet-600` | #7C3AED |
|
||||
| Primary light | `violet-100` | — |
|
||||
| Background | `white` | #FFFFFF |
|
||||
| Surface | `slate-50` | #F8FAFC |
|
||||
| Dark bg | `slate-900` | #0F172A |
|
||||
| Footer bg | `slate-950` | #020617 |
|
||||
| Border | `slate-200` | #E2E8F0 |
|
||||
| Warning bg | `amber-50` | #FFFBEB |
|
||||
| Gradient top | `white` -> `violet-50` | — |
|
||||
|
||||
---
|
||||
|
||||
## Scroll Animations
|
||||
|
||||
Defined in `src/styles/animations.css`, triggered by `IntersectionObserver` in `Marketing.astro`.
|
||||
|
||||
| Class | Effect | Use Case |
|
||||
|-------|--------|----------|
|
||||
| `.reveal` | Fade up (translateY 24px) | Default for most elements |
|
||||
| `.reveal-left` | Slide from left | Showcase left column |
|
||||
| `.reveal-right` | Slide from right | Showcase right column |
|
||||
| `.reveal-scale` | Scale in (0.95 -> 1) | CTA section |
|
||||
| `.stagger-1` to `.stagger-4` | Delay 0.1s-0.4s | Grouped elements (cards, grid items) |
|
||||
|
||||
- All animations: `0.6-0.7s`, `cubic-bezier(0.22, 1, 0.36, 1)` (ease-out-quint)
|
||||
- `prefers-reduced-motion: reduce` disables all animations
|
||||
- Observer `rootMargin: 0px 0px -60px 0px` for pre-trigger
|
||||
- Elements are `opacity: 0` until `.visible` class is added, then `animation-fill-mode: forwards`
|
||||
|
||||
---
|
||||
|
||||
## i18n (CRITICAL)
|
||||
|
||||
**Every user-visible text must use i18n keys. No hardcoded strings.**
|
||||
|
||||
### Supported Locales
|
||||
| Code | Language | Brand Name |
|
||||
|------|----------|------------|
|
||||
| `zh` | 简体中文 | 觅爻签问 |
|
||||
| `zh_Hant` | 繁體中文 | 覓爻簽問 |
|
||||
| `en` | English | MeiYao Divination |
|
||||
|
||||
### Implementation
|
||||
|
||||
- All translations are in `src/i18n/utils.ts` as a typed `Record<Locale, Translations>` object
|
||||
- Access via `t(locale, 'section')` which returns the section object (e.g., `t(locale, 'nav').features`)
|
||||
- URL strategy: `/{locale}/path` prefix (e.g., `/zh/`, `/en/`)
|
||||
- Default locale: `zh`, root `/` redirects to `/zh/`
|
||||
- Config in `astro.config.mjs` with `prefixDefaultLocale: true`
|
||||
|
||||
### Rules
|
||||
1. **All text must come from `t()`** — never inline strings
|
||||
2. **Brand name** is always from `footer.brandName` (consistent across Navbar/Footer)
|
||||
3. **Check Flutter i18n first** (`apps/lib/l10n/app_*.arb`) before inventing translations
|
||||
4. **Legal content** loaded from `public/legal/{locale}/` markdown files
|
||||
|
||||
---
|
||||
|
||||
## Assets
|
||||
|
||||
- Shared assets live in `web/design/assets/` (used by Pencil)
|
||||
- `web/public/images` and `web/public/legal` are **symlinks** to `../design/assets/*`
|
||||
- **Never duplicate** assets — always use symlinks or references
|
||||
|
||||
---
|
||||
|
||||
## Cross-Layer Contracts
|
||||
|
||||
### API Integration
|
||||
- Backend: FastAPI REST endpoints (see `docs/protocols/`)
|
||||
- Auth: Supabase Auth JS SDK (client-side)
|
||||
- Error format: RFC 7807 `ApiProblem` (same as mobile)
|
||||
|
||||
### Brand Consistency (Flutter app)
|
||||
- App title: "觅爻签问" / "MeiYao Divination" (NOT "MiYao")
|
||||
- Company: 洵觅科技（深圳）有限公司 / Xunmee Technology (Shenzhen) Co., Ltd.
|
||||
- Contact: xuyunlong@xunmee.com
|
||||
- ICP: 粤ICP备2025428416号-1A
|
||||
|
||||
---
|
||||
|
||||
## Quality Rules
|
||||
|
||||
### Forbidden
|
||||
- Do not use React Server Components (RSC)
|
||||
- Do not import server-only modules in client islands
|
||||
- Do not hardcode colors outside Tailwind tokens
|
||||
- Do not use fixed pixel widths for layout (use responsive utilities)
|
||||
- Do not use `any` in TypeScript
|
||||
- Do not use third-party shadcn registries (official only)
|
||||
- Do not duplicate assets — use symlinks
|
||||
|
||||
### Required
|
||||
- All pages must be fully responsive (mobile + desktop)
|
||||
- All sections must be full-width with centered content
|
||||
- All pages must pass Lighthouse SEO >= 95 (marketing pages)
|
||||
- All interactive components must be accessible (ARIA)
|
||||
- `npm audit` must be clean before merge
|
||||
- TypeScript strict mode enabled
|
||||
- `prefers-reduced-motion` must disable animations
|
||||
@@ -0,0 +1,2 @@
|
||||
{"file": ".trellis/spec/web/index.md", "reason": "Verify no hardcoded strings (i18n), correct Tailwind tokens, no RSC usage"}
|
||||
{"file": ".trellis/tasks/05-08-web-astro-react-tailwind-shadcn-ui/prd.md", "reason": "Acceptance criteria: pixel match, SEO >= 95, npm audit clean"}
|
||||
@@ -0,0 +1,3 @@
|
||||
{"file": ".trellis/spec/web/index.md", "reason": "Web tech stack, design tokens, i18n rules, quality constraints"}
|
||||
{"file": ".trellis/tasks/05-08-web-astro-react-tailwind-shadcn-ui/prd.md", "reason": "Task PRD with design analysis, architecture, acceptance criteria"}
|
||||
{"file": "web/design/eryao.pen", "reason": "Pencil design file - Landing Page layout, colors, typography, spacing"}
|
||||
@@ -0,0 +1,137 @@
|
||||
# Web 端技术选型 PRD
|
||||
|
||||
## 背景
|
||||
|
||||
eryao 项目需要建设 Web 端。移动端已有 Flutter 应用（iOS/Android），后端为 Python FastAPI + Supabase。Pencil 设计稿已完成（`web/design/eryao.pen`），包含 19 个页面。
|
||||
|
||||
## 设计稿分析
|
||||
|
||||
### 页面分类
|
||||
|
||||
**营销/公开页面**（需要 SEO）：
|
||||
- Landing Page — Hero + Showcase + Testimonials + CTA + Footer
|
||||
- Features Page — 功能特性展示
|
||||
- Pricing Page — 定价方案卡片
|
||||
- About Page — 关于我们 + 法律声明
|
||||
- Privacy Policy Page
|
||||
- Terms of Service Page
|
||||
|
||||
**Dashboard/应用页面**（Auth 后 SPA）：
|
||||
- Login Page — 登录表单卡片
|
||||
- Dashboard — 侧边栏(260px) + 主区域(1180px) 布局
|
||||
- NotificationPage — 通知列表
|
||||
- 其余 9 个页面（待展开）
|
||||
|
||||
### 设计特征
|
||||
- 宽度 1440px，桌面端为主
|
||||
- 色系：紫色主色(#7C3AED)、深蓝底色(#0F172A/#020617)、白色/浅灰背景
|
||||
- 渐变背景（linear-gradient）、圆角(16px)、阴影(blur 24px)
|
||||
- 全部色值来自 Tailwind CSS 默认色板
|
||||
- i18n 支持：zh / zh_Hant / en（与移动端一致）
|
||||
|
||||
## 技术选型
|
||||
|
||||
### 决策：Astro 5 + React + Tailwind CSS 4 + shadcn/ui
|
||||
|
||||
### 选型理由
|
||||
|
||||
#### 1. Astro 5 作为框架
|
||||
|
||||
| 考量 | 结论 |
|
||||
|------|------|
|
||||
| 营销页 SEO | Astro 默认零 JS 输出，SSG 开箱即用，SEO 最优 |
|
||||
| Dashboard SPA | React islands 模式，客户端全功能渲染 |
|
||||
| 安全性 | 静态生成，无服务端运行时，攻击面极小 |
|
||||
| 无已知 CVE | 搜索未发现 Astro 框架本身的 CVE 记录 |
|
||||
|
||||
**为什么不用 Next.js：**
|
||||
- CVE-2025-55182（CVSS 10.0 "React2Shell"）RCE，已被武器化
|
||||
- CVE-2025-29927 中间件鉴权绕过
|
||||
- CVE-2025-66478 Next.js 对应编号，766 台主机被入侵
|
||||
- Server Components 攻击面大，对于本项目过度设计
|
||||
|
||||
**为什么不用 Vite + React SPA：**
|
||||
- 营销页 SEO 差，需要额外 SSR 方案
|
||||
- 两个场景（营销+应用）用一套框架更简洁
|
||||
|
||||
#### 2. React 作为交互层
|
||||
|
||||
- shadcn/ui 原生 React，组件覆盖度最高
|
||||
- Astro islands 一等公民支持
|
||||
- 生态最大，Dashboard 复杂交互组件丰富
|
||||
|
||||
**关于 CVE-2025-55182：**
|
||||
该漏洞仅影响 React Server Components（RSC），即 Next.js App Router 服务端渲染场景。我们的架构使用 Astro SSG + React 客户端 islands，不使用 RSC，漏洞不适用。
|
||||
|
||||
#### 3. Tailwind CSS 4
|
||||
|
||||
- 设计稿色值全部来自 Tailwind 色板，零适配成本
|
||||
- 渐变、flexbox、阴影、圆角全部原生支持
|
||||
- 无已知直接漏洞（Snyk 确认）
|
||||
- v4 已修复 v3 的 glob 传递依赖问题
|
||||
|
||||
#### 4. shadcn/ui
|
||||
|
||||
- 源码级复制，可完全自定义，无锁定
|
||||
- Card / Button / Input / Form / Sidebar 等组件与设计稿高度吻合
|
||||
- 无已知直接漏洞（Snyk 确认）
|
||||
- 只使用官方 registry，避免第三方 registry 注入风险
|
||||
|
||||
### 架构概览
|
||||
|
||||
```
|
||||
web/
|
||||
├── src/
|
||||
│ ├── components/ # 共享 UI 组件（shadcn/ui + 自定义）
|
||||
│ │ ├── ui/ # shadcn/ui 组件
|
||||
│ │ ├── Navbar.astro # 营销页导航栏
|
||||
│ │ ├── Footer.astro # 营销页页脚
|
||||
│ │ └── Sidebar.tsx # Dashboard 侧边栏（React island）
|
||||
│ ├── layouts/
|
||||
│ │ ├── Marketing.astro # 营销页布局（Navbar + Footer）
|
||||
│ │ └── Dashboard.astro # Dashboard 布局（Sidebar + Main）
|
||||
│ ├── pages/
|
||||
│ │ ├── index.astro # Landing Page
|
||||
│ │ ├── features.astro # Features Page
|
||||
│ │ ├── pricing.astro # Pricing Page
|
||||
│ │ ├── about.astro # About Page
|
||||
│ │ ├── privacy.astro # Privacy Policy
|
||||
│ │ ├── terms.astro # Terms of Service
|
||||
│ │ ├── login.astro # Login Page（含 React island）
|
||||
│ │ └── dashboard/
|
||||
│ │ ├── index.astro # Dashboard（含 React island）
|
||||
│ │ └── notifications.astro
|
||||
│ └── styles/
|
||||
│ └── global.css # Tailwind 入口
|
||||
├── astro.config.mjs
|
||||
├── tailwind.config.ts
|
||||
├── tsconfig.json
|
||||
└── package.json
|
||||
```
|
||||
|
||||
### API 集成
|
||||
|
||||
- 后端：FastAPI（已有）
|
||||
- Auth：Supabase Auth JS SDK（客户端）
|
||||
- 数据：通过 FastAPI REST API + Supabase JS SDK
|
||||
|
||||
### i18n 方案
|
||||
|
||||
- 使用 `astro-i18next` 或 `@astrolicious/i18n` 处理 Astro 页面
|
||||
- React islands 使用 `react-i18next`
|
||||
- 翻译文件与移动端共享（zh / zh_Hant / en）
|
||||
|
||||
### 部署
|
||||
|
||||
- 营销页：SSG 静态部署（Vercel / Cloudflare Pages / 自托管）
|
||||
- Dashboard SPA：同一构建产物，客户端渲染
|
||||
- 无需 Node.js 服务端运行时
|
||||
|
||||
## 验收标准
|
||||
|
||||
- [ ] 所有设计稿页面可在浏览器中像素级还原
|
||||
- [ ] 营销页 Lighthouse SEO 评分 >= 95
|
||||
- [ ] Dashboard 侧边栏导航和主区域交互正常
|
||||
- [ ] i18n 三语言切换正常
|
||||
- [ ] 无安全漏洞（npm audit clean）
|
||||
- [ ] 设计稿中所有渐变、阴影、圆角、布局精确匹配
|
||||
@@ -0,0 +1,26 @@
|
||||
{
|
||||
"id": "web-astro-react-tailwind-shadcn-ui",
|
||||
"name": "web-astro-react-tailwind-shadcn-ui",
|
||||
"title": "Web端技术选型：Astro + React + Tailwind + shadcn/ui",
|
||||
"description": "",
|
||||
"status": "in_progress",
|
||||
"dev_type": null,
|
||||
"scope": null,
|
||||
"package": null,
|
||||
"priority": "P2",
|
||||
"creator": "zl-q",
|
||||
"assignee": "zl-q",
|
||||
"createdAt": "2026-05-08",
|
||||
"completedAt": null,
|
||||
"branch": null,
|
||||
"base_branch": "dev",
|
||||
"worktree_path": null,
|
||||
"commit": null,
|
||||
"pr_url": null,
|
||||
"subtasks": [],
|
||||
"children": [],
|
||||
"parent": null,
|
||||
"relatedFiles": [],
|
||||
"notes": "",
|
||||
"meta": {}
|
||||
}
|
||||
@@ -50,10 +50,6 @@ Do not place backend/frontend implementation details here.
|
||||
|
||||
When viewing data in the database, use `supabase mcp` tools (`supabase_execute_sql`, `supabase_list_tables`, etc.) instead of direct queries or other methods.
|
||||
|
||||
## Image Handling
|
||||
|
||||
When reading images, check whether the model has native multimodal capability first. If it does, use `Read` tool to read images directly. If it does not, fall back to `understand_image` tool. Only use `Read` tool for non-image files.
|
||||
|
||||
<!-- TRELLIS:START -->
|
||||
# Trellis Instructions
|
||||
|
||||
|
||||
@@ -0,0 +1,43 @@
|
||||
# Astro Starter Kit: Minimal
|
||||
|
||||
```sh
|
||||
npm create astro@latest -- --template minimal
|
||||
```
|
||||
|
||||
> 🧑🚀 **Seasoned astronaut?** Delete this file. Have fun!
|
||||
|
||||
## 🚀 Project Structure
|
||||
|
||||
Inside of your Astro project, you'll see the following folders and files:
|
||||
|
||||
```text
|
||||
/
|
||||
├── public/
|
||||
├── src/
|
||||
│ └── pages/
|
||||
│ └── index.astro
|
||||
└── package.json
|
||||
```
|
||||
|
||||
Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
|
||||
|
||||
There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
|
||||
|
||||
Any static assets, like images, can be placed in the `public/` directory.
|
||||
|
||||
## 🧞 Commands
|
||||
|
||||
All commands are run from the root of the project, from a terminal:
|
||||
|
||||
| Command | Action |
|
||||
| :------------------------ | :----------------------------------------------- |
|
||||
| `npm install` | Installs dependencies |
|
||||
| `npm run dev` | Starts local dev server at `localhost:4321` |
|
||||
| `npm run build` | Build your production site to `./dist/` |
|
||||
| `npm run preview` | Preview your build locally, before deploying |
|
||||
| `npm run astro ...` | Run CLI commands like `astro add`, `astro check` |
|
||||
| `npm run astro -- --help` | Get help using the Astro CLI |
|
||||
|
||||
## 👀 Want to learn more?
|
||||
|
||||
Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 462 KiB |
File diff suppressed because one or more lines are too long
@@ -0,0 +1,18 @@
|
||||
// @ts-check
|
||||
import { defineConfig } from 'astro/config';
|
||||
import react from '@astrojs/react';
|
||||
import tailwindcss from '@tailwindcss/vite';
|
||||
|
||||
export default defineConfig({
|
||||
integrations: [react()],
|
||||
i18n: {
|
||||
locales: ['zh', 'zh_Hant', 'en'],
|
||||
defaultLocale: 'zh',
|
||||
routing: {
|
||||
prefixDefaultLocale: true,
|
||||
},
|
||||
},
|
||||
vite: {
|
||||
plugins: [tailwindcss()],
|
||||
},
|
||||
});
|
||||
|
Before Width: | Height: | Size: 142 KiB After Width: | Height: | Size: 142 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 96 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 768 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 596 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 601 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 102 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 799 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.5 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.0 MiB |
@@ -0,0 +1,23 @@
|
||||
# About Us
|
||||
|
||||
Welcome to MeeYao Divination, an AI-assisted cultural reference app focused on traditional Six-Line culture and the traditional wisdom of the I Ching.
|
||||
|
||||
Six-Line culture originates from the profound philosophical system of the I Ching. It embodies the traditional viewpoint of the connection between personal thoughts, timing and natural changes. By combining hexagram culture, traditional five-element theories and traditional GanZhi cultural concepts, users can explore traditional cultural connotations and life reference perspectives.
|
||||
|
||||
MeeYao Divination is designed based on traditional oriental culture. Our core goal is to help users broaden their thinking horizons, view daily choices and life status from a diverse cultural perspective, and maintain a rational and peaceful mindset in daily life. We hope modern AI technology can serve as a convenient way for everyone to understand and experience traditional Chinese culture.
|
||||
|
||||
---
|
||||
|
||||
## Company Info
|
||||
|
||||
**Developer:** Ann Lee
|
||||
|
||||
**Contact Email:** ann@xunmee.com
|
||||
|
||||
---
|
||||
|
||||
## Important Disclaimer
|
||||
|
||||
All AI-generated content and cultural interpretation materials are for **entertainment, cultural appreciation and reference only**. This app does not provide professional advice of any kind, including but not limited to business, finance, investment, medical treatment, psychology, law, career or life decision-making. All generated content shall not be regarded as factual basis or decision-making guidance. The developer does not assume any responsibility for users' personal choices, behaviors and related consequences. Please treat traditional culture rationally and use this app with a rational attitude.
|
||||
|
||||
© 2026 Ann Lee. All Rights Reserved.
|
||||
@@ -0,0 +1,163 @@
|
||||
# Privacy Policy
|
||||
|
||||
**Last Updated**: April 27, 2026
|
||||
|
||||
**Effective Date**: April 27, 2026
|
||||
|
||||
---
|
||||
|
||||
## Introduction
|
||||
|
||||
Dear User, Welcome to MeeYao Divination (the "App"), independently developed and operated by an **individual developer** ("I", "me", "my"). I am committed to protecting your personal privacy and complying with applicable U.S. federal and state privacy laws, including the California Consumer Privacy Act (CCPA/CPRA), the Children's Online Privacy Protection Act (COPPA), CalOPPA, and other U.S. state privacy regulations.
|
||||
|
||||
This Privacy Policy clearly explains:
|
||||
|
||||
- What personal information I collect
|
||||
- How your data is used, stored and shared
|
||||
- Your legal privacy rights under U.S. regulations
|
||||
- How you can submit data requests
|
||||
|
||||
This policy applies to all users of this App. California residents are granted additional rights specified in Section 5.
|
||||
|
||||
---
|
||||
|
||||
## 1. Information We Collect
|
||||
|
||||
I only collect necessary data to provide, maintain and optimize App cultural reference functions. All data is classified as Personal Information and Sensitive Personal Information (SPI) in accordance with CCPA/CPRA.
|
||||
|
||||
### 1.1 Information You Provide Directly
|
||||
|
||||
- **Account Information**: Email address, verification code (required for account registration and security verification)
|
||||
- **Profile Information**: Optional nickname or display name voluntarily set by you
|
||||
- **Personal Content**: Your input questions, cultural interpretation records and local session content
|
||||
- **Support Information**: Feedback, consultation messages you send for user assistance
|
||||
|
||||
### 1.2 Information Collected Automatically
|
||||
|
||||
When you use the App, limited automatic data will be collected to ensure normal operation:
|
||||
|
||||
- **Device Information**: Device model, operating system version, unique device identifier, device configuration
|
||||
- **Technical Data**: IP address (for rough regional access recognition), access time, crash logs and operation performance data
|
||||
- **Usage Data**: Function usage records, app stay duration and in-app interaction behavior
|
||||
|
||||
---
|
||||
|
||||
## 2. How We Use Your Information
|
||||
|
||||
Your information will only be used for the following legitimate and limited purposes:
|
||||
|
||||
1. **Provide Core Functions**: Process your input content, generate AI cultural interpretation content, and record local usage records.
|
||||
2. **Account Security**: Complete user verification, prevent abnormal login and protect your account security.
|
||||
3. **Product Optimization**: Analyze anonymous usage data to fix bugs, optimize operation experience and improve product performance.
|
||||
4. **User Assistance**: Reply to your feedback and solve your use problems.
|
||||
5. **Service Reminders**: Push necessary system notices and policy update reminders.
|
||||
6. **Legal Compliance**: Meet statutory compliance requirements and official platform review rules.
|
||||
|
||||
I will **not** use your personal sensitive content for commercial advertising or unauthorized marketing without your explicit consent.
|
||||
|
||||
---
|
||||
|
||||
## 3. Data Storage, Retention & Cross-Border Transfers
|
||||
|
||||
### 3.1 Storage Location
|
||||
|
||||
User data collected through this App may be stored on secure third-party cloud servers located in the United States. All cross-border data transmission adopts encrypted transmission protocols to ensure data security.
|
||||
|
||||
### 3.2 Retention Period
|
||||
|
||||
Data will only be retained within the necessary time limit:
|
||||
|
||||
- **Account data**: Retained during your active use, and cleaned up reasonably after you cancel your account.
|
||||
- **Personal content records**: Reserved within a reasonable cycle and regularly cleaned or anonymized.
|
||||
- **Device and log data**: Automatically deleted after a limited period.
|
||||
|
||||
---
|
||||
|
||||
## 4. Sharing & Disclosure of Information
|
||||
|
||||
### 4.1 Sale of Personal Information
|
||||
|
||||
**I do not sell, rent or trade your personal information** in any form, and will never sell your data for commercial benefits.
|
||||
|
||||
### 4.2 Sharing with Third-Party Service Providers
|
||||
|
||||
I only share data with trusted third-party service providers necessary for App operation, and sign strict data protection restrictions:
|
||||
|
||||
- Cloud storage and server services
|
||||
- App operation analysis, crash monitoring tools
|
||||
- Apple official push and system service capabilities
|
||||
|
||||
All third parties are prohibited from using your data for independent commercial purposes.
|
||||
|
||||
### 4.3 Legal Disclosure
|
||||
|
||||
Your data may be disclosed only in the following situations:
|
||||
|
||||
- Required by laws, regulations, court orders or official government requests
|
||||
- With your clear voluntary authorization and consent
|
||||
- To protect personal legitimate rights and public safety
|
||||
|
||||
---
|
||||
|
||||
## 5. Your U.S. Privacy Rights (California Residents Included)
|
||||
|
||||
In accordance with CCPA/CPRA and U.S. local privacy laws, you enjoy the following rights:
|
||||
|
||||
1. **Right to Know**: Inquire about the type and scope of personal data collected.
|
||||
2. **Right to Access**: Obtain a copy of your personal usage data.
|
||||
3. **Right to Deletion**: Apply to delete your account and related personal data.
|
||||
4. **Right to Correction**: Modify incorrect personal information.
|
||||
5. **Right to Data Portability**: Obtain your data in a readable format.
|
||||
6. **Right to Opt-Out**: Reject non-essential data collection and irrelevant recommendation.
|
||||
7. **Right to Limit Sensitive Data**: Restrict the use of your personal sensitive content.
|
||||
8. **Right to Non-Discrimination**: No differential treatment for you to exercise privacy rights.
|
||||
|
||||
### How to Exercise Your Rights
|
||||
|
||||
You can submit data requests through the only dedicated contact method:
|
||||
|
||||
- **Contact Email**: ann@xunmee.com
|
||||
|
||||
I will respond to your legitimate request within 45 days, and properly verify your identity to ensure data security before processing.
|
||||
|
||||
---
|
||||
|
||||
## 6. Children's Privacy (COPPA Compliance)
|
||||
|
||||
This App is not oriented to users under the age of 13. I do not intentionally collect any personal information of minors under 13 years old.
|
||||
|
||||
If you find that minor information has been improperly collected, please contact me via email in a timely manner, and I will completely delete the relevant data in accordance with COPPA regulations. Users aged 13–17 need to use this App under the supervision and consent of their guardians.
|
||||
|
||||
---
|
||||
|
||||
## 7. Data Security
|
||||
|
||||
I adopt industry-standard technical protection measures to protect your data:
|
||||
|
||||
- Encrypted storage and encrypted transmission to prevent data leakage
|
||||
- Strict access restrictions and daily security management
|
||||
- Regular abnormal monitoring and risk checking
|
||||
|
||||
Please note that no network storage system can achieve absolute security, and I will always maintain the highest level of data protection measures.
|
||||
|
||||
---
|
||||
|
||||
## 8. Policy Changes
|
||||
|
||||
This Privacy Policy may be updated irregularly to adapt to platform rules and legal adjustments. Important content changes will be notified through in-app prompts or email reminders in advance. Your continued use of the App after the update takes effect means that you agree to the revised policy.
|
||||
|
||||
---
|
||||
|
||||
## 9. Contact Us
|
||||
|
||||
If you have any questions, suggestions or privacy-related complaints about this Privacy Policy, please contact me:
|
||||
|
||||
**Developer Email**: ann@xunmee.com
|
||||
|
||||
If you are a California resident and dissatisfied with the processing result, you can consult the local privacy regulatory authority.
|
||||
|
||||
---
|
||||
|
||||
**Independent Individual Developer**
|
||||
|
||||
**Last Updated**: April 27, 2026
|
||||
@@ -0,0 +1,121 @@
|
||||
# Terms of Service
|
||||
|
||||
**Last Updated:** April 27, 2026
|
||||
|
||||
---
|
||||
|
||||
## 1. Acceptance of Terms
|
||||
|
||||
MeiYao Divination (the "App") is independently developed, owned and operated by an **individual developer** ("I", "me", "my").
|
||||
|
||||
By downloading, installing, registering, accessing, or using the App, you ("you" or "user") acknowledge that you have read, understood, and unconditionally agree to be bound by these Terms of Service ("Terms") and my Privacy Policy. If you do not agree to these Terms, you must not use this App.
|
||||
|
||||
---
|
||||
|
||||
## 2. Age Requirement & COPPA Compliance
|
||||
|
||||
You represent and warrant that you are at least 13 years of age to use this App.
|
||||
|
||||
- This App is not intended for children under 13 years old.
|
||||
- I do not knowingly collect personal information from users under the age of 13. If I become aware that a minor under 13 has submitted personal data, I will take immediate action to delete such information.
|
||||
|
||||
---
|
||||
|
||||
## 3. Service Description
|
||||
|
||||
This App provides AI-assisted cultural interpretation content related to traditional I Ching and Six-Line culture, for daily reference and cultural appreciation only.
|
||||
|
||||
- All AI-generated content and cultural reference materials are for entertainment and personal reference purposes solely.
|
||||
- Content shall not be regarded as professional advice, including without limitation finance, investment, law, medical treatment, career or business decision-making.
|
||||
- I do not guarantee the accuracy, completeness or practicality of any AI-generated content within the App.
|
||||
- Temporary service suspension caused by system maintenance, technical exceptions, network failure or force majeure shall not be deemed a breach of these Terms.
|
||||
|
||||
---
|
||||
|
||||
## 4. User Accounts & Data Privacy
|
||||
|
||||
- You shall provide true, accurate and complete registration information and keep your information updated.
|
||||
- You are solely responsible for safeguarding your account login credentials and for all activities conducted under your account.
|
||||
- I collect and process user personal data strictly in accordance with the published Privacy Policy and comply with applicable U.S. privacy laws, including CCPA/CPRA.
|
||||
- California residents hold relevant data access, deletion and privacy rights as stated in the Privacy Policy.
|
||||
|
||||
---
|
||||
|
||||
## 5. Intellectual Property
|
||||
|
||||
All intellectual property rights within the App, including but not limited to program code, text copy, graphic design, interface content, logos and visual elements, are exclusively owned by the individual developer and protected by U.S. copyright law (DMCA), trademark regulations and international intellectual property conventions.
|
||||
|
||||
You may not:
|
||||
|
||||
- Copy, modify, edit, distribute, reproduce or create derivative works based on the App and its internal content.
|
||||
- Reverse engineer, decompile, disassemble, crack or attempt to obtain the App's source code.
|
||||
- Delete, cover or alter any copyright notice, proprietary mark and intellectual property statement in the App.
|
||||
|
||||
---
|
||||
|
||||
## 6. Prohibited User Conduct
|
||||
|
||||
You agree not to:
|
||||
|
||||
- Use the App for illegal, malicious, fraudulent or infringing behaviors.
|
||||
- Publish or spread illegal, defamatory, obscene, threatening, violent or third-party infringing content.
|
||||
- Attack, interfere or disrupt the App's operating environment, server and network stability.
|
||||
- Exploit system vulnerabilities for unauthorized access, commercial profit or improper use.
|
||||
- Exaggerate or falsely promote the functional effect and reference value of in-app content.
|
||||
|
||||
I reserve the right to issue warnings, restrict functions, suspend or terminate your account without prior notice if you violate the above provisions, and reserve the right to pursue legal liability when necessary.
|
||||
|
||||
---
|
||||
|
||||
## 7. Disclaimer of Warranties (US Standard)
|
||||
|
||||
THE APP AND ALL IN-APP FUNCTIONS ARE PROVIDED ON AN "AS IS" AND "AS AVAILABLE" BASIS, WITH NO EXPRESS OR IMPLIED WARRANTIES OF ANY KIND. THIS INCLUDES BUT IS NOT LIMITED TO IMPLIED WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT OF THIRD-PARTY RIGHTS.
|
||||
|
||||
I DO NOT WARRANT THAT:
|
||||
|
||||
- The App will operate continuously, securely, error-free or without interruption.
|
||||
- All generated cultural reference content will fully meet your expectations.
|
||||
- The App and its functions are completely stable, virus-free or defect-free.
|
||||
|
||||
---
|
||||
|
||||
## 8. Limitation of Liability
|
||||
|
||||
To the fullest extent permitted by applicable U.S. laws:
|
||||
|
||||
- I shall not be liable for any indirect, incidental, special, consequential or compensatory damages arising from your use of the App.
|
||||
- Under no circumstances shall I bear excessive liability for disputes, losses or risks caused by your independent judgment and personal decisions.
|
||||
- As a free individual development application, no paid transaction relationship exists; all use risks shall be borne by the user.
|
||||
|
||||
---
|
||||
|
||||
## 9. Indemnification
|
||||
|
||||
You agree to indemnify and hold the individual developer harmless from all claims, damages, losses, costs and reasonable legal expenses arising from:
|
||||
|
||||
- Your violation of these Terms of Service.
|
||||
- Improper use, abuse or unauthorized operation of the App.
|
||||
- Any infringement of third-party intellectual property and legal rights caused by your published content.
|
||||
|
||||
---
|
||||
|
||||
## 10. Governing Law & Dispute Resolution
|
||||
|
||||
These Terms shall be governed by and construed in accordance with the laws of the State of California, United States, excluding conflict of law rules.
|
||||
|
||||
In case of any dispute arising from the use of this App, both parties shall first resolve the matter through friendly negotiation. If negotiation fails, disputes shall be submitted to the competent courts in Los Angeles County, California, for resolution.
|
||||
|
||||
---
|
||||
|
||||
## 11. Modifications to Terms
|
||||
|
||||
I reserve the right to revise and update these Terms of Service at any time. Material rule changes will be notified via in-app reminders or official contact email. Your continued use of the App after the update takes effect means you fully accept the revised Terms.
|
||||
|
||||
---
|
||||
|
||||
## 12. Contact Information
|
||||
|
||||
If you have questions, feedback or legal inquiries about these Terms, please contact:
|
||||
|
||||
- **Developer**: Individual Independent Developer
|
||||
- **Contact Email**: ann@xunmee.com
|
||||
@@ -0,0 +1,23 @@
|
||||
# 关于我们
|
||||
|
||||
欢迎使用 觅爻 MeeYao，一款依托 AI 技术、以传统六爻文化与易经智慧为核心的传统文化参考工具。
|
||||
|
||||
六爻文化源自博大精深的易经哲学体系，承载着古人对于心念、时序与天地变化相生相融的传统认知。结合卦象文化、五行理论及干支传统人文理念，帮助用户探索东方传统文化内涵，获得多元的生活参考视角。
|
||||
|
||||
觅爻 MeeYao 根植于东方传统文脉，核心初衷是帮助用户跳出固有思维局限，以更开阔的视角看待日常抉择与生活状态，保持理性平和的心态。我们希望借助现代 AI 技术，让大众更轻松地了解、感受与体验中华传统经典文化。
|
||||
|
||||
---
|
||||
|
||||
## 开发者信息
|
||||
|
||||
**开发者**：Ann Lee
|
||||
|
||||
**联系邮箱**：ann@xunmee.com
|
||||
|
||||
---
|
||||
|
||||
## 重要免责声明
|
||||
|
||||
本 App 所有 AI 生成内容与文化解读资料，仅作娱乐、文化赏析与个人参考使用。本应用不提供任何专业指导建议，包括但不限于商业、金融、投资、医疗、心理、法律、职业及人生决策等领域。所有生成内容不得作为事实依据或行动决策的唯一标准。开发者不对用户的个人选择、行为及衍生后果承担任何法律责任。请理性看待传统文化，理性使用本应用。
|
||||
|
||||
© 2026 Ann Lee 保留所有权利
|
||||
@@ -0,0 +1,163 @@
|
||||
# 隐私政策
|
||||
|
||||
**最后更新日期**：2026年4月27日
|
||||
|
||||
**生效日期**：2026年4月27日
|
||||
|
||||
---
|
||||
|
||||
## 引言
|
||||
|
||||
尊敬的用户，欢迎使用 觅爻 MeeYao（以下简称"本应用"），本应用由**个人开发者**（"我"）独立开发和运营。我致力于保护您的个人隐私，并遵守适用的美国联邦和州隐私法律，包括《加州消费者隐私法》（CCPA/CPRA）、《儿童在线隐私保护法》（COPPA）、CalOPPA 以及其他美国州隐私法规。
|
||||
|
||||
本隐私政策清晰说明：
|
||||
|
||||
- 我收集哪些个人信息
|
||||
- 您的数据如何被使用、存储和共享
|
||||
- 您在美国法规下的法定隐私权利
|
||||
- 如何提交数据请求
|
||||
|
||||
本政策适用于本应用的所有用户。加州居民享有第5节规定的额外权利。
|
||||
|
||||
---
|
||||
|
||||
## 1. 我收集的信息
|
||||
|
||||
我只收集为提供、维护和优化应用文化参考功能所需的数据。所有数据根据 CCPA/CPRA 分类为个人信息和敏感个人信息（SPI）。
|
||||
|
||||
### 1.1 您直接提供的信息
|
||||
|
||||
- **账户信息**：电子邮箱地址、验证码（账户注册和安全验证所需）
|
||||
- **个人资料**：您自愿设置的昵称或显示名称
|
||||
- **个人内容**：您输入的问题、文化解读记录和本地会话内容
|
||||
- **支持信息**：您发送的反馈、咨询消息
|
||||
|
||||
### 1.2 自动收集的信息
|
||||
|
||||
当您使用本应用时，将收集有限的自动数据以确保正常运行：
|
||||
|
||||
- **设备信息**：设备型号、操作系统版本、唯一设备标识符、设备配置
|
||||
- **技术数据**：IP 地址（用于粗略区域访问识别）、访问时间、崩溃日志和操作性能数据
|
||||
- **使用数据**：功能使用记录、应用停留时长和应用内交互行为
|
||||
|
||||
---
|
||||
|
||||
## 2. 我如何使用您的信息
|
||||
|
||||
您的信息仅用于以下合法且有限的目的：
|
||||
|
||||
1. **提供核心功能**：处理您的输入内容，生成 AI 文化解读内容，记录本地使用记录。
|
||||
2. **账户安全**：完成用户验证，防止异常登录，保护您的账户安全。
|
||||
3. **产品优化**：分析匿名使用数据以修复错误、优化操作体验和提升产品性能。
|
||||
4. **用户协助**：回复您的反馈，解决您的使用问题。
|
||||
5. **服务提醒**：推送必要的系统通知和政策更新提醒。
|
||||
6. **法律合规**：满足法定合规要求和官方平台审核规则。
|
||||
|
||||
未经您的明确同意，我**不会**将您的个人敏感内容用于商业广告或未经授权的营销。
|
||||
|
||||
---
|
||||
|
||||
## 3. 数据存储、保留与跨境传输
|
||||
|
||||
### 3.1 存储位置
|
||||
|
||||
通过本应用收集的用户数据可能存储于位于美国的第三方安全云服务器上。所有跨境数据传输均采用加密传输协议以确保数据安全。
|
||||
|
||||
### 3.2 保留期限
|
||||
|
||||
数据仅在必要时限内保留：
|
||||
|
||||
- **账户数据**：在您活跃使用期间保留，注销账户后合理清理。
|
||||
- **个人内容记录**：在合理周期内保留，定期清理或匿名化。
|
||||
- **设备和日志数据**：在有限期限后自动删除。
|
||||
|
||||
---
|
||||
|
||||
## 4. 信息共享与披露
|
||||
|
||||
### 4.1 个人信息的出售
|
||||
|
||||
我**不以任何形式出售、出租或交易您的个人信息**，绝不会为商业利益出售您的数据。
|
||||
|
||||
### 4.2 与第三方服务提供商共享
|
||||
|
||||
我只与应用运行所需的可信赖第三方服务提供商共享数据，并签署严格的数据保护限制：
|
||||
|
||||
- 云存储和服务器服务
|
||||
- 应用运营分析、崩溃监控工具
|
||||
- 苹果官方推送和系统服务能力
|
||||
|
||||
所有第三方均被禁止将您的数据用于独立的商业目的。
|
||||
|
||||
### 4.3 法律披露
|
||||
|
||||
仅在以下情况下您的数据可能被披露：
|
||||
|
||||
- 法律、法规、法院命令或官方政府要求所规定
|
||||
- 经您明确自愿授权和同意
|
||||
- 为保护个人合法权益和公共安全
|
||||
|
||||
---
|
||||
|
||||
## 5. 您的美国隐私权利（包括加州居民）
|
||||
|
||||
根据 CCPA/CPRA 和美国地方隐私法律，您享有以下权利：
|
||||
|
||||
1. **知情权**：查询收集的个人数据类型和范围。
|
||||
2. **访问权**：获取您的个人使用数据副本。
|
||||
3. **删除权**：申请删除您的账户及相关个人数据。
|
||||
4. **更正权**：修改不正确的个人信息。
|
||||
5. **数据携带权**：以可读格式获取您的数据。
|
||||
6. **选择退出权**：拒绝非必要数据收集和无关推荐。
|
||||
7. **限制敏感数据权**：限制使用您的个人敏感内容。
|
||||
8. **不受歧视权**：行使隐私权利不受差别待遇。
|
||||
|
||||
### 如何行使您的权利
|
||||
|
||||
您可以通过唯一指定联系方式提交数据请求：
|
||||
|
||||
- **联系邮箱**：ann@xunmee.com
|
||||
|
||||
我将在 45 天内回复您的合法请求，并在处理前妥善验证您的身份以确保数据安全。
|
||||
|
||||
---
|
||||
|
||||
## 6. 儿童隐私（COPPA 合规）
|
||||
|
||||
本应用不面向 13 岁以下用户。我不会故意收集 13 岁以下未成年人的任何个人信息。
|
||||
|
||||
如果您发现未成年人信息被不当收集，请及时通过邮箱联系我，我将按照 COPPA 法规完全删除相关数据。13-17 岁用户需在监护人监督和同意下使用本应用。
|
||||
|
||||
---
|
||||
|
||||
## 7. 数据安全
|
||||
|
||||
我采取行业标准的技术保护措施保护您的数据：
|
||||
|
||||
- 加密存储和加密传输以防止数据泄露
|
||||
- 严格的访问限制和日常安全管理
|
||||
- 定期异常监控和风险检查
|
||||
|
||||
请注意，没有任何网络存储系统能实现绝对安全，我将始终保持最高级别的数据保护措施。
|
||||
|
||||
---
|
||||
|
||||
## 8. 政策变更
|
||||
|
||||
本隐私政策可能会不定期更新以适应平台规则和法律调整。重要内容变更将通过应用内提示或邮件提醒提前通知。更新生效后您继续使用本应用，即表示您同意修订后的政策。
|
||||
|
||||
---
|
||||
|
||||
## 9. 联系我们
|
||||
|
||||
如果您对本隐私政策有任何疑问、建议或隐私相关投诉，请联系我：
|
||||
|
||||
**开发者邮箱**：ann@xunmee.com
|
||||
|
||||
如果您是加州居民且对处理结果不满意，可咨询当地隐私监管机构。
|
||||
|
||||
---
|
||||
|
||||
**独立个人开发者**
|
||||
|
||||
**最后更新日期**：2026年4月27日
|
||||
@@ -0,0 +1,121 @@
|
||||
# 用户服务条款
|
||||
|
||||
**最后更新日期**：2026年4月27日
|
||||
|
||||
---
|
||||
|
||||
## 1. 条款接受
|
||||
|
||||
觅爻 MeeYao（以下简称"本应用"）由**个人开发者**（"我"）独立开发、拥有和运营。
|
||||
|
||||
下载、安装、注册、访问或使用本应用，即表示您（"您"或"用户"）确认已阅读、理解并无条件同意受本服务条款（"条款"）及我的隐私政策约束。如果您不同意本条款，请勿使用本应用。
|
||||
|
||||
---
|
||||
|
||||
## 2. 年龄要求与 COPPA 合规
|
||||
|
||||
您声明并保证您年满 13 岁方可使用本应用。
|
||||
|
||||
- 本应用不面向 13 岁以下儿童。
|
||||
- 我不会故意收集 13 岁以下用户的个人信息。如发现 13 岁以下未成年人提交了个人数据，我将立即采取行动删除该信息。
|
||||
|
||||
---
|
||||
|
||||
## 3. 服务说明
|
||||
|
||||
本应用提供与传统易经和六爻文化相关的 AI 辅助文化解读内容，仅供日常参考和文化赏析。
|
||||
|
||||
- 所有 AI 生成内容和文化参考资料仅供娱乐和个人参考目的。
|
||||
- 内容不得视为专业建议，包括但不限于金融、投资、法律、医疗、职业或商业决策。
|
||||
- 我不保证本应用内任何 AI 生成内容的准确性、完整性或实用性。
|
||||
- 因系统维护、技术异常、网络故障或不可抗力导致的临时服务中断不视为违反本条款。
|
||||
|
||||
---
|
||||
|
||||
## 4. 用户账户与数据隐私
|
||||
|
||||
- 您应提供真实、准确和完整的注册信息，并保持信息更新。
|
||||
- 您对保护账户登录凭据和账户下进行的所有活动负全责。
|
||||
- 我严格按照公布的隐私政策收集和处理用户个人数据，并遵守适用的美国隐私法律，包括 CCPA/CPRA。
|
||||
- 加州居民享有隐私政策中规定的数据访问、删除和隐私权利。
|
||||
|
||||
---
|
||||
|
||||
## 5. 知识产权
|
||||
|
||||
本应用内的所有知识产权，包括但不限于程序代码、文字内容、图形设计、界面内容、标识和视觉元素，均为个人开发者独有，受美国版权法（DMCA）、商标法规和国际知识产权公约保护。
|
||||
|
||||
您不得：
|
||||
|
||||
- 复制、修改、编辑、分发、复制或基于本应用及其内部内容创作衍生作品。
|
||||
- 反向工程、反编译、反汇编、破解或试图获取本应用源代码。
|
||||
- 删除、覆盖或更改本应用中的任何版权声明、专有标记和知识产权声明。
|
||||
|
||||
---
|
||||
|
||||
## 6. 禁止的用户行为
|
||||
|
||||
您同意不会：
|
||||
|
||||
- 将本应用用于非法、恶意、欺诈或侵权行为。
|
||||
- 发布或传播非法、诽谤、淫秽、威胁、暴力或侵犯第三方的内容。
|
||||
- 攻击、干扰或破坏本应用的运行环境、服务器和网络稳定性。
|
||||
- 利用系统漏洞进行未授权访问、商业牟利或不当使用。
|
||||
- 夸大或虚假宣传应用内内容的功能效果和参考价值。
|
||||
|
||||
如您违反上述规定，我保留不经事先通知发出警告、限制功能、暂停或终止您账户的权利，并保留必要时追究法律责任的权利。
|
||||
|
||||
---
|
||||
|
||||
## 7. 免责声明（美国标准）
|
||||
|
||||
本应用及所有应用功能按"现状"和"可用"基础提供，不提供任何形式的明示或默示保证。包括但不限于适销性、特定用途适用性和不侵犯第三方权利的默示保证。
|
||||
|
||||
我不保证：
|
||||
|
||||
- 本应用将连续、安全、无错误或不间断运行。
|
||||
- 所有生成的文化参考内容将完全符合您的期望。
|
||||
- 本应用及其功能完全稳定、无病毒或无缺陷。
|
||||
|
||||
---
|
||||
|
||||
## 8. 责任限制
|
||||
|
||||
在适用美国法律允许的最大范围内：
|
||||
|
||||
- 我不对您使用本应用产生的任何间接、偶然、特殊、后果性或补偿性损害承担责任。
|
||||
- 在任何情况下，我都不对因您的独立判断和个人决定引起的争议、损失或风险承担过度责任。
|
||||
- 作为免费个人开发应用，不存在付费交易关系；所有使用风险由用户自行承担。
|
||||
|
||||
---
|
||||
|
||||
## 9. 赔偿
|
||||
|
||||
您同意赔偿并使个人开发者免受因以下原因产生的所有索赔、损害、损失、费用和合理法律费用：
|
||||
|
||||
- 您违反本服务条款。
|
||||
- 不当使用、滥用或未经授权操作本应用。
|
||||
- 您发布的内容导致的第三方知识产权和法律权利侵犯。
|
||||
|
||||
---
|
||||
|
||||
## 10. 适用法律与争议解决
|
||||
|
||||
本条款受美国加利福尼亚州法律管辖并据其解释，排除法律冲突规则。
|
||||
|
||||
因使用本应用产生的任何争议，双方应首先通过友好协商解决。协商不成的，争议应提交加利福尼亚州洛杉矶县有管辖权的法院解决。
|
||||
|
||||
---
|
||||
|
||||
## 11. 条款修改
|
||||
|
||||
我保留随时修订和更新本服务条款的权利。重大规则变更将通过应用内提醒或官方联系邮箱通知。更新生效后您继续使用本应用，即表示您完全接受修订后的条款。
|
||||
|
||||
---
|
||||
|
||||
## 12. 联系方式
|
||||
|
||||
如果您对本条款有疑问、反馈或法律咨询，请联系：
|
||||
|
||||
- **开发者**：独立个人开发者
|
||||
- **联系邮箱**：ann@xunmee.com
|
||||
@@ -0,0 +1,23 @@
|
||||
# 關於我們
|
||||
|
||||
歡迎使用 覓爻 MeeYao，一款依託 AI 技術、以傳統六爻文化與易經智慧為核心的傳統文化參考工具。
|
||||
|
||||
六爻文化源自博大精深的易經哲學體系，承載著古人對於心念、時序與天地變化相生相融的傳統認知。結合卦象文化、五行理論及干支傳統人文理念，幫助用戶探索東方傳統文化內涵，獲得多元的生活參考視角。
|
||||
|
||||
覓爻 MeeYao 根植於東方傳統文脈，核心初衷是幫助用戶跳出固有思維局限，以更開闊的視角看待日常抉擇與生活狀態，保持理性平和的心態。我們希望借助現代 AI 技術，讓大眾更輕鬆地了解、感受與體驗中華傳統經典文化。
|
||||
|
||||
---
|
||||
|
||||
## 開發者信息
|
||||
|
||||
**開發者**：Ann Lee
|
||||
|
||||
**聯繫郵箱**：ann@xunmee.com
|
||||
|
||||
---
|
||||
|
||||
## 重要免責聲明
|
||||
|
||||
本 App 所有 AI 生成內容與文化解讀資料，僅作娛樂、文化賞析與個人參考使用。本應用不提供任何專業指導建議，包括但不限於商業、金融、投資、醫療、心理、法律、職業及人生決策等領域。所有生成內容不得作為事實依據或行動決策的唯一標準。開發者不對用戶的個人選擇、行為及衍生後果承擔任何法律責任。請理性看待傳統文化，理性使用本應用。
|
||||
|
||||
© 2026 Ann Lee 保留所有權利
|
||||
@@ -0,0 +1,163 @@
|
||||
# 隱私政策
|
||||
|
||||
**最後更新日期**：2026年4月27日
|
||||
|
||||
**生效日期**：2026年4月27日
|
||||
|
||||
---
|
||||
|
||||
## 引言
|
||||
|
||||
尊敬的用戶，歡迎使用 覓爻 MeeYao（以下簡稱「本應用」），本應用由**個人開發者**（「我」）獨立開發和運營。我致力於保護您的個人隱私，並遵守適用的美國聯邦和州隱私法律，包括《加州消費者隱私法》（CCPA/CPRA）、《兒童在線隱私保護法》（COPPA）、CalOPPA 以及其他美國州隱私法規。
|
||||
|
||||
本隱私政策清晰說明：
|
||||
|
||||
- 我收集哪些個人信息
|
||||
- 您的數據如何被使用、存儲和共享
|
||||
- 您在美國法規下的法定隱私權利
|
||||
- 如何提交數據請求
|
||||
|
||||
本政策適用於本應用的所有用戶。加州居民享有第5節規定的額外權利。
|
||||
|
||||
---
|
||||
|
||||
## 1. 我收集的信息
|
||||
|
||||
我只收集為提供、維護和優化應用文化參考功能所需的數據。所有數據根據 CCPA/CPRA 分類為個人信息和敏感個人信息（SPI）。
|
||||
|
||||
### 1.1 您直接提供的信息
|
||||
|
||||
- **賬戶信息**：電子郵箱地址、驗證驗證碼（賬戶註冊和安全驗證所需）
|
||||
- **個人資料**：您自願設置的暱稱或顯示名稱
|
||||
- **個人內容**：您輸入的問題、文化解讀記錄和本地會話內容
|
||||
- **支持信息**：您發送的反饋、諮詢消息
|
||||
|
||||
### 1.2 自動收集的信息
|
||||
|
||||
當您使用本應用時，將收集有限的自動數據以確保正常運行：
|
||||
|
||||
- **設備信息**：設備型號、操作系統版本、唯一設備標識符、設備配置
|
||||
- **技術數據**：IP 地址（用於粗略區域訪問識別）、訪問時間、崩潰日誌和操作性能數據
|
||||
- **使用數據**：功能使用記錄、應用停留時長和應用內交互行為
|
||||
|
||||
---
|
||||
|
||||
## 2. 我如何使用您的信息
|
||||
|
||||
您的信息僅用於以下合法且有限的目的：
|
||||
|
||||
1. **提供核心功能**：處理您的輸入內容，生成 AI 文化解讀內容，記錄本地使用記錄。
|
||||
2. **賬戶安全**：完成用戶驗證，防止異常登錄，保護您的賬戶安全。
|
||||
3. **產品優化**：分析匿名使用數據以修復錯誤、優化操作體驗和提升產品性能。
|
||||
4. **用戶協助**：回覆您的反饋，解決您的使用問題。
|
||||
5. **服務提醒**：推送必要的系統通知和政策更新提醒。
|
||||
6. **法律合規**：滿足法定合規要求和官方平台審核規則。
|
||||
|
||||
未經您的明確同意，我**不會**將您的個人敏感內容用於商業廣告或未經授權的營銷。
|
||||
|
||||
---
|
||||
|
||||
## 3. 數據存儲、保留與跨境傳輸
|
||||
|
||||
### 3.1 存儲位置
|
||||
|
||||
通過本應用收集的用戶數據可能存儲於位於美國的第三方安全雲服務器上。所有跨境數據傳輸均採用加密傳輸協議以確保數據安全。
|
||||
|
||||
### 3.2 保留期限
|
||||
|
||||
數據僅在必要時限內保留：
|
||||
|
||||
- **賬戶數據**：在您活躍使用期間保留，註銷賬戶後合理清理。
|
||||
- **個人內容記錄**：在合理週期內保留，定期清理或匿名化。
|
||||
- **設備和日誌數據**：在有限期限後自動刪除。
|
||||
|
||||
---
|
||||
|
||||
## 4. 信息共享與披露
|
||||
|
||||
### 4.1 個人信息的出售
|
||||
|
||||
我**不以任何形式出售、出租或交易您的個人信息**，絕不會為商業利益出售您的數據。
|
||||
|
||||
### 4.2 與第三方服務提供商共享
|
||||
|
||||
我只與應用運行所需的可信賴第三方服務提供商共享數據，並簽署嚴格的數據保護限制：
|
||||
|
||||
- 雲存儲和服務器服務
|
||||
- 應用運營分析、崩潰監控工具
|
||||
- 蘋果官方推送和系統服務能力
|
||||
|
||||
所有第三方均被禁止將您的數據用於獨立的商業目的。
|
||||
|
||||
### 4.3 法律披露
|
||||
|
||||
僅在以下情況下您的數據可能被披露：
|
||||
|
||||
- 法律、法規、法院命令或官方政府要求所規定
|
||||
- 經您明確自願授權和同意
|
||||
- 為保護個人合法權益和公共安全
|
||||
|
||||
---
|
||||
|
||||
## 5. 您的美國隱私權利（包括加州居民）
|
||||
|
||||
根據 CCPA/CPRA 和美國地方隱私法律，您享有以下權利：
|
||||
|
||||
1. **知情權**：查詢收集的個人數據類型和範圍。
|
||||
2. **訪問權**：獲取您的個人使用數據副本。
|
||||
3. **刪除權**：申請刪除您的賬戶及相關個人數據。
|
||||
4. **更正權**：修改不正確的個人信息。
|
||||
5. **數據攜帶權**：以可讀格式獲取您的數據。
|
||||
6. **選擇退出權**：拒絕非必要數據收集和無關推薦。
|
||||
7. **限制敏感數據權**：限制使用您的個人敏感內容。
|
||||
8. **不受歧視權**：行使隱私權利不受差別待遇。
|
||||
|
||||
### 如何行使您的權利
|
||||
|
||||
您可以通過唯一指定聯繫方式提交數據請求：
|
||||
|
||||
- **聯繫郵箱**：ann@xunmee.com
|
||||
|
||||
我將在 45 天內回覆您的合法請求，並在處理前妥善驗證您的身份以確保數據安全。
|
||||
|
||||
---
|
||||
|
||||
## 6. 兒童隱私（COPPA 合規）
|
||||
|
||||
本應用不面向 13 歲以下用戶。我不會故意收集 13 歲以下未成年人的任何個人信息。
|
||||
|
||||
如果您發現未成年人信息被不當收集，請及時通過郵箱聯繫我，我將按照 COPPA 法規完全刪除相關數據。13-17 歲用戶需在監護人監督和同意下使用本應用。
|
||||
|
||||
---
|
||||
|
||||
## 7. 數據安全
|
||||
|
||||
我採取行業標準的技術保護措施保護您的數據：
|
||||
|
||||
- 加密存儲和加密傳輸以防止數據洩露
|
||||
- 嚴格的訪問限制和日常安全管理
|
||||
- 定期異常監控和風險檢查
|
||||
|
||||
請注意，沒有任何網絡存儲系統能實現絕對安全，我將始終保持最高級別的數據保護措施。
|
||||
|
||||
---
|
||||
|
||||
## 8. 政策變更
|
||||
|
||||
本隱私政策可能會不定期更新以適應平台規則和法律調整。重要內容變更將通過應用內提示或郵件提醒提前通知。更新生效後您繼續使用本應用，即表示您同意修訂後的政策。
|
||||
|
||||
---
|
||||
|
||||
## 9. 聯繫我們
|
||||
|
||||
如果您對本隱私政策有任何疑問、建議或隱私相關投訴，請聯繫我：
|
||||
|
||||
**開發者郵箱**：ann@xunmee.com
|
||||
|
||||
如果您是加州居民且對處理結果不滿意，可諮詢當地隱私監管機構。
|
||||
|
||||
---
|
||||
|
||||
**獨立個人開發者**
|
||||
|
||||
**最後更新日期**：2026年4月27日
|
||||
@@ -0,0 +1,121 @@
|
||||
# 用戶服務條款
|
||||
|
||||
**最後更新日期**：2026年4月27日
|
||||
|
||||
---
|
||||
|
||||
## 1. 條款接受
|
||||
|
||||
覓爻 MeeYao（以下簡稱「本應用」）由**個人開發者**（「我」）獨立開發、擁有和運營。
|
||||
|
||||
下載、安裝、註冊、訪問或使用本應用，即表示您（「您」或「用戶」）確認已閱讀、理解並無條件同意受本服務條款（「條款」）及我的隱私政策約束。如果您不同意本條款，請勿使用本應用。
|
||||
|
||||
---
|
||||
|
||||
## 2. 年齡要求與 COPPA 合規
|
||||
|
||||
您聲明並保證您年滿 13 歲方可使用本應用。
|
||||
|
||||
- 本應用不面向 13 歲以下兒童。
|
||||
- 我不會故意收集 13 歲以下用戶的個人信息。如發現 13 歲以下未成年人提交了個人數據，我將立即採取行動刪除該信息。
|
||||
|
||||
---
|
||||
|
||||
## 3. 服務說明
|
||||
|
||||
本應用提供與傳統易經和六爻文化相關的 AI 輔助文化解讀內容，僅供日常參考和文化賞析。
|
||||
|
||||
- 所有 AI 生成內容和文化參考資料僅供娛樂和個人參考目的。
|
||||
- 內容不得視為專業建議，包括但不限於金融、投資、法律、醫療、職業或商業決策。
|
||||
- 我不保證本應用內任何 AI 生成內容的準確性、完整性或實用性。
|
||||
- 因系統維護、技術異常、網絡故障或不可抗力導致的臨時服務中斷不視為違反本條款。
|
||||
|
||||
---
|
||||
|
||||
## 4. 用戶賬戶與數據隱私
|
||||
|
||||
- 您應提供真實、準確和完整的註冊信息，並保持信息更新。
|
||||
- 您對保護賬戶登錄憑據和賬戶下進行的所有活動負全責。
|
||||
- 我嚴格按照公布的隱私政策收集和處理用戶個人數據，並遵守適用的美國隱私法律，包括 CCPA/CPRA。
|
||||
- 加州居民享有隱私政策中規定的數據訪問、刪除和隱私權利。
|
||||
|
||||
---
|
||||
|
||||
## 5. 知識產權
|
||||
|
||||
本應用內的所有知識產權，包括但不限於程序代碼、文字內容、圖形設計、界面內容、標識和視覺元素，均為個人開發者獨有，受美國版權法（DMCA）、商標法規和國際知識產權公約保護。
|
||||
|
||||
您不得：
|
||||
|
||||
- 複製、修改、編輯、分發、複製或基於本應用及其內部內容創作衍生作品。
|
||||
- 反向工程、反編譯、反彙編、破解或試圖獲取本應用源代碼。
|
||||
- 刪除、覆蓋或更改本應用中的任何版權聲明、專有標記和知識產權聲明。
|
||||
|
||||
---
|
||||
|
||||
## 6. 禁止的用戶行為
|
||||
|
||||
您同意不會：
|
||||
|
||||
- 將本應用用於非法、惡意、欺詐或侵權行為。
|
||||
- 發布或傳播非法、誹謗、淫穢、威脅、暴力或侵犯第三方的內容。
|
||||
- 攻擊、干擾或破壞本應用的運行環境、服務器和網絡穩定性。
|
||||
- 利用系統漏洞進行未授權訪問、商業牟利或不當使用。
|
||||
- 誇大或虛假宣傳應用內內容的功能效果和參考價值。
|
||||
|
||||
如您違反上述規定，我保留不經事先通知發出警告、限制功能、暫停或終止您賬戶的權利，並保留必要時追究法律責任的權利。
|
||||
|
||||
---
|
||||
|
||||
## 7. 免責聲明（美國標準）
|
||||
|
||||
本應用及所有應用功能按「現狀」和「可用」基礎提供，不提供任何形式的明示或默示保證。包括但不限於適銷性、特定用途適用性和不侵犯第三方權利的默示保證。
|
||||
|
||||
我不保證：
|
||||
|
||||
- 本應用將連續、安全、無錯誤或不間斷運行。
|
||||
- 所有生成的文化參考內容將完全符合您的期望。
|
||||
- 本應用及其功能完全穩定、無病毒或無缺陷。
|
||||
|
||||
---
|
||||
|
||||
## 8. 責任限制
|
||||
|
||||
在適用美國法律允許的最大範圍內：
|
||||
|
||||
- 我不對您使用本應用產生的任何間接、偶然、特殊、後果性或補償性損害承擔責任。
|
||||
- 在任何情況下，我都不對因您的獨立判斷和個人決定引起的爭議、損失或風險承擔過度責任。
|
||||
- 作為免費個人開發應用，不存在付費交易關係；所有使用風險由用戶自行承擔。
|
||||
|
||||
---
|
||||
|
||||
## 9. 賠償
|
||||
|
||||
您同意賠償並使個人開發者免受因以下原因產生的所有索賠、損害、損失、費用和合理法律費用：
|
||||
|
||||
- 您違反本服務條款。
|
||||
- 不當使用、濫用或未經授權操作本應用。
|
||||
- 您發布的內容導致的第三方知識產權和法律權利侵犯。
|
||||
|
||||
---
|
||||
|
||||
## 10. 適用法律與爭議解決
|
||||
|
||||
本條款受美國加利福尼亞州法律管轄並據其解釋，排除法律衝突規則。
|
||||
|
||||
因使用本應用產生的任何爭議，雙方應首先通過友好協商解決。協商不成的，爭議應提交加利福尼亞州洛杉磯縣有管轄權的法院解決。
|
||||
|
||||
---
|
||||
|
||||
## 11. 條款修改
|
||||
|
||||
我保留隨時修訂和更新本服務條款的權利。重大規則變更將通過應用內提醒或官方聯繫郵箱通知。更新生效後您繼續使用本應用，即表示您完全接受修訂後的條款。
|
||||
|
||||
---
|
||||
|
||||
## 12. 聯繫方式
|
||||
|
||||
如果您對本條款有疑問、反饋或法律諮詢，請聯繫：
|
||||
|
||||
- **開發者**：獨立個人開發者
|
||||
- **聯繫郵箱**：ann@xunmee.com
|
||||
+21365
File diff suppressed because it is too large
Load Diff
-296
@@ -1,296 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>MeeYao - AI-Powered I Ching Cultural Reference</title>
|
||||
<meta name="description" content="MeeYao is an AI-assisted cultural reference app focused on traditional Six-Line I Ching culture. Explore ancient wisdom with modern AI technology.">
|
||||
<link rel="icon" type="image/png" href="assets/logo.png">
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script>
|
||||
tailwind.config = {
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
brand: {
|
||||
50: '#F5F3FF',
|
||||
100: '#EDE9FE',
|
||||
200: '#DDD6FE',
|
||||
300: '#C4B5FD',
|
||||
400: '#A78BFA',
|
||||
500: '#8B5CF6',
|
||||
600: '#7C3AED',
|
||||
700: '#6D28D9',
|
||||
800: '#5B21B6',
|
||||
900: '#4C1D95',
|
||||
},
|
||||
surface: {
|
||||
bg: '#FAFAF9',
|
||||
card: '#FFFFFF',
|
||||
},
|
||||
text: {
|
||||
dark: '#1C1917',
|
||||
medium: '#57534E',
|
||||
light: '#A8A29E',
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Noto+Serif:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
body {
|
||||
font-family: 'Inter', system-ui, -apple-system, sans-serif;
|
||||
}
|
||||
.font-serif-display {
|
||||
font-family: 'Noto Serif', 'Georgia', serif;
|
||||
}
|
||||
.hero-bg {
|
||||
background-color: #4C1D95;
|
||||
background-image:
|
||||
radial-gradient(ellipse at 30% 60%, rgba(139,92,246,0.12) 0%, transparent 50%),
|
||||
linear-gradient(160deg, #2E1065 0%, #4C1D95 50%, #5B21B6 100%);
|
||||
}
|
||||
.feature-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 30px rgba(124,58,237,0.08);
|
||||
}
|
||||
.feature-card {
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
.lang-select {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 8px center;
|
||||
padding: 5px 28px 5px 10px;
|
||||
border: 1px solid #E2E8F0;
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: #475569;
|
||||
background-color: #FFFFFF;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.15s ease;
|
||||
}
|
||||
.lang-select:hover {
|
||||
border-color: #7C3AED;
|
||||
}
|
||||
.lang-select:focus {
|
||||
outline: none;
|
||||
border-color: #7C3AED;
|
||||
box-shadow: 0 0 0 2px rgba(124,58,237,0.15);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-surface-bg text-text-dark antialiased">
|
||||
|
||||
<!-- Navigation -->
|
||||
<nav class="fixed top-0 left-0 right-0 z-50 bg-white/90 backdrop-blur-md border-b border-gray-100">
|
||||
<div class="max-w-5xl mx-auto px-4 md:px-6 h-16 flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<img src="assets/logo.png" alt="MeeYao" class="w-8 h-8 rounded-lg">
|
||||
<span class="font-semibold text-lg text-brand-700">MeeYao</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 md:gap-4 text-sm">
|
||||
<a href="#features" class="hidden md:inline text-text-medium hover:text-brand-600 transition-colors" data-i18n="nav.features">Features</a>
|
||||
<a href="#about" class="hidden md:inline text-text-medium hover:text-brand-600 transition-colors" data-i18n="nav.about">About</a>
|
||||
<a href="privacy.html" class="hidden md:inline text-text-medium hover:text-brand-600 transition-colors" data-i18n="nav.privacy">Privacy Policy</a>
|
||||
<select id="lang-select" class="lang-select" aria-label="Language">
|
||||
<option value="en">English</option>
|
||||
<option value="zh">简体中文</option>
|
||||
<option value="zh_Hant">繁體中文</option>
|
||||
</select>
|
||||
<a href="mailto:ann@xunmee.com" class="bg-brand-600 text-white px-3 md:px-4 py-2 rounded-lg hover:bg-brand-700 transition-colors" data-i18n="nav.contact">Contact</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Hero -->
|
||||
<section class="hero-bg pt-32 pb-20 md:pt-40 md:pb-28">
|
||||
<div class="max-w-5xl mx-auto px-6 text-center">
|
||||
<div class="inline-flex items-center gap-2 bg-white/10 backdrop-blur-sm rounded-full px-4 py-1.5 mb-8 border border-white/10">
|
||||
<span class="w-2 h-2 bg-violet-300 rounded-full"></span>
|
||||
<span class="text-violet-200 text-sm" data-i18n="hero.badge">AI-Powered Cultural Wisdom</span>
|
||||
</div>
|
||||
<h1 class="font-serif-display text-4xl md:text-6xl font-bold text-white leading-tight mb-6" data-i18n-html="hero.title">
|
||||
Ancient I Ching Wisdom<br>Meets Modern AI
|
||||
</h1>
|
||||
<p class="text-lg md:text-xl text-violet-200/80 max-w-2xl mx-auto mb-10 leading-relaxed" data-i18n="hero.subtitle">
|
||||
MeeYao Divination brings the profound tradition of Six-Line hexagram culture to your fingertips. Explore life's questions through the lens of ancient Eastern philosophy, enhanced by AI-powered interpretation.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- About -->
|
||||
<section id="about" class="py-20 md:py-28">
|
||||
<div class="max-w-5xl mx-auto px-6">
|
||||
<div class="max-w-3xl mx-auto text-center">
|
||||
<h2 class="font-serif-display text-3xl md:text-4xl font-bold text-text-dark mb-6" data-i18n="about.title">
|
||||
What is MeeYao Divination?
|
||||
</h2>
|
||||
<p class="text-text-medium text-lg leading-relaxed mb-6" data-i18n="about.p1">
|
||||
MeeYao Divination is an AI-assisted cultural reference app focused on traditional Six-Line culture and the timeless wisdom of the I Ching. Rooted in Eastern philosophical traditions, it helps users explore cultural connotations and gain diverse perspectives on everyday life.
|
||||
</p>
|
||||
<p class="text-text-medium text-lg leading-relaxed" data-i18n="about.p2">
|
||||
By combining hexagram culture, traditional Five-Element theories, and GanZhi calendrical concepts, MeeYao offers a unique way to broaden your thinking and approach daily choices with clarity and a peaceful mindset.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Features -->
|
||||
<section id="features" class="py-20 md:py-28 bg-white">
|
||||
<div class="max-w-5xl mx-auto px-6">
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="font-serif-display text-3xl md:text-4xl font-bold text-text-dark mb-4" data-i18n="features.title">
|
||||
Core Features
|
||||
</h2>
|
||||
<p class="text-text-medium text-lg" data-i18n="features.subtitle">Explore traditional divination culture with modern tools</p>
|
||||
</div>
|
||||
<div class="grid md:grid-cols-2 gap-6">
|
||||
<div class="feature-card bg-surface-bg rounded-2xl p-8 border border-gray-100">
|
||||
<div class="w-12 h-12 bg-brand-50 rounded-xl flex items-center justify-center mb-5">
|
||||
<svg class="w-6 h-6 text-brand-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 4V2m0 2a2 2 0 110 4m0-4a2 2 0 100 4m10-4V2m0 2a2 2 0 110 4m0-4a2 2 0 100 4M3 20h18M3 10h18M3 14h18"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-semibold text-text-dark mb-3" data-i18n="features.f1_title">Manual Coin Divination</h3>
|
||||
<p class="text-text-medium leading-relaxed" data-i18n="features.f1_desc">
|
||||
Perform traditional Six-Line hexagram casting with the classic coin method. Follow guided steps to build your hexagram authentically, preserving the ceremonial tradition.
|
||||
</p>
|
||||
</div>
|
||||
<div class="feature-card bg-surface-bg rounded-2xl p-8 border border-gray-100">
|
||||
<div class="w-12 h-12 bg-brand-50 rounded-xl flex items-center justify-center mb-5">
|
||||
<svg class="w-6 h-6 text-brand-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-semibold text-text-dark mb-3" data-i18n="features.f2_title">Quick Auto Divination</h3>
|
||||
<p class="text-text-medium leading-relaxed" data-i18n="features.f2_desc">
|
||||
Generate a hexagram instantly when you need quick cultural reference. The app derives the hexagram based on traditional timing principles for a rapid interpretation.
|
||||
</p>
|
||||
</div>
|
||||
<div class="feature-card bg-surface-bg rounded-2xl p-8 border border-gray-100">
|
||||
<div class="w-12 h-12 bg-brand-50 rounded-xl flex items-center justify-center mb-5">
|
||||
<svg class="w-6 h-6 text-brand-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-semibold text-text-dark mb-3" data-i18n="features.f3_title">AI-Powered Interpretation</h3>
|
||||
<p class="text-text-medium leading-relaxed" data-i18n="features.f3_desc">
|
||||
Receive thoughtful, structured analysis combining traditional Six-Line theory with AI-generated cultural insights. Each reading includes sign level, focus points, and practical advice.
|
||||
</p>
|
||||
</div>
|
||||
<div class="feature-card bg-surface-bg rounded-2xl p-8 border border-gray-100">
|
||||
<div class="w-12 h-12 bg-brand-50 rounded-xl flex items-center justify-center mb-5">
|
||||
<svg class="w-6 h-6 text-brand-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-semibold text-text-dark mb-3" data-i18n="features.f4_title">Session History</h3>
|
||||
<p class="text-text-medium leading-relaxed" data-i18n="features.f4_desc">
|
||||
Review all your past divination sessions with complete hexagram details and AI interpretations. Follow up on previous readings for deeper exploration through conversational follow-up questions.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Cultural Context -->
|
||||
<section class="py-20 md:py-28">
|
||||
<div class="max-w-5xl mx-auto px-6">
|
||||
<div class="max-w-3xl mx-auto text-center">
|
||||
<h2 class="font-serif-display text-3xl md:text-4xl font-bold text-text-dark mb-6" data-i18n="culture.title">
|
||||
Rooted in Tradition
|
||||
</h2>
|
||||
<p class="text-text-medium text-lg leading-relaxed mb-8" data-i18n="culture.desc">
|
||||
Six-Line culture originates from the I Ching, one of the oldest Chinese classics. It embodies the traditional understanding of the connection between personal thoughts, timing, and natural changes. Through Five-Element theory and GanZhi calendrical systems, users can explore Eastern cultural wisdom in a modern context.
|
||||
</p>
|
||||
<div class="grid grid-cols-3 gap-6 md:gap-10 max-w-lg mx-auto">
|
||||
<div class="text-center">
|
||||
<div class="font-serif-display text-2xl font-bold text-brand-300 mb-1"> </div>
|
||||
<div class="font-serif-display text-2xl md:text-3xl font-bold text-brand-600 mb-1.5" data-i18n="culture.iching_title">I Ching</div>
|
||||
<div class="text-sm text-text-light" data-i18n="culture.iching_label">Classic Foundation</div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="font-serif-display text-2xl font-bold text-brand-300 mb-1">5</div>
|
||||
<div class="font-serif-display text-2xl md:text-3xl font-bold text-brand-600 mb-1.5" data-i18n="culture.elements_title">Elements</div>
|
||||
<div class="text-sm text-text-light" data-i18n="culture.elements_label">Wood Fire Earth Metal Water</div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="font-serif-display text-2xl font-bold text-brand-300 mb-1">64</div>
|
||||
<div class="font-serif-display text-2xl md:text-3xl font-bold text-brand-600 mb-1.5" data-i18n="culture.hexagrams_title">Hexagrams</div>
|
||||
<div class="text-sm text-text-light" data-i18n="culture.hexagrams_label">Symbolic Patterns</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Disclaimer -->
|
||||
<section class="py-16 bg-brand-50/60">
|
||||
<div class="max-w-5xl mx-auto px-6">
|
||||
<div class="max-w-3xl mx-auto">
|
||||
<div class="bg-white rounded-2xl p-8 border border-brand-100">
|
||||
<h3 class="font-semibold text-text-dark mb-3 flex items-center gap-2">
|
||||
<svg class="w-5 h-5 text-brand-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
||||
</svg>
|
||||
<span data-i18n="disclaimer.title">Important Disclaimer</span>
|
||||
</h3>
|
||||
<div class="text-text-medium text-sm leading-relaxed" data-i18n-html="disclaimer.text">
|
||||
All AI-generated content and cultural interpretation materials are for <strong>entertainment, cultural appreciation, and personal reference only</strong>. This app does not provide professional advice of any kind, including but not limited to business, finance, investment, medical, psychological, legal, career, or life decision-making guidance. All generated content shall not be regarded as factual basis or decision-making direction. Please approach traditional culture rationally.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Contact / Support -->
|
||||
<section id="contact" class="py-20 md:py-28 bg-white">
|
||||
<div class="max-w-5xl mx-auto px-6">
|
||||
<div class="max-w-3xl mx-auto text-center">
|
||||
<h2 class="font-serif-display text-3xl md:text-4xl font-bold text-text-dark mb-6" data-i18n="contact_section.title">
|
||||
Get in Touch
|
||||
</h2>
|
||||
<p class="text-text-medium text-lg leading-relaxed mb-8" data-i18n="contact_section.desc">
|
||||
Have questions, feedback, or need support? We'd love to hear from you.
|
||||
</p>
|
||||
<a href="mailto:ann@xunmee.com" class="inline-flex items-center gap-2 bg-brand-600 text-white px-8 py-4 rounded-xl text-lg font-medium hover:bg-brand-700 transition-colors">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
|
||||
</svg>
|
||||
ann@xunmee.com
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="py-12 border-t border-gray-200">
|
||||
<div class="max-w-5xl mx-auto px-6">
|
||||
<div class="flex flex-col md:flex-row items-center justify-between gap-6">
|
||||
<div class="flex items-center gap-3">
|
||||
<img src="assets/logo.png" alt="MeeYao" class="w-6 h-6 rounded">
|
||||
<span class="font-medium text-text-dark">MeeYao</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-6 text-sm text-text-medium">
|
||||
<a href="privacy.html" class="hover:text-brand-600 transition-colors" data-i18n="footer.privacy">Privacy Policy</a>
|
||||
<a href="mailto:ann@xunmee.com" class="hover:text-brand-600 transition-colors" data-i18n="footer.support">Support</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-8 pt-6 border-t border-gray-100 text-center text-sm text-text-light">
|
||||
<p data-i18n="footer.developer">Developer: Ann Lee</p>
|
||||
<p class="mt-2" data-i18n="footer.copyright">© 2026 Ann Lee. All Rights Reserved.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="assets/js/i18n.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,25 @@
|
||||
{
|
||||
"name": "eryao-web",
|
||||
"type": "module",
|
||||
"version": "0.0.1",
|
||||
"engines": {
|
||||
"node": ">=22.12.0"
|
||||
},
|
||||
"scripts": {
|
||||
"dev": "astro dev",
|
||||
"build": "astro build",
|
||||
"preview": "astro preview",
|
||||
"astro": "astro"
|
||||
},
|
||||
"dependencies": {
|
||||
"@astrojs/react": "^5.0.4",
|
||||
"@tailwindcss/vite": "^4.3.0",
|
||||
"@types/react": "^19.2.14",
|
||||
"@types/react-dom": "^19.2.3",
|
||||
"astro": "^6.3.1",
|
||||
"marked": "^18.0.3",
|
||||
"react": "^19.2.6",
|
||||
"react-dom": "^19.2.6",
|
||||
"tailwindcss": "^4.3.0"
|
||||
}
|
||||
}
|
||||
@@ -1,193 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Privacy Policy - MeeYao Divination</title>
|
||||
<meta name="description" content="Privacy Policy for MeeYao Divination App. Learn how we collect, use, and protect your personal information.">
|
||||
<link rel="icon" type="image/png" href="assets/logo.png">
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script>
|
||||
tailwind.config = {
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
brand: {
|
||||
50: '#F5F3FF',
|
||||
100: '#EDE9FE',
|
||||
200: '#DDD6FE',
|
||||
300: '#C4B5FD',
|
||||
400: '#A78BFA',
|
||||
500: '#8B5CF6',
|
||||
600: '#7C3AED',
|
||||
700: '#6D28D9',
|
||||
800: '#5B21B6',
|
||||
900: '#4C1D95',
|
||||
},
|
||||
surface: {
|
||||
bg: '#FAFAF9',
|
||||
card: '#FFFFFF',
|
||||
},
|
||||
text: {
|
||||
dark: '#1C1917',
|
||||
medium: '#57534E',
|
||||
light: '#A8A29E',
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Noto+Serif:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
body {
|
||||
font-family: 'Inter', system-ui, -apple-system, sans-serif;
|
||||
}
|
||||
.font-serif-display {
|
||||
font-family: 'Noto Serif', 'Georgia', serif;
|
||||
}
|
||||
.lang-select {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 8px center;
|
||||
padding: 5px 28px 5px 10px;
|
||||
border: 1px solid #E2E8F0;
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: #475569;
|
||||
background-color: #FFFFFF;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.15s ease;
|
||||
}
|
||||
.lang-select:hover {
|
||||
border-color: #7C3AED;
|
||||
}
|
||||
.lang-select:focus {
|
||||
outline: none;
|
||||
border-color: #7C3AED;
|
||||
box-shadow: 0 0 0 2px rgba(124,58,237,0.15);
|
||||
}
|
||||
.policy-content h2 {
|
||||
font-family: 'Noto Serif', 'Georgia', serif;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
margin-top: 2.5rem;
|
||||
margin-bottom: 1rem;
|
||||
padding-bottom: 0.5rem;
|
||||
border-bottom: 1px solid #E5E7EB;
|
||||
}
|
||||
.policy-content h3 {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
margin-top: 1.5rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
.policy-content p {
|
||||
margin-bottom: 1rem;
|
||||
line-height: 1.75;
|
||||
}
|
||||
.policy-content ul {
|
||||
list-style-type: disc;
|
||||
padding-left: 1.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.policy-content ul li {
|
||||
margin-bottom: 0.5rem;
|
||||
line-height: 1.75;
|
||||
}
|
||||
.policy-content ol {
|
||||
list-style-type: decimal;
|
||||
padding-left: 1.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.policy-content ol li {
|
||||
margin-bottom: 0.5rem;
|
||||
line-height: 1.75;
|
||||
}
|
||||
.policy-content strong {
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
}
|
||||
.policy-content hr {
|
||||
border: none;
|
||||
border-top: 1px solid #E5E7EB;
|
||||
margin: 2rem 0;
|
||||
}
|
||||
.policy-content a {
|
||||
color: #7C3AED;
|
||||
text-decoration: underline;
|
||||
}
|
||||
.policy-content a:hover {
|
||||
color: #6D28D9;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-surface-bg text-text-dark antialiased">
|
||||
|
||||
<!-- Navigation -->
|
||||
<nav class="fixed top-0 left-0 right-0 z-50 bg-white/90 backdrop-blur-md border-b border-gray-100">
|
||||
<div class="max-w-4xl mx-auto px-4 md:px-6 h-16 flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<img src="assets/logo.png" alt="MeeYao" class="w-8 h-8 rounded-lg">
|
||||
<span class="font-semibold text-lg text-brand-700">MeeYao</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 md:gap-4 text-sm">
|
||||
<a href="index.html" class="text-text-medium hover:text-brand-600 transition-colors" data-i18n="nav.home">Home</a>
|
||||
<select id="lang-select" class="lang-select" aria-label="Language">
|
||||
<option value="en">English</option>
|
||||
<option value="zh">简体中文</option>
|
||||
<option value="zh_Hant">繁體中文</option>
|
||||
</select>
|
||||
<a href="mailto:ann@xunmee.com" class="bg-brand-600 text-white px-3 md:px-4 py-2 rounded-lg hover:bg-brand-700 transition-colors" data-i18n="nav.contact">Contact</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Header -->
|
||||
<section class="pt-28 pb-12 md:pt-32 md:pb-16">
|
||||
<div class="max-w-4xl mx-auto px-6 text-center">
|
||||
<h1 class="font-serif-display text-3xl md:text-4xl font-bold text-text-dark mb-4" data-i18n="privacy.title">Privacy Policy</h1>
|
||||
<p class="text-text-medium"><span data-i18n="privacy.updated">Last Updated: April 27, 2026</span> | <span data-i18n="privacy.effective">Effective Date: April 27, 2026</span></p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Policy Content -->
|
||||
<section class="pb-20 md:pb-28">
|
||||
<div class="max-w-4xl mx-auto px-6">
|
||||
<div class="bg-white rounded-2xl p-8 md:p-12 shadow-sm border border-gray-100">
|
||||
<div id="privacy-content" class="policy-content text-text-medium">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="py-12 border-t border-gray-200 bg-white">
|
||||
<div class="max-w-4xl mx-auto px-6">
|
||||
<div class="flex flex-col md:flex-row items-center justify-between gap-6">
|
||||
<div class="flex items-center gap-3">
|
||||
<img src="assets/logo.png" alt="MeeYao" class="w-6 h-6 rounded">
|
||||
<span class="font-medium text-text-dark">MeeYao</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-6 text-sm text-text-medium">
|
||||
<a href="index.html" class="hover:text-brand-600 transition-colors" data-i18n="footer.support">Home</a>
|
||||
<a href="mailto:ann@xunmee.com" class="hover:text-brand-600 transition-colors" data-i18n="nav.contact">Contact</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-8 pt-6 border-t border-gray-100 text-center text-sm text-text-light">
|
||||
<p data-i18n="footer.developer">Developer: Ann Lee</p>
|
||||
<p class="mt-2" data-i18n="footer.copyright">© 2026 Ann Lee. All Rights Reserved.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="assets/js/i18n.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 655 B |
@@ -0,0 +1,9 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
|
||||
<path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
|
||||
<style>
|
||||
path { fill: #000; }
|
||||
@media (prefers-color-scheme: dark) {
|
||||
path { fill: #FFF; }
|
||||
}
|
||||
</style>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 749 B |
Symlink
+1
@@ -0,0 +1 @@
|
||||
../design/assets/images
|
||||
Symlink
+1
@@ -0,0 +1 @@
|
||||
../design/assets/legal
|
||||
@@ -0,0 +1,63 @@
|
||||
---
|
||||
import { t, localePath, type Locale } from '../i18n/utils';
|
||||
|
||||
interface Props {
|
||||
locale: Locale;
|
||||
}
|
||||
|
||||
const { locale } = Astro.props;
|
||||
const a = t(locale, 'about');
|
||||
const footer = t(locale, 'footer');
|
||||
---
|
||||
|
||||
<section class="bg-gradient-to-b from-white to-violet-50 py-16 md:py-20 px-5 md:px-20 text-center">
|
||||
<h1 class="reveal text-slate-900 text-4xl md:text-[48px] font-extrabold">{a.title}</h1>
|
||||
<p class="reveal stagger-1 text-slate-500 text-lg mt-4">{a.subtitle}</p>
|
||||
</section>
|
||||
|
||||
<section class="bg-white py-16 md:py-20 px-5 md:px-20">
|
||||
<div class="max-w-[1200px] mx-auto flex flex-col md:flex-row gap-16">
|
||||
<div class="reveal-left flex-1 flex flex-col gap-6">
|
||||
<h2 class="text-slate-900 text-[28px] font-bold">{a.storyTitle}</h2>
|
||||
<div class="w-12 h-1 bg-violet-600 rounded"></div>
|
||||
<p class="text-slate-600 text-base leading-loose">{a.p1}</p>
|
||||
<p class="text-slate-600 text-base leading-loose">{a.p2}</p>
|
||||
<p class="text-slate-600 text-base leading-loose">{a.p3}</p>
|
||||
</div>
|
||||
|
||||
<div class="reveal-right w-full md:w-[400px] bg-slate-50 border border-slate-200 rounded-2xl p-8 flex flex-col gap-6 shrink-0">
|
||||
<h3 class="text-slate-900 text-xl font-bold">{a.companyInfo}</h3>
|
||||
<div class="h-px bg-slate-200"></div>
|
||||
<p class="text-slate-600 text-base">{a.company}</p>
|
||||
<div>
|
||||
<p class="text-slate-400 text-sm font-semibold">{a.emailLabel}</p>
|
||||
<p class="text-slate-600 text-[15px]">{a.email}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-slate-400 text-sm font-semibold">{a.devLabel}</p>
|
||||
<p class="text-slate-600 text-[15px]">{a.developer}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-slate-400 text-sm font-semibold">{a.icpLabel}</p>
|
||||
<p class="text-slate-600 text-[15px]">{a.icp}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="bg-amber-50 py-20 px-5 md:px-20">
|
||||
<div class="reveal max-w-[800px] mx-auto text-center flex flex-col gap-5">
|
||||
<h3 class="text-amber-800 text-2xl font-bold">{a.warningTitle}</h3>
|
||||
<p class="text-amber-700 text-[15px] leading-loose">{a.warningBody}</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="bg-slate-50 py-12 px-5 md:px-20">
|
||||
<div class="reveal max-w-[600px] mx-auto text-center flex flex-col gap-5">
|
||||
<h3 class="text-slate-900 text-xl font-bold">{a.legalTitle}</h3>
|
||||
<div class="flex justify-center gap-8">
|
||||
<a href={localePath(locale, '/privacy')} class="text-violet-600 text-[15px] hover:underline">{footer.col3Link1}</a>
|
||||
<a href={localePath(locale, '/terms')} class="text-violet-600 text-[15px] hover:underline">{footer.col3Link2}</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,26 @@
|
||||
---
|
||||
import { t, localePath, type Locale } from '../i18n/utils';
|
||||
|
||||
interface Props {
|
||||
locale: Locale;
|
||||
}
|
||||
|
||||
const { locale } = Astro.props;
|
||||
const cta = t(locale, 'cta');
|
||||
---
|
||||
|
||||
<section class="reveal-scale w-full py-24 md:py-32 relative overflow-hidden">
|
||||
<div class="glow-bg glow-bg-wide absolute inset-0 pointer-events-none"></div>
|
||||
|
||||
<div class="relative z-10 max-w-3xl mx-auto px-6 flex flex-col items-center gap-6 text-center">
|
||||
<h2 class="text-slate-900 text-3xl md:text-[48px] font-bold">
|
||||
{cta.title}
|
||||
</h2>
|
||||
<p class="text-slate-500 text-lg max-w-xl">
|
||||
{cta.subtitle}
|
||||
</p>
|
||||
<a href={localePath(locale, '/login')} class="cyber-gradient cyber-glow text-white text-lg font-semibold px-12 py-5 rounded-xl hover:-translate-y-0.5 transition-all duration-300 mt-4">
|
||||
{cta.button}
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,90 @@
|
||||
---
|
||||
import { t, type Locale } from '../i18n/utils';
|
||||
|
||||
interface Props {
|
||||
locale: Locale;
|
||||
}
|
||||
|
||||
const { locale } = Astro.props;
|
||||
const f = t(locale, 'features');
|
||||
|
||||
const icons = [
|
||||
// 01 - 两种起卦方式: sparkle/sparkles
|
||||
`<svg class="w-5 h-5 text-violet-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"/></svg>`,
|
||||
// 02 - AI 解卦分析: brain
|
||||
`<svg class="w-5 h-5 text-violet-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5a3 3 0 1 0-5.997.125 4 4 0 0 0-2.526 5.77 4 4 0 0 0 .556 6.588A4 4 0 1 0 12 18Z"/><path d="M12 5a3 3 0 1 1 5.997.125 4 4 0 0 1 2.526 5.77 4 4 0 0 1-.556 6.588A4 4 0 1 1 12 18Z"/><path d="M15 13a4.5 4.5 0 0 1-3-4 4.5 4.5 0 0 1-3 4"/><path d="M17.599 6.5a3 3 0 0 0 .399-1.375"/><path d="M6.003 5.125A3 3 0 0 0 6.401 6.5"/><path d="M3.477 10.896a4.5 4.5 0 0 1 .555-.396"/><path d="M20.523 10.896a4.5 4.5 0 0 0-.555-.396"/></svg>`,
|
||||
// 03 - 九类问题覆盖: grid/layout
|
||||
`<svg class="w-5 h-5 text-violet-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="7" height="7" x="3" y="3" rx="1"/><rect width="7" height="7" x="14" y="3" rx="1"/><rect width="7" height="7" x="14" y="14" rx="1"/><rect width="7" height="7" x="3" y="14" rx="1"/></svg>`,
|
||||
// 04 - 追问互动: message/chat
|
||||
`<svg class="w-5 h-5 text-violet-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"/></svg>`,
|
||||
// 05 - 历史记录: clock/history
|
||||
`<svg class="w-5 h-5 text-violet-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>`,
|
||||
// 06 - 点数系统: coins
|
||||
`<svg class="w-5 h-5 text-violet-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="8" cy="8" r="6"/><path d="M18.09 10.37A6 6 0 1 1 10.34 18"/><path d="M7 6h1v4"/><path d="m16.71 13.88.7.71V9"/></svg>`,
|
||||
];
|
||||
|
||||
const cards = [
|
||||
{ num: '01', title: f.c1Title, desc: f.c1Desc },
|
||||
{ num: '02', title: f.c2Title, desc: f.c2Desc },
|
||||
{ num: '03', title: f.c3Title, desc: f.c3Desc },
|
||||
{ num: '04', title: f.c4Title, desc: f.c4Desc },
|
||||
{ num: '05', title: f.c5Title, desc: f.c5Desc },
|
||||
{ num: '06', title: f.c6Title, desc: f.c6Desc },
|
||||
];
|
||||
---
|
||||
|
||||
<!-- Page Header -->
|
||||
<section class="w-full pt-32 md:pt-40 pb-16 md:pb-20 relative">
|
||||
<div class="glow-bg absolute inset-0 pointer-events-none"></div>
|
||||
<div class="relative text-center px-6 max-w-3xl mx-auto">
|
||||
<h1 class="reveal text-slate-900 text-3xl md:text-4xl lg:text-5xl font-bold mb-4">{f.title}</h1>
|
||||
<p class="reveal stagger-1 text-slate-500 text-lg">{f.subtitle}</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Feature Details - alternating layout -->
|
||||
<section class="w-full py-16 md:py-24" style="background-color: #F8F7FC;">
|
||||
<div class="max-w-6xl mx-auto px-6 space-y-24 md:space-y-32">
|
||||
{cards.map((card, index) => {
|
||||
const isEven = index % 2 === 1;
|
||||
const lines = [0,1,2,3,4,5].map(i => (index + i) % 2 === 0);
|
||||
return (
|
||||
<div class={`reveal flex flex-col ${isEven ? 'md:flex-row-reverse' : 'md:flex-row'} gap-10 md:gap-16 items-center`}>
|
||||
<!-- Text -->
|
||||
<div class="flex-1">
|
||||
<span class="font-mono text-6xl md:text-7xl font-bold select-none block mb-2 text-violet-100">{card.num}</span>
|
||||
<div class="flex items-center gap-3 mb-4 -mt-4">
|
||||
<div class="w-10 h-10 rounded-lg flex items-center justify-center bg-violet-50 shrink-0">
|
||||
<Fragment set:html={icons[index]} />
|
||||
</div>
|
||||
<h2 class="text-2xl md:text-3xl font-bold text-slate-900">{card.title}</h2>
|
||||
</div>
|
||||
<p class="text-slate-500 leading-relaxed max-w-lg">{card.desc}</p>
|
||||
</div>
|
||||
|
||||
<!-- Hexagram Illustration -->
|
||||
<div class="flex-1 w-full">
|
||||
<div class="relative w-full h-48 md:h-64 rounded-xl border border-violet-100 flex items-center justify-center bg-violet-50/30">
|
||||
<div class="flex flex-col gap-2.5 items-center">
|
||||
{lines.map((isYang) => isYang ? (
|
||||
<div class="hex-yang"></div>
|
||||
) : (
|
||||
<div class="hex-yin"><div></div><div></div></div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA -->
|
||||
<section class="w-full py-24 md:py-32 relative">
|
||||
<div class="glow-bg absolute inset-0 pointer-events-none"></div>
|
||||
<div class="reveal relative text-center px-6 max-w-3xl mx-auto">
|
||||
<h2 class="text-slate-900 text-3xl md:text-4xl font-bold mb-4">{f.tagline}</h2>
|
||||
<p class="text-slate-500 text-lg mb-8">{f.subtitle}</p>
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,40 @@
|
||||
---
|
||||
import { t, localePath, type Locale } from '../i18n/utils';
|
||||
|
||||
interface Props {
|
||||
locale: Locale;
|
||||
}
|
||||
|
||||
const { locale } = Astro.props;
|
||||
const footer = t(locale, 'footer');
|
||||
---
|
||||
|
||||
<footer class="w-full bg-slate-950 px-6 md:px-20 py-16 md:py-12">
|
||||
<div class="max-w-7xl mx-auto flex flex-col md:flex-row gap-10 md:gap-16">
|
||||
<div class="w-full md:w-64 flex flex-col gap-4 shrink-0">
|
||||
<a href={localePath(locale, '/')} class="flex items-center gap-3">
|
||||
<img src="/images/logo.png" alt="MeiYao" class="w-8 h-8" />
|
||||
<span class="text-white text-lg font-bold">{footer.brandName}</span>
|
||||
</a>
|
||||
<p class="text-slate-400 text-sm leading-relaxed">{footer.desc}</p>
|
||||
</div>
|
||||
|
||||
<div class="flex-1 flex flex-wrap gap-10 md:gap-16">
|
||||
<div class="flex flex-col gap-3 min-w-[120px]">
|
||||
<span class="text-white text-sm font-semibold">{footer.col1Title}</span>
|
||||
<a href={localePath(locale, '/features')} class="text-slate-400 text-sm hover:text-white">{footer.col1Link1}</a>
|
||||
<a href={localePath(locale, '/pricing')} class="text-slate-400 text-sm hover:text-white">{footer.col1Link2}</a>
|
||||
</div>
|
||||
<div class="flex flex-col gap-3 min-w-[120px]">
|
||||
<span class="text-white text-sm font-semibold">{footer.col2Title}</span>
|
||||
<a href="#" class="text-slate-400 text-sm hover:text-white">{footer.col2Link1}</a>
|
||||
<a href="#" class="text-slate-400 text-sm hover:text-white">{footer.col2Link2}</a>
|
||||
</div>
|
||||
<div class="flex flex-col gap-3 min-w-[120px]">
|
||||
<span class="text-white text-sm font-semibold">{footer.col3Title}</span>
|
||||
<a href={localePath(locale, '/privacy')} class="text-slate-400 text-sm hover:text-white">{footer.col3Link1}</a>
|
||||
<a href={localePath(locale, '/terms')} class="text-slate-400 text-sm hover:text-white">{footer.col3Link2}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
@@ -0,0 +1,46 @@
|
||||
---
|
||||
import { t, localePath, type Locale } from '../i18n/utils';
|
||||
|
||||
interface Props {
|
||||
locale: Locale;
|
||||
}
|
||||
|
||||
const { locale } = Astro.props;
|
||||
const hero = t(locale, 'hero');
|
||||
---
|
||||
|
||||
<section class="relative w-full min-h-screen flex items-center justify-center overflow-hidden">
|
||||
<!-- Particles -->
|
||||
<div class="particle-lines"></div>
|
||||
<div class="particle"></div><div class="particle"></div><div class="particle"></div>
|
||||
<div class="particle"></div><div class="particle"></div><div class="particle"></div>
|
||||
<div class="particle"></div><div class="particle"></div>
|
||||
|
||||
<!-- Purple glow -->
|
||||
<div class="glow-bg absolute inset-0 pointer-events-none"></div>
|
||||
|
||||
<div class="relative z-10 text-center px-6 max-w-3xl mx-auto">
|
||||
<span class="reveal stagger-1 inline-block px-4 py-1.5 rounded-full text-xs font-medium tracking-widest text-violet-600 border border-violet-200 bg-violet-50 mb-8">
|
||||
{hero.badge}
|
||||
</span>
|
||||
|
||||
<h1 class="reveal stagger-2 text-slate-900 text-4xl sm:text-5xl md:text-6xl font-bold leading-tight mb-6">
|
||||
{hero.headline}
|
||||
</h1>
|
||||
|
||||
<p class="reveal stagger-3 text-slate-500 text-lg md:text-xl leading-relaxed max-w-xl mx-auto mb-10">
|
||||
{hero.subtext}
|
||||
</p>
|
||||
|
||||
<div class="reveal stagger-4 flex flex-col sm:flex-row items-center justify-center gap-4">
|
||||
<a href={localePath(locale, '/login')} class="w-full sm:w-auto text-center cyber-gradient cyber-glow text-white text-sm font-medium px-8 py-3.5 rounded-lg hover:-translate-y-0.5 transition-all duration-300">
|
||||
{hero.primaryCta}
|
||||
</a>
|
||||
<a href={localePath(locale, '/features')} class="w-full sm:w-auto text-center text-violet-600 border border-violet-200 hover:bg-violet-50 text-sm font-medium px-8 py-3.5 rounded-lg transition-all duration-300">
|
||||
{hero.secondaryCta}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<p class="reveal stagger-5 text-slate-400 text-sm mt-12">{hero.trust}</p>
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,122 @@
|
||||
---
|
||||
import { t, localePath, type Locale } from '../i18n/utils';
|
||||
import fs from 'node:fs';
|
||||
import path from 'node:path';
|
||||
import { marked } from 'marked';
|
||||
|
||||
interface Props {
|
||||
locale: Locale;
|
||||
docType: 'privacy_policy' | 'terms_of_service' | 'about_us';
|
||||
}
|
||||
|
||||
const { locale, docType } = Astro.props;
|
||||
|
||||
const footer = t(locale, 'footer');
|
||||
const about = t(locale, 'about');
|
||||
|
||||
const titleMap: Record<string, Record<Locale, string>> = {
|
||||
privacy_policy: { zh: '隐私政策', zh_Hant: '隱私政策', en: 'Privacy Policy' },
|
||||
terms_of_service: { zh: '服务条款', zh_Hant: '服務條款', en: 'Terms of Service' },
|
||||
};
|
||||
const subtitleMap: Record<string, Record<Locale, string>> = {
|
||||
privacy_policy: { zh: '最后更新日期：2026年4月27日', zh_Hant: '最後更新日期：2026年4月27日', en: 'Last updated: April 27, 2026' },
|
||||
terms_of_service: { zh: '最后更新日期：2026年4月27日', zh_Hant: '最後更新日期：2026年4月27日', en: 'Last updated: April 27, 2026' },
|
||||
};
|
||||
const title = titleMap[docType]?.[locale] ?? '';
|
||||
const subtitle = subtitleMap[docType]?.[locale] ?? '';
|
||||
|
||||
const filePath = path.resolve('public/legal', locale, `${docType}.md`);
|
||||
let raw = '';
|
||||
try {
|
||||
raw = fs.readFileSync(filePath, 'utf-8');
|
||||
raw = raw.replace(/^#\s+.+\n*/m, '');
|
||||
} catch {
|
||||
raw = `Content not available.`;
|
||||
}
|
||||
const content = await marked(raw);
|
||||
|
||||
const sideInfo: Record<string, Record<Locale, { type: string; date: string; law?: string; email: string }>> = {
|
||||
privacy_policy: {
|
||||
zh: { type: '隐私政策', date: '2026年4月27日', email: 'ann@xunmee.com' },
|
||||
zh_Hant: { type: '隱私政策', date: '2026年4月27日', email: 'ann@xunmee.com' },
|
||||
en: { type: 'Privacy Policy', date: 'April 27, 2026', email: 'ann@xunmee.com' },
|
||||
},
|
||||
terms_of_service: {
|
||||
zh: { type: '服务条款', date: '2026年4月27日', law: '美国加利福尼亚州法律', email: 'ann@xunmee.com' },
|
||||
zh_Hant: { type: '服務條款', date: '2026年4月27日', law: '美國加利福尼亞州法律', email: 'ann@xunmee.com' },
|
||||
en: { type: 'Terms of Service', date: 'April 27, 2026', law: 'California, USA', email: 'ann@xunmee.com' },
|
||||
},
|
||||
};
|
||||
const info = sideInfo[docType]?.[locale];
|
||||
|
||||
const isActive = (linkType: string) => linkType === docType;
|
||||
---
|
||||
|
||||
<!-- Header -->
|
||||
<section class="w-full bg-gradient-to-b from-white to-violet-50 py-16 md:py-20 px-6 md:px-20 text-center">
|
||||
<h1 class="reveal text-slate-900 text-4xl md:text-[48px] font-extrabold">{title}</h1>
|
||||
<p class="reveal stagger-1 text-slate-500 text-lg mt-4">{subtitle}</p>
|
||||
</section>
|
||||
|
||||
<!-- Content: Left article + Right info card -->
|
||||
<section class="w-full py-16 md:py-20 px-6 md:px-20 bg-white">
|
||||
<div class="max-w-6xl mx-auto flex flex-col md:flex-row gap-16">
|
||||
<!-- Article -->
|
||||
<div class="reveal flex-1 prose prose-slate max-w-none
|
||||
[&_h2]:text-[28px] [&_h2]:font-bold [&_h2]:text-slate-900 [&_h2]:mt-8 [&_h2]:mb-2
|
||||
[&_h3]:text-2xl [&_h3]:font-bold [&_h3]:text-slate-900 [&_h3]:mt-6 [&_h3]:mb-2
|
||||
[&_p]:text-slate-500 [&_p]:text-base [&_p]:leading-loose
|
||||
[&_strong]:text-slate-700 [&_ul]:list-disc [&_ul]:pl-6 [&_li]:text-slate-500 [&_li]:leading-loose
|
||||
[&_a]:text-violet-600 [&_hr]:border-slate-200 [&_hr]:my-6">
|
||||
<Fragment set:html={content} />
|
||||
</div>
|
||||
|
||||
<!-- Side card -->
|
||||
{info && (
|
||||
<div class="reveal-right w-full md:w-[320px] bg-slate-50 border border-slate-200 rounded-2xl p-8 flex flex-col gap-6 shrink-0 self-start sticky top-28">
|
||||
<h3 class="text-slate-900 text-xl font-bold">
|
||||
{locale === 'en' ? 'Document Info' : '文档信息'}
|
||||
</h3>
|
||||
<div class="h-px bg-slate-200"></div>
|
||||
|
||||
<div>
|
||||
<p class="text-slate-400 text-sm font-semibold">{locale === 'en' ? 'Type' : '文档类型'}</p>
|
||||
<p class="text-slate-600 text-[15px]">{info.type}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-slate-400 text-sm font-semibold">{locale === 'en' ? 'Last Updated' : '最后更新'}</p>
|
||||
<p class="text-slate-600 text-[15px]">{info.date}</p>
|
||||
</div>
|
||||
{info.law && (
|
||||
<div>
|
||||
<p class="text-slate-400 text-sm font-semibold">{locale === 'en' ? 'Governing Law' : '适用法律'}</p>
|
||||
<p class="text-slate-600 text-[15px]">{info.law}</p>
|
||||
</div>
|
||||
)}
|
||||
<div>
|
||||
<p class="text-slate-400 text-sm font-semibold">{locale === 'en' ? 'Contact' : '联系邮箱'}</p>
|
||||
<p class="text-slate-600 text-[15px]">{info.email}</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Warning -->
|
||||
<section class="w-full bg-amber-50 py-20 px-6 md:px-20">
|
||||
<div class="reveal max-w-[800px] mx-auto text-center flex flex-col gap-5">
|
||||
<h3 class="text-amber-600 text-2xl font-bold">{about.warningTitle}</h3>
|
||||
<p class="text-amber-700 text-[15px] leading-loose">{about.warningBody}</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Legal Links -->
|
||||
<section class="w-full bg-slate-50 py-12 px-6 md:px-20">
|
||||
<div class="reveal max-w-[600px] mx-auto text-center flex flex-col gap-5">
|
||||
<h3 class="text-slate-900 text-xl font-bold">{about.legalTitle}</h3>
|
||||
<div class="flex justify-center gap-8">
|
||||
<a href={localePath(locale, '/privacy')} class={`text-[15px] hover:underline ${isActive('privacy_policy') ? 'text-violet-600 font-semibold' : 'text-slate-500'}`}>{footer.col3Link1}</a>
|
||||
<a href={localePath(locale, '/terms')} class={`text-[15px] hover:underline ${isActive('terms_of_service') ? 'text-violet-600 font-semibold' : 'text-slate-500'}`}>{footer.col3Link2}</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,44 @@
|
||||
---
|
||||
import { t, localePath, getLocaleLabel, type Locale } from '../i18n/utils';
|
||||
|
||||
interface Props {
|
||||
locale: Locale;
|
||||
}
|
||||
|
||||
const { locale } = Astro.props;
|
||||
const currentPath = Astro.url.pathname.replace(new RegExp(`^/(zh|zh_Hant|en)`), '');
|
||||
const nav = t(locale, 'nav');
|
||||
const footer = t(locale, 'footer');
|
||||
const otherLocales: Locale[] = (['zh', 'zh_Hant', 'en'] as Locale[]).filter((l) => l !== locale);
|
||||
---
|
||||
|
||||
<header class="w-full flex items-center justify-between h-16 md:h-20 px-5 md:px-20 border-b border-slate-200 bg-white sticky top-0 z-50">
|
||||
<a href={localePath(locale, '/')} class="flex items-center gap-2 md:gap-3 shrink-0">
|
||||
<img src="/images/logo.png" alt="MeiYao" class="w-8 h-8 md:w-9 md:h-9" />
|
||||
<span class="text-slate-900 text-lg md:text-xl font-bold whitespace-nowrap">{footer.brandName}</span>
|
||||
</a>
|
||||
|
||||
<nav class="flex items-center gap-4 md:gap-8">
|
||||
<a href={localePath(locale, '/features')} class="hidden sm:block text-slate-600 text-sm hover:text-slate-900 whitespace-nowrap">{nav.features}</a>
|
||||
<a href={localePath(locale, '/pricing')} class="hidden sm:block text-slate-600 text-sm hover:text-slate-900 whitespace-nowrap">{nav.pricing}</a>
|
||||
<a href={localePath(locale, '/about')} class="hidden sm:block text-slate-600 text-sm hover:text-slate-900 whitespace-nowrap">{nav.about}</a>
|
||||
|
||||
<div class="relative group">
|
||||
<button class="flex items-center gap-1 px-2 py-1.5 text-xs text-slate-600 rounded-lg border border-slate-200 bg-white hover:bg-slate-50 whitespace-nowrap">
|
||||
{getLocaleLabel(locale)}
|
||||
<svg class="w-3 h-3 text-slate-400" viewBox="0 0 12 12" fill="none"><path d="M3 5l3 3 3-3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</button>
|
||||
<div class="absolute right-0 top-full mt-1 bg-white border border-slate-200 rounded-lg shadow-lg py-1 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all z-50">
|
||||
{otherLocales.map((l) => (
|
||||
<a href={localePath(l, currentPath)} class="block px-4 py-2 text-sm text-slate-600 hover:bg-slate-50 hover:text-slate-900 whitespace-nowrap">
|
||||
{getLocaleLabel(l)}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a href={localePath(locale, '/login')} class="bg-violet-600 text-white text-xs md:text-sm font-semibold px-4 md:px-5 py-2 md:py-2.5 rounded-lg hover:bg-violet-700 transition-colors whitespace-nowrap">
|
||||
{nav.getStarted}
|
||||
</a>
|
||||
</nav>
|
||||
</header>
|
||||
@@ -0,0 +1,47 @@
|
||||
---
|
||||
import { t, type Locale } from '../i18n/utils';
|
||||
|
||||
interface Props {
|
||||
locale: Locale;
|
||||
}
|
||||
|
||||
const { locale } = Astro.props;
|
||||
const p = t(locale, 'pricing');
|
||||
|
||||
const plans = [
|
||||
{ name: p.p1Name, badge: p.p1Badge, price: p.p1Price, credits: p.p1Credits, desc: p.p1Desc, detail: '', featured: false },
|
||||
{ name: p.p2Name, badge: '', price: p.p2Price, credits: p.p2Credits, desc: p.p2Desc, detail: p.p2Detail, featured: false },
|
||||
{ name: p.p3Name, badge: p.p3Badge, price: p.p3Price, credits: p.p3Credits, desc: p.p3Desc, detail: '', featured: true },
|
||||
{ name: p.p4Name, badge: '', price: p.p4Price, credits: p.p4Credits, desc: p.p4Desc, detail: p.p4Detail, featured: false },
|
||||
];
|
||||
---
|
||||
|
||||
<!-- Header -->
|
||||
<section class="w-full py-24 md:py-32 relative overflow-hidden">
|
||||
<div class="glow-bg absolute inset-0 pointer-events-none"></div>
|
||||
<div class="relative text-center px-6 max-w-3xl mx-auto">
|
||||
<h1 class="reveal stagger-1 text-slate-900 text-3xl md:text-4xl lg:text-5xl font-bold mb-4">{p.title}</h1>
|
||||
<p class="reveal stagger-2 text-slate-500 text-lg max-w-xl mx-auto">{p.subtitle}</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Pricing Cards -->
|
||||
<section class="w-full py-16 md:py-24 px-6 md:px-20" style="background-color: #F8F7FC;">
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
{plans.map((plan, i) => (
|
||||
<div class={`reveal stagger-${(i % 4) + 1} rounded-2xl p-8 flex flex-col items-center text-center ${plan.featured ? 'bg-violet-50 border-2 border-violet-600 shadow-lg shadow-violet-100' : 'bg-white border border-slate-200'}`}>
|
||||
<h3 class="text-slate-900 text-[22px] font-bold whitespace-nowrap">{plan.name}</h3>
|
||||
{plan.badge && <span class={`text-xs font-medium mt-2 px-3 py-1 rounded-full ${plan.featured ? 'bg-violet-600 text-white' : 'bg-amber-100 text-amber-700'}`}>{plan.badge}</span>}
|
||||
<p class="text-slate-900 text-4xl font-extrabold mt-4">{plan.price}</p>
|
||||
<p class="text-violet-600 text-sm font-medium">{plan.credits}</p>
|
||||
<div class={`w-full h-px my-5 ${plan.featured ? 'bg-violet-200' : 'bg-slate-100'}`}></div>
|
||||
<p class="text-slate-500 text-sm">{plan.desc}</p>
|
||||
{plan.detail && <p class="text-slate-600 text-sm leading-relaxed mt-2">{plan.detail}</p>}
|
||||
<div class="flex-1 min-h-4"></div>
|
||||
<a href="#" class={`w-full text-center py-3 rounded-lg font-semibold transition-all duration-300 mt-6 ${plan.featured ? 'cyber-gradient cyber-glow text-white hover:-translate-y-0.5' : 'bg-white text-violet-600 border border-violet-200 hover:bg-violet-50'}`}>{p.buyNow}</a>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,76 @@
|
||||
---
|
||||
import { t, type Locale } from '../i18n/utils';
|
||||
|
||||
interface Props {
|
||||
locale: Locale;
|
||||
}
|
||||
|
||||
const { locale } = Astro.props;
|
||||
const showcase = t(locale, 'showcase');
|
||||
const features = t(locale, 'features');
|
||||
---
|
||||
|
||||
<!-- Features Grid Section -->
|
||||
<section class="w-full py-24 md:py-32" style="background-color: #F8F7FC;">
|
||||
<div class="max-w-7xl mx-auto px-6">
|
||||
<div class="reveal text-center mb-16">
|
||||
<p class="text-xs font-medium tracking-[0.15em] text-violet-600 uppercase mb-4">
|
||||
{showcase.title}
|
||||
</p>
|
||||
<h2 class="text-slate-900 text-3xl md:text-4xl font-bold mb-4">
|
||||
{features.c1Title}
|
||||
</h2>
|
||||
<p class="text-slate-500 text-lg max-w-xl mx-auto">{showcase.desc}</p>
|
||||
</div>
|
||||
|
||||
<div class="reveal stagger-1 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<div class="feature-card bg-white rounded-xl p-8 border border-violet-100">
|
||||
<div class="w-12 h-12 rounded-lg flex items-center justify-center mb-5 bg-violet-50">
|
||||
<svg class="w-6 h-6 text-violet-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2a10 10 0 100 20 10 10 0 000-20z"/><path d="M2 12h20"/></svg>
|
||||
</div>
|
||||
<h3 class="font-semibold text-lg mb-3 text-slate-900">{features.c1Title}</h3>
|
||||
<p class="text-sm leading-relaxed text-slate-500">{features.c1Desc}</p>
|
||||
</div>
|
||||
|
||||
<div class="feature-card bg-white rounded-xl p-8 border border-violet-100">
|
||||
<div class="w-12 h-12 rounded-lg flex items-center justify-center mb-5 bg-violet-50">
|
||||
<svg class="w-6 h-6 text-violet-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/></svg>
|
||||
</div>
|
||||
<h3 class="font-semibold text-lg mb-3 text-slate-900">{features.c2Title}</h3>
|
||||
<p class="text-sm leading-relaxed text-slate-500">{features.c2Desc}</p>
|
||||
</div>
|
||||
|
||||
<div class="feature-card bg-white rounded-xl p-8 border border-violet-100">
|
||||
<div class="w-12 h-12 rounded-lg flex items-center justify-center mb-5 bg-violet-50">
|
||||
<svg class="w-6 h-6 text-violet-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>
|
||||
</div>
|
||||
<h3 class="font-semibold text-lg mb-3 text-slate-900">{features.c3Title}</h3>
|
||||
<p class="text-sm leading-relaxed text-slate-500">{features.c3Desc}</p>
|
||||
</div>
|
||||
|
||||
<div class="feature-card bg-white rounded-xl p-8 border border-violet-100">
|
||||
<div class="w-12 h-12 rounded-lg flex items-center justify-center mb-5 bg-violet-50">
|
||||
<svg class="w-6 h-6 text-violet-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/></svg>
|
||||
</div>
|
||||
<h3 class="font-semibold text-lg mb-3 text-slate-900">{features.c4Title}</h3>
|
||||
<p class="text-sm leading-relaxed text-slate-500">{features.c4Desc}</p>
|
||||
</div>
|
||||
|
||||
<div class="feature-card bg-white rounded-xl p-8 border border-violet-100">
|
||||
<div class="w-12 h-12 rounded-lg flex items-center justify-center mb-5 bg-violet-50">
|
||||
<svg class="w-6 h-6 text-violet-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
|
||||
</div>
|
||||
<h3 class="font-semibold text-lg mb-3 text-slate-900">{features.c5Title}</h3>
|
||||
<p class="text-sm leading-relaxed text-slate-500">{features.c5Desc}</p>
|
||||
</div>
|
||||
|
||||
<div class="feature-card bg-white rounded-xl p-8 border border-violet-100">
|
||||
<div class="w-12 h-12 rounded-lg flex items-center justify-center mb-5 bg-violet-50">
|
||||
<svg class="w-6 h-6 text-violet-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
|
||||
</div>
|
||||
<h3 class="font-semibold text-lg mb-3 text-slate-900">{features.c6Title}</h3>
|
||||
<p class="text-sm leading-relaxed text-slate-500">{features.c6Desc}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,44 @@
|
||||
---
|
||||
import { t, type Locale } from '../i18n/utils';
|
||||
|
||||
interface Props {
|
||||
locale: Locale;
|
||||
}
|
||||
|
||||
const { locale } = Astro.props;
|
||||
const test = t(locale, 'testimonials');
|
||||
---
|
||||
|
||||
<section class="w-full py-24 md:py-32 px-6 md:px-20 bg-slate-900">
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<h2 class="reveal text-white text-3xl md:text-[40px] font-bold text-center mb-12">
|
||||
{test.title}
|
||||
</h2>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div class="reveal stagger-1 bg-slate-800 rounded-2xl p-8 flex flex-col justify-between min-h-[200px]">
|
||||
<p class="text-slate-300 text-base leading-relaxed">"{test.t1Quote}"</p>
|
||||
<div class="flex items-center gap-3 mt-6">
|
||||
<div class="w-10 h-10 bg-indigo-500 rounded-full shrink-0"></div>
|
||||
<span class="text-white text-sm font-medium">{test.t1Name}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="reveal stagger-2 bg-slate-800 rounded-2xl p-8 flex flex-col justify-between min-h-[200px]">
|
||||
<p class="text-slate-300 text-base leading-relaxed">"{test.t2Quote}"</p>
|
||||
<div class="flex items-center gap-3 mt-6">
|
||||
<div class="w-10 h-10 bg-violet-500 rounded-full shrink-0"></div>
|
||||
<span class="text-white text-sm font-medium">{test.t2Name}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="reveal stagger-3 bg-slate-800 rounded-2xl p-8 flex flex-col justify-between min-h-[200px]">
|
||||
<p class="text-slate-300 text-base leading-relaxed">"{test.t3Quote}"</p>
|
||||
<div class="flex items-center gap-3 mt-6">
|
||||
<div class="w-10 h-10 bg-cyan-500 rounded-full shrink-0"></div>
|
||||
<span class="text-white text-sm font-medium">{test.t3Name}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,74 @@
|
||||
export type Locale = 'zh' | 'zh_Hant' | 'en';
|
||||
export const defaultLocale: Locale = 'zh';
|
||||
export const locales: Locale[] = ['zh', 'zh_Hant', 'en'];
|
||||
|
||||
export function isValidLocale(locale: string): locale is Locale {
|
||||
return (locales as readonly string[]).includes(locale);
|
||||
}
|
||||
|
||||
export function getLocaleFromUrl(url: URL): Locale {
|
||||
const [, locale] = url.pathname.split('/');
|
||||
if (isValidLocale(locale)) return locale;
|
||||
return defaultLocale;
|
||||
}
|
||||
|
||||
export function getLocaleLabel(locale: Locale): string {
|
||||
const labels: Record<Locale, string> = { zh: '简体中文', zh_Hant: '繁體中文', en: 'English' };
|
||||
return labels[locale];
|
||||
}
|
||||
|
||||
export interface Translations {
|
||||
nav: { features: string; pricing: string; about: string; getStarted: string };
|
||||
hero: { badge: string; headline: string; subtext: string; primaryCta: string; secondaryCta: string; trust: string };
|
||||
showcase: { title: string; desc: string; feature1Title: string; feature1Desc: string };
|
||||
testimonials: { title: string; t1Quote: string; t1Name: string; t2Quote: string; t2Name: string; t3Quote: string; t3Name: string };
|
||||
cta: { title: string; subtitle: string; button: string };
|
||||
footer: { brandName: string; desc: string; col1Title: string; col1Link1: string; col1Link2: string; col2Title: string; col2Link1: string; col2Link2: string; col3Title: string; col3Link1: string; col3Link2: string };
|
||||
features: { title: string; subtitle: string; tagline: string; c1Title: string; c1Desc: string; c2Title: string; c2Desc: string; c3Title: string; c3Desc: string; c4Title: string; c4Desc: string; c5Title: string; c5Desc: string; c6Title: string; c6Desc: string };
|
||||
pricing: { title: string; subtitle: string; p1Name: string; p1Badge: string; p1Price: string; p1Credits: string; p1Desc: string; p2Name: string; p2Price: string; p2Credits: string; p2Desc: string; p2Detail: string; p3Name: string; p3Badge: string; p3Price: string; p3Credits: string; p3Desc: string; p4Name: string; p4Price: string; p4Credits: string; p4Desc: string; p4Detail: string; buyNow: string };
|
||||
about: { title: string; subtitle: string; storyTitle: string; p1: string; p2: string; p3: string; companyInfo: string; company: string; emailLabel: string; email: string; devLabel: string; developer: string; icpLabel: string; icp: string; warningTitle: string; warningBody: string; legalTitle: string };
|
||||
}
|
||||
|
||||
const translations: Record<Locale, Translations> = {
|
||||
zh: {
|
||||
nav: { features: '功能', pricing: '定价', about: '关于', getStarted: '开始使用' },
|
||||
hero: { badge: '传承千年的东方智慧', headline: '以易经之名 寻心中所惑', subtext: '每一次签问，都是与自己的对话。觅爻将古老易经智慧与现代体验结合，让你在宁静中找到属于此刻的指引。', primaryCta: '免费开始签问', secondaryCta: '了解更多', trust: '已为 10,000+ 用户提供签问服务' },
|
||||
showcase: { title: '仪式感的签问体验', desc: '不同于简单的随机算法，觅爻在每一次签问中融入易经的哲学思考。静心、默念、抽取三步完成，却是一次内心的沉淀之旅。', feature1Title: '64卦精解', feature1Desc: '每一卦配有详细爻辞与今译' },
|
||||
testimonials: { title: '用户心声', t1Quote: '在最迷茫的时候，觅爻给了我一个方向。不管结果如何，那种静下心来的过程本身就很有帮助。', t1Name: '林小姐 · 产品经理', t2Quote: '界面很清爽，没有乱七八糟的广告。每次签问都像是一次心灵的短暂旅行。', t2Name: '张先生 · 创业者', t3Quote: '我是一个程序员，原本不信这些。但试了几次后发现，这种随机性反而让我看到平时忽略的可能性。', t3Name: '王先生 · 软件工程师' },
|
||||
cta: { title: '开始你的第一次签问', subtitle: '无需注册，立即体验。让古老的智慧，为现代的你指引方向。', button: '免费开始 →' },
|
||||
footer: { brandName: '觅爻签问', desc: '以古老智慧，解读今时困惑。让每一次签问，都成为与自己对话的机会。', col1Title: '产品', col1Link1: '功能介绍', col1Link2: '定价', col2Title: '支持', col2Link1: '帮助中心', col2Link2: '联系我们', col3Title: '法律', col3Link1: '隐私政策', col3Link2: '服务条款' },
|
||||
features: { title: '功能特性', subtitle: '以古老智慧解读今时困惑，觅爻签问提供完整的易学体验', tagline: '从起卦到解读，每一步都精心设计', c1Title: '两种起卦方式', c1Desc: '手动起卦与自动起卦，灵活选择最适合你的方式。推荐使用手动起卦，卦象解读更准确。', c2Title: 'AI 解卦分析', c2Desc: '基于传统六爻卦象与周易哲学体系，结合AI智能分析，提供深度卦象解读与建议。', c3Title: '九类问题覆盖', c3Desc: '事业、情感、财富、运势、解梦、健康、学业、寻物等九大领域，全面覆盖日常生活所问。', c4Title: '追问互动', c4Desc: '每次解卦后可深入追问一次，针对卦象细节获取更多洞见，让解读更加全面深入。', c5Title: '历史记录', c5Desc: '自动保存所有解卦记录，包括卦象详情与AI解读。随时回顾历史，追踪问题变化趋势。', c6Title: '点数系统', c6Desc: '提供灵活积分套餐：新人专享、入门补充、常用加量、高频进阶。按需购买，自由使用。' },
|
||||
pricing: { title: '选择适合你的套餐', subtitle: '灵活积分套餐，按需选择，随时可用', p1Name: '新人专享包', p1Badge: '限购一次', p1Price: '$0.99', p1Credits: '60 积分', p1Desc: '最适合初次体验', p2Name: '入门补充包', p2Price: '$4.99', p2Credits: '100 积分', p2Desc: '日常解卦补充', p2Detail: '适量点数补充，经济实惠之选', p3Name: '常用加量包', p3Badge: '推荐', p3Price: '$7.99', p3Credits: '210 积分', p3Desc: '最适合日常使用', p4Name: '高频进阶包', p4Price: '$12.99', p4Credits: '415 积分', p4Desc: '重度使用优选', p4Detail: '大量点数储备，超值单价', buyNow: '立即购买' },
|
||||
about: { title: '关于觅爻签问', subtitle: '了解我们的理念与定位', storyTitle: '我们的故事', p1: '觅爻签问是一个借助于 AI 解读传统六爻卦象的平台，为用户了解中国传统易学文化提供一个窗口。六爻卦象源于《周易》深邃的哲学体系，是古人探索世界运行规律的一种独特方法。古人认为宇宙万物相互关联，在你起卦时，你的心念与时空信息会凝结成卦象的方式呈现出来。', p2: '觅爻签问基于这样的思路，帮助你跳出局限思维，从全局和演变趋势看清矛盾、机会与风险，为判断和行动提供参考。', p3: '用 AI 解锁古老智慧，让觅爻签问成为你探索趋势、明晰方向的现代助手。', companyInfo: '公司信息', company: '洵觅科技（深圳）有限公司', emailLabel: '联系邮箱', email: 'xuyunlong@xunmee.com', devLabel: '开发者', developer: 'Ann Lee', icpLabel: '备案号', icp: '粤ICP备2025428416号-1A', warningTitle: '特别提醒', warningBody: '卦象解读结果均由 AI 生成，仅供娱乐参考，切不可作为商业、医疗等专业领域的决策依据。理性看待卦象，自由掌握人生。', legalTitle: '法律条款' },
|
||||
},
|
||||
zh_Hant: {
|
||||
nav: { features: '功能', pricing: '定價', about: '關於', getStarted: '開始使用' },
|
||||
hero: { badge: '傳承千年的東方智慧', headline: '以易經之名 尋心中所惑', subtext: '每一次簽問，都是與自己的對話。覓爻將古老易經智慧與現代體驗結合，讓你在寧靜中找到屬於此刻的指引。', primaryCta: '免費開始簽問', secondaryCta: '瞭解更多', trust: '已為 10,000+ 用戶提供簽問服務' },
|
||||
showcase: { title: '儀式感的簽問體驗', desc: '不同於簡單的隨機算法，覓爻在每一次簽問中融入易經的哲學思考。靜心、默念、抽取三步完成，卻是一次內心的沉澱之旅。', feature1Title: '64卦精解', feature1Desc: '每一卦配有詳細爻辭與今譯' },
|
||||
testimonials: { title: '用戶心聲', t1Quote: '在最迷茫的時候，覓爻給了我一個方向。不管結果如何，那種靜下心來的過程本身就很有幫助。', t1Name: '林小姐 · 產品經理', t2Quote: '界面很清爽，沒有亂七八糟的廣告。每次簽問都像是一次心靈的短暫旅行。', t2Name: '張先生 · 創業者', t3Quote: '我是一個程序員，原本不信這些。但試了幾次後發現，這種隨機性反而讓我看到平時忽略的可能性。', t3Name: '王先生 · 軟件工程師' },
|
||||
cta: { title: '開始你的第一次簽問', subtitle: '無需註冊，立即體驗。讓古老的智慧，為現代的你指引方向。', button: '免費開始 →' },
|
||||
footer: { brandName: '覓爻簽問', desc: '以古老智慧，解讀今時困惑。讓每一次簽問，都成為與自己對話的機會。', col1Title: '產品', col1Link1: '功能介紹', col1Link2: '定價', col2Title: '支持', col2Link1: '幫助中心', col2Link2: '聯繫我們', col3Title: '法律', col3Link1: '隱私政策', col3Link2: '服務條款' },
|
||||
features: { title: '功能特性', subtitle: '以古老智慧解讀今時困惑，覓爻簽問提供完整的易學體驗', tagline: '從起卦到解讀，每一步都精心設計', c1Title: '兩種起卦方式', c1Desc: '手動起卦與自動起卦，靈活選擇最適合你的方式。推薦使用手動起卦，卦象解讀更準確。', c2Title: 'AI 解卦分析', c2Desc: '基於傳統六爻卦象與周易哲學體系，結合AI智能分析，提供深度卦象解讀與建議。', c3Title: '九類問題覆蓋', c3Desc: '事業、情感、財富、運勢、解夢、健康、學業、尋物等九大領域，全面覆蓋日常生活所問。', c4Title: '追問互動', c4Desc: '每次解卦後可深入追問一次，針對卦象細節獲取更多洞見，讓解讀更加全面深入。', c5Title: '歷史記錄', c5Desc: '自動保存所有解卦記錄，包括卦象詳情與AI解讀。隨時回顧歷史，追蹤問題變化趨勢。', c6Title: '點數系統', c6Desc: '提供靈活積分套餐：新人專享、入門補充、常用加量、高頻進階。按需購買，自由使用。' },
|
||||
pricing: { title: '選擇適合你的套餐', subtitle: '靈活積分套餐，按需選擇，隨時可用', p1Name: '新人專享包', p1Badge: '限購一次', p1Price: '$0.99', p1Credits: '60 積分', p1Desc: '最適合初次體驗', p2Name: '入門補充包', p2Price: '$4.99', p2Credits: '100 積分', p2Desc: '日常解卦補充', p2Detail: '適量點數補充，經濟實惠之選', p3Name: '常用加量包', p3Badge: '推薦', p3Price: '$7.99', p3Credits: '210 積分', p3Desc: '最適合日常使用', p4Name: '高頻進階包', p4Price: '$12.99', p4Credits: '415 積分', p4Desc: '重度使用優選', p4Detail: '大量點數儲備，超值單價', buyNow: '立即購買' },
|
||||
about: { title: '關於覓爻簽問', subtitle: '了解我們的理念與定位', storyTitle: '我們的故事', p1: '覓爻簽問是一個借助於 AI 解讀傳統六爻卦象的平台，為用戶了解中國傳統易學文化提供一個窗口。六爻卦象源於《周易》深邃的哲學體系，是古人探索世界運行規律的一種獨特方法。古人認為宇宙萬物相互關聯，在你起卦時，你的心念與時空信息會凝結成卦象的方式呈現出來。', p2: '覓爻簽問基於這樣的思路，幫助你跳出局限思維，從全局和演變趨勢看清矛盾、機會與風險，為判斷和行動提供參考。', p3: '用 AI 解鎖古老智慧，讓覓爻簽問成為你探索趨勢、明晰方向的現代助手。', companyInfo: '公司信息', company: '洵覓科技（深圳）有限公司', emailLabel: '聯繫郵箱', email: 'xuyunlong@xunmee.com', devLabel: '開發者', developer: 'Ann Lee', icpLabel: '備案號', icp: '粵ICP備2025428416號-1A', warningTitle: '特別提醒', warningBody: '卦象解讀結果均由 AI 生成，僅供娛樂參考，切不可作為商業、醫療等專業領域的決策依據。理性看待卦象，自由掌握人生。', legalTitle: '法律條款' },
|
||||
},
|
||||
en: {
|
||||
nav: { features: 'Features', pricing: 'Pricing', about: 'About', getStarted: 'Get Started' },
|
||||
hero: { badge: 'Ancient Eastern Wisdom', headline: 'Seek Answers Through the Wisdom of I Ching', subtext: 'Every divination is a dialogue with yourself. MeiYao combines ancient I Ching wisdom with modern experience, guiding you to find clarity in tranquility.', primaryCta: 'Start Free', secondaryCta: 'Learn More', trust: 'Trusted by 10,000+ users' },
|
||||
showcase: { title: 'A Ritualistic Divination Experience', desc: 'Unlike simple random algorithms, MeiYao infuses every divination with the philosophical depth of I Ching. Three steps — calm your mind, focus your intention, draw your hexagram — yet it becomes a journey of inner reflection.', feature1Title: '64 Hexagram Interpretations', feature1Desc: 'Each hexagram comes with detailed line texts and modern commentary' },
|
||||
testimonials: { title: 'What Users Say', t1Quote: 'When I was most lost, MeiYao gave me direction. Regardless of the result, the process of calming down was itself very helpful.', t1Name: 'Ms. Lin · Product Manager', t2Quote: 'The interface is clean, no annoying ads. Each divination feels like a brief journey for the soul.', t2Name: 'Mr. Zhang · Entrepreneur', t3Quote: "I'm a programmer and didn't believe in this stuff. But after trying it a few times, the randomness actually helped me see possibilities I'd been overlooking.", t3Name: 'Mr. Wang · Software Engineer' },
|
||||
cta: { title: 'Begin Your First Divination', subtitle: 'No registration needed. Let ancient wisdom guide your modern life.', button: 'Start Free →' },
|
||||
footer: { brandName: 'MeiYao Divination', desc: 'Using ancient wisdom to interpret modern confusion. Let every divination become a chance to dialogue with yourself.', col1Title: 'Product', col1Link1: 'Features', col1Link2: 'Pricing', col2Title: 'Support', col2Link1: 'Help Center', col2Link2: 'Contact Us', col3Title: 'Legal', col3Link1: 'Privacy Policy', col3Link2: 'Terms of Service' },
|
||||
features: { title: 'Features', subtitle: 'Ancient wisdom meets modern困惑, MeiYao provides a complete I Ching experience', tagline: 'From casting to interpretation, every step is carefully designed', c1Title: 'Two Casting Methods', c1Desc: 'Manual and auto casting — choose what suits you best. Manual casting is recommended for more accurate readings.', c2Title: 'AI Analysis', c2Desc: 'Combining traditional Six-Line hexagrams with AI intelligence for in-depth interpretation and suggestions.', c3Title: '9 Question Categories', c3Desc: 'Career, love, wealth, fortune, dreams, health, study, lost items, and more — covering all aspects of daily life.', c4Title: 'Follow-up Questions', c4Desc: 'Ask one follow-up question after each reading for deeper insights into specific hexagram details.', c5Title: 'History', c5Desc: 'All readings are automatically saved with full hexagram details and AI interpretations. Review anytime.', c6Title: 'Credits System', c6Desc: 'Flexible credit packages: starter, basic, popular, and premium. Purchase as needed, use freely.' },
|
||||
pricing: { title: 'Choose Your Plan', subtitle: 'Flexible credit packages, pay as you go', p1Name: 'Starter Pack', p1Badge: 'Once Only', p1Price: '$0.99', p1Credits: '60 credits', p1Desc: 'Best for first-timers', p2Name: 'Basic Pack', p2Price: '$4.99', p2Credits: '100 credits', p2Desc: 'Daily supplement', p2Detail: 'Affordable credit refill', p3Name: 'Popular Pack', p3Badge: 'Popular', p3Price: '$7.99', p3Credits: '210 credits', p3Desc: 'Best for daily use', p4Name: 'Premium Pack', p4Price: '$12.99', p4Credits: '415 credits', p4Desc: 'Best value per credit', p4Detail: 'Bulk credits at best unit price', buyNow: 'Buy Now' },
|
||||
about: { title: 'About MeiYao Divination', subtitle: 'Our vision and philosophy', storyTitle: 'Our Story', p1: 'MeiYao Divination is an AI-assisted platform for interpreting traditional Six-Line divination and opening a window into classical Chinese wisdom. Six-Line divination originates from the deep philosophical system of the I Ching.', p2: 'MeiYao Divination helps you step outside narrow thinking, understand contradictions, opportunities, and risks from a broader trend perspective, and make calmer, more thoughtful decisions.', p3: 'Unlock ancient wisdom with AI. Let MeiYao Divination be your modern companion for exploring trends and finding direction.', companyInfo: 'Company', company: 'Xunmee Technology (Shenzhen) Co., Ltd.', emailLabel: 'Email', email: 'xuyunlong@xunmee.com', devLabel: 'Developer', developer: 'Ann Lee', icpLabel: 'ICP License', icp: 'Yue ICP 2025428416-1A', warningTitle: 'Important Notice', warningBody: 'All divination interpretations are AI-generated for entertainment only. Do not use them as professional advice for business, medical, or legal decisions.', legalTitle: 'Legal' },
|
||||
},
|
||||
};
|
||||
|
||||
export function t<K extends keyof Translations>(locale: Locale, section: K): Translations[K] {
|
||||
return translations[locale][section];
|
||||
}
|
||||
|
||||
export function localePath(locale: Locale, path: string): string {
|
||||
return `/${locale}${path}`;
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
---
|
||||
import Navbar from '../components/Navbar.astro';
|
||||
import Footer from '../components/Footer.astro';
|
||||
import '../styles/global.css';
|
||||
import '../styles/animations.css';
|
||||
|
||||
interface Props {
|
||||
locale: import('../i18n/utils').Locale;
|
||||
}
|
||||
|
||||
const { locale } = Astro.props;
|
||||
---
|
||||
|
||||
<!doctype html>
|
||||
<html lang={locale}>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
</head>
|
||||
<body class="bg-white text-slate-900 antialiased">
|
||||
<Navbar locale={locale} />
|
||||
<main>
|
||||
<slot />
|
||||
</main>
|
||||
<Footer locale={locale} />
|
||||
<script>
|
||||
const observer = new IntersectionObserver(
|
||||
(entries) => {
|
||||
entries.forEach((entry) => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('visible');
|
||||
observer.unobserve(entry.target);
|
||||
}
|
||||
});
|
||||
},
|
||||
{ rootMargin: '0px 0px -60px 0px', threshold: 0.1 }
|
||||
);
|
||||
document.querySelectorAll('.reveal, .reveal-left, .reveal-right, .reveal-scale').forEach((el) => {
|
||||
observer.observe(el);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,8 @@
|
||||
---
|
||||
import MarketingLayout from '../../layouts/Marketing.astro';
|
||||
import AboutPage from '../../components/AboutPage.astro';
|
||||
const locale = 'en' as const;
|
||||
---
|
||||
<MarketingLayout locale={locale}>
|
||||
<AboutPage locale={locale} />
|
||||
</MarketingLayout>
|
||||
@@ -0,0 +1,8 @@
|
||||
---
|
||||
import MarketingLayout from '../../layouts/Marketing.astro';
|
||||
import FeaturesPage from '../../components/FeaturesPage.astro';
|
||||
const locale = 'en' as const;
|
||||
---
|
||||
<MarketingLayout locale={locale}>
|
||||
<FeaturesPage locale={locale} />
|
||||
</MarketingLayout>
|
||||
@@ -0,0 +1,13 @@
|
||||
---
|
||||
import MarketingLayout from '../../layouts/Marketing.astro';
|
||||
import Hero from '../../components/Hero.astro';
|
||||
import Showcase from '../../components/Showcase.astro';
|
||||
import CtaSection from '../../components/CtaSection.astro';
|
||||
|
||||
const locale = 'en' as const;
|
||||
---
|
||||
<MarketingLayout locale={locale}>
|
||||
<Hero locale={locale} />
|
||||
<Showcase locale={locale} />
|
||||
<CtaSection locale={locale} />
|
||||
</MarketingLayout>
|
||||
@@ -0,0 +1,8 @@
|
||||
---
|
||||
import MarketingLayout from '../../layouts/Marketing.astro';
|
||||
import PricingPage from '../../components/PricingPage.astro';
|
||||
const locale = 'en' as const;
|
||||
---
|
||||
<MarketingLayout locale={locale}>
|
||||
<PricingPage locale={locale} />
|
||||
</MarketingLayout>
|
||||
@@ -0,0 +1,8 @@
|
||||
---
|
||||
import MarketingLayout from '../../layouts/Marketing.astro';
|
||||
import LegalPage from '../../components/LegalPage.astro';
|
||||
const locale = 'en' as const;
|
||||
---
|
||||
<MarketingLayout locale={locale}>
|
||||
<LegalPage locale={locale} docType="privacy_policy" />
|
||||
</MarketingLayout>
|
||||
@@ -0,0 +1,8 @@
|
||||
---
|
||||
import MarketingLayout from '../../layouts/Marketing.astro';
|
||||
import LegalPage from '../../components/LegalPage.astro';
|
||||
const locale = 'en' as const;
|
||||
---
|
||||
<MarketingLayout locale={locale}>
|
||||
<LegalPage locale={locale} docType="terms_of_service" />
|
||||
</MarketingLayout>
|
||||
@@ -0,0 +1,3 @@
|
||||
---
|
||||
return Astro.redirect('/zh/');
|
||||
---
|
||||
@@ -0,0 +1,8 @@
|
||||
---
|
||||
import MarketingLayout from '../../layouts/Marketing.astro';
|
||||
import AboutPage from '../../components/AboutPage.astro';
|
||||
const locale = 'zh' as const;
|
||||
---
|
||||
<MarketingLayout locale={locale}>
|
||||
<AboutPage locale={locale} />
|
||||
</MarketingLayout>
|
||||
@@ -0,0 +1,8 @@
|
||||
---
|
||||
import MarketingLayout from '../../layouts/Marketing.astro';
|
||||
import FeaturesPage from '../../components/FeaturesPage.astro';
|
||||
const locale = 'zh' as const;
|
||||
---
|
||||
<MarketingLayout locale={locale}>
|
||||
<FeaturesPage locale={locale} />
|
||||
</MarketingLayout>
|
||||
@@ -0,0 +1,13 @@
|
||||
---
|
||||
import MarketingLayout from '../../layouts/Marketing.astro';
|
||||
import Hero from '../../components/Hero.astro';
|
||||
import Showcase from '../../components/Showcase.astro';
|
||||
import CtaSection from '../../components/CtaSection.astro';
|
||||
|
||||
const locale = 'zh' as const;
|
||||
---
|
||||
<MarketingLayout locale={locale}>
|
||||
<Hero locale={locale} />
|
||||
<Showcase locale={locale} />
|
||||
<CtaSection locale={locale} />
|
||||
</MarketingLayout>
|
||||
@@ -0,0 +1,8 @@
|
||||
---
|
||||
import MarketingLayout from '../../layouts/Marketing.astro';
|
||||
import PricingPage from '../../components/PricingPage.astro';
|
||||
const locale = 'zh' as const;
|
||||
---
|
||||
<MarketingLayout locale={locale}>
|
||||
<PricingPage locale={locale} />
|
||||
</MarketingLayout>
|
||||
@@ -0,0 +1,8 @@
|
||||
---
|
||||
import MarketingLayout from '../../layouts/Marketing.astro';
|
||||
import LegalPage from '../../components/LegalPage.astro';
|
||||
const locale = 'zh' as const;
|
||||
---
|
||||
<MarketingLayout locale={locale}>
|
||||
<LegalPage locale={locale} docType="privacy_policy" />
|
||||
</MarketingLayout>
|
||||
@@ -0,0 +1,8 @@
|
||||
---
|
||||
import MarketingLayout from '../../layouts/Marketing.astro';
|
||||
import LegalPage from '../../components/LegalPage.astro';
|
||||
const locale = 'zh' as const;
|
||||
---
|
||||
<MarketingLayout locale={locale}>
|
||||
<LegalPage locale={locale} docType="terms_of_service" />
|
||||
</MarketingLayout>
|
||||
@@ -0,0 +1,8 @@
|
||||
---
|
||||
import MarketingLayout from '../../layouts/Marketing.astro';
|
||||
import AboutPage from '../../components/AboutPage.astro';
|
||||
const locale = 'zh_Hant' as const;
|
||||
---
|
||||
<MarketingLayout locale={locale}>
|
||||
<AboutPage locale={locale} />
|
||||
</MarketingLayout>
|
||||
@@ -0,0 +1,8 @@
|
||||
---
|
||||
import MarketingLayout from '../../layouts/Marketing.astro';
|
||||
import FeaturesPage from '../../components/FeaturesPage.astro';
|
||||
const locale = 'zh_Hant' as const;
|
||||
---
|
||||
<MarketingLayout locale={locale}>
|
||||
<FeaturesPage locale={locale} />
|
||||
</MarketingLayout>
|
||||
@@ -0,0 +1,13 @@
|
||||
---
|
||||
import MarketingLayout from '../../layouts/Marketing.astro';
|
||||
import Hero from '../../components/Hero.astro';
|
||||
import Showcase from '../../components/Showcase.astro';
|
||||
import CtaSection from '../../components/CtaSection.astro';
|
||||
|
||||
const locale = 'zh_Hant' as const;
|
||||
---
|
||||
<MarketingLayout locale={locale}>
|
||||
<Hero locale={locale} />
|
||||
<Showcase locale={locale} />
|
||||
<CtaSection locale={locale} />
|
||||
</MarketingLayout>
|
||||
@@ -0,0 +1,8 @@
|
||||
---
|
||||
import MarketingLayout from '../../layouts/Marketing.astro';
|
||||
import PricingPage from '../../components/PricingPage.astro';
|
||||
const locale = 'zh_Hant' as const;
|
||||
---
|
||||
<MarketingLayout locale={locale}>
|
||||
<PricingPage locale={locale} />
|
||||
</MarketingLayout>
|
||||
@@ -0,0 +1,8 @@
|
||||
---
|
||||
import MarketingLayout from '../../layouts/Marketing.astro';
|
||||
import LegalPage from '../../components/LegalPage.astro';
|
||||
const locale = 'zh_Hant' as const;
|
||||
---
|
||||
<MarketingLayout locale={locale}>
|
||||
<LegalPage locale={locale} docType="privacy_policy" />
|
||||
</MarketingLayout>
|
||||
@@ -0,0 +1,8 @@
|
||||
---
|
||||
import MarketingLayout from '../../layouts/Marketing.astro';
|
||||
import LegalPage from '../../components/LegalPage.astro';
|
||||
const locale = 'zh_Hant' as const;
|
||||
---
|
||||
<MarketingLayout locale={locale}>
|
||||
<LegalPage locale={locale} docType="terms_of_service" />
|
||||
</MarketingLayout>
|
||||
@@ -0,0 +1,168 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
@keyframes fade-in-up {
|
||||
from { opacity: 0; transform: translateY(24px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
@keyframes fade-in {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
@keyframes slide-in-left {
|
||||
from { opacity: 0; transform: translateX(-40px); }
|
||||
to { opacity: 1; transform: translateX(0); }
|
||||
}
|
||||
|
||||
@keyframes slide-in-right {
|
||||
from { opacity: 0; transform: translateX(40px); }
|
||||
to { opacity: 1; transform: translateX(0); }
|
||||
}
|
||||
|
||||
@keyframes scale-in {
|
||||
from { opacity: 0; transform: scale(0.95); }
|
||||
to { opacity: 1; transform: scale(1); }
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0%, 100% { transform: translateY(0px); }
|
||||
50% { transform: translateY(-10px); }
|
||||
}
|
||||
|
||||
@keyframes glow-pulse {
|
||||
0%, 100% { opacity: 0.12; }
|
||||
50% { opacity: 0.2; }
|
||||
}
|
||||
|
||||
@keyframes particle-drift {
|
||||
0% { transform: translate(0, 0); }
|
||||
25% { transform: translate(10px, -20px); }
|
||||
50% { transform: translate(-5px, -40px); }
|
||||
75% { transform: translate(15px, -20px); }
|
||||
100% { transform: translate(0, 0); }
|
||||
}
|
||||
|
||||
/* Reveal animations */
|
||||
.reveal { opacity: 0; will-change: transform, opacity; }
|
||||
.reveal.visible { animation: fade-in-up 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
|
||||
|
||||
.reveal-left { opacity: 0; will-change: transform, opacity; }
|
||||
.reveal-left.visible { animation: slide-in-left 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
|
||||
|
||||
.reveal-right { opacity: 0; will-change: transform, opacity; }
|
||||
.reveal-right.visible { animation: slide-in-right 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
|
||||
|
||||
.reveal-scale { opacity: 0; will-change: transform, opacity; }
|
||||
.reveal-scale.visible { animation: scale-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
|
||||
|
||||
.reveal.visible.stagger-1 { animation-delay: 0.1s; }
|
||||
.reveal.visible.stagger-2 { animation-delay: 0.2s; }
|
||||
.reveal.visible.stagger-3 { animation-delay: 0.3s; }
|
||||
.reveal.visible.stagger-4 { animation-delay: 0.4s; }
|
||||
.reveal.visible.stagger-5 { animation-delay: 0.5s; }
|
||||
.reveal.visible.stagger-6 { animation-delay: 0.6s; }
|
||||
|
||||
/* Cyber gradient */
|
||||
.cyber-gradient {
|
||||
background: linear-gradient(135deg, #8B5CF6 0%, #A78BFA 50%, #C084FC 100%);
|
||||
}
|
||||
|
||||
.cyber-glow {
|
||||
box-shadow: 0 0 20px rgba(139, 92, 246, 0.35), 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* Purple glow backgrounds */
|
||||
.glow-bg {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.glow-bg::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -10%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 800px;
|
||||
height: 600px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(ellipse at center, rgba(139, 92, 246, 0.15) 0%, transparent 70%);
|
||||
pointer-events: none;
|
||||
animation: glow-pulse 6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.glow-bg-wide::before {
|
||||
width: 1200px;
|
||||
height: 800px;
|
||||
}
|
||||
|
||||
/* Floating particles (pure CSS) */
|
||||
.particle {
|
||||
position: absolute;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
border-radius: 50%;
|
||||
background: rgba(139, 92, 246, 0.4);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.particle:nth-child(1) { top: 20%; left: 15%; animation: particle-drift 8s ease-in-out infinite; }
|
||||
.particle:nth-child(2) { top: 40%; left: 75%; animation: particle-drift 12s ease-in-out infinite 1s; width: 3px; height: 3px; }
|
||||
.particle:nth-child(3) { top: 60%; left: 30%; animation: particle-drift 10s ease-in-out infinite 2s; width: 5px; height: 5px; }
|
||||
.particle:nth-child(4) { top: 30%; left: 55%; animation: particle-drift 9s ease-in-out infinite 3s; }
|
||||
.particle:nth-child(5) { top: 70%; left: 85%; animation: particle-drift 11s ease-in-out infinite 4s; width: 3px; height: 3px; }
|
||||
.particle:nth-child(6) { top: 50%; left: 10%; animation: particle-drift 7s ease-in-out infinite 5s; width: 2px; height: 2px; }
|
||||
.particle:nth-child(7) { top: 15%; left: 65%; animation: particle-drift 13s ease-in-out infinite 2s; }
|
||||
.particle:nth-child(8) { top: 80%; left: 45%; animation: particle-drift 8s ease-in-out infinite 6s; width: 3px; height: 3px; }
|
||||
|
||||
/* Connection lines between particles */
|
||||
.particle-lines {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
background-image:
|
||||
radial-gradient(circle at 15% 20%, rgba(139, 92, 246, 0.06) 0%, transparent 40%),
|
||||
radial-gradient(circle at 75% 40%, rgba(139, 92, 246, 0.04) 0%, transparent 35%),
|
||||
radial-gradient(circle at 30% 60%, rgba(139, 92, 246, 0.05) 0%, transparent 38%);
|
||||
}
|
||||
|
||||
/* Hexagram lines */
|
||||
.hex-yang {
|
||||
width: 9rem;
|
||||
height: 6px;
|
||||
border-radius: 9999px;
|
||||
background: linear-gradient(135deg, #8B5CF6, #C084FC);
|
||||
}
|
||||
|
||||
.hex-yin {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
.hex-yin > div {
|
||||
width: 3.5rem;
|
||||
height: 6px;
|
||||
border-radius: 9999px;
|
||||
background: rgba(139, 92, 246, 0.4);
|
||||
}
|
||||
|
||||
/* Feature card hover */
|
||||
.feature-card {
|
||||
transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
|
||||
}
|
||||
.feature-card:hover {
|
||||
transform: translateY(-4px);
|
||||
border-color: rgba(139, 92, 246, 0.25);
|
||||
box-shadow: 0 8px 30px rgba(139, 92, 246, 0.1);
|
||||
}
|
||||
|
||||
/* Smooth scroll */
|
||||
html { scroll-behavior: smooth; }
|
||||
|
||||
/* Reduced motion */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.reveal, .reveal-left, .reveal-right, .reveal-scale { opacity: 1; transform: none; animation: none; }
|
||||
.particle { animation: none; }
|
||||
.glow-bg::before { animation: none; }
|
||||
html { scroll-behavior: auto; }
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
@import "tailwindcss";
|
||||
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"extends": "astro/tsconfigs/strict",
|
||||
"include": [
|
||||
".astro/types.d.ts",
|
||||
"**/*"
|
||||
],
|
||||
"exclude": [
|
||||
"dist"
|
||||
],
|
||||
"compilerOptions": {
|
||||
"jsx": "react-jsx",
|
||||
"jsxImportSource": "react",
|
||||
"resolveJsonModule": true,
|
||||
"esModuleInterop": true
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user