qzl/eryao
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(web): add product website with i18n and privacy policy

Browse Source 
Static HTML product site for MeeYao with violet brand theme.
Supports EN/简中/繁體 via client-side i18n with localStorage persistence.
Includes index.html (landing page) and privacy.html (App Store compliance).
Hosted on meeyao.com, deployed to ~/deploy/web on EC2.
This commit is contained in:
qzl
2026-04-30 13:38:12 +08:00
parent 1893fcdd4f
commit 1519c782c7
7 changed files with 1018 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/assets/icon-1024.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 462 KiB

web/assets/js/i18n.js
+335
View File
File diff suppressed because one or more lines are too long
web/assets/logo.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 142 KiB

web/index.html
+296
View File
@@ -0,0 +1,296 @@
<!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">&nbsp;</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">&copy; 2026 Ann Lee. All Rights Reserved.</p>
</div>
</div>
</footer>
<script src="assets/js/i18n.js"></script>
</body>
</html>
web/privacy.html
+193
View File
@@ -0,0 +1,193 @@
<!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> &nbsp;|&nbsp; <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">&copy; 2026 Ann Lee. All Rights Reserved.</p>
</div>
</div>
</footer>
<script src="assets/js/i18n.js"></script>
</body>
</html>