{"id":8332,"date":"2026-02-06T17:29:55","date_gmt":"2026-02-07T00:29:55","guid":{"rendered":"https:\/\/rec0m88.com\/?page_id=8332"},"modified":"2026-02-11T16:08:25","modified_gmt":"2026-02-11T23:08:25","slug":"game-library-organizer","status":"publish","type":"page","link":"https:\/\/rec0m88.com\/cs\/game-library-organizer\/","title":{"rendered":"Organiz\u00e1tor hern\u00ed knihovny"},"content":{"rendered":"<!DOCTYPE html>\n<html lang=\"en\" xmlns:mso=\"urn:schemas-microsoft-com:office:office\" xmlns:msdt=\"uuid:C2F41010-65B3-11d1-A29F-00AA00C14882\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    \n    <!-- SEO Meta Tags -->\n    <title>Free Game Library Organizer &#038; ROM Metadata Scraper | NES, SNES, Genesis, N64 ROMs &#038; More| rec0m88.com<\/title>\n    <meta name=\"description\" content=\"Free browser-based ROM metadata scraper and game library organizer. Automatically identify and organize your NES, SNES, N64, Genesis, PlayStation, Game Boy, and retro game collections with box art, release dates, and descriptions. 100% local processing - nothing uploaded.\">\n    <meta name=\"keywords\" content=\"ROM organizer, ROM metadata scraper, retro game library, NES ROM organizer, SNES ROM manager, N64 game database, Genesis ROM identifier, PlayStation ROM scraper, Game Boy ROM organizer, retro gaming tools, emulation library manager, game collection organizer, ROM box art downloader, retro game metadata, MAME ROM organizer, Sega ROM scraper, Nintendo ROM database, game library manager, ROM identification tool, retro game catalog\">\n    <meta name=\"author\" content=\"rec0m88.com\">\n    <meta name=\"robots\" content=\"index, follow\">\n    <link rel=\"canonical\" href=\"https:\/\/rec0m88.com\/game-library-organizer\">\n    \n    <!-- Open Graph -->\n    <meta property=\"og:type\" content=\"website\">\n    <meta property=\"og:url\" content=\"https:\/\/rec0m88.com\/game-library-organizer\">\n    <meta property=\"og:title\" content=\"Free ROM Metadata Scraper &#038; Game Library Organizer | rec0m88.com\">\n    <meta property=\"og:description\" content=\"Organize your retro game collection with automatic metadata, box art, and descriptions. Supports NES, SNES, N64, Genesis, PlayStation, and 30+ platforms.\">\n    <meta property=\"og:image\" content=\"https:\/\/rec0m88.com\/images\/game-organizer-preview.jpg\">\n    \n    <!-- Twitter Card -->\n    <meta name=\"twitter:card\" content=\"summary_large_image\">\n    <meta name=\"twitter:title\" content=\"Free ROM Metadata Scraper &#038; Game Library Organizer\">\n    <meta name=\"twitter:description\" content=\"Organize your retro game collection with automatic metadata, box art, and descriptions. Supports 30+ platforms.\">\n    \n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jszip\/3.10.1\/jszip.min.js\"><\/script>\n    \n    <!-- Schema.org -->\n    <script type=\"application\/ld+json\">\n    {\n        \"@context\": \"https:\/\/schema.org\",\n        \"@type\": \"WebApplication\",\n        \"name\": \"Game Library Organizer - ROM Metadata Scraper\",\n        \"description\": \"Free browser-based tool to organize retro game ROM collections with automatic metadata scraping.\",\n        \"url\": \"https:\/\/rec0m88.com\/game-library-organizer\",\n        \"applicationCategory\": \"UtilitiesApplication\",\n        \"operatingSystem\": \"Any (Browser-based)\",\n        \"offers\": { \"@type\": \"Offer\", \"price\": \"0\", \"priceCurrency\": \"USD\" },\n        \"author\": { \"@type\": \"Organization\", \"name\": \"rec0m88.com\", \"url\": \"https:\/\/rec0m88.com\" }\n    }\n    <\/script>\n<\/head>\n    <div class=\"cyber-grid\"><\/div>\n    \n    <div class=\"tool-container\">\n    <!-- Header -->\n    <header class=\"tool-header\">\n        <h1>Rec0m88 Organiz\u00e1tor hern\u00ed knihovny &amp; ROM Metadata Scraper<h1>\n        <p class=\"subtitle\">Identifikujte sv\u00e9 ROM, na\u010dt\u011bte obaly krabic, popisy a hodnocen\u00ed z IGDB a RAWG - pak v\u0161e st\u00e1hn\u011bte jako uspo\u0159\u00e1dan\u00e9 soubory p\u0159ipraven\u00e9 pro Rec0m88 a dal\u0161\u00ed frontendy emul\u00e1tor\u016f. 100% m\u00edstn\u00ed a soukrom\u00e9.<\/p>\n        \n        <div class=\"platform-tags\">\n            <span class=\"platform-tag\">NES<\/span>\n            <span class=\"platform-tag\">SNES<\/span>\n            <span class=\"platform-tag\">Nintendo 64<\/span>\n            <span class=\"platform-tag\">Game Boy<\/span>\n            <span class=\"platform-tag\">GBA<\/span>\n            <span class=\"platform-tag\">Nintendo DS<\/span>\n            <span class=\"platform-tag\">Genesis<\/span>\n            <span class=\"platform-tag\">Master System<\/span>\n            <span class=\"platform-tag\">Dreamcast<\/span>\n            <span class=\"platform-tag\">PlayStation<\/span>\n            <span class=\"platform-tag\">PS2<\/span>\n            <span class=\"platform-tag\">PSP<\/span>\n            <span class=\"platform-tag\">TurboGrafx-16<\/span>\n            <span class=\"platform-tag\">Neo Geo<\/span>\n            <span class=\"platform-tag\">Atari<\/span>\n            <span class=\"platform-tag\">Ark\u00e1da<\/span>\n        <\/div>\n    <\/header>\n\n    <!-- API Configuration Section -->\n    <section class=\"tool-section\" id=\"apiSection\">\n        <div class=\"section-header\">\n            <div class=\"section-icon\">\n                <svg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"url(#iconGradient)\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                    <defs>\n                        <lineargradient id=\"iconGradient\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\">\n                            <stop offset=\"0%\" style=\"stop-color:#00f0ff\"\/>\n                            <stop offset=\"100%\" style=\"stop-color:#bf00ff\"\/>\n                        <\/lineargradient>\n                    <\/defs>\n                    <path d=\"M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4\"\/>\n                <\/svg>\n            <\/div>\n            <div>\n                <div class=\"section-title\">P\u0159ipojen\u00ed hern\u00edch datab\u00e1z\u00ed<\/div>\n                <div class=\"section-subtitle\">Vyberte jedno nebo ob\u011b rozhran\u00ed API, abyste dos\u00e1hli nejlep\u0161\u00edch v\u00fdsledk\u016f.<\/div>\n            <\/div>\n        <\/div>\n\n        <div class=\"api-tabs\">\n            <button type=\"button\" class=\"api-tab active\" data-api=\"rawg\" id=\"rawgTab\">\n                <span class=\"api-tab-icon rawg\">R<\/span>\n                RAWG.io\n                <span class=\"status-dot\" id=\"rawgDot\"><\/span>\n            <\/button>\n            <button type=\"button\" class=\"api-tab\" data-api=\"igdb\" id=\"igdbTab\">\n                <span class=\"api-tab-icon igdb\">I<\/span>\n                IGDB (Twitch)\n                <span class=\"status-dot\" id=\"igdbDot\"><\/span>\n            <\/button>\n        <\/div>\n\n        <!-- RAWG Panel -->\n        <div class=\"api-panel active\" id=\"rawgPanel\">\n            <div class=\"provider-badge\">\n                <div class=\"provider-badge-icon rawg\">R<\/div>\n                <div class=\"provider-badge-text\">\n                    <h3>Datab\u00e1ze videoher RAWG<\/h3>\n                    <span>V\u00edce ne\u017e 500 000 her - 20 000 bezplatn\u00fdch po\u017eadavk\u016f m\u011bs\u00ed\u010dn\u011b<\/span>\n                <\/div>\n            <\/div>\n\n            <div class=\"instructions-box\">\n                <div class=\"instructions-header\">\n                    <svg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                        <path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"\/>\n                        <polyline points=\"14 2 14 8 20 8\"\/>\n                        <line x1=\"16\" y1=\"13\" x2=\"8\" y2=\"13\"\/>\n                        <line x1=\"16\" y1=\"17\" x2=\"8\" y2=\"17\"\/>\n                        <polyline points=\"10 9 9 9 8 9\"\/>\n                    <\/svg>\n                    Jak z\u00edskat bezplatn\u00fd kl\u00ed\u010d RAWG API\n                <\/div>\n                <ol>\n                    <li>P\u0159ej\u00edt na <a href=\"https:\/\/rawg.io\/apidocs\" target=\"_blank\" rel=\"noopener\">rawg.io\/apidocs<\/a><\/li>\n                    <li>Klikn\u011bte na <strong>\u201cZ\u00edskat kl\u00ed\u010d API\u201d<\/strong> tla\u010d\u00edtko<\/li>\n                    <li>Vytvo\u0159en\u00ed \u00fa\u010dtu nebo p\u0159ihl\u00e1\u0161en\u00ed pomoc\u00ed slu\u017eby Google\/GitHub<\/li>\n                    <li>Na str\u00e1nce se zobraz\u00ed v\u00e1\u0161 kl\u00ed\u010d API<\/li>\n                    <li>Zkop\u00edrujte kl\u00ed\u010d a vlo\u017ete jej n\u00ed\u017ee<\/li>\n                <\/ol>\n                <div class=\"tip-box\">\n                    <svg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                        <circle cx=\"12\" cy=\"12\" r=\"10\"\/>\n                        <line x1=\"12\" y1=\"16\" x2=\"12\" y2=\"12\"\/>\n                        <line x1=\"12\" y1=\"8\" x2=\"12.01\" y2=\"8\"\/>\n                    <\/svg>\n                    <span><strong>Profesion\u00e1ln\u00ed tip:<\/strong> Bezplatn\u00e1 \u00farove\u0148 poskytuje 20 000 po\u017eadavk\u016f m\u011bs\u00ed\u010dn\u011b - to je dost pro uspo\u0159\u00e1d\u00e1n\u00ed velk\u00fdch sb\u00edrek!<\/span>\n                <\/div>\n            <\/div>\n\n            <div class=\"input-group\">\n                <div class=\"input-wrapper\" style=\"flex: 2;\">\n                    <label for=\"rawgKeyInput\">Kl\u00ed\u010d API RAWG<\/label>\n                    <input type=\"text\" id=\"rawgKeyInput\" class=\"input-field\" placeholder=\"Zde vlo\u017ete sv\u016fj kl\u00ed\u010d RAWG API...\" autocomplete=\"off\" \/>\n                <\/div>\n                <div class=\"input-wrapper\" style=\"flex: 0; align-self: flex-end;\">\n                    <button type=\"button\" class=\"btn btn-rawg\" id=\"rawgValidateBtn\">\n                        <span id=\"rawgValidateBtnText\">Ov\u011b\u0159te<\/span>\n                    <\/button>\n                <\/div>\n            <\/div>\n            <div id=\"rawgStatus\" class=\"status-message\"><\/div>\n        <\/div>\n\n        <!-- IGDB Panel -->\n        <div class=\"api-panel\" id=\"igdbPanel\">\n            <div class=\"provider-badge\">\n                <div class=\"provider-badge-icon igdb\">I<\/div>\n                <div class=\"provider-badge-text\">\n                    <h3>IGDB - Internetov\u00e1 datab\u00e1ze her<\/h3>\n                    <span>Powered by Twitch - Podrobn\u00e1 metadata - 4 po\u017eadavky za sekundu<\/span>\n                <\/div>\n            <\/div>\n\n            <div class=\"instructions-box\">\n                <div class=\"instructions-header\">\n                    <svg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                        <path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"\/>\n                        <polyline points=\"14 2 14 8 20 8\"\/>\n                        <line x1=\"16\" y1=\"13\" x2=\"8\" y2=\"13\"\/>\n                        <line x1=\"16\" y1=\"17\" x2=\"8\" y2=\"17\"\/>\n                        <polyline points=\"10 9 9 9 8 9\"\/>\n                    <\/svg>\n                    Jak z\u00edskat bezplatn\u00e9 pov\u011b\u0159en\u00ed IGDB\/Twitch\n                <\/div>\n                <ol>\n                    <li>P\u0159ej\u00edt na <a href=\"https:\/\/dev.twitch.tv\/console\" target=\"_blank\" rel=\"noopener\">dev.twitch.tv\/console<\/a><\/li>\n                    <li>P\u0159ihlaste se pomoc\u00ed \u00fa\u010dtu Twitch (v p\u0159\u00edpad\u011b pot\u0159eby si jej vytvo\u0159te zdarma).<\/li>\n                    <li>Klikn\u011bte na <strong>\u201cZaregistrujte svou \u017e\u00e1dost\u201d<\/strong><\/li>\n                    <li>Vypl\u0148te formul\u00e1\u0159:\n                        <ul>\n                            <li><strong>Jm\u00e9no:<\/strong> libovoln\u00fd n\u00e1zev (nap\u0159. \u201cMy Game Organizer\u201d)<\/li>\n                            <li><strong>adresy URL p\u0159esm\u011brov\u00e1n\u00ed OAuth:<\/strong> <code>https:\/\/localhost<\/code><\/li>\n                            <li><strong>Kategorie:<\/strong> Vyberte mo\u017enost \u201cIntegrace aplikac\u00ed\u201d<\/li>\n                        <\/ul>\n                    <\/li>\n                    <li>Klikn\u011bte na <strong>\u201cVytvo\u0159it\u201d<\/strong><\/li>\n                    <li>Klikn\u011bte na <strong>\u201cSpravovat\u201d<\/strong> v nov\u00e9 aplikaci<\/li>\n                    <li>Zkop\u00edrujte sv\u016fj <strong>ID klienta<\/strong><\/li>\n                    <li>Klikn\u011bte na <strong>\u201cNov\u00e9 tajemstv\u00ed\u201d<\/strong> a zkop\u00edrujte vygenerovan\u00e9 tajemstv\u00ed<\/li>\n                    <li>Vlo\u017ete ob\u011b hodnoty n\u00ed\u017ee a klikn\u011bte na <strong>Ov\u011b\u0159te<\/strong><\/li>\n                <\/ol>\n\n                <div style=\"margin-top: 20px; padding: 18px 22px; background: var(--bg-primary); border: 1px solid rgba(255, 170, 0, 0.3); border-radius: 12px;\">\n                    <div style=\"display: flex; align-items: center; gap: 10px; margin-bottom: 12px; color: var(--warning); font-weight: 600; font-size: 0.95rem;\">\n                        <svg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"width: 20px; height: 20px;\">\n                            <circle cx=\"12\" cy=\"12\" r=\"10\"\/><polyline points=\"12 6 12 12 16 14\"\/>\n                        <\/svg>\n                        Vypr\u0161en\u00ed platnosti tokenu a jeho obnoven\u00ed\n                    <\/div>\n                    <p style=\"color: var(--text-secondary); font-size: 0.88rem; line-height: 1.7; margin-bottom: 12px;\">\n                        V\u00e1\u0161 p\u0159\u00edstupov\u00fd token je platn\u00fd p\u0159ibli\u017en\u011b po dobu <strong style=\"color: var(--text-primary);\">60 dn\u00ed<\/strong>. Po jej\u00edm vypr\u0161en\u00ed se b\u011bhem skenov\u00e1n\u00ed zobraz\u00ed chyby p\u0159ipojen\u00ed.\n                    <\/p>\n                    <p style=\"color: var(--text-secondary); font-size: 0.88rem; line-height: 1.7; font-weight: 600; margin-bottom: 10px;\">\n                        Obnoven\u00ed tokenu:\n                    <\/p>\n                    <ol style=\"margin-left: 20px; color: var(--text-secondary); font-size: 0.88rem; line-height: 1.8;\">\n                        <li>Va\u0161e <strong style=\"color: var(--text-primary);\">ID klienta<\/strong> a <strong style=\"color: var(--text-primary);\">Tajemstv\u00ed klienta<\/strong> nikdy nevypr\u0161\u00ed - nepot\u0159ebujete nov\u00e9.<\/li>\n                        <li>Sta\u010d\u00ed kliknout na <strong style=\"color: var(--neon-purple);\">Ov\u011b\u0159te<\/strong> znovu - automaticky se vygeneruje nov\u00fd token.<\/li>\n                        <li>A je to! Nov\u00fd token je ulo\u017een a p\u0159ipraven k pou\u017eit\u00ed.<\/li>\n                    <\/ol>\n                    <div style=\"margin-top: 14px; padding: 12px 16px; background: rgba(255, 170, 0, 0.08); border: 1px solid rgba(255, 170, 0, 0.2); border-radius: 8px; font-size: 0.82rem; color: var(--warning); display: flex; align-items: flex-start; gap: 8px;\">\n                        <svg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px;\">\n                            <circle cx=\"12\" cy=\"12\" r=\"10\"\/>\n                            <line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"\/>\n                            <line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"\/>\n                        <\/svg>\n                        <span>Pokud n\u011bkdy kliknete na <strong>\u201cNov\u00e9 tajemstv\u00ed\u201d<\/strong> na konzoli Twitch, bude va\u0161e star\u00e9 tajemstv\u00ed trvale zneplatn\u011bno. Mus\u00edte sem vlo\u017eit nov\u00fd tajn\u00fd k\u00f3d a znovu jej ov\u011b\u0159it. Tento postup prove\u010fte pouze v p\u0159\u00edpad\u011b, \u017ee je v\u00e1\u0161 tajn\u00fd k\u00f3d prozrazen.<\/span>\n                    <\/div>\n                <\/div>\n                <div class=\"tip-box\">\n                    <svg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                        <circle cx=\"12\" cy=\"12\" r=\"10\"\/>\n                        <line x1=\"12\" y1=\"16\" x2=\"12\" y2=\"12\"\/>\n                        <line x1=\"12\" y1=\"8\" x2=\"12.01\" y2=\"8\"\/>\n                    <\/svg>\n                    <span><strong>Profesion\u00e1ln\u00ed tip:<\/strong> IGDB obsahuje vynikaj\u00edc\u00ed \u00fadaje o nov\u011bj\u0161\u00edch hr\u00e1ch a podrobn\u00e9 p\u0159\u00edb\u011bhy, sn\u00edmky obrazovky a videa!<\/span>\n                <\/div>\n            <\/div>\n\n            <div class=\"input-group\">\n                <div class=\"input-wrapper\">\n                    <label for=\"igdbClientId\">ID klienta Twitch<\/label>\n                    <input type=\"text\" id=\"igdbClientId\" class=\"input-field\" placeholder=\"Va\u0161e ID klienta...\" autocomplete=\"off\" \/>\n                <\/div>\n                <div class=\"input-wrapper\">\n                    <label for=\"igdbClientSecret\">Tajemstv\u00ed klienta Twitch<\/label>\n                    <input type=\"password\" id=\"igdbClientSecret\" class=\"input-field\" placeholder=\"Tajemstv\u00ed va\u0161eho klienta...\" autocomplete=\"off\" \/>\n                <\/div>\n                <div class=\"input-wrapper\" style=\"flex: 0; align-self: flex-end;\">\n                    <button type=\"button\" class=\"btn btn-igdb\" id=\"igdbValidateBtn\">\n                        <span id=\"igdbValidateBtnText\">Ov\u011b\u0159te<\/span>\n                    <\/button>\n                <\/div>\n            <\/div>\n            <div id=\"igdbStatus\" class=\"status-message\"><\/div>\n        <\/div>\n\n        <!-- Enabled APIs -->\n        <div class=\"enabled-apis\" id=\"enabledApis\">\n            <span class=\"enabled-apis-label\">Aktivn\u00ed rozhran\u00ed API:<\/span>\n            <div id=\"enabledApisList\"><\/div>\n        <\/div>\n\n        <!-- API Mode Selector (only shows when both are connected) -->\n        <div class=\"api-mode-selector\" id=\"apiModeSelector\" style=\"display: none; margin-top: 20px; padding: 20px 25px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 14px;\">\n            <h4 style=\"color: var(--neon-purple); margin-bottom: 12px; font-size: 0.95rem; display: flex; align-items: center; gap: 8px;\">\n                <svg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"width: 18px; height: 18px;\"><circle cx=\"12\" cy=\"12\" r=\"3\"\/><path d=\"M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z\"\/><\/svg>\n                Re\u017eim Multi-API\n            <\/h4>\n            <p style=\"color: var(--text-secondary); font-size: 0.85rem; margin-bottom: 15px;\">RAWG i IGDB jsou propojeny. Vyberte si, jak je chcete pou\u017e\u00edvat:<\/p>\n            <div style=\"display: flex; flex-direction: column; gap: 10px;\">\n                <label style=\"display: flex; align-items: flex-start; gap: 12px; cursor: pointer; padding: 12px 16px; background: var(--bg-primary); border: 1px solid var(--border); border-radius: 10px; transition: all 0.3s;\" class=\"api-mode-option\" data-mode=\"merge\">\n                    <input type=\"radio\" name=\"apiMode\" value=\"merge\" checked style=\"accent-color: var(--neon-purple); margin-top: 3px;\">\n                    <div>\n                        <div style=\"color: var(--text-primary); font-weight: 600; font-size: 0.95rem;\">Slou\u010den\u00ed dat <span style=\"color: var(--success); font-size: 0.8rem; font-weight: 500;\">(Doporu\u010deno)<\/span><\/div>\n                        <div style=\"color: var(--text-secondary); font-size: 0.82rem; margin-top: 3px;\">Dotazuje se na ob\u011b rozhran\u00ed API a kombinuje nejlep\u0161\u00ed data z ka\u017ed\u00e9ho z nich - nejlep\u0161\u00ed obr\u00e1zek, nejdel\u0161\u00ed popis, v\u0161echny slou\u010den\u00e9 \u017e\u00e1nry, nejvy\u0161\u0161\u00ed hodnocen\u00ed.<\/div>\n                    <\/div>\n                <\/label>\n                <label style=\"display: flex; align-items: flex-start; gap: 12px; cursor: pointer; padding: 12px 16px; background: var(--bg-primary); border: 1px solid var(--border); border-radius: 10px; transition: all 0.3s;\" class=\"api-mode-option\" data-mode=\"best\">\n                    <input type=\"radio\" name=\"apiMode\" value=\"best\" style=\"accent-color: var(--neon-purple); margin-top: 3px;\">\n                    <div>\n                        <div style=\"color: var(--text-primary); font-weight: 600; font-size: 0.95rem;\">Nejlep\u0161\u00ed shoda<\/div>\n                        <div style=\"color: var(--text-secondary); font-size: 0.82rem; margin-top: 3px;\">Dotazuje se na ob\u011b rozhran\u00ed API, ale vybere jedin\u00fd v\u00fdsledek s nejvy\u0161\u0161\u00edm sk\u00f3re d\u016fv\u011bryhodnosti shody.<\/div>\n                    <\/div>\n                <\/label>\n                <label style=\"display: flex; align-items: flex-start; gap: 12px; cursor: pointer; padding: 12px 16px; background: var(--bg-primary); border: 1px solid var(--border); border-radius: 10px; transition: all 0.3s;\" class=\"api-mode-option\" data-mode=\"rawg\">\n                    <input type=\"radio\" name=\"apiMode\" value=\"rawg\" style=\"accent-color: var(--neon-purple); margin-top: 3px;\">\n                    <div>\n                        <div style=\"color: var(--text-primary); font-weight: 600; font-size: 0.95rem;\">Pouze RAWG<\/div>\n                        <div style=\"color: var(--text-secondary); font-size: 0.82rem; margin-top: 3px;\">Pou\u017e\u00edvejte pouze RAWG - skv\u011bl\u00e9 obr\u00e1zky na pozad\u00ed, vhodn\u00e9 pro nov\u011bj\u0161\u00ed tituly<\/div>\n                    <\/div>\n                <\/label>\n                <label style=\"display: flex; align-items: flex-start; gap: 12px; cursor: pointer; padding: 12px 16px; background: var(--bg-primary); border: 1px solid var(--border); border-radius: 10px; transition: all 0.3s;\" class=\"api-mode-option\" data-mode=\"igdb\">\n                    <input type=\"radio\" name=\"apiMode\" value=\"igdb\" style=\"accent-color: var(--neon-purple); margin-top: 3px;\">\n                    <div>\n                        <div style=\"color: var(--text-primary); font-weight: 600; font-size: 0.95rem;\">Pouze IGDB<\/div>\n                        <div style=\"color: var(--text-secondary); font-size: 0.82rem; margin-top: 3px;\">Pou\u017e\u00edvejte pouze IGDB - podrobn\u00e9 shrnut\u00ed a d\u011bj, vhodn\u00e9 pro retro tituly<\/div>\n                    <\/div>\n                <\/label>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <!-- Upload Section -->\n    <section class=\"tool-section\" id=\"uploadSection\">\n        <div class=\"upload-area\">\n            <div class=\"upload-visual\">\n                <svg viewbox=\"0 0 100 100\" fill=\"none\">\n                    <defs>\n                        <lineargradient id=\"uploadGrad\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\">\n                            <stop offset=\"0%\" style=\"stop-color:#00f0ff\"\/>\n                            <stop offset=\"50%\" style=\"stop-color:#bf00ff\"\/>\n                            <stop offset=\"100%\" style=\"stop-color:#ff00aa\"\/>\n                        <\/lineargradient>\n                    <\/defs>\n                    <rect x=\"15\" y=\"25\" width=\"70\" height=\"55\" rx=\"8\" stroke=\"url(#uploadGrad)\" stroke-width=\"2\" fill=\"none\"\/>\n                    <path d=\"M35 45 L50 30 L65 45\" stroke=\"url(#uploadGrad)\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" fill=\"none\"\/>\n                    <line x1=\"50\" y1=\"30\" x2=\"50\" y2=\"60\" stroke=\"url(#uploadGrad)\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\n                    <rect x=\"25\" y=\"15\" width=\"15\" height=\"20\" rx=\"3\" stroke=\"url(#uploadGrad)\" stroke-width=\"1.5\" fill=\"none\" opacity=\"0.5\"\/>\n                    <rect x=\"60\" y=\"15\" width=\"15\" height=\"20\" rx=\"3\" stroke=\"url(#uploadGrad)\" stroke-width=\"1.5\" fill=\"none\" opacity=\"0.5\"\/>\n                <\/svg>\n            <\/div>\n            <h2 class=\"upload-title\">V\u00fdb\u011br slo\u017eky ROM<\/h2>\n            <p class=\"upload-subtitle\">Vyberte slo\u017eku nebo soubory obsahuj\u00edc\u00ed hern\u00ed ROM. V\u0161e se zpracov\u00e1v\u00e1 lok\u00e1ln\u011b - nic neopust\u00ed v\u00e1\u0161 po\u010d\u00edta\u010d.<\/p>\n            \n            <!-- ========================================== -->\n            <!-- ROM PATH CONFIGURATION SECTION - NEW -->\n            <!-- ========================================== -->\n            <div class=\"rom-path-section\">\n                <div class=\"rom-path-header\">\n                    <div class=\"rom-path-title\">\n                        <svg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"width: 20px; height: 20px;\">\n                            <path d=\"M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z\"\/>\n                            <line x1=\"12\" y1=\"11\" x2=\"12\" y2=\"17\"\/>\n                            <line x1=\"9\" y1=\"14\" x2=\"15\" y2=\"14\"\/>\n                        <\/svg>\n                        <span>Cesta ke slo\u017ece ROM<\/span>\n                    <\/div>\n                    <span class=\"rom-path-hint\">Nutn\u00e9 pro integraci emul\u00e1toru a p\u0159esn\u00e9 cesty k soubor\u016fm<\/span>\n                <\/div>\n                \n                <div class=\"rom-path-description\">\n                    <p>Zadejte <strong>\u00fapln\u00e1 syst\u00e9mov\u00e1 cesta<\/strong> do slo\u017eky ROM. T\u00edm se zajist\u00ed, \u017ee exportovan\u00e9 katalogy budou obsahovat kompletn\u00ed cesty, kter\u00e9 m\u016f\u017ee emul\u00e1tor p\u0159\u00edmo pou\u017e\u00edt.<\/p>\n                <\/div>\n                \n                <div class=\"rom-path-input-group\">\n                    <div class=\"rom-path-input-wrapper\">\n                        <svg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"rom-path-input-icon\">\n                            <path d=\"M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z\"\/>\n                        <\/svg>\n                        <input type=\"text\" id=\"romBasePath\" \n                               placeholder=\"nap\u0159. D:\\Emulation\\ROMs nebo \/home\/user\/roms\" \n                               class=\"rom-path-input\" \n                               autocomplete=\"off\" \/>\n                    <\/div>\n                    <button type=\"button\" class=\"btn btn-save-path\" id=\"saveRomPath\">\n                        <svg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                            <path d=\"M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z\"\/>\n                            <polyline points=\"17 21 17 13 7 13 7 21\"\/>\n                            <polyline points=\"7 3 7 8 15 8\"\/>\n                        <\/svg>\n                        Ulo\u017eit cestu\n                    <\/button>\n                <\/div>\n                \n                <div id=\"romPathStatus\" class=\"rom-path-status\"><\/div>\n                \n                <!-- Shows detected folder structure after file selection -->\n                <div id=\"folderStructureInfo\" class=\"folder-structure-info\" style=\"display: none;\"><\/div>\n                \n                <!-- Shows path preview after base path is set -->\n                <div id=\"pathPreview\" class=\"path-preview\" style=\"display: none;\"><\/div>\n                \n                <div class=\"rom-path-examples\">\n                    <div class=\"example-header\">\n                        <svg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"width: 14px; height: 14px;\">\n                            <circle cx=\"12\" cy=\"12\" r=\"10\"\/>\n                            <line x1=\"12\" y1=\"16\" x2=\"12\" y2=\"12\"\/>\n                            <line x1=\"12\" y1=\"8\" x2=\"12.01\" y2=\"8\"\/>\n                        <\/svg>\n                        P\u0159\u00edklady struktury slo\u017eek:\n                    <\/div>\n                    <div class=\"example-grid\">\n                        <div class=\"example-item\">\n                            <code>D:\\Games\\<\/code>\n                            <span class=\"example-subfolders\">nes\\ snes\\ n64\\ gba\\<\/span>\n                        <\/div>\n                        <div class=\"example-item\">\n                            <code>\/home\/user\/roms\/<\/code>\n                            <span class=\"example-subfolders\">nes\/ snes\/ psx\/<\/span>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n            <!-- END ROM PATH CONFIGURATION SECTION -->\n            \n            <div class=\"upload-buttons\">\n                <button type=\"button\" class=\"btn btn-primary btn-large\" id=\"browseFolderBtn\" disabled>\n                    <svg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                        <path d=\"M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z\"\/>\n                    <\/svg>\n                    Proch\u00e1zet slo\u017eku\n                <\/button>\n                <button type=\"button\" class=\"btn btn-secondary btn-large\" id=\"browseFilesBtn\" disabled>\n                    <svg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                        <path d=\"M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z\"\/>\n                        <polyline points=\"13 2 13 9 20 9\"\/>\n                    <\/svg>\n                    V\u00fdb\u011br jedn\u00e9 pam\u011bti ROM\n                <\/button>\n            <\/div>\n\n            <input type=\"file\" id=\"folderInput\" class=\"file-input-hidden\" webkitdirectory directory multiple \/>\n            <input type=\"file\" id=\"filesInput\" class=\"file-input-hidden\" multiple accept=\".zip,.7z,.rar,.nes,.sfc,.smc,.gb,.gbc,.gba,.n64,.z64,.v64,.nds,.3ds,.md,.gen,.bin,.sms,.gg,.iso,.cue,.chd,.psx,.pbp,.pce,.a26,.a78,.lnx,.col,.ngp,.ngc,.ws,.wsc,.wad,.wbfs,.fds,.32x,.scd,.gcm,.gcz,.rvz,.wux,.nsp,.xci\" \/>\n\n            <div class=\"security-badge\">\n                <svg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                    <rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\" ry=\"2\"\/>\n                    <path d=\"M7 11V7a5 5 0 0 1 10 0v4\"\/>\n                <\/svg>\n                <div>\n        <strong>100% M\u00edstn\u00ed zpracov\u00e1n\u00ed - va\u0161e soubory nikdy neopust\u00ed v\u00e1\u0161 po\u010d\u00edta\u010d<\/strong>\n        <p style=\"margin: 4px 0 0 0; font-size: 0.85em; opacity: 0.8;\">\n            V\u00e1\u0161 prohl\u00ed\u017ee\u010d m\u016f\u017ee upozornit, \u017ee soubory budou \u201cnahr\u00e1ny\u201d - jedn\u00e1 se o standardn\u00ed formulaci prohl\u00ed\u017ee\u010de.\n            Va\u0161e soubory jsou zpracov\u00e1ny <em>zcela v prohl\u00ed\u017ee\u010di<\/em> a jsou <strong>nikdy nebyl odesl\u00e1n na \u017e\u00e1dn\u00fd server<\/strong>.\n        <\/p>\n    <\/div>\n<\/div>\n        <\/div>\n    <\/section>\n\n    <!-- Progress Section -->\n    <section class=\"tool-section progress-section\" id=\"progressSection\">\n        <div class=\"progress-header\">\n            <div class=\"progress-title\">\n                <span class=\"spinner\"><\/span>\n                Skenovac\u00ed a p\u0159i\u0159azovac\u00ed hry...\n            <\/div>\n            <span class=\"progress-percent\" id=\"progressPercent\">0%<\/span>\n        <\/div>\n        <div class=\"progress-bar-container\">\n            <div class=\"progress-bar\" id=\"progressBar\"><\/div>\n        <\/div>\n        <div class=\"current-file\" id=\"currentFile\">P\u0159\u00edprava...<\/div>\n        <div class=\"progress-stats\">\n            <div class=\"stat-card\">\n                <div class=\"stat-value\" id=\"statTotal\">0<\/div>\n                <div class=\"stat-label\">Nalezen\u00e9 soubory<\/div>\n            <\/div>\n            <div class=\"stat-card\">\n                <div class=\"stat-value\" id=\"statProcessed\">0<\/div>\n                <div class=\"stat-label\">Zpracov\u00e1no<\/div>\n            <\/div>\n            <div class=\"stat-card\">\n                <div class=\"stat-value\" id=\"statMatched\">0<\/div>\n                <div class=\"stat-label\">Odpov\u00eddaj\u00edc\u00ed<\/div>\n            <\/div>\n            <div class=\"stat-card\">\n                <div class=\"stat-value\" id=\"statUnmatched\">0<\/div>\n                <div class=\"stat-label\">Bezkonkuren\u010dn\u00ed<\/div>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <!-- Results Section -->\n<section class=\"results-section\" id=\"resultsSection\">\n    <div class=\"tool-section\" style=\"padding: 25px 35px;\">\n        <div class=\"results-header\">\n            <h2 class=\"results-title\">Va\u0161e organizovan\u00e1 knihovna<\/h2>\n        <\/div>\n        \n        <!-- Export Options with Descriptions -->\n        <div class=\"export-options-grid\" style=\"display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin: 25px 0;\">\n            \n            <!-- Rec0m88 Catalog - PRIMARY -->\n            <div class=\"export-option\" style=\"background: linear-gradient(135deg, rgba(0, 240, 255, 0.1), rgba(191, 0, 255, 0.1)); border: 2px solid var(--neon-blue); border-radius: 12px; padding: 18px; position: relative;\">\n                <span style=\"position: absolute; top: -10px; right: 15px; background: var(--neon-blue); color: var(--bg-primary); font-size: 0.7rem; font-weight: 700; padding: 3px 10px; border-radius: 20px; text-transform: uppercase;\">Doporu\u010den\u00e9 str\u00e1nky<\/span>\n                <button type=\"button\" class=\"btn btn-primary\" id=\"exportHtmlBtn\" style=\"width: 100%; margin-bottom: 12px;\">\n                    <svg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                        <polyline points=\"16 18 22 12 16 6\"\/>\n                        <polyline points=\"8 6 2 12 8 18\"\/>\n                    <\/svg>\n                    Rec0m88 Katalog\n                <\/button>\n                <p style=\"color: var(--text-secondary); font-size: 0.82rem; line-height: 1.5; margin: 0;\">\n                    <strong style=\"color: var(--neon-blue);\">Spr\u00e1vce her pro emul\u00e1tor Rec0m88.<\/strong> Proch\u00e1zejte hry s obaly, popisy a p\u0159\u00edm\u00fdm spu\u0161t\u011bn\u00edm.\n                <\/p>\n            <\/div>\n            \n            <!-- EmulationStation -->\n            <div class=\"export-option\" style=\"background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 12px; padding: 18px;\">\n                <button type=\"button\" class=\"btn btn-secondary\" id=\"exportEsBtn\" style=\"width: 100%; margin-bottom: 12px;\">\n                    <svg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                        <rect x=\"2\" y=\"3\" width=\"20\" height=\"14\" rx=\"2\" ry=\"2\"\/>\n                        <line x1=\"8\" y1=\"21\" x2=\"16\" y2=\"21\"\/>\n                        <line x1=\"12\" y1=\"17\" x2=\"12\" y2=\"21\"\/>\n                    <\/svg>\n                    EmulationStation\n                <\/button>\n                <p style=\"color: var(--text-secondary); font-size: 0.82rem; line-height: 1.5; margin: 0;\">\n                    <strong style=\"color: var(--neon-purple);\">Form\u00e1t XML pro RetroArch, Batocera, RetroPie,<\/strong> a dal\u0161\u00edch frontend\u016f zalo\u017een\u00fdch na aplikaci EmulationStation.\n                <\/p>\n            <\/div>\n            \n                       <!-- Library Data JSON (new v2 format) -->\n            <div class=\"export-option\" style=\"background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 12px; padding: 18px;\">\n                <button type=\"button\" class=\"btn btn-secondary\" id=\"exportLibraryJsonBtn\" style=\"width: 100%; margin-bottom: 12px;\">\n                    <svg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                        <path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"\/>\n                        <polyline points=\"14 2 14 8 20 8\"\/>\n                    <\/svg>\n                    Knihovna JSON (v2)\n                <\/button>\n                <p style=\"color: var(--text-secondary); font-size: 0.82rem; line-height: 1.5; margin: 0;\">\n                    <strong style=\"color: var(--neon-cyan);\">Pro emul\u00e1tor a prohl\u00ed\u017ee\u010d Rec0m88.<\/strong> Datov\u00fd soubor, kter\u00fd na\u010d\u00edt\u00e1 soubor library-viewer.html.\n                <\/p>\n            <\/div>\n\n            <!-- Legacy JSON -->\n            <div class=\"export-option\" style=\"background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 12px; padding: 18px;\">\n                <button type=\"button\" class=\"btn btn-secondary\" id=\"exportJsonBtn\" style=\"width: 100%; margin-bottom: 12px;\">\n                    <svg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                        <path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"\/>\n                        <polyline points=\"14 2 14 8 20 8\"\/>\n                    <\/svg>\n                    JSON (star\u0161\u00ed)\n                <\/button>\n                <p style=\"color: var(--text-secondary); font-size: 0.82rem; line-height: 1.5; margin: 0;\">\n                    <strong style=\"color: var(--neon-purple);\">Surov\u00e1 data pro v\u00fdvoj\u00e1\u0159e.<\/strong> Ploch\u00fd form\u00e1t pro vlastn\u00ed n\u00e1stroje nebo import tabulkov\u00e9ho procesoru.\n                <\/p>\n            <\/div>\n            \n            <!-- CSV -->\n            <div class=\"export-option\" style=\"background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 12px; padding: 18px;\">\n                <button type=\"button\" class=\"btn btn-secondary\" id=\"exportCsvBtn\" style=\"width: 100%; margin-bottom: 12px;\">\n                    <svg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                        <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"\/>\n                        <line x1=\"3\" y1=\"9\" x2=\"21\" y2=\"9\"\/>\n                        <line x1=\"9\" y1=\"3\" x2=\"9\" y2=\"21\"\/>\n                    <\/svg>\n                    Tabulka CSV\n                <\/button>\n                <p style=\"color: var(--text-secondary); font-size: 0.82rem; line-height: 1.5; margin: 0;\">\n                    <strong style=\"color: var(--neon-purple);\">Otev\u0159e se v aplikaci Excel nebo Google Sheets.<\/strong> Skv\u011ble se hod\u00ed pro zobrazen\u00ed sb\u00edrky jako t\u0159\u00edditeln\u00e9ho seznamu.\n                <\/p>\n            <\/div>\n        <\/div>\n        \n        <!-- Action Buttons Row -->\n        <div style=\"display: flex; gap: 15px; flex-wrap: wrap; justify-content: center; padding-top: 15px; border-top: 1px solid var(--border);\">\n            <button type=\"button\" class=\"btn btn-primary\" id=\"downloadArtBtn\">\n                <svg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                    <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"\/>\n                    <polyline points=\"7 10 12 15 17 10\"\/>\n                    <line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"3\"\/>\n                <\/svg>\n                St\u00e1hnout obal\n            <\/button>\n            <button type=\"button\" class=\"btn btn-secondary\" id=\"resetBtn\">\n                <svg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                    <polyline points=\"23 4 23 10 17 10\"\/>\n                    <path d=\"M20.49 15a9 9 0 1 1-2.12-9.36L23 10\"\/>\n                <\/svg>\n                Nov\u00e9 skenov\u00e1n\u00ed\n            <\/button>\n        <\/div>\n    <\/div>\n\n    <div class=\"filter-tabs\" id=\"filterTabs\">\n        <button type=\"button\" class=\"filter-tab active\" data-filter=\"all\">\n            V\u0161echny hry <span class=\"count\" id=\"countAll\">0<\/span>\n        <\/button>\n        <button type=\"button\" class=\"filter-tab\" data-filter=\"matched\">\n            \u2713 Shodn\u00fd <span class=\"count\" id=\"countMatched\">0<\/span>\n        <\/button>\n        <button type=\"button\" class=\"filter-tab\" data-filter=\"unmatched\">\n            \u2717 Bezkonkuren\u010dn\u00ed <span class=\"count\" id=\"countUnmatched\">0<\/span>\n        <\/button>\n    <\/div>\n\n    <div class=\"search-box\">\n        <div class=\"search-wrapper\">\n            <svg class=\"search-icon\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <circle cx=\"11\" cy=\"11\" r=\"8\"\/>\n                <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"\/>\n            <\/svg>\n            <input type=\"text\" id=\"searchInput\" placeholder=\"Prohledejte svou knihovnu...\" \/>\n        <\/div>\n    <\/div>\n\n    <div class=\"games-grid\" id=\"gamesGrid\"><\/div>\n<\/section>\n\n<!-- Merge Catalogs Section -->\n<section class=\"tool-section\" id=\"mergeSection\">\n    <div class=\"section-header\">\n        <div class=\"section-icon\" style=\"background: linear-gradient(135deg, rgba(191, 0, 255, 0.1), rgba(255, 0, 170, 0.1)); border-color: rgba(191, 0, 255, 0.3);\">\n            <svg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"url(#mergeIconGrad)\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <defs>\n                    <lineargradient id=\"mergeIconGrad\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\">\n                        <stop offset=\"0%\" style=\"stop-color:#bf00ff\"\/>\n                        <stop offset=\"100%\" style=\"stop-color:#ff00aa\"\/>\n                    <\/lineargradient>\n                <\/defs>\n                <path d=\"M8 6h13\"\/><path d=\"M8 12h13\"\/><path d=\"M8 18h13\"\/><path d=\"M3 6h.01\"\/><path d=\"M3 12h.01\"\/><path d=\"M3 18h.01\"\/>\n            <\/svg>\n        <\/div>\n        <div>\n            <div class=\"section-title\" style=\"background: linear-gradient(135deg, var(--neon-purple), var(--neon-pink)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;\">Slou\u010den\u00ed soubor\u016f JSON Rec0m88<\/div>\n            <div class=\"section-subtitle\">Spojen\u00ed v\u00edce exportovan\u00fdch katalogov\u00fdch soubor\u016f do jedn\u00e9 jednotn\u00e9 kolekce<\/div>\n        <\/div>\n    <\/div>\n    <p style=\"color: var(--text-secondary); margin-bottom: 20px; font-size: 0.95rem; line-height: 1.6;\">\n        M\u00e1te v\u00edce export\u016f katalogu Rec0m88 z r\u016fzn\u00fdch relac\u00ed skenov\u00e1n\u00ed? Vyberte je v\u0161echny a slou\u010dte je do jednoho uspo\u0159\u00e1dan\u00e9ho souboru s automatickou detekc\u00ed duplicit.\n    <\/p>\n    <div style=\"display: flex; gap: 15px; align-items: center; flex-wrap: wrap;\">\n        <button type=\"button\" class=\"btn btn-secondary\" id=\"openMergeBtn\">\n            <svg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <path d=\"M8 6h13\"\/><path d=\"M8 12h13\"\/><path d=\"M8 18h13\"\/><path d=\"M3 6h.01\"\/><path d=\"M3 12h.01\"\/><path d=\"M3 18h.01\"\/>\n            <\/svg>\n            V\u00fdb\u011br a slou\u010den\u00ed katalog\u016f\n        <\/button>\n        <span style=\"color: var(--text-muted); font-size: 0.85rem;\">Nen\u00ed pot\u0159eba \u017e\u00e1dn\u00fd kl\u00ed\u010d API - funguje s libovoln\u00fdmi exportovan\u00fdmi soubory HTML<\/span>\n    <\/div>\n    <input type=\"file\" id=\"mergeFilesInput\" class=\"file-input-hidden\" multiple accept=\".json\" \/>\n<\/section>\n<\/div>\n\n<!-- Toast Container -->\n<div class=\"toast-container\" id=\"toastContainer\"><\/div>\n\n<!-- Game Detail Modal -->\n<div class=\"modal-overlay\" id=\"gameModal\">\n    <div class=\"modal\">\n        <div class=\"modal-header\">\n            <h3 id=\"modalTitle\">Podrobnosti o h\u0159e<\/h3>\n            <button type=\"button\" class=\"modal-close\" id=\"modalCloseBtn\">\u00d7<\/button>\n        <\/div>\n        <div class=\"modal-body\" id=\"modalBody\"><\/div>\n    <\/div>\n<\/div>\n\n<!-- Merge Catalogs Modal -->\n<div class=\"modal-overlay\" id=\"mergeModal\">\n    <div class=\"modal\" style=\"max-width: 750px;\">\n        <div class=\"modal-header\">\n            <h3 id=\"mergeModalTitle\">Slou\u010den\u00ed katalog\u016f HTML<\/h3>\n            <button type=\"button\" class=\"modal-close\" id=\"mergeModalCloseBtn\">\u00d7<\/button>\n        <\/div>\n        <div class=\"modal-body\" id=\"mergeModalBody\">\n            <div style=\"text-align: center; padding: 20px 0 30px;\">\n                <div style=\"width: 80px; height: 80px; margin: 0 auto 20px; position: relative;\">\n                    <svg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"url(#mergeGrad)\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"width: 100%; height: 100%;\">\n                        <defs>\n                            <lineargradient id=\"mergeGrad\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\">\n                                <stop offset=\"0%\" style=\"stop-color:#bf00ff\"\/>\n                                <stop offset=\"100%\" style=\"stop-color:#ff00aa\"\/>\n                            <\/lineargradient>\n                        <\/defs>\n                        <rect x=\"2\" y=\"3\" width=\"7\" height=\"9\" rx=\"1.5\"\/>\n                        <rect x=\"15\" y=\"3\" width=\"7\" height=\"9\" rx=\"1.5\"\/>\n                        <rect x=\"8.5\" y=\"14\" width=\"7\" height=\"9\" rx=\"1.5\"\/>\n                        <path d=\"M5.5 12 L9.5 14\"\/>\n                        <path d=\"M18.5 12 L14.5 14\"\/>\n                    <\/svg>\n                <\/div>\n                <h3 style=\"font-size: 1.3rem; margin-bottom: 10px; background: linear-gradient(135deg, var(--neon-purple), var(--neon-pink)); -webkit-background-clip: text; -webkit-text-fill-color: transparent;\">Kombinace v\u00edce katalog\u016f<\/h3>\n                <p style=\"color: var(--text-secondary); max-width: 450px; margin: 0 auto 25px; font-size: 0.95rem; line-height: 1.6;\">\n                    Vyberte v\u0161echny exportovan\u00e9 soubory katalogu JSON. Duplik\u00e1ty jsou automaticky detekov\u00e1ny a odstran\u011bny.\n                <\/p>\n                <button type=\"button\" class=\"btn btn-primary\" id=\"selectMergeFilesBtn\">\n                    <svg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                        <path d=\"M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z\"\/>\n                        <polyline points=\"13 2 13 9 20 9\"\/>\n                    <\/svg>\n                    Vybrat soubory Recom88 JSON\n                <\/button>\n            <\/div>\n\n            <div id=\"mergeFilesList\" style=\"display: none; margin-bottom: 25px;\">\n                <div style=\"display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;\">\n                    <h4 style=\"color: var(--neon-blue); font-size: 1rem;\">Na\u010dten\u00e9 soubory<\/h4>\n                    <button type=\"button\" class=\"btn btn-secondary\" id=\"addMoreFilesBtn\" style=\"padding: 8px 16px; font-size: 0.85rem;\">\n                        + P\u0159idat dal\u0161\u00ed soubory\n                    <\/button>\n                <\/div>\n                <div id=\"mergeFilesListInner\" style=\"max-height: 200px; overflow-y: auto; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-secondary);\"><\/div>\n            <\/div>\n\n            <div id=\"mergeStats\" style=\"display: none; margin-bottom: 25px;\">\n                <div style=\"display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px;\">\n                    <div class=\"stat-card\">\n                        <div class=\"stat-value\" id=\"mergeStatFiles\">0<\/div>\n                        <div class=\"stat-label\">Soubory<\/div>\n                    <\/div>\n                    <div class=\"stat-card\">\n                        <div class=\"stat-value\" id=\"mergeStatTotal\">0<\/div>\n                        <div class=\"stat-label\">Celkem her<\/div>\n                    <\/div>\n                    <div class=\"stat-card\">\n                        <div class=\"stat-value\" id=\"mergeStatUnique\">0<\/div>\n                        <div class=\"stat-label\">Unik\u00e1tn\u00ed<\/div>\n                    <\/div>\n                    <div class=\"stat-card\">\n                        <div class=\"stat-value\" id=\"mergeStatDupes\">0<\/div>\n                        <div class=\"stat-label\">Duplik\u00e1ty<\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <div id=\"mergeDupeOptions\" style=\"display: none; margin-bottom: 25px; padding: 20px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 12px;\">\n                <h4 style=\"color: var(--neon-pink); margin-bottom: 12px; font-size: 0.95rem;\">Manipulace s duplik\u00e1ty<\/h4>\n                <p style=\"color: var(--text-secondary); font-size: 0.85rem; margin-bottom: 15px;\">Pokud se stejn\u00e1 hra objev\u00ed ve v\u00edce souborech:<\/p>\n                <label style=\"display: flex; align-items: center; gap: 10px; cursor: pointer; margin-bottom: 10px; color: var(--text-primary); font-size: 0.95rem;\">\n                    <input type=\"radio\" name=\"dupeStrategy\" value=\"best\" checked style=\"accent-color: var(--neon-purple);\"> Ponechte si ten s nejlep\u0161\u00edmi metadaty (v\u00edce informac\u00ed, obal).\n                <\/label>\n                <label style=\"display: flex; align-items: center; gap: 10px; cursor: pointer; margin-bottom: 10px; color: var(--text-primary); font-size: 0.95rem;\">\n                    <input type=\"radio\" name=\"dupeStrategy\" value=\"first\" style=\"accent-color: var(--neon-purple);\"> Uchov\u00e1vat od nejstar\u0161\u00edho na\u010dten\u00e9ho souboru\n                <\/label>\n                <label style=\"display: flex; align-items: center; gap: 10px; cursor: pointer; color: var(--text-primary); font-size: 0.95rem;\">\n                    <input type=\"radio\" name=\"dupeStrategy\" value=\"all\" style=\"accent-color: var(--neon-purple);\"> Ponechat v\u0161e (bez deduplikace)\n                <\/label>\n            <\/div>\n\n            <div id=\"mergeProgress\" style=\"display: none; margin-bottom: 25px;\">\n                <div style=\"display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;\">\n                    <span style=\"display: flex; align-items: center; gap: 10px; color: var(--text-primary);\"><span class=\"spinner\"><\/span> Slou\u010den\u00ed...<\/span>\n                    <span id=\"mergeProgressPercent\" style=\"color: var(--neon-blue); font-weight: 700;\">0%<\/span>\n                <\/div>\n                <div class=\"progress-bar-container\">\n                    <div class=\"progress-bar\" id=\"mergeProgressBar\" style=\"width: 0%;\"><\/div>\n                <\/div>\n                <div id=\"mergeProgressFile\" style=\"margin-top: 10px; color: var(--text-secondary); font-size: 0.9rem;\"><\/div>\n            <\/div>\n\n            <div id=\"mergeActions\" style=\"display: none; text-align: center; padding-top: 10px;\">\n                <button type=\"button\" class=\"btn btn-primary btn-large\" id=\"executeMergeBtn\">\n                    <svg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                        <path d=\"M8 6h13\"\/><path d=\"M8 12h13\"\/><path d=\"M8 18h13\"\/><path d=\"M3 6h.01\"\/><path d=\"M3 12h.01\"\/><path d=\"M3 18h.01\"\/>\n                    <\/svg>\n                    Slou\u010den\u00ed a sta\u017een\u00ed kombinovan\u00e9ho katalogu\n                <\/button>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n<\/body>\n<\/body>\n<\/html>","protected":false},"excerpt":{"rendered":"<p>Free Game Library Organizer &#038; ROM Metadata Scraper | NES, SNES, Genesis, N64 ROMs &#038; More| rec0m88.com Rec0m88 Game Library Organizer &#038; ROM Metadata Scraper Identify your ROMs, fetch box art, descriptions, and ratings from IGDB &#038; RAWG \u2014 then download everything as organized files ready for Rec0m88 and other emulator frontends. 100% local and&#8230;<\/p>","protected":false},"author":1,"featured_media":245,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"class_list":["post-8332","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/rec0m88.com\/cs\/wp-json\/wp\/v2\/pages\/8332","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rec0m88.com\/cs\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/rec0m88.com\/cs\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/rec0m88.com\/cs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rec0m88.com\/cs\/wp-json\/wp\/v2\/comments?post=8332"}],"version-history":[{"count":5,"href":"https:\/\/rec0m88.com\/cs\/wp-json\/wp\/v2\/pages\/8332\/revisions"}],"predecessor-version":[{"id":8360,"href":"https:\/\/rec0m88.com\/cs\/wp-json\/wp\/v2\/pages\/8332\/revisions\/8360"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rec0m88.com\/cs\/wp-json\/wp\/v2\/media\/245"}],"wp:attachment":[{"href":"https:\/\/rec0m88.com\/cs\/wp-json\/wp\/v2\/media?parent=8332"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}