333 lines
20 KiB
HTML
333 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.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> |