feat(web): add product website with i18n and privacy policy
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
@@ -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> | <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>
|
||||
Reference in New Issue
Block a user