286 lines
20 KiB
HTML
286 lines
20 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" class="h-full">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Dewemoji</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script>
|
|
tailwind.config = {
|
|
darkMode: 'class',
|
|
}
|
|
</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;600;700&display=swap" rel="stylesheet">
|
|
<style>
|
|
body {
|
|
font-family: 'Inter', sans-serif;
|
|
}
|
|
.sidebar-sticky { position: sticky; top: 95px!important; }
|
|
</style>
|
|
<script>
|
|
// On page load or when changing themes, best to add inline in `head` to avoid FOUC
|
|
if (localStorage.getItem('darkMode') === 'true' || (!('darkMode' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
|
|
document.documentElement.classList.add('dark')
|
|
} else {
|
|
document.documentElement.classList.remove('dark')
|
|
}
|
|
</script>
|
|
</head>
|
|
<body class="flex flex-col h-full bg-gray-50 text-gray-900 dark:bg-gray-900 dark:text-gray-100">
|
|
|
|
<header class="sticky top-0 z-40 md:hidden bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
|
|
<div class="mx-auto py-8 px-4 sm:px-6 lg:px-8 text-center">
|
|
<!-- Mobile Header Layout -->
|
|
<div class="flex items-center justify-between mb-4 lg:hidden">
|
|
<button id="offcanvas-toggle" class="p-2 rounded-full text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none">
|
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
|
|
</svg>
|
|
</button>
|
|
<h1 class="text-4xl font-bold tracking-tight flex-1 text-center">Dewemoji</h1>
|
|
<button class="theme-toggle p-2 rounded-full text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none">
|
|
<svg class="theme-icon-dark block dark:hidden w-6 h-6" fill="currentColor" viewBox="0 0 20 20"><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path></svg>
|
|
<svg class="theme-icon-light hidden dark:block w-6 h-6" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 5.05A1 1 0 003.636 6.464l.707.707a1 1 0 001.414-1.414l-.707-.707zM3 11a1 1 0 100-2H2a1 1 0 100 2h1zM13.536 14.95a1 1 0 011.414 0l.707.707a1 1 0 01-1.414 1.414l-.707-.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="mt-4 max-w-md mx-auto">
|
|
<div class="relative">
|
|
<input
|
|
type="text"
|
|
placeholder="Search for an emoji..."
|
|
class="search-input w-full pl-4 pr-10 py-2 border border-gray-300 rounded-full shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
|
|
>
|
|
<button
|
|
type="button"
|
|
aria-label="Clear search"
|
|
class="search-clear absolute inset-y-0 right-0 px-3 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
|
|
>✕</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- DESKTOP header (new) -->
|
|
<header class="hidden md:block sticky top-0 z-40 bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
|
|
<div class="mx-auto py-4 px-4 sm:px-6 lg:px-8">
|
|
<div class="flex items-center justify-between gap-4">
|
|
<!-- Title -->
|
|
<h1 class="text-2xl font-bold tracking-tight">Dewemoji</h1>
|
|
|
|
<!-- Right: search + dark toggle -->
|
|
<div class="flex items-center gap-3 min-w-[420px]">
|
|
<!-- Search with clear -->
|
|
<div class="relative w-full">
|
|
<input
|
|
type="text"
|
|
placeholder="Search for an emoji…"
|
|
class="search-input w-full pl-4 pr-10 py-2 rounded-lg bg-gray-100 dark:bg-gray-900 border border-transparent focus:border-blue-400 focus:ring-2 focus:ring-blue-200 dark:focus:ring-blue-900 outline-none transition"
|
|
/>
|
|
<button
|
|
id="search-clear"
|
|
type="button"
|
|
aria-label="Clear search"
|
|
class="absolute inset-y-0 right-0 px-3 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
|
|
>
|
|
✕
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Dark mode toggle (reuse your existing button/ids if you have them) -->
|
|
<button class="theme-toggle p-2 rounded-full text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none">
|
|
<svg class="theme-icon-dark block dark:hidden w-6 h-6" fill="currentColor" viewBox="0 0 20 20"><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path></svg>
|
|
<svg class="theme-icon-light hidden dark:block w-6 h-6" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 5.05A1 1 0 003.636 6.464l.707.707a1 1 0 001.414-1.414l-.707-.707zM3 11a1 1 0 100-2H2a1 1 0 100 2h1zM13.536 14.95a1 1 0 011.414 0l.707.707a1 1 0 01-1.414 1.414l-.707-.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="flex-grow flex">
|
|
<!-- Category Sidebar -->
|
|
<aside class="w-64 bg-white dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700 p-4 hidden lg:block">
|
|
<div class="md:sticky md:top-20 sidebar-sticky">
|
|
<h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">Menu</h2>
|
|
<nav id="menu-nav" class="space-y-2 mb-4">
|
|
<a href="/" class="w-full block text-left px-3 py-2 rounded-lg text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors active">
|
|
<span class="flex items-center">
|
|
<span class="mr-2">🏡</span>
|
|
Emoji
|
|
</span>
|
|
</a>
|
|
<a href="/api-docs" class="w-full block text-left px-3 py-2 rounded-lg text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
|
|
<span class="flex items-center">
|
|
<span class="mr-2">🔥</span>
|
|
API Docs
|
|
</span>
|
|
</a>
|
|
</nav>
|
|
<h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">Categories</h2>
|
|
<nav id="category-nav" class="space-y-2">
|
|
<button class="category-btn w-full text-left px-3 py-2 rounded-lg text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors active" data-category="all">
|
|
<span class="flex items-center">
|
|
<span class="mr-2">🌟</span>
|
|
All Emojis
|
|
</span>
|
|
</button>
|
|
<button class="category-btn w-full text-left px-3 py-2 rounded-lg text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors" data-category="Smileys & Emotion">
|
|
<span class="flex items-center">
|
|
<span class="mr-2">😀</span>
|
|
Smileys & Emotion
|
|
</span>
|
|
</button>
|
|
<button class="category-btn w-full text-left px-3 py-2 rounded-lg text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors" data-category="People & Body">
|
|
<span class="flex items-center">
|
|
<span class="mr-2">👋</span>
|
|
People & Body
|
|
</span>
|
|
</button>
|
|
<button class="category-btn w-full text-left px-3 py-2 rounded-lg text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors" data-category="Animals & Nature">
|
|
<span class="flex items-center">
|
|
<span class="mr-2">🐶</span>
|
|
Animals & Nature
|
|
</span>
|
|
</button>
|
|
<button class="category-btn w-full text-left px-3 py-2 rounded-lg text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors" data-category="Food & Drink">
|
|
<span class="flex items-center">
|
|
<span class="mr-2">🍎</span>
|
|
Food & Drink
|
|
</span>
|
|
</button>
|
|
<button class="category-btn w-full text-left px-3 py-2 rounded-lg text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors" data-category="Travel & Places">
|
|
<span class="flex items-center">
|
|
<span class="mr-2">🌍</span>
|
|
Travel & Places
|
|
</span>
|
|
</button>
|
|
<button class="category-btn w-full text-left px-3 py-2 rounded-lg text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors" data-category="Activities">
|
|
<span class="flex items-center">
|
|
<span class="mr-2">⚽</span>
|
|
Activities
|
|
</span>
|
|
</button>
|
|
<button class="category-btn w-full text-left px-3 py-2 rounded-lg text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors" data-category="Objects">
|
|
<span class="flex items-center">
|
|
<span class="mr-2">💡</span>
|
|
Objects
|
|
</span>
|
|
</button>
|
|
<button class="category-btn w-full text-left px-3 py-2 rounded-lg text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors" data-category="Symbols">
|
|
<span class="flex items-center">
|
|
<span class="mr-2">❤️</span>
|
|
Symbols
|
|
</span>
|
|
</button>
|
|
<button class="category-btn w-full text-left px-3 py-2 rounded-lg text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors" data-category="Flags">
|
|
<span class="flex items-center">
|
|
<span class="mr-2">🏳️</span>
|
|
Flags
|
|
</span>
|
|
</button>
|
|
</nav>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- Mobile Offcanvas Overlay -->
|
|
<div id="offcanvas-overlay" class="lg:hidden fixed inset-0 z-50 hidden">
|
|
<div class="absolute inset-0 bg-black bg-opacity-50" id="offcanvas-backdrop"></div>
|
|
<!-- Offcanvas Sidebar -->
|
|
<div id="offcanvas-sidebar" class="absolute left-0 top-0 h-full w-64 bg-white dark:bg-gray-800 transform -translate-x-full transition-transform duration-300 ease-in-out">
|
|
<div class="p-4 border-b border-gray-200 dark:border-gray-700">
|
|
<div class="flex justify-between items-center">
|
|
<h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Menu</h2>
|
|
<button id="offcanvas-close" class="p-2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700">
|
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="p-4 overflow-y-auto h-full pb-20">
|
|
<!-- Menu (same as desktop sidebar) -->
|
|
<nav id="offcanvas-menu" class="space-y-2 mb-6">
|
|
<a href="/" class="w-full block text-left px-3 py-2 rounded-lg text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
|
|
<span class="flex items-center">
|
|
<span class="mr-2">🏡</span>
|
|
Emoji
|
|
</span>
|
|
</a>
|
|
<a href="/api-docs" class="w-full block text-left px-3 py-2 rounded-lg text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
|
|
<span class="flex items-center">
|
|
<span class="mr-2">🔥</span>
|
|
API Docs
|
|
</span>
|
|
</a>
|
|
</nav>
|
|
|
|
<!-- Categories (JS will populate #offcanvas-nav) -->
|
|
<h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-3">Categories</h3>
|
|
<nav id="offcanvas-nav" class="space-y-2">
|
|
<!-- Offcanvas category buttons will be populated by JavaScript -->
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main Content Area -->
|
|
<div class="flex-1 p-4 sm:p-6 lg:p-8">
|
|
<div class="max-w-6xl mx-auto">
|
|
<div class="mb-6">
|
|
<h2 id="current-category-title" class="text-2xl font-bold text-gray-900 dark:text-gray-100">All Emojis</h2>
|
|
<p id="current-category-count" class="text-sm text-gray-500 dark:text-gray-400 mt-1"></p>
|
|
</div>
|
|
|
|
<div id="emoji-grid" class="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 lg:grid-cols-8 xl:grid-cols-10 gap-4">
|
|
<!-- Emojis will be loaded here -->
|
|
</div>
|
|
|
|
<div id="load-more-container" class="text-center mt-8">
|
|
<button id="load-more-btn" class="hidden px-6 py-2 bg-blue-500 text-white font-semibold rounded-full hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition">
|
|
Load More
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<footer class="bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 py-6">
|
|
<p class="text-center text-sm text-gray-500">
|
|
© <span id="current-year">2025</span> Dewe Toolsites - Dewemoji.
|
|
</footer>
|
|
|
|
<div id="emoji-modal" class="fixed inset-0 z-50 hidden items-center justify-center bg-black bg-opacity-50 transition-opacity duration-300">
|
|
<div id="modal-content" class="relative w-full max-w-md p-6 mx-4 bg-white rounded-lg shadow-xl transform transition-all duration-300 scale-95 opacity-0 dark:bg-gray-800">
|
|
<button id="modal-close-btn" class="absolute top-3 right-3 p-2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none">
|
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
|
|
</button>
|
|
|
|
<div class="text-center">
|
|
<div id="modal-emoji" class="text-8xl mb-4"></div>
|
|
<h2 id="modal-name" class="text-2xl font-bold text-gray-900 dark:text-gray-100"></h2>
|
|
<p id="modal-category" class="text-sm text-gray-500 dark:text-gray-400 mt-1"></p>
|
|
</div>
|
|
|
|
<div class="mt-6">
|
|
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Tags</h3>
|
|
<div id="modal-keywords" class="flex flex-wrap gap-2 mt-2"></div>
|
|
</div>
|
|
|
|
<div class="mt-6 flex gap-2">
|
|
<button id="modal-copy-btn" class="w-full px-4 py-2 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-800 flex gap-2 justify-center">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M20.829 12.861c.171-.413.171-.938.171-1.986s0-1.573-.171-1.986a2.25 2.25 0 0 0-1.218-1.218c-.413-.171-.938-.171-1.986-.171H11.1c-1.26 0-1.89 0-2.371.245a2.25 2.25 0 0 0-.984.984C7.5 9.209 7.5 9.839 7.5 11.1v6.525c0 1.048 0 1.573.171 1.986c.229.551.667.99 1.218 1.218c.413.171.938.171 1.986.171s1.573 0 1.986-.171m7.968-7.968a2.25 2.25 0 0 1-1.218 1.218c-.413.171-.938.171-1.986.171s-1.573 0-1.986.171a2.25 2.25 0 0 0-1.218 1.218c-.171.413-.171.938-.171 1.986s0 1.573-.171 1.986a2.25 2.25 0 0 1-1.218 1.218m7.968-7.968a11.68 11.68 0 0 1-7.75 7.9l-.218.068M16.5 7.5v-.9c0-1.26 0-1.89-.245-2.371a2.25 2.25 0 0 0-.983-.984C14.79 3 14.16 3 12.9 3H6.6c-1.26 0-1.89 0-2.371.245a2.25 2.25 0 0 0-.984.984C3 4.709 3 5.339 3 6.6v6.3c0 1.26 0 1.89.245 2.371c.216.424.56.768.984.984c.48.245 1.111.245 2.372.245H7.5"/></svg>
|
|
Copy Emoji
|
|
</button>
|
|
<button id="modal-open-btn" type="button" class="px-4 py-2 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-800">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M9.367 2.25H9.4a.75.75 0 0 1 0 1.5c-1.132 0-1.937 0-2.566.052c-.62.05-1.005.147-1.31.302a3.25 3.25 0 0 0-1.42 1.42c-.155.305-.251.69-.302 1.31c-.051.63-.052 1.434-.052 2.566v5.2c0 1.133 0 1.937.052 2.566c.05.62.147 1.005.302 1.31a3.25 3.25 0 0 0 1.42 1.42c.305.155.69.251 1.31.302c.63.051 1.434.052 2.566.052h5.2c1.133 0 1.937 0 2.566-.052c.62-.05 1.005-.147 1.31-.302a3.25 3.25 0 0 0 1.42-1.42c.155-.305.251-.69.302-1.31c.051-.63.052-1.434.052-2.566v-1.1a.75.75 0 0 1 1.5 0v1.133c0 1.092 0 1.958-.057 2.655c-.058.714-.18 1.317-.46 1.869a4.75 4.75 0 0 1-2.076 2.075c-.552.281-1.155.403-1.869.461c-.697.057-1.563.057-2.655.057H9.367c-1.092 0-1.958 0-2.655-.057c-.714-.058-1.317-.18-1.868-.46a4.75 4.75 0 0 1-2.076-2.076c-.281-.552-.403-1.155-.461-1.869c-.057-.697-.057-1.563-.057-2.655V9.367c0-1.092 0-1.958.057-2.655c.058-.714.18-1.317.46-1.868a4.75 4.75 0 0 1 2.077-2.076c.55-.281 1.154-.403 1.868-.461c.697-.057 1.563-.057 2.655-.057M13.5 3a.75.75 0 0 1 .75-.75H21a.75.75 0 0 1 .75.75v6.75a.75.75 0 0 1-1.5 0V4.81l-6.97 6.97a.75.75 0 1 1-1.06-1.06l6.97-6.97h-4.94A.75.75 0 0 1 13.5 3"/></svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/assets/script.js"></script>
|
|
</body>
|
|
</html>
|