dwindown/dewemoji
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: refine branded ui and mobile navigation

Browse Source
This commit is contained in:
Dwindi Ramadhana
2026-02-04 00:15:56 +07:00
parent b1aefa6b3d
commit ccec406d6d
11 changed files with 2096 additions and 171 deletions
Download Patch File Download Diff File Expand all files Collapse all files

286
references/common-page.html Normal file
View File

@@ -0,0 +1,286 @@
<!doctype html>
<html lang="en" class="dark">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Privacy Policy - Dewemoji</title>
<script src="https://cdn.tailwindcss.com"></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@400;500;600&family=Space+Grotesk:wght@500;700&display=swap" rel="stylesheet">
<script src="https://unpkg.com/lucide@latest"></script>
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
fontFamily: {
sans: ['Inter', 'sans-serif'],
display: ['Space Grotesk', 'sans-serif'],
},
colors: {
dew: {
50: '#f7fee7',
400: '#a3e635',
500: '#84cc16',
900: '#14532d',
950: '#020617',
},
},
animation: {
'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite',
}
}
}
};
</script>
<style>
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.2); }
.glass-panel {
background: rgba(20, 20, 23, 0.6);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
border-right: 1px solid rgba(255, 255, 255, 0.08);
}
.glass-header {
background: rgba(5, 5, 5, 0.85);
backdrop-filter: blur(20px);
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
z-index: 40;
}
.glass-card {
background: linear-gradient(145deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.01) 100%);
border: 1px solid rgba(255, 255, 255, 0.05);
}
.text-gradient {
background: linear-gradient(to right, #a3e635, #22d3ee);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/* Custom Typography for Prose */
.prose-h2 { font-family: 'Space Grotesk', sans-serif; margin-top: 2.5rem; margin-bottom: 1rem; font-size: 1.5rem; color: white; font-weight: 700; }
.prose-h3 { font-family: 'Space Grotesk', sans-serif; margin-top: 2rem; margin-bottom: 0.75rem; font-size: 1.25rem; color: #e5e7eb; font-weight: 600; }
.prose-p { color: #9ca3af; line-height: 1.75; margin-bottom: 1.25rem; }
.prose-ul { list-style-type: disc; padding-left: 1.5rem; color: #9ca3af; margin-bottom: 1.25rem; }
.prose-li { margin-bottom: 0.5rem; }
</style>
</head>
<body class="bg-[#050505] text-white min-h-screen selection:bg-dew-500 selection:text-black overflow-hidden">
<!-- Ambient Background -->
<div class="fixed top-0 left-0 w-full h-full overflow-hidden -z-10 pointer-events-none">
<div class="absolute top-[-10%] right-[15%] w-[600px] h-[600px] bg-dew-900/10 rounded-full blur-[120px] animate-pulse-slow"></div>
<div class="absolute bottom-[-10%] left-[-10%] w-[500px] h-[500px] bg-blue-900/10 rounded-full blur-[120px]"></div>
</div>
<div class="flex h-screen w-full">
<!-- LEFT SIDEBAR: Same as Home -->
<aside class="w-20 lg:w-64 h-full glass-panel flex flex-col justify-between p-4 z-50 shrink-0">
<div>
<div class="flex items-center gap-3 px-2 mb-8 mt-2">
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-dew-400 to-emerald-600 flex items-center justify-center shadow-lg shadow-dew-500/20 shrink-0">
<span class="text-2xl">💧</span>
</div>
<h1 class="font-display font-bold text-xl tracking-tight hidden lg:block">Dewemoji</h1>
</div>
<nav class="space-y-1">
<a href="home.html" class="flex items-center gap-4 px-3 py-3 rounded-xl text-gray-400 hover:text-white hover:bg-white/5 transition-all group">
<i data-lucide="layout-grid" class="w-5 h-5"></i>
<span class="font-medium hidden lg:block">Discover</span>
</a>
<a href="#" class="flex items-center gap-4 px-3 py-3 rounded-xl text-gray-400 hover:text-white hover:bg-white/5 transition-all group">
<i data-lucide="book-open" class="w-5 h-5 group-hover:scale-110 transition-transform"></i>
<span class="font-medium hidden lg:block">API Docs</span>
</a>
<a href="#" class="flex items-center gap-4 px-3 py-3 rounded-xl text-gray-400 hover:text-white hover:bg-white/5 transition-all group">
<i data-lucide="badge-dollar-sign" class="w-5 h-5 group-hover:scale-110 transition-transform"></i>
<span class="font-medium hidden lg:block">Pricing</span>
</a>
</nav>
</div>
<div class="space-y-1">
<!-- Active State for Privacy -->
<a href="#" class="flex items-center gap-4 px-3 py-3 rounded-xl bg-white/10 text-dew-400 border border-white/5 transition-all">
<i data-lucide="shield-check" class="w-5 h-5"></i>
<span class="font-medium hidden lg:block">Privacy</span>
</a>
<a href="#" class="flex items-center gap-4 px-3 py-3 rounded-xl text-gray-400 hover:text-white hover:bg-white/5 transition-all">
<i data-lucide="file-text" class="w-5 h-5"></i>
<span class="font-medium hidden lg:block">Terms</span>
</a>
</div>
</aside>
<!-- MAIN PANEL -->
<main class="flex-1 flex flex-col h-full min-w-0 relative z-10">
<!-- Header: Title & Meta -->
<header class="glass-header px-8 py-6 shrink-0 flex flex-col md:flex-row md:items-center justify-between gap-4">
<div>
<div class="flex items-center gap-2 text-xs text-gray-500 mb-2 font-mono uppercase tracking-widest">
<span>Legal</span>
<i data-lucide="chevron-right" class="w-3 h-3"></i>
<span class="text-dew-400">Privacy Policy</span>
</div>
<h1 class="font-display text-3xl md:text-4xl font-bold text-white">Privacy Policy</h1>
</div>
<div class="flex items-center gap-4">
<div class="text-right hidden md:block">
<div class="text-[10px] uppercase tracking-wider text-gray-500">Last Updated</div>
<div class="text-sm font-medium text-gray-200">February 04, 2026</div>
</div>
<button class="w-10 h-10 rounded-full border border-white/10 flex items-center justify-center hover:bg-white/5 text-gray-400 transition-colors" title="Print / Download PDF">
<i data-lucide="printer" class="w-4 h-4"></i>
</button>
</div>
</header>
<!-- Scrollable Content Area -->
<div class="flex-1 overflow-y-auto p-6 md:p-10 scroll-smooth">
<div class="max-w-6xl mx-auto flex flex-col xl:flex-row gap-12">
<!-- Article Content -->
<article class="flex-1 max-w-3xl">
<!-- Introduction Card -->
<div class="glass-card p-6 md:p-8 rounded-2xl mb-10 relative overflow-hidden">
<div class="relative z-10">
<h3 class="font-display text-xl font-bold text-white mb-3">At a Glance</h3>
<p class="text-gray-400 leading-relaxed text-sm">
We value your privacy. We do not sell your personal data. We only collect essential metrics to improve the <span class="text-dew-400">Dewemoji API</span> performance and ensure security. This document outlines exactly what we track.
</p>
</div>
<div class="absolute top-0 right-0 w-32 h-32 bg-dew-500/10 rounded-full blur-2xl"></div>
</div>
<!-- Prose Content -->
<div class="prose-content">
<section id="introduction">
<h2 class="prose-h2 flex items-center gap-3">
<span class="text-dew-400/50 font-mono text-lg">01.</span> Introduction
</h2>
<p class="prose-p">
This Privacy Policy explains how Dewemoji ("we", "us", or "our") collects, uses, and discloses your information when you use our website and NativePHP application. By accessing or using the Service, you agree to the collection and use of information in accordance with this policy.
</p>
</section>
<section id="collection">
<h2 class="prose-h2 flex items-center gap-3">
<span class="text-dew-400/50 font-mono text-lg">02.</span> Information We Collect
</h2>
<p class="prose-p">
We collect several different types of information for various purposes to provide and improve our Service to you.
</p>
<h3 class="prose-h3">Usage Data</h3>
<p class="prose-p">
We may also collect information on how the Service is accessed and used ("Usage Data"). This Usage Data may include information such as:
</p>
<ul class="prose-ul">
<li class="prose-li">Your computer's Internet Protocol address (e.g. IP address)</li>
<li class="prose-li">Browser type, browser version</li>
<li class="prose-li">The pages of our Service that you visit</li>
<li class="prose-li">The time and date of your visit</li>
<li class="prose-li">Unique device identifiers and other diagnostic data</li>
</ul>
</section>
<section id="cookies">
<h2 class="prose-h2 flex items-center gap-3">
<span class="text-dew-400/50 font-mono text-lg">03.</span> Tracking & Cookies
</h2>
<p class="prose-p">
We use cookies and similar tracking technologies to track the activity on our Service and hold certain information.
</p>
<div class="p-4 rounded-xl border border-yellow-500/20 bg-yellow-500/5 flex gap-4 items-start">
<i data-lucide="info" class="w-5 h-5 text-yellow-500 shrink-0 mt-0.5"></i>
<p class="text-sm text-yellow-200/80 leading-relaxed m-0">
Note for NativePHP Users: The desktop application stores local configuration files on your machine. These are not transmitted to our servers unless you sync your account.
</p>
</div>
</section>
<section id="contact">
<h2 class="prose-h2 flex items-center gap-3">
<span class="text-dew-400/50 font-mono text-lg">04.</span> Contact Us
</h2>
<p class="prose-p">
If you have any questions about this Privacy Policy, please contact us:
</p>
<a href="mailto:privacy@dewemoji.com" class="inline-flex items-center gap-2 text-dew-400 hover:text-white transition-colors border-b border-dew-400/30 pb-0.5">
privacy@dewemoji.com <i data-lucide="arrow-up-right" class="w-3 h-3"></i>
</a>
</section>
</div>
<!-- Footer -->
<div class="mt-20 pt-10 border-t border-white/5 text-center text-xs text-gray-600">
&copy; 2026 Dewemoji Inc. All rights reserved.
</div>
</article>
<!-- Right Sticky Nav (Table of Contents) -->
<aside class="hidden xl:block w-64 shrink-0">
<div class="sticky top-6">
<h5 class="text-xs font-bold text-gray-500 uppercase tracking-widest mb-6 px-4">On this page</h5>
<nav class="flex flex-col relative">
<!-- Active Indicator Line -->
<div class="absolute left-0 top-0 bottom-0 w-px bg-white/5"></div>
<a href="#introduction" class="toc-link group flex items-center gap-3 py-2 pl-4 text-sm text-dew-400 border-l-2 border-dew-400 -ml-[1px] transition-all">
Introduction
</a>
<a href="#collection" class="toc-link group flex items-center gap-3 py-2 pl-4 text-sm text-gray-500 hover:text-gray-300 border-l-2 border-transparent -ml-[1px] transition-all">
Data Collection
</a>
<a href="#cookies" class="toc-link group flex items-center gap-3 py-2 pl-4 text-sm text-gray-500 hover:text-gray-300 border-l-2 border-transparent -ml-[1px] transition-all">
Tracking & Cookies
</a>
<a href="#contact" class="toc-link group flex items-center gap-3 py-2 pl-4 text-sm text-gray-500 hover:text-gray-300 border-l-2 border-transparent -ml-[1px] transition-all">
Contact
</a>
</nav>
<!-- Helper Card -->
<div class="mt-10 p-5 rounded-2xl bg-[#151518] border border-white/5">
<h6 class="text-white font-bold text-sm mb-2">Have questions?</h6>
<p class="text-xs text-gray-500 mb-4">Our legal team is available Mon-Fri.</p>
<button class="w-full py-2 rounded-lg bg-white/5 hover:bg-white/10 text-xs font-medium text-gray-300 transition-colors border border-white/5">
Support Ticket
</button>
</div>
</div>
</aside>
</div>
</div>
</main>
</div>
<script>
lucide.createIcons();
// Simple TOC Active State Logic (Optional Enhancement)
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
document.querySelectorAll('.toc-link').forEach(link => {
link.classList.remove('text-dew-400', 'border-dew-400');
link.classList.add('text-gray-500', 'border-transparent');
if (link.getAttribute('href') === '#' + entry.target.id) {
link.classList.add('text-dew-400', 'border-dew-400');
link.classList.remove('text-gray-500', 'border-transparent');
}
});
}
});
}, { threshold: 0.5 });
document.querySelectorAll('section').forEach(section => {
observer.observe(section);
});
</script>
</body>
</html>