{"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\/nl\/game-library-organizer\/","title":{"rendered":"Organisator voor spelbibliotheek"},"content":{"rendered":"\n\n\n \n \n \n \n Free Game Library Organizer & ROM Metadata Scraper | NES, SNES, Genesis, N64 ROMs & 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 & 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 & 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 Spelbibliotheek Organisator & ROM Metadata Schraper<h1>\n <p class=\"subtitle\">Identificeer je ROM's, haal box-art, beschrijvingen en beoordelingen op van IGDB & RAWG - download vervolgens alles als georganiseerde bestanden, klaar voor Rec0m88 en andere emulator frontends. 100% lokaal en priv\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\">Meestersysteem<\/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\">Arcade<\/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\">Game databases verbinden<\/div>\n <div class=\"section-subtitle\">Kies \u00e9\u00e9n of beide API's voor de beste resultaten<\/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>RAWG Databank Videospellen<\/h3>\n <span>500.000+ games - 20.000 gratis aanvragen\/maand<\/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 Hoe krijgt u uw gratis RAWG API-sleutel?\n <\/div>\n <ol>\n <li>Ga naar <a href=\"https:\/\/rawg.io\/apidocs\" target=\"_blank\" rel=\"noopener\">rawg.io\/apidocs<\/a><\/li>\n <li>Klik op de <strong>\u201cAPI-sleutel ophalen\u201d.\u201d<\/strong> knop<\/li>\n <li>Maak een account aan of meld u aan met Google\/GitHub<\/li>\n <li>Uw API-sleutel wordt weergegeven op de pagina<\/li>\n <li>Kopieer de sleutel en plak deze hieronder<\/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>Pro Tip:<\/strong> De gratis tier geeft je 20.000 aanvragen\/maand - genoeg voor het organiseren van grote collecties!<\/span>\n <\/div>\n <\/div>\n\n <div class=\"input-group\">\n <div class=\"input-wrapper\" style=\"flex: 2;\">\n <label for=\"rawgKeyInput\">RAWG API-sleutel<\/label>\n <input type=\"text\" id=\"rawgKeyInput\" class=\"input-field\" placeholder=\"Plak hier uw RAWG API-sleutel...\" 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\">Valideer<\/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 - Internet Spel Database<\/h3>\n <span>Aangedreven door Twitch - Gedetailleerde metagegevens - 4 aanvragen\/seconde<\/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 Hoe krijg je je gratis IGDB\/Twitch-creditentials?\n <\/div>\n <ol>\n <li>Ga naar <a href=\"https:\/\/dev.twitch.tv\/console\" target=\"_blank\" rel=\"noopener\">dev.twitch.tv\/console<\/a><\/li>\n <li>Log in met je Twitch-account (maak er indien nodig een gratis aan)<\/li>\n <li>Klik op <strong>\u201cRegistreer uw toepassing\u201d.\u201d<\/strong><\/li>\n <li>Vul het formulier in:\n <ul>\n <li><strong>Naam:<\/strong> Een willekeurige naam (bijvoorbeeld \u201cMy Game Organizer\u201d)<\/li>\n <li><strong>OAuth omleidings-URL's:<\/strong> <code>https:\/\/localhost<\/code><\/li>\n <li><strong>Categorie:<\/strong> Selecteer \u201cIntegratie van toepassingen\u201d.\u201d<\/li>\n <\/ul>\n <\/li>\n <li>Klik op <strong>\u201cMaken\u201d<\/strong><\/li>\n <li>Klik op <strong>\u201cBeheren\u201d<\/strong> op uw nieuwe toepassing<\/li>\n <li>Kopieer uw <strong>Klant-ID<\/strong><\/li>\n <li>Klik op <strong>\u201cNieuw geheim\u201d<\/strong> en kopieer het gegenereerde geheim<\/li>\n <li>Plak beide waarden hieronder en klik op <strong>Valideer<\/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 Verlopen en vernieuwen van token\n <\/div>\n <p style=\"color: var(--text-secondary); font-size: 0.88rem; line-height: 1.7; margin-bottom: 12px;\">\n Uw toegangscode is ongeveer <strong style=\"color: var(--text-primary);\">60 dagen<\/strong>. Als deze verloopt, zie je verbindingsfouten tijdens het scannen.\n <\/p>\n <p style=\"color: var(--text-secondary); font-size: 0.88rem; line-height: 1.7; font-weight: 600; margin-bottom: 10px;\">\n Je token vernieuwen:\n <\/p>\n <ol style=\"margin-left: 20px; color: var(--text-secondary); font-size: 0.88rem; line-height: 1.8;\">\n <li>Jouw <strong style=\"color: var(--text-primary);\">Klant-ID<\/strong> en <strong style=\"color: var(--text-primary);\">Geheim van de klant<\/strong> verlopen nooit - je hebt geen nieuwe nodig<\/li>\n <li>Klik gewoon op de <strong style=\"color: var(--neon-purple);\">Valideer<\/strong> knop opnieuw - er wordt automatisch een nieuw token gegenereerd<\/li>\n <li>En klaar is kees! Het nieuwe token is opgeslagen en klaar voor gebruik<\/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>Als je ooit klikt op <strong>\u201cNieuw geheim\u201d<\/strong> op de Twitch-console is je oude geheim voorgoed ongeldig gemaakt. Je moet het nieuwe geheim hier plakken en opnieuw valideren. Doe dit alleen als je geheim gecompromitteerd is.<\/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>Pro Tip:<\/strong> IGDB heeft uitstekende gegevens voor nieuwere games en bevat gedetailleerde verhaallijnen, screenshots en video's!<\/span>\n <\/div>\n <\/div>\n\n <div class=\"input-group\">\n <div class=\"input-wrapper\">\n <label for=\"igdbClientId\">Twitch-client-ID<\/label>\n <input type=\"text\" id=\"igdbClientId\" class=\"input-field\" placeholder=\"Uw klant-ID...\" autocomplete=\"off\" \/>\n <\/div>\n <div class=\"input-wrapper\">\n <label for=\"igdbClientSecret\">Geheim Twitch-client<\/label>\n <input type=\"password\" id=\"igdbClientSecret\" class=\"input-field\" placeholder=\"Het geheim van je klant...\" 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\">Valideer<\/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\">Actieve API's:<\/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 Multi-API-modus\n <\/h4>\n <p style=\"color: var(--text-secondary); font-size: 0.85rem; margin-bottom: 15px;\">Zowel RAWG als IGDB zijn verbonden. Kies hoe je ze wilt gebruiken:<\/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;\">Gegevens samenvoegen <span style=\"color: var(--success); font-size: 0.8rem; font-weight: 500;\">(Aanbevolen)<\/span><\/div>\n <div style=\"color: var(--text-secondary); font-size: 0.82rem; margin-top: 3px;\">Vraagt beide API's op en combineert de beste gegevens van beide - beste afbeelding, langste beschrijving, alle genres samengevoegd, hoogste waardering<\/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;\">Beste wedstrijd<\/div>\n <div style=\"color: var(--text-secondary); font-size: 0.82rem; margin-top: 3px;\">Vraagt beide API's op, maar kiest het enige resultaat met de hoogste betrouwbaarheidscore voor overeenkomsten<\/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;\">Alleen RAWG<\/div>\n <div style=\"color: var(--text-secondary); font-size: 0.82rem; margin-top: 3px;\">Gebruik alleen RAWG - geweldige achtergrondafbeeldingen, goed voor nieuwere titels<\/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;\">Alleen IGDB<\/div>\n <div style=\"color: var(--text-secondary); font-size: 0.82rem; margin-top: 3px;\">Gebruik alleen IGDB - gedetailleerde samenvattingen en verhaallijnen, goed voor retro-titels<\/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\">Selecteer je ROM-map<\/h2>\n <p class=\"upload-subtitle\">Kies een map of bestanden met je ROMs. Alles wordt lokaal verwerkt - niets verlaat je computer.<\/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>ROM map pad<\/span>\n <\/div>\n <span class=\"rom-path-hint\">Vereist voor emulatorintegratie en nauwkeurige bestandspaden<\/span>\n <\/div>\n \n <div class=\"rom-path-description\">\n <p>Voer de <strong>volledig systeempad<\/strong> naar je ROM-map. Dit zorgt ervoor dat ge\u00ebxporteerde catalogi volledige paden bevatten die je emulator direct kan gebruiken.<\/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=\"bijv. D:^EmulationROMs of \/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 Pad opslaan\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 Voorbeeld van mapstructuren:\n <\/div>\n <div class=\"example-grid\">\n <div class=\"example-item\">\n <code>D: Spelletjes<\/code>\n <span class=\"example-subfolders\">nes. n64. gba.<\/span>\n <\/div>\n <div class=\"example-item\">\n <code>\/home\/gebruiker\/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 Bladeren naar map\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 Selecteer enkele 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% Lokale verwerking - Uw bestanden verlaten nooit uw computer<\/strong>\n <p style=\"margin: 4px 0 0 0; font-size: 0.85em; opacity: 0.8;\">\n Je browser kan waarschuwen dat bestanden worden \u201cge\u00fcpload\u201d - dit is een standaard browserformulering.\n Uw bestanden worden verwerkt <em>volledig in uw browser<\/em> en zijn <strong>nooit naar een server verzonden<\/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 Scannen en vergelijkende spelletjes...\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\">Voorbereiden...<\/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\">Gevonden bestanden<\/div>\n <\/div>\n <div class=\"stat-card\">\n <div class=\"stat-value\" id=\"statProcessed\">0<\/div>\n <div class=\"stat-label\">Verwerkt<\/div>\n <\/div>\n <div class=\"stat-card\">\n <div class=\"stat-value\" id=\"statMatched\">0<\/div>\n <div class=\"stat-label\">Bijpassend<\/div>\n <\/div>\n <div class=\"stat-card\">\n <div class=\"stat-value\" id=\"statUnmatched\">0<\/div>\n <div class=\"stat-label\">Onge\u00ebvenaard<\/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\">Je georganiseerde bibliotheek<\/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;\">Aanbevolen<\/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 Catalogus Rec0m88\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);\">De spelmanager voor Rec0m88 emulator.<\/strong> Blader direct door je games met doosillustraties, beschrijvingen en lanceringen.\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 EmulatieStation\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);\">XML-indeling voor RetroArch, Batocera, RetroPie,<\/strong> en andere op EmulationStation gebaseerde frontends.\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 Bibliotheek 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);\">Voor Rec0m88 emulator & viewer.<\/strong> Het gegevensbestand dat library-viewer.html laadt.\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 (legacy)\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);\">Ruwe gegevens voor ontwikkelaars.<\/strong> Plat formaat voor aangepaste tools of spreadsheetimport.\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 CSV-spreadsheet\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);\">Opent in Excel of Google Sheets.<\/strong> Geweldig om je verzameling als een sorteerbare lijst te bekijken.\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 Download doos art\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 Nieuwe scan\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 Alle spellen <span class=\"count\" id=\"countAll\">0<\/span>\n <\/button>\n <button type=\"button\" class=\"filter-tab\" data-filter=\"matched\">\n \u2713 Gematcht <span class=\"count\" id=\"countMatched\">0<\/span>\n <\/button>\n <button type=\"button\" class=\"filter-tab\" data-filter=\"unmatched\">\n Onge\u00ebvenaard <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=\"Zoek in je bibliotheek...\" \/>\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;\">Rec0m88 JSON-bestanden samenvoegen<\/div>\n <div class=\"section-subtitle\">Combineer meerdere ge\u00ebxporteerde catalogusbestanden in \u00e9\u00e9n collectie<\/div>\n <\/div>\n <\/div>\n <p style=\"color: var(--text-secondary); margin-bottom: 20px; font-size: 0.95rem; line-height: 1.6;\">\n Heb je meerdere Rec0m88-catalogusexports van verschillende scansessies? Selecteer ze allemaal en voeg ze samen in \u00e9\u00e9n georganiseerd bestand met automatische detectie van duplicaten.\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 Catalogi selecteren en samenvoegen\n <\/button>\n <span style=\"color: var(--text-muted); font-size: 0.85rem;\">Geen API-sleutel nodig - werkt met alle ge\u00ebxporteerde HTML-bestanden<\/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\">Details van het spel<\/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\">HTML-catalogi samenvoegen<\/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;\">Meerdere catalogi combineren<\/h3>\n <p style=\"color: var(--text-secondary); max-width: 450px; margin: 0 auto 25px; font-size: 0.95rem; line-height: 1.6;\">\n Selecteer al je ge\u00ebxporteerde JSON catalogusbestanden. Duplicaten worden automatisch gedetecteerd en verwijderd.\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 Selecteer Recom88 JSON-bestanden\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;\">Geladen bestanden<\/h4>\n <button type=\"button\" class=\"btn btn-secondary\" id=\"addMoreFilesBtn\" style=\"padding: 8px 16px; font-size: 0.85rem;\">\n + Meer bestanden toevoegen\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\">Bestanden<\/div>\n <\/div>\n <div class=\"stat-card\">\n <div class=\"stat-value\" id=\"mergeStatTotal\">0<\/div>\n <div class=\"stat-label\">Totaal Spellen<\/div>\n <\/div>\n <div class=\"stat-card\">\n <div class=\"stat-value\" id=\"mergeStatUnique\">0<\/div>\n <div class=\"stat-label\">Uniek<\/div>\n <\/div>\n <div class=\"stat-card\">\n <div class=\"stat-value\" id=\"mergeStatDupes\">0<\/div>\n <div class=\"stat-label\">Duplicaten<\/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;\">Afhandeling van duplicaten<\/h4>\n <p style=\"color: var(--text-secondary); font-size: 0.85rem; margin-bottom: 15px;\">Wanneer hetzelfde spel in meerdere bestanden voorkomt:<\/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);\"> Bewaar degene met de beste metadata (meer info, doosillustraties)\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);\"> Blijf bij het eerst geladen bestand\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);\"> Alles bewaren (geen deduplicatie)\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> Samenvoegen...<\/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 Gecombineerde catalogus samenvoegen en downloaden\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 & ROM Metadata Scraper | NES, SNES, Genesis, N64 ROMs & More| rec0m88.com Rec0m88 Game Library Organizer & ROM Metadata Scraper Identify your ROMs, fetch box art, descriptions, and ratings from IGDB & RAWG \u2014 then download everything as organized files ready for Rec0m88 and other emulator frontends. 100% local and…<\/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\/nl\/wp-json\/wp\/v2\/pages\/8332","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rec0m88.com\/nl\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/rec0m88.com\/nl\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/rec0m88.com\/nl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rec0m88.com\/nl\/wp-json\/wp\/v2\/comments?post=8332"}],"version-history":[{"count":5,"href":"https:\/\/rec0m88.com\/nl\/wp-json\/wp\/v2\/pages\/8332\/revisions"}],"predecessor-version":[{"id":8360,"href":"https:\/\/rec0m88.com\/nl\/wp-json\/wp\/v2\/pages\/8332\/revisions\/8360"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rec0m88.com\/nl\/wp-json\/wp\/v2\/media\/245"}],"wp:attachment":[{"href":"https:\/\/rec0m88.com\/nl\/wp-json\/wp\/v2\/media?parent=8332"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}