194 lines
6.6 KiB
HTML
194 lines
6.6 KiB
HTML
|
<!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>
|