{"id":1492,"date":"2026-10-24T18:05:25","date_gmt":"2026-10-24T18:05:25","guid":{"rendered":"https:\/\/savoieretrogames.fr\/?page_id=1492"},"modified":"2026-10-30T22:36:16","modified_gmt":"2026-10-30T22:36:16","slug":"audio-guide","status":"publish","type":"page","link":"https:\/\/savoieretrogames.fr\/index.php\/audio-guide\/","title":{"rendered":"AUDIO GUIDE"},"content":{"rendered":"<div data-colibri-id=\"1492-c1\" class=\"style-308 style-local-1492-c1 position-relative\">\n  <!---->\n  <div data-colibri-component=\"section\" data-colibri-id=\"1492-c2\" id=\"custom-2\" class=\"h-section h-section-global-spacing d-flex align-items-lg-center align-items-md-center align-items-center style-355 style-local-1492-c2 position-relative\">\n    <!---->\n    <!---->\n    <div class=\"h-section-grid-container h-section-boxed-container\">\n      <!---->\n      <div data-colibri-id=\"1492-c3\" class=\"h-row-container gutters-row-lg-2 gutters-row-md-2 gutters-row-0 gutters-row-v-lg-2 gutters-row-v-md-2 gutters-row-v-2 style-356 style-local-1492-c3 position-relative\">\n        <!---->\n        <div class=\"h-row justify-content-lg-center justify-content-md-center justify-content-center align-items-lg-stretch align-items-md-stretch align-items-stretch gutters-col-lg-2 gutters-col-md-2 gutters-col-0 gutters-col-v-lg-2 gutters-col-v-md-2 gutters-col-v-2\">\n          <!---->\n          <div class=\"h-column h-column-container d-flex h-col-lg-auto h-col-md-auto h-col-auto style-357-outer style-local-1492-c4-outer\">\n            <div data-colibri-id=\"1492-c4\" class=\"d-flex h-flex-basis h-column__inner h-px-lg-2 h-px-md-2 h-px-2 v-inner-lg-2 v-inner-md-2 v-inner-2 style-357 style-local-1492-c4 position-relative\">\n              <!---->\n              <!---->\n              <div class=\"w-100 h-y-container h-column__content h-column__v-align flex-basis-100 align-self-lg-start align-self-md-start align-self-start\">\n                <!---->\n                <div data-colibri-id=\"1492-c5\" class=\"style-358 style-local-1492-c5 position-relative h-element\">\n                  <!---->\n                  <div class=\"\"><div class=\"sgf-audioguide-wrapper\">\r\n    <style>\r\n        @import url('https:\/\/fonts.googleapis.com\/css2?family=Orbitron:wght@500;700;900&family=Plus+Jakarta+Sans:wght@400;600;700&display=swap');\r\n\r\n        :root {\r\n            --bg-deep: #070913;\r\n            --panel-bg: rgba(15, 22, 38, 0.95);\r\n            --border-neon: rgba(124, 92, 255, 0.4);\r\n            --neon-purple: #7c5cff;\r\n            --neon-cyan: #00f0ff;\r\n            --neon-pink: #ff4fa3;\r\n            --text-main: #f8fafc;\r\n            --text-muted: #94a3b8;\r\n        }\r\n\r\n        .sgf-audioguide-wrapper {\r\n            background: radial-gradient(circle at center, #111827 0%, var(--bg-deep) 100%);\r\n            color: var(--text-main);\r\n            font-family: 'Plus Jakarta Sans', sans-serif;\r\n            padding: 20px;\r\n            border-radius: 20px;\r\n            border: 2px solid var(--border-neon);\r\n            box-shadow: 0 0 35px rgba(124, 92, 255, 0.25), inset 0 0 25px rgba(0, 240, 255, 0.05);\r\n            box-sizing: border-box;\r\n            display: flex;\r\n            justify-content: center;\r\n            align-items: center;\r\n            width: 100%;\r\n        }\r\n\r\n        .sgf-audioguide-wrapper * { box-sizing: border-box; }\r\n\r\n        .guide-card {\r\n            background: var(--panel-bg);\r\n            border: 1px solid var(--border-neon);\r\n            border-radius: 16px;\r\n            max-width: 480px;\r\n            width: 100%;\r\n            padding: 30px 24px;\r\n            box-shadow: 0 20px 40px rgba(0,0,0,0.8);\r\n            text-align: center;\r\n            position: relative;\r\n            backdrop-filter: blur(12px);\r\n        }\r\n\r\n        .brand-header {\r\n            font-family: 'Orbitron', sans-serif;\r\n            font-size: 0.8rem;\r\n            letter-spacing: 2px;\r\n            color: var(--neon-cyan);\r\n            text-transform: uppercase;\r\n            margin-bottom: 20px;\r\n            text-shadow: 0 0 10px rgba(0, 240, 255, 0.6);\r\n        }\r\n\r\n        .welcome-icon {\r\n            font-size: 3rem;\r\n            margin-bottom: 12px;\r\n            filter: drop-shadow(0 0 10px rgba(255, 79, 163, 0.5));\r\n        }\r\n\r\n        .welcome-title {\r\n            font-family: 'Orbitron', sans-serif;\r\n            font-size: 1.4rem;\r\n            font-weight: 900;\r\n            color: #fff;\r\n            margin-bottom: 15px;\r\n            text-transform: uppercase;\r\n            letter-spacing: 1px;\r\n        }\r\n        .welcome-title span { color: var(--neon-pink); text-shadow: 0 0 10px rgba(255, 79, 163, 0.4); }\r\n\r\n        .welcome-text {\r\n            font-size: 0.95rem;\r\n            line-height: 1.6;\r\n            color: var(--text-muted);\r\n            background: rgba(7, 9, 19, 0.7);\r\n            padding: 18px;\r\n            border-radius: 12px;\r\n            border: 1px solid rgba(124, 92, 255, 0.2);\r\n            margin-bottom: 25px;\r\n            text-align: center;\r\n            box-shadow: inset 0 2px 6px rgba(0,0,0,0.5);\r\n        }\r\n\r\n        .catalog-title {\r\n            font-family: 'Orbitron', sans-serif;\r\n            font-size: 0.85rem;\r\n            color: var(--neon-cyan);\r\n            text-transform: uppercase;\r\n            margin-bottom: 15px;\r\n            letter-spacing: 1.5px;\r\n            text-align: left;\r\n            border-left: 3px solid var(--neon-pink);\r\n            padding-left: 10px;\r\n            text-shadow: 0 0 5px rgba(0, 240, 255, 0.4);\r\n        }\r\n\r\n        \/* Style des cartes de pi\u00e8ces (fa\u00e7on menu arcade) *\/\r\n        .catalog-list {\r\n            display: flex;\r\n            flex-direction: column;\r\n            gap: 12px;\r\n            max-height: 260px;\r\n            overflow-y: auto;\r\n            padding-right: 6px;\r\n            margin-bottom: 10px;\r\n            text-align: left;\r\n        }\r\n\r\n        .catalog-list::-webkit-scrollbar { width: 5px; }\r\n        .catalog-list::-webkit-scrollbar-thumb { background: var(--neon-purple); border-radius: 10px; box-shadow: 0 0 5px var(--neon-purple); }\r\n\r\n        .catalog-item {\r\n            background: linear-gradient(135deg, rgba(30, 41, 59, 0.85), rgba(15, 23, 42, 0.95));\r\n            border: 1px solid rgba(124, 92, 255, 0.3);\r\n            color: var(--text-main);\r\n            padding: 14px 18px;\r\n            border-radius: 12px;\r\n            text-decoration: none;\r\n            font-size: 0.98rem;\r\n            font-weight: 700;\r\n            display: flex;\r\n            justify-content: space-between;\r\n            align-items: center;\r\n            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);\r\n            box-shadow: 0 4px 15px rgba(0,0,0,0.4);\r\n        }\r\n\r\n        .catalog-item:hover {\r\n            border-color: var(--neon-cyan);\r\n            background: linear-gradient(135deg, rgba(124, 92, 255, 0.25), rgba(0, 240, 255, 0.15));\r\n            color: #fff;\r\n            transform: translateY(-2px);\r\n            box-shadow: 0 0 20px rgba(0, 240, 255, 0.35), inset 0 0 10px rgba(124, 92, 255, 0.2);\r\n        }\r\n\r\n        .item-arrow {\r\n            font-family: 'Orbitron', sans-serif;\r\n            color: var(--neon-cyan);\r\n            font-size: 0.85rem;\r\n            transition: transform 0.2s ease, color 0.2s ease;\r\n        }\r\n\r\n        .catalog-item:hover .item-arrow {\r\n            transform: translateX(5px);\r\n            color: var(--neon-pink);\r\n            text-shadow: 0 0 8px var(--neon-pink);\r\n        }\r\n\r\n        \/* Styles de la fiche objet (quand un ID est cliqu\u00e9) *\/\r\n        .lang-selector {\r\n            display: flex;\r\n            justify-content: center;\r\n            gap: 8px;\r\n            margin-bottom: 20px;\r\n        }\r\n\r\n        .lang-btn {\r\n            background: rgba(255, 255, 255, 0.03);\r\n            border: 1px solid rgba(255, 255, 255, 0.1);\r\n            color: var(--text-muted);\r\n            padding: 6px 14px;\r\n            border-radius: 8px;\r\n            cursor: pointer;\r\n            font-weight: 700;\r\n            font-size: 0.8rem;\r\n            transition: all 0.2s ease;\r\n        }\r\n\r\n        .lang-btn:hover {\r\n            border-color: var(--neon-cyan);\r\n            color: var(--text-main);\r\n        }\r\n\r\n        .lang-btn.active {\r\n            background: linear-gradient(135deg, var(--neon-purple), #5b39ff);\r\n            color: #fff;\r\n            border-color: var(--neon-cyan);\r\n            box-shadow: 0 0 12px rgba(124, 92, 255, 0.6);\r\n        }\r\n\r\n        .back-home-btn {\r\n            background: rgba(255, 255, 255, 0.05);\r\n            border: 1px solid var(--border-neon);\r\n            color: var(--neon-cyan);\r\n            padding: 6px 12px;\r\n            border-radius: 6px;\r\n            font-size: 0.75rem;\r\n            cursor: pointer;\r\n            margin-bottom: 15px;\r\n            display: inline-block;\r\n            text-decoration: none;\r\n            text-transform: uppercase;\r\n            font-family: 'Orbitron', sans-serif;\r\n            transition: all 0.2s;\r\n        }\r\n        .back-home-btn:hover {\r\n            background: var(--neon-cyan);\r\n            color: #000;\r\n            box-shadow: 0 0 10px var(--neon-cyan);\r\n        }\r\n\r\n        .image-container {\r\n            width: 100%;\r\n            height: 200px;\r\n            border-radius: 12px;\r\n            overflow: hidden;\r\n            border: 1px solid rgba(124, 92, 255, 0.3);\r\n            margin-bottom: 14px;\r\n            background: #000;\r\n            position: relative;\r\n            box-shadow: 0 4px 15px rgba(0,0,0,0.5);\r\n        }\r\n\r\n        .product-image {\r\n            width: 100%;\r\n            height: 100%;\r\n            object-fit: cover;\r\n        }\r\n\r\n        .product-title {\r\n            font-family: 'Orbitron', sans-serif;\r\n            font-size: 1.2rem;\r\n            font-weight: 900;\r\n            color: #fff;\r\n            margin: 0 0 14px 0;\r\n            text-transform: uppercase;\r\n            text-shadow: 0 2px 6px rgba(0,0,0,0.8);\r\n        }\r\n        .product-title span { color: var(--neon-pink); }\r\n\r\n        .audio-box {\r\n            background: rgba(7, 9, 19, 0.9);\r\n            border: 1px solid rgba(0, 240, 255, 0.3);\r\n            border-radius: 12px;\r\n            padding: 10px;\r\n            margin: 16px 0;\r\n            box-shadow: inset 0 2px 5px rgba(0,0,0,0.6);\r\n        }\r\n\r\n        audio {\r\n            width: 100%;\r\n            height: 38px;\r\n            filter: invert(90%) hue-rotate(180deg);\r\n        }\r\n\r\n        .product-text {\r\n            font-size: 0.9rem;\r\n            line-height: 1.6;\r\n            color: var(--text-muted);\r\n            text-align: left;\r\n            background: rgba(7, 9, 19, 0.6);\r\n            padding: 14px;\r\n            border-radius: 10px;\r\n            border: 1px solid rgba(255, 255, 255, 0.03);\r\n            margin-top: 12px;\r\n            max-height: 160px;\r\n            overflow-y: auto;\r\n        }\r\n\r\n        .product-text::-webkit-scrollbar { width: 4px; }\r\n        .product-text::-webkit-scrollbar-thumb { background: var(--neon-purple); border-radius: 10px; }\r\n\r\n        .loading {\r\n            color: var(--neon-cyan);\r\n            font-family: 'Orbitron', sans-serif;\r\n            font-size: 0.9rem;\r\n            padding: 30px 0;\r\n            letter-spacing: 1px;\r\n            text-shadow: 0 0 8px rgba(0, 240, 255, 0.5);\r\n        }\r\n\r\n        .admin-link-box {\r\n            margin-top: 20px;\r\n            border-top: 1px solid rgba(255, 255, 255, 0.05);\r\n            padding-top: 12px;\r\n        }\r\n\r\n        .admin-trigger-btn {\r\n            background: transparent;\r\n            border: none;\r\n            color: var(--text-muted);\r\n            font-size: 0.7rem;\r\n            cursor: pointer;\r\n            text-decoration: none;\r\n            transition: color 0.2s ease;\r\n            text-transform: uppercase;\r\n            letter-spacing: 1px;\r\n        }\r\n        .admin-trigger-btn:hover {\r\n            color: var(--neon-cyan);\r\n            text-shadow: 0 0 5px rgba(0, 240, 255, 0.5);\r\n        }\r\n    <\/style>\r\n\r\n    <div class=\"guide-card\">\r\n        <div class=\"brand-header\">\ud83c\udfae Savoie R\u00e9tro Games \u2014 Audio-Guide<\/div>\r\n        \r\n        <div id=\"content\">\r\n            <div class=\"loading\">CHARGEMENT DU CATALOGUE...<\/div>\r\n        <\/div>\r\n\r\n        <div class=\"admin-link-box\">\r\n            <button type=\"button\" class=\"admin-trigger-btn\" onclick=\"openAdminPanel()\">\u2699\ufe0f Acc\u00e8s Espace Admin<\/button>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <script>\r\n        document.addEventListener(\"DOMContentLoaded\", function() {\r\n            const WEBHOOK_URL = \"https:\/\/script.google.com\/macros\/s\/AKfycbzzAY0ryL6F9HlEgP_KJDotWV3VQnen0-kVGAV1F0Nz9Oft-0Xpm7I6X1WsQQxemYIA8Q\/exec\";\r\n            const ADMIN_PASSWORD = \"srg2026\";\r\n\r\n            window.openAdminPanel = function() {\r\n                let pwd = prompt(\"Entrez le mot de passe administrateur :\");\r\n                if (pwd === ADMIN_PASSWORD) {\r\n                    window.open(WEBHOOK_URL, '_blank');\r\n                } else if (pwd !== null) {\r\n                    alert(\"Mot de passe incorrect.\");\r\n                }\r\n            };\r\n\r\n            const urlParams = new URLSearchParams(window.location.search);\r\n            const objectId = urlParams.get('id');\r\n\r\n            if (!objectId) {\r\n                async function fetchCatalog() {\r\n                    try {\r\n                        let response = await fetch(`${WEBHOOK_URL}?action=list`, { method: 'GET', mode: 'cors' });\r\n                        let data = await response.json();\r\n                        \r\n                        let itemsHtml = '';\r\n                        if (Array.isArray(data) && data.length > 0) {\r\n                            data.forEach(item => {\r\n                                if (item.id && item.nom) {\r\n                                    itemsHtml += `<a href=\"?id=${item.id}\" class=\"catalog-item\">\r\n                                        <span>\ud83d\udd79\ufe0f ${item.nom}<\/span>\r\n                                        <span class=\"item-arrow\">\u25b6<\/span>\r\n                                    <\/a>`;\r\n                                }\r\n                            });\r\n                        }\r\n\r\n                        document.getElementById('content').innerHTML = `\r\n                            <div class=\"welcome-icon\">\ud83c\udfa7<\/div>\r\n                            <h2 class=\"welcome-title\">Bienvenue sur l'<span>Audio-Guide<\/span><\/h2>\r\n                            <div class=\"welcome-text\">\r\n                                Voici l'audio-guide de toutes nos pi\u00e8ces de l'association. Vous n'avez qu'\u00e0 scanner le QR code d'une machine et en route pour l'histoire !\r\n                            <\/div>\r\n                            <div class=\"catalog-title\">Les pi\u00e8ces de l'exposition :<\/div>\r\n                            <div class=\"catalog-list\">\r\n                                ${itemsHtml || '<p style=\"color: var(--text-muted); font-size: 0.85rem; padding: 10px;\">Aucun objet pour le moment. Ajoutez-en via l\\'espace admin !<\/p>'}\r\n                            <\/div>\r\n                        `;\r\n                    } catch (e) {\r\n                        document.getElementById('content').innerHTML = `\r\n                            <div class=\"welcome-icon\">\ud83c\udfa7<\/div>\r\n                            <h2 class=\"welcome-title\">Bienvenue sur l'<span>Audio-Guide<\/span><\/h2>\r\n                            <div class=\"welcome-text\">\r\n                                Voici l'audio-guide de toutes nos pi\u00e8ces de l'association. Vous n'avez qu'\u00e0 scanner le QR code d'une machine et en route pour l'histoire !\r\n                            <\/div>\r\n                            <div class=\"catalog-title\">Les pi\u00e8ces de l'exposition :<\/div>\r\n                            <p style=\"color: var(--neon-pink); font-size: 0.85rem;\">Impossible de charger la liste des pi\u00e8ces.<\/p>\r\n                        `;\r\n                    }\r\n                }\r\n                fetchCatalog();\r\n                return;\r\n            }\r\n\r\n            let objectData = null;\r\n\r\n            function getCleanAudioUrl(rawUrl) {\r\n                if (!rawUrl) return \"\";\r\n                let match = rawUrl.match(\/\\\/d\\\/([a-zA-Z0-9_-]+)\/) || rawUrl.match(\/id=([a-zA-Z0-9_-]+)\/);\r\n                if (match && match[1]) {\r\n                    return \"https:\/\/docs.google.com\/uc?export=download&id=\" + match[1];\r\n                }\r\n                return rawUrl;\r\n            }\r\n\r\n            window.renderGuide = function(lang) {\r\n                if (!objectData || !objectData.Nom) {\r\n                    document.getElementById('content').innerHTML = `\r\n                        <a href=\"?\" class=\"back-home-btn\">\u2190 Retour au sommaire<\/a>\r\n                        <p style=\"color: var(--neon-pink); font-family: Orbitron; font-size: 0.9rem; margin-top: 20px;\">Objet introuvable dans la base.<\/p>\r\n                    `;\r\n                    return;\r\n                }\r\n\r\n                let text = objectData[`Texte_${lang}`] || objectData['Texte_FR'] || \"Description non disponible.\";\r\n                let rawAudioUrl = objectData[`Audio_${lang}`] || objectData['Audio_FR'] || \"\";\r\n                let audioUrl = getCleanAudioUrl(rawAudioUrl);\r\n\r\n                let html = `\r\n                    <div style=\"text-align: left;\">\r\n                        <a href=\"?\" class=\"back-home-btn\">\u2190 Retour au sommaire<\/a>\r\n                    <\/div>\r\n\r\n                    <div class=\"lang-selector\">\r\n                        <button class=\"lang-btn ${lang === 'FR' ? 'active' : ''}\" onclick=\"window.renderGuide('FR')\">\ud83c\uddeb\ud83c\uddf7 FR<\/button>\r\n                        <button class=\"lang-btn ${lang === 'EN' ? 'active' : ''}\" onclick=\"window.renderGuide('EN')\">\ud83c\uddec\ud83c\udde7 EN<\/button>\r\n                        <button class=\"lang-btn ${lang === 'JP' ? 'active' : ''}\" onclick=\"window.renderGrid ? window.renderGuide('JP') : window.renderGuide('JP')\">\ud83c\uddef\ud83c\uddf5 JP<\/button>\r\n                    <\/div>\r\n\r\n                    <div class=\"image-container\">\r\n                        <img decoding=\"async\" src=\"${objectData.Image || ''}\" alt=\"${objectData.Nom}\" class=\"product-image\">\r\n                    <\/div>\r\n                    \r\n                    <h1 class=\"product-title\">${objectData.Nom}<\/h1>\r\n\r\n                    <div class=\"audio-box\">\r\n                        <audio controls preload=\"auto\" id=\"audioPlayer\">\r\n                            <source src=\"${audioUrl}\" type=\"audio\/mp3\">\r\n                            Votre navigateur ne supporte pas l'\u00e9l\u00e9ment audio.\r\n                        <\/audio>\r\n                    <\/div>\r\n\r\n                    <div class=\"product-text\">\r\n                        ${text}\r\n                    <\/div>\r\n                `;\r\n\r\n                document.getElementById('content').innerHTML = html;\r\n                \r\n                const player = document.getElementById('audioPlayer');\r\n                if (player && audioUrl) {\r\n                    player.load();\r\n                }\r\n            }\r\n\r\n            async function fetchObjectData() {\r\n                try {\r\n                    let response = await fetch(`${WEBHOOK_URL}?id=${objectId}`, {\r\n                        method: 'GET',\r\n                        mode: 'cors'\r\n                    });\r\n                    objectData = await response.json();\r\n                    window.renderGuide('FR');\r\n                } catch (error) {\r\n                    document.getElementById('content').innerHTML = `\r\n                        <a href=\"?\" class=\"back-home-btn\">\u2190 Retour au sommaire<\/a>\r\n                        <p style=\"color: var(--neon-pink); font-family: Orbitron; font-size: 0.85rem; margin-top: 20px;\">Erreur de connexion avec le serveur de l'exposition.<\/p>\r\n                    `;\r\n                }\r\n            }\r\n\r\n            fetchObjectData();\r\n        });\r\n    <\/script>\r\n<\/div><\/div>\n                <\/div>\n              <\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"<p> [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-templates\/full-width-page.php","meta":{"footnotes":""},"class_list":["post-1492","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/savoieretrogames.fr\/index.php\/wp-json\/wp\/v2\/pages\/1492","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savoieretrogames.fr\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/savoieretrogames.fr\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/savoieretrogames.fr\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savoieretrogames.fr\/index.php\/wp-json\/wp\/v2\/comments?post=1492"}],"version-history":[{"count":12,"href":"https:\/\/savoieretrogames.fr\/index.php\/wp-json\/wp\/v2\/pages\/1492\/revisions"}],"predecessor-version":[{"id":1748,"href":"https:\/\/savoieretrogames.fr\/index.php\/wp-json\/wp\/v2\/pages\/1492\/revisions\/1748"}],"wp:attachment":[{"href":"https:\/\/savoieretrogames.fr\/index.php\/wp-json\/wp\/v2\/media?parent=1492"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}