Repository navigation
Expand file tree
/
Copy pathindex.html
More file actions
323 lines (284 loc) · 26.1 KB
/
Copy pathindex.html
File metadata and controls
323 lines (284 loc) · 26.1 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
<!DOCTYPE html>
<html lang="en" prefix="og: https://ogp.me/ns#">
<head>
<title>Free Fire Items Database - Find Item IDs, Names & Descriptions</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Comprehensive Free Fire items database. Search by keyword, item ID, or description to find rare items, weapons, characters, and collectibles from Garena's battle royale game.">
<meta name="keywords" content="Free Fire item ID, Free Fire item ID list, Free Fire all item IDs, Free Fire database, Garena Free Fire items, FF item search, Free Fire weapon IDs, Free Fire character IDs, Free Fire pet IDs, Free Fire skin IDs, Free Fire costume IDs, Free Fire bundle IDs, Free Fire evolution gun IDs, Free Fire diamond items, Free Fire rare items, Free Fire legendary items, Free Fire epic items, Free Fire elite pass items, Free Fire event items, Free Fire craftland items, Free Fire collectibles, Free Fire redeem codes items, Free Fire new update items, Free Fire item names and descriptions, Free Fire item description lookup, Free Fire battle royale items, Free Fire gun skins list, Free Fire vehicle skins IDs, Free Fire emote IDs, Free Fire loot crate items, Free Fire incubator items, Free Fire roulette items, Free Fire diamond royale items, Free Fire gold royale items, Free Fire weapon royale items, Free Fire pet royale items, Free Fire guild tokens items, Free Fire season rewards items, Free Fire rank rewards items, Free Fire login rewards items, Free Fire collaboration items, Free Fire chrono character ID, Free Fire dj alok character ID, Free Fire jai character ID, Free Fire k character ID, Free Fire moco character ID, Free Fire hayato character ID, Free Fire shirou character ID, Free Fire wolfrahh character ID, Free Fire primis characters IDs, Free Fire gun skin ID finder, Free Fire item ID checker, Free Fire item ID 2025, Free Fire latest item IDs, Free Fire item ID hack, Free Fire item ID mod, Free Fire hidden item IDs, Free Fire secret item IDs, Free Fire unreleased item IDs, Free Fire beta items IDs, Free Fire test server items, Free Fire advance server items, Free Fire OB update items, Free Fire patch notes items, Free Fire item stats, Free Fire item rarity list, Free Fire item tier list, Free Fire item value list, Free Fire item price list, Free Fire item comparison, Free Fire item wiki, Free Fire item guide, Free Fire item tutorial, Free Fire item help, FF items, FF item ID, FF database, FF item search, FF weapon list, FF character list, FF skin list, FF costume list, FF bundle list, FF pet list, FF emote list, FF vehicle skin list, FF gun skin list, FF evolution gun list, FF legendary items, FF mythic items, FF epic items, FF rare items, FF common items, FF elite pass, FF season rewards, FF rank rewards, FF event rewards, FF guild shop items, FF diamond shop items, FF gold shop items, FF token shop items, FF luck royale items, FF diamond royale, FF gold royale, FF weapon royale, FF pet royale, FF incubator, FF loot crate, FF roulette, FF redeem code items, FF collaboration items, FF new update, FF patch notes, FF item guide, FF item wiki, FF item help, Garena Free Fire MAX items, Free Fire MAX item IDs, Free Fire MAX database, Free Fire MAX skins, Free Fire MAX characters, Free Fire MAX pets, Free Fire MAX emotes, Free Fire MAX bundles, Free Fire MAX costumes, Free Fire MAX weapon skins, Free Fire MAX evolution guns, Free Fire MAX legendary items, Free Fire MAX mythic items, Free Fire MAX rare items, Free Fire MAX elite pass, Free Fire MAX events, Free Fire MAX rewards, Free Fire MAX royale, Free Fire MAX incubator, Free Fire MAX loot crate, Free Fire MAX redeem codes, Free Fire MAX update, Free Fire MAX guide, Free Fire MAX wiki, Free Fire MAX help, Free Fire MAX FAQ, Free Fire item ID spreadsheet, Free Fire item ID Excel, Free Fire item ID PDF, Free Fire item ID download, Free Fire item ID txt, Free Fire item ID list 2025, Free Fire item ID list PDF, Free Fire item ID list Excel, Free Fire item ID list download, Free Fire item ID list txt, Free Fire complete item list, Free Fire all items PDF, Free Fire all items Excel, Free Fire all items download, Free Fire all items txt, Free Fire item archive, Free Fire item history, Free Fire item legacy, Free Fire discontinued items, Free Fire removed items, Free Fire banned items, Free Fire limited items, Free Fire exclusive items, Free Fire anniversary items, Free Fire birthday items, Free Fire festival items, Free Fire holiday items, Free Fire Christmas items, Free Fire Halloween items, Free Fire New Year items, Free Fire Valentine items, Free Fire Lunar New Year items, Free Fire Ramadan items, Free Fire Eid items, Free Fire Diwali items, Free Fire Holi items, Free Fire items by country, Free Fire items by region, Free Fire items by server, Free Fire global items, Free Fire India items, Free Fire Brazil items, Free Fire Indonesia items, Free Fire Thailand items, Free Fire Vietnam items, Free Fire Mexico items, Free Fire Argentina items, Free Fire Russia items, Free Fire Middle East items, Free Fire Bangladesh items, Free Fire Pakistan items, Free Fire Nepal items, Free Fire Sri Lanka items, Free Fire Malaysia items, Free Fire Singapore items, Free Fire Philippines items, Free Fire Taiwan items, Free Fire Japan items, Free Fire Korea items, Free Fire China items, Free Fire USA items, Free Fire Europe items, Free Fire items list 2025, Free Fire items update 2025, Free Fire new items 2025, Free Fire upcoming items 2025, Free Fire leaked items 2025, Free Fire rumored items 2025, Free Fire datamine items 2025, Free Fire item ID generator, Free Fire item ID decoder, Free Fire item ID converter, Free Fire item ID tracker, Free Fire item ID history, Free Fire item ID checker online, Free Fire item ID search engine, Free Fire item ID database online, Free Fire item ID list online, Free Fire item ID website, Free Fire item ID tool, Free Fire item ID app, Free Fire item ID bot, Free Fire item ID discord, Free Fire item ID telegram, Free Fire item ID script, Free Fire item ID API, Free Fire item ID JSON, Free Fire item ID XML, Free Fire item ID CSV, Free Fire item ID database download, Free Fire item ID GitHub, Free Fire item ID open source, Free Fire item ID project, Free Fire item ID tutorial, Free Fire item ID guide PDF, Free Fire item ID ebook, Free Fire item ID course, Free Fire item ID video, Free Fire item ID channel, Free Fire item ID Reddit, Free Fire item ID Quora, Free Fire item ID forum, Free Fire item ID community, Free Fire item ID support, Free Fire item ID help desk, Free Fire item ID contact, Free Fire item ID feedback, Free Fire item ID suggestion, Free Fire item ID bug report, Free Fire item ID feature request, Free Fire item ID roadmap, Free Fire item ID changelog, Free Fire item ID version history, Free Fire item ID release notes, Free Fire item ID documentation, Free Fire item ID developer, Free Fire item ID API key, Free Fire item ID integration, free fire, ff items, free fire item id, garena free fire, battle royale, free fire database, item search, free fire weapons, free fire characters, ff collectibles, item description, ff craftland">
<meta name="author" content="0XME">
<meta name="robots" content="index, follow, max-image-preview:large">
<meta name="revisit-after" content="7 days">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://0xme.github.io/ItemID2/">
<meta property="og:title" content="Free Fire Items Database - Find Item IDs, Names & Descriptions">
<meta property="og:description" content="Search our comprehensive Free Fire items database to find item IDs, names, and descriptions for all in-game items including weapons, characters, and collectibles.">
<meta property="og:image" content="https://cdn-sc-g.sharechat.com/33d5318_1c8/18293db7_1732413753390_sc.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:site_name" content="FF Items Database">
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://0xme.github.io/ItemID2/">
<meta property="twitter:title" content="Free Fire Items Database - Find Item IDs, Names & Descriptions">
<meta property="twitter:description" content="Search our comprehensive Free Fire items database to find item IDs, names, and descriptions for all in-game items.">
<meta property="twitter:image" content="https://cdn-sc-g.sharechat.com/33d5318_1c8/18293db7_1732413753390_sc.png">
<!-- Canonical URL -->
<link rel="canonical" href="https://0xme.github.io/ItemID2/">
<!-- Favicons and App Icons -->
<link rel="apple-touch-icon" sizes="180x180" href="icon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="icon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="icon/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="icon/ff-item-icon.svg" color="#ffffff">
<!-- Theme Color -->
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#FFBA00">
<!-- Preconnect to external domains -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://cdn-sc-g.sharechat.com">
<link rel="preconnect" href="https://cdn.jsdelivr.net">
<link rel="preconnect" href="https://cdnjs.cloudflare.com/ajax/libs">
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
<!-- Stylesheets -->
<link rel="stylesheet" href="src/style.css">
<link rel="stylesheet" href="src/global.css">
<!-- Scripts -->
<script rel="preload" src="https://cdn-sc-g.sharechat.com/33d5318_1c8/35409e5b_1732412421739_sc.null" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/chroma-js@2.1.0/chroma.min.js"></script>
<script src="src/CacheManager.js"></script>
<script rel="preload" src="src/loc.js"></script>
<!-- Google Site Verification -->
<meta name="google-site-verification" content="J20YkdBYbFS0_YZdIu9Z-sKGKzYZfqOFFkQ0numjLq0" />
<!-- Structured Data -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebApplication",
"name": "Free Fire Items Database",
"url": "https://0xme.github.io/ItemID2/",
"description": "Comprehensive searchable database of Free Fire game items with IDs, names, and descriptions.",
"applicationCategory": "GameApplication",
"operatingSystem": "Any",
"permissions": "browser",
"author": {
"@type": "Person",
"name": "0xme"
},
"softwareVersion": "2.0"
}
</script>
</head>
<body>
<h1 class="sr-only">Free Fire Items Database</h1>
<!-- Edge Button -->
<div id="edge_btn" class="bounce-click fixed bottom-3 right-3 w-10 bg-[var(--secondary)] p-1 rounded-[11px] z-50">
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" role="img" aria-label="Edge browser icon">
<path fill="var(--primary)" d="M6 4h14v2h2v6h-8v2h6v2h-4v2h-2v2H2V8h2V6h2zm2 6h2V8H8z" />
</svg>
</div>
<!-- Settings Panel -->
<div id="settings-bg" class="w-[100vw] h-[100vh] z-[99999] fixed bg-[var(--bBackground-color)]" role="dialog" aria-modal="true" aria-labelledby="settings-title">
<div id="extra_set" class="w-[100vw] h-[100vh] bg-[var(--primary)] flex flex-col">
<div class="flex items-center justify-center p-4 bg-[var(--primary)] border-b border-[var(--border-color)] relative">
<!-- Close Button -->
<button class="absolute left-4 top-1/2 transform -translate-y-1/2 flex items-center justify-center w-10 h-10 rounded-full hover:bg-[var(--hover-color)] focus:outline-none" id="settings-close-btn" aria-label="Close Settings">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-label="Close icon">
<path fill="var(--secondary)" d="M5 5h2v2H5zm4 4H7V7h2zm2 2H9V9h2zm2 0h-2v2H9v2H7v2H5v2h2v-2h2v-2h2v-2h2v2h2v2h2v2h2v-2h-2v-2h-2v-2h-2zm2-2v2h-2V9zm2-2v2h-2V7zm0 0V5h2v2z" />
</svg>
</button>
<!-- Title -->
<h2 id="settings-title" class="ibm-plex-mono-regular text-base text-[var(--secondary)]">
Settings
</h2>
</div>
<div class="settings-scrollable-content flex-1 overflow-y-auto">
<!-- Theme Settings -->
<section id="theme" class="mt-10 mx-2 settings-content svelte-11impmh" aria-hidden="false">
<div class="heading-container svelte-ui37rw">
<h3 class="content-title">Theme</h3>
</div>
<div id="setting-toggle-appearance-autoLanguage" class=" toggle-parent" aria-hidden="false">
<button class="toggle-container" role="switch" aria-label="Change Site's Theme" aria-checked="false">
<h4 class="toggle-title">Light Mode</h4>
<div id="toggle" class="toggle">
<div id="toggle-switcher" class="toggle-switcher"></div>
</div>
</button>
<div class="settings-content-description subtext">Toggle between light and dark modes for a better viewing experience!
</div>
</div>
</section>
<!-- System -->
<section id="system" class="mx-2 settings-content svelte-11impmh" aria-hidden="false">
<div class="heading-container svelte-ui37rw">
<h3 class="content-title">System</h3>
</div>
<div id="setting-toggle-appearance-autoLanguage" class=" toggle-parent" aria-hidden="false">
<button aria-label="Redirect To 'How To search' Page" class="toggle-container" onclick="window.location.href='https://0xme.github.io/ItemID2/HowToSearch'">
<h4 class="toggle-title">How To search</h4>
</button>
<div class="settings-content-description subtext">Learn how to use search syntax effectively to find what you need faster.</div>
</div>
</section>
<!-- GitHub Info -->
<section id="GitHub-info" class="mx-2 settings-content svelte-11impmh" aria-hidden="false">
<div class="heading-container svelte-ui37rw">
<h3 class="content-title">Live Update From Repo</h3>
</div>
<div id="commit-list" class="bg-[var(--button-text)] rounded-lg p-4 shadow-sm border border-zinc-300">
<p class="text-[var(--button)] ibm-plex-mono-regular font-medium mb-2">Latest Commits</p>
<ul class="text-[var(--button)] ibm-plex-mono-regular list-disc list-inside text-xs space-y-1">
<li class="ibm-plex-mono-regular text-xs">Loading commits...</li>
</ul>
</div>
</section>
<!-- footer -->
<section class=" mb-32 flex justify-center items-center w-full space-x-4 mt-4">
<svg class="bounce-click w-5" id="gt" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-label="GitHub icon">
<path fill="var(--secondary)" d="M5 2h4v2H5zm0 10H3V6h2zm2 2H5v-2h2zm2 2v-2H7v2H3v-2H1v2h2v2h4v4h2v-4h2v-2zm0 0v2H7v-2zm6-12v2H9V4zm4 2h-2V4h-2V2h4zm0 6V6h2v6zm-2 2v-2h2v2zm-2 2v-2h2v2zm0 2h-2v-2h2zm0 0h2v4h-2z" />
</svg>
</section>
</div>
</div>
<script>
const repoOwner = "0xMe";
const repoName = "ItemID2";
async function fetchRecentCommits() {
const commitsUrl = `https://api.github.com/repos/${repoOwner}/${repoName}/commits`;
try {
const res = await fetch(commitsUrl);
const commits = await res.json();
const topCommits = commits.slice(0, 5).map(commit => {
const msg = commit.commit.message;
const author = commit.commit.author.name;
const date = new Date(commit.commit.author.date).toLocaleString();
const sha = commit.sha.slice(0, 7);
return `<li><code>${sha}</code> — <strong>${author}</strong>: ${msg} <em class="text-zinc-500">(${date})</em></li>`;
}).join("");
document.querySelector("#commit-list ul").innerHTML = topCommits;
} catch (err) {
document.querySelector("#commit-list ul").innerHTML = `<li>Failed to load commits.</li>`;
console.error("Commit fetch error:", err);
}
}
</script>
</div>
<!-- Dialog Popup -->
<div role="dialog" aria-modal="true" class="invisible fixed" id="mainnnnn-bg">
<div id="dialog-main-bg" class="invisible fixed dialog-main-bg flex flex-col text-[var(--secondary)] shadow-md bg-clip-border rounded-[24px] w-96">
<div id="container-dialog" class="container-dialog m-2 text-[var(--secondary)] shadow-lg bg-clip-border rounded-[24px] bg-[var(--bBackground-color)] shadow-blue-gray-500/40 border border-[var(--border-color)]">
<img crossorigin="anonymous" class="p-3 invisible" id="cardimage" alt="No-Preview" />
</div>
<div id="info-dialoh-bg" class="bg-[var(--bBackground-color)] rounded-[24px] m-2 border border-[var(--border-color)]">
<div class="p-6">
<h2 id="dialog-tittle" class="ibm-plex-mono-bold block mb-2 text-base antialiased leading-snug tracking-normal text-blue-gray-900">
</h2>
<p id="dialog-tittle-p" class="ibm-plex-mono-regular block text-sm antialiased leading-relaxed text-inherit">
</p>
<p id="dialog-tittle-pp" class="ibm-plex-mono-regular block text-sm antialiased leading-relaxed text-inherit">
</p>
</div>
<div class="p-6 pt-0">
<button aria-label="Close Popup" id="hide_dialg_btn" class="bounce-click align-middle select-none ibm-plex-mono-bold font-bold text-center uppercase disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none text-xs py-3 px-6 rounded-[var(--border-radius)] bg-[var(--button-bg-color)] text-[black] shadow-md shadow-gray-900/10 hover:shadow-lg hover:shadow-gray-900/20 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none border border-[var(--border-color)]" type="button">
Close
</button>
<button aria-label="Share To Telegram" id="share-btn" data-ripple-light="true" onclick="setTimeout(shareToTelegram, 250);" class="bounce-click align-middle select-none font-sans font-bold text-center uppercase disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none text-xs rounded-[var(--border-radius)] bg-[var(--button-bg-color)] text-[var(--secondary)] shadow-md shadow-gray-900/10 hover:shadow-lg hover:shadow-gray-900/20 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none border border-[var(--border-color)]" type="button">
<svg id="svg-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-label="Telegram icon">
<path fill="#000000" d="M16.114 9.291c.552-.552 1.1-1.84-1.2-.276a395.806 395.806 0 0 1-6.489 4.372 2.7 2.7 0 0 1-2.117.046c-1.38-.414-2.991-.966-2.991-.966s-1.1-.691.783-1.427c0 0 7.961-3.267 10.722-4.418 1.058-.46 4.647-1.932 4.647-1.932s1.657-.645 1.519.92c-.046.644-.414 2.9-.782 5.338-.553 3.451-1.151 7.225-1.151 7.225s-.092 1.058-.874 1.242a3.787 3.787 0 0 1-2.3-.828c-.184-.138-3.451-2.209-4.648-3.221a.872.872 0 0 1 .046-1.473 a169.31 169.31 0 0 0 4.835-4.602Z"></path>
</svg>
</button>
<button aria-label="Search Image in Google Lens" data-ripple-light="true" id="google-lens-btn" class="bounce-click align-middle select-none ibm-plex-mono-bold font-bold text-center uppercase text-xs py-3 px-6 rounded-[var(--border-radius)] bg-[var(--button-bg-color)] text-[black] shadow-md shadow-gray-900/10 hover:shadow-lg hover:shadow-gray-900/20 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none border border-[var(--border-color)]" type="button">
<svg role="img" id="svg-icon" width="20" height="20" viewBox="0 0 24 24">
<path fill="#000000" d="M6 2h12a4 4 0 0 1 4 4v6h-2V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h6v2H6a4 4 0 0 1-4-4V6a4 4 0 0 1 4-4m6 6a4 4 0 0 1 4 4a4 4 0 0 1-4 4a4 4 0 0 1-4-4a4 4 0 0 1 4-4m6 8a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2" />
</svg>
</button>
</div>
</div>
</div>
</div>
<!-- Main Content -->
<div id="container" class="container h-[100vh] flex mt-5 mb-5">
<div id="input_search_bg" class="w-full">
<div class="relative w-full min-w-[200px] h-10">
<input id="search-input" class="ibm-plex-mono-regular pl-3 peer w-full h-full bg-transparent text-[var(--secondary)] outline outline-0 placeholder-shown:border border text-sm pr-10 py-2.5 rounded-[var(--border-radius)]" placeholder="Search By Keyword, ItemID, Description" aria-label="Search items by keyword, item ID, or description" />
<button id="search_btn" onclick="search()" class="absolute right-1 top-1/2 transform -translate-y-1/2 px-2 py-1 rounded-[var(--border-radius)] bg-transparent" aria-label="Perform search">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-label="Search icon">
<path fill="var(--secondary)" d="M6 2h8v2H6zM4 6V4h2v2zm0 8H2V6h2zm2 2H4v-2h2zm8 0v2H6v-2zm2-2h-2v2h2v2h2v2h2v2h2v-2h-2v-2h-2v-2h-2zm0-8h2v8h-2zm0 0V4h-2v2z" />
</svg>
</button>
<button id="clear_btn" style="display:none;" class="absolute right-10 top-1/2 transform -translate-y-1/2 px-2 py-1 rounded-[var(--border-radius)] bg-transparent" aria-label="Clear search and filters">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path fill="var(--secondary)" d="M5 5h2v2H5zm4 4H7V7h2zm2 2H9V9h2zm2 0h-2v2H9v2H7v2H5v2h2v-2h2v-2h2v-2h2v2h2v2h2v2h2v-2h-2v-2h-2v-2h-2zm2-2v2h-2V9zm2-2v2h-2V7zm0 0V5h2v2z" />
</svg>
</button>
</div>
</div>
<!-- Filter Options -->
<div class="mt-3 rounded-[var(--border-radius)] outline outline-[var(--border-color)]">
<div class="flex justify-center gap-3 p-5 flex-wrap">
<!-- Rarity Selection -->
<div class="flex-1 min-w-[200px] text-center flex items-center justify-between">
<p class="ibm-plex-mono-regular text-sm text-[var(--secondary)]">Rare Type</p>
<select id="rareTypeSelect" class="text-sm ibm-plex-mono-regular w-[60%] text-[var(--secondary)] rounded-[var(--border-radius)] transition-transform duration-200 active:scale-105 focus:scale-105 focus:bg-opacity-80 outline outline-0 bg-transparent" aria-label="Filter by rarity type"></select>
</div>
<!-- Item Type Selection -->
<div class="flex-1 min-w-[200px] text-center flex items-center justify-between">
<p class="ibm-plex-mono-regular text-sm text-[var(--secondary)]">Item Type</p>
<select id="itemTypeSelect" class="text-sm ibm-plex-mono-regular w-[60%] text-[var(--secondary)] rounded-[var(--border-radius)] transition-transform duration-200 active:scale-105 focus:scale-105 focus:bg-opacity-80 outline outline-0 bg-transparent" aria-label="Filter by item type"></select>
</div>
<!-- Collection Type Selection -->
<div class="flex-1 min-w-[200px] text-center flex items-center justify-between">
<p class="ibm-plex-mono-regular text-sm text-[var(--secondary)]">Collection Type</p>
<select id="collectionTypeSelect" class="text-sm ibm-plex-mono-regular w-[60%] text-[var(--secondary)] rounded-[var(--border-radius)] transition-transform duration-200 active:scale-105 focus:scale-105 focus:bg-opacity-80 outline outline-0 bg-transparent" aria-label="Filter by collection type"></select>
</div>
</div>
</div>
<!-- Mode Selection -->
<div class="flex gap-1 mt-3 bg-[var(--secondary)] rounded-[7px] border border-[var(--border-color)]">
<button aria-label="Select Trash Mode" value="1" id="trashItem_btn" onclick="handleDisplayChange(this, '')" class="m-0.5 ibm-plex-mono-regular text-sm bounce-click px-2 py-1 rounded-[7px]">TRASH MODE</button>
<button aria-label="Select All Item Mode" value="2" id="AllItem_btn" onclick="handleDisplayChange(this, '')" class="m-0.5 ibm-plex-mono-regular text-sm bounce-click px-2 py-1 rounded-[7px]">ITEMS</button>
</div>
<!-- Gallery and Pagination -->
<div class="page" id="webpGallery"></div>
<div id="pagi73hd" class="invisible mt-5 pb-5 w-[100%]">
<div class="bg-[var(--secondary)] h-[110%] rounded-[7px] p-1 flex overflow-x-scroll gap-2" id="pagination"></div>
</div>
<footer class="text-center text-sm text-neutral-500 leading-relaxed py-6">
<p class="ibm-plex-mono-regular text-[var(--sidebar-highlight)]">
Free Fire resources & assets © Garena
</p>
<p class="text-[var(--toggle-bg-enabled)] mt-2 text-xs ibm-plex-mono-regular">
This project is <span class="bold text-[var(--sidebar-highlight)]">not affiliated</span> with Garena or Free Fire.<br>
All assets are provided for <span class="bold text-[var(--sidebar-highlight)]">educational and non-commercial use</span> only.
</p>
</footer>
</div>
<!-- Additional Structured Data -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "SoftwareSourceCode",
"name": "ff-item-id",
"description": "ItemID Website - An open-source tool to retrieve the item IDs for Free Fire items.",
"license": "https://opensource.org/licenses/MIT",
"keywords": "Open Source, Free Fire, Item ID, Tools, Static Website, Ff Craftland, Craftland",
"author": {
"@type": "Person",
"name": "0xme"
},
"programmingLanguage": ["JavaScript", "CSS", "HTML"],
"codeRepository": "https://github.com/0xme/ItemID",
"url": "https://0xme.github.io/ItemID2/",
"isAccessibleForFree": true
}
</script>
<!-- Scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="src/Util.js"></script>
<script src="src/script.js"></script>
</body>
</html>