277 lines
16 KiB
HTML
277 lines
16 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>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('😀')" 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">&#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> |