297 lines
16 KiB
HTML
297 lines
16 KiB
HTML
|
<!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>
|