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>

336
references/homepage-refined.html Normal file
View File

@@ -0,0 +1,336 @@
<!doctype html>
<html lang="en" class="dark">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dewemoji - Discover</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: {
'float': 'float 6s ease-in-out infinite',
'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite',
},
keyframes: {
float: {
'0%, 100%': { transform: 'translateY(0)' },
'50%': { transform: 'translateY(-10px)' },
}
}
}
}
};
</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);
}
/* Sticky header with blur */
.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);
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.glass-card:hover {
background: linear-gradient(145deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.02) 100%);
border-color: rgba(163, 230, 53, 0.3);
transform: translateY(-2px);
box-shadow: 0 10px 40px -10px rgba(132, 204, 22, 0.15);
}
.text-gradient {
background: linear-gradient(to right, #a3e635, #22d3ee);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
</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: Navigation -->
<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="#" class="flex items-center gap-4 px-3 py-3 rounded-xl bg-white/10 text-dew-400 border border-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">
<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="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>
<!-- CENTER PANEL: Search & Feed -->
<main class="flex-1 flex flex-col h-full min-w-0 relative z-10">
<!-- STICKY HEADER: Control Deck -->
<!-- We put search at top so it's always accessible -->
<header class="glass-header px-6 py-5 shrink-0">
<div class="max-w-7xl mx-auto w-full flex flex-col md:flex-row gap-4 md:items-center justify-between">
<!-- Search Input -->
<div class="relative group grow max-w-2xl">
<div class="absolute -inset-0.5 bg-gradient-to-r from-dew-500 to-cyan-500 rounded-xl blur opacity-20 group-hover:opacity-40 transition duration-500"></div>
<div class="relative flex items-center bg-[#151518] border border-white/10 rounded-xl shadow-2xl h-11">
<div class="pl-4 pr-3 text-gray-400">
<i data-lucide="search" class="w-5 h-5"></i>
</div>
<input id="q" type="text" placeholder="Search 3,600+ emojis..." class="w-full bg-transparent text-white placeholder-gray-500 focus:outline-none font-medium h-full">
<div class="hidden md:flex items-center pr-3">
<kbd class="hidden sm:inline-block px-2 py-0.5 text-[10px] font-mono text-gray-500 bg-white/5 border border-white/10 rounded-md">⌘K</kbd>
</div>
</div>
</div>
<!-- Filters & Profile -->
<div class="flex items-center gap-3 shrink-0">
<select id="category" class="bg-[#151518] border border-white/10 rounded-xl px-4 text-sm text-gray-300 focus:outline-none focus:border-dew-400 hover:bg-white/5 transition-colors h-11 cursor-pointer appearance-none">
<option value="">All Categories</option>
</select>
<div class="w-px h-8 bg-white/10 mx-1"></div>
<div class="w-10 h-10 rounded-full bg-gradient-to-r from-gray-700 to-gray-600 border border-white/10"></div>
</div>
</div>
</header>
<!-- SCROLLABLE AREA -->
<div class="flex-1 overflow-y-auto p-6 scroll-smooth" id="scroll-container">
<div class="max-w-7xl mx-auto">
<!-- 1. HERO BENTO ROW (The "Styled Cards" are back!) -->
<!-- This sits atop the grid. It looks great initially, but scrolls away when you dive deep. -->
<div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-4 mb-8">
<!-- Main Feature Card -->
<div class="md:col-span-2 glass-card rounded-2xl p-6 relative overflow-hidden group min-h-[180px] flex flex-col justify-end">
<div class="absolute top-0 right-0 p-5 opacity-50 group-hover:opacity-100 transition-opacity">
<i data-lucide="sparkles" class="w-5 h-5 text-dew-400"></i>
</div>
<div class="relative z-10">
<span class="inline-block px-2 py-0.5 rounded bg-dew-500/20 text-dew-400 text-[10px] font-bold mb-2 border border-dew-500/20">NEW ENGINE</span>
<h3 class="font-display text-2xl font-bold mb-1">Semantic Discovery</h3>
<p class="text-gray-400 text-xs max-w-sm">Don't remember the name? Search the vibe. Our API understands "celebration" → 🎉 🥳 🍾.</p>
</div>
<!-- Decor -->
<div class="absolute -top-10 -right-10 w-48 h-48 bg-gradient-to-br from-blue-500/20 to-dew-500/20 rounded-full blur-3xl group-hover:blur-2xl transition-all duration-700"></div>
</div>
<!-- Trending Tags -->
<div class="glass-card rounded-2xl p-5 flex flex-col relative group">
<div class="flex justify-between items-center mb-4">
<h4 class="font-bold text-gray-200 text-sm">Trending Now</h4>
<i data-lucide="trending-up" class="w-4 h-4 text-dew-400"></i>
</div>
<div class="flex flex-wrap gap-2 content-start">
<button data-tag="happy" class="quick-tag px-2 py-1 bg-white/5 hover:bg-dew-500/20 hover:text-dew-400 border border-white/5 rounded text-[11px] transition-colors">#happy</button>
<button data-tag="code" class="quick-tag px-2 py-1 bg-white/5 hover:bg-dew-500/20 hover:text-dew-400 border border-white/5 rounded text-[11px] transition-colors">#code</button>
<button data-tag="ship" class="quick-tag px-2 py-1 bg-white/5 hover:bg-dew-500/20 hover:text-dew-400 border border-white/5 rounded text-[11px] transition-colors">#ship</button>
<button data-tag="fire" class="quick-tag px-2 py-1 bg-white/5 hover:bg-dew-500/20 hover:text-dew-400 border border-white/5 rounded text-[11px] transition-colors">#fire</button>
<button data-tag="wfh" class="quick-tag px-2 py-1 bg-white/5 hover:bg-dew-500/20 hover:text-dew-400 border border-white/5 rounded text-[11px] transition-colors">#wfh</button>
</div>
</div>
<!-- Quick History / Stats -->
<div class="glass-card rounded-2xl p-5 flex flex-col justify-between group">
<div class="flex justify-between items-start">
<div class="w-8 h-8 rounded-lg bg-purple-500/20 flex items-center justify-center text-purple-400">
<i data-lucide="history" class="w-4 h-4"></i>
</div>
<span id="dataset-count" class="text-[10px] text-gray-500 font-mono">3,664 items</span>
</div>
<div>
<h4 class="font-bold text-sm">Recent</h4>
<div class="flex gap-2 mt-2">
<button onclick="copyToClipboard('🚀')" class="w-8 h-8 rounded bg-white/5 hover:bg-white/10 flex items-center justify-center text-lg transition-colors">🚀</button>
<button onclick="copyToClipboard('💀')" class="w-8 h-8 rounded bg-white/5 hover:bg-white/10 flex items-center justify-center text-lg transition-colors">💀</button>
<button onclick="copyToClipboard('✨')" class="w-8 h-8 rounded bg-white/5 hover:bg-white/10 flex items-center justify-center text-lg transition-colors">✨</button>
</div>
</div>
</div>
</div>
<!-- 2. THE SPACIOUS GRID (Results) -->
<div class="flex items-center gap-2 mb-4 px-1">
<h4 class="font-bold text-gray-200">All Emojis</h4>
<div class="h-px bg-white/10 flex-1"></div>
<span class="text-xs text-gray-500" id="result-count">Showing 42</span>
</div>
<div id="grid" class="grid grid-cols-5 sm:grid-cols-6 md:grid-cols-8 lg:grid-cols-10 xl:grid-cols-12 gap-3 pb-20">
<!-- Items injected via JS -->
</div>
<!-- Load More Trigger -->
<div id="more-trigger" class="py-12 flex justify-center hidden">
<div class="animate-spin rounded-full h-6 w-6 border-b-2 border-dew-500"></div>
</div>
</div>
</div>
</main>
</div>
<!-- Toast -->
<div id="toast" class="fixed bottom-8 left-1/2 -translate-x-1/2 translate-y-24 opacity-0 transition-all duration-300 z-50">
<div class="bg-dew-500 text-black px-4 py-2 rounded-full font-bold shadow-[0_0_20px_rgba(132,204,22,0.4)] flex items-center gap-2 text-sm">
<i data-lucide="check" class="w-4 h-4"></i>
<span id="toast-msg">Copied!</span>
</div>
</div>
<script>
(() => {
// --- MOCK DATA ---
const mockEmojis = [
{ emoji: '😀', name: 'grinning face' }, { emoji: '😃', name: 'grinning face with big eyes' },
{ emoji: '😄', name: 'grinning face with smiling eyes' }, { emoji: '😁', name: 'beaming face' },
{ emoji: '😆', name: 'grinning squinting face' }, { emoji: '😅', name: 'grinning sweat' },
{ emoji: '🤣', name: 'rofl' }, { emoji: '😂', name: 'joy' },
{ emoji: '🙂', name: 'slightly smiling face' }, { emoji: '🙃', name: 'upside-down face' },
{ emoji: '🫠', name: 'melting face' }, { emoji: '😉', name: 'winking face' },
{ emoji: '😊', name: 'smiling face with smiling eyes' }, { emoji: '😇', name: 'smiling face with halo' },
{ emoji: '🥰', name: 'smiling face with hearts' }, { emoji: '😍', name: 'heart eyes' },
{ emoji: '🤩', name: 'star-struck' }, { emoji: '😘', name: 'face blowing a kiss' },
{ emoji: '😗', name: 'kissing face' }, { emoji: '☺️', name: 'smiling face' },
{ emoji: '😚', name: 'kissing face with closed eyes' }, { emoji: '😙', name: 'kissing face with smiling eyes' },
{ emoji: '🥲', name: 'smiling face with tear' }, { emoji: '😋', name: 'face savoring food' },
{ emoji: '😛', name: 'face with tongue' }, { emoji: '😜', name: 'winking face with tongue' },
{ emoji: '🤪', name: 'zany face' }, { emoji: '😝', name: 'squinting face with tongue' },
{ emoji: '🤑', name: 'money-mouth face' }, { emoji: '🤗', name: 'hugging face' },
{ emoji: '🤭', name: 'face with hand over mouth' }, { emoji: '🫣', name: 'face peeking eye' },
{ emoji: '🤫', name: 'shushing face' }, { emoji: '🤔', name: 'thinking face' },
{ emoji: '🫡', name: 'saluting face' }, { emoji: '🤐', name: 'zipper-mouth face' },
{ emoji: '🤨', name: 'face with raised eyebrow' }, { emoji: '😐', name: 'neutral face' },
{ emoji: '😑', name: 'expressionless face' }, { emoji: '😶', name: 'face without mouth' },
{ emoji: '🔥', name: 'fire' }, { emoji: '✨', name: 'sparkles' },
{ emoji: '💀', name: 'skull' }, { emoji: '🚀', name: 'rocket' }
];
// --- STATE & ELEMENTS ---
const grid = document.getElementById('grid');
const qEl = document.getElementById('q');
const countEl = document.getElementById('result-count');
const categories = ['Smileys', 'People', 'Animals', 'Food', 'Travel', 'Activities', 'Objects', 'Symbols'];
// --- LOGIC ---
function copyToClipboard(text) {
navigator.clipboard.writeText(text).then(() => {
const toast = document.getElementById('toast');
const msg = document.getElementById('toast-msg');
msg.innerText = `Copied ${text}`;
toast.classList.remove('translate-y-24', 'opacity-0');
setTimeout(() => toast.classList.add('translate-y-24', 'opacity-0'), 1500);
});
}
window.copyToClipboard = copyToClipboard; // Expose to global for HTML onclicks
function loadCategories() {
const el = document.getElementById('category');
categories.forEach(c => {
const opt = document.createElement('option');
opt.value = c;
opt.textContent = c;
el.appendChild(opt);
});
}
async function fetchEmojis(reset = false) {
if (reset) grid.innerHTML = '';
// Generate mock copies to simulate "infinite" content
const incoming = [...mockEmojis, ...mockEmojis];
incoming.forEach((item) => {
const card = document.createElement('div');
card.className = 'aspect-square rounded-xl bg-[#151518] hover:bg-white/10 flex flex-col items-center justify-center gap-1 text-center transition-all hover:scale-105 border border-white/5 hover:border-white/20 cursor-pointer group relative';
card.innerHTML = `
<span class="text-3xl leading-none group-hover:scale-110 transition-transform duration-300 filter drop-shadow-lg">${item.emoji}</span>
`;
card.onclick = () => copyToClipboard(item.emoji);
grid.appendChild(card);
});
countEl.textContent = `Showing ${grid.children.length} items`;
}
let timer = null;
qEl.addEventListener('input', () => {
clearTimeout(timer);
timer = setTimeout(() => fetchEmojis(true), 300);
});
document.querySelectorAll('.quick-tag').forEach(btn => {
btn.addEventListener('click', () => {
qEl.value = btn.dataset.tag;
fetchEmojis(true);
});
});
loadCategories();
fetchEmojis(true);
lucide.createIcons();
})();
</script>
</body>
</html>

333
references/homepage.html Normal file
View File

@@ -0,0 +1,333 @@
<!DOCTYPE html>
<html lang="en" class="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dewemoji - 2026 Revamp</title>
<script src="https://cdn.tailwindcss.com"></script>
<!-- 2026 Typography: Space Grotesk for headings, Inter for UI -->
<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">
<!-- Lucide Icons (NativePHP friendly) -->
<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', // The "Dew" Green
900: '#14532d',
950: '#020617', // Deep background
},
glass: {
100: 'rgba(255, 255, 255, 0.05)',
200: 'rgba(255, 255, 255, 0.1)',
border: 'rgba(255, 255, 255, 0.08)',
}
},
animation: {
'float': 'float 6s ease-in-out infinite',
'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite',
},
keyframes: {
float: {
'0%, 100%': { transform: 'translateY(0)' },
'50%': { transform: 'translateY(-10px)' },
}
}
}
}
}
</script>
<style>
/* Custom Scrollbar for Native App feel */
::-webkit-scrollbar {
width: 6px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: rgba(255,255,255,0.1);
border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
background: rgba(255,255,255,0.2);
}
.glass-panel {
background: rgba(20, 20, 23, 0.6);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}
.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);
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.glass-card:hover {
background: linear-gradient(145deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.02) 100%);
border-color: rgba(163, 230, 53, 0.3); /* Dew color */
transform: translateY(-2px);
box-shadow: 0 10px 40px -10px rgba(132, 204, 22, 0.15);
}
.emoji-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
gap: 1rem;
}
/* Text Gradient */
.text-gradient {
background: linear-gradient(to right, #a3e635, #22d3ee);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
</style>
</head>
<body class="bg-[#050505] text-white h-screen w-screen overflow-hidden selection:bg-dew-500 selection:text-black">
<!-- Ambient Background Glows -->
<div class="fixed top-0 left-0 w-full h-full overflow-hidden -z-10 pointer-events-none">
<div class="absolute top-[-10%] right-[-5%] w-[500px] h-[500px] bg-dew-900/20 rounded-full blur-[120px] animate-pulse-slow"></div>
<div class="absolute bottom-[-10%] left-[-10%] w-[600px] h-[600px] bg-blue-900/10 rounded-full blur-[120px]"></div>
</div>
<!-- App Shell Layout -->
<div class="flex h-full">
<!-- Sidebar Navigation (Glassmorphism) -->
<aside class="w-20 lg:w-64 h-full glass-panel flex flex-col justify-between p-4 z-20 transition-all duration-300">
<div>
<!-- Logo Area -->
<div class="flex items-center gap-3 px-2 mb-10 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">
<span class="text-2xl">💧</span>
</div>
<h1 class="font-display font-bold text-xl tracking-tight hidden lg:block">Dewemoji</h1>
</div>
<!-- Nav Items -->
<nav class="space-y-2">
<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 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="clock" class="w-5 h-5 group-hover:scale-110 transition-transform"></i>
<span class="font-medium hidden lg:block">History</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="heart" class="w-5 h-5 group-hover:scale-110 transition-transform"></i>
<span class="font-medium hidden lg:block">Favorites</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="hash" class="w-5 h-5 group-hover:scale-110 transition-transform"></i>
<span class="font-medium hidden lg:block">Keywords</span>
</a>
</nav>
</div>
<!-- Bottom Actions -->
<div class="space-y-2">
<button class="flex items-center gap-4 px-3 py-3 rounded-xl text-gray-400 hover:text-white hover:bg-white/5 w-full transition-all">
<i data-lucide="settings" class="w-5 h-5"></i>
<span class="font-medium hidden lg:block">Settings</span>
</button>
</div>
</aside>
<!-- Main Content Area -->
<main class="flex-1 h-full overflow-y-auto relative p-6 lg:p-10">
<!-- Header / Search Section -->
<header class="max-w-5xl mx-auto mb-12">
<div class="flex items-center justify-between mb-8">
<div class="flex flex-col">
<h2 class="font-display text-4xl lg:text-5xl font-bold mb-2">
Find by <span class="text-gradient">Keyword</span>
</h2>
<p class="text-gray-400">Search 3,600+ emojis by meaning, vibe, or tag.</p>
</div>
<!-- User Profile / Window Controls Placeholder -->
<div class="flex items-center gap-4">
<button class="p-2 rounded-full hover:bg-white/10 transition-colors relative">
<i data-lucide="bell" class="w-5 h-5 text-gray-300"></i>
<span class="absolute top-2 right-2 w-2 h-2 bg-red-500 rounded-full"></span>
</button>
<div class="w-10 h-10 rounded-full bg-gradient-to-r from-gray-700 to-gray-600 border border-white/10"></div>
</div>
</div>
<!-- 2026 "Agentic" Search Bar -->
<div class="relative group z-10">
<div class="absolute -inset-1 bg-gradient-to-r from-dew-500 to-cyan-500 rounded-2xl blur opacity-20 group-hover:opacity-40 transition duration-500"></div>
<div class="relative flex items-center bg-[#0F0F12] border border-white/10 rounded-2xl p-2 shadow-2xl">
<div class="p-3 text-gray-400">
<i data-lucide="search" class="w-6 h-6"></i>
</div>
<input type="text"
placeholder="Type a keyword (e.g., 'celebrate', 'sad', 'coffee')..."
class="w-full bg-transparent text-lg text-white placeholder-gray-500 focus:outline-none px-2 font-medium h-12">
<div class="hidden md:flex items-center gap-2 pr-3 text-xs text-gray-500 font-mono">
<span class="border border-white/10 px-2 py-1 rounded bg-white/5">⌘ K</span>
</div>
</div>
</div>
</header>
<!-- Bento Grid Content -->
<div class="max-w-5xl mx-auto grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6 auto-rows-[180px]">
<!-- Large Featured Card (Spans 2x2) -->
<!-- Focus on Keyword Search Discovery -->
<div class="md:col-span-2 md:row-span-2 glass-card rounded-3xl p-6 relative overflow-hidden group">
<div class="absolute top-0 right-0 p-6 opacity-50 group-hover:opacity-100 transition-opacity">
<i data-lucide="sparkles" class="w-6 h-6 text-dew-400"></i>
</div>
<div class="relative z-10 h-full flex flex-col justify-end">
<span class="inline-block px-3 py-1 rounded-full bg-dew-500/20 text-dew-400 text-xs font-bold mb-3 w-fit border border-dew-500/20">SMART SEARCH</span>
<h3 class="font-display text-3xl font-bold mb-2">Semantic Keywords</h3>
<p class="text-gray-400 text-sm mb-4 max-w-sm">Don't just search "dog". Search "loyal", "pet", or "puppy". Our engine understands the context of every emoji.</p>
<div class="flex gap-2">
<span class="px-3 py-1 rounded-lg bg-white/10 text-xs border border-white/5">#joy</span>
<span class="px-3 py-1 rounded-lg bg-white/10 text-xs border border-white/5">#success</span>
<span class="px-3 py-1 rounded-lg bg-white/10 text-xs border border-white/5">#travel</span>
</div>
</div>
<!-- Decorative Graphic -->
<div class="absolute -top-10 -right-10 w-64 h-64 bg-gradient-to-br from-blue-500/20 to-dew-500/20 rounded-full blur-3xl group-hover:blur-2xl transition-all duration-700"></div>
<div class="absolute top-10 right-10 flex flex-col gap-2 opacity-50">
<div class="bg-black/40 backdrop-blur px-3 py-2 rounded-lg border border-white/10 text-xs">🔍 "Deadline" → 📅 ⏳ 😫</div>
<div class="bg-black/40 backdrop-blur px-3 py-2 rounded-lg border border-white/10 text-xs translate-x-4">🔍 "Launch" → 🚀 🎉 🍾</div>
</div>
</div>
<!-- Trending Keywords Card -->
<div class="glass-card rounded-3xl p-5 flex flex-col group relative overflow-hidden">
<div class="flex justify-between items-center mb-4 relative z-10">
<h4 class="font-bold text-gray-200">Trending Tags</h4>
<i data-lucide="trending-up" class="w-4 h-4 text-dew-400"></i>
</div>
<div class="flex flex-wrap gap-2 relative z-10">
<span class="px-2 py-1 bg-white/5 hover:bg-dew-500/20 rounded-md text-xs cursor-pointer transition-colors border border-white/5">#coding</span>
<span class="px-2 py-1 bg-white/5 hover:bg-dew-500/20 rounded-md text-xs cursor-pointer transition-colors border border-white/5">#coffee</span>
<span class="px-2 py-1 bg-white/5 hover:bg-dew-500/20 rounded-md text-xs cursor-pointer transition-colors border border-white/5">#weekend</span>
<span class="px-2 py-1 bg-white/5 hover:bg-dew-500/20 rounded-md text-xs cursor-pointer transition-colors border border-white/5">#bug</span>
<span class="px-2 py-1 bg-white/5 hover:bg-dew-500/20 rounded-md text-xs cursor-pointer transition-colors border border-white/5">#sick</span>
<span class="px-2 py-1 bg-white/5 hover:bg-dew-500/20 rounded-md text-xs cursor-pointer transition-colors border border-white/5">#party</span>
</div>
<div class="absolute -right-4 -bottom-4 text-6xl opacity-5 group-hover:opacity-10 transition-opacity">
#
</div>
</div>
<!-- Quick Copy Grid -->
<div class="md:col-span-1 md:row-span-2 glass-card rounded-3xl p-5 flex flex-col">
<div class="flex justify-between items-center mb-4">
<h4 class="font-bold text-gray-200">Recent Copies</h4>
<i data-lucide="history" class="w-4 h-4 text-gray-400"></i>
</div>
<div class="grid grid-cols-3 gap-3 flex-1">
<!-- Loop these in Blade -->
<button onclick="copyEmoji('💀')" class="aspect-square rounded-xl bg-white/5 hover:bg-white/10 flex items-center justify-center text-2xl transition-transform hover:scale-105 active:scale-95 border border-transparent hover:border-white/20">💀</button>
<button onclick="copyEmoji('🔥')" class="aspect-square rounded-xl bg-white/5 hover:bg-white/10 flex items-center justify-center text-2xl transition-transform hover:scale-105 active:scale-95 border border-transparent hover:border-white/20">🔥</button>
<button onclick="copyEmoji('✨')" class="aspect-square rounded-xl bg-white/5 hover:bg-white/10 flex items-center justify-center text-2xl transition-transform hover:scale-105 active:scale-95 border border-transparent hover:border-white/20">✨</button>
<button onclick="copyEmoji('✔️')" class="aspect-square rounded-xl bg-white/5 hover:bg-white/10 flex items-center justify-center text-2xl transition-transform hover:scale-105 active:scale-95 border border-transparent hover:border-white/20">✔️</button>
<button onclick="copyEmoji('🚀')" class="aspect-square rounded-xl bg-white/5 hover:bg-white/10 flex items-center justify-center text-2xl transition-transform hover:scale-105 active:scale-95 border border-transparent hover:border-white/20">🚀</button>
<button onclick="copyEmoji('👀')" class="aspect-square rounded-xl bg-white/5 hover:bg-white/10 flex items-center justify-center text-2xl transition-transform hover:scale-105 active:scale-95 border border-transparent hover:border-white/20">👀</button>
<button onclick="copyEmoji('😭')" class="aspect-square rounded-xl bg-white/5 hover:bg-white/10 flex items-center justify-center text-2xl transition-transform hover:scale-105 active:scale-95 border border-transparent hover:border-white/20">😭</button>
<button onclick="copyEmoji('👍')" class="aspect-square rounded-xl bg-white/5 hover:bg-white/10 flex items-center justify-center text-2xl transition-transform hover:scale-105 active:scale-95 border border-transparent hover:border-white/20">👍</button>
<button class="aspect-square rounded-xl bg-white/5 hover:bg-dew-500/20 flex items-center justify-center text-gray-400 hover:text-dew-400 transition-colors border border-dashed border-white/20">
<i data-lucide="plus" class="w-5 h-5"></i>
</button>
</div>
</div>
<!-- Category: Smileys & People -->
<div class="glass-card rounded-3xl p-5 flex flex-col justify-between group cursor-pointer relative overflow-hidden">
<div class="w-10 h-10 rounded-full bg-yellow-500/20 flex items-center justify-center text-yellow-400 mb-4">
<i data-lucide="smile" class="w-5 h-5"></i>
</div>
<div>
<h4 class="font-bold text-lg z-10">Smileys & People</h4>
<p class="text-xs text-gray-500 z-10">Faces, hands, roles</p>
</div>
<div class="absolute right-2 bottom-2 opacity-10 group-hover:opacity-100 transition-opacity transform group-hover:-translate-x-2 group-hover:-translate-y-2">
<span class="text-5xl">🫠</span>
</div>
</div>
<!-- Category: Objects & Symbols -->
<div class="glass-card rounded-3xl p-5 flex flex-col justify-between group cursor-pointer relative overflow-hidden">
<div class="w-10 h-10 rounded-full bg-blue-500/20 flex items-center justify-center text-blue-400">
<i data-lucide="shapes" class="w-5 h-5"></i>
</div>
<div>
<h4 class="font-bold text-lg">Objects & Symbols</h4>
<p class="text-xs text-gray-500">Tech, tools, signs</p>
</div>
<div class="absolute right-2 bottom-2 opacity-10 group-hover:opacity-100 transition-opacity transform group-hover:-translate-x-2 group-hover:-translate-y-2">
<span class="text-5xl">💡</span>
</div>
</div>
<!-- Footer/Stats -->
<div class="md:col-span-3 lg:col-span-4 mt-8 pt-8 border-t border-white/5 flex justify-between items-center text-sm text-gray-500">
<p>© 2026 Dewemoji for NativePHP.</p>
<div class="flex gap-4">
<span class="flex items-center gap-2"><div class="w-2 h-2 rounded-full bg-green-500"></div> Database: 3,664 Emojis</span>
<span>v3.0.1-beta</span>
</div>
</div>
</div>
</main>
</div>
<!-- Toast Notification (Hidden by default) -->
<div id="toast" class="fixed bottom-10 right-10 translate-y-24 opacity-0 transition-all duration-300 z-50">
<div class="bg-dew-500 text-black px-6 py-3 rounded-xl font-bold shadow-lg shadow-dew-500/20 flex items-center gap-3">
<i data-lucide="check-circle-2" class="w-5 h-5"></i>
<span id="toast-msg">Copied to clipboard!</span>
</div>
</div>
<script>
// Initialize Icons
lucide.createIcons();
// Simple Toast & Copy Logic
function copyEmoji(emoji) {
navigator.clipboard.writeText(emoji).then(() => {
const toast = document.getElementById('toast');
const msg = document.getElementById('toast-msg');
msg.innerText = `Copied ${emoji}`;
toast.classList.remove('translate-y-24', 'opacity-0');
setTimeout(() => {
toast.classList.add('translate-y-24', 'opacity-0');
}, 2000);
});
}
</script>
</body>
</html>

293
references/pricing.html Normal file
View File

@@ -0,0 +1,293 @@
<!doctype html>
<html lang="en" class="dark">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Pricing - 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);
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.glass-card:hover {
border-color: rgba(255, 255, 255, 0.1);
transform: translateY(-4px);
}
.glass-card-highlight {
background: linear-gradient(145deg, rgba(20, 83, 45, 0.2) 0%, rgba(0, 0, 0, 0.4) 100%);
border: 1px solid rgba(163, 230, 53, 0.3);
box-shadow: 0 0 30px rgba(163, 230, 53, 0.1);
}
.text-gradient {
background: linear-gradient(to right, #a3e635, #22d3ee);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
</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: Consistent Navigation -->
<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 bg-white/10 text-dew-400 border border-white/5 transition-all group">
<i data-lucide="badge-dollar-sign" class="w-5 h-5"></i>
<span class="font-medium hidden lg:block">Pricing</span>
</a>
</nav>
</div>
<div class="space-y-1">
<a href="common_page.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">
<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">
<!-- Minimal Header -->
<header class="glass-header px-8 py-6 shrink-0 flex justify-end gap-4">
<div class="flex items-center gap-2 text-sm text-gray-400">
<span>Currency:</span>
<select class="bg-transparent text-white focus:outline-none font-bold">
<option>USD</option>
<option>EUR</option>
<option>IDR</option>
</select>
</div>
<div class="w-px h-5 bg-white/10"></div>
<button class="text-sm font-bold text-dew-400 hover:text-white transition-colors">Restore Purchases</button>
</header>
<!-- Scrollable Content Area -->
<div class="flex-1 overflow-y-auto p-6 md:p-10 scroll-smooth">
<div class="max-w-5xl mx-auto flex flex-col items-center">
<!-- Pricing Hero -->
<div class="text-center mb-16 max-w-2xl">
<h1 class="font-display text-4xl md:text-5xl font-bold mb-4">
Supercharge your <span class="text-gradient">Workflow</span>
</h1>
<p class="text-gray-400 text-lg">
Get unlimited access to the Semantic Engine, API keys, and offline syncing.
</p>
</div>
<!-- Toggle Switch -->
<div class="flex items-center gap-4 mb-12 bg-white/5 p-1.5 rounded-full border border-white/5">
<button class="px-6 py-2 rounded-full bg-white/10 text-white font-medium shadow-sm transition-all">Monthly</button>
<button class="px-6 py-2 rounded-full text-gray-400 hover:text-white transition-all relative">
Yearly
<span class="absolute -top-3 -right-6 text-[10px] bg-dew-500 text-black px-1.5 py-0.5 rounded font-bold">-20%</span>
</button>
</div>
<!-- Pricing Cards Grid -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 w-full mb-20">
<!-- Free Tier -->
<div class="glass-card rounded-3xl p-8 flex flex-col">
<div class="mb-4">
<h3 class="font-display text-xl font-bold">Starter</h3>
<p class="text-sm text-gray-500">For casual emoji users.</p>
</div>
<div class="mb-8">
<span class="text-4xl font-bold">$0</span>
<span class="text-gray-500">/mo</span>
</div>
<ul class="space-y-4 mb-8 flex-1">
<li class="flex items-start gap-3 text-sm text-gray-300">
<i data-lucide="check" class="w-5 h-5 text-gray-500 shrink-0"></i>
Basic Search (Name only)
</li>
<li class="flex items-start gap-3 text-sm text-gray-300">
<i data-lucide="check" class="w-5 h-5 text-gray-500 shrink-0"></i>
Copy to Clipboard
</li>
<li class="flex items-start gap-3 text-sm text-gray-300">
<i data-lucide="check" class="w-5 h-5 text-gray-500 shrink-0"></i>
Standard Categories
</li>
</ul>
<button class="w-full py-3 rounded-xl bg-white/5 hover:bg-white/10 border border-white/10 font-bold transition-all">Current Plan</button>
</div>
<!-- Pro Tier (Highlighted) -->
<div class="glass-card-highlight rounded-3xl p-8 flex flex-col relative transform md:-translate-y-4">
<div class="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-dew-500 text-black text-xs font-bold px-3 py-1 rounded-full shadow-lg shadow-dew-500/40">
MOST POPULAR
</div>
<div class="mb-4">
<h3 class="font-display text-xl font-bold text-dew-400">Developer</h3>
<p class="text-sm text-gray-400">Power users & builders.</p>
</div>
<div class="mb-8">
<span class="text-4xl font-bold">$9</span>
<span class="text-gray-500">/mo</span>
</div>
<ul class="space-y-4 mb-8 flex-1">
<li class="flex items-start gap-3 text-sm text-white font-medium">
<i data-lucide="check" class="w-5 h-5 text-dew-400 shrink-0"></i>
Semantic Search Engine
</li>
<li class="flex items-start gap-3 text-sm text-white font-medium">
<i data-lucide="check" class="w-5 h-5 text-dew-400 shrink-0"></i>
API Access (10k req/mo)
</li>
<li class="flex items-start gap-3 text-sm text-white font-medium">
<i data-lucide="check" class="w-5 h-5 text-dew-400 shrink-0"></i>
Offline Database Sync
</li>
<li class="flex items-start gap-3 text-sm text-white font-medium">
<i data-lucide="check" class="w-5 h-5 text-dew-400 shrink-0"></i>
JSON / CSV Export
</li>
</ul>
<button class="w-full py-3 rounded-xl bg-dew-500 hover:bg-dew-400 text-black font-bold shadow-lg shadow-dew-500/20 transition-all">Upgrade Now</button>
</div>
<!-- Team Tier -->
<div class="glass-card rounded-3xl p-8 flex flex-col">
<div class="mb-4">
<h3 class="font-display text-xl font-bold">Team</h3>
<p class="text-sm text-gray-500">For shared assets.</p>
</div>
<div class="mb-8">
<span class="text-4xl font-bold">$29</span>
<span class="text-gray-500">/mo</span>
</div>
<ul class="space-y-4 mb-8 flex-1">
<li class="flex items-start gap-3 text-sm text-gray-300">
<i data-lucide="check" class="w-5 h-5 text-dew-500 shrink-0"></i>
Everything in Developer
</li>
<li class="flex items-start gap-3 text-sm text-gray-300">
<i data-lucide="check" class="w-5 h-5 text-dew-500 shrink-0"></i>
Shared "Favorites" Collections
</li>
<li class="flex items-start gap-3 text-sm text-gray-300">
<i data-lucide="check" class="w-5 h-5 text-dew-500 shrink-0"></i>
Unlimited API Access
</li>
<li class="flex items-start gap-3 text-sm text-gray-300">
<i data-lucide="check" class="w-5 h-5 text-dew-500 shrink-0"></i>
Priority Support
</li>
</ul>
<button class="w-full py-3 rounded-xl bg-white/5 hover:bg-white/10 border border-white/10 font-bold transition-all">Contact Sales</button>
</div>
</div>
<!-- FAQ Section -->
<div class="w-full max-w-3xl">
<h4 class="font-display text-2xl font-bold mb-8 text-center">Frequently Asked Questions</h4>
<div class="space-y-4">
<!-- Q1 -->
<div class="glass-card p-6 rounded-2xl cursor-pointer hover:bg-white/5 transition-colors">
<h5 class="font-bold mb-2 flex justify-between">
Do I need an API key for the desktop app?
<i data-lucide="chevron-down" class="w-5 h-5 text-gray-500"></i>
</h5>
<p class="text-sm text-gray-400">No, the basic desktop app works out of the box. The API key is only needed if you want to integrate Dewemoji into your own applications or CI/CD pipelines.</p>
</div>
<!-- Q2 -->
<div class="glass-card p-6 rounded-2xl cursor-pointer hover:bg-white/5 transition-colors">
<h5 class="font-bold mb-2 flex justify-between">
Does "Offline Sync" work on NativePHP?
<i data-lucide="chevron-down" class="w-5 h-5 text-gray-500"></i>
</h5>
<p class="text-sm text-gray-400">Yes! The Developer plan downloads the entire semantic database (SQLite format) to your local machine, so search works instantly even without internet.</p>
</div>
</div>
</div>
<!-- Footer -->
<div class="mt-20 py-10 border-t border-white/5 text-center text-xs text-gray-600 w-full">
Prices are in USD. VAT may apply.
</div>
</div>
</div>
</main>
</div>
<script>
lucide.createIcons();
</script>
</body>
</html>

277
references/single-page.html Normal file
View File

@@ -0,0 +1,277 @@
<!DOCTYPE html>
<html lang="en" class="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grinning Face - 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',
},
glass: {
100: 'rgba(255, 255, 255, 0.05)',
}
},
animation: {
'float': 'float 6s ease-in-out infinite',
},
keyframes: {
float: {
'0%, 100%': { transform: 'translateY(0)' },
'50%': { transform: 'translateY(-10px)' },
}
}
}
}
}
</script>
<style>
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }
.glass-panel {
background: rgba(20, 20, 23, 0.6);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
border: 1px solid rgba(255, 255, 255, 0.08);
}
.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);
transition: all 0.2s ease;
}
.glass-card:hover {
border-color: rgba(255, 255, 255, 0.1);
background: linear-gradient(145deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);
}
.text-gradient {
background: linear-gradient(to right, #a3e635, #22d3ee);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
</style>
</head>
<body class="bg-[#050505] text-white h-screen w-screen overflow-hidden selection:bg-dew-500 selection:text-black">
<!-- Ambient Background -->
<div class="fixed top-0 left-0 w-full h-full overflow-hidden -z-10 pointer-events-none">
<div class="absolute top-[-20%] right-[-10%] w-[800px] h-[800px] bg-dew-900/10 rounded-full blur-[150px]"></div>
</div>
<div class="flex h-full">
<!-- Sidebar (Collapsed for Detail View context) -->
<aside class="w-20 lg:w-64 h-full glass-panel flex flex-col justify-between p-4 z-20">
<div>
<div class="flex items-center gap-3 px-2 mb-10 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">
<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-2">
<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="arrow-left" class="w-5 h-5 text-dew-400"></i>
<span class="font-medium hidden lg:block text-dew-400">Back</span>
</a>
</nav>
</div>
</aside>
<!-- Main Content Area -->
<main class="flex-1 h-full overflow-y-auto relative p-6 lg:p-10 flex flex-col">
<!-- Breadcrumbs / Top Nav -->
<div class="flex items-center gap-2 text-sm text-gray-500 mb-8 font-mono">
<span class="hover:text-white cursor-pointer transition-colors">Home</span>
<i data-lucide="chevron-right" class="w-3 h-3"></i>
<span class="hover:text-white cursor-pointer transition-colors">Smileys & Emotion</span>
<i data-lucide="chevron-right" class="w-3 h-3"></i>
<span class="text-dew-400">Grinning Face</span>
</div>
<!-- Two Column Inspector Layout -->
<div class="grid grid-cols-1 lg:grid-cols-12 gap-8 max-w-6xl mx-auto w-full">
<!-- Left Column: Visual Inspector (4 cols) -->
<div class="lg:col-span-5 flex flex-col gap-6">
<!-- Main Emoji Preview -->
<div class="glass-card rounded-[32px] aspect-square flex items-center justify-center relative overflow-hidden group">
<!-- Glow Effect behind emoji -->
<div class="absolute w-64 h-64 bg-yellow-500/20 rounded-full blur-3xl group-hover:bg-yellow-500/30 transition-colors duration-500"></div>
<!-- The Emoji -->
<div class="text-[140px] md:text-[180px] leading-none select-none relative z-10 animate-float drop-shadow-2xl">
😀
</div>
<!-- Zoom/Action overlay -->
<div class="absolute bottom-6 flex gap-3 opacity-0 group-hover:opacity-100 transition-all transform translate-y-2 group-hover:translate-y-0">
<button class="bg-black/50 backdrop-blur text-white p-3 rounded-full hover:bg-white hover:text-black transition-colors border border-white/10" title="Download PNG">
<i data-lucide="download" class="w-5 h-5"></i>
</button>
<button class="bg-black/50 backdrop-blur text-white p-3 rounded-full hover:bg-dew-400 hover:text-black transition-colors border border-white/10" title="Copy Image">
<i data-lucide="copy" class="w-5 h-5"></i>
</button>
</div>
</div>
<!-- Related / Skin Tones (If applicable) -->
<div class="glass-card rounded-2xl p-5">
<h3 class="text-xs font-bold text-gray-500 uppercase tracking-wider mb-4">Related Variations</h3>
<div class="flex gap-2 overflow-x-auto pb-2 scrollbar-hide">
<button class="w-10 h-10 rounded-lg bg-white/5 hover:bg-white/10 flex items-center justify-center text-xl transition-colors">😃</button>
<button class="w-10 h-10 rounded-lg bg-white/5 hover:bg-white/10 flex items-center justify-center text-xl transition-colors">😄</button>
<button class="w-10 h-10 rounded-lg bg-white/5 hover:bg-white/10 flex items-center justify-center text-xl transition-colors">😁</button>
<button class="w-10 h-10 rounded-lg bg-white/5 hover:bg-white/10 flex items-center justify-center text-xl transition-colors">😆</button>
<button class="w-10 h-10 rounded-lg bg-white/5 hover:bg-white/10 flex items-center justify-center text-xl transition-colors">😅</button>
</div>
</div>
</div>
<!-- Right Column: Data Inspector (7 cols) -->
<div class="lg:col-span-7 flex flex-col gap-6">
<!-- Header Info -->
<div>
<div class="flex items-center gap-3 mb-2">
<span class="bg-yellow-500/10 text-yellow-400 border border-yellow-500/20 px-3 py-1 rounded-full text-xs font-bold uppercase">Face-Smiling</span>
<span class="bg-white/5 text-gray-400 border border-white/10 px-3 py-1 rounded-full text-xs font-bold uppercase">v1.0</span>
</div>
<h1 class="font-display text-5xl font-bold mb-4">Grinning Face</h1>
<p class="text-gray-400 text-lg leading-relaxed">A yellow face with simple, open eyes and a broad, open smile, showing upper teeth and tongue on some platforms. Often conveys general pleasure and good cheer.</p>
</div>
<!-- Primary Action -->
<div class="flex gap-4">
<button onclick="copyToClipboard('😀')" class="flex-1 bg-dew-500 hover:bg-dew-400 text-black font-bold h-14 rounded-xl flex items-center justify-center gap-3 text-lg transition-all shadow-[0_0_20px_rgba(132,204,22,0.3)] hover:shadow-[0_0_30px_rgba(132,204,22,0.5)]">
<i data-lucide="copy" class="w-5 h-5"></i>
Copy Emoji
</button>
<button class="w-14 h-14 rounded-xl glass-card flex items-center justify-center text-gray-400 hover:text-red-400 hover:border-red-500/30 transition-colors">
<i data-lucide="heart" class="w-6 h-6"></i>
</button>
</div>
<!-- Code Snippets Bento -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<!-- Shortcode -->
<div onclick="copyToClipboard(':grinning:')" class="glass-card p-4 rounded-xl group cursor-pointer hover:bg-white/5">
<div class="flex justify-between items-start mb-1">
<span class="text-xs font-mono text-gray-500">Shortcode</span>
<i data-lucide="copy" class="w-3 h-3 text-gray-600 group-hover:text-dew-400 transition-colors"></i>
</div>
<div class="font-mono text-dew-400 group-hover:text-dew-300 font-medium truncate">:grinning:</div>
</div>
<!-- Unicode -->
<div onclick="copyToClipboard('U+1F600')" class="glass-card p-4 rounded-xl group cursor-pointer hover:bg-white/5">
<div class="flex justify-between items-start mb-1">
<span class="text-xs font-mono text-gray-500">Unicode</span>
<i data-lucide="copy" class="w-3 h-3 text-gray-600 group-hover:text-dew-400 transition-colors"></i>
</div>
<div class="font-mono text-gray-300 group-hover:text-white font-medium">U+1F600</div>
</div>
<!-- HTML Hex -->
<div onclick="copyToClipboard('&#x1F600;')" class="glass-card p-4 rounded-xl group cursor-pointer hover:bg-white/5">
<div class="flex justify-between items-start mb-1">
<span class="text-xs font-mono text-gray-500">HTML Entity (Hex)</span>
<i data-lucide="copy" class="w-3 h-3 text-gray-600 group-hover:text-dew-400 transition-colors"></i>
</div>
<div class="font-mono text-gray-400 group-hover:text-white font-medium truncate">&amp;#x1F600;</div>
</div>
<!-- CSS Content -->
<div onclick="copyToClipboard('\\1F600')" class="glass-card p-4 rounded-xl group cursor-pointer hover:bg-white/5">
<div class="flex justify-between items-start mb-1">
<span class="text-xs font-mono text-gray-500">CSS Content</span>
<i data-lucide="copy" class="w-3 h-3 text-gray-600 group-hover:text-dew-400 transition-colors"></i>
</div>
<div class="font-mono text-gray-400 group-hover:text-white font-medium"> \1F600</div>
</div>
</div>
<!-- Keywords / Tags Section -->
<div class="mt-2">
<div class="flex items-center gap-2 mb-4">
<i data-lucide="hash" class="w-4 h-4 text-dew-400"></i>
<h3 class="text-sm font-bold text-gray-200 uppercase tracking-wide">Semantic Tags</h3>
</div>
<div class="flex flex-wrap gap-2">
<!-- Tag Component -->
<a href="#" class="px-3 py-1.5 rounded-lg bg-white/5 hover:bg-dew-500/10 border border-white/5 hover:border-dew-500/30 text-sm text-gray-300 hover:text-dew-400 transition-all">happy</a>
<a href="#" class="px-3 py-1.5 rounded-lg bg-white/5 hover:bg-dew-500/10 border border-white/5 hover:border-dew-500/30 text-sm text-gray-300 hover:text-dew-400 transition-all">joy</a>
<a href="#" class="px-3 py-1.5 rounded-lg bg-white/5 hover:bg-dew-500/10 border border-white/5 hover:border-dew-500/30 text-sm text-gray-300 hover:text-dew-400 transition-all">smile</a>
<a href="#" class="px-3 py-1.5 rounded-lg bg-white/5 hover:bg-dew-500/10 border border-white/5 hover:border-dew-500/30 text-sm text-gray-300 hover:text-dew-400 transition-all">grin</a>
<a href="#" class="px-3 py-1.5 rounded-lg bg-white/5 hover:bg-dew-500/10 border border-white/5 hover:border-dew-500/30 text-sm text-gray-300 hover:text-dew-400 transition-all">cheerful</a>
<a href="#" class="px-3 py-1.5 rounded-lg bg-white/5 hover:bg-dew-500/10 border border-white/5 hover:border-dew-500/30 text-sm text-gray-300 hover:text-dew-400 transition-all">laugh</a>
<a href="#" class="px-3 py-1.5 rounded-lg bg-white/5 hover:bg-dew-500/10 border border-white/5 hover:border-dew-500/30 text-sm text-gray-300 hover:text-dew-400 transition-all">positive</a>
</div>
</div>
</div>
</div>
<!-- Footer Small -->
<footer class="mt-auto pt-10 text-center text-gray-600 text-xs">
Dewemoji Native • Press 'C' to copy
</footer>
</main>
</div>
<!-- Toast -->
<div id="toast" class="fixed bottom-10 left-1/2 -translate-x-1/2 translate-y-24 opacity-0 transition-all duration-300 z-50 pointer-events-none">
<div class="bg-dew-500 text-black px-6 py-2 rounded-full font-bold shadow-[0_0_20px_rgba(132,204,22,0.4)] flex items-center gap-2">
<i data-lucide="check" class="w-4 h-4"></i>
<span id="toast-msg">Copied!</span>
</div>
</div>
<script>
lucide.createIcons();
function copyToClipboard(text) {
navigator.clipboard.writeText(text).then(() => {
const toast = document.getElementById('toast');
const msg = document.getElementById('toast-msg');
msg.innerText = `Copied ${text}`;
toast.classList.remove('translate-y-24', 'opacity-0');
// Keyboard shortcut listener concept
// In NativePHP you might use GlobalHotkeys, but here is JS fallback
setTimeout(() => {
toast.classList.add('translate-y-24', 'opacity-0');
}, 1500);
});
}
// Add keyboard shortcut 'c'
document.addEventListener('keydown', (e) => {
if (e.key === 'c' && !e.metaKey && !e.ctrlKey && document.activeElement.tagName !== 'INPUT') {
copyToClipboard('😀');
}
});
</script>
</body>
</html>