336 lines
20 KiB
HTML
336 lines
20 KiB
HTML
<!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> |