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 \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 \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 \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 \n <header class=\"tool-header\">\n <h1>Rec0m88 Spielebibliothek-Organisator & ROM-Metadaten-Scraper<h1>\n <p class=\"subtitle\">Identifizieren Sie Ihre ROMs, holen Sie sich Box Art, Beschreibungen und Bewertungen von IGDB & RAWG - und laden Sie dann alles als organisierte Dateien herunter, bereit f\u00fcr Rec0m88 und andere Emulator-Frontends. 100% lokal und privat.<\/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\">Spielhalle<\/span>\n <\/div>\n <\/header>\n\n \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\">Spiel-Datenbanken verbinden<\/div>\n <div class=\"section-subtitle\">W\u00e4hlen Sie eine oder beide APIs f\u00fcr die besten \u00dcbereinstimmungsergebnisse<\/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 \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 Datenbank f\u00fcr Videospiele<\/h3>\n <span>500.000+ Spiele - 20.000 kostenlose Anfragen\/Monat<\/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 Wie Sie Ihren kostenlosen RAWG-API-Schl\u00fcssel erhalten\n <\/div>\n <ol>\n <li>Gehe zu <a href=\"https:\/\/rawg.io\/apidocs\" target=\"_blank\" rel=\"noopener\">rawg.io\/apidocs<\/a><\/li>\n <li>Klicken Sie auf die <strong>\u201cAPI-Schl\u00fcssel abrufen\u201d<\/strong> Taste<\/li>\n <li>Erstellen Sie ein Konto oder melden Sie sich bei Google\/GitHub an<\/li>\n <li>Ihr API-Schl\u00fcssel wird auf der Seite angezeigt<\/li>\n <li>Kopieren Sie den Schl\u00fcssel und f\u00fcgen Sie ihn unten ein<\/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>Profi-Tipp:<\/strong> Mit der kostenlosen Version erhalten Sie 20.000 Anfragen\/Monat - das reicht aus, um gro\u00dfe Sammlungen zu organisieren!<\/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-Schl\u00fcssel<\/label>\n <input type=\"text\" id=\"rawgKeyInput\" class=\"input-field\" placeholder=\"F\u00fcgen Sie hier Ihren RAWG API-Schl\u00fcssel ein...\" 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\">Validieren Sie<\/span>\n <\/button>\n <\/div>\n <\/div>\n <div id=\"rawgStatus\" class=\"status-message\"><\/div>\n <\/div>\n\n \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-Spiele-Datenbank<\/h3>\n <span>Powered by Twitch - Detaillierte Metadaten - 4 Anfragen\/Sekunde<\/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 Wie Sie Ihre kostenlosen IGDB\/Twitch-Zugangsdaten erhalten\n <\/div>\n <ol>\n <li>Gehe zu <a href=\"https:\/\/dev.twitch.tv\/console\" target=\"_blank\" rel=\"noopener\">dev.twitch.tv\/konsole<\/a><\/li>\n <li>Melden Sie sich mit Ihrem Twitch-Konto an (erstellen Sie bei Bedarf ein kostenloses Konto)<\/li>\n <li>Klicken Sie auf <strong>\u201cRegistrieren Sie Ihre Bewerbung\u201d<\/strong><\/li>\n <li>F\u00fcllen Sie das Formular aus:\n <ul>\n <li><strong>Name:<\/strong> Beliebiger Name (z. B. \u201cMy Game Organizer\u201d)<\/li>\n <li><strong>OAuth Redirect URLs:<\/strong> <code>https:\/\/localhost<\/code><\/li>\n <li><strong>Kategorie:<\/strong> W\u00e4hlen Sie \u201cAnwendungsintegration\u201d.\u201d<\/li>\n <\/ul>\n <\/li>\n <li>Klicken Sie auf <strong>\u201cErstellen\u201d<\/strong><\/li>\n <li>Klicken Sie auf <strong>\u201cVerwalten\u201d<\/strong> zu Ihrer neuen Bewerbung<\/li>\n <li>Kopieren Sie Ihr <strong>Kunden-ID<\/strong><\/li>\n <li>Klicken Sie auf <strong>\u201cNeues Geheimnis\u201d<\/strong> und kopieren Sie das erzeugte Geheimnis<\/li>\n <li>F\u00fcgen Sie beide Werte unten ein und klicken Sie auf <strong>Validieren Sie<\/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 Token Verfall & Auffrischung\n <\/div>\n <p style=\"color: var(--text-secondary); font-size: 0.88rem; line-height: 1.7; margin-bottom: 12px;\">\n Ihr Zugangstoken ist g\u00fcltig f\u00fcr ca. <strong style=\"color: var(--text-primary);\">60 Tage<\/strong>. Wenn sie abl\u00e4uft, werden beim Scannen Verbindungsfehler angezeigt.\n <\/p>\n <p style=\"color: var(--text-secondary); font-size: 0.88rem; line-height: 1.7; font-weight: 600; margin-bottom: 10px;\">\n Zum Auffrischen Ihres Tokens:\n <\/p>\n <ol style=\"margin-left: 20px; color: var(--text-secondary); font-size: 0.88rem; line-height: 1.8;\">\n <li>Ihr <strong style=\"color: var(--text-primary);\">Kunden-ID<\/strong> und <strong style=\"color: var(--text-primary);\">Geheimnis des Kunden<\/strong> laufen nie ab - Sie brauchen keine neuen<\/li>\n <li>Klicken Sie einfach auf die <strong style=\"color: var(--neon-purple);\">Validieren Sie<\/strong> erneut klicken - es wird automatisch ein neues Token erzeugt<\/li>\n <li>Das war's! Der neue Token ist gespeichert und einsatzbereit<\/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>Wenn Sie jemals auf <strong>\u201cNeues Geheimnis\u201d<\/strong> auf der Twitch-Konsole eingeben, wird Ihr altes Geheimnis dauerhaft ung\u00fcltig. Sie m\u00fcssen das neue Geheimnis hier einf\u00fcgen und erneut validieren. Tun Sie dies nur, wenn Ihr Geheimnis gef\u00e4hrdet ist.<\/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>Profi-Tipp:<\/strong> IGDB hat ausgezeichnete Daten f\u00fcr neuere Spiele und enth\u00e4lt detaillierte Geschichten, Screenshots und Videos!<\/span>\n <\/div>\n <\/div>\n\n <div class=\"input-group\">\n <div class=\"input-wrapper\">\n <label for=\"igdbClientId\">Twitch-Kunden-ID<\/label>\n <input type=\"text\" id=\"igdbClientId\" class=\"input-field\" placeholder=\"Ihre Kunden-ID...\" autocomplete=\"off\" \/>\n <\/div>\n <div class=\"input-wrapper\">\n <label for=\"igdbClientSecret\">Twitch Client Geheimnis<\/label>\n <input type=\"password\" id=\"igdbClientSecret\" class=\"input-field\" placeholder=\"Ihr Kundengeheimnis...\" 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\">Validieren Sie<\/span>\n <\/button>\n <\/div>\n <\/div>\n <div id=\"igdbStatus\" class=\"status-message\"><\/div>\n <\/div>\n\n \n <div class=\"enabled-apis\" id=\"enabledApis\">\n <span class=\"enabled-apis-label\">Aktive APIs:<\/span>\n <div id=\"enabledApisList\"><\/div>\n <\/div>\n\n \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;\">Sowohl RAWG als auch IGDB sind miteinander verbunden. W\u00e4hlen Sie, wie Sie sie verwenden m\u00f6chten:<\/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;\">Daten zusammenf\u00fchren <span style=\"color: var(--success); font-size: 0.8rem; font-weight: 500;\">(Empfohlen)<\/span><\/div>\n <div style=\"color: var(--text-secondary); font-size: 0.82rem; margin-top: 3px;\">Fragt beide APIs ab und kombiniert die besten Daten aus beiden - bestes Bild, l\u00e4ngste Beschreibung, alle Genres zusammengef\u00fchrt, h\u00f6chste Bewertung<\/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;\">Bestes Spiel<\/div>\n <div style=\"color: var(--text-secondary); font-size: 0.82rem; margin-top: 3px;\">Fragt beide APIs ab, w\u00e4hlt aber das einzige Ergebnis mit der h\u00f6chsten Konfidenzrate aus<\/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;\">Nur RAWG<\/div>\n <div style=\"color: var(--text-secondary); font-size: 0.82rem; margin-top: 3px;\">Nur RAWG verwenden - tolle Hintergrundbilder, gut f\u00fcr neuere Titel<\/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;\">Nur IGDB<\/div>\n <div style=\"color: var(--text-secondary); font-size: 0.82rem; margin-top: 3px;\">Verwenden Sie nur IGDB - detaillierte Zusammenfassungen und Handlungsstr\u00e4nge, gut f\u00fcr Retro-Titel<\/div>\n <\/div>\n <\/label>\n <\/div>\n <\/div>\n <\/section>\n\n \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\">W\u00e4hlen Sie Ihren ROM-Ordner<\/h2>\n <p class=\"upload-subtitle\">W\u00e4hlen Sie einen Ordner oder Dateien mit Ihren Spiel-ROMs. Alles wird lokal verarbeitet - nichts verl\u00e4sst Ihren Computer.<\/p>\n \n \n \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-Ordnerpfad<\/span>\n <\/div>\n <span class=\"rom-path-hint\">Erforderlich f\u00fcr die Integration des Emulators und genaue Dateipfade<\/span>\n <\/div>\n \n <div class=\"rom-path-description\">\n <p>Geben Sie die <strong>vollst\u00e4ndiger Systempfad<\/strong> in Ihren ROM-Ordner. Dadurch wird sichergestellt, dass exportierte Kataloge vollst\u00e4ndige Pfade enthalten, die Ihr Emulator direkt verwenden kann.<\/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=\"z.B., D:\\Emulation\\ROMs oder \/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 Pfad speichern\n <\/button>\n <\/div>\n \n <div id=\"romPathStatus\" class=\"rom-path-status\"><\/div>\n \n \n <div id=\"folderStructureInfo\" class=\"folder-structure-info\" style=\"display: none;\"><\/div>\n \n \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 Beispielhafte Ordnerstrukturen:\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\/benutzer\/roms\/<\/code>\n <span class=\"example-subfolders\">nes\/ snes\/ psx\/<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \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 Nach Ordner suchen\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 Einzelne ROM ausw\u00e4hlen\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 Verarbeitung - Ihre Dateien verlassen nie Ihren Computer<\/strong>\n <p style=\"margin: 4px 0 0 0; font-size: 0.85em; opacity: 0.8;\">\n Ihr Browser warnt Sie m\u00f6glicherweise, dass die Dateien \u201chochgeladen\u201d werden - dies ist eine Standardformulierung Ihres Browsers.\n Ihre Dateien werden verarbeitet <em>vollst\u00e4ndig in Ihrem Browser<\/em> und sind <strong>nie an einen Server gesendet<\/strong>.\n <\/p>\n <\/div>\n<\/div>\n <\/div>\n <\/section>\n\n \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 & Zuordnungsspiele...\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\">Die Vorbereitung...<\/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\">Gefundene Dateien<\/div>\n <\/div>\n <div class=\"stat-card\">\n <div class=\"stat-value\" id=\"statProcessed\">0<\/div>\n <div class=\"stat-label\">Verarbeitet<\/div>\n <\/div>\n <div class=\"stat-card\">\n <div class=\"stat-value\" id=\"statMatched\">0<\/div>\n <div class=\"stat-label\">Abgestimmt<\/div>\n <\/div>\n <div class=\"stat-card\">\n <div class=\"stat-value\" id=\"statUnmatched\">0<\/div>\n <div class=\"stat-label\">Un\u00fcbertroffen<\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \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\">Ihre organisierte Bibliothek<\/h2>\n <\/div>\n \n \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 \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;\">Empfohlen<\/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);\">Der Spielemanager f\u00fcr den Rec0m88-Emulator.<\/strong> Durchsuchen Sie Ihre Spiele mit Schachtelbildern, Beschreibungen und direktem Start.\n <\/p>\n <\/div>\n \n \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);\">XML-Format f\u00fcr RetroArch, Batocera, RetroPie,<\/strong> und andere EmulationStation-basierte Frontends.\n <\/p>\n <\/div>\n \n \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 Bibliothek 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);\">F\u00fcr Rec0m88 Emulator & Viewer.<\/strong> Die Datendatei, die library-viewer.html l\u00e4dt.\n <\/p>\n <\/div>\n\n \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 (Altbestand)\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);\">Rohdaten f\u00fcr Entwickler.<\/strong> Flaches Format f\u00fcr benutzerdefinierte Tools oder Tabellenkalkulationsimport.\n <\/p>\n <\/div>\n \n \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-Kalkulationstabelle\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);\">Wird in Excel oder Google Sheets ge\u00f6ffnet.<\/strong> Hervorragend geeignet, um Ihre Sammlung in Form einer sortierbaren Liste anzuzeigen.\n <\/p>\n <\/div>\n <\/div>\n \n \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 Box Art herunterladen\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 Neuer 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 Spiele <span class=\"count\" id=\"countAll\">0<\/span>\n <\/button>\n <button type=\"button\" class=\"filter-tab\" data-filter=\"matched\">\n \u2713 Abgestimmt <span class=\"count\" id=\"countMatched\">0<\/span>\n <\/button>\n <button type=\"button\" class=\"filter-tab\" data-filter=\"unmatched\">\n \u2717 Unerreicht <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=\"Durchsuchen Sie Ihre Bibliothek...\" \/>\n <\/div>\n <\/div>\n\n <div class=\"games-grid\" id=\"gamesGrid\"><\/div>\n<\/section>\n\n\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;\">Zusammenf\u00fchren von Rec0m88 JSON-Dateien<\/div>\n <div class=\"section-subtitle\">Kombinieren Sie mehrere exportierte Katalogdateien zu einer einheitlichen Sammlung<\/div>\n <\/div>\n <\/div>\n <p style=\"color: var(--text-secondary); margin-bottom: 20px; font-size: 0.95rem; line-height: 1.6;\">\n Sie haben mehrere Rec0m88-Katalogexporte aus verschiedenen Scansitzungen? W\u00e4hlen Sie sie alle aus und f\u00fchren Sie sie in einer einzigen organisierten Datei mit automatischer Erkennung von Duplikaten zusammen.\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 Kataloge ausw\u00e4hlen und zusammenf\u00fchren\n <\/button>\n <span style=\"color: var(--text-muted); font-size: 0.85rem;\">Kein API-Schl\u00fcssel erforderlich - funktioniert mit allen exportierten HTML-Dateien<\/span>\n <\/div>\n <input type=\"file\" id=\"mergeFilesInput\" class=\"file-input-hidden\" multiple accept=\".json\" \/>\n<\/section>\n<\/div>\n\n\n<div class=\"toast-container\" id=\"toastContainer\"><\/div>\n\n\n<div class=\"modal-overlay\" id=\"gameModal\">\n <div class=\"modal\">\n <div class=\"modal-header\">\n <h3 id=\"modalTitle\">Details zum Spiel<\/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\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-Kataloge zusammenf\u00fchren<\/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;\">Kombinieren Sie mehrere Kataloge<\/h3>\n <p style=\"color: var(--text-secondary); max-width: 450px; margin: 0 auto 25px; font-size: 0.95rem; line-height: 1.6;\">\n W\u00e4hlen Sie alle Ihre exportierten JSON-Katalogdateien aus. Duplikate werden automatisch erkannt und entfernt.\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 W\u00e4hlen Sie Recom88 JSON-Dateien\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;\">Geladene Dateien<\/h4>\n <button type=\"button\" class=\"btn btn-secondary\" id=\"addMoreFilesBtn\" style=\"padding: 8px 16px; font-size: 0.85rem;\">\n + Weitere Dateien hinzuf\u00fcgen\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\">Dateien<\/div>\n <\/div>\n <div class=\"stat-card\">\n <div class=\"stat-value\" id=\"mergeStatTotal\">0<\/div>\n <div class=\"stat-label\">Spiele insgesamt<\/div>\n <\/div>\n <div class=\"stat-card\">\n <div class=\"stat-value\" id=\"mergeStatUnique\">0<\/div>\n <div class=\"stat-label\">Einzigartig<\/div>\n <\/div>\n <div class=\"stat-card\">\n <div class=\"stat-value\" id=\"mergeStatDupes\">0<\/div>\n <div class=\"stat-label\">Duplikate<\/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;\">Handhabung von Duplikaten<\/h4>\n <p style=\"color: var(--text-secondary); font-size: 0.85rem; margin-bottom: 15px;\">Wenn ein und dasselbe Spiel in mehreren Dateien erscheint:<\/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);\"> Behalten Sie die mit den besten Metadaten (mehr Infos, Box Art)\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);\"> Behalten von der fr\u00fchesten geladenen Datei\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 behalten (keine Deduplizierung)\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> Verschmelzung...<\/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 Kombinierten Katalog zusammenf\u00fchren und herunterladen\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\/de\/wp-json\/wp\/v2\/pages\/8332","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rec0m88.com\/de\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/rec0m88.com\/de\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/rec0m88.com\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rec0m88.com\/de\/wp-json\/wp\/v2\/comments?post=8332"}],"version-history":[{"count":5,"href":"https:\/\/rec0m88.com\/de\/wp-json\/wp\/v2\/pages\/8332\/revisions"}],"predecessor-version":[{"id":8360,"href":"https:\/\/rec0m88.com\/de\/wp-json\/wp\/v2\/pages\/8332\/revisions\/8360"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rec0m88.com\/de\/wp-json\/wp\/v2\/media\/245"}],"wp:attachment":[{"href":"https:\/\/rec0m88.com\/de\/wp-json\/wp\/v2\/media?parent=8332"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"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\/de\/game-library-organizer\/","title":{"rendered":"Spielebibliothek Organizer"},"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 \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 \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 \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 \n <header class=\"tool-header\">\n <h1>Rec0m88 Spielebibliothek-Organisator & ROM-Metadaten-Scraper<h1>\n <p class=\"subtitle\">Identifizieren Sie Ihre ROMs, holen Sie sich Box Art, Beschreibungen und Bewertungen von IGDB & RAWG - und laden Sie dann alles als organisierte Dateien herunter, bereit f\u00fcr Rec0m88 und andere Emulator-Frontends. 100% lokal und privat.<\/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\">Spielhalle<\/span>\n <\/div>\n <\/header>\n\n \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\">Spiel-Datenbanken verbinden<\/div>\n <div class=\"section-subtitle\">W\u00e4hlen Sie eine oder beide APIs f\u00fcr die besten \u00dcbereinstimmungsergebnisse<\/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 \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 Datenbank f\u00fcr Videospiele<\/h3>\n <span>500.000+ Spiele - 20.000 kostenlose Anfragen\/Monat<\/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 Wie Sie Ihren kostenlosen RAWG-API-Schl\u00fcssel erhalten\n <\/div>\n <ol>\n <li>Gehe zu <a href=\"https:\/\/rawg.io\/apidocs\" target=\"_blank\" rel=\"noopener\">rawg.io\/apidocs<\/a><\/li>\n <li>Klicken Sie auf die <strong>\u201cAPI-Schl\u00fcssel abrufen\u201d<\/strong> Taste<\/li>\n <li>Erstellen Sie ein Konto oder melden Sie sich bei Google\/GitHub an<\/li>\n <li>Ihr API-Schl\u00fcssel wird auf der Seite angezeigt<\/li>\n <li>Kopieren Sie den Schl\u00fcssel und f\u00fcgen Sie ihn unten ein<\/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>Profi-Tipp:<\/strong> Mit der kostenlosen Version erhalten Sie 20.000 Anfragen\/Monat - das reicht aus, um gro\u00dfe Sammlungen zu organisieren!<\/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-Schl\u00fcssel<\/label>\n <input type=\"text\" id=\"rawgKeyInput\" class=\"input-field\" placeholder=\"F\u00fcgen Sie hier Ihren RAWG API-Schl\u00fcssel ein...\" 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\">Validieren Sie<\/span>\n <\/button>\n <\/div>\n <\/div>\n <div id=\"rawgStatus\" class=\"status-message\"><\/div>\n <\/div>\n\n \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-Spiele-Datenbank<\/h3>\n <span>Powered by Twitch - Detaillierte Metadaten - 4 Anfragen\/Sekunde<\/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 Wie Sie Ihre kostenlosen IGDB\/Twitch-Zugangsdaten erhalten\n <\/div>\n <ol>\n <li>Gehe zu <a href=\"https:\/\/dev.twitch.tv\/console\" target=\"_blank\" rel=\"noopener\">dev.twitch.tv\/konsole<\/a><\/li>\n <li>Melden Sie sich mit Ihrem Twitch-Konto an (erstellen Sie bei Bedarf ein kostenloses Konto)<\/li>\n <li>Klicken Sie auf <strong>\u201cRegistrieren Sie Ihre Bewerbung\u201d<\/strong><\/li>\n <li>F\u00fcllen Sie das Formular aus:\n <ul>\n <li><strong>Name:<\/strong> Beliebiger Name (z. B. \u201cMy Game Organizer\u201d)<\/li>\n <li><strong>OAuth Redirect URLs:<\/strong> <code>https:\/\/localhost<\/code><\/li>\n <li><strong>Kategorie:<\/strong> W\u00e4hlen Sie \u201cAnwendungsintegration\u201d.\u201d<\/li>\n <\/ul>\n <\/li>\n <li>Klicken Sie auf <strong>\u201cErstellen\u201d<\/strong><\/li>\n <li>Klicken Sie auf <strong>\u201cVerwalten\u201d<\/strong> zu Ihrer neuen Bewerbung<\/li>\n <li>Kopieren Sie Ihr <strong>Kunden-ID<\/strong><\/li>\n <li>Klicken Sie auf <strong>\u201cNeues Geheimnis\u201d<\/strong> und kopieren Sie das erzeugte Geheimnis<\/li>\n <li>F\u00fcgen Sie beide Werte unten ein und klicken Sie auf <strong>Validieren Sie<\/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 Token Verfall & Auffrischung\n <\/div>\n <p style=\"color: var(--text-secondary); font-size: 0.88rem; line-height: 1.7; margin-bottom: 12px;\">\n Ihr Zugangstoken ist g\u00fcltig f\u00fcr ca. <strong style=\"color: var(--text-primary);\">60 Tage<\/strong>. Wenn sie abl\u00e4uft, werden beim Scannen Verbindungsfehler angezeigt.\n <\/p>\n <p style=\"color: var(--text-secondary); font-size: 0.88rem; line-height: 1.7; font-weight: 600; margin-bottom: 10px;\">\n Zum Auffrischen Ihres Tokens:\n <\/p>\n <ol style=\"margin-left: 20px; color: var(--text-secondary); font-size: 0.88rem; line-height: 1.8;\">\n <li>Ihr <strong style=\"color: var(--text-primary);\">Kunden-ID<\/strong> und <strong style=\"color: var(--text-primary);\">Geheimnis des Kunden<\/strong> laufen nie ab - Sie brauchen keine neuen<\/li>\n <li>Klicken Sie einfach auf die <strong style=\"color: var(--neon-purple);\">Validieren Sie<\/strong> erneut klicken - es wird automatisch ein neues Token erzeugt<\/li>\n <li>Das war's! Der neue Token ist gespeichert und einsatzbereit<\/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>Wenn Sie jemals auf <strong>\u201cNeues Geheimnis\u201d<\/strong> auf der Twitch-Konsole eingeben, wird Ihr altes Geheimnis dauerhaft ung\u00fcltig. Sie m\u00fcssen das neue Geheimnis hier einf\u00fcgen und erneut validieren. Tun Sie dies nur, wenn Ihr Geheimnis gef\u00e4hrdet ist.<\/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>Profi-Tipp:<\/strong> IGDB hat ausgezeichnete Daten f\u00fcr neuere Spiele und enth\u00e4lt detaillierte Geschichten, Screenshots und Videos!<\/span>\n <\/div>\n <\/div>\n\n <div class=\"input-group\">\n <div class=\"input-wrapper\">\n <label for=\"igdbClientId\">Twitch-Kunden-ID<\/label>\n <input type=\"text\" id=\"igdbClientId\" class=\"input-field\" placeholder=\"Ihre Kunden-ID...\" autocomplete=\"off\" \/>\n <\/div>\n <div class=\"input-wrapper\">\n <label for=\"igdbClientSecret\">Twitch Client Geheimnis<\/label>\n <input type=\"password\" id=\"igdbClientSecret\" class=\"input-field\" placeholder=\"Ihr Kundengeheimnis...\" 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\">Validieren Sie<\/span>\n <\/button>\n <\/div>\n <\/div>\n <div id=\"igdbStatus\" class=\"status-message\"><\/div>\n <\/div>\n\n \n <div class=\"enabled-apis\" id=\"enabledApis\">\n <span class=\"enabled-apis-label\">Aktive APIs:<\/span>\n <div id=\"enabledApisList\"><\/div>\n <\/div>\n\n \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;\">Sowohl RAWG als auch IGDB sind miteinander verbunden. W\u00e4hlen Sie, wie Sie sie verwenden m\u00f6chten:<\/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;\">Daten zusammenf\u00fchren <span style=\"color: var(--success); font-size: 0.8rem; font-weight: 500;\">(Empfohlen)<\/span><\/div>\n <div style=\"color: var(--text-secondary); font-size: 0.82rem; margin-top: 3px;\">Fragt beide APIs ab und kombiniert die besten Daten aus beiden - bestes Bild, l\u00e4ngste Beschreibung, alle Genres zusammengef\u00fchrt, h\u00f6chste Bewertung<\/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;\">Bestes Spiel<\/div>\n <div style=\"color: var(--text-secondary); font-size: 0.82rem; margin-top: 3px;\">Fragt beide APIs ab, w\u00e4hlt aber das einzige Ergebnis mit der h\u00f6chsten Konfidenzrate aus<\/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;\">Nur RAWG<\/div>\n <div style=\"color: var(--text-secondary); font-size: 0.82rem; margin-top: 3px;\">Nur RAWG verwenden - tolle Hintergrundbilder, gut f\u00fcr neuere Titel<\/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;\">Nur IGDB<\/div>\n <div style=\"color: var(--text-secondary); font-size: 0.82rem; margin-top: 3px;\">Verwenden Sie nur IGDB - detaillierte Zusammenfassungen und Handlungsstr\u00e4nge, gut f\u00fcr Retro-Titel<\/div>\n <\/div>\n <\/label>\n <\/div>\n <\/div>\n <\/section>\n\n \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\">W\u00e4hlen Sie Ihren ROM-Ordner<\/h2>\n <p class=\"upload-subtitle\">W\u00e4hlen Sie einen Ordner oder Dateien mit Ihren Spiel-ROMs. Alles wird lokal verarbeitet - nichts verl\u00e4sst Ihren Computer.<\/p>\n \n \n \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-Ordnerpfad<\/span>\n <\/div>\n <span class=\"rom-path-hint\">Erforderlich f\u00fcr die Integration des Emulators und genaue Dateipfade<\/span>\n <\/div>\n \n <div class=\"rom-path-description\">\n <p>Geben Sie die <strong>vollst\u00e4ndiger Systempfad<\/strong> in Ihren ROM-Ordner. Dadurch wird sichergestellt, dass exportierte Kataloge vollst\u00e4ndige Pfade enthalten, die Ihr Emulator direkt verwenden kann.<\/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=\"z.B., D:\\Emulation\\ROMs oder \/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 Pfad speichern\n <\/button>\n <\/div>\n \n <div id=\"romPathStatus\" class=\"rom-path-status\"><\/div>\n \n \n <div id=\"folderStructureInfo\" class=\"folder-structure-info\" style=\"display: none;\"><\/div>\n \n \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 Beispielhafte Ordnerstrukturen:\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\/benutzer\/roms\/<\/code>\n <span class=\"example-subfolders\">nes\/ snes\/ psx\/<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \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 Nach Ordner suchen\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 Einzelne ROM ausw\u00e4hlen\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 Verarbeitung - Ihre Dateien verlassen nie Ihren Computer<\/strong>\n <p style=\"margin: 4px 0 0 0; font-size: 0.85em; opacity: 0.8;\">\n Ihr Browser warnt Sie m\u00f6glicherweise, dass die Dateien \u201chochgeladen\u201d werden - dies ist eine Standardformulierung Ihres Browsers.\n Ihre Dateien werden verarbeitet <em>vollst\u00e4ndig in Ihrem Browser<\/em> und sind <strong>nie an einen Server gesendet<\/strong>.\n <\/p>\n <\/div>\n<\/div>\n <\/div>\n <\/section>\n\n \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 & Zuordnungsspiele...\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\">Die Vorbereitung...<\/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\">Gefundene Dateien<\/div>\n <\/div>\n <div class=\"stat-card\">\n <div class=\"stat-value\" id=\"statProcessed\">0<\/div>\n <div class=\"stat-label\">Verarbeitet<\/div>\n <\/div>\n <div class=\"stat-card\">\n <div class=\"stat-value\" id=\"statMatched\">0<\/div>\n <div class=\"stat-label\">Abgestimmt<\/div>\n <\/div>\n <div class=\"stat-card\">\n <div class=\"stat-value\" id=\"statUnmatched\">0<\/div>\n <div class=\"stat-label\">Un\u00fcbertroffen<\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \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\">Ihre organisierte Bibliothek<\/h2>\n <\/div>\n \n \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 \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;\">Empfohlen<\/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);\">Der Spielemanager f\u00fcr den Rec0m88-Emulator.<\/strong> Durchsuchen Sie Ihre Spiele mit Schachtelbildern, Beschreibungen und direktem Start.\n <\/p>\n <\/div>\n \n \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);\">XML-Format f\u00fcr RetroArch, Batocera, RetroPie,<\/strong> und andere EmulationStation-basierte Frontends.\n <\/p>\n <\/div>\n \n \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 Bibliothek 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);\">F\u00fcr Rec0m88 Emulator & Viewer.<\/strong> Die Datendatei, die library-viewer.html l\u00e4dt.\n <\/p>\n <\/div>\n\n \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 (Altbestand)\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);\">Rohdaten f\u00fcr Entwickler.<\/strong> Flaches Format f\u00fcr benutzerdefinierte Tools oder Tabellenkalkulationsimport.\n <\/p>\n <\/div>\n \n \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-Kalkulationstabelle\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);\">Wird in Excel oder Google Sheets ge\u00f6ffnet.<\/strong> Hervorragend geeignet, um Ihre Sammlung in Form einer sortierbaren Liste anzuzeigen.\n <\/p>\n <\/div>\n <\/div>\n \n \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 Box Art herunterladen\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 Neuer 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 Spiele <span class=\"count\" id=\"countAll\">0<\/span>\n <\/button>\n <button type=\"button\" class=\"filter-tab\" data-filter=\"matched\">\n \u2713 Abgestimmt <span class=\"count\" id=\"countMatched\">0<\/span>\n <\/button>\n <button type=\"button\" class=\"filter-tab\" data-filter=\"unmatched\">\n \u2717 Unerreicht <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=\"Durchsuchen Sie Ihre Bibliothek...\" \/>\n <\/div>\n <\/div>\n\n <div class=\"games-grid\" id=\"gamesGrid\"><\/div>\n<\/section>\n\n\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;\">Zusammenf\u00fchren von Rec0m88 JSON-Dateien<\/div>\n <div class=\"section-subtitle\">Kombinieren Sie mehrere exportierte Katalogdateien zu einer einheitlichen Sammlung<\/div>\n <\/div>\n <\/div>\n <p style=\"color: var(--text-secondary); margin-bottom: 20px; font-size: 0.95rem; line-height: 1.6;\">\n Sie haben mehrere Rec0m88-Katalogexporte aus verschiedenen Scansitzungen? W\u00e4hlen Sie sie alle aus und f\u00fchren Sie sie in einer einzigen organisierten Datei mit automatischer Erkennung von Duplikaten zusammen.\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 Kataloge ausw\u00e4hlen und zusammenf\u00fchren\n <\/button>\n <span style=\"color: var(--text-muted); font-size: 0.85rem;\">Kein API-Schl\u00fcssel erforderlich - funktioniert mit allen exportierten HTML-Dateien<\/span>\n <\/div>\n <input type=\"file\" id=\"mergeFilesInput\" class=\"file-input-hidden\" multiple accept=\".json\" \/>\n<\/section>\n<\/div>\n\n\n<div class=\"toast-container\" id=\"toastContainer\"><\/div>\n\n\n<div class=\"modal-overlay\" id=\"gameModal\">\n <div class=\"modal\">\n <div class=\"modal-header\">\n <h3 id=\"modalTitle\">Details zum Spiel<\/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\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-Kataloge zusammenf\u00fchren<\/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;\">Kombinieren Sie mehrere Kataloge<\/h3>\n <p style=\"color: var(--text-secondary); max-width: 450px; margin: 0 auto 25px; font-size: 0.95rem; line-height: 1.6;\">\n W\u00e4hlen Sie alle Ihre exportierten JSON-Katalogdateien aus. Duplikate werden automatisch erkannt und entfernt.\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 W\u00e4hlen Sie Recom88 JSON-Dateien\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;\">Geladene Dateien<\/h4>\n <button type=\"button\" class=\"btn btn-secondary\" id=\"addMoreFilesBtn\" style=\"padding: 8px 16px; font-size: 0.85rem;\">\n + Weitere Dateien hinzuf\u00fcgen\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\">Dateien<\/div>\n <\/div>\n <div class=\"stat-card\">\n <div class=\"stat-value\" id=\"mergeStatTotal\">0<\/div>\n <div class=\"stat-label\">Spiele insgesamt<\/div>\n <\/div>\n <div class=\"stat-card\">\n <div class=\"stat-value\" id=\"mergeStatUnique\">0<\/div>\n <div class=\"stat-label\">Einzigartig<\/div>\n <\/div>\n <div class=\"stat-card\">\n <div class=\"stat-value\" id=\"mergeStatDupes\">0<\/div>\n <div class=\"stat-label\">Duplikate<\/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;\">Handhabung von Duplikaten<\/h4>\n <p style=\"color: var(--text-secondary); font-size: 0.85rem; margin-bottom: 15px;\">Wenn ein und dasselbe Spiel in mehreren Dateien erscheint:<\/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);\"> Behalten Sie die mit den besten Metadaten (mehr Infos, Box Art)\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);\"> Behalten von der fr\u00fchesten geladenen Datei\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 behalten (keine Deduplizierung)\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> Verschmelzung...<\/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 Kombinierten Katalog zusammenf\u00fchren und herunterladen\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\/de\/wp-json\/wp\/v2\/pages\/8332","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rec0m88.com\/de\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/rec0m88.com\/de\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/rec0m88.com\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rec0m88.com\/de\/wp-json\/wp\/v2\/comments?post=8332"}],"version-history":[{"count":5,"href":"https:\/\/rec0m88.com\/de\/wp-json\/wp\/v2\/pages\/8332\/revisions"}],"predecessor-version":[{"id":8360,"href":"https:\/\/rec0m88.com\/de\/wp-json\/wp\/v2\/pages\/8332\/revisions\/8360"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rec0m88.com\/de\/wp-json\/wp\/v2\/media\/245"}],"wp:attachment":[{"href":"https:\/\/rec0m88.com\/de\/wp-json\/wp\/v2\/media?parent=8332"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}