210 lines
14 KiB
HTML
210 lines
14 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>Emoji Glossary</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;
|
|
}
|
|
</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="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">Emoji Glossary</h1>
|
|
<button id="dark-mode-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 id="theme-toggle-dark-icon" class="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 id="theme-toggle-light-icon" class="hidden 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>
|
|
|
|
<!-- Desktop Header Layout -->
|
|
<div class="hidden lg:block relative">
|
|
<h1 class="text-4xl font-bold tracking-tight">Emoji Glossary</h1>
|
|
<button id="dark-mode-toggle-desktop" class="absolute top-1/2 right-0 -translate-y-1/2 p-2 rounded-full text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none">
|
|
<svg id="theme-toggle-dark-icon-desktop" class="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 id="theme-toggle-light-icon-desktop" class="hidden 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">
|
|
<input type="text" id="search-input" placeholder="Search for an emoji..." class="w-full px-4 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">
|
|
</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="sticky top-4">
|
|
<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">Categories</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">
|
|
<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 - Emoji Glossary.
|
|
</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">
|
|
<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">
|
|
Copy Emoji
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html>
|