<!DO CTYPE html>
<ht ml lang="ru">
<head>
<met a charset="UTF-8">
<met a name="viewport" content="width=device-width, initial-scale=1.0">
<title>Л Все эмодзи + Технические (Twemoji) — Chrome 50+</title>
<!-- Twemoji для отображения эмодзи на старых ОС/браузерах -->
<sc ript src="https://twemoji.maxcdn.com/v/latest/twemoji.min.js" crossorigin="anonymous"></sc ript>
<st yle>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, sans-serif;
background: #1a1a2e;
color: #e0e0e0;
min-height: 100vh;
-webkit-font-smoothing: antialiased;
}
header {
background: #16213e;
padding: 16px 20px;
position: sticky;
top: 0;
z-index: 100;
box-shadow: 0 2px 16px rgba(0,0,0,0.4);
border-bottom: 1px solid #0f3460;
}
.header-top {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 10px;
}
header h1 {
font-size: 24px;
font-weight: 700;
color: #e94560;
letter-spacing: 0.5px;
}
.search-wrap {
display: flex;
align-items: center;
flex: 1 1 280px;
max-width: 500px;
position: relative;
}
.search-wrap input {
width: 100%;
padding: 12px 16px 12px 42px;
font-size: 16px;
border: 2px solid #0f3460;
border-radius: 30px;
background: #0a0a1a;
color: #e0e0e0;
outline: none;
transition: border-color 0.25s;
}
.search-wrap input:focus {
border-color: #e94560;
}
.search-wrap .search-icon {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
font-size: 18px;
pointer-events: none;
opacity: 0.7;
}
.search-wrap .clear-btn {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
color: #888;
font-size: 20px;
cursor: pointer;
display: none;
padding: 4px 8px;
border-radius: 50%;
line-height: 1;
}
.search-wrap .clear-btn.visible {
display: block;
}
.search-wrap .clear-btn:hover {
color: #e94560;
background: rgba(255,255,255,0.08);
}
.menu-toggle {
background: #0f3460;
border: 1px solid #1a4a7a;
color: #ddd;
font-size: 24px;
width: 44px;
height: 44px;
border-radius: 10px;
cursor: pointer;
display: none;
align-items: center;
justify-content: center;
line-height: 1;
}
.menu-toggle:hover {
background: #1a4a7a;
border-color: #e94560;
}
.stats {
font-size: 13px;
color: #888;
margin-top: 6px;
text-align: center;
}
nav.categories {
background: #16213e;
border-bottom: 1px solid #0f3460;
padding: 8px 16px;
display: flex;
flex-wrap: wrap;
gap: 6px;
justify-content: center;
transition: max-height 0.3s ease, opacity 0.3s;
max-height: 200px;
opacity: 1;
overflow: hidden;
}
nav.categories.collapsed {
max-height: 0;
opacity: 0;
padding-top: 0;
padding-bottom: 0;
margin: 0;
border-bottom: none;
}
nav.categories button {
background: #0a0a1a;
border: 1px solid #0f3460;
color: #bbb;
padding: 7px 14px;
border-radius: 20px;
cursor: pointer;
font-size: 13px;
white-space: nowrap;
transition: all 0.2s;
font-family: inherit;
}
nav.categories button:hover {
background: #0f3460;
color: #fff;
border-color: #e94560;
}
nav.categories button.active {
background: #e94560;
color: #fff;
border-color: #e94560;
font-weight: 600;
}
main {
padding: 20px 16px 40px;
max-width: 1400px;
margin: 0 auto;
}
.category-section {
margin-bottom: 28px;
}
.category-title {
font-size: 18px;
font-weight: 600;
color: #e94560;
margin-bottom: 10px;
padding: 8px 12px;
background: rgba(233,69,96,0.08);
border-radius: 8px;
display: flex;
align-items: center;
gap: 8px;
}
.category-title .count {
font-size: 12px;
font-weight: 400;
color: #888;
margin-left: auto;
}
.emoji-grid {
display: flex;
flex-wrap: wrap;
gap: 6px;
justify-content: flex-start;
}
.emoji-cell {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
font-size: 24px;
cursor: pointer;
border-radius: 10px;
background: #0f3460;
border: 1px solid transparent;
transition: all 0.18s;
user-select: none;
-webkit-user-select: none;
position: relative;
line-height: 1;
}
.emoji-cell img {
width: 24px;
height: 24px;
pointer-events: none;
}
.emoji-cell:hover {
background: #1a4a7a;
border-color: #e94560;
transform: scale(1.15);
z-index: 5;
box-shadow: 0 4px 16px rgba(233,69,96,0.35);
}
.emoji-cell:active {
transform: scale(0.9);
background: #e94560;
border-color: #e94560;
}
.emoji-cell.copied {
animation: pulse 0.4s ease;
background: #2ecc71;
border-color: #2ecc71;
}
@keyframes pulse {
0% { transform: scale(1); }
40% { transform: scale(1.3); }
100% { transform: scale(1); }
}
.toast {
position: fixed;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
background: #2ecc71;
color: #000;
padding: 10px 22px;
border-radius: 25px;
font-weight: 600;
font-size: 14px;
z-index: 999;
pointer-events: none;
opacity: 0;
transition: opacity 0.3s, transform 0.3s;
transform: translateX(-50%) translateY(20px);
box-shadow: 0 6px 20px rgba(46,204,113,0.4);
}
.toast.show {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
.no-results {
text-align: center;
padding: 60px 20px;
color: #888;
font-size: 18px;
}
.no-results span {
display: block;
font-size: 60px;
margin-bottom: 12px;
}
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #1a1a2e; }
::-webkit-scrollbar-thumb { background: #0f3460; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #e94560; }
@media (max-width: 768px) {
.menu-toggle {
display: flex;
}
nav.categories {
flex-direction: column;
align-items: flex-start;
gap: 4px;
position: sticky;
top: 68px;
z-index: 98;
max-height: 300px;
overflow-y: auto;
}
nav.categories.collapsed {
max-height: 0;
opacity: 0;
padding-top: 0;
padding-bottom: 0;
}
.emoji-cell {
width: 38px;
height: 38px;
font-size: 20px;
}
.emoji-cell img {
width: 20px;
height: 20px;
}
header h1 {
font-size: 20px;
}
}
</style>
</head>
<body>
<header>
<div class="header-top">
<h1>Л Все эмодзи + Технические</h1>
<button class="menu-toggle" id="menuToggle" title="Категории">0</button>
</div>
<div class="search-wrap">
<span class="search-icon">
</span>
<input type="text" id="searchInput" placeholder="Поиск эмодзи...">
<button class="clear-btn" id="clearBtn" title="Очистить"></button>
</div>
<div class="stats" id="stats">Всего эмодзи: <strong id="totalCount">0</strong></div>
</header>
<nav class="categories" id="categoryNav">
<button data-cat="all" class="active">Все</button>
<button data-cat="tech">а Технические</button>
<button data-cat="smileys"> Смайлы</button>
<button data-cat="people">K Люди</button>
<button data-cat="animals">5 Животные</button>
<button data-cat="food">G Еда</button>
<button data-cat="travel">
Путешествия</button>
<button data-cat="activities">Ѕ Активности</button>
<button data-cat="objects">Ў Объекты</button>
<button data-cat="symbols"># Символы</button>
<button data-cat="flags">Б Флаги</button>
</nav>
<main id="emojiContainer"></main>
<div class="toast" id="toast"> Скопировано!</div>
<sc ript>
(function() {
// ==================== EMOJI DATA ====================
var emojiData = {
// Новая категория – технические эмодзи для редакторов кода / коммитов
tech: {
title: 'а Технические (код, git, dev)',
emojis: [
'', 'Ђ', ''', 'Ў', 'ж', '', '»', 'Ґ', '(', '±',
'Ё', 'б', '', 'Б', 'В', 'В', 'Э', 'Л', 'Д', 'С',
'ѕ', 'ї', 'А', 'Ґ', '', '', '', 'б', ' ', '§',
'', 'L', 'Ф', '«', '
', '', 'К', 'И', 'Й', 'к',
'м', 'о', ',', '-', 'а', '™', 'т', 'р', 'М', 'Н',
'С', '', '', '', 'й', 'к', 'л', 'м', 'А', '¶',
'<', '=', '', '', '', 'Ў', '—', '', '™', '–',
'', '', 'Ў', '¬', 'и', '', 'ъ', 'щ', 'П', 'е',
'д', 'Ч', 'с', 'й', 'y', '›', 'љ', 'Я', 'а', 'с',
'Ѕ', 'І', 'Љ', '‹', '', '', 'П', 'Р', '', 'О',
'‡', '', 'ч', '°', 'і', 'µ', 'З', 'Г', 'Д', 'м',
'н', 'л', 'к', 'з', 'и', 'й', 'ј', '’', 'Е', 'Д',
'Г', 'В', 'Є', 'Ч', 'њ', 'п', 'в', '—', 'л', 'к',
'', '«', '', 'Ў', 'o', '”', 'п', 'и', 'Ј', '+',
'”', 'б', 'б', 'т', 'У', '™', ')', '›', '(', 'П',
'’', 'а', 'Ь', ''', 'љ', '“', '*', 'щ', 'ъ', 'ы',
'Ѕ', 'ї', 'Б', 'ь', 'Ґ', '’', 'э', 'Ј', 'ф', 'О'
]
},
smileys: {
title: ' Смайлы и эмоции',
emojis: [
'','','','','','','#','','B','
','','p','
',')','','',
'','','r','','',' ','*',' ','','','-','+','','','(','',
'','6','','','D',',','%','','','*','$','4','7','','','"',
'.',''','5','/',' ','s','x','','','Р','',' ','A','.','/','2',
'3','z','&',''','(','0','%','"','-','1','','#',' ','',')','+',
'q','$','!',' ',',','','','Ђ',' ','©','!','y','z','{','}','~',
'',':','8','9',';','<','=','@','?','>','H','I','J','‹','Њ','',
'ќ','–','—','“','ћ','•','џ','c','”','d','б','›','љ','™','њ','',
'¤','
','Ї','ў','Ґ','«','¦','Ё','s','¬','','п','¤','и'
]
},
people: {
title: 'K Люди и жесты',
emojis: [
'K','','ђ','','–','L','','','',' ',' ','','','H','I','F',
'•','G',' ','M','N','
','J','',' ','O','L','P','2',' ','O','
',
'…','3','Є','ѕ','µ','ї','¶','c','@','A','E','D','а','А','Б','·',
'ґ','v','g','Т','f','i','С','h','i
±','h
±','i
°','h
°','q
@','q
B',
'i
і','h
і','i
І','h
І','Ф
@','Ф
B','u','У','t','r','s
@','s
B',
'Х','n
@','n
B','w
@','w
B','‚
@','‚
B','u
@','u
B',
'i
•','h
•','i
>','h
>','i
s','h
s','i
“','h
“','i
¤','h
¤',
'i
л','h
л','i
н','h
н','i
»','h
»','i
ј','h
ј','i
'','h
'',
'i
,','h
,','i
Ё','h
Ё','i
’','h
’','i
','h
','i
Ђ','h
Ђ',
'i
–','h
–','p
@','p
B','5
@','5
B','x','4','ё
@','ё
B',
'№
@','№
B','6','…','Щ
@','Щ
B','Э
@','Э
B','Ы
@','Ы
B',
'Я
@','Я
B','Ю
@','Ю
B','Ь
@','Ь
B','Ъ
@','Ъ
B','|','0',
'1','i
|','h
|','G
@','G
B','Ѓ
@','Ѓ
B','E
@','E
B',
'F
@','F
B','K
@','K
B','П
@','П
B','&
@','&
B',
'7
@','7
B','N
@','N
B','M
@','M
B','‡
@','‡
B',
'†
@','†
B','Ц
@','Ц
B','ѓ','z','t','o
@','o
B',
'С
С','i
d
‹
h','i
d
‹
i','h
d
‹
h','i
d
h',
'i
d
i','h
d
h','h
i
f','h
i
g','h
i
g
f','h
i
f
f',
'h
i
g
g','i
i
f','i
i
g','h
h
f','h
h
g','i
f','i
g',
'h
f','h
g','г','d','e','В'
]
},
animals: {
title: '5 Животные и природа',
emojis: [
'5','','Ќ','§','6','','®','
є',')',':','Љ','ќ','1','',
'
','Ѓ','/','','','4','','„','“','Њ','¬','.','','',
'','7','','','=','','','','*','+','™','’','','Ј','Џ',
'›','-','','','9','0','','?','«','”','‡',';',';
D','(',
'<','Ґ','¦','Ё','','Ў','>','ѓ','','','#','$','%','&',''',
'J','…','†','ў','‰','¤','¶','©','љ','њ','8','
','"','Ћ','
',
'2',' ','•','–','3','',',','',' ',' ','!','€','','','ё',
'','‹','',' ',' ','І',' ','—','і','w','x','‚','џ','°',
'±',' ','ђ','8','®','х','9','@',':',';','<','7','1','ґ','2',
'3','4','5','>','?','','@','A','B','C','є','№','D','Ё','0',
'','
','','','','','','','','','','','','',' ',
'',' ',' ','P',' ',' ','','Е','И','$','%','&',''','(',
')','*','+',',','','','','','','Ў','D','','Д','§',
'%','
','„'
]
},
food: {
title: 'G Еда и напитки',
emojis: [
'G','H','I','J','K','L','M','m','N','O','P','Q','R','S','Р',
']','E','Т','e','Q','F','T','U','=','6','С','R','l','f','Д',
'Е','D','\','Ш','0','^','P','V','У','h','o','^','З','А','V',
'W','i','S','T','_','U','-','j','.','/','Ф','Y','Ж','Z','s',
'X','r','Х','c','W','','И','В','k',']','\','c','d','Y','Z',
'[','q','b','a','g','h','f','g','Б','p','‚','n','m','l','k',
'i','j','\','o','[','|','Ц','','u','Г','d','Л','v','z','{',
'B','w','C','x','y','Й','~','К','D','t','}','b','В'
]
},
travel: {
title: '
Путешествия и места',
emojis: [
'—','•','™','Њ','Ћ','О','“','‘','’','ђ','ы','љ','›','њ',
'Н','х','І','ф','щ','ь','Џ','г','д','э','Ё','Ґ','¦','С',
'§','“','х','ц','¤','у','ф','е','ў','','й','л','м',
'‚','є','Ѓ','џ',' ','Ў','р','Ђ','ш','а','б','Ш','Ъ','Ч',
'в','н','г','д','е','ж','и','й','к','л','м','п','р','’','ь',
'э','к','L','M','й','K','т','ъ','','','Щ','','','',
'',' ','ю','Ф','р','','ы','Х','Ц','Ь','Э','Ю','Ў',
'ў',' ','Я','Ы','я','Х','L','M','й','Ц','Х','Э','‚','ѓ',
'„','…','†','‡','€','‰','Љ','ќ','ћ','‹','Ћ','ђ','‘','’','“',
'”','ъ','–','','Ќ','Ю'
]
},
activities: {
title: 'Ѕ Активности и спорт',
emojis: [
'Ѕ','А','И','ѕ','N','ѕ','Р','Й','O','±','Ђ','У','ш','Т','С',
'M','П','ѓ','E','у','Ѓ','щ','Ј','?','J','K','Ѕ','ч','ш',
'L','ї','ч','В','‚','Л
@','Л
B','<
@','<
B','8
@',
'8
B','щ
@','щ
B',':','>
@','>
B','М
@','М
B',
'З','Ш
@','Ш
B','Д
@','Д
B','К
@','К
B','=
@',
'=
B','Ј
@','Ј
B','Ч
@','Ч
B','µ
@','µ
B','ґ
@',
'ґ
B','Є','','Ё','¬','¤','§','ј','№','A','·','є','ё','•',
'»','І','_','Ї','і','®','°','й','y'
]
},
objects: {
title: 'Ў Объекты',
emojis: [
'','с','»','(','Ґ','Ё','±','І','y','Ь','Ѕ','ѕ','ї','А',
'ь','ч','ш','щ','Ґ','э','ћ','Ю','','Я','а','ъ','ы','™',
'љ','›','н','с','т','р','p','','б','','','Ў','&','o',
'”','п','в','ё','µ','ґ','¶','·','™','°','і','Ћ','–','њ',
'р','›',''','(','’','а','П','љ',')','™','¤','с','У','т',
'+','Ј','и','“','*','б','”','б','¬','°','¦','±','ъ','.',
'я','я','¬','€','—','-',',','s','y','z','Љ','‰','x','м',
' ','л','к','!','щ',' ','ъ','ы','Ѕ','°','ї','Б','А','ь',
'Ґ','’','э','Ј','ф','О','','Э','Є','‘','П','Л','ћ','џ',
'Н','\',']','[','’','_','^','~','','`','a','b','Q','R',
'©','“','в','–','С','„','Ќ','ј','t','г','д','е','є','X',
'Y','W','Z','V','ж','q','r','s','я','v','}','|','Ї','|',
'Ц','Ъ','У','Т','Ф','Х','Ч','Ш','Щ','Э','','Љ','‹','',
'М','Н','О','‡','П','Р','','С','','','','','
','','Ќ','„'
]
},
symbols: {
title: '# Символы',
emojis: [
'd','б','›','љ','™','њ','¤','
','','”','c','•','ћ','“','—',
'–','','ќ','џ','.',' ','*','I','8','!','/','N','/','&',
'Р','О','H','I','J','K','L','M','N','O','P','Q','R','S','”','›',
'Q','"','#','ф','у','6','','8',':','7','4','љ','®','P',
'™','—','4','5','9','2','p','q','Ћ','‘','~','','L','U',
'С','Ф','Ы','«','Ї','ў','h','·','Ї','і','±',' ','х','','W',
'U','S','T','<','I','','','=',' ','ё','1','њ','0','{','',
'/','№','G','3','N','',' ','В','','¤','з','ѕ','','',
'Ч','3','','В','Г','Д','Е','°','®','¦','ц','','#','9',
'$','!',' ','"','#г','*г','0г','1г','2г','3г','4г','5г','6г',
'7г','8г','9г',' ','’','“','•','–','—','™','љ','4','а','б',
'в','5','г','д','«','Є','е','з','и','й','ж','к','л','',' ',
'6','7','8','9',':',';','','3','2','Б','©','Њ','ф','у',
'у
','у
§','ф
','P','Q','R','S','T','U','V','W',
'X','Y','Z','[','\',']','^','_','`','a','b','c','d','e',
'f','g','¶','ш','п','щ','ъ','П','н','о','й','к','л',
'м','А','<','=','Ў','','','','—','','™','–','•',
'”','©','Є','4','5','','','','','','µ','¶','•','–',
'—','','~','І','±','™','©','®','0','°','ї','','','',
' ',' ','','','я','¬','з'
]
},
flags: {
title: 'Б Флаги',
emojis: [
'Б','©','Њ','ф','у','у
','у
§','ф
',
'ъу','жи','жй','жк','жл','жм','жо','жс','жт','жф','жц',
'жч','жш','жщ','жъ','жь','жэ','жя','зж','зз','зй','зк',
'зл','зм','зн','зо','зп','зс','зт','зу','зф','зц','зч',
'зш','зщ','зь','зю','зя','иж','ии','ий','ил','им','ин',
'ио','ир','ис','ит','иу','иф','ич','иъ','иы','иь','иэ',
'ию','ия','йк','йп','йр','йт','йф','йя','кж','ки','кк',
'км','кн','кч','кш','кщ','къ','ло','лп','лр','лт','лф',
'лч','мж','мз','мй','мк','мл','мм','мн','мо','мс','мт',
'му','мх','мц','мч','мш','мщ','мъ','мь','мю','нр','нт',
'ну','нч','нщ','нъ','ои','ой','ок','ос','от','оу','оф',
'оц','оч','ош','ощ','пк','пт','пф','пх','рк','рм','рн',
'ро','рт','ру','рх','рч','рь','рю','ря','сж','сз','си',
'со','ср','сч','сш','сщ','съ','сы','сю','тж','ти','тй',
'тк','тм','тн','тр','тс','тт','ту','тф','тх','тц','тч',
'тш','тщ','тъ','ты','ть','тэ','тю','тя','уж','уи','ук',
'ул','ум','уо','ус','уф','ух','уч','уъ','уя','фт','хж',
'хк','хл','хм','хн','хр','хс','хт','ху','хч','хш','хщ',
'хь','хю','цж','чк','чф','чш','чъ','чь','шж','шз','ши',
'шй','шк','шм','шн','шо','шп','шр','шс','шт','шу','шф',
'шч','шш','шщ','шы','шэ','шю','шя','щж','щи','щй','щл',
'щм','щн','щп','щр','щс','щт','щу','щф','щч','щщ','щы',
'щь','щя','ъж','ъм','ът','ъю','ъя','ыж','ыи','ык','ым',
'ыо','ыу','ыъ','ьл','ьш','эр','юк','ющ','яж','ят','яь'
]
}
};
var allCategories = Object.keys(emojiData);
var totalEmojiCount = 0;
allCategories.forEach(function(cat) {
totalEmojiCount += emojiData[cat].emojis.length;
});
var container = document.getElementById('emojiContainer');
var searchInput = document.getElementById('searchInput');
var clearBtn = document.getElementById('clearBtn');
var totalCountEl = document.getElementById('totalCount');
var statsEl = document.getElementById('stats');
var toast = document.getElementById('toast');
var categoryNav = document.getElementById('categoryNav');
var categoryButtons = categoryNav.querySelectorAll('button');
var menuToggle = document.getElementById('menuToggle');
totalCountEl.textContent = totalEmojiCount;
var currentFilter = 'all';
var searchQuery = '';
var toastTimer = null;
function showToast(message) {
if (toastTimer) clearTimeout(toastTimer);
toast.textContent = message;
toast.classList.add('show');
toastTimer = setTimeout(function() {
toast.classList.remove('show');
}, 1500);
}
function copyEmoji(emoji, cell) {
var textarea = document.createElement('textarea');
textarea.value = emoji;
textarea.style.position = 'fixed';
textarea.style.top = '-9999px';
textarea.style.left = '-9999px';
textarea.style.opacity = '0';
textarea.style.pointerEvents = 'none';
document.body.appendChild(textarea);
textarea.select();
textarea.setSelectionRange(0, textarea.value.length);
var success = false;
try {
success = document.execCommand('copy');
} catch (e) { success = false; }
document.body.removeChild(textarea);
if (success) {
if (cell) {
cell.classList.add('copied');
setTimeout(function() { cell.classList.remove('copied'); }, 400);
}
showToast(' Скопировано: ' + emoji);
} else {
showToast(' Не удалось скопировать');
}
}
// Twemoji обработка ячейки
function applyTwemoji(cell) {
// twemoji.parse заменяет текстовые эмодзи на img в элементе
if (window.twemoji && cell.textContent) {
twemoji.parse(cell, {
folder: 'svg',
ext: '.svg',
base: 'https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/'
});
}
}
function createEmojiCell(emoji) {
var cell = document.createElement('div');
cell.className = 'emoji-cell';
cell.textContent = emoji;
cell.title = emoji;
cell.addEventListener('click', function() {
copyEmoji(emoji, cell);
});
// Применяем Twemoji после вставки текста
applyTwemoji(cell);
return cell;
}
function renderAll() {
container.innerHTML = '';
var visibleCount = 0;
var anyVisible = false;
allCategories.forEach(function(catKey) {
if (currentFilter !== 'all' && currentFilter !== catKey) return;
var catData = emojiData[catKey];
var filteredEmojis = catData.emojis;
if (searchQuery) {
filteredEmojis = catData.emojis.filter(function(emoji) {
return emoji.indexOf(searchQuery) > -1 ||
catData.title.toLowerCase().indexOf(searchQuery.toLowerCase()) > -1;
});
}
if (filteredEmojis.length === 0) return;
anyVisible = true;
var section = document.createElement('div');
section.className = 'category-section';
section.setAttribute('data-category', catKey);
var titleDiv = document.createElement('div');
titleDiv.className = 'category-title';
titleDiv.innerHTML = catData.title + ' <span class="count">(' + filteredEmojis.length + ')</span>';
section.appendChild(titleDiv);
var grid = document.createElement('div');
grid.className = 'emoji-grid';
filteredEmojis.forEach(function(emoji) {
grid.appendChild(createEmojiCell(emoji));
visibleCount++;
});
section.appendChild(grid);
container.appendChild(section);
});
if (!anyVisible) {
var noResults = document.createElement('div');
noResults.className = 'no-results';
noResults.innerHTML = '<span>
</span>Ничего не найдено
Попробуйте другой запрос';
container.appendChild(noResults);
}
statsEl.innerHTML = searchQuery ?
'Найдено: <strong>' + visibleCount + '</strong> из ' + totalEmojiCount :
'Всего эмодзи: <strong>' + totalEmojiCount + '</strong>';
}
// Поиск
searchInput.addEventListener('input', function() {
searchQuery = searchInput.value.trim();
clearBtn.classList.toggle('visible', searchQuery.length > 0);
renderAll();
});
clearBtn.addEventListener('click', function() {
searchInput.value = '';
searchQuery = '';
clearBtn.classList.remove('visible');
renderAll();
searchInput.focus();
});
// Навигация по категориям
categoryButtons.forEach(function(btn) {
btn.addEventListener('click', function() {
var cat = btn.getAttribute('data-cat');
currentFilter = cat;
categoryButtons.forEach(function(b) { b.classList.remove('active'); });
btn.classList.add('active');
renderAll();
container.scrollIntoView({ beh * avior: 'smooth', block: 'start' });
});
});
// Меню-бутерброд (мобильные)
menuToggle.addEventListener('click', function() {
categoryNav.classList.toggle('collapsed');
menuToggle.textContent = categoryNav.classList.contains('collapsed') ? '0' : '';
});
// Закрывать меню при выборе категории на мобильных
categoryNav.addEventListener('click', function(e) {
if (e.target.tagName === 'BUTTON' && window.innerWidth <= 768) {
categoryNav.classList.add('collapsed');
menuToggle.textContent = '0';
}
});
// Горячие клавиши
document.addEventListener('keydown', function(e) {
if ((e.ctrlKey && e.key === 'f') || (e.key === '/' && document.activeElement !== searchInput)) {
e.preventDefault();
searchInput.focus();
searchInput.select();
}
if (e.key === 'Escape' && document.activeElement === searchInput) {
searchInput.value = '';
searchQuery = '';
clearBtn.classList.remove('visible');
renderAll();
searchInput.blur();
}
});
// Инициализация
renderAll();
// При изменении размера окна сбрасываем меню
window.addEventListener('resize', function() {
if (window.innerWidth > 768) {
categoryNav.classList.remove('collapsed');
menuToggle.textContent = '0';
}
});
})();
</sc ript>
</body>
</html> и весь без квадротов на олд скульных машинах
